Shapes and Colours
Time 1.3 hrs

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

### Blurb

Shapes and Colours

### Outline

 Learner OutcomesStudents will: ... Competency Focus ... Interdisciplinary Connections ... ReflectionWhat was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used? ... CreditsAny CC attribution, thanks, credit, etc. Thumbnail Image by DavidRockDesign from Pixabay

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
Shapes
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
Lines
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?
Theory
• 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
• Feeling up for a challenge?
• Try the
5 mins
Colour Pickers
30 mins
Draw an Emoji
Evidence
• 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.

## Images

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