Cascade: CSS to sound live coding system | Hacker News Reader

Cascade: CSS to sound live coding system

raphaelbastide.com

60 pointstarball8 comments

Example videos here (not so impressive, right?): https://peertube.swrs.net/video-channels/cascade/videos

Here is an interactive example: https://raphaelbastide.com/cascade/demos/cursor.html

And here is a schema describing how sound is mapped to graphics: https://raphaelbastide.com/cascade/website/img/poster.svg (e.g. probability of sound is mapped to opacity of the HTML element).

What a weird/unexpected way of producing music. Does not look so handy, but still it’s interesting if you already know CSS.

Initiator of the project here. Let me add a bit of context: The goal of cascade is to explore and map graphic possibilities offered by the DOM and CSS to sound (positions, nesting, animation, dev tools editing…). That explains the weird results, it is an experimental project mixing live-coding, sound notation and love for web standards, that will never sound like commercial music, as the limitations are important and fundamental to the exploration. This video shows several demos, illustrating my point : https://peertube.swrs.net/videos/watch/33e7c76d-775f-4e1b-88...

The spinning rectangle with the 4 inner circles in the video is really fascinating :) Congrats for the creativity!

Amazing work Raphaël! I’ve been showing this to my graphic design students in a code class and they immediately get the taste of editing in the browser inspector.

Thank you for the thorough explanation! Sorry if I sounds blasé, that’s actually quite of an innovative project (but still I want to call it weird). ;-)

The video is very interesting, btw. But!.. the examples don’t show how interactive it can be (and the results are fucking brutalist; looks a bit like living Kandinsky paintings), related to other audio/live coding interfaces I bookmarked recently (not comparable at all):

http://100r.co/site/orca.html

https://supercollider.github.io/

https://sonic-pi.net/

https://www.purrdata.net/

Congrats!

No problem for being blasé, we’re surrounded by highdef visuals and sounds. I understand it’s hard to scale back to minimal stuff. And yes the visuals are very dry because it’s actual music notation, everything you see is used to write the music, there is no decoration. The (live)code part is not visible on videos I shared because it happens within the web dev console, see https://peertube.swrs.net/videos/watch/5d84ea32-18d8-454d-b2...

It's creative indeed!

cool!

Reply on news.ycombinator.com