vlw/crtjs
1
0
Fork 0
mirror of https://codeberg.org/vlw/crtjs.git synced 2025-09-13 18:03:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Testing

Browse source
This commit is contained in:
Victor Westerlund 2021-01-23 19:06:18 +01:00
commit 0dff77476c
4 changed files with 131 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
css/style.css Normal file
View file

@ -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 */
}
}

13
index.html Normal file
View file

@ -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>

34
js/main.js Normal file
View file

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

41
js/worker.js Normal file
View file

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