3 ms·

Show HN: Procedural Art –– 'Pulse'

62 points by omegacombinator 2y ago

omegacombinator 2y ago
More at https://soham-saha.github.io/ https://soham-saha.github.io/
- hyperific 2y ago
  Tangled is pretty cool looking. I'm really curious how it works.
  - omegacombinator 2y ago
    Here’s the code: https://github.com/Soham-Saha/Soham-Saha.github.io/tree/main/ProceduralArt/Tangled https://github.com/Soham-Saha/Soham-Saha.github.io/tree/main... Initially, there are many particles, organised in a circle. Each particle chooses another at random as its ‘target’. Each particle moves towards its target at every frame, and the more distant the target, the faster it will go.
deepvinci 2y ago
impressive, what do you think about removing the horizontal scroll bar?
- omegacombinator 2y ago
  Is it OK now?
greentext 2y ago
The ship is strangely generalized in design. There's no specific bridge; no command center. There's no engineering section. I can identify no living quarters. There's no indication of life.
- TeMPOraL 2y ago
  Now, perhaps when you're ready, it might be possible to establish a relationship with them. But for now, for right now, you're just raw material to them. Since they are aware of your existence... They will be coming.
vladsiv 2y ago
Amazing! Recently, I've done some digital art using Piet programming language, it kinda reminds of that, just with lines and dots. Awesome, keep up the good work!
- omegacombinator 2y ago
  Thanks! Perhaps you would like to share a link to your art? I mean, only if you are willing to give it in public domain…
  - vladsiv 2y ago
    You're welcome. Yeah sure, thanks for asking. I actually do quite a lot of traditional art. Everything is on my instagram: https://www.instagram.com/vlad__siv/ https://www.instagram.com/vlad__siv/ Third post is done using Piet programming language. If you run the code i.e. picture, using Piet interpreter, you'll get a link to my blog.
ansgri 2y ago
What I like most about this is that it's self-contained, no external references whatsoever.
- omegacombinator 2y ago
  Thanks!
breck 2y ago
This is lovely. Very well written code. Well done! So concise I was able to stick the whole thing in a url for an interactive version: https://try.scroll.pub/#scroll%0A%20%3Ccanvas%20id%3D'canv'%3E%3C%2Fcanvas%3E%0A%20%3Cstyle%3E%0A%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20%20padding%3A%200%3B%0A%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20background%3A%20black%3B%0A%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%7D%0A%20%20%20%20%20canvas%20%7B%0A%20%20%20%20%20%20%20%20%20max-width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20max-height%3A%20100%25%3B%0A%20%20%20%20%20%7D%0A%20%3C%2Fstyle%3E%0A%20%3Cscript%3E%0A%20%20%20%20%20const%20WIDTH%20%3D%20window.innerWidth%3B%0A%20%20%20%20%20const%20HEIGHT%20%3D%20window.innerHeight%3B%0A%20%20%20%20%20const%20NUM_POINTS%20%3D%201000%3B%0A%20%20%20%20%20const%20RADIUS%20%3D%20Math.min(WIDTH%2C%20HEIGHT)%20%2F%203%3B%0A%20%20%20%20%20document.body.style.background%20%3D%20'black'%3B%0A%20%20%20%20%20const%20canv%20%3D%20document.getElementById('canv')%3B%0A%20%20%20%20%20const%20ctx%20%3D%20canv.getContext('2d')%3B%0A%20%20%20%20%20canv.width%20%3D%20WIDTH%3B%0A%20%20%20%20%20canv.height%20%3D%20HEIGHT%3B%0A%20%20%20%20%20ctx.fillStyle%20%3D%20'black'%3B%0A%20%20%20%20%20ctx.fillRect(0%2C%200%2C%20WIDTH%2C%20HEIGHT)%3B%0A%20%20%20%20%20const%20pts%20%3D%20new%20Float32Array(NUM_POINTS%20*%202)%3B%0A%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%20NUM_POINTS%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20pts%5Bi%20*%202%5D%20%3D%20Math.cos(i%20%2F%20NUM_POINTS%20*%202%20*%20Math.PI)%20*%20RADIUS%3B%0A%20%20%20%20%20%20%20%20%20pts%5Bi%20*%202%20%2B%201%5D%20%3D%20Math.sin(i%20%2F%20NUM_POINTS%20*%202%20*%20Math.PI)%20*%20RADIUS%3B%0A%20%20%20%20%20%7D%0A%20%20%20%20%20let%20targets%20%3D%20%5B%5D%3B%0A%20%20%20%20%20function%20reset()%20%7B%0A%20%20%20%20%20%20%20%20%20targets%20%3D%20%5B%5D%3B%0A%20%20%20%20%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%20NUM_POINTS%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20targets.push((i%20%2B%20117)%20%25%20NUM_POINTS)%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%201000%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20a%20%3D%20Math.floor(Math.random()%20*%20NUM_POINTS)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20b%20%3D%20Math.floor(Math.random()%20*%20NUM_POINTS)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20tmp%20%3D%20targets%5Ba%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20targets%5Ba%5D%20%3D%20targets%5Bb%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20targets%5Bb%5D%20%3D%20tmp%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D%0A%20%20%20%20%20reset()%0A%20%20%20%20%20let%20vert%20%3D%20targets.map(x%20%3D%3E%20x%20%25%202)%3B%0A%20%20%20%20%20function%20updatePoints()%20%7B%0A%20%20%20%20%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%20NUM_POINTS%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20x%20%3D%20pts%5B2%20*%20i%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20y%20%3D%20pts%5B2%20*%20i%20%2B%201%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20tx%20%3D%20pts%5Btargets%5Bi%5D%20*%202%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20ty%20%3D%20pts%5Btargets%5Bi%5D%20*%202%20%2B%201%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(vert%5Bi%5D%20%3D%3D%201)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pts%5B2%20*%20i%5D%20%2B%3D%20(tx%20-%20x)%20*%200.1%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pts%5B2%20*%20i%20%2B%201%5D%20%2B%3D%20(ty%20-%20y)%20*%200.1%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D%0A%20%20%20%20%20let%20ct%20%3D%200%3B%0A%20%20%20%20%20const%20clearOut%20%3D%20false%3B%0A%20%20%20%20%20function%20updateScreen()%20%7B%0A%20%20%20%20%20%20%20%20%20ct%20%2B%3D%201%3B%0A%20%20%20%20%20%20%20%20%20updatePoints()%3B%0A%20%20%20%20%20%20%20%20%20ctx.fillStyle%20%3D%20'rgba(0%2C0%2C0%2C0.05)'%3B%0A%20%20%20%20%20%20%20%20%20ctx.fillRect(0%2C%200%2C%20WIDTH%2C%20HEIGHT)%3B%0A%20%20%20%20%20%20%20%20%20if%20(!clearOut)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.fillStyle%3D'white'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%20NUM_POINTS%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.fillRect(pts%5Bi%20*%202%5D%20%2B%20WIDTH%20%2F%202%2C%20pts%5Bi%20*%202%20%2B%201%5D%20%2B%20HEIGHT%20%2F%202%2C%201%2C%201)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20requestAnimationFrame(updateScreen)%3B%0A%20%20%20%20%20%20%20%20%20if%20(ct%20%3E%20100)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20reset()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20ct%20%3D%200%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D%0A%20%20%20%20%20requestAnimationFrame(updateScreen)%3B%0A%20%3C%2Fscript%3E%0A%20 https://try.scroll.pub/#scroll%0A%20%3Ccanvas%20id%3D'canv'%... Try editing the NUM_POINTS to start playing around with it.

