adds spider legs

rohbot · rohbot · commit 3d53607bf24e · 2025-10-06T21:51:55.000+11:00
diff --git a/public/ep-l/index.html b/public/ep-l/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Spider Legs</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+
+    <script src="libraries/p5.min.js"></script>
+  </head>
+
+  <body>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/public/ep-l/jsconfig.json b/public/ep-l/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "include": [
+    "*.js",
+    "libraries/*.js",
+    "/home/rohanoahmad/.vscode/extensions/samplavigne.p5-vscode-1.2.7/p5types/global.d.ts"
+  ]
+}
diff --git a/public/ep-l/libraries/p5.min.js b/public/ep-l/libraries/p5.min.js
diff --git a/public/ep-l/sketch.js b/public/ep-l/sketch.js
@@ -0,0 +1,83 @@
+const numRays = 8;
+const shadeStep = 1;
+const fadeDurationSeconds = 2;
+const minRayLength = 100;
+const maxRayLength = 300;
+const angleNoiseSpeed = 0.1;
+const lengthNoiseSpeed = 2;
+const positionNoiseSpeed = 0.4;
+
+let shade = 255;
+let shadeDirection = -1;
+let angleOffsets = [];
+let lengthOffsets = [];
+let xOffset;
+let yOffset;
+let emitterX;
+let emitterY;
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  background(0);
+  strokeWeight(10);
+  strokeCap(ROUND);
+
+  angleMode(RADIANS);
+  noiseDetail(2, 0.5);
+
+  for (let i = 0; i < numRays; i += 1) {
+    angleOffsets[i] = random(1000) + i * 50;
+    lengthOffsets[i] = random(2000) + i * 100;
+  }
+
+  xOffset = random(5000);
+  yOffset = random(6000);
+  emitterX = width / 2;
+  emitterY = height / 2;
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+  background(0);
+}
+
+function draw() {
+  const dtSeconds = deltaTime * 0.001;
+  const fadeAlpha = min((255 * dtSeconds) / fadeDurationSeconds, 255);
+  noStroke();
+  fill(0, fadeAlpha);
+  rect(0, 0, width, height);
+
+  xOffset += positionNoiseSpeed * dtSeconds;
+  yOffset += positionNoiseSpeed * dtSeconds;
+
+  emitterX = map(noise(xOffset), 0, 1, 0, width);
+  emitterY = map(noise(yOffset), 0, 1, 0, height);
+
+  strokeWeight(4);
+
+  for (let i = 0; i < numRays; i += 1) {
+    const angleNoise = noise(angleOffsets[i]);
+    const lengthNoise = noise(lengthOffsets[i]);
+    const angle = angleNoise * TWO_PI;
+    const rayLength = map(lengthNoise, 0, 1, minRayLength, maxRayLength);
+    const targetX = emitterX + cos(angle) * rayLength;
+    const targetY = emitterY + sin(angle) * rayLength;
+
+    stroke(shade);
+    line(emitterX, emitterY, targetX, targetY);
+
+    shade += shadeDirection * shadeStep;
+    if (shade >= 255 || shade <= 0) {
+      shade = constrain(shade, 0, 255);
+      shadeDirection *= -1;
+    }
+
+    angleOffsets[i] += angleNoiseSpeed * dtSeconds;
+    lengthOffsets[i] += lengthNoiseSpeed * dtSeconds;
+  }
+}
+
+function mousePressed() {
+  background(0);
+}
diff --git a/public/ep-l/style.css b/public/ep-l/style.css
@@ -0,0 +1,8 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+canvas {
+  display: block;
+}
diff --git a/public/index.html b/public/index.html
@@ -32,6 +32,8 @@
     <a href ="ep-i/index.html">Photo Lines</a> <br/>
     <a href ="ep-j/index.html">Duck Dots</a> <br/>
     <a href ="ep-k/index.html">Grey Triangles</a> <br/>
+    <a href ="ep-l/index.html">Spider Legs</a> <br/>
+
 
   </body>
 </html>
