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

Basics of Drawing
Getting Started
• Want to draw more than just rectangles and circles?
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.

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.

## Images

There are no records to display.