adding star field animation

DrDr3ck · Jul 1, 2020 · 21b14a8 · 21b14a8
1 parent 26de455
commit 21b14a8
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 0 deletions.
diff --git a/StarField/index.html b/StarField/index.html
@@ -0,0 +1,13 @@
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
+    <!-- script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.dom.min.js"></script-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="../style.css">
+    <script src="star.js"></script>
+  </head>
+  <body>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/StarField/sketch.js b/StarField/sketch.js
@@ -0,0 +1,24 @@
+let stars = [];
+let speed;
+
+function setup() {
+    createCanvas(800, 800);
+
+    for( let i=0; i < 200; i++ ) {
+        stars.push(new Star());
+    }
+}
+
+function draw() {
+    background(0);
+
+    speed = map(mouseX, 0, width, 0, 50);
+    speed = max(speed, 0);
+    speed = min(speed, 50);
+    translate(width/2, height/2);
+
+    for( const star of stars ) {
+        star.update();
+        star.show();
+    }
+}
diff --git a/StarField/star.js b/StarField/star.js
@@ -0,0 +1,39 @@
+function Star() {
+    this.x = random(-width/2, width/2);
+    this.y = random(-height/2, height/2);
+    this.z = random(width);
+    if( random() > 0.5 ) {
+        this.color = [0,0,random()*127+128];
+    } else {
+        const c = random()*127+128;
+        this.color = [c,c,c];
+    }
+    this.pz = this.z;
+
+    this.show = function() {
+        const sx = map(this.x / this.z,0,1,0,width);
+        const sy = map(this.y / this.z,0,1,0,height);
+        const r = map(this.z, 0, width, 8, 0);
+        const px = map(this.x / this.pz,0,1,0,width);
+        const py = map(this.y / this.pz,0,1,0,height);
+        this.pz = this.z;
+
+        stroke(this.color[0],this.color[1],this.color[2]);
+        line(px, py, sx, sy);
+
+        noStroke();
+        fill(this.color[2]);
+        ellipse(sx, sy, r, r);
+
+    }
+
+    this.update = function() {
+        this.z = this.z - speed;
+        if( this.z < 1 ) {
+            this.x = random(-width/2, width/2);
+            this.y = random(-height/2, height/2);
+            this.z = width;
+            this.pz = this.z;
+        }
+    }
+}
diff --git a/index.md b/index.md
@@ -27,6 +27,8 @@
     <br>
     <a href="./Ripple/">Ripple</a>
     <br>
+    <a href="./StarField/">StarField</a>
+    <br>
     <a href="./SnowFlake/">SnowFlake</a>
     <br>
     <a href="./SnowFall/">SnowFall</a>