CSS Doom Lasers

Niels Leenheer at CSS Day 2026

This presentation is part of a premium event, 'CSS Day 2026' available exclusively for puchase. Learn more and

Introduction and Niels's World of Obsessions

The host introduces Niels to the CSS Day audience, and Niels opens by cataloguing his eclectic obsessions—from web standards and oscilloscopes to Lego, receipt printers, Bluetooth reverse-engineering, and astrophotography. He frames the talk around how these periods of genuine curiosity send him down unexpected rabbit holes, setting the tone for the wild technical adventures ahead.

The Quest for a Laser Clock and the Oscilloscope Discovery

Niels explains his fascination with laser projectors after seeing Seb Delisle's talk on recreating the vector-display Asteroids arcade game. Unable to afford a laser projector, he realises an oscilloscope can steer an electron beam in the same way to draw vector shapes. He introduces the CSS clock concept, showing how negative animation delays allow a hand's animation to start at any point in time.

Generating X/Y Waveforms from SVG and CSS Animations

Niels walks through the technical pipeline for driving the oscilloscope: SVG shapes are injected into the DOM, then sampled 30 times per second using getPointAtLength and a computed transform matrix to extract raw X and Y coordinates, which are output as a two-channel audio signal via the Web Audio API. Because the SVG lives in the DOM with CSS animations applied, every frame of animation is captured for free at each sample.

Live Oscilloscope Demo and the Explosion

Niels attempts a live on-stage demo of the clock and an Asteroids recreation running on a real oscilloscope, battling video lag throughout. He then recounts how, on the very evening he first got everything working, the oscilloscope exploded—forcing him to frantically unplug everything and leaving the project without a display to test against.

Building an Oscilloscope Simulator from Memory on a Train

Stranded without a working oscilloscope, Niels builds his own simulator during a five-hour train journey entirely from memory. He deep-dives into phosphor physics, Euler integration of electron velocity, and P31 phosphor persistence before concluding he only cares how it looks—not the underlying physics. The simulator proves invaluable for safely testing new signal generators before the repaired scope arrives.

From Oscilloscope Lines to CSS Doom: Core Architecture

After showing Doom's wireframe rendering on the oscilloscope, Niels describes the leap to a fully CSS-rendered version of the game. He explains the guiding architectural principle: JavaScript handles only game logic and DOM element creation, while the renderer—almost entirely CSS—uses thousands of divs, 3D transforms, and custom properties to handle all visual output.

Wall Positioning with CSS Trigonometry and 3D Transforms

Niels walks through how CSS Doom positions walls in 3D space using raw start and end coordinates extracted from the WAD game file, passed as custom properties. CSS trigonometry functions (atan and sqrt) calculate each wall's width and rotation angle on the fly, eliminating the need for JavaScript pre-calculation. He also covers how non-square sector floors are handled using clip-path with the new CSS shape() function.

Lighting, Textures, and the CSS Rendering Pipeline

Niels explains how Doom's per-sector light levels are stored as custom properties and inherited by all child surfaces, with brightness applied via CSS filter. Dynamic effects like pulsating pillars are achieved by using @property to register the light custom property as a number, enabling smooth animated transitions between levels. Original Doom textures extracted from the WAD file are mapped to surfaces using background-image driven by data attributes.

Movement, Doors, Sprites, and Fireballs

Niels covers player movement—rather than moving the player, the entire world transforms around a static camera using just four CSS custom properties—and shows spectator mode as a near-zero-cost scene transform override. He explains how billboarding keeps sprites facing the player, describes door transitions as simple height animations, and details how stepped CSS background-position animations bring sprite sheets to life. Fireballs are DOM elements that travel through space using standalone CSS translate animations and remove themselves via animationend events.

Weapon Animation, Responsive Design, and Multiplayer

Niels demonstrates seamless weapon bobbing by keeping the animation permanently running in a paused state and resuming it on player movement, avoiding the snap-back artefact. He shows how CSS anchor positioning solves the responsive layout challenge of aligning the gun to a wrapping status bar. The segment closes with a mention of the multiplayer feature splitting a single browser window across two screens, and a pointed reminder that a button should be a button, not a div.

CSS Flamethrower and the Laser Projector Live Demo

Niels reveals a CSS-controlled flamethrower purchased from AliExpress as a bonus rabbit-hole project, though stage fire restrictions prevent a live demonstration. He then connects a laser projector via WebUSB—reusing the same XY coordinate system built for the oscilloscope—and live-demonstrates the clock, the Dino game, Asteroids, and an ambitious attempt at running CSS Doom on the laser, bringing the talk full circle.

Q&A: Build Time and What the Clock Sounds Like

The host fields two rapid audience questions: Paul asks how long CSS Doom took to build, and Niels admits the initial walking prototype took one day while finishing the full game took four weeks. Peter then asks what the oscilloscope clock sounds like, and Niels answers simply: static.

Our next speaker has nerves of steel. Anything can happen up until the last minute. He's bold, kind, adventurous, fun, incredibly smart, and it's been a joy to bump into needles at men in many conferences throughout the years. As you can see from the setup around me, which is a health and safety hazard, I still haven't tripped though.

As you can see from we're about to have the best thing since an espresso after lunch. Please welcome to the stage, Niels. Thank

you so much. So hi. I'm Niels. It's so good to be back here on on this stage at CSS day. I wanna talk about some of the projects that I did the last two years or so And upfront I'm gonna say that they are a bit, say out there.

Oh wait. Alright. So you've probably seen the CSS DOOM game upstairs. Maybe even played it and and that is something that I created and and originally I never intended to create DOOM in CSS because that's insane.

But but but here we are. Oh oh, PPK. Did we update the code of conduct? Because I think shooting attendees in the back with a rocket launcher is maybe frowned upon. I think we shouldn't do that. Oh sorry. Okay.

Yeah and I can do now. It's fine. It must be in two to five. Yeah. People will live. So CSS Doom is just a small part of the whole story and if it kind of was an accident that that that happened and the side to to a completely different project and that's kind of just as unhinged and and I want to start with that story. So I get obsessed sometimes.

Well not sometimes, often. And it's not the unhealthy kind of obsessions but but kinda periods of genuine interest and focus and and that often leads to to ideas and rabbit holes and and sometimes unexpected and sometimes weird and wonderful results. I get obsessed by web standards but also Northern Lights and Lego and clocks and user agent streams and astrophotography and oscilloscope and receipt printers, reverse engineering Bluetooth devices.

And videos about watch repair, the evolution of Geminiq languages, dBikes control stage lights and pyrotechnics, and browser compatibility for the year 2000, and the space shuttle Challenger accident report, and how browser parses HTML, and the history of writing, and typography, and getting annoyed that the proper use of the EM desk now makes you look like an AI bot, and and making remote controls Lego cars, and how barcodes and QR codes work, and and so much more.

But mostly about the web and how I can use the web beyond the edges of the browser window. I fell in love with the web back in 1994 and it's been pretty much a constant in everything that I create. But lately my obsession has been making a laser clock.

Ever since since I've seen a talk by Seppi Delisle, I I I've been fascinated by laser projectors. And I knew nothing about how they work but I didn't even know if I could connect them to the web. But Seb did explain in his talk about some of the issues that he ran into recreating the classic game, Asteroids from, 1979.

Now that original game used a special display system called the QuadraScan, and it uses a CRT, but instead of pixels, it steered the electron beam directly to draw these vector shapes. Now before you get excited about me showing a laser clock, they are expensive. And it's not like my name is Sepp Lee Delisle who probably has a couple of spare ones stacked up behind his couch, but but in the back of my mind, I kept thinking that estradiates came. And I kind of figured that that an oscilloscope could function in pretty much the same way as that quadra scan display system.

And they are really cool too. I just love the aesthetic. It feels like you've wandered into the lab of a mad scientist and I just the knobs and the displays and and if you think of it, it's literally just a small particle accelerator that that sends electron about the quarter of the speed of light and it's pointed right at your face.

And there's only a very thin layer of phosphor between you and the face melting beam of electrons. But of course, we want to use web technology for creating our clock. So this part of the talk is titled, how I used CSS animations to draw a clock on an oscilloscope.

Wait. That's actually not accurate. A better title would be how I use web audio to blow up a nineteen eighties oscilloscope and almost cast a fire. Yeah that would be more appropriate.

So before I tell that story, I wanna take a minute and and just let's think of what a clock really is. And I don't mean philosophically. It's a circle and three lines. And and on the web, we can use SVG for that. And it's for simple shapes, vectors, like that asteroids game.

Now if we want to animate our clock, we can use CSS for that. And we can animate the hands and rotate them over time. So so let's look at our hand. It does a full rotation about forty three thousand two hundred and seconds, like two twelve hours. And the default position is at the top.

Now that's midnight or noon and and we want the hand to be, in this case, we want to be at ten. There. So the animation starts at the top and it takes ten hours to reach the position that we want. But we want to start at ten. So we can do that by setting an animation delay.

An animation delay set to negative ten hours because then it's not a delay but it acts like the animation started back in the past, like ten hours ago, and now ten hours later it's at the right position. I love negative animation delays. It's Now we need to draw that shape on the scope.

So the phase melting electron beam is steered or or better deflected by two electrically charged plates like the x and the y plates. And by deflecting the beam vertically and horizontally, we can trace the image that we want and and if you do that multiple times per second, our image appears. So we need to generate two signals.

One for x, one for y. And it needs to trace the image that we want to draw. So so for the clock face, let's start with the clock face, we need a circle. This is that circle. When you need some high school math to do to do this, turns out my math professor was right all along all those years ago. I was going to need math later in life.

So this is that circle. And if you look closely, it actually starts to make sense. We just make a waveform directly from the x and the y coordinates of of the circumference of the circle. And we can make any shape with that method. Every shape can be expressed in that two channel signal.

Even triangles, which we're gonna need because we're we need to have three lines and a triangle is three lines. And this is then what our clocks look like. And if you look closely at the red signal, you can see that sinus wave we saw from the circumference of the circle and then you have the three triangles that are the hands that are being drawn out from the center to the clock face.

Now how do we get now the coordinates? Now we start with our SVG and inject that into the DOM. And with all of the CSS transforms and animations applied, then we can use get total length and get point at length APIs to get the raw coordinates.

And then we apply the compute transfer matrix and we end up with an array of numbers. I make it sound easy but it actually isn't that difficult. So if we plot those numbers, we get again those same shapes. We get the sinus wave and the three triangles.

And we do this 30 times per second and because the SVG exists in the DOM, we just get all the CSS animations for free. Every time we sample the shapes, we capture the current state of the animation. So we get a different wave every time we capture and it captures every frame of the animation. So CSS animations on the oscilloscope.

Now I built a web app for this and it does exactly this. Has a small editor which you can use to edit your SVGs and and CSS and it will just inject that into the DOM. It will sample the geometry and 30 times per second and it output the waveforms using web audio. So we connect the computer's audio output to the x and y channel on the scope and then hopefully we get this.

I This is a recording, but I brought it with me. And I wanna try if we can do the same thing, actual in real life and that's always kind of tricky because now I am, at the mercy of the demo gods. Let let let's just see how it goes.

Let's turn it on at first. And I'm just going to turn that on and then that on. Right. And then So this is a simulator, and I'm going to turn on camera. And let's see.

So this is a clock on an oscilloscope. And it's it's really cool. It's not power efficient because it's it's terrible.

It's terrible. But but just I love this. We can do so much more with this. We we can run basically any SVG or CSS animation on this. For example, we have this.

Oh, that's the animation. You were thinking it's going to explode. No, it's fine. It's fine. And basically, I decided to also recreate that asteroids game because you can run CSS and JavaScript as well and and Oh, there's something going wrong. Let's go back.

I I am terrible at this and I'm seeing it through the video and it's a delay and it's I'm dead. Oh, fuck. Oh, nice. It's it's terrible. And Well, I did some other things as well, but So when I started building this, that was in the evening, and I just had had it working.

And then something happened. At this point, the oscilloscope decided to explode. This is just the aftermath. It was I was busy finding the power plug and and and scrambling to to to get my phone to film it and at the same time, unplugging everything and I realized probably it it should If it doesn't I I don't want I don't want it to send thousands of film back to my computer and let It was fine. It was fine.

I I did not get electrocuted, but the scope was dead. So what now? Well, redundancy. I I may have overreacted here, but I'm I'm getting ahead of myself.

My scope has exploded. I have a signal generator to finish but no way to actually continue until I get my scope repaired or find a replacement. And I find myself on a train to be on Telerund. I have nothing to do. It's a five hour ride and I I decide to build my own oscilloscope simulator like you do.

And what I really want is a nineteen eighties oscilloscope with all of the faults and limitations and we want to replicate how the phosphor works on a real scope and what we really want is a physics simulation of the electron beam and how it's deflected by the electrostatic x and y plates and I have to do it from memory because I it exploded like literally an hour after I got it working. And this is where things go off the rails.

I did a deep dive into how scopes work like electromagnetic force and acceleration and velocity and dampening and Euler integration of how velocity moves the beam and overshoot amplitude decay. And we haven't even talked about energy deposition based on beam velocity and the p 31 phosphor physics, like phosphor saturation and phosphor persistent and beam dwelling at direction changes that causes brighter dots on the screen.

And I was about to calculate how electrons are exciting the phosphors and and I realized that I I have a life and I don't care about any of this. So apparently there was an end to the rabbit hole for me and as it turned out, I only care about how it looks.

Does it look like it's the same as a real scope? Yeah. Great. And with the simulator in place, it did allow me to create some other generators. Fully tested and, on on the simulator and and once the scope got repaired, they just worked. So let's try this one.

I have to warn you, I am terrible at this. I'm getting nervous now.

I wasn't before the talk but now I'm I'm just No I have to keep going now. I've never gotten this far. Sorry, just Oh no no. Okay. Never mind. And then I thought Then I thought, what else can I do?

And the obvious answer to that question is of course, doom. Because that's the answer to every question. So I created doom. And you can just walk around and and it just works.

Okay. Oh, I'm stuck. And this was a lot of fun to create because it's it's like nostalgia. I I played this game growing up and I spent countless hours just running around these levels.

So that was incredibly fun. Now we have this game, Doom, on our oscilloscope and it looks great if you keep in mind that we're just generating lines and encoding that with audio and then showing an old dumb device without any computing power and and using technology that's 80 years old.

It's great but it isn't the real Doom game. You can move around and that's pretty much it. But we do have all this data. We know where the walls are and where the floors and ceilings are so I started thinking. We could project those walls with CSS three d transforms.

We could add textures. Within a day, I I I had something where you could walk around and eventually I started adding more and more like doors and pickups and enemies and fireballs and This isn't fully CSS of course.

And there is a considerable bit of JavaScript ported from the original original game, but the renderer is almost 100% CSS. Why? Well, JavaScript should only do what only JavaScript can do.

And CSS can do this. So yeah. So the next question would probably be, are you crazy? So there was just a small layer of JavaScript that does basically, does nothing more than just create DOM elements and then sets classes and custom properties.

Every wall, every floor, every ceiling is a div. Simple divs that are three d transforms. And we're not using JavaScript to to position every diff. Instead, the JavaScript extracts the raw coordinates from the Doom game file, the WAT file and those raw coordinates are passed to CSS as custom properties.

So these are all the divs that are level one. And this is one of the smaller levels. And and we insert this in the DOM and then we let CSS handle the rest. And all the complicated math is done by CSS.

It's actually not that bad especially compared to the other math that I needed for the scope simulator. It basically boils down to the theorem of Pythagoras and the whole reason is that Doom isn't actually a three d game. It's it's like more than like two and a half d. It's a flat map with heights. It's not a full three d scene and that's also why it translates so well to CSS.

So this is our top view. We start with our start coordinates and end coordinates and what we want to do is position our wall on those start coordinates and then we need to set a width and rotate it on the angle between the start and end coordinates. And the width is just the longest side of the triangle which is the square root of x squared plus y squared and the angle is the inverse tangent of y divided by x.

Even despite that I had this in high school, this took the most time of the project. So great. Everybody with me? Yeah? Yeah? Just nod and pretend it's fine. It's fine. In our CSS it looks like this. So thanks to the relatively new trigonometry functions, we can now just calculate the width and the angle that we need.

And no need for JavaScript anymore to to pre calculate everything. Now we're just setting custom properties straight from the Doom game file, the WAT file and CSS does all the rest. And so we simply set the div or the width and also the height which you can calculate from the ceiling and the floor positions and we positioned it in three d space using transform with translate three d and and finally, you rotate it using the angle that we calculated. And we do that for every wall in our scene, which can be a couple of thousands.

It's fine. And of course, ceilings and floors too. They are also just square divs and and use the same positioning calculations except that we need to rotate it so it's flat on the floor. Now this works if you have a square sector. A sector is like a group of walls and a floor and a ceiling that belong to each other.

But as you've seen, we can place walls at arbitrary angles. So rooms are not by definition squares and diffs are. So how are we dealing with these kinds of floors? So these are two sectors. One one is a simple octagon and the other is a polygon with a hole cut out of it.

And and these are diffs too. Diffs with a clipping path. Fantastic. This involves a whole bunch of extra math to calculate that that path but that's JavaScript and it's not really feasible to do that in CSS. And a little bit of JavaScript is what we're just going need in the renderer.

But we pre calculate that and we set it as a clipping path And CSS does the actual rendering. Now simple shapes like octagons have been possible for a while now but now the shape function is relatively new and that allows you to describe the path in a human readable format. Thanks to Even Art, you can actually basically describe two paths.

And one to cut off the edges and one to cut out the middle. Now, if we turn around and and look at the lighting, the lighting of the scenes, you can see two things. First, we're standing on a light platform looking at a dark room with another light room in the distance.

And those are all static lights. So the light level is stored in the game file and and we do not calculate that on the spot. That makes our lives a lot easier. We can just pull that out and set it as a custom property. You can also see that that the floors and the ceilings have the same shape and the same lighting level.

That's because the lighting is set on the sector, not on a specific surface. So ceilings, floors, and walls are grouped into sectors like I've said, and the light is on the sector. But sectors are not always room sized. And if you look at the stairs for example, then then you can see that the the ceiling above the stairs has the same lighting as the stairs themselves.

That's because these are also sectors. Not the stairs together, but every single step of the stairs is a separate sector with its own floor and and and own ceiling. And if we set the light for the whole sector, so the ceiling also gets the lighter is is the same brightness as the steps.

Now, how do we set the light level? It's a custom property on the sector itself and then the property is inherited down to the individual services within that sector. And then we apply a brightness filter on every surface, which browsers think is delightful. But that's all we need to do.

So we are lighting a whole scene with a filter on every element. Now you can also see here like, there's two pillars that have a slight pulsating lighting effect. These effects are also per sector and defined in the Doom game file. There are a couple of different ones which are a little more than animating brightness.

And we can do that in CSS. So the pillar has a simple class which we can run, use to run an infinite animation that changes the light custom property. Now some of you will immediately say, you can't do that. That's true because CSS does not know what a custom what the light custom property is.

So we need to tell it that. So it is a number so now we can have fluid transitions between, the light levels. And if we want to change the animation, we only have to change a class. Let just let CSS does what it does best.

Now let's look at another important part of Doom that is, the textures. They are just the original image files that I extracted from the Doom bot file and converted to PNGs and there are lots of them and they're pretty tiny compared to modern standards. And every wall, ceiling, or floor just has a data texture attribute which tells us which texture we are using and and we just create a file that just loads all the correct background images based on the texture value.

Now wish we could use Etr here but as Kevin, the YouTube guy showed that that is not allowed. Then we got wait. No, isn't supposed to. Let's reload. Yeah. All right.

Here we go. Wait. We we could do that. Need a version where every service is cut. Sure? It's fine. Okay. We're back.

So at this time, we've been walking around the world, but but how do we actually do that? Or of course there's JavaScript involved here. We need keystroke, mouse events, touch events, gamepad buttons and then lots more JavaScript because we need collision detection and it's all running in a game loop, JavaScript game loop.

And there is no camera in CSS that we can move around. So so instead we move the world. So we don't walk through the world but the world moves around us like it's shoot. So the game sets four simple custom properties and that's all the renderer needs to know.

So whenever the player moves, the properties are updated and and CSS moves the world using c using transform three d and rotate y. And we don't need to recalculate all the walls and floors and ceilings. We would just move the world as as a whole. The world itself is static. And if we zoom out a bit, we can actually see this.

The world rotates around us and if we move up the stairs, world moves down and the player is static at the same position. If we move back down, the world moves back up and CSS gives us this for free. What you're seeing right now is spectator mode. It's built into CSS doom and and this cost cost literally nothing.

It's it's just a small override of the scene transform and we add an initial translate to to move the camera a bit back and up and then rotate it down. That's all it is. And and maybe you've also noticed that sprites and such as barrels and and and pickups are are always directed at the player. And this is called billboarding and from above, that's clearly visible.

And that is something that CSS will do for us. We already have the player angle for the rotation of the scene. So we can just reuse that to rotate every object to make it just appear straight on. Now let's look at doors.

So from from this angle, it gives us a very good look at the door so let let's open it. Yeah. I I wish I could show some interesting code here but but, no. My apologies for for the terrible joke here. I was going to replace it but I ran out of time.

But doors are really boring. Just transition between two heights. The offset is defined by the game file. You set a custom property and and when we generate the file, the the door and that that's all there is to it. The difficult part is all in the game loop and that needs to do collision detection and make sure that the enemies cannot see through the doors but that's not interesting.

The renderer actually doesn't need to know anything about that except when the door opens and when it closes and all it does is just set a door state attribute. Now the next thing we should talk about is sprites. We have all kinds of objects that we can pick up like barrels that we can shoot and of course monsters and these are all two d animated images.

For example, for enemies, have images, for walking from different viewpoints and and shooting and dying and exploding and and and all of these images are combined into one large sprite sheet and now that image is way larger than the div that it contains and and here you can see the whole sprite sheet. And the yellow box is the active sprite You and can see the selection of the sprite within the sheet constantly changing.

So if you use, we use background position to show the correct angle or action. By clever orientation of the images and changing the background position, we can have sprites fully animated. One important detail is that we're using stepped animations, which in case of this helmet, we are stepping over four possible positions.

And that gives us the appearance of the helmet pulsating, which in reality is just the image moving around. And it looks really good. Again, fully automatic and powered by CSS. Now, fireballs. Fireballs are also animated and and billboarded, just like other sprites, but they're special, because they are flying through space using a simple CSS animation.

Whenever a monster launches a fireball, a new diff is added to the DOM with a couple of custom properties such as the start point and the calculated endpoint and the time needed to reach the destination. And then we just let CSS run that animation and it's incredibly effective. We don't need to update the position from the game look. Just CSS does it for free.

And if you look closely here, you you can see we're using the standalone translate, property, not transform, and that's for a very good reason and that is billboarding, because if we were to use transform property, we can't have the animation and have the billboarding at the same time because they would override each other.

So using the standalone transform properties, we can animate them without having the billboarding overridden. So the animation controls the positioning and the player angle controls the rotation. Now we do need to tell the renderer when there's an impact to remove it. Perhaps even mid flight and then show the explosion sprite. By the way explosions and bullets impact are just also simple sprites created by the JavaScript layer that runs for a couple of frames and then remove themselves from the DOM by listening to animation they literally fire and forget.

So let's talk a little bit about another animation technique that is used throughout this project. That is when the player is moving around you can see the weapon bob around. And that's a nice little CSS animation. But originally, we just applied the animation when the player was moving using a class on the viewport.

And it works but the illusion kind of breaks when you stop moving because the weapon then snaps back to the original default position. And to solve this, the solution is here to to always run the animation but by default have it, in a paused state. So it is paused somewhere on that animation and we don't care where. And whenever the player is moving, we just set the state to running. And it will continue from the last point it stopped.

So the transition between walking and and stopped is now seamless. Now one last thing that I wanted to show you because this is the web. CSS DOOM is responsive and that creates some other challenges because the gun we have here needs to be aligned to the top of the status bar. So when the status bar wraps over two or even three rows, we need to move the gun upwards.

So anchor positioning to the rescue. The sturdy bar is the anchor and we just make sure that the bottom of the gun is anchored to the top of the status bar. Now I don't think the the spec authors thought of this when they created the spec, but I I love it. So yeah, that is just some small details of how CSS DOOM works and then it grew in quite quite a bit since that first proof of concept and I've added multiplayer support which you can play yourself upstairs. Not now, later.

Which basically, it renders two scenes in one browser window, which is then split over the two screens. And it's amazing that it actually works. We're pretty close to the limit of what a browser can do and everything you've seen so far is just thousands of divs.

