init

AtHeartEngineer · Dec 2, 2022 · 4928cdf · 4928cdf
commit 4928cdf
Show file tree

Hide file tree

Showing 10 changed files with 11,153 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+target/
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -0,0 +1,23 @@
+[package]
+name = "animated-background"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.htm
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+js-sys = "0.3.60"
+wasm-bindgen = "0.2.83"
+
+[dependencies.web-sys]
+version = "0.3.60"
+features = [
+  'CanvasRenderingContext2d',
+  'Document',
+  'Element',
+  'HtmlCanvasElement',
+  'Window',
+]
diff --git a/bg.js b/bg.js
@@ -0,0 +1,90 @@
+const DENSITY = 100; // lower = more dense
+const HUE_START = 120;
+const HUE_END = 230;
+const MAX_SIZE = 3;
+const MIN_LIGHT = 33;
+const MAX_LIGHT = 67;
+const MIN_TRANSPARENCY = 10;
+const MAX_TRANSPARENCY = 60;
+const SATURATION = 100;
+const START_ANGLE = 240;
+const END_ANGLE = 300;
+const MAX_SPEED = 20;
+
+let canvas = document.getElementById('bg-canvas');
+let ctx = canvas.getContext('2d');
+let width = canvas.width;
+let height = canvas.height;
+let num_bits;
+let bits = [];
+
+class Bit {
+  constructor() {
+    this.x = randomRange(0, width);
+    this.y = randomRange(0, height);
+    this.size = randomRange(1, randomRange(1, MAX_SIZE));
+    let hue = randomRange(HUE_START, HUE_END)
+    let light = randomRange(MIN_LIGHT, MAX_LIGHT);
+    let sat = SATURATION;
+    let trans = randomRange(MIN_TRANSPARENCY, MAX_TRANSPARENCY);
+    this.color = "hsla(" + hue + ", " + sat + "%, " + light + "%, " + trans + "%)";
+    // We want to generate a random angle between 180 and 360
+    // to make most of the bits go up
+    this.angle = randomRange(START_ANGLE, END_ANGLE)
+    this.speed = randomRange(1, MAX_SPEED) * 0.025;
+  }
+
+  move() {
+    this.x = this.x + (this.speed * Math.cos(this.angle * Math.PI / 180));
+    this.y = this.y + (this.speed * Math.sin(this.angle * Math.PI / 180));
+    if (this.x < 0) {
+      this.x = width;
+    }
+    if (this.x > width) {
+      this.x = 0;
+    }
+    if (this.y < 0) {
+      this.y = height;
+    }
+    if (this.y > height) {
+      this.y = 0;
+    }
+  }
+}
+
+function generateBits() {
+  for (let i = 0; i < num_bits; i++) {
+    bits.push(new Bit());
+  }
+}
+
+function randomRange(min = 0, max = 360) {
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  for (let i = 0; i < bits.length; i++) {
+    let bit = bits[i];
+    ctx.fillStyle = bit.color;
+    ctx.beginPath();
+    ctx.arc(bit.x, bit.y, bit.size, 0, 2 * Math.PI);
+    ctx.fill();
+    bit.move();
+  }
+}
+
+function resizeCanvas() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  width = canvas.width;
+  height = canvas.height;
+  num_bits = Math.floor(width * height / DENSITY / DENSITY);
+  bits = [];
+  generateBits();
+}
+
+// Event handler to resize the canvas when the document view is changed
+window.addEventListener('resize', resizeCanvas, false);
+resizeCanvas();
+setInterval(draw, 20);
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<html>
+
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+  </head>
+
+  <body>
+    <canvas id="bg-canvas" style="position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;"></canvas>
+  </body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,4 @@
+// For more comments about what's going on here, check out the `hello_world`
+// example.
+import('./pkg')
+  .catch(console.error);