Veröffentlicht am 07-09-2019

DJ und VJ alleine in Sekunden im Web

Beact, du brauchst nur einen Browser, um DJ + VJ zu werden!

Beact Here spielen | Quellcode

Videoaufnahmen für „Beact“. (2017.7)

1. Grundsätzliche Verwendung

Keyboard- und Sequenzer-Pads

  1. Klicken Sie auf das Drum-Pad, um Ihr eigenes Pattern zu erstellen.
  2. Drücken Sie die Leertaste, um zu starten / zu stoppen.
  3. Drücken Sie hoch / runter, um die BPM zu ändern.
  4. links / rechts, um die Klangbeispiele zu ändern.
  5. Drücken Sie 1 ~ 8, um voreingestellte Muster auszulösen.
  6. Drücken Sie a ~ z, um Animation und Audio wie bei patatap auszulösen.

Seitenleisten

  1. Start stop
  2. Muster: Erstellen Sie ein Muster, geben Sie den Namen ein und drücken Sie auf Hinzufügen, um Ihr Muster auf den Server und in den Speicher hochzuladen.
  3. Kette: Verketten Sie einige Muster zu einem Song.
  4. Recorder: Nehmen Sie das Drum-Machine-Pattern und das Keyboard zusammen in einer Aufnahme auf und laden Sie es auf den Server hoch, damit Sie es teilen und wiedergeben können.

2. Einführung

Es ist nicht nur ein audiovisuelles Kunstwerk, sondern auch ein Instrument, mit dem jeder spielen kann, um DJ + VJ zu werden.

Basierend auf der Idee von Patatap verwendet „Beact“ Two.js, Tone.js als Audio- bzw. Visual-Engine-Bibliothek. Es kombiniert das Konzept des Sequenzers mit der Tastatur und wird so zu einem vollständigen Set, mit dem Musiker ihre Arbeit in einem Browser ausführen können. In diesem Projekt wird kreative Codierung mit konzeptioneller Integrität in die Softwarearchitektur integriert.

3. Inspiration

In meiner Freizeit folgte ich einigen Künstlern / Hackern / Musikern, die den Browser und das Internet als Medien zum Erstellen verwendeten. Manchmal fand ich Arbeiten so erstaunlich, dass ich den Mund vor meinem Computer nicht schließen konnte. Das Konzept „Patatap“ ist wirklich faszinierend, dass jeder Buchstabe einem Ton und einer Animation entspricht. Es verwandelt abstrakte Wörter in ein schönes Ergebnis.

Nach einer Weile wollte ich es als Instrument für meinen Auftritt verwenden und daraus Lieder komponieren. Das System hat mir dies jedoch nicht erlaubt. Ich begann darüber nachzudenken, es zu ändern. Das ist der Ausgangspunkt von "Beact".

4. Zusammenarbeit und Git

Am Anfang habe ich "Beact" selbst entwickelt. Als ich das Front-End-Programm beendet hatte, das die Kernlogik dieses Projekts darstellt, bat ich zwei meiner Freunde, Yu-An Chan und Joey Huang, mir beim Back-End bzw. CSS zu helfen. Ich wurde der technische Leiter und Projektmanager des 3-Personen-Teams und war verantwortlich für das gesamte Front-End-Design, einschließlich visueller und Audio-Effekte.

Wir haben git als Tool zur Versionskontrolle verwendet. Die Größe des Quellcodes erschwerte die Zusammenarbeit erheblich und führte dazu, dass einige Konflikte nur schwer zu lösen waren. Ich habe in diesem Projekt viel über den Workflow von Git gelernt und mich mit dem Teamwork-Muster in der groß angelegten Softwareentwicklung vertraut gemacht.

Screenshot einer Szene von Beact. (2017.7)

5. Beact mit Performer / Publikum

Es gibt mehrere vorhandene Bibliotheken, die Audio- oder visuelle Effekte auf Node Package Manager (NPM) unterstützen. Daher musste ich diejenigen finden, die für mein Projekt am besten geeignet waren. Ich habe React als Framework und Webpack als Modulbündler verwendet.

Anfänglich konnte der Benutzer nur die Tastatur verwenden, um auf die Funktionen zuzugreifen. Nach einer Weile fügte ich dem MIDI-Controller den Anschlussport hinzu, damit Musiker „Beact“ mit ihren eigenen Instrumenten spielen konnten.

Beact ist nicht nur eine einfache App, mit der sich die Leute amüsieren können, sondern auch ein leistungsstarkes Audio- / Videotool, auf das mit einem Browser für Interpreten zugegriffen werden kann.
Screenshot einer Szene von Beact. (2017.7)

6. UI / UX-Analyse

Als ich die stabile Version von Beact fertiggestellt und mit Heroku veröffentlicht habe, bekam ich einige Rückmeldungen, dass sich einige Benutzer nicht intuitiv genug fühlten, um sie ohne textbasiertes Handbuch zu verwenden. Ich griff nach einer Freundin, Frau Fang, die UI / UX an der Nationalen Tsing Hua Universität in Taiwan studiert. Wir diskutieren derzeit, wie die Benutzeroberfläche / UX benutzerfreundlicher und instinktiver gestaltet werden kann, damit Benutzer sie ohne Handbuch verwenden können.

Die Benutzeroberfläche von Beact 0.0.1

Siehe auch

Wer ist Torbjørn Rødland?Die Psychologie der KunstNutzung von Technologie, um die weltweite Bekanntheit von Kunst zu steigern.Alex KatzInterview mit dem bekannten russischen Künstler Pokras LampasÜber den Weltraum von Samuel Rowlett