Probably less than a react app but but still. It's thousands of divs and some CSS. But there's one exception. This is a button. As it should be.

And if I can do that in Doom, what excuse do you have? A div is not a button. Right, Manuel? Uh-huh. Yeah. So is this useful? No?

Yeah, yeah, absolutely. Yes. But don't do it. CSS was never intended to do this and But I'm amazed how performant this actually is. CSS is awesome. But but but not every browser will do this well. We're definitely finding the limits and there are some issues in Chrome which will probably be solved eventually and some rendering issues in Safari as well and it's quite playable still.

The best browser for this kind of brutal rendering punishment has been Firefox, which also hasn't been perfect but pretty close and bugs will be filed and I've been told that Jake and Brahms will personally fix them this afternoon so I'm perfect. So this was a nice side quest.

A rabbit hole inside of a rabbit hole but why stop here? Am I going to build a version of CS Doom that runs on CSS CPU emulator? No. No. Is there more to the story? Well, I got distracted for a bit. I created a CSS flamethrower on a train.

I I I saw this on AliExpress and it's really cheap. AliExpress cheap and flamethrowers, it's not a great combination, but there was this button and I I I bought it. I figured I had a couple of weeks before it got got back home and and I had plenty of time to prepare my wife that I needed it for for work.

But then I got back from Berlin and it was there on my coffee table and I had some explaining to do. Yeah. I cannot show it here on stage. I know. I know. Apparently, church burned down earlier this year in Amsterdam. Not not because of me. Not because of me. And I've been told that under no circumstances, I'm allowed to set fire to the stage.

So sorry. But I traded a little video. I just And yes, I still wanna make that laser clock.

And I figured if I can buy six oscilloscopes in a flamethrower, I could buy a laser projector as well. And as it turns out, connecting it to the web is relatively simple using web USB. Relatively simple. But it just expects x and y coordinates. And we already have that for oscilloscope.

So who wants to see CSS animations on a laser projector? Alright. Let's load up the clock. Here we have the clock. And now I can And it works. And because we now have this running on the same generator as the oscilloscope, we can do all that other stuff too. Like, I can run the Dino game.

Did I hear somebody requesting DOOM? Well, yeah. I can do asteroids. That that that works really well. And I'm I'm not trying to avoid running Doom on the oscilloscope because that that would be awesome.

But it it it Doom is a little bit complicated. There's lots of lines and the laser projector can't handle that many, but I can try. Let's try that. Yeah.

This is just a lot lots of fun. And so thank you for listening to me. I thank you oh, wait a minute. Let's do this. Yeah. Thank you so much.

Thank you. That was incredible. We have one minute, I think.

One more question.

One more question. Paul asks, how long did it did it take to build Doom? Please don't say a week.

It so so the first concept, like walking around the level without the actual game running. I'm I'm kind of embarrassed to say that that took a day. Oh. Humble bride. But that that's that's because I had the data and it's literally just a thousand of diffs that you have to generate and and and position.

That that's not the complicated part. Then I took four weeks to finish the game. Not a big step. No.

The truth comes out eventually. We one quick question. Peter, from Peter, what does the clock sound like? Quick.

What the clock sounds like?

Yeah. Mimic it.

Just static.

Fantastic. Please find Niels after. Round of applause. Thank you.

Thank you.

CSS Day

.css-day {
    date: 'June 11 & 12 2026';
    location: 'Amsterdam'
}

Talk: CSS Doom Lasers

Speaker: Niels Leenheer

LISA DAY

.now {

13:55 | Niels Leenheer

.now {

13:55 | Niels Leenheer

Google AG Grid

CSS Day logo on the top right corner. Google, AG Grid, and an 'X' icon logos are displayed at the bottom of the slide.

.now {

13:55 | Niels Leenheer

`.now {`

13:55 | Niels Leenheer

A geometric CSS Day logo is in the top right corner. A Google logo is in the bottom left corner. An AG Grid logo is in the bottom center. An 'X' icon is in the bottom right corner.

.now {

13:55 | Niels Leenheer

CSS Day logo in the top right corner. Google logo in the bottom left corner. AG Grid logo in the bottom center. An icon featuring an 'X' in a square in the bottom right corner.

.now {

13:55 | Niels Leenheer

CSS DOOM LASERS

A wireframe illustration of an indoor architectural space with stairs and platforms. The 'CSS DAY' logo is in the bottom right.

CSS DOOM LASERS

The CSS DAY logo is visible. A wireframe illustration depicts an interior space with stairs, ledges, and platforms, resembling a level from a video game.

CSS DOOM LASERS

A wireframe illustration depicting the interior of a room with stairs.

CSS DOOM LASERS

A wireframe illustration of an interior space with stairs, resembling a blueprint or a level design from a video game.

CSS DOOM LASERS

A neon green wireframe rendering of a 3D environment with stairs and architectural elements.

CSS DOOM LASERS

An illustration in the style of early computer graphics, featuring neon green wireframe outlines of an interior space on a black background, reminiscent of the game DOOM. A pixelated white 'CSS DAY' logo is in the bottom right corner.

CSS DOOM LASERS

A green wireframe 3D rendering of an interior space with stairs, resembling a retro video game level. The CSS DAY logo is displayed in the bottom right corner.

CSS DOOM LASERS

A wireframe illustration of an indoor environment with stairs and rooms, reminiscent of a retro video game. The CSS Day logo is displayed in the bottom right corner.

CSS DOOM LASERS

An outline drawing showing a wireframe 3D room with stairs and several boxes, next to the CSS Day logo.

CSS DOOM LASERS

A wireframe illustration of a 3D architectural space with stairs and boxes, resembling a video game environment. The CSS DAY logo is in the bottom right corner.

CSS DOOM LASERS

A line-art style illustration depicts an interior architectural space with stairs, resembling a 3D game environment. The CSS DAY logo is visible in the bottom right corner of the slide.

CSS DOOM LASERS

CSS DAY

A wireframe illustration depicts an abstract indoor environment with stairs and various architectural structures.

CSS DOOM LASERS

A wireframe illustration of an interior space with stairs and block-like structures, reminiscent of a retro video game level. The "CSS DAY" logo, designed with blocky, pixelated characters, is in the bottom right corner.

CSS DOOM LASERS

Wireframe illustration depicting a 3D architectural rendering of an interior space with multiple levels and stairs. A stylized "CSS DAY" logo is in the bottom right corner of the slide.

CSS DOOM LASERS

Wireframe illustration of an indoor environment, resembling a room from the DOOM video game, featuring stairs and structural elements.

CSS DOOM LASERS

A wireframe rendering of an interior space with stairs and structures, designed in a style reminiscent of early 3D video games.

CSS DOOM LASERS

A green wireframe illustration depicting a 3D architectural space or game level, featuring stairs and room outlines.

CSS DOOM LASERS

An illustration of a green wireframe 3D environment, showing rooms, walls, and stairs, similar to a video game level.

CSS DOOM LASERS

CSS DAY

A wireframe illustration of an indoor environment with stairs, reminiscent of a level from the game DOOM.

CSS DOOM LASERS

A wireframe illustration of a 3D room interior with stairs, resembling a video game environment.

CSS DOOM LASERS

A wireframe illustration of a multi-level room with stairs and platforms. The CSS Day logo is displayed in the bottom right corner.

CSS DOOM LASERS

A green wireframe diagram of a multi-level architectural interior space, possibly a video game environment, on the right. The title 'DOOM' is rendered in a green, blocky, 3D-like font, similar to the video game logo.

I GET OBSESSED SOMETIMES...

I GET OBSESSED ABOUT WEB STANDARDS, BUT ALSO NORTHERN LIGHTS, LEGO, CLOCKS, USER AGENT STRINGS, ASTRO-PHOTOGRAPHY, OSCILLOSCOPES, RECEIPT PRINTERS, REVERSE ENGINEERING BLUETOOTH DEVICES

I GET OBSESSED ABOUT WEB STANDARDS, BUT ALSO NORTHERN LIGHTS, LEGO, CLOCKS, USER AGENT STRINGS, ASTROPHOTOGRAPHY, OSCILLOSCOPES, RECEIPT PRINTERS, REVERSE ENGINEERING BLUETOOTH DEVICES, VIDEOS ABOUT WATCH REPAIR, EVOLUTION OF GERMANIC LANGUAGES, DMX CONTROLLED STAGE LIGHTS AND PYROTECHNICS, BROWSER COMPATIBILITY BEFORE 2000, THE SPACE SHUTTLE CHALLENGER ACCIDENT REPORT, HOW THE BROWSER PARSES HTML, HISTORY OF WRITING, WATCHING, REACTION VIDEOS TO THE MUSIC OF REN, TYPOGRAPHY AND GETTING ANNOYED THAT PROPER USE OF THE EM DASH NOW MAKES YOU LOOK LIKE AN AI BOT

I GET OBSESSED ABOUT WEB STANDARDS. BUT ALSO NORTHERN LIGHTS, LEGO, CLOCKS, USER AGENT STRINGS, ASTROPHOTOGRAPHY, OSCILLOSCOPES, RECEIPT PRINTERS, REVERSE ENGINEERING BLUETOOTH DEVICES, VIDEOS ABOUT WATCH REPAIR, EVOLUTION OF GERMANIC LANGUAGES, DMX CONTROLLED STAGE LIGHTS AND PYROTECHNICS, BROWSER COMPATIBILITY BEFORE 2000, THE SPACE SHUTTLE CHALLENGER ACCIDENT REPORT, HOW THE BROWSER PARSES HTML, HISTORY OF WRITING, WATCHING REACTION VIDEOS TO THE MUSIC OF REM, TYPOGRAPHY AND GETTING ANNOYED THAT PROPER USE OF THE EM DASH NOW MAKES YOU LOOK LIKE AN AI BOT, MAKING REMOTE CONTROLLED LEGO CARS, WHITE SPACE ON WEBPAGES, MAP MEN, STAR TREK DS 9, SPEAKING AT BEYOND TELLERRAND, CSS BROWSER HACKS THAT NOBODY SHOULD REMEMBER ANYMORE, THE INNER WORKINGS OF PAYMENT TERMINALS AND CARD PROCESSING, THE HISTORY OF THE BROWSER SAFE FONTS, COLOUR SPACES, BUILDING SIDE PROJECTS WITH ARDUINOS, HOW BARCODES AND QR CODES ARE ENCODED, MAPPING MY HOMETOWN ON OPENSTREETMAPS, BUILDING A FAMILY TREE ALL THE WAY TO 1500-SOMETHING... AND MORE

BUT MOSTLY ABOUT THE WEB – AND HOW I CAN USE THE WEB BEYOND THE EDGES OF THE BROWSER WINDOW

BUT MOSTLY ABOUT THE WEB - AND HOW I CAN USE THE WEB BEYOND THE EDGES OF THE BROWSER WINDOW

I WANT TO MAKE A CLOCK USING A LASER PROJECTOR

The word "LASER" is prominently displayed in a large, green, stylized font.

A diagram illustrating the classic arcade game Asteroids, featuring a triangular spaceship, numerous irregular polygonal shapes representing asteroids, and a dotted line extending from the spaceship, indicating its trajectory or a projectile path. In the top left corner, the text "AAA" is displayed, likely indicating a score or lives.

A A A

Screenshot of a classic vector graphics arcade game, Asteroids. A triangular spaceship points right, with a dotted line extending from its front. Several irregular polygonal shapes, representing asteroids, are scattered across the black background.

A A A

A vector-style game, reminiscent of Asteroids, featuring a triangular spaceship firing a dotted projectile at multiple irregular polygonal shapes on a light gray background.

A A A

A visual representation reminiscent of the classic game Asteroids, featuring a triangular spaceship, a dotted trajectory line, and several irregular polygon shapes scattered across the screen.

PRO

THEY ARE COOL!

CON

I DON'T HAVE ONE
I'M NOT SEB LEE-DELISLE
THEY ARE EXPENSIVE

OLD ANALOG 1980S OSCILLOSCOPES ARE PRETTY CHEAP

A vintage gray Trio 15MHz Oscilloscope CS-1560A is shown, displaying a green sine wave on its gridded screen. Control knobs and buttons are visible on the right side of the oscilloscope's front panel.

OLD ANALOG 1980S OSCILLOSCOPES ARE PRETTY CHEAP

An image of an old analog oscilloscope, model TRIO 15MHz OSCILLOSCOPE CS-1560A, displaying a green sine wave on a grid, with various knobs and controls on its front panel.

AND THEY ARE REALLY COOL TOO

(EVEN IF THEY ARE NOT LASERS)

AND THEY ARE REALLY COOL TOO

( EVEN IF THEY ARE NOT LASERS )

HOW I USED CSS ANIMATIONS TO DRAW A CLOCK ON AN OSCILLOSCOPE

HOW I USED WEBAUDIO TO BLOW UP AN 1980'S OSCILLOSCOPE AND ALMOST CAUSED A FIRE

WHAT IS A CLOCK?

A green circular icon with three lines inside, resembling a simplified clock face.

WHAT IS A CLOCK?

A green circular outline with three lines inside, forming a simplified clock face or Y-shape.

WHAT IS A CLOCK?

A green line drawing of a clock face, represented by a circle with three lines meeting in the center, resembling clock hands.

WHAT IS A CLOCK?

A simple line art graphic of a clock face with three hands.

A series of abstract clock designs. The leftmost design features a prominent green circle with a single green line inside, resembling a clock hand. To its right, fainter, overlapping circles contain different configurations of green lines, including two diagonal lines and two parallel vertical lines.

A series of four circles on a black background. The first circle is an empty green outline. The next three circles each have a faint gray outline and contain a short green line originating from the center, oriented at approximately 10 o'clock, 2 o'clock, and 12 o'clock respectively. Two small green dots are visible in the top right corner.

An illustration depicting a green circle and three green lines (horizontal, diagonal, vertical), representing parts of a clock.

<svg>
  <circle>

A diagram on a dark grey background shows a large green outlined circle on the left. The code `` is displayed within the circle's outline. Above and to the left of the circle, the code `

<svg>
	<circle
		cx="50"
		cy="50"
		r="45" />

A green circle outlines an SVG code snippet for a circle. To the right are three grey circles, each containing a green line segment. These line segments are rotated at different angles: one angled up and left, one angled up and right, and one vertical, pointing downwards.

SVG Shapes and Rotation

<svg>

  <circle
    cx="50"
    cy="50"
    r="45" />

  <line x1="50" y1="50"
    x2="50" y2="25"
    style="rotate: 300deg"/>

  <line x1="50" y1="50"
    x2="50" y2="15"
    style="rotate: 55

<svg>

<circle
  cx="50"
  cy="50"
  r="45" />

<line x1="50" y1="50"
  x2="50" y2="25"
  style="rotate: 300deg"/>

<line x1="50" y1="50"
  x2="50" y2="15"
  style="rotate: 55deg"/>

<line x1="50" y1="50"
  x2="50" y2="5"
  style="rotate: 180deg"/>

</svg>

The slide displays four circular diagrams demonstrating SVG shapes and CSS rotations. 1. A green outlined circle, associated with SVG code for a circle element. 2. A circle containing a short green line rotated approximately 300 degrees, associated with SVG code for a line element with a 300-degree rotation. 3. A circle containing a short green line rotated approximately 55 degrees, associated with SVG code for a line element with a 55-degree rotation. 4. A circle containing a short green line rotated 180 degrees (pointing downwards), associated with SVG code for a line element with a 180-degree rotation.

:root

A light gray circle contains a short, thick, light green line segment, resembling a clock hand pointing towards the top-left.

:root {
  --hours: 10;
  --minutes: 10;
  --seconds: 30;
}

@keyframes rotate-360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#hours {

An analog clock face with a single green hand pointing to approximately 10:10.

:root {
  --hours: 10;
  --minutes: 10;
  --seconds: 30;
}

@keyframes rotate-360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#hours {
  animation: rotate-360 43200s linear infinite;
  animation-delay: calc((var(--hours) * -3600s) +
    (var(--minutes) * -60s));
}

A circular clock face outline contains a single short green hand, pointing towards the upper left, roughly indicating the 10 o'clock position.

:root {
	--hours: 10;
	--minutes: 10;
	--seconds: 30;
}

@keyframes rotate-360 {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

#hours {
	animation: rotate-360 43200s linear infinite;
	animation-delay: calc(var(--hours) * -3600s) +
		(var(--minutes) * -60s));
}

A green line is visible on the screen, positioned as if it is an hour hand pointing towards 10 o'clock on an analog clock face.

:root {
  --hours: 10;
  --minutes: 10;
  --seconds: 30;
}

@keyframes rotate-360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#hours {
  animation: rotate-360 43200s linear infinite;
  animation-delay: calc(var(--hours) * -3600s) +
                 (var(--minutes) * -60s));
}

A green line on the screen, representing an animated element, is positioned roughly at 10 o'clock.

:root {
	--hours: 10;
	--minutes: 10;
	--seconds: 30;
}

@keyframes rotate-360 {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

#hours {
	animation: rotate-360 43200s linear infinite;
	animation-delay: calc(var(--hours) * -3600s) +
		(var(--minutes) * -60s));
}

A short green line is displayed in the center of the slide, visually representing a rotating element.

:root {
	--hours: 10;
	--minutes: 10;
	--seconds: 30;
}

@keyframes rotate-360 {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

#hours {
	animation: rotate-360 43200s linear infinite;
	animation-delay: calc((var(--hours) * -3600s) +
	(var(--minutes) * -60s));
}

A short green line segment is centered on the slide, slightly rotated, illustrating the rotation animation described in the CSS code.

:root {
  --hours: 10;
  --minutes: 10;
  --seconds: 30;
}

@keyframes rotate-360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#hours {
  animation: rotate-360 43200s linear infinite;
  animation-delay: calc(var(--hours) * -3600s) +
                 (var(--minutes) * -60s));
}

A small green line is visible on the slide, likely an animated element controlled by the displayed CSS code.

:root {
  --hours: 10;
  --minutes: 10;
  --seconds: 30;
}

@keyframes rotate-360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#hours {
  animation: rotate-360 43200s linear infinite;
  animation-delay: calc((var(--hours) * -3600s) +
                       (var(--minutes) * -60s));
}

A green line is drawn diagonally on the slide, representing an animated element or clock hand.

:root {
  --hours: 10;
  --minutes: 10;
  --seconds: 30;
}

@keyframes rotate-360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#hours {
  animation: rotate-360 43200s linear infinite;
  animation-delay: calc(var(--hours) * -3600s +
                        (var(--minutes) * -60s));
}

A circular graphic with a green line segment representing a clock hand, positioned roughly at 10:10 on a clock face.

From "The Cathode-Ray Tube" by A.P. Blackburn in 1955

A diagram illustrates the internal components and operation of a Cathode-Ray Tube (CRT). It shows a narrow end containing a cathode, grid, focusing anode, and accelerator anodes, which collectively generate and shape an electron beam (depicted as a yellow line). The beam then travels between two sets of deflection plates: Y-plates (shown in red for vertical deflection) and X-plates (shown in white for horizontal deflection). Finally, the electron beam strikes a fluorescent screen at the wider end of the tube, creating a glowing green Y-shaped pattern.

GRID
FOCUSING ANODE
CATHODE
ACCELERATOR ANODES
Y-PLATES
ELECTRON BEAM
X-PLATES
FLUORESCENT

FROM "THE CATHODE-RAY TUBE" BY A.P. BLACKBURN IN 1955

Diagram illustrating the internal components and operation of a Cathode Ray Tube (CRT). It shows an electron beam originating from the cathode, passing through a grid, focusing anode, and accelerator anodes. The beam is then steered by two sets of deflection plates, Y-plates (shown in red) and X-plates (shown in white), before striking a fluorescent screen and forming a green display.

GRID

FOCUSING ANODE

Y-PLATES

ELECTRON BEAM

FLUORESCENT

CATHODE

ACCELERATOR ANODES

X-PLATES

FROM "THE CATHODE-RAY TUBE" BY A.P. BLACKBURN IN 1955

Diagram illustrating the components and operation of a Cathode-Ray Tube (CRT), showing the electron gun (cathode, grid, focusing anode, accelerator anodes), vertical (Y) and horizontal (X) deflection plates, and the electron beam striking a fluorescent screen.

FROM "THE CATHODE-RAY TUBE" BY A.P. BLACKBURN IN 1955

A cutaway diagram illustrating the internal components and operation of a Cathode Ray Tube (CRT). It shows an electron gun assembly (cathode, grid, focusing anode, accelerator anodes) emitting an electron beam. The beam then passes between two sets of deflection plates (Y-plates for vertical deflection, highlighted in red, and X-plates for horizontal deflection, highlighted in white), which steer it towards a fluorescent screen. The electron beam traces a green Y-shape on the screen, indicating deflection.

FROM "THE CATHODE-RAY TUBE" BY A.P. BLACKBURN IN 1955

Diagram illustrating the internal components and operation of a Cathode-Ray Tube (CRT), showing the electron gun (cathode, grid, anodes), deflection plates (X and Y plates), and the path of the electron beam impacting the fluorescent screen to create an image.

Grid
Focusing Anode
Cathode
Accelerator Anodes
Y-Plates
Electron Beam
X-Plates
Fluorescent screen

From "The Cathode-Ray Tube" by A.P. Blackburn in 1955

A diagram illustrating the internal components and operation of a Cathode Ray Tube (CRT). It shows an electron gun assembly including a cathode, grid, focusing anode, and accelerator anodes, followed by Y-plates and X-plates for beam deflection, and finally a fluorescent screen at the wide end of the tube where the electron beam creates an image.

Grid
Focusing Anode
Cathode
Accelerator Anodes
Y-Plates
Electron Beam
X-Plates
Fluorescent

FROM "THE CATHODE-RAY TUBE" BY A.P. BLACKBURN IN 1955

A detailed cutaway diagram illustrating the internal components and operation of a Cathode Ray Tube (CRT). The diagram shows an electron beam originating from the cathode, passing through a grid, focusing anode, and accelerator anodes, then deflected by both Y-plates (vertical deflection) and X-plates (horizontal deflection) before striking a fluorescent screen at the front of the tube.

GRID

FOCUSING ANODE

CATHODE

ACCELERATOR ANODES

Y-PLATES

ELECTRON BEAM

X-PLATES

FLUORESCENT

FROM "THE CATHODE-RAY TUBE" BY A.P. BLACKBURN IN 1955

A cross-sectional diagram of a Cathode Ray Tube (CRT) showing its internal components and the path of an electron beam from the cathode to a fluorescent screen where it forms a cube shape. Key components labeled include the cathode, grid, focusing and accelerator anodes, Y-plates (red), and X-plates (white).

FROM "THE CATHODE-RAY TUBE" BY A.P. BLACKBURN IN 1955

A diagram illustrating the internal components and operation of a Cathode-Ray Tube (CRT). It shows an electron beam originating from a cathode, passing through a grid, focusing anode, and accelerator anodes. The beam is then deflected by Y-plates (vertical) and X-plates (horizontal) before striking a fluorescent screen, where it forms an image.

Grid
Focusing Anode
Cathode
Accelerator Anodes
Y-Plates
Electron Beam
X-Plates
Fluorescent

FROM "THE CATHODE-RAY TUBE" BY A.P. BLACKBURN IN 1955

Diagram illustrating the internal components and operation of a Cathode-Ray Tube (CRT), showing the electron gun (cathode, grid, focusing and accelerator anodes), deflection plates (Y-plates and X-plates), the electron beam path, and the fluorescent screen.

FROM "THE CATHODE-RAY TUBE" BY A.P. BLACKBURN IN 1955

A technical cross-section diagram of a Cathode-Ray Tube (CRT). The diagram illustrates the internal components: an electron gun (consisting of a cathode, grid, focusing anode, and accelerator anodes), horizontal (X) and vertical (Y) deflection plates, and a fluorescent screen. A yellow line represents the electron beam traveling from the electron gun, through the deflection plates, and striking the fluorescent screen on the right, forming a Y-shaped trace.

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

A diagram showing two intersecting curved lines, one red and one white, each with a small circle at one end, illustrating two signals.

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

An illustration depicting two wave-like signals, one red and one white, each with a glowing point moving along its path, crossing each other on a black background. These represent the X and Y plate signals for electron beam deflection.

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

A black background with two intersecting wavy lines, one white and one red, each with a glowing point moving along it. These lines visually represent the X and Y deflection signals that control an electron beam.

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

Illustration of two overlapping wavy lines, one white and one red, each with a bright spot, representing X and Y deflection signals.

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

Two glowing, sine wave-like curves, one red and one white, overlap on a black background. Each curve has a bright, circular dot moving along it, illustrating two signals.

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

