The other day I was trying to revive our Facebook groups “SuperColider Slovenija” and had some ideas to change the cover image. So I went and wrote everything in SuperCollider itself. Indeed, using music-making programming environment for (rudimentary) visuals. Below is the code and end result.
With the summer-time, a working-time on my new audio-visual piece, Interface Fractures III, begun. It is now almost confirmed that the date of premiere showing at Slovenian Cinemateque (Slovenska Kinoteka) is most probably 15/september. Since the plan was that we spend some quality sun&salt time at Croatian coast I brough some machinery with me to vacation. It’s always fun to work in the summer heat!
Anyway, with this next episode in the series I want to upgrade technically a “little bit”, so I acquired a better graphic card (Nvidia GTX960) and a multi-touch screen monitor with fullHD 1080p resolution. Adding also a 120GB SSD drive I needed to reinstall operating system (UbuntuStudio 14.4.1), separately compiled drivers for Nvidia and the rest worked pretty much out of the box (after some apt-get-ing). Multi-touch is application-dependent and my idea (for many years now) is to write custom interfaces for live sound/music/noise and visual composition and improvisation.
More technicalities: I compiled Processing and SuperCollider, tried a multi-touch library in Processing (SMT) but it didn’t work. Filed an issue at their GitHub and went on with a version of SuperCollider that supports multi-touch (I was kindly pushed in the right direction by Scott Cazan, who added MT support to his own branch of SC on GitHub). After some basic testing I wrote a simple granulator with a GUI. I also tested a very basic idea of TABs-like interface. In Processing I’ve whet my appetite with an excercise that focused on off-screen rendering and blending two images together.
These are very newbie baby steps in the construction of a something bigger, a powerful flexible interface for a touch-screen device. Novels are being written one word at the time, right?
The following is a snippet of code that I needed to write in order to test a TABs-like behaviour in SuperCollider QT GUI system. Essentially, I was curious if it’s possible to show and hide whole windows/areas of different widgets using a tabs-like paging system – something we’re all used to now from browsers, for example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
( // 2 tabs proof of concept, hiding and showing views ~gwin = Window.new("Test visibility", Rect(120, 420, 500, 200)); ~gwin.front; ~viewOne = View.new(~gwin, Rect(50,50,280,140)) .background_(Color.gray(0.4,1)) .visible_(0); Slider(~viewOne, Rect(5,50,20,50)); ~viewTwo = View.new(~gwin, Rect(50,50,280,140)) .background_(Color.gray(0.4,1)) .visible_(0); Slider2D(~viewTwo, Rect(20,20,100,100)); b = Button(~gwin, Rect(50, 10, 80, 35)) .states_([ ["one"], ["one", Color.white, Color.gray(0.4)] ]) .action_({arg butt; switch(butt.value, 0, { ~viewOne.visible = 0; postln("off") }, 1, { ~viewOne.visible = 1; postln("on"); b.enabled_(0); c.enabled_(1); ~viewTwo.visible = 0; c.valueAction = 0; } ); butt.value.postln; }); c = Button(~gwin, Rect(140, 10, 80, 35)) .states_([ ["two"], ["two", Color.white, Color.gray(0.4,1)] ]) .action_({arg butt; switch(butt.value, 0, { ~viewTwo.visible = 0; postln("off") }, 1, { ~viewTwo.visible = 1; postln("on"); c.enabled_(0); b.enabled_(1); ~viewOne.visible = 0; b.valueAction = 0; } ); butt.value.postln; }); ) |
An example and working ground for a granular synthesis system in SuperCollider with GUI for a fullHD touch-screen surface. There’s some things not yet working here (loading files from GUI for example), but it’s a milestone for one.
Here’s a little sketch in Processing that does the following: loads an image, takes a horizontal and vertical 1px slice, multiplies each slice into an image off-screen, and blends the two images together and displays the original and blended one side by side. Each frame this is calculated dynamicaly, the slices are determined by the position of the mouse.
Note: the image must be in the folder where your sketch is saved and it must be in dimension of 300×300 pixels.
I still need to test this in a fullHD/1080p situation. I wonder if the CPU can take it at 60 frames per second. I actually suspect not. So many pixels and not on the GPU.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/* * code by nova@deviator.si */ PImage slices1; PGraphics slices2; PGraphics slices3; void setup () { size(600, 300); // load an image (should be inside the sketch forlder) slices1 = loadImage("storr1.jpg"); slices2 = createGraphics(300, 300); slices3 = createGraphics(300, 300); } void draw() { // get mouse data int my = constrain(mouseY, 0, 299); int mx = constrain(mouseX, 0, 299); // get slices from original image and draw two images off-screen slices1.loadPixels(); for (int x = 0; x < 300; x++) { // get color/pixels data color cx = slices1.pixels[my * 300 + x]; color cy = slices1.pixels[x * 300 + mx]; // draw first image of slices off-screen slices2.beginDraw(); slices2.stroke(cx); slices2.line(x, 0, x, 300); slices2.endDraw(); // draw second image of slices off-screen slices3.beginDraw(); slices3.stroke(cy); slices3.line(0, x, 300, x); slices3.endDraw(); } slices1.updatePixels(); // display original image image(slices1, 0, 0); // draw transparent lines where the slices are taken stroke(255, 30); line(mx,0,mx,300); stroke(255, 30); line(0, my, 300, my); // blend the hor+ver images and display // see http://processing.org/reference/blend_.html // for more ways how to blend two images slices3.blend(slices2, 0, 0, 300, 300, 0, 0, 300, 300, OVERLAY); image(slices3, 300,0); } |
This morning I started to work on a granular machine in SuperCollider. This is what I got so far:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
// load buffers p = "/home/random/SAMPLES/ironmaiden/RENAMED/gentleandbass.wav"; b = Buffer.readChannel(s,p, channels:1); b.free; // SynthDef granulator ( SynthDef(\Granny, { arg bufnum, freq = 10, fvar = 1, dur = 0.1, durvar = 0 ; var signal; signal = GrainBuf.ar( numChannels: 2, // we want stereo! trigger: Impulse.kr(freq + (freq * (fvar * LFNoise2.kr(freq)))), // a UGen? dur: dur + (durvar * LFNoise2.kr(freq)), // in seconds sndbuf: bufnum, rate: LFNoise1.kr.range(0.98, 1.02), // pitch pos: SinOsc.kr(0.1).range(0.1,0.9), // position 0-1 interp: 2, // interpolation for pitchshifting pan: LFNoise1.kr(10).range(-0.2, 0.2), // if numChannels=2, similar to Pan2, -1 left, +1 right // envbunum: -1, // the buffer number cont. grain envelope maxGrains: 512, mul: 0.5, add: 0 ); Out.ar(0, signal); }).send(s) ) x = Synth(\Granny, [\bufnum, b]); x.set(\freq, 5); x.set(\fvar, 0); x.set(\dur, 0.2); x.set(\durvar, 0.2); |
Thinking that coding is the nerdy IT guy at work rebooting your computer is like thinking that music is what happens when the piano tuner comes round.
via You Can Already Code—You Just Don’t Know It Yet — Medium.
Certainly, we can introduce computer science without programming. Certainly, computer science is more than just programming. But computer science certainly includes programming, and programming is a critical part of the passion, beauty, joy, awe, and art of computer science. We have to engage with the hard part of broadening participation in computing, by introducing programming. We have to develop the design processes so we can figure out how to introduce programming to a broader audience; we have to develop performances that recruit and engage students; and we have to be free to change programming so that it is meaningful and has a chance to induce passion.
Mark Guzdial (Georgia Tech): Making Programming Meaningful to Induce Passion for Broadening Computing, Future Directions in CS Ed Summit.