3 ms·

Show HN: Procedural Art –– 'Pulse'

62 points by omegacombinator 2y ago

omegacombinator 2y ago
More at https://soham-saha.github.io/ https://soham-saha.github.io/
- hyperific 2y ago
  Tangled is pretty cool looking. I'm really curious how it works.
  - omegacombinator 2y ago
    Here’s the code: https://github.com/Soham-Saha/Soham-Saha.github.io/tree/main/ProceduralArt/Tangled https://github.com/Soham-Saha/Soham-Saha.github.io/tree/main... Initially, there are many particles, organised in a circle. Each particle chooses another at random as its ‘target’. Each particle moves towards its target at every frame, and the more distant the target, the faster it will go.
deepvinci 2y ago
impressive, what do you think about removing the horizontal scroll bar?
- omegacombinator 2y ago
  Is it OK now?
greentext 2y ago
The ship is strangely generalized in design. There's no specific bridge; no command center. There's no engineering section. I can identify no living quarters. There's no indication of life.
- TeMPOraL 2y ago
  Now, perhaps when you're ready, it might be possible to establish a relationship with them. But for now, for right now, you're just raw material to them. Since they are aware of your existence... They will be coming.
vladsiv 2y ago
Amazing! Recently, I've done some digital art using Piet programming language, it kinda reminds of that, just with lines and dots. Awesome, keep up the good work!
- omegacombinator 2y ago
  Thanks! Perhaps you would like to share a link to your art? I mean, only if you are willing to give it in public domain…
  - vladsiv 2y ago
    You're welcome. Yeah sure, thanks for asking. I actually do quite a lot of traditional art. Everything is on my instagram: https://www.instagram.com/vlad__siv/ https://www.instagram.com/vlad__siv/ Third post is done using Piet programming language. If you run the code i.e. picture, using Piet interpreter, you'll get a link to my blog.
ansgri 2y ago
What I like most about this is that it's self-contained, no external references whatsoever.
- omegacombinator 2y ago
  Thanks!
