Merge branch 'master' of https://github.com/jameswilce/DevMinDArT

jameswilce · Feb 17, 2024 · ffbb71b · ffbb71b
2 parents b56914d + 049dce7
commit ffbb71b
Show file tree

Hide file tree

Showing 6 changed files with 636 additions and 98 deletions.
diff --git a/MinDArT-5-Dotscape/dotscape.js b/MinDArT-5-Dotscape/dotscape.js
@@ -7,10 +7,15 @@ let dots = [],
   dotSize, dotQty, ringQty;
 
 // mouse/geometry tracking
-let isMousedown, tempwinMouseX, tempwinMouseY, tempwinMouseX2, tempwinMouseY2,
+let isMousedown,
+  tempwinMouseX,
+  tempwinMouseY,
+  tempwinMouseX2,
+  tempwinMouseY2,
   verifyX = 0,
   verifyY = 0,
-  vMax, circleRad,
+  vMax,
+  circleRad,
   rad = 50.0; // animatedRadius
 
 // colour tracking
@@ -54,8 +59,7 @@ function preload() {
 
 function start() {
   $(".startBtn").remove();
-  //fullscreen(1);
-  // note currently everything resets on windowResized. Unsure if this is logical yet
+
 
   if (audio.isPlaying()) {} else {
     audio.loop(1);
@@ -85,35 +89,27 @@ function setup() {
   stbtn.mousedown(start);
   stbtn.mousemove(start);
 
-
-
 }
 
 function reset() {
-
-
   // initialised dimensions and start intro
   dimensionCalc();
-  intro_X = (width * 0.30) - 100;
+  intro_X = width * 0.3 - 100;
 
   // add all event listeners to the canvas
-  canvas.addEventListener('touchmove', moved);
-  canvas.addEventListener('mousemove', moved);
-  canvas.addEventListener('touchstart', touchdown);
-  canvas.addEventListener('mousedown', touchdown);
-  canvas.addEventListener('touchend', touchstop);
-  canvas.addEventListener('touchleave', touchstop);
-  canvas.addEventListener('mouseup', touchstop);
-  canvas.addEventListener('mouseup', touchstop);
-  // canvas.addEventListener('orientationchange', resizeWindow);
-  // canvas.addEventListener('resize', resizeWindow);
+  canvas.addEventListener("touchmove", moved);
+  canvas.addEventListener("mousemove", moved);
+  canvas.addEventListener("touchstart", touchdown);
+  canvas.addEventListener("mousedown", touchdown);
+  canvas.addEventListener("touchend", touchstop);
+ // canvas.addEventListener("touchleave", touchstop);
+  canvas.addEventListener("mouseup", touchstop);
 
   //DATA
   lineStore = [];
   pointStore = [];
 
-    render();
-
+  render();
 }
 
 // calcuate Dimensions for use in this sketch, done during initialise and resize.
@@ -131,74 +127,91 @@ function windowResized() {
   sizeWindow();
 }
 
-function sizeWindow(){
+function sizeWindow() {
   resizeCanvas(windowWidth, windowHeight);
   lineLayer.resizeCanvas(windowWidth, windowHeight);
   permaLine.resizeCanvas(windowWidth, windowHeight);
   tintedBG.resizeCanvas(windowWidth, windowHeight);
   dimensionCalc();
   removeElements();
   writeTextUI();
-   // checkFS();
   stage--;
   nextDrawing();
 }
 
-function touchdown(ev) {
+/**function touchdown(ev) {
   isMousedown = 1;
 
   let _x = winMouseX;
   let _y = winMouseY;
   for (let i = 0; i < dotsCount; i++) {
-
     dots[i].getCol(_x, _y);
-//    dots[i].clicked(_y, _y); //todo/// BUG: , cause of double line issues?
   }
 
   return false;
 }
+*/
+function touchdown(ev) {
+  isMousedown = true;
+  return false;
+}
 
-function touchstop() {
-  isMousedown = 0;
-  lineLayer.clear();
-  throughDotCount = 0;
-  render();
+function touchstop(ev) {
+  isMousedown = false;
 }
 
+getPressure = function (ev) {
+  return ev.touches &&
+    ev.touches[0] &&
+    typeof ev.touches[0]["force"] !== "undefined"
+    ? ev.touches[0]["force"]
+    : 1.0;
+};
+
+// Moved event handler function
 function moved(ev) {
+  // Check if the mouse button is currently being pressed
+  if (!touchstop) return;
 
-  if (!isMousedown) return;
+  // Prevent the default behavior of the event
   ev.preventDefault();
 
-
+  // Call clicked method on all dots
   for (let i = 0; i < dotsCount; i++) {
     dots[i].clicked(winMouseX, winMouseY);
   }
+
+  // Set the stroke color, weight, and clear the layer
   lineLayer.stroke(colHue, colSat, colBri, 80);
   lineLayer.strokeWeight(8);
   lineLayer.clear();
+
+  // Draw the line if there are through dots
   if (throughDotCount > 0) {
     lineLayer.line(tempwinMouseX, tempwinMouseY, winMouseX, winMouseY);
   }
 
+  // Store the data
+  try {
+    const pressure = getPressure(ev);
+    pointStore.push({
+      time: new Date().getTime(),
+      x: mouseX,
+      y: mouseY,
+      pressure: pressure,
+    });
+  } catch (error) {
+    console.error("Error getting pressure:", error);
+  }
 
-  //DATA
-  pressure = getPressure(ev);
-  pointStore.push({
-    time: new Date().getTime(),
-    x: mouseX,
-    y: mouseY,
-    pressure: pressure
-  });
-
-  render();
+  // Request animation frame to render the scene
+  requestAnimationFrame(render);
 
+  // Return false to prevent the event from propagating
   return false;
 }
 
-
 function render() {
-
   image(tintedBG, 0, 0, width, height);
   image(lineLayer, 0, 0);
   image(permaLine, 0, 0);
@@ -213,8 +226,6 @@ function render() {
   }
 }
 
-
-
 //startSimulation and pauseSimulation defined elsewhere
 function handleVisibilityChange() {
   if (document.hidden) {
@@ -226,7 +237,6 @@ function handleVisibilityChange() {
 
 document.addEventListener("visibilitychange", handleVisibilityChange, false);
 
-
 function copyLine() {
   permaLine.stroke(colHue, colSat, colBri, 80);
   permaLine.strokeWeight(8);
@@ -235,28 +245,26 @@ function copyLine() {
     let y1 = tempwinMouseY;
     let x2 = tempwinMouseX2;
     let y2 = tempwinMouseY2;
-  permaLine.line(x1, y1, x2, y2);
+    permaLine.line(x1, y1, x2, y2);
     //DATA
     lineStore.push({
       line: {
         x1: x1,
         y1: y1,
         x2: x2,
-        y2: y2
+        y2: y2,
       },
       points: pointStore,
-      stage: stage
+      stage: stage,
     });
     pointStore = [];
-
   }
+    // STOP DRAWING
+    if (throughDotCount > 1) {
+      throughDotCount = 0;
+    }
 }
 
-getPressure = function(ev) {
-  return ((ev.touches && ev.touches[0] && typeof ev.touches[0]["force"] !== "undefined") ? ev.touches[0]["force"] : 1.0);
-}
-
-
 // Dot class, not used in intro
 class Dot {
   constructor(x, y, r) {
@@ -285,13 +293,15 @@ class Dot {
     }
   }
   clicked(x, y) {
-
-    let rMultiplier = 1.4; //{previously 1}
+    let rMultiplier = 1;
     let d = dist(x, y, this.x, this.y);
     if (throughDotCount === 0) {
       rMultiplier = 1.4; // increase radius for first grab {previously 1.2}
     }
-    if (d < this.r * 2.05 * rMultiplier && (this.x != verifyX || this.y != verifyY)) {
+    if (
+      d < this.r * 2.05 * rMultiplier &&
+      (this.x != verifyX || this.y != verifyY)
+    ) {
       verifyX = this.x;
       verifyY = this.y;
       tempwinMouseX2 = tempwinMouseX;
@@ -301,12 +311,11 @@ class Dot {
       throughDotCount++;
       tempOpacity = 20;
       hitRad = 60;
-      // this.brightness = 250;
       if (colHue != this.h) {
         if (abs(colHue - this.h) > 280) {
-          this.h = (((this.h + colHue) / 2) - 180) % 360;;
+          this.h = ((this.h + colHue) / 2 - 180) % 360;
         } else {
-          this.h = ((this.h + colHue) / 2) % 360;;
+          this.h = ((this.h + colHue) / 2) % 360;
         }
       }
       colHue = this.h;
@@ -317,10 +326,11 @@ class Dot {
   }
 }
 
+
+
 function nextDrawing() {
   throughDotCount = 0;
   dotsCount = 0;
-  // click.play();
   permaLine.clear();
   lineLayer.clear();
   if (stage < 3) {