<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

my_awesome_variable = 100
my_awesome_boolean = false

function setup(){
createCanvas(350,310)
background(255);
rectMode(CENTER)
noStroke()
}


function draw() {
  background(0, 0, 100, 10);
  square(width/2, height/2, my_awesome_variable)
  
  if(my_awesome_boolean === true){
    my_awesome_variable++
  }
}

function mouseClicked(){
  if(mouseX > 125 && mouseX < 225 &&
     mouseY > 105 && mouseY < 205){
  my_awesome_boolean = true
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.