3 ms·
Show HN: Procedural Art - ‘Tangled’
- omegacombinator 2y agoMore at https://soham-saha.github.io/ https://soham-saha.github.io/
- breck 2y agoOnce again, the code is so small I can put it all in the URL hash. Well done! 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%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20black%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20canvas%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20max-height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%3C%2Fstyle%3E%0A%20%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20%20WIDTH%20%3D%20window.innerWidth%0A%20%20%20%20%20%20%20%20%20HEIGHT%20%3D%20window.innerHeight%0A%20%20%20%20%20%20%20%20%20NUM_POINTS%20%3D%20100%0A%20%20%20%20%20%20%20%20%20RADIUS%20%3D%20Math.min(WIDTH%2C%20HEIGHT)%3B%0A%20%20%20%20%20%20%20%20%20document.body.style.background%20%3D%20'black'%0A%20%20%20%20%20%20%20%20%20canv%20%3D%20document.getElementById('canv')%0A%20%20%20%20%20%20%20%20%20ctx%20%3D%20canv.getContext('2d')%0A%20%20%20%20%20%20%20%20%20canv.width%20%3D%20WIDTH%0A%20%20%20%20%20%20%20%20%20canv.height%20%3D%20HEIGHT%0A%20%20%20%20%20%20%20%20%20ctx.fillStyle%20%3D%20'black'%0A%20%20%20%20%20%20%20%20%20ctx.fillRect(0%2C%200%2C%20WIDTH%2C%20HEIGHT)%0A%20%20%20%20%20%20%20%20%20pts%20%3D%20new%20Float32Array(NUM_POINTS%20*%202)%0A%20%20%20%20%20%20%20%20%20function%20reset()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.fillStyle%20%3D%20'black'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.fillRect(0%2C%200%2C%20WIDTH%2C%20HEIGHT)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for%20(i%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%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%20%20%20%20%20%20%20%20%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%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20targets%20%3D%20%5B%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for%20(i%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%20%20%20%20%20%20%20%20%20targets.push((i%20%2B%20117)%20%25%20NUM_POINTS)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for%20(i%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%20%20%20%20%20%20%20%20%20%20%20%20%20a%20%3D%20Math.floor(Math.random()%20*%20NUM_POINTS)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20b%20%3D%20Math.floor(Math.random()%20*%20NUM_POINTS)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20tmp%20%3D%20targets%5Ba%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20targets%5Ba%5D%20%3D%20targets%5Bb%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20targets%5Bb%5D%20%3D%20tmp%0A%20%20%20%20%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%20reset()%0A%20%20%20%20%20%20%20%20%20function%20updatePoints()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for%20(i%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%20%20%20%20%20%20%20%20%20x%20%3D%20pts%5B2%20*%20i%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y%20%3D%20pts%5B2%20*%20i%20%2B%201%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tx%20%3D%20pts%5Btargets%5Bi%5D%20*%202%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ty%20%3D%20pts%5Btargets%5Bi%5D%20*%202%20%2B%201%5D%0A%20%20%20%20%20%20%20%20%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%0A%20%20%20%20%20%20%20%20%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%0A%20%20%20%20%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%20ct%20%3D%200%0A%20%20%20%20%20%20%20%20%20clearOut%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%20function%20updateScreen()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ct%20%2B%3D%201%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20updatePoints()%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.fillStyle%20%3D%20'rgba(0%2C0%2C0%2C0.01)'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.fillRect(0%2C%200%2C%20WIDTH%2C%20HEIGHT)%0A%20%20%20%20%20%20%20%20%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%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.fillStyle%20%3D%20'white'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for%20(i%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%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%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20requestAnimationFrame(updateScreen)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(ct%20%3E%20500)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clearOut%20%3D%20true%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(ct%20%3E%20600)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20reset()%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ct%20%3D%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clearOut%20%3D%20false%0A%20%20%20%20%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)%0A%20%3C%2Fscript%3E https://try.scroll.pub/#scroll%0A%20%3Ccanvas%20id%3D'canv'%...
- omegacombinator 2y agoAnd thanks again!