🖌️ Build a Drawing App

Do Now (in p5)

1. Make an shape (ellipse() or rect()) that follows your mouse.
2. Before your shape, add this line:

if (mouseIsPressed)

What happened? Why do you think that’s happening?

Conditionals

if…then…

In p5, conditionals look a lot like JavaScript:

if (mouseIsPressed) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }

Check: What do you think pmouseX and pmouseY are?

Drawing in Multiple Colors

To use the keyboard to interact with my sketch, I need to add a new function. So far, we’ve seen function setup() which is called when the program starts, and function draw() which runs on loop, forever.

Now, we need function keyTyped(), which is called every time a key is pressed.

function keyTyped() {
  if (key === 'b') {
    strokeColor = 'black';
  } else if (key === 'p') {
    strokeColor = '#E32173';
    weight = 10
  }
}

The variable strokeColor is used inside my function keyTyped(), and I am also going to use it inside my function Draw(). that means I need to define it outside of both of those function. I can do this at the top of my code:

var weight = 10
var strokeColor = "black"

This is called initializing a variable– giving it an initial or starting value, which we will then change.

Drawing App

Push yourself for a 4!

🎂 Draw me a birthday card!
🌈 Let the user choose colors using the keyboard. For example, if they press b, they start drawing in blue.
⌫ Let the user erase part of their drawing. There are a lot of ways to do this!
💃🏼 Have fun!