//

// See the Web Serial version here:

// https://editor.p5js.org/jonfroehlich/sketches/5Knw4tN1d 

//

// By Jon E. Froehlich

// @jonfroehlich

// http://makeabilitylab.io/

//

​

let newShapeFrac = 0;

let pHtmlMsg;

function setup() {

  createCanvas(736, 380);

  pHtmlMsg = createP("Simple debug statements in an html p block")

  pHtmlMsg.style('color', 'deeppink');

}

​

function draw() {

  background(100);

  noStroke(); // turn off outline

  fill(250); // white circle

​

  // Get x,y center of drawing Canvas

  let xCenter = width / 2;

  let yCenter = height / 2;

​

  // Set the diameter based on mouse x position

  const maxDiameter = min(width, height);

  let shapeFraction = mouseX / width;

  let circleDiameter = maxDiameter * shapeFraction;

  circle(xCenter, yCenter, circleDiameter);

  pHtmlMsg.html("shapeFraction: " + shapeFraction);

}