// inside the sketches index.html file

// click the "<" icon above to be able to view

// this file

​

let circleColor = 255;

​

function setup() {

  // we can specify the id our canvas should go into

  // this gives us freedom to position it on the page

  let canvas = createCanvas(400, 400);

  canvas.parent('canvas-container');

​

  // select the element with id "invert", and tell

  // p5.js to call the invertCircle function (below)

  // whenever it gets clicked on

  select('#invert').mouseClicked(invertCircle);

}

​

function draw() {

  // select the element with id "color1", and get

  // its value (a number from 0 to 255)

  let color1 = select('#color1').value();

​

  background(color1);

​

  fill(circleColor);

  noStroke();

  ellipse(width/2, height/2, 200);

}

​

function invertCircle() {

  if (circleColor == 255) {

    circleColor = 0;

  } else {

    circleColor = 255;

  }

}

​