Two glowing, intersecting curved lines, one red and one white, each with a bright point moving along it, illustrating two signals.

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

Two glowing wavy lines, one white and one red, representing X and Y deflection signals.

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

A diagram showing two curved lines, one red and one white, crossing each other, each with a small circle at its end, illustrating the concept of two signals for X and Y plates to deflect an electron beam.

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

A diagram showing two curved lines, one white and one red, originating from the left and arcing upwards and downwards respectively, against a dark grey background.

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

A diagram illustrates the deflection of an electron beam with two curved lines, one red and one white, crossing each other.

WE CAN MAKE ANY SHAPE WE WANT

Two pairs of wavy lines, one white and one red, are shown on the left. On the right, an S-shaped white waveform is depicted above a green circle. A dashed vertical line connects a point on the white waveform to a point on the green circle's circumference, illustrating how a waveform can be generated from the coordinates of a circle.

WE CAN MAKE ANY SHAPE WE WANT

Four diagrams illustrating different geometric shapes and waveforms. The top left shows two overlaid line graphs, one red and one white, forming a V-like shape with flat top and bottom segments. A white dot marks a peak on the white graph. The top right shows two parallel stepped lines, forming an inverted V-shape, with a white dot at the end of the upper line connected by a dashed vertical line. The bottom left shows a single red line graph forming a V-like shape with flat top and bottom segments. The bottom right displays a green outlined square with a green dot on its bottom right corner.

WE CAN MAKE ANY SHAPE WE WANT

Four abstract diagrams illustrate the creation of shapes. The top left shows overlaid white and red inverted V-shapes. The top right shows a white shape resembling an open trapezoid, connected by a vertical dotted line to a green point. The bottom left shows a red waveform. The bottom right shows an outlined green square, with its top-left corner connected by a dotted line to the same green point.

WE CAN MAKE ANY SHAPE WE WANT

The slide features four abstract line diagrams arranged in a 2x2 grid on a black background. The top left diagram shows overlapping white and red trapezoidal waveforms. The top right diagram displays overlapping white and grey inverted trapezoidal shapes, with a white dashed line extending vertically and horizontally from a point on the white shape. The bottom left diagram presents a single red trapezoidal waveform. The bottom right diagram is a green square with a green dot on its right side, connected by dashed lines to a point related to the top right diagram.

WE CAN MAKE ANY SHAPE WE WANT

A technical diagram illustrating waveform generation. The left half shows complex red and white wave patterns, with a similar red pattern reflected below. The right half displays a waveform evolving from a smooth curve to sharp, triangular peaks, with projection lines connecting it to a green circle. The green circle contains three lines radiating from its center, forming a Y-shape, representing clock hands.

WE CAN MAKE ANY SHAPE WE WANT

The slide illustrates how waveforms can be used to create specific shapes. The top left shows two superimposed oscillating signals, one white and one red. The top right depicts a white, angular, segmented waveform, which is connected by dotted vertical lines to a green analog clock shown below. The bottom left displays a complex red oscillating waveform. The bottom right features the green analog clock with three hands, representing a shape formed or animated by the signals.

WE CAN MAKE ANY SHAPE WE WANT

Diagrams illustrating shape generation from waveforms. The upper left shows a red sinusoidal waveform overlapping an angular white waveform, representing input signals. Below them, a segment of the red waveform is shown. The upper right displays a complex zig-zag path, traced by a point connected via dashed lines to a green circular diagram in the lower right. The green circle contains three radial lines, depicting clock hands drawing out from the center, indicating the mechanism for creating the shapes.

WE CAN MAKE ANY SHAPE WE WANT

The slide displays several abstract waveforms and a circular diagram. In the top left, a white zigzagging waveform is overlaid with a red sinusoidal wave. In the top right, a complex zigzag waveform is shown with a dotted line extending downwards from its peak. In the bottom left, another complex red waveform is visible. In the bottom right, a green circle contains three lines radiating from the center, forming a Y-shape, resembling clock hands, connected by a dotted line to the top right waveform.

WE CAN MAKE ANY SHAPE WE WANT

A diagram showing various wave forms and a clock-like shape. On the left, two overlapping wavy lines, one red and one white, with their reflections below. On the upper right, a zigzag line. On the lower right, a green circle with three lines radiating from its center, resembling clock hands.

WE CAN MAKE ANY SHAPE WE WANT

A diagram illustrating the generation of various line shapes, including a W-shape, a wave, and an M-shape. On the right, a complex spiraling line is shown connecting to a green Y-shaped figure inside a circle, representing a coordinate system or clock hands being drawn from the center.

WE CAN MAKE ANY SHAPE WE WANT

A slide illustrating path generation. On the left, there are two wavy lines, one white and partially red, and another fully red below it, resembling sine waves. On the right, an angular, jagged white line is shown above a green outlined circle with three green lines emanating from the center, forming clock hands. A dotted line connects the angular shape to the circle, suggesting a transformation or relation between the shapes.

WE CAN MAKE ANY SHAPE WE WANT

Diagram showing various waveforms and a circular clock-like shape with three radiating lines.

A luminous green arc curves across a black background, suggesting a path or segment of a circular element, possibly from an SVG animation or a clock face.

getTotalLength()
getPointAtLength()
getCTM()

A diagram on a black background illustrates concepts related to path manipulation with neon green lines. A large curved green line is associated with the text getTotalLength(). A branching green line, forming part of a geometric shape, is associated with the text getCTM(). A straight white line segment with two white circular points is labeled getPointAtLength(). The points on this white line are annotated with pairs of numbers (0.42, 0.80 and 0.58, 0.69), likely representing coordinate values.

`getTotalLength()`

`getPointAtLength()`

`getCTM()`

A diagram illustrates two paths with labeled points, likely representing coordinates. The upper path is a white arc with points displaying coordinate pairs, associated with the functions `getTotalLength()` and `getPointAtLength()`. The lower path is a zig-zag line, starting white and turning green, also with points showing coordinate pairs and associated with the function `getCTM()`. One point at the origin of the lower path is labeled 0.00.

`getTotalLength()`

`getPointAtLength()`

`getCTM()`

A diagram showing two distinct paths composed of connected white dots. The upper path is a smooth curve, labeled with 'getTotalLength()' and 'getPointAtLength()'. The lower path is a more angular, segmented line, labeled with 'getCTM()'. Each point on both paths is annotated with two numerical coordinates. A segment of the lower path is highlighted in green.

A graph displaying two distinct shapes formed by connected white dots. The upper shape is a large, smooth curve resembling a sine wave. The lower shape is a smaller, angular, zigzag line, forming a series of triangles. One segment of the lower, angular line is highlighted in green. Each white dot on both shapes is labeled with two numerical values, likely representing coordinates.

A technical plot or diagram on a black background. It features a large white curved line, resembling an arc or part of a sine wave, spanning the top and left side of the slide. Along this curve, several white dots mark points, each accompanied by a pair of white numerical coordinates (e.g., -0.85, 0.29; -0.51, 0.74). Below this curve, in the bottom-middle and bottom-right, are two distinct V-shaped patterns formed by white line segments. These V-shapes also have white dots at their vertices and along their segments, with single or paired white numerical labels (e.g., -0.89; 0.10, 0.10; 0.47, 0.24).

let x = [
  0.90,  0.88,  0.82,  0.72,  0.58,  0.42,  0.24,  0.05, -0.15, -0.33, -0.51, -0.65, -0.77, -0.85, -0.89, -0.89, -0.14,
 -0.85, -0.77, -0.65, -0.51, -0.33, -0.15,  0.05,  0.24,  0.42,  0.58,  0.72,  0.82,  0.88,  0.90,  0.00, -0.14,
 -0.27, -0.41, -0.27, -0.14,  0.00,  0.16,  0.31,  0.47,  0.62,  0.47,  0.31,  0.16,  0.00,  0.00,  0.00,  0.00,
  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00
];

let y = [
  0.00,  0.19,  0.38,  0.54,  0.69,  0.80,  0.87,  0.90,  0.89,  0.84,  0.74,  0.62,  0.46,  0.29,  0.10, -0.10,
 -0.29, -0.46, -0.62, -0.74, -0.84, -0.89, -0.90, -0.87, -0.80, -0.69, -0.54, -0.38, -0.19, -0.00,  0.00,  0.10,
  0.19,  0.29,  0.19,  0.10,  0.00,  0.08,  0.16,  0.24,  0.32,  0.24,  0.16,  0.08,  0.00, -0.18, -0.36, -0.54,
 -0.72, -0.90, -0.72, -0.54, -0.36, -0.18, -0.00
];

The slide displays two large arrays of numbers, labeled 'x' and 'y', formatted like matrices in a code editor. These arrays represent coordinate data.

let x = [
0.90, 0.88, 0.82, 0.72, 0.58, 0.42, 0.24, 0.05, -0.15, -0.33, -0.51, -0.65, -0.77, -0.85, -0.89, -0.89,
-0.85, -0.77, -0.65, -0.51, -0.33, -0.15, 0.05, 0.24, 0.42, 0.58, 0.72, 0.82, 0.88, 0.90, 0.00, -0.14,
-0.27, -0.41, -0.27, -0.14, 0.00, 0.16, 0.31, 0.47, 0.62, 0.47, 0.31, 0.16, 0.00, 0.00, 0.00, 0.00,
0.00, 0.00, 0.00, 0.00, 0.00, 0.00
];

let y = [
0.00, 0.19, 0.38, 0.54, 0.69, 0.80, 0.87, 0.90, 0.89, 0.84, 0.74, 0.62, 0.46, 0.29, 0.10, -0.10,
-0.29, -0.46, -0.62, -0.74, -0.84, -0.89, -0.90, -0.87, -0.80, -0.69, -0.54, -0.38, -0.19, -0.00, 0.00, 0.10,
0.19, 0.29, 0.19, 0.10, 0.00, 0.08, 0.16, 0.24, 0.32, 0.24, 0.16, 0.08, 0.00, -0.18, -0.36, -0.54,
-0.72, -0.90, -0.72, -0.54, -0.36, -0.18, -0.00
];

The slide displays two plots on a black background. The top plot, in white, shows a smooth wave followed by a sharp zig-zagging line. The bottom plot, in red, shows a smooth wave that resembles a sine curve. Below each plot are JavaScript array declarations named `x` and `y`, containing numerical data points, presumably used to generate the plots.

let x = [
	0.90,	0.88,	0.82,	0.72,	0.58,	0.42,	0.24,	0.05,	-0.15,	-0.33,	-0.51,	-0.65,	-0.77,	-0.85,	-0.89,	-0.89,
	-0.85,	-0.77,	-0.65,	-0.51,	-0.33,	-0.15,	0.05,	0.24,	0.42,	0.58,	0.72,	0.82,	0.88,	0.90,	0.00,	-0.14,
	-0.27,	-0.41,	-0.27,	-0.14,	0.00,	0.16,	0.31,	0.47,	0.62,	0.47,	0.31,	0.16,	0.00,	0.00,	0.00,	0.00,
	0.00,	0.00,	0.00,	0.00,	0.00,	0.00
];

let y = [
	0.00,	0.19,	0.38,	0.54,	0.69,	0.80,	0.87,	0.90,	0.89,	0.84,	0.74,	0.62,	0.46,	0.29,	0.10,	-0.10,
	-0.29,	-0.46,	-0.62,	-0.74,	-0.84,	-0.89,	-0.90,	-0.87,	-0.80,	-0.69,	-0.54,	-0.38,	-0.19,	-0.00,	0.00,	0.10,
	0.19,	0.29,	0.19,	0.10,	0.00,	0.08,	0.16,	0.24,	0.32,	0.24,	0.16,	0.08,	0.00,	-0.18,	-0.36,	-0.54,
	-0.72,	-0.90,	-0.72,	-0.54,	-0.36,	-0.18,	-0.00
];

Two line graphs. The top graph, drawn with a white line, shows a smooth curve followed by a sharp drop and then a series of interconnected straight line segments resembling triangular peaks and troughs. The bottom graph, drawn with a red line, displays a generally wavelike pattern that transitions from smooth to more angular, with several peaks and valleys.

30 TIMES PER SECOND

Generator