breck 2y ago
This is lovely. Very well written code. Well done! So concise I was able to stick the whole thing in a url for an interactive version: https://try.scroll.pub/#scroll%0A%20%3Ccanvas%20id%3D'canv'%3E%3C%2Fcanvas%3E%0A%20%3Cstyle%3E%0A%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20%20padding%3A%200%3B%0A%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20background%3A%20black%3B%0A%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%7D%0A%20%20%20%20%20canvas%20%7B%0A%20%20%20%20%20%20%20%20%20max-width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20max-height%3A%20100%25%3B%0A%20%20%20%20%20%7D%0A%20%3C%2Fstyle%3E%0A%20%3Cscript%3E%0A%20%20%20%20%20const%20WIDTH%20%3D%20window.innerWidth%3B%0A%20%20%20%20%20const%20HEIGHT%20%3D%20window.innerHeight%3B%0A%20%20%20%20%20const%20NUM_POINTS%20%3D%201000%3B%0A%20%20%20%20%20const%20RADIUS%20%3D%20Math.min(WIDTH%2C%20HEIGHT)%20%2F%203%3B%0A%20%20%20%20%20document.body.style.background%20%3D%20'black'%3B%0A%20%20%20%20%20const%20canv%20%3D%20document.getElementById('canv')%3B%0A%20%20%20%20%20const%20ctx%20%3D%20canv.getContext('2d')%3B%0A%20%20%20%20%20canv.width%20%3D%20WIDTH%3B%0A%20%20%20%20%20canv.height%20%3D%20HEIGHT%3B%0A%20%20%20%20%20ctx.fillStyle%20%3D%20'black'%3B%0A%20%20%20%20%20ctx.fillRect(0%2C%200%2C%20WIDTH%2C%20HEIGHT)%3B%0A%20%20%20%20%20const%20pts%20%3D%20new%20Float32Array(NUM_POINTS%20*%202)%3B%0A%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%20NUM_POINTS%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20pts%5Bi%20*%202%5D%20%3D%20Math.cos(i%20%2F%20NUM_POINTS%20*%202%20*%20Math.PI)%20*%20RADIUS%3B%0A%20%20%20%20%20%20%20%20%20pts%5Bi%20*%202%20%2B%201%5D%20%3D%20Math.sin(i%20%2F%20NUM_POINTS%20*%202%20*%20Math.PI)%20*%20RADIUS%3B%0A%20%20%20%20%20%7D%0A%20%20%20%20%20let%20targets%20%3D%20%5B%5D%3B%0A%20%20%20%20%20function%20reset()%20%7B%0A%20%20%20%20%20%20%20%20%20targets%20%3D%20%5B%5D%3B%0A%20%20%20%20%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%20NUM_POINTS%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20targets.push((i%20%2B%20117)%20%25%20NUM_POINTS)%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%201000%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20a%20%3D%20Math.floor(Math.random()%20*%20NUM_POINTS)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20b%20%3D%20Math.floor(Math.random()%20*%20NUM_POINTS)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20tmp%20%3D%20targets%5Ba%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20targets%5Ba%5D%20%3D%20targets%5Bb%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20targets%5Bb%5D%20%3D%20tmp%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D%0A%20%20%20%20%20reset()%0A%20%20%20%20%20let%20vert%20%3D%20targets.map(x%20%3D%3E%20x%20%25%202)%3B%0A%20%20%20%20%20function%20updatePoints()%20%7B%0A%20%20%20%20%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%20NUM_POINTS%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20x%20%3D%20pts%5B2%20*%20i%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20y%20%3D%20pts%5B2%20*%20i%20%2B%201%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20tx%20%3D%20pts%5Btargets%5Bi%5D%20*%202%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20const%20ty%20%3D%20pts%5Btargets%5Bi%5D%20*%202%20%2B%201%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(vert%5Bi%5D%20%3D%3D%201)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pts%5B2%20*%20i%5D%20%2B%3D%20(tx%20-%20x)%20*%200.1%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pts%5B2%20*%20i%20%2B%201%5D%20%2B%3D%20(ty%20-%20y)%20*%200.1%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D%0A%20%20%20%20%20let%20ct%20%3D%200%3B%0A%20%20%20%20%20const%20clearOut%20%3D%20false%3B%0A%20%20%20%20%20function%20updateScreen()%20%7B%0A%20%20%20%20%20%20%20%20%20ct%20%2B%3D%201%3B%0A%20%20%20%20%20%20%20%20%20updatePoints()%3B%0A%20%20%20%20%20%20%20%20%20ctx.fillStyle%20%3D%20'rgba(0%2C0%2C0%2C0.05)'%3B%0A%20%20%20%20%20%20%20%20%20ctx.fillRect(0%2C%200%2C%20WIDTH%2C%20HEIGHT)%3B%0A%20%20%20%20%20%20%20%20%20if%20(!clearOut)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.fillStyle%3D'white'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%20NUM_POINTS%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.fillRect(pts%5Bi%20*%202%5D%20%2B%20WIDTH%20%2F%202%2C%20pts%5Bi%20*%202%20%2B%201%5D%20%2B%20HEIGHT%20%2F%202%2C%201%2C%201)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20requestAnimationFrame(updateScreen)%3B%0A%20%20%20%20%20%20%20%20%20if%20(ct%20%3E%20100)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20reset()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20ct%20%3D%200%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D%0A%20%20%20%20%20requestAnimationFrame(updateScreen)%3B%0A%20%3C%2Fscript%3E%0A%20 https://try.scroll.pub/#scroll%0A%20%3Ccanvas%20id%3D'canv'%... Try editing the NUM_POINTS to start playing around with it.