Shapes and Colours
Time
1.3 hrs
Difficulty
Module 2
Prerequisites
Processing
Departments
Career & Technology Studies
Authors
Sandra Kuipers
Groupings
Individual
Minimum Year Group
None
Blurb
Shapes and Colours
Outline
| Learner Outcomes Students will:
|
|
Competency Focus
|
Interdisciplinary Connections
|
| Reflection What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
|
|
| Credits 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
Shapes
Hands On
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.
5 mins
Colour Pickers
- Creating RGB colours by hand is tough!
- Luckily there's lots of great colour pickers out there.
- HTML Color Codes - Lots of options and complimentary colours.
- Google Colour Picker - Easy to use.
- Colordot - A colour picker for humans
- RGBColorCode - Lots of pre-defined colours.
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.
Links
- RGB Guessing Challenge
- Colordot
- p5js editor
- light spectrum
- RGB
- HTML Color Codes
- circle
- ellipse
- Lines
- rect
- square
- coordinate system here
- RGBColorCode
- Google Colour Picker
- triangle
Images
There are no records to display.
Records
1-2 of
2
| Unit | Students |
|---|---|
 |
Sofia Shared on 01/12/2020 |
 |
Jeya Shared on 15/10/2020 |
