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 () {
const UPDATERATE = 1000.0 / 60.0 // 60fps
let frameCount = 0
let lastTime = -1
const can = document.getElementById('canvas') // EDIT name of canvas to draw to
function draw () {
const currTime = Date.now()
if (currTime >= (lastTime + UPDATERATE)) {
lastTime = currTime
const bottom = can.getBoundingClientRect().bottom
if (bottom >= 0 && bottom <= (innerHeight + can.height)) { // only draw when visible in browser
const 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()
const 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 += 1
}
}
window.requestAnimationFrame(draw)
}
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));
var frameCount= 0;
usr.background= Color.black;
usr.drawFunc= {
var theta= sin(frameCount*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));
};
};
frameCount= frameCount+1;
};
CmdPeriod.doOnce({win.close});
win.front;
Routine({
var nextTime;
while({win.isClosed.not}, {
nextTime= Main.elapsedTime+(1/60);
usr.refresh;
(nextTime-Main.elapsedTime).max(0.001).wait;
});
}).play(AppClock);
)
Updates:
- 200914: ported to Rust nannou /software/nannou/spiral/