part8a.html

<!DOCTYPE html>
<html>
<title>Creative Coding Yea!</title>
<head>
    <meta charset="utf-8">

<script language="javascript" src="js/creative_coding.js"></script>
<script language="javascript" src="js/canvas.js"></script>

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />


</head>
<body>

<script>

var ctx = createCanvas("canvas1");
var number_of_balls = 5;
var balls = [];
// radius of our circle
var radius = 200;

// push a ball and it's values into the array
for (var i = 0; i < number_of_balls; i++) {
  addBall();
}


function addBall(){
  var ball = {
    x: 0,
    y: 0,
    speed: random(1),
    size: random(10, 50),
    colour: rgb(0),
    angle: random(360)
  }
  balls.push(ball);
}

function draw(){

  ctx.background(245, 1);
  moveBall();
  drawBall();
}


function moveBall(){

  for (var i = 0; i < balls.length; i++) {
    var b = balls[i];
    // move the angle to rotate the balls
    b.angle += b.speed;
    b.x = w/2 + Math.cos(radians(b.angle))*radius;
    b.y = h/2 + Math.sin(radians(b.angle))*radius;
  }

}


function drawBall(){
  for (var i = 0; i < balls.length; i++) {
    var b = balls[i];
    ctx.fillStyle = b.colour;
    ctx.fillEllipse(b.x, b.y, b.size);
  }
}


</script>

</body>

</html>