• Processing is a language for learning how to code.
• It's designed for creating graphics and visual arts.
• We can also use it to create basic games and puzzles.
• This animation was made with processing. Pretty cool stuff!
  
  

• The best way to learn processing is to dive in and get some hands-on experience.
• The following tutorial has a great introduction to processing, with videos and a live code editor.
• It will introduce you to basic drawing functions, colours, and interactivity.
• This tutorial takes about an hour to complete.
• Feel free to pause it along the way and play with the code as you go.

https://hello.processing.org/

• Every scene in p5js needs a setup() and a draw().
• These are built-in functions that run automatically when you hit play.
• Setup:
• Runs once at the beginning of your program.
• This is where you can initialize variables and objects like buttons.
• Draw:
• Runs once per frame. The standard frames per second is 60.
• This is where you can write code to draw shapes and text.

• The createCanvas(width, height) function determines how big of a scene you are creating.
• This function takes two parameters: the first is the canvas width, the second is the canvas height.
• Every scene should start with a createCanvas() in the setup() function.
• If your x or y coordinate are bigger than the canvas, your object could overlap outside the canvas.

• These are some of the shape functions you've learned about so-far:
• rect(x, y, width, height)
• ellipse(x, y, width, height)
• line(x1, y1, x2, y2)

• Explore some options to modify shapes, such as:
• fill(r, g, b)
• noFill()
• noStroke()
• stroke(r, g, b)
• strokeWeight(weight)

• p5.js has a great online editor: https://editor.p5js.org/
• This editor lets us code, save, and share our code without any extra setup.
• Take a moment to familiarize yourself with the editor.
• This will be the editor we use for all of our processing units.
• Be sure to login using the Login with Google option.
• The following video can walk you through every option in the editor (optional).

• Now that you've learned the basics of Processing, it's time to try your hand at making a scene from scratch.
• Create a new sketch in the p5js editor.
• Create a scene using basic shapes, lines and colours.
• Your scene could be abstract or something specific. It should have:
• A canvas.
• A background.
• Several shapes of different sizes.
• You can find more colours by using a Colour Picker (copy the RGB value).
• Be sure to login and save your progress as you go!
• Once your drawing is complete, use the Share option to share a link as evidence of your learning in this unit.