First commit of flow field project

andwin · Feb 19, 2024 · 1bd9db3 · 1bd9db3
1 parent 8263e46
commit 1bd9db3
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
   const demos = [
+    {
+      title: 'Flow field',
+      link: './src/flowfield/',
+    },
     {
       title: 'Rektron logo',
       link: './src/rektron/',

diff --git a/src/flowfield/index.html b/src/flowfield/index.html
@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <title>Flow field</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
+    <script src="./index.js"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/src/flowfield/index.js b/src/flowfield/index.js
@@ -0,0 +1,52 @@
+/* eslint-disable no-undef */
+const particles = []
+const noiseScale = 0.01
+const speed = 4
+let bgColor
+
+function setup() {
+  bgColor = color('#1A1B3E')
+  bgColor.setAlpha(40)
+
+  createCanvas(window.innerWidth, window.innerHeight)
+
+  particles.length = 0
+  const numberOfParticles = Math.min(height, width)
+  for (let i = 0; i < numberOfParticles; i++) {
+    const particle = {}
+    initParticle(particle)
+    particles.push(particle)
+  }
+}
+window.onresize = setup
+
+function draw() {
+  background(bgColor)
+  strokeWeight(3)
+  stroke(230)
+
+  for (const particle of particles) {
+    drawParticle(particle)
+    moveParticle(particle)
+    if (isOffscreen(particle)) initParticle(particle)
+  }
+}
+
+const initParticle = (particle) => {
+  particle.position = createVector(random(width), random(height))
+}
+
+const drawParticle = (particle) => {
+  point(particle.position.x, particle.position.y)
+}
+
+const moveParticle = (particle) => {
+  const time = frameCount * 0.01
+  const noiseValue = noise(particle.position.x * noiseScale, particle.position.y * noiseScale, time)
+
+  const angle = 2 * PI * noiseValue
+  const v = p5.Vector.fromAngle(angle).setMag(speed)
+  particle.position.add(v)
+}
+
+const isOffscreen = particle => particle.position.x <= 0 || particle.position.x >= width || particle.position.y <= 0 || particle.position.y >= height
diff --git a/src/flowfield/preview.png b/src/flowfield/preview.png