let x = 0;

let y = 0;

let x_s = 0;

let y_s = 0;

let mic;

let speechRec;

​

function showResult()

{

  console.log(speechRec.resultString); // log the result

}

​

function setup() {

  createCanvas(400, 400);

  background(240);

  noStroke();

  x = random(0, width);

  y = random(0, height);

  x_s = random(-5, 5);

  y_s = random(-5, 5);

  mic = new p5.AudioIn();

  mic.start();

  rectMode(CENTER);

  speechRec = new p5.SpeechRec(); 

  speechRec.continuous = true;

  speechRec.onResult = showResult; 

  speechRec.start(); 

}

​

function draw() {

  const micLevel = mic.getLevel();

  // could try using HSB colors.

  const redVal = map(x, 0, width, 0, 255);

  const greenVal = map(y, 0, height, 0, 255);

  // fill(redVal, greenVal, 255);

  // ellipse(mouseX, mouseY, 50, 50);

  stroke(redVal, greenVal, 255, 100);

  // const rotation = map(mouseY, 0, height, 0, TWO_PI);

  // rotate rotates the AXES

  translate(x, y);

  rotate(rotation);

  line(-100, 0, 100, 0);

  // rect(0, 0, 50, 50);

  x += x_s;

  const noiseScale = 0.1;

  if (micLevel > 0.1) {

    rotation = TWO_PI*noise(x*noiseScale,y*noiseScale);

    y += y_s;  

  }

  if (x < 0 || x > width) {

     x_s = -x_s;

  }

  if (y < 0 || y > height) {

    y_s = -y_s; 

  }

}