Time 2 hrs

Difficulty Beginner
Prerequisites What is Code?
Departments Science
Authors Sandra Kuipers
Groupings Individual
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


Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
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.
5 mins
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!

60 mins
Hello Processing!
Hands On
  • 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.

5 mins
Setup & Draw
Digging In
  • 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.
5 mins
The Canvas
Digging In
  • 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.

5 mins
Digging In
10 mins
The p5.js Editor
Digging In
  • p5.js has a great online editor:
  • 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).

30 mins
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.

There are no records to display.
Powered by Gibbon v27.0.00dev

Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
Created under the GNU GPL | Credits | Translators | Support