programmering:yinyang1-js-code

<!DOCTYPE html>
<HTML>
<HEAD><meta charset="utf-8"></HEAD>
<BODY>

<canvas id="screen" style="border:0px solid #000000;" width="640" height="640">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>

  function rand(n) {
    return Math.floor((Math.random()*n));
  }

  var canvas=document.getElementById("screen");
  var ctx=canvas.getContext("2d");
  var width=canvas.width;
  var height=canvas.height;
  var centerX=width/2;
  var centerY=height/2;
  var radius=width/2;

  var angle=0;
  var direction=1;
  var speed=1;
  var v=setInterval(rotate,25);

function drawLeftPart() {
  ctx.beginPath();
  ctx.linewidth=5;
  ctx.strokeStyle="black";

  // big circle left-half
  ctx.arc(centerX,centerY,radius,Math.PI/2,3*Math.PI/2,false);

  //lower half-circle
  ctx.arc(centerX,3*centerY/2,radius/2-1,3*Math.PI/2,Math.PI/2,true);

  //upper half-circle
  ctx.arc(centerX,centerY/2,radius/2,3*Math.PI/2,Math.PI/2,false);
  ctx.closePath();
  ctx.fillStyle="black";
  ctx.fill();
}

function drawRightPart() {
  ctx.beginPath();
  ctx.arc(centerX,centerY,radius,Math.PI/2,3*Math.PI/2,true);
  ctx.stroke();
}


function drawBlackEye() {
  // black eye
  ctx.beginPath();
  ctx.arc(centerX,3*centerY/2,radius/10,0,Math.PI*2,false);
  ctx.closePath();
  ctx.fill();
}

function drawWhiteEye() {
  // white eye
  ctx.beginPath();
  ctx.arc(centerX,centerY/2,radius/10,0,Math.PI*2,false);
  ctx.fillStyle="white";
  ctx.closePath();
  ctx.fill();
}

function yinyang() {
	drawLeftPart();
	drawRightPart();
	drawBlackEye();
	drawWhiteEye();
}

function rotate() {
	angle+=speed*0.02*direction;
	ctx.clearRect(0,0,width,height);
	ctx.save();
	ctx.translate(centerX, centerY);
        ctx.rotate(angle);
	ctx.translate(-centerX, -centerY);
	yinyang();
        ctx.restore();
	if (rand(200)==5) {
	  direction=-direction;
	  speed=rand(5)+1;
	}
	if (rand(50)==5) {
	  speed+=2;
	}
}
</script>

</BODY>
</HTML>