//on MakeUseOf.com about basic p5.js usage.

//You'll need a working mic, and to alow it to talk to your browser!

//-----------------------------------

//use your microphone to change the size of the robot's eyes

//and teeth. Click the mouse to change the color!

//-----------------------------------

​

​

//Creating variables for the RGB colors and the microphone

var r, g, b;

var mic;

​

function setup() {

  createCanvas(500, 500);

  //initial RGB values

  r = 255;

  g = 0;

  b = 0;

  //setting the stroke weight

  strokeWeight(5);

  //assinging the mic variable to the AudioIn method and starting it

  mic = new p5.AudioIn();

  mic.start();

}

​

function draw() {

  //at the start of each loop, update the micLevel variable

  var micLevel = mic.getLevel();

  //also update the background

  background(0);

  fill(255);

  text("CLICK OR SPEAK", 390, 15);

  //assign the fill color for everthing except the pupils, and draw them

  fill(r, g, b);

  ellipse(150, 150, 50 + micLevel * 2000);

  ellipse(350, 150, 100 + micLevel * 2000);

  rect(0, 500, 100, -100 - micLevel * 5000);

  rect(400, 500, 100, -100 - micLevel * 5000);

  rect(100, 500, 100, -100 - micLevel * 3000);

  rect(300, 500, 100, -100 - micLevel * 3000);

  rect(200, 500, 100, -100 - micLevel * 1000);

  //change fill value for the pupils, and draw them

  fill(255);

  ellipse(150, 150, micLevel * 1000 + 20);

  ellipse(345, 150, micLevel * 1000 + 30);

}

​

//use the mousePressed function to assign random color values on a mouse click

function mousePressed() {

  r = random(256);

  g = random(256);

  b = random(256);

}