3 ms·

How can one learn to create these visualizations?

• skilled 4y ago
  By inspecting page source. If you mean technical, you have no choice but to actually study the topic and understand it so that you can create examples like the author did.
• exikyut 4y ago
  Depends what point on the spectrum you refer to by "how". Implementation, creativity, or the focus and discipline required to combine the two? :P I had a quick look; as always with the presentations on this website, all the un-minified JavaScript is right there for you to pour over: https://ciechanow.ski/js/sound.js https://ciechanow.ski/js/sound.js So that covers the implementation: a giant pile of WebGL to power the rotatable boxes and animate effectively using the GPU, alongside in this case a bunch of Web Audio code. Unfortunately that doesn't cover the focus/discipline part, which I would definitely appreciate some pointers on... one of these days I'll find some that fit within my ADHD address space xD
• phailhaus 4y ago
  I don't want to dissuade you, but you probably should not try to do it the same way he does: completely from scratch using pure JS + WebGL and without any frameworks. He's able to pull it off because he clearly has an incredible depth of knowledge of how it works, but mere mortals like you and me will likely get stuck in the bog of minutiae. I recommend starting off by playing around with Three.js, which will get you up and running really quickly while still staying pretty grounded in WebGL. [1] You can make blog posts very similar to Ciechanowski using ObservableHQ. [2] [1] https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene https://threejs.org/docs/index.html#manual/en/introduction/C... [2] https://observablehq.com/@mbostock/hello-three-js https://observablehq.com/@mbostock/hello-three-js
  • gtirloni 4y ago
    Thank you, very useful pointers.