Shapes and Colours
Time 1.3 hrs
Authors Sandra Kuipers
Minimum Year Group None
Shapes and Colours
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
- 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.
- 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.
- Lines are drawn with four parameters:
line(x1, y1, x2, y2)
- A line consists of two points:
- 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.
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.
- Feeling up for a challenge?
- Try the RGB Guessing Challenge
- 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.
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.
- RGB Guessing Challenge
- p5js editor
- light spectrum
- HTML Color Codes
- coordinate system here
- Google Colour Picker
There are no records to display.