Screenshot of a web application named 'Generator'. The interface includes a top bar with a 'Power Off' button and a menu bar with icons and labels for 'Waves', 'Shapes', 'Clock', 'ECG', 'Text', 'SVG', 'Dino', and 'Doom'. The main content area shows a simple analog clock graphic, 'Code' and 'Draw' buttons, and a 'Custom' dropdown. Below this, a code editor displays SVG and CSS code, including a `

Generator

Screenshot of a web application interface named 'Generator', featuring tabs for 'Code' and 'Draw', a preview area displaying a simple analog clock, and a code editor showing SVG and CSS for defining clock hands and their rotation based on time variables. The application also shows options for various animation types like Waves, Shapes, Clock, ECG, Text, SVG, Dino, and Doom.

Generator Web Application Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
:root {
  --hours: env(time-hour,10);
  --minutes: env(time-minute,10);
  --seconds: env(time-second,30);
}

.hand {
  transform-origin: 50px 50px;
}
...

A screenshot of the "Generator" web application interface. It features a top navigation bar with options like Waves, Shapes, Clock, ECG, Text, SVG, Dino, and Doom, with "SVG" currently selected. Below the navigation, there are "Code" and "Draw" buttons, with "Code" active. A central preview area displays a simplified analog clock with two hands. Below the preview, a dropdown labeled "Custom..." is visible. The lower part of the screen shows a code editor displaying HTML (SVG) and CSS code, where CSS variables for time (hours, minutes, seconds) are defined and a .hand class specifies transform-origin.

Our A/V cable connects to the X channel

A dark, close-up image showing a metallic, cylindrical component, possibly a knob or connector, mounted on a textured grey panel on the right side. A small screw is visible next to the component. The background on the left is dark and out of focus.

A close-up image of a metallic cylindrical connector or component, mounted on a dark surface with a visible screw, next to a textured gray panel.

TRIO 15MHz OSCILLOSCOPE CS-1560A

A close-up view of a TRIO 15MHz Oscilloscope CS-1560A. The screen displays a green circular waveform with a diagonal line inside, set against a grid. A hand is visible adjusting one of the control knobs on the right side of the oscilloscope.

TRIO 15MHz Oscilloscope CS-1560A

A close-up of a vintage TRIO 15MHz Oscilloscope CS-1560A. Its screen displays a green circular waveform with a diagonal line resembling a clock hand, overlaid on a grid. A hand is visible adjusting one of the control knobs on the right side of the oscilloscope.

TRIO 15MHz OSCILLOSCOPE CS-1560A

A close-up view of a TRIO 15MHz OSCILLOSCOPE CS-1560A. Its screen shows a green circular waveform against a blue grid, with two green diagonal lines resembling clock hands emanating from the center. A hand is visible on the right, adjusting a dial labeled "SWEEP TIME/DIV".

Generator

Clock

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
<style>
  :root {
    --hours: env(time-hour, 10);
    --minutes: env(time-minute, 10);
    --seconds: env(time-second, 30);
  }

  .hand {
    transform-origin: 100px 100px;
  }

  .hour-hand {
    animation: rotate-360 43200s linear infinite;
    animation-delay: calc((var(--hours) * -3600s) + (var(--minutes) * -60s));
  }

  .minute-hand {
    animation: rotate-360 3600s linear infinite;
    animation-delay: calc((var(--minutes) * -60s) + (var(--seconds) * -1s));
  }
  ...

Oscilloscope

Toggles: Generator, Microphone

Controls:

INTENS: 0.75
FOCUS: 0.20
X POS: 0.00
TIME/DIV: 0.20 3ms
TRIGGER: A 0.00

CHANNEL A

POSITION: 0.00
AMPL/DIV: 0.1V

CHANNEL B

POSITION: 0.00
AMPL/DIV: 0.1V

Screenshot of a web application with two main panels. The left panel, labeled "Generator", shows an SVG/CSS code editor displaying code for a clock and a small preview of a clock face. The right panel, labeled "Oscilloscope", presents a dark screen with digital controls and numerical readouts, simulating an oscilloscope interface.

Generator and Oscilloscope Application Interface

A screenshot of a web application interface, split into two main sections. The left section, titled "Generator", shows various signal generation options, including a clock with its CSS code. The right section, titled "Oscilloscope", displays a set of controls for an oscilloscope, including intensity, focus, position, time division, trigger, and amplitude/division settings for two channels.

Generator

The generator is in 'Clock' mode, displaying its CSS code. A 'POWER OFF' button is visible.

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
	<style>
		:root {
			--hours: env(time-hour, 10);
			--minutes: env(time-minute, 16);
			--seconds: env(time-second, 30);
		}

		.hand {
			transform-origin: 100px 100px;
		}

		.hour-hand {
			animation: rotate-360 43200s linear infinite;
			animation-delay: calc((var(--hours) + var(--seconds) / 3600) * -60s);
		}

		.minute-hand {
			animation: rotate-360 3600s linear infinite;
			animation-delay: calc((var(--minutes) + var(--seconds) / 60) * -60s);
		}
		...
	</style>

Oscilloscope

The oscilloscope is powered on, with the 'Generator' input selected and 'A' trigger mode active.

INTENS: 0.75
FOCUS: 0.20
XPOS: 0.00
TIME/DIV: 1ms
TRIGGER: A
CHANNEL A: POSITION: 0.00, AMPL/DIV: 0.1V
CHANNEL B: POSITION: 0.00, AMPL/DIV: 0.1V

Screenshot of a dual-panel web application, serving as a signal generator and an oscilloscope. The left panel, labeled "Generator", shows CSS code for an analog clock. The right panel, labeled "Oscilloscope", displays various control settings and numerical readouts, with a dark screen indicating its active state.

Generator

Screenshot of a web application interface. The left panel, labeled 'Generator', features various generation options like 'Waves', 'Shapes', 'Clock', 'ECG', 'Text', 'SVG', 'Dino', and 'Doom'. It shows an active 'Code' tab displaying SVG and CSS code for an analog clock, with a preview of the clock above the code. The right panel, labeled 'Oscilloscope', shows its display with a flat green line and controls for intensity, focus, position, and amplitude per division.

Generator and Oscilloscope Application

Screenshot of a web-based application interface with two main panels. On the left, a "Generator" panel displays various options for creating different shapes or signals, including Waves, Shapes, Clock, ECG, Text, SVG, Dino, and Doom. The "SVG" option is selected, and an open dropdown menu shows a list of SVG examples, with "Clock" highlighted and checked. Below this, a code editor displays SVG and CSS code, detailing animation properties for hour and minute hands of a clock. On the right, an "Oscilloscope" panel features controls for "Generator" and "Microphone", along with sliders for "INTENS", "FOCUS", "POSITION", and "AMPL/DIV", showing a grid display.

Web Application: Generator and Oscilloscope

Screenshot of a web application interface. The left panel, labeled "Generator", features various signal type buttons (Waves, Shapes, Clock, ECG, Text, SVG, Dino, Doom), a code editor displaying SVG and CSS for an analog clock, and a visual output showing a minimalist analog clock face. The right panel, labeled "Oscilloscope", presents a dark green grid with a visible waveform and includes sliders for Intensity, Focus, Channel A Position, and Ampl/Div settings.

Generator and Oscilloscope Interface

Screenshot of a web application featuring a "Generator" panel on the left and an "Oscilloscope" panel on the right. The Generator panel shows options like Waves, Shapes, Clock, ECG, Text, SVG, Dino, and Doom, and displays an analog clock with its underlying SVG code. The Oscilloscope panel shows a green circular waveform on a dark grid, along with sliders for intensity, focus, position, and amplitude/division.

Generator and Oscilloscope Web Application

Generator Section

Configured for a Clock signal. Current view is "Code".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
<style>
:root {
  --hours: env(time-hour,10);
  --minutes: env(time-minute,10);
  --seconds: env(time-

Generator and Oscilloscope Application Interface

Screenshot of a web-based application interface, showing a "Generator" panel on the left and an "Oscilloscope" panel on the right. The Generator panel displays controls for various signal types (Waves, Shapes, Clock, ECG, Text, SVG, Dino, Doom), an interactive analog clock visualization, and an SVG code editor displaying CSS rules for the clock's animation. The Oscilloscope panel shows a circular green waveform on a dark grid, along with sliders for adjusting intensity, focus, position, and amplitude.

Generator Code for Analog Clock

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
  <style>
    :root {
      --hours: env(time-hour,10);
      --minutes: env(time-minute,10);
      --seconds: env(time-second,30);
    }

    .hand {
      transform-origin: 100px 100px;
    }

    .hour-hand {
      animation: rotate-360 43200s linear infinite;
      animation-delay: calc((var(--hours) * -3600s) + (var(--minutes) * -60s));
    }

    .minute-hand {
      animation: rotate-360 3600s linear infinite;
      animation-delay: calc((var(--minutes) * -60s) + (var(--seconds) * -1s));
    }
  </style>
  ...

Screenshot of a web application split into two main sections. The left section, labeled 'Generator', displays an analog clock face showing approximately 10:10, and a code editor containing SVG and CSS code that defines the clock's appearance and animation. The right section, labeled 'Oscilloscope', shows a live video feed of a TRIO 15MHz oscilloscope with a waveform displayed on its grid screen.

An oscilloscope displaying a waveform is on the left, connected to a laptop with its lid closed on the right, both resting on a dark table.

TRIO 15MHz OSCILLOSCOPE CS-1560A

Screenshot of a digital oscilloscope interface displaying a circular waveform with a diagonal line on its screen.

Generator: Clock

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200" width="400" height="400">
    <style>
      :root {
        --hours: env(time-hour, 18);
        --minutes: env(time-minute, 18);
        --seconds: env(time-second, 30);
      }
      .hand {
        transform-origin: 100px 100px;
      }
      .hour-hand {
        animation: rotate-360 43200s linear infinite;
        animation-delay: calc(var(--hours) * -3600s + (var(--minutes) * -60s));
      }
      .minute-hand {
        animation: rotate-360 3600s linear infinite;
        animation-delay: calc(var(--minutes) * -60s + (var(--seconds) * -1s));
      }
      ...
    </style>
    <path class="second-hand" d="M100 100 L100 10" stroke="red" stroke-width="2" stroke-linecap="round" fill="none" />
  </svg>

Oscilloscope: TRIO 15MHz OSCILLOSCOPE CS-156DA

A split-screen presentation showing two distinct applications. On the left, a web-based code editor or generator interface labeled "Generator". It has tabs for "Waves", "Shapes", "Clock", "ECG", "Text", "SVG", "Deno", and "CSS Paint", with "Clock" and "Code" selected. Below the tabs, a small visualization of a clock hand is shown, and a code editor displays SVG and CSS code for creating a clock. On the right, an image of a vintage-style oscilloscope. The oscilloscope's screen displays a bright blue circle with a grid overlay and a diagonal line, representing a clock hand. The model name "TRIO 15MHz OSCILLOSCOPE CS-156DA" is visible on the device.

A geometric pattern composed of dark rectangular shapes on a white background.

Generator Application and Oscilloscope

A screenshot of a web-based 'Generator' application interface, featuring SVG/CSS code for a clock animation and a small clock face preview. Adjacent is a 'TRIO 15MHz OSCILLOSCOPE CS-1560A' displaying the same clock animation as a glowing blue trace on its gridded screen.

Generator Application and Oscilloscope Demonstration

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
<style>
:root {
  --hours: env(time-hour,10);
  --minutes: env(time-minute,10);
  --seconds: env(time-second,30);
}

.hand {
  transform-origin: 100px 100px;
}

.hour-hand {
  animation: rotate-360 43200s linear infinite;
  animation-delay: calc(var(--hours) * -3600s) + (var(--minutes) * -60s));
}

.minute-hand {
  animation: rotate-360 3600s linear infinite;
  animation-delay: calc(var(--minutes) * -60s) + (var(--seconds) * -1s));
}
</style>

A split image showing on the left, a screenshot of a web application called "Generator" with various tabs and an interface to create animations. Below the UI, a code editor displays SVG and CSS code for an animated clock. On the right, a photograph of a physical TRIO 15MHz OSCILLOSCOPE CS-1560A, which shows the generated clock animation as a glowing blue display on its screen.

Generator Application and Oscilloscope Display

Generator UI

The application interface includes a row of content type buttons: Waves, Shapes, Clock, ECG, Text, SVG, Dino, Doom. Below this, there are tabs for Code and Draw modes. A dropdown labeled "Clock" is selected, next to a Restart button.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
  <style>
    :root {
      --hours: env(time-hour, 10);
      --minutes: env(time-minute, 10);
      --seconds: env(time-second, 30);
    }

    .hand {
      transform-origin: 100px 100px;
    }

    .hour-hand {
      animation: rotate-360 43200s

Generator: Clock SVG/CSS Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
    <style>
        :root {
            --hours: env(time-hour, 10);
            --minutes: env(time-minute, 10);
            --seconds: env(time-second, 30);
        }

        .hand {
            transform-origin: 100px 100px;
        }

        .hour-hand {
            animation: rotate-360 43200s linear infinite;
            animation-delay: calc(var(--hours) * -3600s) + (var(--minutes) * -60s);
        }

        .minute-hand {
            animation: rotate-360 3600s linear infinite;
            animation-delay: calc(var(--minutes) * -60s) + (var(--seconds) * -1s);
        }

A split-screen view showing a web application on the left and a physical oscilloscope on the right. The left panel, labeled "Generator", displays a user interface with options like "Waves", "Shapes", "Clock", "ECG", "Text", "SVG", "Dino", "Doom", where "Clock" and "SVG" are selected. It shows a circular clock preview with two hands. Below the preview, a code editor displays HTML with embedded CSS code for defining the clock's animation using variables for hours, minutes, and seconds. The right panel shows a close-up of a vintage TRIO 15MHz Oscilloscope CS-1560A, with its screen displaying a glowing blue circular clock face with two hands, visually representing the output of the code.

CSS Animated SVG Clock Code and Oscilloscope Display

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
	<style>
		:root {
			--hours: env(time-hour,10);
			--minutes: env(time-minute,10);
			--seconds: env(time-second,30);
		}

		.hand {
			transform-origin: 100px 100px;
		}

		.hour-hand {
			animation: rotate-360 43200s linear infinite;
			animation-delay: calc(var(--hours) * -3600s) + var(--minutes) * -60s);
		}

		.minute-hand {
			animation: rotate-360 3600s linear infinite;
			animation-delay: calc(var(--minutes) * -60s) - var(--seconds) * -1s);
		}
	</style>
	...
</svg>

Screenshot of a presentation slide divided into two main panels. The left panel shows a 'Generator' application interface, displaying SVG code with embedded CSS that defines an analog clock. A small circular preview of the clock face with an hour and minute hand is visible above the code editor. The right panel displays a 'TRIO 15MHZ OSCILLOSCOPE CS-1560A', showing a glowing blue analog clock face on its screen, with its hour and minute hands moving, mimicking the clock generated by the code on the left.

Generator

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200" width="400" height="400">
<style>
:root {
  --hours: env(time-hour, 10);
  --minutes: env(time-minute, 10);
  --seconds: env(time-second, 30);
}

.hand {
  transform-origin: 100px 100px;
}

.hour-hand {
  animation: rotate-360 43200s linear infinite;
  animation-delay: calc(var(--hours) * -3600s) + (var(--minutes) * -60s);
}

.minute-hand {
  animation: rotate-360 3600s linear infinite;
  animation-delay: calc(var(--minutes) * -60s) + (var(--seconds) * -1s);
}
...
</style>

Oscilloscope: TRIO 15MHz OSCILLOSCOPE CS-1560A

A screenshot of a web application split into two panels. The left panel, labeled "Generator", shows a dropdown menu with animation options where "Clock" is selected and "Dino" is highlighted. Below the menu, CSS code for animating clock hands is displayed. The right panel, labeled "Oscilloscope", features a vintage oscilloscope screen displaying a circular grid with two animated clock hands, resembling a clock face.

SVG Animation on an Oscilloscope

Screenshot showing two main panels. The left panel displays a user interface for an application with buttons labeled 'Text', 'SVG', 'Dino', and 'Doom'. An open dropdown menu partially obscures a simple line drawing depicting a circle with a radial line. The right panel features a close-up of a vintage Trio 15MHz Oscilloscope CS-1560A. Its screen displays a bright blue circular arc and a rotating radial line, simulating an animation. Control knobs are visible on the right side of the oscilloscope.

CSS Day

<svg
	xmlns="http://www.w3.org/2000/svg"
	width="614" height="383"
	viewBox="0 0 614 383"
	class="tv"
>
	<g id="logo">
		<g id="c____">
			<rect x="0" y="0" width="184" height="46"/>
			<rect x="0" y="55" width="46" height="122"/>
			<rect x="57" y="131" width="127" height="46"/>
		</g>
		<g id="_s____">
			<rect x="215" y="0" width="46" height="110"/>
			<rect x="271" y="0" width="128" height="46"/>
			<rect x="275" y="65" width="64" height="46"/>
			<rect x="353" y="65" width="46" height="110"/>
			<rect x="215" y="131" width="128" height="46"/>
		</g>
		<g id="__s____">

A geometric pattern composed of black rounded rectangular bars arranged in a grid-like design.

CSS Day SVG Generation

A screenshot of a custom application with two main panels. The left panel, a 'Generator', shows options for creating patterns from categories like Waves, Shapes, ECG, Text, SVG, Dino, and Doom, with an active SVG code editor displaying rectangle elements and a 'CSS Day' dropdown selected. The right panel, an 'Oscilloscope' interface, displays a green, circuit-like pattern spelling 'CSS DAY' on a simulated TRIO 15MHz Oscilloscope screen.

Generator and Oscilloscope Demonstration

The slide presents a split view, showcasing an interactive web-based "Generator" application on the left and a physical "Oscilloscope" on the right, both related to vector graphics output.

Generator Interface (Left Panel)

At the top, the interface displays "POWER OFF" and various selectable modes: Waves, Shapes, Clock, ECG, Text, SVG, Dino, DINO, Drones. The "Code" tab is currently active, and a dropdown menu shows "CSS Day" selected, alongside a "Restart" button.

Below these controls, an HTML code editor displays the following SVG markup, which generates graphic elements:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 614 363"
     width="614" height="363"
     viewBox="0 0 614 363"
     class="v">
  <g id="logo">
    <g id="____" >
      <rect x="0" y="0" width="184" height="46" />
      <rect x="0" y="55" width="46" height="122" />
      <rect x="0" y="55" width="131" width="46" />
    </g>
    <g id="j____" >
      <rect x="215" y="0" width="46" height="18" />
      <rect x="221" y="9" width="46" height="46" />
      <rect x="221" y="8" width="131" height="46" />
      <rect x="221" y="9" width="46" height="131" />
      <rect x="221" y="9" width="46" height="46" />
    </g>
    <g id="e____" >
      ...
    </g>
  </g>
</svg>

Oscilloscope Display (Right Panel)

The right panel shows a "POWER OFF" button for the oscilloscope, which is identified as a TRIO 15MHz OSCILLOSCOPE CS-1560A.

The left side of the screen shows a web-based application interface titled "Generator". It features a top bar with various interactive modes like "Waves", "Shapes", and "SVG". The "Code" tab is active, displaying an HTML snippet of an SVG graphic composed of `` elements. To the right of the code, a small preview area shows a blocky, abstract design. A dropdown menu in the interface has "CSS Day" selected.

The right side of the screen displays a vintage TRIO 15MHz Oscilloscope CS-1560A. Its green CRT screen is illuminated with a complex vector graphic, appearing like a circuit board or maze pattern, which clearly spells out the words "CSS Day". The oscilloscope itself has various knobs, dials, and ports on its front panel.

Generator

Oscilloscope

Screenshot of a web application interface named "Generator" showing various controls for creating visual effects, with options like "Waves", "Shapes", "Clock", "ECG", "Text", "SVG", and "Dino". It displays a small preview of a grid pattern and a code editor pane with SVG code.

Screenshot of a vintage TRIO 15MHz CS-1560A oscilloscope displaying a complex, circuit-like grid pattern in blue on its screen.

Generator

Tools/Modes:

Waves
Shapes
Clock
ECG
Text
SVG
Dino
JS DOS

Display Modes:

Code
Draw

Current Selection: CSS Day

<svg xmlns="http://www.w3.org/2000/svg"
             width="614" height="383"
             viewBox="0 0 614 383"
             class="[v]
            <g id="logo">
                <g id="_____">
                    <rect x="0" y="0" width="46" height="46" />
                    <rect x="0" y="55" width="35" height="46" />
                    <rect x="0" y="110" width="57" y="111" width="46" />
                </g>
                <g id="_____">
                    <rect x="215" y="0" width="46" height="46" />
                    <rect x="215" y="55" width="46" height="46" />
                    <rect x="215" y="110" width="46" height="46" />
                </g>
    ...

Oscilloscope

Model: TRIO 15MHz OSCILLOSCOPE CS-156DA

Key Controls:

POSITION
VOLTS/DIV
SWEEP TIME /CM

A screenshot of a web application split into two panels. The left panel, titled "Generator", shows an interface for live coding or generating visual elements, displaying SVG code. The right panel, titled "Oscilloscope", shows a simulated TRIO 15MHz OSCILLOSCOPE CS-156DA with a bright blue dot centered on its gridded screen.

Web-based SVG Generator and Oscilloscope Demonstration

Screenshot of a web application with two main panels. The left panel, labeled "Generator", shows a code editor displaying SVG code and a visual representation of a geometric pattern. The right panel, labeled "Oscilloscope", displays a simulated vintage TRIO 15MHz Oscilloscope with a glowing blue dot on its screen.

Generator

Selected pattern: CSS Day

<!DOCTYPE html>
<svg xmlns="http://www.w3.org/2000/svg"
  width="614" height="383"
  viewBox="0 0 614 383"
  class="tv"
>
  <g id="logo">
    <g id="s__1">
      <rect x="8" y="8" width="114" height="46"/>
      <rect x="8" y="55" width="46" height="122"/>
      <rect x="57" y="55" width="111" height="46"/>
    </g>
    <g id="s__2">
      <rect x="215" y="8" width="46" height="118"/>
      <rect x="215" y="8" width="46" height="46"/>
      <rect x="215" y="55" width="46" height="122"/>
      <rect x="223" y="8" width="46" height="46"/>
      <rect x="233" y="55" width="46" height="46"/>
      <rect x="215" y="111" width="46" height="46"/>
      <rect x="215" y="158" width="46" height="118"/>
      <rect x="215" y="215" width="46" height="118"/>
      <rect x="255" y="215" width="46" height="118"/>
      <rect x="215" y="271" width="46" height="118"/>
      ...

Oscilloscope

Model: TRIO 15MHz OSCILLOSCOPE CS-1560A

A web application interface labeled "Generator" with an SVG code editor, controls for various shapes, and a small preview of a geometric pattern. Alongside it, a vintage Trio 15MHz Oscilloscope CS-1560A displays a glowing blue geometric pattern on its screen, resembling the "CSS Day" logo.

TRIO 15MHz OSCILLOSCOPE CS-1560A

A close-up of a vintage TRIO 15MHz Oscilloscope CS-1560A, showing its control panel and a blue-green pixelated pattern on its screen, set against a grid.

Screenshot of a Trio 15MHz Oscilloscope CS-1560A, displaying abstract glowing blue shapes on a grid, resembling a retro video game.

TRIO 15MHz Oscilloscope CS-1560A

A close-up of a vintage oscilloscope with a blue grid display showing bright light blue vector graphics: a pentagon, a triangle, and another irregular polygon, along with several scattered dots. Various control knobs and labels are visible on the oscilloscope's front panel, including "POWER ILLUM", "INTENSITY", "VARIABLE SWEEP TIME/DIV", and "TRIGGERING".

Oscilloscope

Screenshot of an application interface showing controls such as "Power Off" and a camera selection labeled "BRIO 4K Stream Edition". The main display area shows a close-up of a physical TRIO 15MHz Oscilloscope model CS-1560A.

Camera stream of a Trio 15MHz Oscilloscope CS-1560A

Screenshot of a software interface, likely for a camera or streaming application, displaying a close-up view of a Trio 15MHz Oscilloscope model CS-1560A. The interface has a "POWER OFF" button, an "Oscilloscope" title, and a dropdown labeled "BRIO 4K Stream Edition".

Oscilloscope

Screenshot of a software interface displaying a TRIO 15MHz Oscilloscope model CS-1560A.

Generator

<svg viewBox="0 0 500 500" onload="init()"></svg>
<script>
  const SVG_NS = "http://www.w3.org/2000/svg"
  const W = 500, H = 500;
  const TAU = Math.PI * 2;

  let game, ship, bullets, asteroids, keys, alive, respawnTimer;

  function init() {
    game = document.getElementById("game");
    keys = {};
    document.addEventListener("keydown", e => { keys[e.code] = true; });
    document.addEventListener("keyup", e => { keys[e.code] = false; });
    restart();
    requestAnimationFrame(loop);
  }
</script>

Oscilloscope

TRIO 15MHz OSCILLOSCOPE CS-1560A

A split-screen presentation. The left panel shows a software interface labeled "Generator" displaying JavaScript code and a small visual preview of geometric shapes. An "Asteroids" game mode is selected. The right panel shows a photograph of a TRIO 15MHz CS-1560A oscilloscope. Its green screen displays a vector graphics game, resembling Asteroids, with hexagonal shapes and a spaceship outline, all against a grid background.

Generator Interface and Code

Controls include: Waves, Shapes, Clock, ECG, Text, SVG, Dino, DDR, Doom. Tabs for Code and Draw. Game selection: Asteroids.

<svg viewBox="0 0 500 500" onload="init()">
    <p id="game"></p>

<script>
    const SVG_NS = "http://www.w3.org/2000/svg";
    const W = 500, H = 500;
    const TAU = Math.PI * 2;

    let game, ship, bullets, asteroids, keys, alive, respawnTimer;

    function init() {
        game = document.getElementById("game");
        keys = {};
        document.addEventListener("keydown", e => { keys[e.code] = true; });
        document.addEventListener("keyup", e => { keys[e.code] = false; });
        restart();
        requestAnimationFrame(loop);
    }

Screenshot of a user interface divided into two panels. The left panel shows a code editor with JavaScript and HTML code for a game. The right panel displays an image of a TRIO 15MHz Oscilloscope CS-1560A, with its screen showing vector graphics resembling an Asteroids-like game with a spaceship, asteroids, and the number '3'.

Generator / Oscilloscope

Screenshot of a web application showing a "Generator" panel on the left and an "Oscilloscope" panel on the right. The Generator panel displays code for an Asteroids-like game, with "Asteroids" selected in a dropdown. The Oscilloscope panel features a TRIO 15MHz Oscilloscope, whose screen displays the Asteroids game in progress.

Generator Application

This section of the application shows a code editor for an SVG-based game. Available modes include Waves, Shapes, Clock, ECG, Text, EVO, Dino, 2048, and Zoom. The current view is set to 'Code' with an option for 'Draw', and the selected game is 'Asteroids'. A 'Restart' button is also visible.

Code Example (HTML/JavaScript for SVG game):

<svg viewBox="0 0 500 500" onload="init()">
    <g id="game"></g>
</svg>

<script>
    const SVG_NS = "http://www.w3.org/2000/svg";
    const W = 500, H = 500;
    const TAU = Math.PI * 2;

    let game, ship, bullets, asteroids, keys, respawnTimer;

    function init() {
        game = document.getElementById("game");
        keys = {};
        document.addEventListener("keydown", e => { keys[e.code] = true; });
        document.addEventListener("keyup", e => { keys[e.code] = false; });
        restart();
        requestAnimationFrame(loop);
    }
...

Oscilloscope Display

The displayed oscilloscope is a TRIO 15MHz OSCILLOSCOPE CS-1565A.

Screenshot of a web application showing a code editor on the left with HTML and JavaScript code for an SVG-based game, alongside controls for selecting different modes and views. On the right, a physical TRIO 15MHz Oscilloscope displays vector graphics resembling an Asteroids game on its screen.

Generator and Oscilloscope Application

Screenshot of a web application interface split into two main panes. The left pane, labeled 'Generator', displays a code editor showing JavaScript code for an 'Asteroids' style game and a small drawing area with simple shapes. It also includes options for different signal or graphic generation types. The right pane, labeled 'Oscilloscope', shows a simulated 'TRIO 15MHz OSCILLOSCOPE CS-1560A' displaying vector graphics, depicting a ship and asteroid shapes, on a blue-green grid simulating a CRT screen.

Web-based Vector Graphics Generator for Oscilloscopes

Game: Asteroids


<svg viewBox="0 0 500 500" onload="init()"></svg>
<p id="game"></p>
<script>
const SVG_NS = "http://www.w3.org/2000/svg";
const W = 500, H = 500;
const TAU = Math.PI * 2;

let game, ship, bullets, asteroids, keys, respawnTimer;

function init() {
  game = document.getElementById("game");
  keys = {};
  document.addEventListener("keydown", e => { keys[e.code] = true; });
  document.addEventListener("keyup", e => { keys[e.code] = false; });
  restart();
  requestAnimationFrame(loop);
}
</script>

A split-screen view. The left side shows a web application interface labeled 'Generator' with a code editor displaying HTML and JavaScript code. The right side shows a TRIO 15MHz CS-156DA oscilloscope. The oscilloscope's screen displays glowing green vector graphics of a spaceship and several irregular asteroid shapes on a grid, representing an Asteroids-like game.

A close-up image showing a light-colored, possibly metallic or plastic surface with rows of horizontal ventilation slots along the top edge. The surface appears to be part of an electronic device.

Close-up photo of the casing of a device, showing a pattern of ventilation slots, likely an oscilloscope after an incident.

A close-up image showing the aftermath of a damaged electronic device, possibly an oscilloscope, with a perforated metal surface in the foreground.

A close-up screenshot of the top of an electronic device, likely an oscilloscope, showing vents and what appears to be smoke or vapor rising from it, indicating damage.

NOW WHAT?

An aged, gold-colored rectangular electronic component, possibly a capacitor or battery, with two white wires protruding, appearing worn or damaged.

Oscilloscope Models

Philips PM 3305 35MHz
Trio 15MHz Oscilloscope CS-1560A
Philips PM 3217 50MHz

A close-up image showing a stack of various vintage electronic test equipment, primarily oscilloscopes, with their screens and control panels visible.

A collage of multiple vintage oscilloscopes, showing various models and brands with their screens and control panels.

A collage of various vintage electronic test equipment, primarily oscilloscopes and signal generators, showing multiple control panels and CRT screens.

Oscilloscope

Screenshot of an oscilloscope simulator displaying a circular waveform with a 'Y' shape on a green gridded screen, surrounded by various control sliders and buttons for settings like power, signal generation, intensity, focus, position, time/division, and channel configurations.

Oscilloscope

Screenshot of an oscilloscope simulator interface, displaying controls for intensity, focus, X position, time/division, trigger, and separate channel A and B settings for position and amplitude per division. A green waveform is displayed on the circular grid of the oscilloscope screen, indicating X/Y mode is active.

Oscilloscope

Screenshot of a digital oscilloscope interface displaying a Lissajous curve in X/Y mode. The interface includes controls for intensity, focus, X position, time/division, trigger, and channel A and B settings.

An oscilloscope display showing green traces on a dark grid, with a partial circle in the top right and several straight lines originating from the center, resembling a simulation of an electron beam.

A simulated oscilloscope screen with a green trace on a dark grid background. The trace shows a partial arc in the upper right corner and three straight lines originating from a central point, forming an angular or star-like pattern.

A simulation of an oscilloscope screen showing a grid, a partial circular trace, and several green lines radiating from the center, along with small bright dots, mimicking phosphor decay.

An oscilloscope screen displaying a bright green trace against a dark grid background. The trace forms a partial arc in the upper right and several straight lines radiating from the center.

A green oscilloscope display on a dark grid, showing a partial circle and several radial lines originating from the center, resembling an electron beam trace.

An oscilloscope display showing a green circular trace and three green lines radiating from the center, against a dark grid background.

An oscilloscope screen displays a bright green trace against a dark green grid, showing a partial circle in the upper right and several radiating lines from a central point on the left. This visual represents a simulation of an electron beam on an oscilloscope.

A simulated oscilloscope display with a dark green grid background, showing bright green traces forming a partial circle and several straight lines emanating from the center, replicating the appearance of an electron beam on a vintage oscilloscope.

An oscilloscope screen displaying a green circular trace and several bright green lines originating from the center against a dark grid background.

An oscilloscope screen displaying a circular green trace, a horizontal line, a vertical line, and a diagonal line, all originating from the center of the screen, against a grid background.

A simulation of an oscilloscope display, featuring bright green lines forming a clock-like or angular pattern on a dark background, enclosed by a faint circular outline. This visualizes an electron beam trace on a phosphor screen.

A simulation of an analog oscilloscope display, showing a green electron beam trace forming a complex, dynamic pattern within a circular frame.

F = (X_target - X_beam) ·
v_n+1 = v_n

A glowing green line, representing a beam, starts from the bottom, bends sharply to the left, and a fainter line branches off straight upwards.

Equations for Beam Simulation with Euler Integration

a = F / m
F = (x_target - x_beam) · k_coil
v_n+1 = v_n + a
v_n+1 = v_n+1 · d
x_n+1 = x_n + v_n+1

Illustrative glowing lines and dots on a dark background, possibly representing a beam path.

$a = \frac{F}{m}$

$F = (x_{target} - x_{beam}) \cdot k_{coil}$

$v_{n + 1} = v_{n} + a$

$v_{n + 1} = v_{n} + v_{n + 1} \cdot d$ $x_{n + 1} = x_{n} + v$ (partial)

A diagram illustrating a beam's path with a vertical and horizontal green line representing axes, and a curving green line depicting the beam's deflection. Several mathematical equations are overlaid on this diagram, showing calculations for force, acceleration, and iterative updates for velocity and position.

a = F / m

F = (x_target - x_beam) · k_coil

v_n+1 = v_n + a

v_n+1 = v_n - v_n+1 · d

x_n+1 = x_n + v

v_n+1 = d · [v_n + k_coil / m · (x_target - x_n)]

a = F / m

F = (x_target - x_beam) * k_coil

v_n+1 = v_n + a

v_n+1 = v_n * d

x_n+1 = x_n + v

v_n+1 = d * [v_n + (k_coil / m) * (x_target - x_n)]

A slide presenting several mathematical equations. A green curved line underlines the equation `v_n+1 = v_n * d`. Another green curved line originates from the bottom right and points towards the equation `x_n+1 = x_n + v`.

α = F/m

F = (x_target − x_beam) ⋅ k_coil

v_n+1 = v_n + a

v_n+1 = v_n ⋅ d

x_n+1 = x_n + v

v_n+1 = d ⋅ [v_n + (k_coil / m) ⋅ (x_target − x_n)]

A diagram illustrates the concept of acceleration (α) equals force (F) over mass (m), showing a green vector originating from a point on a horizontal line.

Overlaid Mathematical Expressions

and
1.75 9
∑
2.1,
4K(1 + K)
= t
u²
(S

A close-up image of a person with a beard and a thoughtful, slightly confused expression. Various mathematical symbols, numbers, and fragmented equations are overlaid on and around their face, visually representing intense or overwhelming calculations. The background shows blurred lights.

A sepia-toned close-up of a person's eyes. Abstract white symbols, including one resembling a stylized 'Phi' and another an 'A', are overlaid on the left eye.

A split-screen image showing a software interface on the left and a vintage TRIO 15MHz Oscilloscope CS-1560A on the right. The left side displays a drawing application with various vector shapes (circles, triangles, star-like polygons) connected by lines, along with UI buttons such as "Code", "Draw", "Text", "SVG", "Dino", "Doom", and "Restart". The right side features the oscilloscope's screen, glowing blue, which shows similar vector shapes (triangles, a star-like polygon, and other irregular polygons) against a grid backdrop. Physical control knobs and a 'POWER ILLUM' indicator are visible on the oscilloscope's front panel.

Oscilloscope Simulator Interface

A split-screen view shows a software interface on the left and an oscilloscope display on the right. The left panel features a drawing or code editor with options like 'CG', 'Text', 'SVG', 'Dino', 'Doom', and tabs for 'Code' and 'Draw'. A canvas within this panel displays simple line art shapes with points labeled A, B, C, D, and a mouse cursor. The right panel shows a close-up of a vintage TRIO 15MHz OSCILLOSCOPE CS-1560A, with its screen displaying abstract glowing blue shapes on a grid, mirroring the shapes seen in the left panel's editor.

Oscilloscope Content Creation Tool

A split-screen view shows a digital interface on the left and a physical oscilloscope on the right. The left panel displays a user interface for an application with tabs labeled 'Code' and 'Draw', and buttons for content types like 'Text', 'SVG', 'Dino', and 'Doom'. Below these controls, a canvas area shows a generative graphic composed of interconnected abstract shapes and small triangles. The right panel is a close-up of a vintage TRIO 15MHz OSCILLOSCOPE CS-1560A. Its blue-glowing screen displays dynamic abstract patterns of arcs, circles, and triangles against a grid, resembling a real-time simulation or game.

A split screen shows an interactive code/draw environment on the left and an oscilloscope display on the right. The left panel features options such as "Text," "SVG," "Dino," "Doom," "Code," "Draw," and a "Restart" button, along with a small abstract line drawing. The right panel shows a TRIO 15MHz OSCILLOSCOPE CS-1560A with its screen displaying glowing blue geometric patterns, including a distorted hexagon, a curved line, two small triangles, and various dots, all against a grid.

Oscilloscope Demonstration

Signal Generator Interface

Options: CG, Text, SVG, Dinosaur Game (icon with "Di"), Doom

Oscilloscope Feed Details

Feed Source: BRIO 4K Stream Edition
Displayed Device: TRIO 15MHz Oscilloscope CS-1560A
Power Status: On (indicated by illuminated red light labeled "POWER ILLUM")
Controls mentioned: VARIABLE SWEEP TIME/DIV

A split-screen presentation showing a software interface on the left and a live video feed of an oscilloscope on the right. The left panel features interactive elements labeled "CG", "A Text", "SVG", a dinosaur icon next to "Di", and a stylized "Doom" logo. The right panel displays the front panel of an older model TRIO 15MHz Oscilloscope CS-1560A. Its screen shows a light blue waveform depicting the profile of the Chrome dinosaur game character. A red power indicator light is illuminated on the oscilloscope. Above the oscilloscope feed, a video overlay displays the title "Oscilloscope" and a "POWER OFF" button.

Demonstration of a signal generator displaying a dinosaur waveform on an oscilloscope

The image shows a split-screen view of a technical demonstration. On the left is a user interface for a signal generator application with buttons labeled "CG", "Text", "SVG", "Dino", and "Doom". The "Dino" button, featuring a dinosaur silhouette, is highlighted, indicating it is selected. On the right is a close-up of a vintage TRIO 15MHz OSCILLOSCOPE CS-1560A. The oscilloscope's blue grid screen displays a bright blue waveform that clearly outlines the shape of a stylized dinosaur, corresponding to the "Dino" generator selection from the left panel. Various control knobs and labels such as "POWER ILLUM", "INTENSITY", and "SWEEP TIME/DIV" are visible on the oscilloscope's front panel.

Application Interface

CG
Text
SVG
Dino
Doom

Oscilloscope Controls

POWER OFF
BRIO 4K Stream Edition

TRIO 15MHz Oscilloscope CS-1560A

POWER ILLUM indicator
VARIABLE SWEEP TIME/DIV knob
INTENSITY knob
TRIGGERING LEVEL PULL AUTO control

A dual-panel screenshot. The left panel shows a simple line graphic with a cactus, representing the Chrome Dino game, with a mouse cursor near the line's start. The right panel displays a physical TRIO 15MHz Oscilloscope CS-1560A. Its blue grid screen shows a fluctuating blue waveform, and its control panel features various knobs and a red 'POWER ILLUM' indicator.

Generator

Oscilloscope

Screenshot of two software applications side-by-side. The left panel shows a 'Generator' application with a simple game-like interface featuring small dinosaur characters and controls for 'JUMP' and 'DUCK'. The right panel displays an 'Oscilloscope' application, specifically a simulation of a TRIO 15MHz Oscilloscope CS-1560A, which shows a waveform resembling the dinosaur character from the left panel.

Generator

Oscilloscope

A split-screen view. On the left, a screenshot of a web application titled "Generator" displaying a simplified version of the Chrome T-Rex dinosaur game. A small pixelated dinosaur stands on a horizontal line, with "SPACE JUMP" and "DUCK" buttons below it. The "Dino" tab is selected in the application's top menu. On the right, a close-up of a vintage TRIO 15MHz OSCILLOSCOPE CS-1560A. Its screen displays a bright blue waveform on a grid, which clearly forms the shape of the T-Rex dinosaur, mimicking the game on the left.

Chrome Dino Game

Screenshot of a web application interface on the left, labeled "Generator", showing the "GAME OVER" screen of the Chrome Dino game. On the right, a live camera feed of a TRIO 15MHz Oscilloscope (model CS-156DA) displaying the same "GAME OVER" screen and dinosaur graphic as a waveform on its CRT display.

Signal Generator and Oscilloscope Displaying the Dino Game

A split screen showing a digital signal generator interface on the left and a physical oscilloscope on the right. The generator interface displays a pixelated "GAME OVER" screen with a dinosaur from the Chrome T-Rex game, along with "SPACE JUMP" and "DUCK" controls. The oscilloscope screen also shows the "GAME OVER" text and dinosaur rendered as a waveform. The oscilloscope is identified as a TRIO 15MHz OSCILLOSCOPE CS-1560A.

Generator and Oscilloscope

A split-screen screenshot showing a web application interface on the left and an oscilloscope display on the right. The left pane, titled 'Generator', displays the Chrome Dino game in a 'GAME OVER' state. The right pane shows a close-up of a Trio 15MHz oscilloscope, with its screen also displaying the Chrome Dino game as a vector graphic.

DINO 4K Stream Edition

Screenshot of a web application for a signal generator on the left, displaying 'GAME OVER' and the Chrome Dino game with controls. On the right, a TRIO 15MHz Oscilloscope shows the same 'GAME OVER' message and Dino game graphics rendered as waveforms on its screen.

Playing the Dino Game on an Oscilloscope

A split-screen view demonstrating a signal generator and an oscilloscope. The left panel shows a digital interface labeled 'Generator', displaying a minimalist pixelated dinosaur game, similar to the Chrome offline game, with the text 'GAME OVER' and 'JUMP' and 'DUCK' controls. The right panel shows a physical TRIO 15MHz Oscilloscope CS-1550A with its screen illuminated, displaying the same pixelated dinosaur game rendered as a waveform on the green grid.

Generator and Oscilloscope Interfaces

A screenshot of a presentation slide showing two application interfaces side-by-side. The left panel displays a web application titled "Generator", which shows a minimalist game featuring a dinosaur character, the text "GAME OVER", and controls for "JUMP" and "DUCK". The right panel displays a TRIO 15MHz Oscilloscope CS-1560A, with its screen showing a waveform on a grid, along with the same minimalist dinosaur game and "GAME OVER" text, indicating the oscilloscope is displaying the output of the generator application.

Dino Game on a Signal Generator and Oscilloscope

Screenshot of a split screen showing a web interface on the left and an oscilloscope on the right. The web interface, labeled "Generator," displays a pixelated dinosaur game with "GAME OVER" text and "JUMP" and "DUCK" controls. The right side shows a physical TRIO 15MHz OSCILLOSCOPE CS-1560A, with its screen rendering the "GAME OVER" text and the dinosaur character in a grid pattern.

Signal Generator and Oscilloscope Demonstration

The slide displays two interfaces side-by-side, demonstrating a digital signal generator creating the Chrome Dino game, which is then output to an oscilloscope.

Generator Interface

Current Status: POWER OFF
Available Modes: Waves, Shapes, Clock, ECG, Text, SVG, Dino, Doom (partially visible)
Game State Display: GAME OVER
Interaction Prompts: SPACE for JUMP, DUCK

Oscilloscope Interface

Model: TRIO 15MHz OSCILLOSCOPE CS-1560A
Current Status: POWER OFF
Display: The oscilloscope screen shows the Chrome Dino game with "GAME OVER" rendered as a series of green waveforms on a grid.

A screenshot of a live demonstration showing two distinct technical interfaces. On the left, a digital application interface labeled "Generator" displays a simplified, monochrome version of the Chrome Dino game, showing "GAME OVER" with the dinosaur and cactus obstacle, alongside selectable options like "Waves", "Dino", and "Doom". On the right, a detailed image of a physical TRIO 15MHz OSCILLOSCOPE CS-1560A is presented, with its CRT screen displaying the same Chrome Dino game, rendered as green waveforms on a grid, also indicating "GAME OVER" with the dinosaur and cactus characters.

Generator

Oscilloscope

A split slide showing two panels. The left panel is a screenshot of a web application interface labeled 'Generator', which displays a minimalistic game resembling the Chrome T-Rex dinosaur game with a 'GAME OVER' state. The right panel is a close-up photograph of a TRIO 15MHz OSCILLOSCOPE CS-1560A, with its screen also displaying the 'GAME OVER' message and the dinosaur game's pixelated graphics.

Demonstration of a Signal Generator and Oscilloscope

A split-screen view showing two application interfaces. On the left is a web-based signal generator interface, displaying a simple wireframe drawing labeled "Map (1M)". On the right is a screenshot of a TRIO 15MHz Oscilloscope (CS-1560A) displaying a blue-green complex waveform on its screen, which appears to correspond to the output of the generator.

DOOM on an Oscilloscope

A vintage TRIO 15MHz Oscilloscope CS-1560A displays vector graphics of a DOOM game level on its screen. To the left, a portion of a streaming software interface is visible, showing a 'POWER OFF' button, a 'BRIO 4K Stream Edition' dropdown, and two instances of the 'DOOM' logo, one of which is highlighted.

DOOM Doom running on an Oscilloscope

An image showing a vintage Trio 15MHz Oscilloscope model CS-1560A. Its screen displays a bright cyan wireframe vector graphic of a 3D environment, characteristic of early 3D games like Doom. In the adjacent user interface, a 'DOOM Doom' button is visible and appears selected, indicating the software running on the oscilloscope.

DOOM

Screenshot of a TRIO 15MHz Oscilloscope CS-1560A with a wireframe rendering of a 3D environment, resembling the game Doom, displayed on its screen. A software interface button labeled 'DOOM' is also visible.

A vintage Trio 15MHz CS-1560A oscilloscope displays a wireframe rendering of a 3D environment, resembling a map from the game Doom.

Doom on Oscilloscope

A vintage grey Trio 15MHz Oscilloscope CS-1560A displays a wireframe rendering of a level from the video game Doom on its blue-gridded screen.

Generator and Oscilloscope Application Interface

Screenshot of a split-screen application interface. The left panel, labeled 'Generator', displays a wireframe 3D environment, reminiscent of a retro video game level (likely Doom's E1M1), with navigation controls below. The right panel, labeled 'Oscilloscope', shows the same wireframe environment rendered on the green screen of a 'TRIO 10MHz OSCILLOSCOPE CS-1562A'.

Generator and Oscilloscope Applications

A split-screen view showing two software interfaces side-by-side. The left interface, labeled "Generator," displays a wireframe drawing of an indoor environment and features controls for various elements like "Waves," "Shapes," and "3D Doors." The right interface, labeled "Oscilloscope," shows a screenshot of a "TRIO 15MHz OSCILLOSCOPE CS-156DA" with its screen displaying the identical wireframe drawing, surrounded by typical oscilloscope controls and settings.

Doom Levels on Generator and Oscilloscope

A split-screen screenshot shows two electronic displays. On the left, a digital "Generator" interface displays a white wireframe 3D rendering of an indoor environment (a Doom level map E1M1). On the right, a classic TRIO 15MHz Oscilloscope CS-1560A is shown, with its screen displaying the same wireframe 3D environment in a bright blue/green electron beam trace against a grid, mimicking the game's perspective.

Generator

Oscilloscope

A split-screen view. The left side shows a digital interface for a "Generator" application, displaying a wireframe rendering of a 3D environment resembling a video game map. The right side shows a vintage TRIO 15MHz Oscilloscope CS-1560A, with its screen displaying the same wireframe rendering.

2D Doom on an Oscilloscope

A presentation slide displaying a split screen. The left side shows a software interface labeled "Generator", with various options including "Waves", "Shapes", and "2D Doom", and a wireframe map preview with navigation controls. The right side shows a physical TRIO 15MHz Oscilloscope (model CS-1560A) with a blue wireframe 3D maze, representing a game map, displayed on its screen.

Generator and Oscilloscope Demonstration

Screenshot showing a dual interface: on the left, a web-based signal 'Generator' application with controls for various signal types including 'Waves', 'Shapes', 'Clock', 'ECG', 'Text', 'SVG', 'Dino', and '2DRoom'. It displays a wireframe rendering of a 2D room. On the right, a physical TRIO 15MHz OSCILLOSCOPE CS-1565A, with its screen displaying the same 2D wireframe room rendered in blue on a grid.

Doom Level Generator and Oscilloscope Display

A screenshot showing two digital interfaces side-by-side. On the left, an application labeled "Generator" displays a wireframe drawing of a 2D map, resembling a level from the game Doom, with navigation controls below it. On the right, a physical TRIO 15MHz OSCILLOSCOPE CS-1560A shows the same wireframe drawing rendered in blue on its green display screen.

Generating Doom's E1M1 Map on an Oscilloscope

A screenshot of a two-panel application. The left panel, labeled 'Generator', shows a wireframe 3D rendering of a Doom E1M1 map with navigation controls for movement. The right panel, labeled 'Oscilloscope', displays a TRIO 15MHz OSCILLOSCOPE CS-1565A whose screen shows the same wireframe 3D Doom map rendered on its display grid.

A green wireframe rendering of a level from the video game Doom, showing interior architectural structures like walls and passages.

A wireframe rendering showing a level from the video game Doom, consisting of interconnected rooms and corridors displayed in green lines on a dark gray background.

A green wireframe rendering of a 3D environment, resembling a corridor or interior level from a classic video game.

A technical drawing showing a wireframe rendering of an interior game level, displayed with bright green lines on a dark grey background. This is likely a visual representation of levels from the game Doom, as discussed by the speaker.

An abstract illustration of glowing green lines on a black background, depicting a simplified wireframe or geometric structure.

A diagram on a black background showing green lines forming geometric shapes, suggesting a wireframe representation of a 3D space or structure.

A black background with two parallel, faint green glowing lines extending horizontally across the upper right portion of the slide.

A black background with a vertical green line on the left and a diagonal green line originating from the top right corner.

A diagonal bright green line on a black background.

A wireframe rendering of a 3D room with green lines on a dark background, showing walls receding into the distance. Three green chevron arrows point upwards on the right side of the screen.

A simple geometric drawing with two green lines forming an inverted V shape on a dark grey background, possibly illustrating a basic 3D projection or a simplified architectural element like walls or a roof.

A green wireframe rendering of a 3D environment, resembling a room or corridor from a video game, demonstrating CSS 3D transforms.

A minimalist 3D wireframe environment rendered in neon green lines on a black background, depicting walls and a floor from a first-person perspective, reminiscent of an early video game or architectural blueprint.

Screenshot of the game Doom

A first-person view screenshot from the game Doom, showing a dark, cavernous environment with green, textured walls and a dark ceiling. The floor is covered in a green, swampy texture. In the distance, a Shotgun Guy enemy stands on a raised platform. The game's user interface is visible at the bottom, displaying player stats (ammo, health, armor) and the player's weapon (pistol).

Screenshot of the game Doom

A screenshot from the first-person shooter game Doom, showing the player's view down a long, dimly lit corridor with a large rectangular light source in the distance. The game's HUD is visible at the bottom, displaying ammo, health, arms, and armor stats, along with the Doomguy's face in the center.

Screenshot of a CSS-rendered Doom-like game

A screenshot of a first-person shooter game with a dark, gray environment. At the bottom of the screen, a user interface (HUD) displays game statistics including ammo, health (33%), arms, and armor, alongside a distressed character's face.

JAVASCRIPT SHOULD ONLY DO WHAT ONLY JAVASCRIPT CAN DO

An image depicting a low-polygon 3D environment, resembling a retro video game interior with walls, a barrel, and a blue floor section.

JAVASCRIPT SHOULD ONLY DO WHAT ONLY JAVASCRIPT CAN DO

JEREMY KEITH

A screenshot from the video game Doom, showing a first-person perspective of a player holding a pistol in a dimly lit corridor. The game's heads-up display (HUD) with ammo, health, and armor statistics is visible at the bottom.

JAVASCRIPT SHOULD ONLY DO WHAT ONLY JAVASCRIPT CAN DO
JEREMY KEITH

A screenshot of a classic first-person shooter video game, reminiscent of Doom. The heads-up display (HUD) shows stats for ammo, health, arms, and armor, along with a small portrait of the player character. The gameplay view depicts a dimly lit, blocky 3D environment with stone walls.

A simulated 3D corridor or room with dark walls and floor, rendered with a grayscale palette. Vertical stripes of light and shadow, resembling light through blinds, are cast on the left and right walls, creating a sense of depth and structure.

A dark, pixelated screenshot showing a 3D rendered scene of a closed door at the end of a short, dimly lit corridor. The walls have a ribbed texture, and the floor is made of large, dark tiles. The overall aesthetic resembles an early 3D video game environment.

A 3D rendering of a simple, dark room or corridor with a door at the far end, highlighted by a yellow rectangular outline.

An abstract diagram showing a grey square with a yellow border and corner points, representing a surface. Around it, various grey and white trapezoidal shapes are arranged to suggest walls, a floor, and a ceiling in a 3D space.

A 3D diagram showing a square plane in the center, outlined in yellow with corner markers, surrounded by four trapezoidal light blue/grey panels, suggestive of walls in an enclosed space, possibly demonstrating a room or game level constructed with CSS 3D transforms.

EVERY WALL, FLOOR AND CEILING IS A DIV

<div class="wall" style="
    --start-x: 1088;
    --start-y: 3680;
    --end-x: 1024;
    --end-y: 3680;
    --floor-z: 0;
    --ceiling-z: 72;
"></div>

A diagram showing a square in 3D perspective, with lines extending from its corners, illustrating a room or 3D space with walls, floor, and ceiling.

<div class="enemy" style="transform: translate3d(5999px, 3108px, 0) rotateZ(10deg); width: 106px; height: 106px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIw...); background-size: 106px 106px; background-position: 0 0;"></div>
<div class="floor" style="left: 1000px; top: 1000px; width: 3000px; height: 3000px; transform: translateZ(-2000px) rotateX(90deg); background: #2f2f2f; opacity: 1;"></div>
<div class="ceiling" style="left: 1000px; top: 1000px; width: 3000px; height: 3000px; transform: translateZ(-2000px) rotateX(-90deg); background: #2f2f2f; opacity: 1;"></div>
<div class="wall" data-texture="effect-y" style="width: 106px; height: 3000px; transform: translate3d(6288px, 1608px, 0) rotateY(180deg) rotateZ(0deg) translateX(-50%); background-size: 106px 3000px; background-position: 0 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIw...); "></div>
<div class="wall" data-texture="effect-x" style="width: 3000px; height: 3000px; transform: translate3d(2500px, 1608px

A visual representation of a game level, divided diagonally into a dark grey section on the left and a black section on the right. Both sections contain many small, faint geometric shapes, likely representing game map segments or 'divs'.

An abstract background with a diagonal split, dark gray in the upper-left and black in the lower-right, possibly representing a game screen or canvas. A tiny green dot is visible in the top right corner.

A dark gray background is divided diagonally from the top right to the bottom left, with the bottom right section being black.

A complex geometric pattern or logo composed of numerous dark rectangular blocks arranged in a grid-like structure on a lighter background.


<div data-floor="-1" data-ceiling="1" data-x="0" data-y="0" data-light="0.95" data-texture-offset="0.00390625" data-style-y="0" data-start-y="0" data-texture="0"></div>
<div data-floor="-1" data-ceiling="1" data-x="0" data-y="1" data-light="0.95" data-texture-offset="0.00390625" data-style-

<div data-texture="0.0076, 0.0076, 0, 0" style="width: 200, height: 200, top: 0, left: 0, clip: rect(0, 200, 200, 0)" floor="0, 24" data-texture-effect="3" ceiling="0, 46" light="0, 0.38" data-wall-manager="0" data

<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-z="10" data-light-x="0.0" data-light-y="0.0" data-light-z="0.0" data-start-x="0" data-start-y="0" data-start-z="0" data-end-x="0" data-end-y="0" data-end-z="0"></div>
<div data-texture-effect="wall-wrapped" style="top: 0; left: 0; width: 0; height: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0rad) scale3d(1, 1, 1);" data-floor-x="-24" data-floor-y="-24" data-floor-z="0" data-ceiling-x="24" data-ceiling-y="24" data-ceiling-

[
  {"floor": 1, "y": 36, "z": -14, "light": 0.35, "class": "null manager", "style": "--light: 0.35; --dark: 0.2; --ceiling: 0.35; --floor: 0.2; --hue: 360; --contrast: 100; --saturation: 100; --l: 0.35;", "data-texture-effect": "0.00000000000000000000000000000000", "start-y": 36, "data-hue": 360, "data-contrast": 100, "data-saturation": 100, "data-l": 0.35},
  {"floor": 1, "y": 36, "z": -14, "light": 0.35, "class": "null manager", "style": "--light: 0.35; --dark: 0.2; --ceiling: 0.35; --floor: 0.2; --hue: 360; --contrast: 100; --saturation: 100; --l: 0.35;", "data-texture-effect": "0.00000000000000000000000000000000", "start-y": 36, "data-hue": 360, "data-contrast": 100, "data-saturation": 100, "data-l": 0.35},
  {"floor": 1, "y": 36, "z": -14, "light": 0.35, "class": "null manager", "style": "--light: 0.35; --dark: 0.2; --ceiling: 0.35; --floor: 0.2; --hue: 360; --contrast: 100; --saturation: 100; --l: 0.35;", "data-texture-effect": "0.00000000000000000000000000000000", "start-y": 36, "data-hue": 360, "data-contrast": 100, "data-saturation": 100, "data-l": 0.35},
  {"floor": 1, "y": 36, "z": -14, "light": 0.35, "class": "null manager", "style": "--light: 0.35; --dark: 0.2; --ceiling: 0.35; --floor: 0.2; --hue: 360; --contrast: 100; --saturation: 100; --l: 0.35;", "data-texture-effect": "0.00000000000000000000000000000000", "start-y": 36, "data-hue": 360, "data-contrast": 100, "data-saturation": 100, "data-l": 0.35},
  {"floor": 1, "y": 36, "z": -14, "light": 0.35, "class": "null manager", "style": "--light: 0.35; --dark: 0.2; --ceiling: 0.35; --floor: 0.2; --hue: 360; --contrast: 100; --saturation: 100; --l: 0.35;", "data-texture-effect": "0.00000000000000000000000000000000", "start-y": 36, "data-hue": 360, "data-contrast": 100, "data-saturation": 100, "data-l": 0.35},
  {"floor": 1, "y": 36, "z": -14, "light": 0.35, "class": "null manager", "style": "--light: 0.35; --dark: 0.2; --ceiling: 0.35; --floor: 0.2; --hue: 360; --contrast: 100; --saturation: 100; --l: 0.35;", "data-texture-effect": "0.00000000000000000000000000000000", "start-y": 36, "data-hue": 360, "data-contrast": 100, "data-saturation": 100, "data-l": 0.35},
  ...
]

<div class="room-0 room-light-1" data-x="1.0" data-y="0.30" data-texture-effect="0" data-style="1" data-wall-wrapped="0" data-hidden="0" data-z="-4.0" data-angle="90" data-start="0.00" data-light="1" data-float="0" data-ceiling

WARNING:

THE FOLLOWING SLIDES CONTAIN TRIGONOMETRY.
VIEWER DISCRETION IS ADVISED

A yellow warning triangle icon with an exclamation mark inside.

WARNING:

THE FOLLOWING SLIDES CONTAIN TRIGONOMETRY.

VIEWER DISCRETION IS ADVISED

A yellow warning triangle icon with an exclamation mark.

--start-x, --start-y

--end-x, --end-y

A diagram showing a yellow line segment connecting two yellow circular points on a dark background, representing a line defined by start and end coordinates.

--start-x, --start-y

--end-x, --end-y

A diagram on a dark grey background shows a yellow line segment connecting two yellow circles. The lower-left circle is labeled "--start-x, --start-y" and the upper-right circle is labeled "--end-x, --end-y", indicating start and end coordinates.

Δx = x_end − x_start

Δy = y_end − y_start

width = √(Δx² + Δy²)

θ = tan^-1((Δy / Δx))

A diagram illustrating how to calculate the width and angle of a line segment. It shows a right-angled triangle formed by a horizontal line segment labeled Δx and a vertical line segment labeled Δy. The hypotenuse of this triangle is labeled 'width', and the angle between Δx and 'width' is labeled θ. Adjacent to these lines are rectangles representing Δx and Δy, and a larger rotated rectangle whose base aligns with 'width'.

Δx = x_end - x_start

Δy = y_end - y_start

width = √(Δx² + Δy²)

θ = tan^-1(Δy / Δx)

A geometric diagram illustrating a right-angled triangle. The horizontal leg is labeled Δx, the vertical leg is labeled Δy, and the hypotenuse is labeled 'width'. An angle θ is shown between the horizontal leg and the hypotenuse. Squares are visually represented on each side of the triangle.

Δx = X_end - X_start

Δy = Y_end - Y_start

width = √(Δx² + Δy²)

θ = tan−¹(Δy / Δx)

A geometric diagram illustrates a right-angled triangle with sides labeled Δx (horizontal) and Δy (vertical), and hypotenuse labeled 'width'. Squares are shown built on each of these sides. The angle between Δx and 'width' is labeled θ.

Δx = x_end − x_start
Δy = y_end − y_start

width = √(Δx² + Δy²)
θ = tan⁻¹(Δy / Δx)

A geometric diagram illustrating the calculation of width and angle. It shows a right-angled triangle with sides labeled Δx and Δy, and the hypotenuse labeled "width". An angle θ is shown at the base of the triangle. Two squares are drawn, one based on Δx and another on Δy, seemingly representing Δx² and Δy². A larger square is drawn along the hypotenuse, rotated to align with the "width" line.

Δx = x_end - x_start

Δy = y_end - y_start

width = √(Δx² + Δy²)

θ = tan^-1((Δy) / (Δx))

A diagram illustrating a right-angled triangle. It shows the horizontal side labeled Δx and the vertical side labeled Δy. A square is drawn on each of these sides. The hypotenuse is labeled 'width', and an angle θ is shown between Δx and the hypotenuse. A larger, rotated square is drawn adjacent to the hypotenuse, visually representing the square of the hypotenuse in relation to the squares on the other two sides.

TRIGONOMETRIC FUNCTIONS IN CSS

Widely available

.wall {
    --delta-x: calc(var(--end-x) - var(--start-x));
    --delta-y: calc(var(--end-y) - var(--start-y));

    /* width = &radic;Δx&sup2; + Δy&sup2; */
    --width: hypot(var(--delta-x), var(--delta-y));

    /* &theta; = tan&sup;-1;(Δy / Δx) */
    --angle: atan2(var(--delta-y), var(--delta-x));
}

TRIGONOMETRIC FUNCTIONS IN CSS

✓ Widely available

.wall {
  --delta-x: calc(var(--end-x) - var(--start-x));
  --delta-y: calc(var(--end-y) - var(--start-y));

  /* width = √Δx² + Δy² */
  --width: hypot(var(--delta-x), var(--delta-y));

  /* θ = tan⁻¹(Δy / Δx) */
  --angle: atan2(var(--delta-y), var(--delta-x));
}

CSS 3D TRANSFORMS

POSITION EVERYTHING IN 3D SPACE

.wall {
	width: calc(var(--width) * 1px);
	height: calc(var(--height) * 1px);

	transform:
		translate3d(
			calc(var(--start-x) * 1px),
			calc(var(--ceiling-z) * -1px),
			calc(var(--start-y) * -1px)
		)
		rotateY(var(--angle));
}

CSS 3D TRANSFORMS

POSITION EVERYTHING IN 3D SPACE

.wall {
	width: calc(var(--width) * 1px);
	height: calc(var(--height) * 1px);

	transform:
		translate3d(
			calc(var(--start-x) * 1px),
			calc(var(--ceiling-z) * -1px),
			calc(var(--start-y) * -1px)
		),
		rotateY(var(--angle));
}

CSS 3D TRANSFORMS

POSITION EVERYTHING IN 3D SPACE

.wall {
    width: calc(var(--width) * 1px);
    height: calc(var(--height) * 1px);

    transform:
        translate3d(
            calc(var(--start-x) * 1px),
            calc(var(--ceiling-z) * -1px),
            calc(var(--start-y) * -1px)
        ),
        rotateY(var(--angle));
}

A diagram illustrates a 3D space, resembling an open box or room, with a light green rectangular plane highlighted with a yellow border positioned inside it. The surrounding grey shapes suggest walls, a ceiling, and a floor.

CSS 3D TRANSFORMS

POSITION EVERYTHING IN 3D SPACE

.wall {
    width: calc(var(--width) * 1px);
    height: calc(var(--height) * 1px);

    transform:
        translate3d(
            calc(var(--start-x) * 1px),
            calc(var(--ceiling-z) * -1px),
            calc(var(--start-y) * -1px)
        ),
        rotateY(var(--angle));
}

A 3D diagram showing a square plane in the center of a space. Four surrounding planes, resembling walls, recede into the background, illustrating the concept of positioning elements in 3D space.

FLOORS ARE JUST ROTATED WALLS...

.floor {
	width: calc(var(--width) * 1px);
	height: calc(var(--height) * 1px);

	transform:
		translate3d(
			calc(var(--start-x) * 1px),
			calc(var(--ceiling-z) * -1px),
			calc(var(--start-y) * -1px),
		)
		rotateY(var(--angle))
		rotateX(90deg);
}

A 3D diagram illustrating a room with three walls and a floor. The floor is highlighted in yellow and depicted as a rectangle rotated 90 degrees relative to the vertical walls, showing its transformation from a wall plane to a floor plane.

h) * 1px);
right) * 1px);

rt-x) * 1px),
ling-z) * -1px),
rt-y) * -1px)

e))

A 3D perspective diagram depicting an open-ended room or cubicle with gray and white walls, a gray ceiling, and a gray floor. A yellowish-gold outlined polygon, resembling a trapezoid, is highlighted on the floor with yellow points at its four vertices.

A dimly lit, minimalist 3D scene depicting a corner of a room or corridor with dark gray planar walls and a floor. A small, translucent purple, pear-shaped object rests on the floor in the foreground, casting a subtle shadow.

A blue octagonal shape rests on a grey surface, casting a shadow. The background is black.

Widely available

Non-rectangular floors can use a clipping path to get the correct shape

clip-path: polygon(75% 100%, 25% 100%,
0% 75%, 0% 25%, 25% 0%, 75% 0%,
100% 25%, 100% 75%);

A 3D illustration shows a gray floor surface. On it, a blue octagon is displayed. A yellow outline with eight control points and a bounding box surrounds the octagon, illustrating a polygon clipping path. An arrow points from the octagon to a CSS code snippet demonstrating the `clip-path` property.

✓ Widely available

NON-RECTANGULAR FLOORS CAN USE A CLIPPING PATH TO GET THE CORRECT SHAPE

clip-path: polygon(75% 100%, 25% 100%,
            0% 75%, 0% 25%, 25% 0%, 75% 0%,
            100% 25%, 100% 75%);

A 3D diagram showing a grey floor with a blue octagon shape defined by a yellow outline and points. A line connects the octagon to the CSS code snippet.

clip-path: shape(
  evenodd from 0% 0%,
  move to 25% 100%, line to 0% 83.33%,
  line to 0% 16.67%, line to 25% 0%,
  line to 75% 0%, line to 90.625% 0%,
  line to 100% 0%, line to 100% 100%,
  line to 90.625% 100%, line to 75% 100%,
  close,

  move to 31.25% 66.67%, line to 43.75% 66.67%,
  line to 50% 58.33%, line to 50% 41.67%,
  line to 31.25% 33.33%,
  line to 25% 41.67%,
  line to 25% 58.33%,
  close
);

✔ Newly available

THANKS TO THE SHAPE() FUNCTION AND EVENODD WE CAN EVEN CREATE CUT-OUTS IN OUR FLOORS

A diagram illustrating the `clip-path` CSS property with the `shape()` function and `evenodd` fill rule. It shows a gray polygonal surface, representing a floor. A blue, irregular octagonal shape is shown above the surface. Below this blue shape, an octagonal cut-out is visible in the gray surface, outlined by a yellow dotted line, demonstrating the effect of the `evenodd` rule. Yellow lines and dots connect coordinates in the provided CSS `clip-path` code to vertices on the gray surface and the blue shape/cut-out.

An abstract 3D geometric rendering showing a hallway or room with varying shades of gray. Lighter areas suggest openings or light sources, while darker areas define walls and floors. Geometric shapes are arranged to create a sense of depth and architectural elements, including a distant illuminated opening and triangular steps or protrusions in the foreground.

A stylized, abstract pattern of dark rectangular blocks arranged in a grid-like fashion on a light background, illuminated from below by a blue light.

An abstract diagram showing geometric shapes. Most of the slide is a dark grey field. On the right, fragmented white polygons are visible, with faint dark lines extending from them, suggesting an illustration of connected sectors or architectural elements as discussed in game development context.

A minimalist 3D rendering of an interior space, likely a game level or architectural sector, composed of dark gray walls, and lighter gray floor and ceiling elements. Several openings and light-colored surfaces are visible, including a prominent yellow rectangular light source on the ceiling and a small yellow triangular marker on the floor. A series of triangular steps or a textured surface is visible on the lower right.

A low-polygon 3D environment depicting dark grey corridors with white light sources. A staircase is visible through a central opening, and yellow triangular markers are present in the corners.

A low-polygon 3D rendering of a dark grey indoor environment. On the left wall, there is a rectangular opening revealing a bright white space beyond. On the right, a series of yellow and dark grey triangular segments suggest a staircase or ramp, with a striped ceiling element directly above it. Various light grey geometric shapes are embedded in the floor and walls, appearing as light sources or features.

An abstract, stylized 3D environment featuring gray walls and platforms. Some upper surfaces are highlighted in yellow, along with a series of yellow triangular shapes on a lower level, possibly representing steps or decorative elements. A central rectangular opening or tunnel is visible in the middle. The overall impression is that of a simplified architectural rendering or game level design, illustrating concepts like sectors and lighting.

An abstract 3D rendering of a grey architectural environment or game level, showing various planes and geometric shapes. Some surfaces are light grey, while others are highlighted in yellow, possibly indicating different sectors or light levels within the scene. A central rectangular opening leads deeper into the structure.

✅ Widely available

SECTOR LIGHTING IS A BRIGHTNESS FILTER

<div class="sector" style="--light: 0.5;">
  <div class="floor"></div>
  <div class="ceiling"></div>
</div>

.wall, .floor, .ceiling {
  filter: brightness(var(--light, 1));
}

An abstract geometric illustration with dark gray and light gray surfaces, and several prominent yellow rectangular and triangular shapes, depicting how "sector lighting" might be applied to different structural elements like floors and ceilings within a space.

Widely available

SECTOR LIGHTING IS A BRIGHTNESS FILTER

<div class="sector" style="--light: 0.5;">
    <div class="floor"></div>
    <div class="ceiling"></div>
</div>

.wall, .floor, .ceiling {
    filter: brightness(var(--light, 1));
}

An abstract 3D illustration shows a geometric scene representing a sector with walls, floor, and ceiling. A diagonal gradient transitions from a darker left side to a brighter right side, demonstrating variable lighting. The brighter section reveals yellow striped patterns on what appears to be a ceiling and floor, along with white triangular shapes that suggest light sources or reflections.

A dark geometric pattern resembling a block maze or tiled design, illuminated with a blue light.

An abstract 3D representation against a dark background, featuring two yellow trapezoidal shapes, which may represent illuminated sectors or pillars, and a grey and white architectural element partially visible in the upper right, reminiscent of a game environment.

.light-glow

A diagram showing a rectangular outline in yellow dotted lines, representing a conceptual pillar. At the top and bottom of the pillar are solid yellow trapezoidal shapes, illustrating a 'light-glow' effect on the element.

.light-glow

Diagram illustrating a vertical rectangular area defined by a dotted outline, labeled ".light-glow", which contains a yellow trapezoidal shape at the top and another at the bottom, representing light or glow elements within the boundary.

LIGHTING EFFECTS ARE SIMPLE ANIMATIONS

.light-glow {
  animation: light-glow 0.9s linear infinite;
}

@keyframes light-glow {
  0%, 100% { --light: 0.75; }
  50% { --light: 1; }
}

A diagram illustrates a tall, narrow rectangular outline labeled '.light-glow', with two horizontal glowing yellow bands, one at the top and one at the bottom, suggesting a light animation effect on a pillar.

LIGHTING EFFECTS ARE SIMPLE ANIMATIONS

.light-glow
{
	animation: light-glow 0.9s linear infinite;
}

@keyframes light-glow {
	0%, 100% { --light: 0.75; }
	50%      { --light: 1; }
}

A diagram labeled '.light-glow' shows a tall, narrow, transparent rectangular box with dashed outline, indicating a vertical element. At the top and bottom of this box are two yellow, horizontally stretched trapezoidal shapes, representing a light glow effect.

LIGHTING EFFECTS ARE SIMPLE ANIMATIONS

.light-glow {
	animation: light-glow 0.9s linear infinite;
}

@keyframes light-glow {
	0%, 100% { --light: 0.75; }
	50% { --light: 1; }
}

A diagram illustrates a rectangular column labeled '.light-glow', with a dashed outline and two horizontal yellow glowing sections at the top and bottom, suggesting an animation of light within the column.

CUSTOM PROPERTIES CAN BE ANIMATED WITH `@PROPERTY`

Newly available

.light-glow {
	animation: light-glow 0.8s linear infinite;
}

@keyframes light-glow {
	0%, 100% { --light: 0.75; }
	50% { --light: 1; }
}

/* Tell CSS that --light is a number */
@property --light {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

A diagram illustrates a rectangular column labeled ".light-glow" with dotted outlines. Yellow trapezoidal shapes appear at the top and bottom of the column, suggesting a glowing or illuminated effect.

`.light-glow`

.light-glow {
    /* ... other properties ... */
    animation: light-anim ...;
}

@keyframes light-anim {
    0% {
        /* properties for 0% */
    }
    50% {
        /* properties for 50% */
    }
    100% {
        /* properties for 100% */
    }
}

/* * Tell CSS that custom properties have a type */
@property --light {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

Conceptual diagram illustrating a '.light-glow' effect, represented by a tall rectangular dotted outline containing horizontal yellow trapezoidal bars at the top and bottom.

.light-fire-flicker

LIGHT SIMPLIFIED

.light {
    an... /* likely 'animation' properties */
}

@keyframes fire-flicker { /* 'keyfi' likely 'keyframes', 'fire-flicker' inferred from class */
    0% { ... }
    8% { ... }
    16% { ... }
    24% { ... }
    32% { ... }
    48% { ... }
    56% { ... }
    64% { ... }
    72% { ... }
    80% { ... }
    88% { ... }
    /* ... other keyframe percentages would follow up to 100% */
}

A 3D rectangular frame with a dotted outline. It contains two solid yellow trapezoidal shapes, one at the top and one at the bottom, suggesting a light source or an area for the flicker effect.

An abstract geometric illustration in shades of grey and white, depicting a dark environment with several bright trapezoidal and rectangular openings, one of which reveals a multi-faceted interior structure. A jagged pattern of white triangles is visible at the bottom right, resembling teeth or sharp terrain.

TEXTURES ARE BACKGROUND IMAGES ON REPEAT

<div class="wall"
	data-texture="STARTAN3"
	style="...">
</div>

.wall[data-texture="STARTAN3"] {
	background-image:
		url('/assets/textures/STARTAN3.png');
}

TEXTURES ARE BACKGROUND IMAGES ON REPEAT

<div class="wall"
	data-texture="STARTAN3"
	style="...">
</div>

.wall[data-texture="STARTAN3"] {
	background-image:
		url('/assets/textures/STARTAN3.png');
}

An illustration of a 3D room with a large screen on one wall displaying a repeating texture pattern. A smaller version of the texture image, resembling a small card, lies on the floor of the 3D space.

IMAGES ON REPEAT

<div class="wall"
     data-texture="STARTAN3"
     style="...">
</div>

.wall[data-texture="STARTAN3"] {
  background-image:
    url('/assets/textures/STARTAN3.png');
}

A 3D perspective illustration of a simple room with white walls and floor, showing a small icon repeated on one wall and a larger version on the floor, likely demonstrating image textures.

A 3D-like rendering depicting a room with white walls and floor. The walls feature several rectangular panels, some grey and some white, containing abstract symbols and small framed graphical elements. On the white floor, there is a flat rectangular object displaying colorful, abstract patterns.

Screenshot of a 3D game environment featuring metallic walls, a floor, and a green barrel, reminiscent of an older first-person shooter game.

A screenshot of a 3D computer-generated environment, possibly from a video game. It features industrial-looking buildings with multiple floors and windows, and a large, flat, dark blue ground plane. A green barrel is visible on the right side of the scene.

Screenshot of a pixelated 3D environment from a classic first-person shooter video game, likely DOOM, featuring blue water on the floor, metallic walls, wooden pillars, barrels, and a defeated enemy on a raised platform.

Andreas Møller @andreasmoller.dk

You need a version where each surface is pictures of cats. Otherwise people wont believe it is html and css.

A screenshot of a low-polygon 3D environment, reminiscent of a classic first-person shooter game. The scene features metallic walls, a dark blue textured floor, a dark ceiling with green and yellow illuminated panels, and on a raised platform to the left, two barrels and a defeated green monster. A white speech bubble containing a tweet is overlaid on the upper right of the image.

A highly fragmented and distorted image, resembling a 3D rendered space, constructed from multiple photographs of domestic cats. Prominent features include a close-up of a tabby cat's face with green eyes looking towards the viewer, and another cat with white and orange fur seen from its back, lying down in the foreground. The cats' images are broken into shards and planes, creating a chaotic and abstract visual.

Screenshot from a retro first-person shooter video game, showing an industrial-themed room. A dark platform holds a barrel and green, organic debris. Below the platform is a pool of blue liquid, and above it, a dark panel with various indicator lights.

Screenshot of a 3D environment, possibly a game or simulation, depicting a low-polygon tunnel or street with blue ground and grey walls.

A 3D rendered scene depicting an indoor area with textured block walls and a blue floor, looking out through an opening to an outdoor mountainous landscape.

Keystroke
Mouse events
Touch events
Gamepad buttons
Lots more JavaScript
Collision detection
Game loop (JS)
No camera in CSS, move the world

THE WORLD REVOLVES AROUND US, LITERALLY!

<div class="viewport" style="
  --player-x: 997;
  --player-y: -3276;
  --player-z: 25;
  --player-angle: -0.90;
">

.scene {
  transform:
    rotateY(calc(var(--player-angle) * -1rad))
    translate3d(
      calc(var(--player-x) * -1px),
      calc(var(--player-z) * 1px),
      calc(var(--player-y) * 1px)
    );
}

Screenshot from a retro 3D video game showing an indoor environment with textured walls, a barrel, and a blue liquid floor.

THE WORLD REVOLVES AROUND US. LITERALLY!

<div class="viewport" style="
	--player-x: 997;
	--player-y: -3276;
	--player-z: 25;
	--player-angle: -0.90;
">

.scene {
	transform:
		rotateY(calc(var(--player-angle) * -1rad))
		translate3d(
			calc(var(--player-x) * -1px),
			calc(var(--player-z) * 1px),
			calc(var(--player-y) * 1px)
		);
}

A 3D rendering of an indoor environment with textured walls and floor, possibly a corridor or hallway, seen from a first-person perspective, demonstrating the world moving around the viewer.

THE WORLD REVOLVES AROUND US. LITERALLY!

<div class="viewport" style="
  --player-x: 997;
  --player-y: -3278;
  --player-z: 25;
  --player-angle: -0.90;
">

.scene {
  transform:
    rotateY(calc(var(--player-angle) * -1rad))
    translate3d(
      calc(var(--player-x) * -1px),
      calc(var(--player-z) * 1px),
      calc(var(--player-y) * 1px)
    );
}

A blurred screenshot of a simple 3D environment or game level, showing architectural elements like walls and floors.

THE WORLD REVOLVES AROUND US. LITERALLY!

<div class='viewport' style="
    --player-x: 997;
    --player-y: -3276;
    --player-z: 25;
    --player-angle: -0.90;
">

.scene {
    transform:
        rotateY(calc(var(--player-angle) * -1rad))
        translate3d(
            calc(var(--player-x) * -1px),
            calc(var(--player-z) * -1px),
            calc(var(--player-y) * 1px)
        );
}

A screenshot of a 3D environment, possibly a game scene, with the perspective of looking down a hallway with blue walls and a grey floor and ceiling.

THE WORLD REVOLVES AROUND US. LITERALLY!

<div class="viewport" style="
	--player-x: 997;
	--player-y: -3276;
	--player-z: 25;
	--player-angle: -0.90;
">

.scene {
	transform:
		rotateY(calc(var(--player-angle) * -1rad))
		translate3d(
			calc(var(--player-x) * -1px),
			calc(var(--player-z) * 1px),
			calc(var(--player-y) * 1px)
		);
}

A screenshot of a 3D environment or game scene, depicting a dark hallway with textured walls and floor, giving a sense of depth, likely rendered using the CSS code shown on the slide.

THE WORLD REVOLVES
AROUND US, LITERALLY!

<div class="viewport" style="
  --player-x: 997;
  --player-y: -3276;
  --player-z: 25;
  --player-angle: -0.90;
">

.scene {
  transform:
    rotateY(calc(var(--player-angle) * -1rad))
    translate3d(
      calc(var(--player-x) * -1px),
      calc(var(--player-z) * 1px),
      calc(var(--player-y) * 1px)
    );
}

A screenshot of a pixelated 3D game environment, resembling a classic first-person shooter like Doom, showing a corridor with a barrel and some debris on the floor, next to a code example explaining 3D transformations.

Screenshot of a 3D game-like environment, showing a corridor or room with textured walls and a hexagonal patterned floor. A glowing green object with a white arc UI element is in the foreground, and a small red object is on the floor further back.

Screenshot of a pixelated 3D environment from a video game, resembling a classic first-person shooter like Doom. A green player character is seen from a top-down perspective, floating in a blue liquid area. The character is surrounded by blocky, textured walls and structures, with a patch of green, textured ground visible in the distance.

Screenshot of a 3D game, showing a textured environment with architectural structures and a green, glowing game object in the center of the view.

Screenshot of a retro-style 3D game environment, shown from an isometric top-down perspective, featuring a green character and various industrial-themed structures.

An isometric view of a 3D game environment, featuring interconnected corridors and rooms with dark metallic, hexagonal, and rusted panel textures. A small green figure is visible in one of the lower sections.

A screenshot of a 3D rendered environment, possibly from a video game, showing an interior industrial-looking space with grey walls and floors. Structures resembling crates or segments of a building are visible, and what appears to be a door or opening in a wall is a prominent feature.

Screenshot of a dark, industrial-looking 3D environment, possibly a video game scene, featuring large structures with multiple openings resembling doorways. A small glowing green object is visible inside one of the openings, and rectangular light fixtures are present on the upper surfaces.

}
	transform: translateY(var(--offset));
}

KNOCK. KNOCK WHO'S THERE?

CSS TRANSITION

TRANSITION WHO?

NEVER MIND. THE PUNCHLINE

GOT LOST IN TRANSLATE

A 3D rendering of an interior architectural space, possibly from a video game, featuring a door and industrial-style textures.

/* a door */
.door.open {
	transform: translateY(var(--offset));
}

KNOCK, KNOCK WHO'S THERE?

CSS TRANSITION

TRANSITION WHO?

NEVER MIND, THE PUNCHLINE

GOT LOST IN TRANSLATE

A 3D rendering of an industrial-style room or corridor, with a metallic structure resembling a doorway on the left side of the scene. The ceiling has grid-like panels and lighting.

.panel {
    var(--offset));
}

WHERE?

Screenshot of a 3D game environment, reminiscent of a classic first-person shooter (like Doom or Quake), featuring metallic and industrial textures, grates, and a glowing green object within a corridor-like structure.

.door > .panel {
	top: 0; left: 0; width: 0; height: 0;
	transform: translateY(0px);
	transition: transform 1s ease-in-out;
}

.door[data-state="open"] > .panel {
	transform: translateY(var(--offset));
}

KNOCK, KNOCK WHO'S THERE?

CSS TRANSITION

TRANSITION WHO?

NEVER MIND, THE PUNCHLINE

GOT LOST IN TRANSLATE

Screenshot of a 3D game environment depicting a futuristic, metallic corridor with hexagonal floor tiles, various wall textures, and an open doorway revealing interior details and machinery, illustrating the concept of a transitioning door.

.door > .panel {
    top: 0; left: 0; width: 0; height: 0;
    transform: translateY(0px);
    transition: transform 1s ease-in-out;
}

.door[data-state="open"] > .panel {
    transform: translateY(var(--offset));
}

KNOCK, KNOCK WHO'S THERE?

CSS TRANSITION

TRANSITION WHO?
NEVER MIND, THE PUNCHLINE
GOT LOST IN TRANSLATE

A 3D rendering of a game environment, possibly from a first-person shooter. It depicts a corridor or room with textured walls and floor, and a door panel sliding upwards, revealing a green object inside the opening. Another part of the corridor is visible in the background.

.door > .panel {
    top: 0; left: 0; width: 100%; height: 100%;
    transform: translateY(0px);
    transition: transform 1s ease-in-out;
}

.door[data-state="open"] > .panel {
    transform: translateY(var(--offset));
}

KNOCK, KNOCK WHO'S THERE?

CSS TRANSITION

TRANSITION WHO?
NEVER MIND, THE PUNCHLINE
GOT LOST IN TRANSLATE

A 3D rendering of an abstract game-like environment, resembling corridors and rooms with metallic textures. One section shows an open doorway revealing a green object, while another shows a closed door.

.door > .panel {
	top: 0; left: 0; width: 0; height: 0;
	transform: translateY(0px);
	transition: transform 1s ease-in-out;
}

.door[data-state="open"] > .panel {
	transform: translateY(var(--offset));
}

KNOCK, KNOCK WHO'S THERE?

CSS TRANSITION

TRANSITION WHO?

NEVER MIND, THE PUNCHLINE
GOT LOST IN TRANSLATE

A 3D rendering of a game-like environment, showing a metallic door opening downwards into a shaft, with a small green object visible inside.

.door > .panel {
	top: 0; left: 0; width: 0; height: 0;
	transform: translateY(0px);
	transition: transform 1s ease-in-out;
}

.door[data-state="open"] > .panel {
	transform: translateY(var(--offset));
}

KNOCK, KNOCK WHO'S THERE?

CSS TRANSITION

TRANSITION WHO?

NEVER MIND, THE PUNCHLINE

GOT LOST IN TRANSLATE

A 3D rendering depicts a panel moving open in a game-like environment, illustrating a CSS transition.

.door > .panel {
  top: 0; left: 0; width: 0; height: 0;
  transform: translateY(0px);
  transition: transform 1s ease-in-out;
}

.door[data-state="open"] > .panel {
  transform: translateY(var(--offset));
}

KNOCK, KNOCK WHO'S THERE?

CSS TRANSITION

TRANSITION WHO?

NEVER MIND, THE PUNCHLINE

GOT LOST IN TRANSLATE

A 3D rendered scene resembling a retro first-person shooter game environment, showing a room with a door mechanism. The door is in a partially open state, revealing a green object inside the room.

.door > .panel {
    top: 0; left: 0; width: 0; height: 0;
    transform: translateY(0px);
    transition: transform 1s ease-in-out;
}

.door[data-state="open"] > .panel {
    transform: translateY(var(--offset));
}

KNOCK, KNOCK. WHO'S THERE?

CSS TRANSITION
TRANSITION WHO?
NEVER MIND, THE PUNCHLINE
GOT LOST IN TRANSLATE

A 3D rendering of a game-like environment, showing a corridor or room with a movable panel resembling a door. The panel is in a partially open state.


.door > .panel {
  top: 0; left: 0; width: 0; height: 0;
  transform: translate(0px);
  transition: transform is ease-in-out;
}


.door[data-state="open"] > .panel {
  transform: translateY(var(--offset));
}

KNOCK. KNOCK WHO'S THERE?

CSS TRANSITION

TRANSITION WHO?

NEVER MIND, THE PUNCHLINE

GOT LOST IN TRANSLATE

A 3D-rendered scene showing a top-down view of a game-like environment with blocky textured walls and floors. It depicts an animated door or panel opening, represented by a grey bar moving away from a structure, and another area showing a small green object within an enclosed space.

.door > .panel {
	top: 0; left: 0; width: 0; height: 0;
	transform: translateY(0px);
	transition: transform 1s ease-in-out;
}

.door[data-state="open"] > .panel {
	transform: translateY(var(--offset));
}

KNOCK, KNOCK. WHO'S THERE?

CSS TRANSITION

TRANSITION WHO?

NEVER MIND, THE PUNCHLINE

GOT LOST IN TRANSLATE

A 3D rendering depicting a stylized architectural or game environment, with a panel or door shown in a transitional state, animating as if opening or closing.

Screenshot of a minimalist 3D game environment, viewed from a top-down perspective, showing modular gray and brown textured walls, corridors, and a small green object in the center, possibly a character or item.

Screenshot of a game-like 3D environment with a green object in the center, highlighted by a yellow bounding box, demonstrating an active sprite within a larger scene.

A screenshot depicting a 3D game-like environment with metallic structures, platforms, and a small green object in the center, viewed from an elevated perspective.

A visual representation of a large sprite sheet containing multiple 2D animated images, with a yellow box highlighting the active sprite within the sheet.

A blurred screenshot depicting a large sprite sheet with a yellow bounding box moving across different sprites, illustrating sprite selection or animation.

STEPPED ANIMATION OF BACKGROUND POSITION

<div class="pickup" style="--x: -32; --y: -3232;">
	<div class="sprite" data-type="armor-bonus"></div>
</div>

.sprite[data-type="armor-bonus"] {
	background-image: url('/assets/sprites/sheets/BON2.png');
	--w: 16; --h: 15; --frames: 4;
}

A visual demonstration of stepped animation using a sprite sheet. The image displays a sequence of four frames from a game sprite sheet, each showing a slightly different perspective of an 'armor bonus' item, transitioning from an orange/brown helmet to a blue/purple one. The frames are part of a larger sheet, with one frame highlighted or actively shown at a time, simulating animation within a 3D game environment (dark blue floor, grey walls).

STEPPED ANIMATION OF BACKGROUND POSITION

.sprite {
	background-size:
		calc(var(--w) * var(--frames) * 1px) calc(var(--h) * 1px);
	animation:
		sprite-cycle calc(var(--frames) * 250ms) steps(var(--frames)) infinite;
}

@keyframes sprite-cycle {
	from { background-position-x: 0; }
	to { background-position-x: calc(var(--w) * var(--frames) * -1px); }
}

A pixelated helmet sprite from a video game, possibly Doom, is shown multiple times in a sequence against a dimly lit, blue-floored 3D game environment, demonstrating a stepped animation of its background position.

A retro-style 3D environment with dark gray blocky walls and a dark blue grid-like textured floor and background. Two metallic helmet-like objects with green glowing elements are visible on the floor, demonstrating animated sprites.

Doom Game Elements Animated with CSS

A screenshot from a first-person shooter game resembling Doom, showing the player's weapon in the foreground, a helmet-like enemy or object, and several green, floating enemies in a dark, structured environment. The game's Heads-Up Display (HUD) shows stats for 'AMMO', 'HEALTH', 'ARMS', and 'ARMOR', along with bullet counts.

Screenshot of Doom gameplay

A screenshot from the video game Doom, showing a first-person view in a dimly lit, corridor-like environment. The player's heads-up display (HUD) is visible at the bottom, including indicators for ammo, health, armor, and a depiction of the player's face.

Screenshot of the video game Doom, showing a first-person perspective inside a dark, industrial level. The player's hand holding a pistol is visible at the bottom of the screen. The heads-up display (HUD) shows stats for ammo (45), health (94%), weapon slots, and the player character's face. A dead monster lies on the floor in the mid-right of the scene.

Screenshot from the video game Doom, showing the player's first-person perspective in a dark, greenish-brown corridor. The game's heads-up display (HUD) is visible at the bottom, showing ammo, health, and weapon selection. The player is holding a pistol, and there are blood splatters on the ground.

Screenshot from the video game Doom, showing a first-person perspective. The player holds a shotgun, and the user interface displays ammo, health, and a character portrait. An Imp monster stands on a raised platform in a room with dark, textured walls and a glowing green liquid floor.

Screenshot from the video game Doom, showing a first-person perspective with a shotgun, game UI, and an Imp monster in the distance within a dark, industrial-themed level.

Screenshot of Doom gameplay from a first-person perspective. The player is in a dark, metallic corridor with a green liquid floor. A red fireball is visible in the distance on the right, and a raised platform is nearby. The Heads-Up Display (HUD) at the bottom shows ammo, health, and weapon information, along with the Doomguy's face. The player's weapon (shotgun) is visible in the bottom right of the game screen.

Screenshot from the video game Doom, showing a first-person perspective in a dark, metallic-textured corridor. The floor is covered in glowing green liquid. An Imp monster is visible in the upper right, emitting a bright red fireball. The game's heads-up display (HUD) is at the bottom, showing 'AMMO 45', 'HEALTH 95%', weapon slots, and the player character's portrait. The player holds a shotgun.

Screenshot from the game Doom showing a fireball

Screenshot from the classic video game Doom, showing the player's first-person perspective in a dark, textured corridor. A large, blurry, pixelated red and yellow fireball is central to the image. In the background, a brown enemy creature is visible on a raised platform. The game's user interface is at the bottom, displaying health, ammo, and the player character's face. The player is holding a shotgun.

Screenshot from the game Doom showing a blurry, bright red and yellow fireball effect in the center, highlighted by a yellow bounding box. In the background, a monster (Imp) is visible in a dark, textured corridor. The game's heads-up display (HUD) showing '45 AMMO' and '95% HEALTH' is at the bottom.

Screenshot from the game DOOM, showing a fireball and a monster

Screenshot from the game DOOM, depicting a game scene with a large, blurry red and yellow fireball effect in the center. In the background, a small brown monster is visible. The game's Heads-Up Display (HUD) is present at the bottom, showing "AMMO 45", "HEALTH 95%", and weapon selections under "ARMS".

Screenshot of a classic first-person shooter game, resembling Doom, showing a dark environment with green liquid. A red and yellow explosion effect is highlighted by a yellow rectangular frame in the center. The game's heads-up display at the bottom shows 'AMMO 55', 'HEALTH 99%', and 'ARMS 234'.

STANDALONE TRANSFORM PROPERTIES SAVES THE DAY

Widely available

.projectile {
	animation:
		projectile-move var(--duration)
		linear both;

	/* We're animating translate, so we
	can change the rotation
	independently. If both were
	using transform they would
	override each other */
	rotate: y calc(var(--player-angle)
	* 1rad);
}

A screenshot from a retro first-person shooter game, similar to Doom, shows a dark, metallic corridor. A large, blurry red and yellow explosion sprite, contained within a yellow bounding box, is centered on the screen. Below the game view, a player HUD displays "45 AMMO", "95% HEALTH", and "209 ARMS". A green checkmark icon is next to the "Widely available" text.

Screenshot from a video game, reminiscent of Doom, featuring a large red and yellow explosion sprite in the foreground. In the background, a dark, industrial-looking corridor with an enemy monster is visible. Game interface elements for ammo, health, and weapons are displayed at the bottom.

Screenshot of a game displaying an explosion effect

A screenshot of a first-person shooter game, resembling Doom. The player's weapon is visible at the bottom center. The game's UI elements for ammo, health, and armor are at the bottom. A large, bright orange and red explosion sprite is prominently displayed on the left side of the screen, outlined by a yellow bounding box.

Screenshot of the classic first-person shooter game Doom, showing the player's perspective with a weapon in the foreground. The game's heads-up display (HUD) is visible at the bottom, indicating ammo, health, and armor, and featuring the Doomguy's face. The game environment is dimly lit, with a red glowing object visible in the distance.

Screenshot of Doom gameplay

Screenshot from the video game Doom, showing the player's first-person view of a dark corridor with a pistol in hand and the game's heads-up display at the bottom.

Screenshot from the video game Doom, showing a first-person perspective with a weapon visible at the bottom of the screen and the game's heads-up display (HUD).

INSTEAD OF APPLYING
THE ANIMATION
BASED ON A CLASS...

@keyframes weapon-bob {
  0%    { translate: 40px -24px; }
  12.5% { translate: 28px 0px; }
  25%   { translate: 0px -24px; }
  37.5% { translate: -28px 0px; }
  50%   { translate: -40px -24px; }
  62.5% { translate: -28px 0px; }
  75%   { translate: 0px -24px; }
  87.5% { translate: 28px 0px; }
  100%  { translate: 40px -24px; }
}

Screenshot of a game interface resembling Doom, showing a shotgun, player stats, and player's face.

INSTEAD OF APPLYING THE ANIMATION BASED ON A CLASS...

.weapon {
	...
}

.moving .weapon {
	animation: weapon-bob 1.4s linear infinite;
}

A screenshot of the game Doom, showing the player's weapon (a shotgun) in the foreground and the game's user interface (HUD) at the bottom with ammo, health, armor, and a player portrait.

CONTROL THE ANIMATION STATE WITH THE CLASS

.weapon {
    animation: weapon-bob 1.4s linear infinite;
    animation-play-state: paused;
}

.moving .weapon {
    animation-play-state: running;
}

Screenshot of the game Doom, showing the player's first-person view of a weapon and the game's user interface at the bottom with health, ammo, and armor.

CONTROL THE ANIMATION STATE WITH THE CLASS

.weapon {
	animation: weapon-bob 1.4s linear infinite;
	animation-play-state: paused;
}

.moving .weapon {
	animation-play-state: running;
}

A screenshot of the classic DOOM game's first-person perspective, displaying the player's shotgun centered at the bottom, and the game's user interface (HUD) below it. The HUD shows 'AMMO', 'HEALTH', 'ARMS', and 'ARMOR' with numerical values, and a pixelated face of the Doomguy in the center.

CSS DOOM Game Interface

Screenshot of the classic Doom game interface, featuring a first-person view of a grey, blocky environment with a weapon visible in the foreground. The bottom of the screen displays the game's heads-up display (HUD), including "AMMO," "HEALTH," "ARMS," "ARMOR" with the Doomguy's face, and detailed counts for various ammunition types.

Screenshot of the game Doom

Screenshot of the classic first-person shooter game Doom, showing gameplay with the weapon (shotgun) visible at the bottom center and the heads-up display (HUD) showing ammo, health, armor, and the player's face. The game environment appears to be an indoor level.

Screenshot of CSS DOOM

Screenshot of a first-person shooter game (CSS DOOM) running in a web browser. The game displays an indoor, industrial-themed level with dark walls, varying floor heights, and bloodstains. A pistol is visible at the bottom of the screen, and a game HUD shows health and ammunition.

http://localhost:5173

Screenshot showing the game Doom running within a web browser window. The browser displays the game's first-person perspective, with the character's weapon and status bar visible at the bottom. The browser window is positioned over a dark landscape with mountains under a night sky displaying the green aurora borealis.

CSS Doom

Screenshot of a web browser displaying a first-person shooter game resembling Doom. The game's heads-up display at the bottom shows "AMMO 45", "HEALTH 95%", and "ARMS 234567". The browser's address bar shows "http://localhost:5173".

Screenshot of CSS DOOM running in a browser

A screenshot of the classic video game Doom running in a web browser window. The game is displayed in a portrait orientation, showing the first-person view with a pistol, a dead enemy on the ground, and the game's status bar at the bottom displaying ammo, health, armor, and the player's face. The browser window is overlaid on a background image of the Northern Lights.

Screenshot of CSS DOOM running on localhost

A screenshot of the classic first-person shooter game Doom, rendered within a web browser window. The game displays a dark, blocky room with a demon's corpse on the floor. At the bottom of the screen, the player's shotgun is visible, along with the game's heads-up display (HUD) showing ammo (45), health (95%), armor (0%), and weapon/item inventory. The browser address bar shows `http://localhost`. The browser window is partially overlaid on a desktop background image depicting the green aurora borealis against a starry night sky.

