init

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+target/

Cargo.lock

@@ -0,0 +1,147 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 3
+
+[[package]]
+name = "animated-background"
+version = "0.1.0"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "bumpalo"
+version = "3.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "572f695136211188308f16ad2ca5c851a712c464060ae6974944458eb83880ba"
+
+[[package]]
+name = "cfg-if"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
+
+[[package]]
+name = "js-sys"
+version = "0.3.60"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "49409df3e3bf0856b916e2ceaca09ee28e6871cf7d9ce97a692cacfdb2a25a47"
+dependencies = [
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "log"
+version = "0.4.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "abb12e687cfb44aa40f41fc3978ef76448f9b6038cad6aef4259d3c095a2382e"
+dependencies = [
+ "cfg-if",
+]
+
+[[package]]
+name = "once_cell"
+version = "1.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "86f0b0d4bf799edbc74508c1e8bf170ff5f41238e5f8225603ca7caaae2b7860"
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.47"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5ea3d908b0e36316caf9e9e2c4625cdde190a7e6f440d794667ed17a1855e725"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbe448f377a7d6961e30f5955f9b8d106c3f5e449d493ee1b125c1d43c2b5179"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "syn"
+version = "1.0.103"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a864042229133ada95abf3b54fdc62ef5ccabe9515b64717bcb9a1919e59445d"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ceab39d59e4c9499d4e5a8ee0e2735b891bb7308ac83dfb4e80cad195c9f6f3"
+
+[[package]]
+name = "wasm-bindgen"
+version = "0.2.83"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eaf9f5aceeec8be17c128b2e93e031fb8a4d469bb9c4ae2d7dc1888b26887268"
+dependencies = [
+ "cfg-if",
+ "wasm-bindgen-macro",
+]
+
+[[package]]
+name = "wasm-bindgen-backend"
+version = "0.2.83"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4c8ffb332579b0557b52d268b91feab8df3615f265d5270fec2a8c95b17c1142"
+dependencies = [
+ "bumpalo",
+ "log",
+ "once_cell",
+ "proc-macro2",
+ "quote",
+ "syn",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-macro"
+version = "0.2.83"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "052be0f94026e6cbc75cdefc9bae13fd6052cdcaf532fa6c45e7ae33a1e6c810"
+dependencies = [
+ "quote",
+ "wasm-bindgen-macro-support",
+]
+
+[[package]]
+name = "wasm-bindgen-macro-support"
+version = "0.2.83"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "07bc0c051dc5f23e307b13285f9d75df86bfdf816c5721e573dec1f9b8aa193c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "wasm-bindgen-backend",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-shared"
+version = "0.2.83"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1c38c045535d93ec4f0b4defec448e4291638ee608530863b1e2ba115d4fff7f"
+
+[[package]]
+name = "web-sys"
+version = "0.3.60"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bcda906d8be16e728fd5adc5b729afad4e444e106ab28cd1c7256e54fa61510f"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]

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',
+]

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);

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>

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);

package.json

@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "build": "webpack",
+    "serve" : "webpack serve"
+  },
+  "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "1.5.0",
+    "text-encoding": "^0.7.0",
+    "html-webpack-plugin": "^5.3.2",
+    "webpack": "^5.49.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+  }
+}

src/lib.rs

