Testing

2025-09-13 18:03:40 +02:00 · 2021-01-23 19:06:18 +01:00 · 2021-01-23 19:06:18 +01:00 · 0dff77476c
commit 0dff77476c
4 changed files with 131 additions and 0 deletions
--- a/css/style.css
+++ 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 */
+	}
+}
--- a/index.html
+++ b/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">
+	<link rel="stylesheet" href="css/style.css">
+	<title>Cathode Ray</title>
+</head>
+<body>
+	<div id="electron"></div>
+	<script src="js/main.js"></script>
+</body>
+</html>
--- a/js/main.js
+++ 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);
+});
--- a/js/worker.js
+++ 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);
+});