I was putting together a flowchart for a class, and thought wouldn’t it be nice to make it interactive?
p.s. Make sure you turn down your speakers before clicking to start!!
1 Like
Looks super cool!
tarmo
Kontakt Rory Walsh via The Csound Community (<noreply@forum.csound.com>) kirjutas kuupäeval R, 22. jaanuar 2021 kell 19:31:
yes wonderful — would you share the source code, rory?
Of course. Here you go. And in case you are interesting, here is a basic Csound/p5js starting template that I use for most of my Csound based sketches.
The easier way to do this would be to simply add the flowchart image and overlay the controls on top. But I find I have much better control over resizing when I draw the actual image. It’s just a pity that p5.js doesn’t support SVG images. That would really be nice.
[edit] I should mention that p5js can actually load SVG files as image, but they get converted to PNGs and then placed on the canvas, which means they suffer from the same resizing issues as PNGs.
[edit 2] of course it would probably be easier to just use SVG rather than the html canvas. I must take a look.
Whoa, as someone relatively new to Csound and GUIs, this p5js stuff is blowing my mind. This is built with the WASM Csound code, is that right? Where can I find the latest repository of that code, and is there documentation for that code? Looking at the source code, you’re using CabbageRotarySlider objects. Are all the Cabbage widgets available through the WASM code?
Thanks,
Jason
Correct 
Go to the Csound downloads page and download the web package. You will need to use a liver server of some sort if you wish to run things locally. I use VS Code and its live server extension for this. but mostly these days I just use the p5js editor, reply, codepen, etc. Just grab the script link in the index.html file and you’re up and running.
No, I just wrote a simple rotary slider class myself that will take parameters in the way as Cabbage. I was meaning to add a parser for Cabbage code but never got around to it. I think I wrote a keyboard widget too that sends score events when pressed.
p5js and Csound is a laugh. I wrote this silly game in a few hours over the Christmas break. The music makes heavy use of JS arrays to fill tables and shuffle things. It’s really nice because you can do so much more with a JS array than you can with arrays in Csound.
@joachim, this example is far less convoluted than the last one:
I created an SVG using https://app.diagrams.net/https://app.diagrams.net/. I then added it to the page using SVG.js, and I draw the number boxes on top of that uses p5js. Thanks to @stevenyi for helping me figure out how to place my p5js sketch on top of the SVG element.
It would be nice to parse the SVG for a text label suh as “slider:freq” and then automatically replace it with a slider. SVG.js give one the option of parsing SVG elements, so it shouldn’t be that tricky.
I find it pretty neat. Here is the source code.
Amazing, thanks for pointing me in the right direction for Web Csound and p5js! Can’t wait to experiment with these things.
I’ve been looking into p5.js and wondering what p5.js features can be used with Csound as the audio engine. From looking at your example code, Rory, I see how p5.js can be used to play Csound instruments and send control signals to Csound, which is awesome. I imagine Csound can also send messages out to p5.js, and p5.js could then respond to those in various ways.
How about the fancy audio visualizations that come out of the box with p5.js, such as the p5.Amplitude and p5.FFT objects? It looks like these objects only work with audio produced by other p5.Sound objects, not audio produced by Csound. Is that correct, or is there a way to use these p5.js objects to listen to and visualize the audio produced by Csound? If not, would the answer be to send information such as the RMS value from Csound to p5.js and then write p5.js functions for how to visualize the information?
Just trying to wrap my head around this exciting stuff and get a sense for what’s possible.
Thanks!
Jason
I think it should be possible to hook Csound up to those p5.Sound object. The Csound object has a getNode() method, so I’m assuming you can somehow work with that, although I could be totally wrong, and I’ve never tried!
It’s definitely easy to trigger visual in p5js using channels. I’ve done this in the past without any problems.
[edit] a quick test and I see that you can’t connect Csound to the p5.Sound stuff because they both use a unique audio context. But I think there are some analysis tools included with Csound Web. I came across a scope node before somewhere. The Web-IDE guys will be able to give you more info about that.
We expose the audio node that wraps Csound processing via getNode() precisely for interacting with other webaudio nodes and projects. We use it to attach it to an AnalyzerNode to do the spectrum view in Web-IDE. I haven’t looked at p5.Sound but if it supports working with other webaudio nodes then you should be good to go. One thing to note is Csound auto-attaches itself to the audioContext.destination and you may have to disconnect when calling getNode() to insert it into a larger graph of processing.
The last Webaudio Csound build I did allows for passing in an AudioContext in initialize. The new version of WebAudio Csound that Hlodver and I have been working on also has the option to pass in an AudioContext.
Thanks Rory and Steven for your responses! That should give me enough to go off of. Looks like I need to dive into the Web Audio API to get a sense of the p5.Sound environment and how to integrate WebAudio Csound.
I would forget about p5.Sound and simply use Csound. This sketch doesn’t use any p5.Sound stuff, and it’s still just as simply to create an FFT. It also shows you how you can get channel data from Csound and pass it to p5js
Thanks very much for this demo, Rory! I’ve looked through the code and am starting to see how this all works. I really appreciate your guidance. Time to play around!