[HN Gopher] Show HN: Giving a 2D grid a 3D look - part 4
___________________________________________________________________
Show HN: Giving a 2D grid a 3D look - part 4
Author : atum47
Score : 111 points
Date : 2021-11-28 16:05 UTC (6 hours ago)
(HTM) web link (victorribeiro.com)
(TXT) w3m dump (victorribeiro.com)
| a_c wrote:
| 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
| atum47 wrote:
| 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.
| eganist wrote:
| 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.
| FpUser wrote:
| 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
| atum47 wrote:
| I'm glad to hear that. I put so much care into my website. It
| makes me really happy when people like it.
| 094459 wrote:
| Love this
| Snd_ wrote:
| Great work! Love it
| atum47 wrote:
| Thanks
| samradelie wrote:
| 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/
| atum47 wrote:
| 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.
| [deleted]
| mywacaday wrote:
| Really like this, not normally my thing but really like the 80s
| feel while being modern at the same time. Great work!
| fnord123 wrote:
| Reminds me of Vector:
|
| https://store.steampowered.com/app/1175140/Vecter/
| atum47 wrote:
| 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
| terhechte wrote:
| 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 :)
| atum47 wrote:
| Thank you. Just pushed the code to GitHub
| achillean wrote:
| 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.
| atum47 wrote:
| Yes, I'm on the road but as soon as I can I'll push it to
| GitHub
| krisrm wrote:
| 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.
| atum47 wrote:
| 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
| [deleted]
| kattjakt wrote:
| 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/
| dataviz1000 wrote:
| 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/.
| FractalHQ wrote:
| 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.
| atum47 wrote:
| 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.
| ChrisMarshallNY wrote:
| As someone that used to play the old "wireframe" video games
| (like SPECTRE), I think this is cool; especially, since it is
| just JS.
| globalise83 wrote:
| A nice mix to go with it:
| https://www.youtube.com/watch?v=HJcpcb1wnDE
| Matheus28 wrote:
| FYI multiply canvas width & height by window.devicePixelRatio so
| it won't be blurry in high res screens
| mentos wrote:
| 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
| atum47 wrote:
| 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.
| codetrotter wrote:
| Very outrun. Nice work :)
___________________________________________________________________
(page generated 2021-11-28 23:00 UTC)