Nightdrive(incoherency.co.uk) |
Nightdrive(incoherency.co.uk) |
Might be a good thread to ask. A few years ago I found a couple of sites that were like shadertoy but for 2D canvas shit like this. One I think was codegolf.tk (which appears to have disappeared), and I can't for the life of me remember what the other was.
Does anyone know of any such sites?
What's funny is that screensavers may end up coming back into vogue if OLED displays continue to have burn-in issues. Ray-traced flying toasters may be in our future.
Not exactly the same thing, since it's a high-paced action game, but I was always fond of the DOS game Skyroads, which has a similar aesthetic. (I believe someone has now made a web-based version called OpenRoads.)
> What game can we make where the premise is that you're a
> passenger on the motorway at night time?
I thought this would be about the Atari game with paddles… lol
I don't understand this remark. What browsers do people use that don't have javascript?
Then I bumped into the car in front of me which was changing lanes. Not nice.
It's beautiful art. The code too. Great work.
Yep!
You know, even men are allowed to just make Art.
Admit it, though: you dislike even more that in that app, you're not zooming by everyone else on the left-most lane, right? ;-)
Edit: Well I got this entirely wrong and missed that this was meant to be lefthand traffic. (I caught a segment that looked more like there was an independent road passing an interstate crossing a city, rather than being opposite lanes.)
http://realscandinavia.com/this-day-in-history-swedish-traff...
I found the entire experience so disorienting. I remember my dad laughing at me, I did so terribly at it (TBF I was probably 6 or 7)
Brilliant work, love this.
And the music reminds me of Kavinsky too with the obvious association with Drive.
Also, I know it's not actually there, but my mind insists on filling in a "not quite black" sky over the road and the occasional tree or similar to the sides as shadows. Fascinating effect.
If you wanted to make it interactive, maybe a Pokemon Snap like functionality where you try to capture photos of random environment features or creatures.
It would be awesome to do this with a bladerunner theme. Like, sitting in a spinner going somewhere, with all the different cars, spinners and maybe buildings passing by.
“Synthwave multimedia project” would be how I’d describe it.
It’s very good. Made me think of the Jeff Goldblum / Michelle Pfeiffer film Into the Night (https://www.imdb.com/title/tt0089346/).
https://synthwave.fandom.com/wiki/Synthwave_Wiki
Apple Music, and presumably the others, are good about recommending stuff in this genre. I started with Emil Rottmayer's 'Descend'. Timecop1983 is another good artist to launch from.
https://music.apple.com/au/album/descend/1369485374
Fun!
I hate US highways at night, they are so dark, sometimes I feel I might as well have my eyes closed.
Rant that no one asked for over.
This seems easily fixable, no? Just make cars opaque black and assign progressively decreasing z-index to each spawning light. (Unlikely anyone will leave page open long enough to reach min value, and you could just reset at that point.)
The tricky thing is, this project's renderer is currently a queue of circles to draw to a canvas. It's under 100 lines of JavaScript. So any increase in complexity will require substantial changes, like abstracting over types of drawables.
It's a simulation.
People are either ignorant, lazy or don't care as there is very little chance of being caught.
https://ww3.cad.de/foren/ubb/uploads/NoIdea/perscheid32.jpg
by the late cartoonist Martin Perscheid.
What irritated me a bit instead, where the cars passing on the right side, until I realized that it was made by someone from UK ;-)
Also check out the author's detailed explanations.
[0] https://js1k.com/2013-spring/demo/1459
[1] http://ehouais.net/2015/03/js1k-2015-part-1-introduction
There's also a screensaver out there which generates an entire little city, with neon branding on buildings and all.
Anyways, run this in your browser inspector to hot-patch the live demo so that each car has an opaque black circle as its body/chassis:
for (let i = 0; i < cars.length; i++) { console.log(i);
cars[i].headlights = cars[i].headlights.concat([ {xy: new V2d(0,0), z: cars[i].headlights[0].z, r:cars[i].headlights[1].xy.x, col: "black"} ]);
cars[i].rearlights = cars[i].rearlights.concat([ {xy: new V2d(0,0), z: cars[i].rearlights[0].z, r:cars[i].rearlights[1].xy.x, col: "black"} ]);
}To be clear, since of course this is the internet and one must be precise or else get nit-picked and "outplayed," I obviously meant 5 minutes for the author who already knows the layout of the code. Obviously. Any charitable interpretation would have taken that as a given. 25-40 minutes sounds more appropriate for a newcomer examining it for the first time.
One key difference: this guy built his demo from scratch, whereas mine's a port of someone else's work. It's great to see another implementation, with its own techniques and features.
Through the nineties, Microsoft software engineers carried on a tradition of writing clever and distinctive software projects alongside the software they were primarily tasked with writing— this is where Solitaire and Minesweeper came from, for instance. These engineers also wrote "easter eggs" into their primary software, such as the beautiful flight simulator hidden in Excel 97.
Amazed by reading the above. I'm a sucker to read and learn from that clerverness.
The video didn't generate much interest so unfortunately I didn't release anything playable.
I can't take credit for Drivey's aesthetics, I'm just honored to have carried it to HTML5 ;) Somewhere out in Australia is the original programmer who I'm sure would love to see this, but who also loves avoiding the spotlight.
I just did a quick scroll of your Twitter feed and jeez you're prolific, this stuff is really cool. I'll try Hexpress this weekend.
P.S. It's a joke. This is a really well executed demo.
I like to joke that Australia (where Drivey originally comes from) has a low enough population that the pedestrians are in no real danger ;)
ａｅｓｔｈｅｔｉｃ 可ぷき
Drivey shows objects as their silhouettes on top of a light background, whereas Nightdrive shows objects as their lights on top of a dark background.
Some people are making a strong case (I think) for calling these types of projects "demos", but also, I think the inability to fit them in the arbitrary structure of existing nomenclature is a good quality for a project to have. :D
Have you considered using a small bokeh image in place of circles in your renderer? Their size is based on the (usually unchanging) optical properties of the eye, rather than the eye's distance to the light, so you'd fade them rather than resize them, and if you round their position to the nearest pixel you might be able to draw them with 2D canvas context speedily.
If you create an issue on the repo, I'll try and figure it out when I have the bandwidth.
EDIT: never mind, it looks like it was, very cool.
The original was written in "JujuScript", with strong types and novel operators. I pretended it was Haxe, and ran around fixing compiler errors it till it compiled to JavaScript. I built out a small Three.js project to hook it to, built up the features, then refactored it into something I felt was maintainable. I tried preserving the organization of the original script as best as I could.
Sidenote: I belong to the "port it" school of software preservation. My friend who runs the BlastEm project belongs to the "emulate it" school. I've seen both approaches have been employed to preserve Glider, which I think implies how important that game is to people. :)
But I don't see anyone else having issues so, is it just me?
ShaderToy: https://www.shadertoy.com/view/MdfBRX [WebGL]
Video: https://www.youtube.com/watch?v=WrxZ4AZPdOQ / Making of: https://www.youtube.com/watch?v=eKtsY7hYTPg
First off, it's beautiful! Second, just because you can, doesn't mean you should :)
I think it's art, so be careful about adding more. The minimalism is beautiful. Just a bunch of moving lights, but they capture the feel of night driving! If you add everything mentioned as upgrades, it will be a simulation. An impressive engineering feat, but (I think) less as a work of art.
I wonder, what does someone who's never ridden/driven in a car at night 'feel' when they see this?
It's hard to classify what it is. It's not a video, because it's generated dynamically. It's not a game, because you just watch. It's not a screensaver, because it's not the 90s. Maybe it's a "demo"?
https://www.newyorker.com/tech/annals-of-technology/desert-b...
Of course, because Desert Bus is literally the worst game ever, the steering continually veers to the side and you have to keep nudging the wheel or you'll crash.
It may be 2022, but I would love a screensaver version of this.
Hmm, why not just draw a black rectange around any pair of car lights? It should work for givimg the impression of a solid car within the context of the video...
Edit: hmm, he does say this "This would be slightly harder than street light occlusion. Probably a first pass would be to render a black cuboid behind each car's lights, so that the cuboid blocks out anything that would be blocked by the car."
He does incredible work with shaders and explains them in very clear detail.
It would be cool if it flipped from left- to right-side driving depending on host's IP address?
XScreenSaver had its most recent release two weeks ago.
One of the most beautiful light effects I’ve seen while being a passenger in a car is the reflection of oncoming headlights on the underside of powerlines, whether they be mains power or for electric trains. It’s a dazzling pattern, reminiscent of the wormhole scene in Interstellar.
Perhaps something to add to your “more” list? :smiling-emoji-with-eyes-closed-and-sweat-bead:
Edit: At first I thought there were also stars, but it was just dust on my phone…
I have a decent handle on js but I have no idea where to start in terms of tooling. For now, I've been trying to build basic eye tracking to apply a "block" of color over eyes with an animation in said block on top of a real-time video stream.
Elsewhere, automating mouth animations from audio / even moving a character in a random motion when audio input is provided.
Any advice where to start would be greatly appreciated!
https://www.google.com/search?q=night+driver+arcade&oq=night...
Unfortunately it seems the author passed away a few months ago
Exactly, those are demos, and while I believe it's slightly different there's a whole culture around it that I've never been aware until recently called "demoscene"! I even have a small "Demos" section on my website with a bunch of those, not to the same level of quality though since for me it'd be a bit more like "self-contained small experiments that resulted in something cool so I put it together as a demo":
- "Zoom", hyperdrive-like effect: https://francisco.io/demo/zoom/
- "Tree generation", specify a JSON/HTML structure and it'll generate a tree: https://francisco.io/demo/tree/ (disc: it was inspired by a broken demo I saw from someone else)
- "Stereo Depth", calculate depth of a couple of stereo images using JS: https://francisco.io/demo/depth/
- "Terminal player", specify a bunch of commands in plain text and they'll be "played" like a video: https://francisco.io/demo/terminal/
There’s a long-standing tradition of people creating realtime graphics software on personal computers that doesn’t offer any interactivity. They are indeed called demos and the community is called the demoscene. It goes back to the late 1980s and had a golden era in the mid-90s on Amiga and PC. (Pre-Internet, watching and making demos was one of the few socially and creatively oriented things you could do for free on a home computer.)
To be pedantic, this isn’t a full-blown demo. Small demos are called intros, and a category of them is the size-constrained intro (e.g. 1kB or 4kB). So this could be either a small intro or an effect as part of a bigger demo.
It’s worth looking up some of the small intros. People can squeeze entire GPU-raytraced universes with music into a few kilobytes.
I think this is because you should actually just be dividing by y, the perpendicular distance through the screen. Probably adding z to the mix, while wrong, doesn't make it too weird because of the limited set of z values used.
If the result with just division by y looks distorted, then I would suggest fiddling with the value of k, which effectively controls how wide-angle versus telephoto things look.
Broadly speaking you've got the B&W era until the 70s, the "old classics" recorded in colour on actual film up till the 90s, then the period of questionable CGI and campiness up till somewhere like 2005 when what we feel like is new/recent cinema starts. The ongoing era of decent invisible CGI, quality digital cameras, and post-9/11 hopelessness.
It's why I still watch a lot of 90s/early 2000s movies, there's just something different about that era that feels nice.
That's the cover by band London Grammar and TIL about the original one. Didn't know about the movie which now is on my todo list, thanks.
I wonder if Drive originated this aesthetic or if it's just coincidence.
It's definitely one of the major works in that world, however.
These days, the only notable difference between demos and intros is file size. If it's bigger than 64kb, it's a demo. You can totally have a short, single-effect demo like this one, and there's plenty such demos out there.
Ergo, I disagree, I think this counts as "full-blown" for any reasonable current definition.
That guy is a real hero, and apparently a real human bean.
A compiler would tell me what all the types should be and if they are being respected. I'd also write a lot of unit tests to make sure that the code is doing what it is expected to as well as enable refactoring more easily. The code isn't formatted consistently, so that also makes it hard for me to read, I'm kind of OCD about that and having tools like eslint/prettier, which do it automatically, makes this super easy to fix. Linting the code would also point out other issues that the compiler misses. Putting it into CI would ensure that all changes get checked and builds would fail, if there are issues.
So I guess that is what I mean when I say 'clean it up'.
What I did was pull the source code, load it up in IDEA, convert the .js files to .ts files. Then looked at the errors. Most of what stood out was that the author included a copy of threejs directly and used parts that TS can't infer types on. Not a huge deal, but makes following the code more difficult for sure. I don't think it would take too much time to update it at all.
I think you're right on many counts, and I appreciate the effort you took to see what TS could do for this kind of project.
If you create an issue on the repo, I can notify you if I make an attempt at using TypeScript to maintain it, in a branch at least. No guarantees, but I've considered it before, and it'd be worth my time once I have some to allocate.