Show HN: Giving a 2D grid a 3D look – part 4 | Hacker News Reader

Show HN: Giving a 2D grid a 3D look – part 4

victorribeiro.com

155 pointsatum4737 comments

I think I'm getting close to "finish" this project. I've been thinking about using as a music visualization for my web radio project [1] or let people save it as an image or a short video, so they can use on their designs...

Anyways, on this iteration I have added a CSS linear gradient background, a setting sun at the center of the screen also with some gradient and fiddle a bit with the alpha values, so the mountains would appear more gentle on the horizon.

Hope you like it. I'm open to suggestions on how I should use this project.

1 - https://victorribeiro.com/radio/

Part 1 - https://victorribeiro.com/random

Part 2 - https://victorribeiro.com/random2

Part 3 - https://victorribeiro.com/random3

This looks amazing! Are you considering open-sourcing it? Would love to see how it fits as a background for https://2000.shodan.io

There are probably a lot of outrun-style websites/ projects that could use this.

Yes, I'm on the road but as soon as I can I'll push it to GitHub

This is really really beautiful :)

I build something similar last year (https://hyperdeck.io/beta/) using Rust and webassemly. Yours looks much much much cooler though! Looking forward to the source to see how you did it :)

Thank you. Just pushed the code to GitHub

I just see a purple background?

Hi people, here's the source code. I hope you make good use of it.

https://github.com/victorqribeiro/retroSynthwave

Could you please like this comment so it goes to the top? Thanks.

Insane to me how terse and elegant that code is for such a beautiful outcome

Well, isn't that a nice comment to receive on a project... Thank you!

Pairs nicely with my friend's 80's themed track: https://soundcloud.com/protocolzero/trainride-to-paradise/s-...

Would be cool to drive the rendering with the song?

Definitely could see combining music with a visualizer like this to travel back to the 80s. Maybe put billboards up on the side of the road with all of the hit products/popculture of the time passing by? Probably too heavy handed, open to suggestions ha

Yes, on my other comment I've linked my web radio project where I sync canvas animations with cool music. I'll try to add this one to it later. Glad you liked it.

A nice mix to go with it: https://www.youtube.com/watch?v=HJcpcb1wnDE

Reminds me of Vector:

https://store.steampowered.com/app/1175140/Vecter/

Is there a way to play Windows games on an M1?

First thing that came to mind as well. To be sure, uninstalled with a quickness; might just be a generational sensibility thing, but the memes struck me as intolerable.

This is really cool! Feels very chill.

If I had one suggestion, some parameter sliders would be fun. Modify the speed over the land/height of the mountains/variance in mountain height.

Well done and thanks for sharing.

I've actually made something quite similar a while ago which you might find interesting! 22 parameters plus a step by step visualization of how the scene is created "layer by layer" :)

https://kattjakt.github.io/mars-playground/

I've pushed the code to GitHub it would be very easy to fiddle with the parameters or add sliders - Mr.Doob has a library for that. Let me know if you make something cool with this. Thanks

Here is another example of making a 3D look with 2D graphics using JavaScript from the CodeIncomplete blog building an Outrun type car racer game, https://codeincomplete.com/articles/javascript-racer/.

once upon a time, there was a twitch stream that only played synthwave and vaporwave with backgrounds looped from RoyaltyFreeTube (https://www.youtube.com/channel/UCDyoFl3axaufRwkpBA38-1w)

https://www.twitch.tv/synthwavebeats (it's been offline over a year now)

It was fairly successful, averaging between 40 and 100 listeners at any given time of day, which suggests to me that you could keep building on your visuals with a very basic synthwave, vaporwave, or other similar lo-fi-ish streaming page people could background on a tv or spare monitor, procedurally generating the visuals over time to keep things fresh.

Lifestyle businesses have been done with less.

Nice! How do you like the JavaScript canvas api? I found it hard to be productive with but I plan on taking another stab soon. I’ve had more luck with svg animations and pixi.js but I want to learn enough of the canvas api to solidify my opinion of it.

Well, I really enjoy it. I've been using it on my projects since 2013 (when I first learned that I could use a 2D array as map for a game, haha).

To be honest, I feel I let a lot of people down because I write my projects on it. The radial menu, for instance, o lot of people like it, but they resent the fact that I did not used SVG so it could be styled with css.

This project for instance, I tried to give a glow to the grid but the frame rate dropped to the ground, something that would not happen if I had used webgl.

Anyways, to small games, interactive demos, cool scenes, canvas is my weapon of choice.

I really enjoy doing things in canvas and processing.js, even though it's discontinued. It's a relatively rapid way to prototype things or build cool demos like you said. I got hooked around the same time a you, maybe a year earlier, when moderating over at Khan Academy in their CS area. So much fun.

Please forgive my ignorance, I think I'm missing context here. Would you mind sharing what is this demo trying to achieve? Is it like the star war intro https://m.youtube.com/watch?v=tGsKzZtRwxw where a wall of text is being transformed, and yours is another visualization?

Again apologies for my ignorance

If go under the links I've submitted you will see that I started a project just for the heck of it and it ends up looking like this. No specific goal in mind, just to spend a few minutes a day doing something cool.

Very nice. Interesting that on Safari on my (admittedly old) laptop, random3 runs at about ~17ms per frame (60 fps), whereas random4 takes ~34ms (30fps). Re-drawing the sun and its gradient & blur each time is enough to cause requestAnimationFrame to miss frames.

Btw, I think the sun should to be scaled to the canvas size also - on small windows if take up the whole thing!

As someone that used to play the old "wireframe" video games (like SPECTRE), I think this is cool; especially, since it is just JS.

Very outrun. Nice work :)

FYI multiply canvas width & height by window.devicePixelRatio so it won't be blurry in high res screens

Love your website. Selection of music for the Rock channel is very nice as well. Bookmarking it.

Btw I've written pixel shader based music vis ages ago. Here is screenshot:

https://imgur.com/a/txWiOih

I'm glad to hear that. I put so much care into my website. It makes me really happy when people like it.

I have uploaded a video to youtube using this animation with some free royalty song I found online.

https://www.youtube.com/watch?v=ztv--KzSGDc

Really like this, not normally my thing but really like the 80s feel while being modern at the same time. Great work!

i should like to see how you did the infinite terrain. did a mars-walk some years ago with a friend's sculptures https://samelie.github.io/mars-amenothep/

Great work! Love it

Thanks

Love this

Reply on news.ycombinator.com