@@ -0,0 +1,121 @@
+use std::f64;
+use wasm_bindgen::prelude::*;
+use wasm_bindgen::JsCast;
+use web_sys::CanvasRenderingContext2d;
+
+const DENSITY: u8 = 100; // lower = more dense
+const HUE_START: u8 = 120;
+const HUE_END: u8 = 230;
+const MAX_SIZE: u8 = 3;
+const MIN_LIGHT: u8 = 33;
+const MAX_LIGHT: u8 = 67;
+const MIN_TRANSPARENCY: u8 = 10;
+const MAX_TRANSPARENCY: u8 = 60;
+const SATURATION: u8 = 100;
+const START_ANGLE: u8 = 240;
+const END_ANGLE: u8 = 300;
+const MAX_SPEED: u8 = 20;
+
+#[wasm_bindgen(start)]
+pub fn start() {
+    let window = web_sys::window().unwrap();
+    let document = window.document().unwrap();
+    let canvas = document.get_element_by_id("bg-canvas").unwrap();
+    let canvas: web_sys::HtmlCanvasElement = canvas
+        .dyn_into::<web_sys::HtmlCanvasElement>()
+        .map_err(|_| ())
+        .unwrap();
+
+    let ctx = canvas
+        .get_context("2d")
+        .unwrap()
+        .unwrap()
+        .dyn_into::<web_sys::CanvasRenderingContext2d>()
+        .unwrap();
+
+    let mut num_bits: u32 = 0;
+    let mut bits: Vec<&Bit> = Vec::new();
+    let mut canvas_width: u32 = 0;
+    let mut canvas_height: u32 = 0;
+    resizeCanvas(&canvas, &canvas_width, &canvas_height, &num_bits, &bits);
+
+    window.set_onresize(Some(&resizeCanvas(
+        &canvas,
+        &canvas_width,
+        &canvas_height,
+        &num_bits,
+        &bits,
+    )));
+}
+
+pub fn draw(context: CanvasRenderingContext2d, width: &f64, height: &f64) {
+    todo!()
+}
+
+pub struct Bit {
+    pub x: f64,
+    pub y: f64,
+    pub radius: f64,
+    pub color: String,
+    pub speed: f64,
+    pub angle: f64,
+}
+
+impl Bit {
+    pub fn new(x: f64, y: f64, radius: f64, color: String, speed: f64, angle: f64) -> Bit {
+        Bit {
+            x,
+            y,
+            radius,
+            color,
+            speed,
+            angle,
+        }
+    }
+
+    // Move is a keyword in rust, so we are escaping it here
+    pub fn r#move(&mut self, width: &f64, height: &f64) {
+        self.x += self.speed * self.angle.cos(); // not sure if this is expecting radians or degrees
+        self.y += self.speed * self.angle.sin();
+        if self.x < 0.0 {
+            self.x = *width;
+        } else if self.x > *width {
+            self.x = 0.0;
+        }
+        if self.y < 0.0 {
+            self.y = *height;
+        } else if self.y > *height {
+            self.y = 0.0;
+        }
+    }
+}
+
+pub fn generateBits() {
+    todo!()
+}
+
+pub fn resizeCanvas(
+    canvas: &web_sys::HtmlCanvasElement,
+    width: &u32,
+    height: &u32,
+    num_bits: &u32,
+    bits: &Vec<&Bit>,
+) {
+    let width = web_sys::window()
+        .unwrap()
+        .inner_width()
+        .unwrap()
+        .as_f64()
+        .unwrap();
+    let height = web_sys::window()
+        .unwrap()
+        .inner_height()
+        .unwrap()
+        .as_f64()
+        .unwrap();
+    canvas.set_width(width as u32);
+    canvas.set_height(height as u32);
+    num_bits = &((width as f32 * height as f32 / DENSITY as f32 / DENSITY as f32).floor() as u32);
+    bits = &Vec::new();
+    generateBits();
+}

webpack.config.js

@@ -0,0 +1,34 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
+
+module.exports = {
+    entry: './index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'index.js',
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'index.html'
+        }),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
+        }),
+        // Have this example work in Edge which doesn't ship `TextEncoder` or
+        // `TextDecoder` at this time.
+        new webpack.ProvidePlugin({
+            TextDecoder: ['text-encoding', 'TextDecoder'],
+            TextEncoder: ['text-encoding', 'TextEncoder']
+        })
+    ],
+    mode: 'development',
+    experiments: {
+        asyncWebAssembly: true
+    },
+    devServer: {
+        host: '0.0.0.0',
+        port: 8079
+    },
+};