Screenshot of CSS DOOM running in a browser

Screenshot of the game Doom running in a web browser, displaying a first-person view of a pixelated level with a status bar at the bottom showing ammo, health, and weapon selection.

Screenshot of the CSS Doom game running in a web browser, displaying a first-person view of a pixelated 3D environment and a game HUD with 'AMMO' and 'HEA' indicators.

Doom game running in a browser

A web browser window displaying the classic first-person shooter game Doom. The game interface includes the player's weapon, the Doomguy character's face in the status bar, and indicators for ammo, health, arms, and armor. The game environment is dark, showing indoor structures and an outdoor scene with a green aurora-like sky.

Screenshot of the classic first-person shooter game Doom, displaying the in-game interface from a dimly lit indoor environment. The status bar at the bottom shows game elements like AMMO, HEALTH, ARMS, numerical values, and the player's face.

Screenshot of the classic video game Doom, showing a first-person view of an indoor level with the game's HUD (ammo, health, armor) at the bottom.

A dark, stylized technical diagram or interface panel with prominent red vertical lines on the sides and a central grid of small, light-colored rectangular and square components.

Doom-like Game Proof-of-Concept

Screenshot of a first-person shooter game resembling Doom, displaying a player's view inside a room with brown textured walls and floor. In the foreground, the player's weapon (a shotgun) is visible. On the left side of the floor, a green helmet (armor pickup) is present. On the far wall, there is a gray panel featuring a red square button, a green square button, and a vertical slider. The game's user interface is at the bottom of the screen, showing stats like AMMO (40), HEALTH (95%), ARMS (2), ARMOR (0%), and specific weapon ammo counts for BULL (40/200), SHELL (8/50), ROKT (0/50), and CELL (0/300).

