<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>