uploaded dots in-class progress

Thomas Daniel Galligan · Thomas Daniel Galligan · commit a0491ca80454 · 2023-11-11T14:02:49.000Z
diff --git a/classes/dots1/index.html b/classes/dots1/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DOTS</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/classes/dots1/script.js b/classes/dots1/script.js
@@ -0,0 +1,71 @@
+var canvas = document.getElementById("canvas");
+var context = canvas.getContext("2d");
+
+// frames per second
+const FPS = 30;
+// size of dots (in pixels)
+const DOTSIZE = 20;
+// number of dots to add
+const DOTCOUNT = 100;
+
+// list of all the dots in the canvas
+var dots = [];
+
+// set the size of the canvas to the viewport width
+// and height
+function setSize() {
+  console.log("setting the canvas size");
+  canvas.width = window.innerWidth;
+  context.canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  context.canvas.height = window.innerHeight;
+}
+
+window.addEventListener("resize", (_) => setSize());
+setSize();
+
+function getRandomPos(max) {
+  return Math.floor(Math.random() * max);
+}
+
+function getRandomVel() {
+  var positive = Math.random();
+  if (positive >= 0.5) {
+    return Math.random();
+  } else {
+    return Math.random() * -1;
+  }
+}
+
+function animate() {
+  setTimeout(function () {
+    requestAnimationFrame(animate);
+    console.log("animate");
+
+    if (dots.length === 0) {
+      for (let i = 0; i < DOTCOUNT; i++) {
+        dots.push({
+          x: getRandomPos(context.canvas.width - DOTSIZE),
+          y: getRandomPos(context.canvas.height - DOTSIZE),
+          vx: getRandomVel(),
+          vy: getRandomVel(),
+        });
+      }
+      console.log(dots);
+    } else {
+      context.fillStyle = "white";
+      context.strokeStyle = "white";
+      context.lineWidth = 0.5;
+      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+
+      for (let i = 0; i < DOTCOUNT; i++) {
+        dots[i].x += dots[i].vx;
+        dots[i].y += dots[i].vy;
+
+        context.fillRect(dots[i].x, dots[i].y, DOTSIZE, DOTSIZE);
+      }
+    }
+  }, 1000 / FPS);
+}
+
+requestAnimationFrame(animate);
diff --git a/classes/dots1/style.css b/classes/dots1/style.css
@@ -0,0 +1,11 @@
+body {
+    margin: 0;
+    padding: 0;
+    background: #121212;
+    overflow: hidden;
+}
+
+#canvas {
+    width: 100vw;
+    height: 100vh;
+}
