small update front page

front-page-sketch/arrowGrid.js

@@ -1,9 +1,14 @@
 let font;
 let cnv;
-let mskcnv;
-
-let noiseScale = 0.01; // Adjust this to change the noisiness
 let timeOffset = 0;
+let previousTime = 0;
+
+let interpolationTimer = 0;
+let incrementTimer = false;
+const timeLimit = 500000; // Maximum time for interpolation (in ms)
+
+let mskcnv;
+let isDesktop;
 
 function preload() {
   font = loadFont('../fonts/Syne-SemiBold.ttf');
@@ -16,60 +21,111 @@ function setup() {
   noStroke();
 
   mskcnv = createGraphics(windowWidth, windowHeight);
-  mskcnv.background(243, 239, 238);
-  mskcnv.noStroke();
-  mskcnv.blendMode(REMOVE);
+  resetMaskCanvas();
+
+  isDesktop = !isMobileDevice();
 }
 
 function draw() {
   background(243, 239, 238);
 
-  mskcnv.fill(243, 239, 238);
-  mskcnv.circle(mouseX, mouseY, 100);
+
   sArrowGrid(0, 0);
-  image(mskcnv, 0, 0);
-
+  if (isDesktop) {
+    updateMask(mouseX, mouseY);
+    image(mskcnv, 0, 0);
+  }
+  // displayFramerate();
+}
 
+function resetMaskCanvas() {
+  // Function to reset the mask canvas
+  mskcnv.background(243, 239, 238);
+  mskcnv.noStroke();
+  mskcnv.blendMode(REMOVE);
+}
 
-  // displayFramerate();
+function updateMask(x, y) {
+  // Only update mask for desktop and when the mouse moves
+  mskcnv.fill(243, 239, 238);
+  mskcnv.circle(x, y, 100);
 }
 
 function windowResized() {
-  // Resize the canvas to fit the new window dimensions
   resizeCanvas(windowWidth, windowHeight);
+  mskcnv = createGraphics(windowWidth, windowHeight);
+  resetMaskCanvas(); // Reset the mask on window resize
 }
 
 function displayFramerate() {
-
   fill(255);
   rect(0, 0, 100, 60);
 
-  let currentFramerate = floor(1000 / deltaTime);
-  if (currentFramerate > 30) {
-
-    fill(100, 200, 200);
-  } else {
-    fill(0, 200, 200);
-  }
+  const currentFramerate = floor(1000 / deltaTime);
+  fill(currentFramerate > 30 ? [0, 255, 0] : [255, 0, 0]);
   text(currentFramerate, 20, 40);
 }
 
 function sArrowGrid(xOffset, yOffset) {
-
-  // clear(); // Clear the graphics buffer
   fill(0);
-  let cellSize = 60;
+
+  const currentTime = millis();
+  const deltaTime = currentTime - previousTime;  // Time elapsed since last frame
+  previousTime = currentTime;
+
+  const cellSize = 60;
+  const halfCellSize = cellSize / 2;
+  const noiseSpeed = 0.003;
+  const gridInfluence = 0.5;
+  const invWidth = 1 / width;
+  const invHeight = 1 / height;
+  const frameNoiseSpeed = frameCount * noiseSpeed; // Avoid recalculating this for each grid cell
+
   for (let x = 0; x < width; x += cellSize) {
+    const noisexBase = frameNoiseSpeed + (x * invWidth) * gridInfluence;
+
     for (let y = 0; y < height; y += cellSize) {
-      let dx = mouseX - (x + xOffset) - cellSize / 2;
-      let dy = mouseY - (y + yOffset) - cellSize / 2;
-      let angle = atan2(dy, dx);
+      const noiseyBase = frameNoiseSpeed + (y * invHeight) * gridInfluence;
+
+      let noiseAngle = noise(noisexBase, noiseyBase); 
+      noiseAngle = map(noiseAngle, 0.4, 0.6, -PI, PI);
+      let angle = noiseAngle;
+
+      if (interpolationTimer > 0) {
+        // Update the timer and clamp within the range
+        interpolationTimer += incrementTimer ? deltaTime : -deltaTime;
+        interpolationTimer = constrain(interpolationTimer, 0, timeLimit);
+
+        // Switch direction of timer at limits
+        if (interpolationTimer >= timeLimit) incrementTimer = false;
+        if (interpolationTimer <= 0) incrementTimer = true;
+
+        const interpolate = min(1, map(interpolationTimer, 0, 150000, 0, 1));
+
+        // Follow mouse position and interpolate
+        const dx = mouseX - (x + xOffset + halfCellSize);
+        const dy = mouseY - (y + yOffset + halfCellSize);
+        const followAngle = atan2(dy, dx);
+        angle = lerp(noiseAngle, followAngle, interpolate);
+      }
+
+      // Draw arrow
       push();
-      translate(x + cellSize / 2, y + cellSize / 2);
+      translate(x + halfCellSize, y + halfCellSize);
       rotate(angle);
-      text("→", 0, 0);
+      text("→", -8, 5); // Magic number to center the arrow on pivot
       pop();
     }
   }
-  timeOffset += 0.005;
-}
+}
+
+function mouseClicked() {
+  if (interpolationTimer <= 1) {
+    incrementTimer = true;
+    interpolationTimer = 1;
+  }
+}
+
+function isMobileDevice() {
+  return /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent);
+}