Shapes and Colours
Time 1.3 hrs

Difficulty Beginner
Prerequisites Processing
Departments Science
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None


Shapes and Colours


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.
Basics of Drawing
Getting Started
  • Want to draw more than just rectangles and circles?
  • In this unit, we'll extend what you've already learned about Processing to learn more complex shapes and RGB colours.
5 mins
Coordinate System
Getting Started
  • Everything you draw in Processing exists on an x, y grid.
  • The top corner is 0,0 and the bottom corner is the width, height of your canvas.

  • You can learn more about the coordinate system here.
10 mins
Hands On
  • Shapes like rect, square, and triangle are drawn from the top-left corner first.
  • For example, this is simple rectangle:

  • Shapes such as ellipse and circle draw from the centre outwards (by default).

10 mins
Hands On
  • Lines are drawn with four parameters: line(x1, y1, x2, y2)
  • A line consists of two points:
    • x1, y1 is the x,y coordinate of the first point.
    • x2, y2 is the x,y coordinate of the second point.

  • Edit the coordinates of the line below and see how it changes:

  • Lines can have different colours. This is called the stroke.
  • Lines can also have different thicknesses. This is the weight.
  • Changing stoke and weight is like picking up a different marker.
  • The colour and thickness will remain the same until the next time you change it.

10 mins
What is RGB?
  • RGB stands for Red, Green, Blue.
  • Colours in Processing are represented by three numbers: color(255, 204, 0);
    • Each number starts at 0 which is black.
    • Each number can go up to 255 which is white.
    • RGB is additive, which means the more colour you add, the lighter the colour gets.

  • Edit the background colour in the sketch below and see how the colour changes.

  • But, why RGB and not Red, Yellow, Blue?
    • The colour on your screen is part of the light spectrum.
    • Each pixel on an LED screen is actually make up of three tiny lights:
      One red, one green, one blue.
    • To create a colour, each tiny light shines at a different level.

10 mins
RGB Challenge
Hands On
5 mins
Colour Pickers
30 mins
Draw an Emoji
  • Draw an emoji using the p5js editor (be sure to save your sketch as you go!)
  • Pick an emoji to draw, or create an emoji of your own.
  • On a Mac you can find the character viewer under Edit > Emoji & Symbols:
  • Draw your emoji using a variety of shapes and colours.
  • You're welcome to grab some graphing paper and sketch out your drawing first.
  • Feel free to add a background and a scene around the emoji.
  • Once your drawing is complete, share a link to your sketch 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