Screenshot of the classic video game DOOM, showing a first-person perspective inside a grey, metallic-walled room. The game's user interface is visible at the bottom, displaying stats for AMMO, HEALTH, ARMS, ARMOR, and the player character's face. A red Cacodemon monster is on the left, and a red switch on a panel is on the right wall.

Screenshot of the classic video game DOOM, showing the player's heads-up display with health, armor, and ammo, a demon in the foreground, and a red wall switch.

Screenshot from the video game Doom, showing a first-person perspective inside a dimly lit room with textured walls. In the center, a red and gray wall switch is visible. On the floor to the left, a silver health or armor pickup rests. At the bottom, the game's user interface displays ammo, health, arms, and armor stats, along with the Doomguy's face in the center.

Screenshot of the Doom video game

Screenshot showing a first-person perspective gameplay of the classic video game Doom. The player is in a textured room with a switch on the wall, a health power-up on the floor, and the game's Heads-Up Display (HUD) at the bottom, displaying ammo, health, and armor statistics.

`<button>`

A screenshot of the video game Doom, showing a first-person perspective inside a room with brown textured walls and red lights on the ceiling. The player character (Doomguy) is visible at the bottom center. A control panel on the wall directly ahead, featuring a red square button, a green square button, and a vertical slider, is highlighted with a yellow bounding box. The text '<button>' and '</button>' are displayed as annotations on either side of the highlighted control panel.

