function draw() {
  background(220);
  /* center element by setting x value to half the width of the canvas and the y value as half the height of canvas */
  circle(width/2,height/2,100)
}

function keyReleased() {
// save canvas as processing-image.png when the 's' key is pressed
  if (key == "s" || key == "S") saveCanvas(`processing-image`, "png");
}

/* Function calls to random() always returns the same function when randomSeed() has the same seed parameter.
Instead of the default behavior where random seed paramater changing each time the draw() function is called, 
i.e, 60x a minute it'll only be called when mousePressed() or keyPressed() */

let actRandomSeed;

function setup() {
  createCanvas(500, 500);
  actRandomSeed = int(random(0,4))
  
}

function draw() {
  clear();
  background("#f8eeff");
  // comment out the next line to see how the random values change automatically without clicking or pressing any keys.
 randomSeed(actRandomSeed);
 
  textSize(40);
// display integer between 0,4 based on pseudorandom output from random()
  text(int(random(0,4)), width/2, height/2);
}



function mousePressed() {
  // change randomSeed on mouse press
  actRandomSeed = random(100000);
}

function keyPressed() {
  // change randomSeed on press of any key
  actRandomSeed = random(100000);
}