From 0dff77476c8a055aed8bfccf3bb6fc400c38dc4c Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Sat, 23 Jan 2021 19:06:18 +0100 Subject: [PATCH] Testing --- css/style.css | 43 +++++++++++++++++++++++++++++++++++++++++++ index.html | 13 +++++++++++++ js/main.js | 34 ++++++++++++++++++++++++++++++++++ js/worker.js | 41 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 131 insertions(+) create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/main.js create mode 100644 js/worker.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..f4f5909 --- /dev/null +++ b/css/style.css @@ -0,0 +1,43 @@ +html, +body { + --size: 50px; + margin: 0; + overflow: hidden; + background: gray; +} + +html { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +body { + --resolution: 200px; + width: calc(var(--size) * 4); + height: calc(var(--size) * 5); + background: black; +} + +#electron { + position: absolute; + width: var(--size); + height: var(--size); + background: red; + /*animation: interpolate 1ms linear infinite;*/ +} + +@keyframes interpolate { + to { + box-shadow: + 0 -20px 0 red, 0 20px 0 red, /* y 1 */ + 0 -40px 0 red, 0 40px 0 red, /* y 2 */ + 0 -80px 0 red, 0 80px 0 red, /* y 3 */ + 0 -100px 0 red, 0 100px 0 red, /* y 4 */ + -20px 0 0 red, 20px 0 0 red, /* x 1 */ + -40px 0 0 red, 40px 0 0 red, /* x 2 */ + -80px 0 0 red, 80px 0 0 red, /* x 3*/ + -100px 0 0 red, 100px 0 0 red; /* x 4 */ + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..8e3a82b --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Cathode Ray + + +
+ + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..8c50bde --- /dev/null +++ b/js/main.js @@ -0,0 +1,34 @@ +const worker = new Worker("js/worker.js"); + +// Electron +const ray = { + electron: document.getElementById("electron"), + get size() { + const size = getComputedStyle(this.electron).getPropertyValue("--size"); + return parseInt(size); + }, + set size(value) { + this.electron.style.setProperty("--size",value + "px"); + this.value = value; + } +} + +ray.size = 50; + +// Screen resolution +const resolution = { + width: 4, + height: 5 +}; + +// Aim electron gun at pixel +function aim(x,y) { + const translate = `${x * ray.size}px,${y * ray.size}px`; + ray.electron.style.setProperty("transform",`translate(${translate})`); +} + +// Clock +worker.postMessage(resolution); +worker.addEventListener("message",event => { + aim(event.data.x,event.data.y); +}); \ No newline at end of file diff --git a/js/worker.js b/js/worker.js new file mode 100644 index 0000000..e48768e --- /dev/null +++ b/js/worker.js @@ -0,0 +1,41 @@ +let resolution = { + width: 0, + height: 0 +}; + +// Gun/deflector angle +const pos = { + x: 0, + y: 0, + get advance() { + this.x++; + + // Hortizontal blank + if(this.x == resolution.width) { + this.x = 0; + this.y++; + } + + // Vertical blank + if(this.y == resolution.height) { + this.y = 0; + } + + return { + x: this.x, + y: this.y + } + } +}; + +const refresh = 1; // Refresh rate +let clock; + +function scanline() { + self.postMessage(pos.advance); +} + +self.addEventListener("message",event => { + resolution = event.data; + clock = setInterval(scanline,refresh); +}); \ No newline at end of file