<button> </button>

Screenshot of the classic video game Doom, showing a first-person view of a corridor with a mechanical button on the wall. HTML tags `<button>` and `</button>` are overlaid on the screen, visually framing the in-game button. The game's heads-up display (HUD) with Doomguy's face and stats is visible at the bottom.

<button> </button>

A screenshot from the video game Doom, displaying a first-person view of a room with a control panel-like element highlighted in the center. The game's heads-up display is visible at the bottom.

<button></button>

A screenshot from the classic video game Doom, showing a first-person perspective in a pixelated corridor. Overlaid on an interactive switch-like element in the game are the HTML tags "<button>" to the left and "</button>" to the right, emphasizing that the game element is being conceptually represented as an HTML button.

Screenshot of the classic video game Doom, showing a first-person perspective in a brown, blocky corridor with a red and gray wall panel, and the game's user interface displaying ammo, health, and armor at the bottom.

HANGAR FINISHED

Screenshot of the end-of-level screen from the game Doom, displaying level statistics for 'Hangar'.

CSS IS AWESOME

A pixelated, retro video game-style image with the text 'CSS IS AWESOME' rendered in a similar pixelated font, partially overlaid on a metallic, textured game wall or door.

CSS IS AWESOME

Text "CSS IS AWESOME" rendered in a pixelated, blocky font, similar to retro video game graphics, with letters appearing carved into metallic blocks.

CSS IS AWESOME

Text "CSS IS AWESOME" displayed in a pixelated, blocky, retro video game style font.

CSS IS AWESOME

Text 'CSS IS AWESOME' displayed in a pixelated, 8-bit video game style, resembling a block-based structure within a grid.

CSS IS AWESOME

Text "CSS IS AWESOME" rendered in a pixelated, blocky font, resembling an old video game or retro aesthetic, set against a grid-like, pixelated background.

CSS IS AWESOME

The text 'CSS IS AWESOME' is displayed in a pixelated, retro video game style, set against a background resembling textured, blocky walls.

GAME OVER ?

The slide displays the text "GAME OVER ?" in a large, pixelated, red, retro video game-style font.

GAME OVER ?

The text "GAME OVER ?" is displayed in a pixelated, retro video game style font, appearing red on a grey background.

SOMETHING WITH FLAMETHROWERS AND CSS

Two flame icons are positioned on either side of the word "WITH" in the title.

AliExpress Product Listings

Type-c / Bluetooth To AES 16/24bit Digital Output
Yifamefly 80W Hexagonal Style Flamethrower

Screenshot of the AliExpress website showing two product listings: a Type-C / Bluetooth to AES digital audio output device and a hexagonal-shaped device with a flame effect coming from the top, identified as an 80W hexagonal style flamethrower.

Yiflamefly 80W Hexagonal St...

A screenshot of an e-commerce product listing for a "Yiflamefly 80W Hexagonal St..." device, depicted as a black hexagonal tower emitting simulated flames from its top, priced at €68.69. Partially visible on the left is another product listing for a black Type-c / Bluetooth to AES digital output adapter, priced at €26.99.

Type-c / Bluetooth To AES

16/24bit Digital Output

support Aptx HD/LDAC/AAC/S...
Type-c USB Bluetooth To AE...
Free shipping over €10
€26,99 ~~€28,59~~

Yiflamefly 80W Hexagonal St...

Free shipping
€68,69 ~~€114,48~~
39% off

Screenshot of an e-commerce website displaying two product listings.

The first product shows two small, rectangular electronic devices: one with a USB-C input labeled "USB In", and another with a 3-pin XLR audio output connector.

The second product is a dark gray hexagonal column device with a dynamic, artificial flame effect glowing from its top, branded "Yiflamefly".

Factory select

Type-c / Bluetooth To AES

16/24bit Digital Output

Supports Aptx HD/LDAC/AAC/SBC
Type-c USB Bluetooth To AES adapter
Free shipping over €10
€26,99 ~~€28,59~~

Yiflamefly 80W Hexagonal Stage Flame Light

Brand: Yiflamefly

Free shipping
€68,69 ~~€114,48~~
39% off

Available in 4POS/8POS

Two product images are displayed side-by-side. On the left, two small, rectangular audio adapters are shown: one with a USB-C input and the other with an XLR output. On the right, a tall, dark hexagonal device with an artificial yellow-orange flame effect emanating from its top is shown.

Screenshot of an Online Store Product Page

Screenshot of an e-commerce page displaying two products. On the left, a "Type-c / Bluetooth To AES" audio adapter, shown as two small rectangular modules with various ports. On the right, a "Yifamefly 80W Hexagonal Speaker" featuring a simulated flame effect emanating from its top.

Type-c / Bluetooth To AES 16/24bit Digital Output

Yiflamemfly 80W Hexagonal St...

Screenshot of an e-commerce website displaying two electronic products: an audio adapter and a hexagonal ambient lamp.

Yifamefly Product Listings

A screenshot of an e-commerce website displaying two product listings. The first product shows two small rectangular grey electronic devices, one with a USB-C port and the other with an XLR connector. The second product shows a black hexagonal device with a flame effect emanating from its top.

Yifflamefly 80W Hexagonal St...

A screenshot of an e-commerce product listing showing two items. On the left is a small, rectangular audio adapter labeled "Type-c / Bluetooth To AES". On the right is a tall, hexagonal, dark grey device with a flame effect emitting from the top, identified as a "Yifflamefly" product.

Device Control Application Interface

Screenshot of a digital control panel application. The interface displays navigation tabs including 'Animations', 'Scenes', 'Inputs', 'Triggers', and 'Drawing'. The main content area shows controls for 'RGB Light' and a 'Laser Projector', each featuring a toggle switch and a slider. An 'Add Device' button is also visible.

Stage Effects Control Software Interface

Screenshot of a software interface displaying options for adding stage lighting and effects devices. A dropdown menu is open, with 'RGB Light' selected, and other options include 'RGBA Light', 'RGBW Light', 'Dimmer', 'Smoke Machine', 'Moving Head (Basic)', 'Moving Head (11ch)', 'Flamethrower', and 'Laser Projector'. Tabs for 'Animations', 'Scenes', 'Inputs', and 'Triggers' are visible at the top.

A screenshot of a software interface displaying an open dropdown menu for adding devices. The menu includes options such as 'RGB Light', 'RGBA Light', 'RGBW Light', 'Dimmer', 'Smoke Machine', 'Moving Head (Basic)', 'Moving Head (11ch)', 'Flamethrower', and 'Laser Projector'. The 'Flamethrower' option is highlighted. To the right of the dropdown, there is an 'Add Device' button. At the top of the interface, there are navigation tabs labeled 'Animations', 'Scenes', 'Inputs', 'Triggers', and 'Drawing'. On the left side, a section titled 'Laser Project' is visible with an active toggle switch.

