<html> <head> <meta charset="UTF-8"> <title>cirkler3</title> <script src="../libraries/p5.js" type="text/javascript"></script> <script src="../libraries/p5.dom.js" type="text/javascript"></script> <script src="../libraries/p5.sound.js" type="text/javascript"></script> <script> var t; var direction=1; var c; function setup() { c=createCanvas(600,600); background(0); stroke(255); t=0; direction=1; } function circle(a,b,c,d) { strokeWeight(d); for (var i=0; i<360; i+=20) { quad(b*cos(radians(i+a)),b*sin(radians(i+a)), b*cos(radians(i+10+a)),b*sin(radians(i+10+a)), c*cos(radians(i+10+a)),c*sin(radians(i+10+a)), c*cos(radians(i+a)),c*sin(radians(i+a)) ); } } function draw() { background(0); translate(width/2,height/2); for (var count=0; count<min(width,height)/8; count+=1.8) { circle(count+t,(t/100)*count,(t/100)*count,20*count/width+2); } t=t+1.5*direction; if (t>min(width,height) || t<0) { direction=-direction; } } </script> <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style> </head> <body> </body> </html>