Merge pull request #27 from PeanutbutterWarrior/dvd-logo

Create bouncing dvd logo effect
lancaster-university · Mar 25, 2024 · 7d8079b · 7d8079b
2 parents 627139c + 35d6d15
commit 7d8079b
Showing 1 changed file with 107 additions and 0 deletions.
diff --git a/web/priv/js_effects/dvd_logo.js b/web/priv/js_effects/dvd_logo.js
@@ -0,0 +1,107 @@
+// Greyscale value of each pixel, going left to right, top to bottom, in inverted colors
+const LOGO_DATA = [255,255,255,255,255,255,255,255,255,243,245,255,255,255,147,31,205,255,255,255,255,255,253,237,206,162,113,65,166,255,255,241,61,0,124,255,251,231,225,153,92,49,18,1,0,0,147,255,255,202,16,0,60,240,82,42,121,33,0,0,0,0,0,0,148,255,255,156,1,0,25,209,0,0,111,35,0,0,0,0,0,0,148,255,255,114,0,0,7,170,0,0,111,32,0,4,25,46,7,0,148,255,251,78,0,0,0,132,0,0,118,105,124,174,215,196,19,0,152,255,240,53,0,0,0,95,0,0,140,252,255,255,255,189,8,4,175,255,226,39,41,4,0,66,0,0,120,255,255,255,255,140,0,15,202,255,210,29,118,125,37,40,0,0,80,251,255,255,238,60,0,42,232,255,193,8,19,147,134,25,0,0,22,192,253,233,115,4,0,95,252,255,182,15,123,113,26,4,0,0,0,34,85,51,3,0,7,173,255,255,164,8,32,1,0,0,0,0,0,0,0,0,0,0,69,240,255,255,148,0,0,0,0,0,0,0,0,0,0,0,0,32,196,255,255,255,143,7,104,126,84,1,0,0,0,0,0,3,54,188,255,255,255,255,137,3,51,62,41,0,0,0,2,17,64,154,234,255,255,255,255,255,129,0,0,0,0,0,0,0,0,2,24,80,151,215,250,255,255,255,121,5,76,93,62,0,0,0,0,0,0,0,0,27,86,160,222,253,116,16,131,99,116,5,128,68,20,0,0,0,0,0,0,2,33,95,64,12,105,54,99,4,255,245,207,144,77,27,4,0,0,0,0,46,64,0,76,154,54,0,255,255,255,255,251,184,37,0,0,0,71,215,118,0,0,5,0,0,255,255,255,255,194,61,2,0,3,94,229,255,121,1,20,25,16,0,255,255,247,151,27,0,0,10,120,241,255,255,128,13,155,185,126,3,255,229,104,8,0,0,19,148,249,255,255,255,136,16,95,92,80,6,189,63,0,0,0,33,172,254,255,255,255,255,143,2,14,9,13,1,19,0,0,0,53,199,255,252,232,198,220,255,149,0,0,0,0,0,0,0,1,62,181,183,133,84,42,14,149,255,164,1,75,148,53,0,0,0,61,62,32,7,0,0,0,0,148,255,182,22,122,79,117,13,0,0,112,33,0,0,0,0,0,0,148,255,192,35,96,4,106,40,0,0,111,35,0,0,0,0,0,0,148,255,211,29,124,143,106,42,0,0,111,36,14,43,85,108,14,0,148,255,227,31,30,83,18,66,0,0,128,173,199,233,252,206,16,0,158,255,240,54,0,0,0,96,0,0,137,255,255,255,255,175,4,7,185,255,251,79,0,0,0,133,0,0,108,255,255,255,255,114,0,22,213,255,255,114,0,0,8,171,5,0,59,242,255,255,209,32,0,57,241,255,255,157,1,0,25,209,36,0,8,136,215,179,59,0,0,121,255,255,255,203,16,0,61,241,94,0,0,5,22,9,0,0,20,202,255,255,255,241,61,0,124,255,178,13,0,0,0,0,0,0,112,251,255,255,255,255,163,60,212,255,244,90,0,0,0,0,1,80,231,255,255,255,255,255,251,238,255,255,255,217,64,1,0,11,103,229,255,255,255,255,255,255,255,255,255,255];
+const LOGO_W = 40;
+const LOGO_H = 18;
+const LOGO_SPEED = 2;
+const LOOG_COLORS = [
+    [0, 1, 1],
+    [0, 0, 1],
+    [1, 0, 0],
+    [1, 1, 0],
+    [1, 0.5, 0],
+    [1, 0, 0.5],
+    [0.75, 0, 1],
+]
+
+
+return class MyEffect {
+    constructor(display) {
+        this.display = display;
+
+        this.x = Math.floor(display.width / 2 - LOGO_W / 2);
+        this.y = Math.floor(display.height / 2 - LOGO_H / 2);
+        this.color = LOOG_COLORS[0];
+        this.dx = 1;
+        this.dy = 1;
+
+        this.#clear();
+        this.#blit();
+        this.display.flush();
+    }
+
+    #clear() {
+        for (let x = 0; x < this.display.width; x++)
+            for (let y = 0; y < this.display.height; y++)
+                this.display.setPixel(x, y, [0, 0, 0]);
+    }
+
+    #get_color(x, y) {
+        let color_num = 255 - LOGO_DATA[x * LOGO_H + y]
+        let r = Math.floor(color_num * this.color[0])
+        let g = Math.floor(color_num * this.color[1])
+        let b = Math.floor(color_num * this.color[2])
+        return [r, g, b]
+    }
+
+    #blit() {
+        for (let x=0; x < LOGO_W; x++)
+            for (let y=0; y< LOGO_H; y++)
+                this.display.setPixel(this.x + x, this.y + y, this.#get_color(x, y));
+    }
+
+    #change_color() {
+        let new_color;
+        do {
+            let index = Math.floor(Math.random() * LOOG_COLORS.length);
+            new_color = LOOG_COLORS[index];
+        } while (this.color == new_color);
+        this.color = new_color;
+    }
+
+    update() {
+        // Physics
+        this.x += this.dx * LOGO_SPEED;
+        this.y += this.dy * LOGO_SPEED;
+
+        let has_bounced = false;
+
+        // Left
+        if (this.x < 0) {
+            this.x = -this.x;
+            this.dx = 1;
+            has_bounced = true;
+        }
+
+        // Right
+        if (this.x + LOGO_W > this.display.width) {
+            let ingress = this.x + LOGO_W - this.display.width;
+            this.x -= ingress;
+            this.dx = -1;
+
+            has_bounced = true;
+        }
+
+        // Top
+        if (this.y < 0) {
+            this.y = -this.y;
+            this.dy = 1;
+            has_bounced = true;
+        }
+
+        // Bottom
+        if (this.y + LOGO_H > this.display.height) {
+            let ingress = this.y + LOGO_H - this.display.height;
+            this.y -= ingress;
+            this.dy = -1;
+            has_bounced = true;
+        }
+
+        if (has_bounced)
+            this.#change_color();
+
+        // Displaying
+        this.#clear()
+        this.#blit()
+        this.display.flush();
+    }
+}