Screenshot of an application interface showing navigation tabs labeled "Scenes", "Inputs", and "Trigger". Below the tabs, an input field displays "Flamethrower" and has a dropdown arrow. To the right, a button labeled "Add Device" with a green plus icon is visible, with a mouse cursor hovering over it.

Flamethrower Device Controls

Screenshot of a device control application interface. The 'Inputs' tab is selected in the navigation bar. Below, a dropdown shows 'Flamethrower' and an 'Add Device' button, with a mouse cursor hovering over the button. Two device control panels are visible: 'Laser Projector' with an enabled toggle and a maximum brightness slider, and 'Flamethrower' with a disabled safety toggle and a flame intensity gradient slider.

Flamethrower

Safety
Flame 2

Screenshot of a user interface for a flamethrower control panel. It features an icon with a red 'X', a toggle switch labeled "Safety" currently in the off position, and a slider labeled "Flame" showing a high intensity level, with a numeric value of '2' partially visible next to it.

Default Custom

#flamethrower {
  --safety: none;
  --flame: 100.0%;
}

Two toggle buttons labeled "Default" and "Custom", with "Custom" selected. A mouse cursor is hovering over the word "none" in the code block.

Default Custom

#flamethrower {
  --safety: probably;
  --flame: 100.0%;
}

A user interface component with two options, "Default" and "Custom", with "Custom" highlighted as the active selection. Below, a code editor displays CSS code defining custom properties for an element with the ID `flamethrower`.

A tall, dense hedge of dark green leaves, possibly ivy, with a bright blue sky above. To the right, bare tree branches are visible, and the foreground shows green grass.

An abstract geometric pattern composed of interconnected dark rectangular shapes against a lighter background.

An image shows a black conical device, likely a flamethrower, in a grassy backyard. It is emitting a large, bright orange flame upwards against a clear blue sky. A wooden swing set with a blue slide is visible on the left, and a house is partially seen in the background on the right.

I STILL WANT TO MAKE A CLOCK USING A LASER PROJECTOR

CSS Generator displaying Doom E1M1 on an Oscilloscope

A screenshot of a web application titled "Generator" on the left, displaying a wireframe 3D scene resembling a Doom E1M1 map with navigation controls below it. On the right, a TRIO 15MHz CS-1560A oscilloscope is shown, with its screen displaying the same wireframe 3D scene.

TRIO 15MHz Oscilloscope CS-1560A

A close-up of a vintage TRIO CS-1560A analog oscilloscope, displaying glowing blue abstract geometric shapes on its screen.

TRIO 15MHz Oscilloscope CS-1560A displaying a clock waveform

A close-up view of a gray vintage Trio 15MHz Oscilloscope model CS-1560A. Its screen displays a bright blue circular waveform resembling a clock face with grid lines. Various control knobs and buttons, including a red power button, are visible on the right side of the instrument.

Generator

Oscilloscope

A screenshot of a dual-pane application interface. The left pane, labeled "Generator", shows a code editor and a small clock preview. The right pane, labeled "Oscilloscope", displays a simulated oscilloscope screen showing a circular clock-like pattern, along with various control settings.

Generator and Oscilloscope Interfaces

A split screenshot displaying two application interfaces side-by-side. The left panel shows a 'Generator' application interface with controls for various signal types and programs, including options labeled 'Dino' and 'DOOM'. The main display area on the left shows the 'GAME OVER' screen of the Chrome Dino game, featuring a pixelated dinosaur character and cacti. Below the game, there are controls labeled 'SPACE JUMP' and 'DUCK'. The right panel displays a 'TRIO 15MHz OSCILLOSCOPE' interface. Its screen clearly renders the same 'GAME OVER' state of the Chrome Dino game, presented as a vector graphic on a grid, demonstrating the game's output visualized on an oscilloscope. Surrounding the oscilloscope screen are various settings and controls, such as 'Laser', 'Mode', 'FPS', 'Color', and 'Debug'.

Generator

Available Components:

Custom
Star
HTML5 Logo
Heart
Music Note
Smiley Face
Peace Sign
Chrome
Halfstack
Beyond Tellerand
Clock (selected)
CSS Day
Asteroids
Dino
Thank You

CSS Code for Clock Component:


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
<style>
  :root {
    --hours: env(time-hour,10);
    --minutes: env(time-minute,10);
    --seconds: env(time-second,30);
  }
  .hand {
    transform-origin: 100px 100px;
  }
  .hour-hand {
    animation: rotate-360 43200s linear infinite;
    animation-delay: calc(var(--hours) * -3600s) + (var(--minutes) * -60s));
  }
  .minute-hand {
    animation: rotate-360 3600s linear infinite;
    animation-delay: calc(var(--minutes) * -60s) + (var(--seconds) * -1s));
  }
</style>
...

(The code continues beyond the visible section of the slide.)

Screenshot of a web-based "Generator" application interface. At the top, there are navigation tabs including "Waves", "Shapes", "Clock", "ECO", "Text", "SVG", "Dino", and "Doors". A dropdown menu is open, listing various generative art or animation components such as "Custom", "Star", "HTML5 Logo", "Heart", "Music Note", "Smiley Face", "Peace Sign", "Chrome", "Halfstack", "Beyond Tellerand", "Clock", "CSS Day", "Asteroids", "Dino", and "Thank You". "Clock" is highlighted as the currently selected option. Below the menu, a code editor displays CSS code for an SVG clock animation.

Application Interface and Code Example

A web application interface with a navigation bar:

Waves
Shapes
Clock (selected)
ECG
A Text
SVG
Dino (selected)
Doom

An open dropdown menu displays various options:

Custom...
Star
HTML5 Logo
Heart
Music Note
Smiley Face
Peace Sign
Chrome
Halfstack
Beyond Tellerrand
Clock (selected)
CSS Day
Asteroids
Dino
Thank You

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
<style>
:root {
	--hours: env(time-hour, 10);
	--minutes: env(time-minute, 10);
	--seconds: env(time-second, 30);
}

.hand {
	transform-origin: 100px 100px;
}

.hour-hand {
	animation: rotate-360 43200s linear infinite;
	animation-delay: calc((var(--hours) * -3600s) + (var(--minutes) * -60s));
}

.minute-hand {
	animation: rotate-360 3600s linear infinite;
	animation-delay: calc((var(--minutes) * -60s) + (var(--seconds) * -1s));
}
</style>
...

A screenshot of a web-based demonstration tool interface. The top navigation bar presents options including "Waves", "Shapes", "Clock" (selected), "ECG", "Text", "SVG", "Dino" (selected), and "Doom". An open dropdown menu, accessed via a "Draw" button, lists numerous animated shapes or demos such as "Custom", "Star", "HTML5 Logo", "Heart", "Smiley Face", "Peace Sign", "Chrome", "Halfstack", "Beyond Tellerrand", "Clock" (currently selected), "CSS Day", "Asteroids", "Dino", and "Thank You". Below this, a code editor displays an SVG structure containing a CSS style block. The CSS defines custom properties for time variables and animation rules for '.hand', '.hour-hand', and '.minute-hand' classes, which likely control elements of a clock.

Waves
Shapes
Clock
ECG
A Text
SVG
Dino
Doom

Code Draw

Asteroids Restart

<svg viewBox="0 0 500 500" onload="init()">
<g id="game"></g>

<script>
const SVG_NS = "http://www.w3.org/2000/svg";
const W = 500, H = 500;
const TAU = Math.PI * 2;

let game, ship, bullets, asteroids, keys, alive, respawnTimer;

function init() {
  game = document.getElementById("game");
  keys = {};
  document.addEventListener("keydown", e => { keys[e.code] = true; });
  document.addEventListener("keyup", e => { keys[e.code] = false; });
  restart();
  requestAnimationFrame(loop);
}

Screenshot of a web-based code editor interface. At the top are icons for various categories like Waves, Shapes, Clock, ECG, Text, SVG, Dino, and Doom. Below, 'Code' and 'Draw' tabs are present, with 'Code' selected. A dropdown menu shows 'Asteroids' selected, next to a 'Restart' button. The main area displays HTML and JavaScript code for an Asteroids-like game using SVG.

Generator


<svg viewBox="0 500 500" onload="init()"></svg>
<g id="game"></g>
<script>
	const SVG_NS = "http://www.w3.org/2000/svg";
	const W = 500, H = 500;
	const TAU = Math.PI * 2;

	let game, ship, bullets, asteroids, keys, alive, respawnTimer;

	function init() {
		game = document.getElementById("game");
		keys = {};
		document.addEventListener("keydown", e => { keys[e.code] = true; });
		document.addEventListener("keyup", e => { keys[e.code] = false; });
		restart();
		requestAnimationFrame(loop);

A screenshot of a web-based code editor or generator tool interface. The top navigation bar displays a "Generator" title, a "Power Off" button, and icons representing various generative options including "Shapes", "Clock", "ECG", "Text", "SVG", "Dino", and "Doom". Below this, there are "Code" and "Draw" tabs, with "Code" currently active. A dropdown menu shows "Asteroids" selected, next to a "Restart" button. The main content area displays JavaScript code, starting with an SVG element and defining variables and an `init` function for a game.

Generator Tool Interface

Shapes
Clock
ECG
Text
SVG
Dino
Doom

Selected View: Code

Game Selected: Asteroids

Control: Restart

<Box="0 0 500 500" onload="init()">
 <game></g>

SVG_NS = "http://www.w3.org/2000/svg";
W = 500, H = 500;
TAU = Math.PI * 2;

game, ship, bullets, asteroids, keys, alive, respawnTimer;

function init() {
  game = document.getElementById("game");
  keys = {};
  document.addEventListener("keydown", e => { keys[e.code] = true; });
  document.addEventListener("keyup", e => { keys[e.code] = false; });
}
...

Screenshot of a web-based "Generator" tool interface. The top navigation bar includes icons for various modes such as Shapes, Clock, ECG, Text, SVG, Dino, and Doom. Below the navigation, there are "Code" and "Draw" tabs, with "Code" currently selected. An interactive canvas area displays abstract line drawings, possibly representing elements from a game. Below this, there is a dropdown menu showing "Asteroids" as the selected option, and a "Restart" button. The bottom portion of the screen displays JavaScript code for game initialization, including SVG namespace definition, dimensions, event listeners for keyboard input, and variable declarations for game entities like ship, bullets, and asteroids.

Generator

Screenshot of a web application interface labeled 'Generator', showing various options for graphical outputs including Shapes, Clock, ECG, Text, SVG, Dino, and Doom. The 'Code' tab is active, and a dropdown menu is set to 'Asteroids', displaying simple geometric shapes on a white canvas. Partial JavaScript code is visible below the interactive area.

Generator

Shapes
Clock
ECG
Text
SVG
Dino
Doom

Restart

500 500" onload="init()">
  ...
  "http://www.w3.org/2000/svg";
  H = 500;
  Math.PI * 2;
  , bullets, asteroids, keys, alive, respawnTimer;
  ent.getElementById("game");

A screenshot of a web application interface named 'Generator' with controls for creating different interactive elements, including 'Shapes', 'Clock', 'ECG', 'Text', 'SVG', 'Dino', and 'Doom'. It shows 'Code' and 'Draw' tabs, a dropdown displaying 'Asteroids', and a 'Restart' button. A code editor area is partially visible below the controls.

generator

Clock
ECG
Text
SVG
Dino
Doom

Code Draw

Asteroids

<svg width="500" height="500" onload="init()">
	http://www.w3.org/2000/svg"
bullets, asteroids, keys, alive, respawnTimer;

Screenshot of a web-based application interface with options for generating different content types, including Clock, ECG, Text, SVG, Dino, and Doom. The 'Code' tab is active, and the 'Asteroids' program is selected in a dropdown, next to a 'Restart' button. Below the controls, a code snippet related to SVG and JavaScript variables is visible. A mouse cursor is pointing near the Asteroids dropdown. A faint, light-colored, C-shaped annotation is drawn on the right side of the screen.

Generator

Clock
ECG
Text
SVG
Dino
Doom

Tabs: Code, Draw

Selected option: Asteroids

Restart

...onload="init()">
    .../www.w3.org/2000/svg";

Screenshot of a web application interface for a code generator or demo tool, displaying options like Clock, ECG, Text, SVG, Dino, and Doom. The 'Code' tab is active, and 'Asteroids' is selected in a dropdown. The main display area shows a few simple drawn shapes, likely output from the 'Asteroids' option. A sidebar on the right mentions 'BRIO 4K Stream'.

Interactive Oscilloscope/Projector Generator Application

Screenshot of an interactive application interface. The application features a top menu with icons representing different modes or outputs, including ECG (heart icon), Text ('A' icon), SVG (grid icon), Dino (chicken icon), and Doom (character icon). Below this, there are "Code" and "Draw" tabs, with "Code" selected. The main canvas area displays faint, abstract line drawings. A dropdown menu at the bottom left shows "Asteroids" as the selected program or mode, accompanied by a "Restart" button. Partial HTML/SVG code snippets are visible at the bottom, including `load="init()"` and references to `w3.org/2000/svg`. A right sidebar displays "POW" and "BRIO 4K Stream" indicating integration with streaming hardware.

Asteroids program interface

A screenshot of an application interface. At the top, there are feature selection buttons for ECG, Text, SVG, Dino, and Doom. Below these, 'Code' and 'Draw' buttons are visible. A dropdown menu shows 'Asteroids' currently selected, next to a 'Restart' button. On the large white canvas, several simple outlined polygonal shapes, representing asteroids, are scattered. A partial URL '.w3.org/2000/svg' is visible at the bottom left.

Interface of a real-time graphics or game demonstration application

Screenshot of a software application interface. The top bar shows options with icons for ECG, Text, SVG, a dinosaur (Dino), and a Doom character. Below this, "Code" and "Draw" tabs are visible, with "Code" selected. On the left side of the screen, a dropdown menu is partially visible, labeled '...oids', and a 'Restart' button. The main content area displays several abstract, open polygonal shapes rendered in white lines on a white background. A partial view of a code editor is visible at the very bottom.

ECG
Text
SVG
Dino
Doom

Code | Draw

Restart

git()">
...
rg/2000/svg";

Screenshot of a minimalist application interface, likely a creative coding or visualization tool. The interface shows options such as 'ECG', 'Text', 'SVG', 'Dino', and 'Doom'. The 'Code' tab is active, and a loading spinner is displayed in the main content area. A 'Restart' button is also visible.

Interactive Coding and Drawing Application

Application Modes: ECG, Text, SVG, Dino, Doom
Active View: Code (with a "Draw" option available)

Code Editor

init()">
org/2000/svg";

Controls include a "Restart" button.

Screenshot of an interactive development environment interface. The top section features a navigation bar with various functional modes labeled ECG, Text, SVG, Dino, and Doom. Below this, tabs for "Code" and "Draw" are visible, with the "Code" tab highlighted as active. The central area of the screen acts as a canvas, displaying two small circles and two crescent-like arc shapes. Below the canvas, a code editor pane shows a partial code snippet. A "Restart" button is also visible on the lower part of the interface.

Application features: ECG, Text, SVG, Dino, Doom

Active tab: Code (Draw tab also present)

Current program: Asteroids (dropdown selected)

Action: Restart

..."init()">
...3.org/2000/svg";

A screenshot of a programming environment or tool, with an interface similar to a code editor and a canvas for graphical output. The top bar displays icons for ECG, Text, SVG, a dinosaur representing "Dino," and a pixelated "D" for "Doom." Below this, there are "Code" and "Draw" tabs, with "Code" highlighted. A dropdown menu shows "Asteroids" and a "Restart" button. The main display area shows geometric outlines: two small irregular ovals on the left and a larger, irregular, multi-sided polygon on the right, all rendered in white outlines against a light background.

Interactive Programming Environment

Feature Categories: ECG, Text, SVG, Dino, Doom
Interface Modes: Code, Draw
Current Program Selection: Asteroids
Action Button: Restart


    oad="init()">
    ...
    .w3.org/2000/svg;

Screenshot of an interactive programming environment or editor interface. The top section presents several feature categories, each with a distinct icon: a heart for ECG, an 'A' for Text, a grid for SVG, a dinosaur for Dino, and a demon head for Doom. Below these are two prominent buttons or tabs labeled 'Code' and 'Draw'. In the main content area, a selected item labeled 'Asteroids' is visible next to a 'Restart' button. The canvas displays several incomplete, abstract line shapes, possibly representing elements from a drawing or game. Partial code snippets are also visible towards the bottom.

Screenshot of a white application interface, possibly a creative coding or interactive display tool. The top menu bar features options with icons and text, including 'ECG', 'Text', 'SVG', 'Dino', and 'Doom' (represented by a pixelated skull icon), with a mouse cursor hovering over 'Doom'. Below the menu, 'Code' and 'Draw' tabs are visible, with 'Code' selected. The main content area shows a few simple geometric outlines. At the bottom left, there is a dropdown menu displaying 'Asteroids' and a 'Restart' button. A partial line of code `ad="init()">` is visible at the very bottom. A partial sidebar on the right shows 'BRI'.

Application Interface with Doom Map Selector

A screenshot of a software interface featuring a toolbar at the top with various icons and text labels including 'ECG', 'Text', 'SVG', a dinosaur icon labeled 'Dino', and an icon resembling the Doomguy helmet labeled 'Doom'. Below the toolbar, a dropdown menu is visible, labeled 'Map E1M1'. The main content area displays a wireframe drawing of a 3D environment or map layout.

Application Interface with Doom Feature and Map E1M1 Selector

Screenshot of a software interface. The interface includes a toolbar with buttons such as 'ECG', 'Text', 'SVG', 'Dino', and 'Doom' (with a demon icon). Below the toolbar is a dropdown menu labeled 'Map E1M1'. The main area displays a partial wireframe drawing.

Screenshot of a Doom map editor displaying Map E1M1

Screenshot of a software interface, likely an editor for creating or viewing game levels, specifically related to Doom. The interface shows controls for adding elements like ECG, Text, SVG, and Dino, along with a prominent 'Doom' button. A dropdown menu is labeled 'Map E1M1', and the main display area shows a wireframe 3D representation of an indoor environment.

ECG
Text
SVG
Dino
Doom

A screenshot of a user interface showing multiple input options and a wireframe 3D rendering. The top bar features options for ECG, Text, SVG, Dino, and Doom. Below these, a button reads 'Map E1M1'. The main content area displays a simple wireframe representation of a 3D environment resembling a corridor or room, with additional white lines overlaying the perspective, suggesting path rendering or projection.

Application displaying Doom Map E1M1

A screenshot of an application interface. At the top, there are several buttons for different content types: a heart icon labeled ECG, an 'A' icon for Text, a grid icon for SVG, a bird icon for Dino, and a pixelated figure next to the word 'Doom' which appears selected. Below these buttons, a dropdown menu displays "Map E1M1". The main content area shows a detailed wireframe rendering of an indoor game level or architectural scene, containing numerous lines and geometric structures.

ECG
Text
SVG
Dino
Doom

Map E1M1

Screenshot of a software interface displaying various tools and a 3D wireframe map. Above the map are buttons labeled "ECG" (with a heart icon), "Text", "SVG", "Dino" (with a dinosaur icon), and "Doom" (with a pixelated face icon). Below these is a dropdown labeled "Map E1M1". The main display area shows a wireframe representation of a room or level from a game.

Doom

Screenshot of a software interface showing a top menu bar with options including ECG, Text, SVG, Dino, and a highlighted Doom button. Below the menu, there is a dropdown labeled "Map E1M1". The interface appears to be for an application that integrates various tools, including a playful option to run Doom.

Screenshot of a software interface. At the top, a toolbar displays buttons for "ECG", "Text", "SVG", "Dino", and "Doom" (featuring a pixelated Doomguy icon). Below the toolbar, a dropdown menu is visible, currently displaying "Map E1M1". The main display area shows a wireframe rendering of a map or level, consistent with game level design.

Screenshot of an application interface featuring a toolbar at the top. The toolbar includes icons and labels for "ECG", "Text", "SVG", "Dino", and "Doom". Below the toolbar, there is a dropdown menu labeled "Map E1M1". The main content area displays a wireframe or blueprint of an indoor environment.

THANK YOU

A green, stylized "THANK YOU" message with a blocky font and shadow effect. A "CSS DAY" logo is in the bottom right corner.

THANK YOU

CSS DAY

Stylized green text spelling "THANK YOU", with "YOU" appearing as an outlined neon effect. The CSS DAY logo is also displayed.

THANK Y 40

CSS DAY

THANK YOU

Logo for CSS DAY.

.now {

13:55 | Niels Leenheer

Logos for Google, AG Grid, and the XI symbol are displayed.

.now {

13:55 | Niels Leenheer

Logo for CSS Day conference, featuring stylized geometric shapes.

13:55 | Niels Leenheer

CSS DAY

#cssday www.cssday.nl

Logo for CSS DAY event, constructed from black rectangular blocks.

People

Seb Lee-Delisle

Technologies & Tools

Chrome
CSS Doom
Firefox
getPointAtLength
getTotalLength
P31 phosphor
QuadraScan
React
Safari
SVG
WAD file
Web Audio API
Web USB

Standards & Specs

CSS 3D transforms
CSS @property
CSS anchor positioning
CSS animations
CSS clip-path
CSS custom properties
CSS negative animation delay
CSS shape()
CSS stepped animations
CSS trigonometry functions

Concepts & Methods

Billboarding
Euler integration
Pythagorean theorem
Sprite sheet

Organisations & Products

AliExpress
Asteroids
Doom

Introduction and Niels's World of Obsessions

The Quest for a Laser Clock and the Oscilloscope Discovery

Generating X/Y Waveforms from SVG and CSS Animations

Live Oscilloscope Demo and the Explosion

Building an Oscilloscope Simulator from Memory on a Train

From Oscilloscope Lines to CSS Doom: Core Architecture

Wall Positioning with CSS Trigonometry and 3D Transforms

Lighting, Textures, and the CSS Rendering Pipeline

Movement, Doors, Sprites, and Fireballs

Weapon Animation, Responsive Design, and Multiplayer

CSS Flamethrower and the Laser Projector Live Demo

Q&A: Build Time and What the Clock Sounds Like

CSS Day

Talk: CSS Doom Lasers

Sponsors

LISA DAY

.now {

.now {

.now {

.now {

.now {

.now {

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

CSS DOOM LASERS

I GET OBSESSED SOMETIMES...

BUT MOSTLY ABOUT THE WEB – AND HOW I CAN USE THE WEB BEYOND THE EDGES OF THE BROWSER WINDOW

BUT MOSTLY ABOUT THE WEB - AND HOW I CAN USE THE WEB BEYOND THE EDGES OF THE BROWSER WINDOW

I WANT TO MAKE A CLOCK USING A LASER PROJECTOR

I WANT TO MAKE A CLOCK USING A LASER PROJECTOR

A A A

A A A

PRO

CON

OLD ANALOG 1980S OSCILLOSCOPES ARE PRETTY CHEAP

AND THEY ARE REALLY COOL TOO

AND THEY ARE REALLY COOL TOO

HOW I USED CSS ANIMATIONS TO DRAW A CLOCK ON AN OSCILLOSCOPE

HOW I USED WEBAUDIO TO BLOW UP AN 1980'S OSCILLOSCOPE AND ALMOST CAUSED A FIRE

WHAT IS A CLOCK?

WHAT IS A CLOCK?

WHAT IS A CLOCK?

WHAT IS A CLOCK?

SVG Shapes and Rotation

Cathode-Ray Tube Components

Cathode Ray Tube Components

Cathode-Ray Tube (CRT) Components

The Cathode-Ray Tube

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

TO DEFLECT THE ELECTRON BEAM WE NEED TWO SIGNALS ONE FOR THE X-PLATE AND ONE FOR THE Y-PLATE

WE CAN MAKE ANY SHAPE WE WANT

WE CAN MAKE ANY SHAPE WE WANT

WE CAN MAKE ANY SHAPE WE WANT

WE CAN MAKE ANY SHAPE WE WANT

WE CAN MAKE ANY SHAPE WE WANT

WE CAN MAKE ANY SHAPE WE WANT

WE CAN MAKE ANY SHAPE WE WANT

WE CAN MAKE ANY SHAPE WE WANT

WE CAN MAKE ANY SHAPE WE WANT

WE CAN MAKE ANY SHAPE WE WANT

WE CAN MAKE ANY SHAPE WE WANT

`.now {`

`getTotalLength()`

`getPointAtLength()`

`getCTM()`

`getTotalLength()`

`getPointAtLength()`

`getCTM()`