Your First Processing Program: Drawing App

In this lesson, you will learn how to:

• Use variables to store and access data.
• Use functions to store and execute instructions.
• Use comments to add notes to your code.

Getting Started

Visit and fork https://replit.com/@buckldav/DrawingAppStarter to get started.

Below is a preview of the drawing app starter. Click and drag the mouse to draw using a red brush.

Variables: Storing Data

A variable is a label for stored data. Data could be text, numbers, or more complex objects like HTML elements.

Creating Variables with let

To make a variable, start the statement (line of code) with the keyword let, followed by a variable name. Then assign a value to the variable by using the assignment operator (=).

Let’s create two variables at the top of our program. fillColor will store the color that we’re using to fill our ellipse and brushSize will store the size of the brush.

// This is a comment (words for the humans, not the computer).
// Here are our variable declarations.
let fillColor = "red"
let brushSize = 25

function setup() {
  createCanvas(windowWidth, windowHeight)
  background(255)
}

function draw() {
  noStroke()
  // Use the fillColor variable here.
  fill(fillColor)
  if (mouseIsPressed) {
    // Use the brushSize variable here.
    ellipse(mouseX, mouseY, brushSize, brushSize)
  }
}

Naming Variables: camelCase

Variables and other identifiers cannot have spaces or symbols in them. Therefore, naming conventions like camelCase are used for names that contain multiple words. Name the variable all lowercase, except for the first letter of each word (not counting the first). Example: aReallyLongVariableName.

Visualizing Variables: Boxes

You can think of variables like labels on boxes in your computer’s memory. In the below version of the drawing app, each of the variables (including the built-in mouseIsPressed, mouseX, and mouseY variables) are shown on the canvas with their current value displayed in a box.

Challenge

Visit Google’s Color Picker and copy a HEX code. Try storing it in your fillColor variable. Put quotes around the HEX string (e.g. "#8634eb").

Functions: Storing Instructions

A function is a label for a group of instructions. We’ve already used a several functions in this lesson; setup(), draw(), fill(color), ellipse(x, y, width, height) etc. A function has a name, ends with (), and can take in 0 or more parameters (inputs) within those parentheses.

zeroParameters()
oneParameter(p1)
twoParameters(p1, p2)
...

Defining Functions

Here is an example that defines a function that adds two numbers together and prints them.

function add(x, y) {
  let sum = x + y
  console.log(sum)
}

Calling Functions

Once you have defined the function, you can call (use) it as many times as you’d like. Each time you call the function, the instructions defined between the {} are executed.

add(2, 2)
add(3, 4)
add(-1, -2)

4
7
-3

Outputting From Functions: return

We previously established that you can input data into functions with parameters. To output data that you can use later, use return at the end of your function. In the visual explanation below, a function can take in inputs (parameters), do some processing, and return an output.

function add(x, y) {
  const sum = x + y
  console.log(sum)
  return sum
}

let result = add(2, 2)
result = add(result, -4)
console.log("The final result is:", result)

4
0
The final result is: 0

Processing’s Functions

Processing has a few built-in functions.

• setup() gets called once when the program starts.
• draw() gets called every frame. By default the program runs at 30 frames per second.
• keyPressed() gets called when a key is pressed. We’re going to add it to our program to enable us to change the brush color and size with the keyboard.

// setup() and draw() functions here

function keyPressed() {
  // Change color
  if (key === "r") {
    fillColor = "red"
  } else if (key === "g") {
    fillColor = "green"
  } else if (key === "b") {
    fillColor = "blue"
  }
  // Add some more colors yourself

  // Change brush size
  if (key === "=") {
    brushSize += 1
  } else if (key === "-") {
    brushSize -= 1
  }
}

Challenge

Add more colors to your palette by adding more else if statements to your keyPressed() function definition.

Comments: Document Your Code

Comments are notes for the people reading the code. They are any line that begins with two slashes //. The computer does not read them when it executes the program.

Comments are important so that when you read code for the first time or revisit code, you can quickly understand what it does.

Challenge

Typically, a few comments per function are sufficient, but as an exercise, go through your entire program and comment each line. Example:

// Store "red" as the initial value of fillColor
let fillColor = "red"
// Store 25 as the initial brushSize
let brushSize = 25

// etc.

Finished Code

Here’s a link to the final code (minus comments).