This sketch is inspired by the drawings of Christine Sun Kim.

​

Here, we'll combine the P5JS drawing tool with user inputs to create a simple drawing tool. 

​

We'll also see how the background can be used for our drawing!

*/

​

function setup() { // this function runs once when the page loads

  createCanvas(windowWidth, windowHeight); // making the dimensions of the canvas take up the entire wind

  background(255,255,255); // making the background color white

} // end of the setup() function

​

/*

In these sections, we are making custom functions. Function allow us to design our own commands like fill() and ellipse().

​

To create a function, use this structure:

​

  function functionName() {

      // put your code here

  }

To use the function, write the name of the function followed by (). Like so:

​

  functionName()

*/

​

​

function noBG() { // start of function noBG

  noStroke();

  fill(0,0,0, 20);

  ellipse(mouseX, mouseY, 40, 40);

}

​

function withBG(){

  background(255,255,255);

  noStroke();

  fill(0,0,0, 20);

  ellipse(mouseX, mouseY, 40, 40);

} 

​

function draw() {

  //background(220);

  noBG();

  //withBG();

}

​

​

​

function mousePressed() {

  if(mouseButton === RIGHT) {

        save('my_drawing.png');

    }

}