part11.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>
<!-- <script language="javascript" src="js/mircophone.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 balls = [];

var grid_w = 10;
var grid_h = 1;
var number_of_balls = grid_w * grid_h;

var grid = new Grid(grid_w, grid_h,200,100, w/2);

console.log(grid);

// push a ball and it's values into the array
for (var i = 0; i < number_of_balls; i++) {
  addBall(grid.x[i], grid.y[i]);
}


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

function draw(){
  ctx.background(255, 0.1);
  moveBall();
  drawBall();
}


function moveBall(){

  for (var i = 0; i < balls.length; i++) {
    var b = balls[i];
    b.angle += b.speed_x;
    b.rotation += 2;
    b.y = h/2 + Math.cos(radians(b.angle))*h/2;
    // if(Microphone.input.length > 0) b.size = tween(b.size , mapSound(Microphone.input, i, balls.length), 5);
  }

}


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>