FIX/Patterns.js: ensure proper start (>= 0 instead of > 0)

+ Several code cleanups

Author: guidoschmidt

package.json

@@ -1,6 +1,6 @@
 {
   "name": "artwork.running-patterns",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Running Patterns/Laufende Muster artwork for the vi.son - mixing-senses project",
   "main": "src/js/index.js",
   "scripts": {

src/js/artwork/ArtworkContainer.js

@@ -741,23 +741,32 @@ class Patterns {
     if (patternsLogic.values.state === PATTERNS_STATES.BEZIER_SETUP) {
       // Update bezier
       const { x, y, z } = this._startHandle.position;
-      this._startHandleLine.geometry.attributes.position.array[0] = this._startSphere.position.x;
-      this._startHandleLine.geometry.attributes.position.array[1] = this._startSphere.position.y;
-      this._startHandleLine.geometry.attributes.position.array[2] = this._startSphere.position.z;
+      this._startHandleLine.geometry.attributes.position.array[0] =
+        this._startSphere.position.x;
+      this._startHandleLine.geometry.attributes.position.array[1] =
+        this._startSphere.position.y;
+      this._startHandleLine.geometry.attributes.position.array[2] =
+        this._startSphere.position.z;
 
       this._startHandleLine.geometry.attributes.position.array[3] = x;
       this._startHandleLine.geometry.attributes.position.array[4] = y;
       this._startHandleLine.geometry.attributes.position.array[5] = z;
 
       this._startHandleLine.geometry.attributes.position.needsUpdate = true;
 
-      this._endHandleLine.geometry.attributes.position.array[0] = this._endSphere.position.x;
-      this._endHandleLine.geometry.attributes.position.array[1] = this._endSphere.position.y;
-      this._endHandleLine.geometry.attributes.position.array[2] = this._endSphere.position.z;
-
-      this._endHandleLine.geometry.attributes.position.array[3] = this._endHandle.position.x;
-      this._endHandleLine.geometry.attributes.position.array[4] = this._endHandle.position.y;
-      this._endHandleLine.geometry.attributes.position.array[5] = this._endHandle.position.z;
+      this._endHandleLine.geometry.attributes.position.array[0] =
+        this._endSphere.position.x;
+      this._endHandleLine.geometry.attributes.position.array[1] =
+        this._endSphere.position.y;
+      this._endHandleLine.geometry.attributes.position.array[2] =
+        this._endSphere.position.z;
+
+      this._endHandleLine.geometry.attributes.position.array[3] =
+        this._endHandle.position.x;
+      this._endHandleLine.geometry.attributes.position.array[4] =
+        this._endHandle.position.y;
+      this._endHandleLine.geometry.attributes.position.array[5] =
+        this._endHandle.position.z;
       this._endHandleLine.geometry.attributes.position.needsUpdate = true;
     }
 
@@ -803,7 +812,7 @@ class Patterns {
     if (this._stats !== undefined) {
       this._stats.update();
     }
-    if (this._audioPlayProgress <= 1.0 && this._audioStartedAt > 0) {
+    if (this._audioPlayProgress <= 1.0 && this._audioStartedAt >= 0) {
       patternsLogic.actions.updatePlayProgress(this._audioPlayProgress);
       this._$f++;
     }

src/js/artwork/Patterns.js

@@ -20,14 +20,13 @@ class PatternsTrack extends THREE.Group {
     threshold
   ) {
     super();
-
+    this.setupAudio(audioListener);
     this._colorChannel = colorChannel;
     this._yOffset = yOffset;
     this._color = color;
     this._index = index;
     this._trackName = name;
     this._threshold = threshold;
-
     this._material = new THREE.ShaderMaterial({
       vertexShader: patternVS,
       fragmentShader: patternFS,
@@ -64,11 +63,9 @@ class PatternsTrack extends THREE.Group {
     console.log("Y offset", this._yOffset);
     console.log("Color", this._color);
     console.groupEnd();
-
-    this._setupAudio(audioListener);
   }
 
-  _setupAudio(audioListener) {
+  setupAudio(audioListener) {
     this._audio = new THREE.Audio(audioListener);
     this._analyzer = new THREE.AudioAnalyser(this._audio, 32);
   }
@@ -239,9 +236,8 @@ class PatternsTrack extends THREE.Group {
       );
       geometries.push(instanceGeometry);
     }
-    const patternsGeometry = BufferGeometryUtils.mergeBufferGeometries(
-      geometries
-    );
+    const patternsGeometry =
+      BufferGeometryUtils.mergeBufferGeometries(geometries);
     this._instanceMesh = new THREE.Mesh(patternsGeometry, this._material);
     return this._instanceMesh;
   }

src/js/artwork/PatternsTrack.js

@@ -29,10 +29,11 @@ const PatternsUI = ({ paused }) => {
   }, []);
 
   useEffect(() => {
-    if (artwork && paused) {
+    if (artwork === null) return;
+    if (paused) {
       artwork.pause();
     }
-    if (artwork && !paused) {
+    if (!paused) {
       artwork.continue();
     }
   }, [paused]);

src/js/artwork/PatternsUI.js

@@ -12,7 +12,6 @@ import { ButtonCloseNarrative } from "@vi.son/components";
 import { ButtonEmoji } from "@vi.son/components";
 import { ButtonOpenNarrative } from "@vi.son/components";
 import { ButtonToExhibition } from "@vi.son/components";
-import ArtworkContainer from "./artwork/ArtworkContainer.js";
 import PatternsUI from "./artwork/PatternsUI.js";
 import Intro from "./artwork/Intro.js";
 import TrackUserInterface from "./artwork/TrackUserInterface.js";
@@ -37,10 +36,8 @@ const Artwork = () => {
   const [content, setContent] = useState({});
   const [isFullscreen, setIsFullscreen] = useState(false);
 
-  const { state, patternTracks, volumes } = useValues(patternsLogic);
-  const { setState, updatePatternTrack, updateVolume } = useActions(
-    patternsLogic
-  );
+  const { state, patternTracks } = useValues(patternsLogic);
+  const { setState } = useActions(patternsLogic);
 
   const isMobile = mobileCheck();
 
@@ -77,7 +74,6 @@ const Artwork = () => {
             <h1 className="state">{state}</h1>
           )}
           <PatternsUI paused={showNarrative} />
-          {/* <ArtworkContainer /> */}
         </div>
       }
       content={