Spiral
2015-12-29 00:30
supercollider,
visuals
Just some hypnotic graphics...
The JavaScript code above is this...
<div style="background-color:black;">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
(function() {
let frameCount= 0;
let can= document.getElementById('canvas'); //EDIT name of canvas to draw to
function draw() {
let bottom= can.getBoundingClientRect().bottom;
if(bottom>=0 && bottom<=(innerHeight+can.height)) { //only draw when visible in browser
let ctx= can.getContext('2d');
ctx.fillStyle= '#000';
ctx.fillRect(0, 0, can.width, can.height);
ctx.save();
ctx.translate(can.width*0.5, can.height*0.5);
ctx.fillStyle= '#FFF';
ctx.beginPath();
let theta= Math.sin(frameCount*0.001)*Math.PI*2*4;
for(let y= 0; y<can.height; y++) {
for(let i= 0; i<10; i++) {
ctx.rotate(theta*0.001);
ctx.fillRect((Math.sin(y*0.1+theta+(i*2))*100), y, 2, 2);
}
}
ctx.restore();
frameCount= frameCount+1;
}
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
})();
</script>
</div>
Originally this was a quick sketch made in Processing...
//spiral.pde - processing
void setup() {
size(800, 600);
noStroke();
}
void draw() {
background(0);
translate(width*0.5, height*0.5);
float theta= sin(frameCount*0.001)*TWO_PI*4;
for(int y= 0; y<height; y++) {
for(int i= 0; i<10; i++) {
rotate(theta*0.001);
rect((sin(y*0.1+theta+(i*2))*100), y, 2, 2);
}
}
}
And then ported to SuperCollider...
//spiral.scd - supercollider
(
var width= 800, height= 600;
var win= Window("spiral", Rect(100, 100, width, height), false);
var usr= UserView(win, Rect(0, 0, width, height));
usr.background= Color.black;
usr.animate= true;
usr.drawFunc= {
var theta= sin(usr.frame*0.001)*2pi*4;
Pen.fillColor= Color.white;
Pen.translate(width*0.5, height*0.5);
height.do{|y|
10.do{|i|
Pen.rotate(theta*0.001);
Pen.fillRect(Rect(sin(y*0.1+theta+(i*2))*100, y, 2, 2));
};
};
};
CmdPeriod.doOnce({win.close});
win.front;
)
Updates:
- 200914: ported to Rust nannou /software/nannou/spiral/