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.
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 :)
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.
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.
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" :)
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
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.
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?
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!
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