diff --git a/README.md b/README.md index 9a03213..224a528 100644 --- a/README.md +++ b/README.md @@ -1 +1,9 @@ -### [Demo](https://victorwesterlund.github.io/crtjs-test/) +# Cathode Ray Tube (JS) + +Simulating the fundimentals of a CRT display using pure JS (for fun). + +Raster patterns are drawn onto a simulated phosphor display from virtual video tapes. + +## Try it out +**Warning!** This thing might **really** bring your browser down on its knees. Setting the framerate too high might even break it completely (make it crash). +### [Live demo](https://victorwesterlund.github.io/crtjs-test/) diff --git a/css/style.css b/css/style.css index f4f5909..712328e 100644 --- a/css/style.css +++ b/css/style.css @@ -1,43 +1,32 @@ html, body { - --size: 50px; margin: 0; - overflow: hidden; - background: gray; -} - -html { height: 100%; display: flex; justify-content: center; align-items: center; + background: #eee; } -body { - --resolution: 200px; - width: calc(var(--size) * 4); - height: calc(var(--size) * 5); +#screen { + --blank-level: rgb(0,0,0); + --line-level: rgb(var(--contrast),var(--contrast),var(--contrast)); + + width: calc(1px * var(--resolution-width)); + height: calc(1px * var(--resolution-height)); + transform: scale(var(--scale)); background: black; + display: grid; } -#electron { - position: absolute; - width: var(--size); - height: var(--size); - background: red; - /*animation: interpolate 1ms linear infinite;*/ +.pixel { + width: 1px; + height: 1px; + background: var(--blank-level); } -@keyframes interpolate { +@keyframes decay { 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 */ + background: var(--blank-level); } } \ No newline at end of file diff --git a/index.html b/index.html index 8e3a82b..0f88774 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,22 @@ -