Time 2 hrs
Prerequisites What is Code?
Authors Sandra Kuipers
Minimum Year Group None
Processing is the art of drawing computer graphics through code. In this unit you'll start writing code that controls the pixels on your screen.
This work is shared under the following license: Creative Commons BY-SA-NC
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
Any CC attribution, thanks, credit, etc.
This page requires you to be logged in to access it. Please login and try again.
What is Processing?
- 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.
Setup & Draw
- Every scene in p5js needs a setup() and a draw().
- These are built-in functions that run automatically when you hit play.
- Runs once at the beginning of your program.
- This is where you can initialize variables and objects like buttons.
- 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:
- Explore some options to modify shapes, such as:
The p5.js Editor
- 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).
Your First Drawing
- 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.
- p5js editor
- createCanvas(width, height)
- ellipse(x, y, width, height)
- fill(r, g, b)
- line(x1, y1, x2, y2)
- rect(x, y, width, height)
- stroke(r, g, b)
- Colour Picker
There are no records to display.