Merge pull request #669 from ShardulNalegave/PerlinNoiseFlowField-ShardulNalegave

thinkswell · web-flow · commit 3513f0373161 · 2023-10-07T23:51:20.000+05:30
Perlin Noise Flow-Field project
diff --git a/PerlinNoiseFlowField/ShardulNalegave/README.md b/PerlinNoiseFlowField/ShardulNalegave/README.md
@@ -0,0 +1,4 @@
+
+# Perlin Noise Flow-Field
+
+![Demo](https://i.ibb.co/xLf1jY8/demo.png)
diff --git a/PerlinNoiseFlowField/ShardulNalegave/demo.png b/PerlinNoiseFlowField/ShardulNalegave/demo.png
diff --git a/PerlinNoiseFlowField/ShardulNalegave/index.html b/PerlinNoiseFlowField/ShardulNalegave/index.html
@@ -0,0 +1,12 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Perlin Noise Flow-Field</title>
+</head>
+<body>
+  <script src="https://cdn.jsdelivr.net/npm/p5@1.7.0/lib/p5.js"></script>
+  <script src="./particle.js"></script>
+  <script src="./index.js"></script>
+</body>
+</html>
diff --git a/PerlinNoiseFlowField/ShardulNalegave/index.js b/PerlinNoiseFlowField/ShardulNalegave/index.js
@@ -0,0 +1,59 @@
+
+const inc = 0.1;
+let zoff = 0;
+const scale = 40;
+let rows, cols;
+let fr;
+
+const flowField = [];
+const numParticles = 600;
+const particles = [];
+
+function setup() {
+  createCanvas(1000, 800);
+  cols = floor(width / scale);
+  rows = floor(height / scale);
+  fr = createP('');
+
+  for (let i = 0; i < numParticles; i++) {
+    particles[i] = new Particle();
+  }
+}
+
+function draw() {
+  background(0);
+
+  let yoff = 0;
+  for (let y = 0; y < rows; y++) {
+    let xoff = 0;
+
+    for (let x = 0; x < cols; x++) {
+      let angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
+      let v = p5.Vector.fromAngle(angle);
+      v.setMag(0.5);
+      xoff += inc;
+      
+      let index = x + (y * cols);
+      flowField[index] = v;
+
+      stroke(255, 50);
+      strokeWeight(1);
+      push();
+      translate(x * scale, y * scale);
+      rotate(v.heading());
+      line(0, 0, scale, 0);
+      pop();
+    }
+
+    yoff += inc;
+    zoff += 0.0003;
+  }
+
+  for (let i = 0; i < numParticles; i++) {
+    particles[i].follow(flowField, scale);
+    particles[i].update();
+    particles[i].draw();
+  }
+
+  fr.html(floor(frameRate()));
+}
diff --git a/PerlinNoiseFlowField/ShardulNalegave/particle.js b/PerlinNoiseFlowField/ShardulNalegave/particle.js
@@ -0,0 +1,39 @@
+
+class Particle {
+  constructor() {
+    this.pos = createVector(random(width), random(height));
+    this.vel = createVector(0, 0);
+    this.accel = createVector(0, 0);
+  }
+
+  update() {
+    this.vel.add(this.accel);
+    this.pos.add(this.vel);
+    this.accel.mult(0);
+    this.vel.limit(4); // max-speed
+
+    if (this.pos.x > width) this.pos.x = 0;
+    if (this.pos.x < 0) this.pos.x = width;
+
+    if (this.pos.y > height) this.pos.y = 0;
+    if (this.pos.y < 0) this.pos.y = height;
+  }
+
+  follow(flowField, scale) {
+    let x = floor(this.pos.x / scale);
+    let y = floor(this.pos.y / scale);
+    let index = x + (y * cols);
+    let force = flowField[index];
+    this.applyForce(force);
+  }
+
+  applyForce(force) {
+    this.accel.add(force);
+  }
+
+  draw() {
+    strokeWeight(2);
+    stroke(255);
+    point(this.pos.x, this.pos.y);
+  }
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
++
 +# Perlin Noise Flow-Field
++
 +![Demo](https://i.ibb.co/xLf1jY8/demo.png)