Computer Science
Grade 9
20 min
Shapes and Colors
Shapes and Colors
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define and use a 2D coordinate system to position shapes on a digital canvas.
Write code to draw primitive shapes like rectangles, ellipses, and lines.
Explain and apply the RGB color model to set the fill and stroke of shapes.
Combine multiple shapes and colors to create a composite image, such as a simple house or a face.
Use variables to control the position, size, and color of shapes for easier modification.
Describe the importance of drawing order for layering shapes correctly.
Ever wondered how your favorite video game characters or app interfaces are drawn on screen? 🎨 It all starts with simple code that tells the computer how to draw basic shapes and colors!
In this lesson, you'll learn the fundamental programming concepts for creating digi...
2
Key Concepts & Vocabulary
TermDefinitionExample
CanvasThe digital drawing area or screen where all shapes are rendered. It has a specific width and height, measured in pixels.createCanvas(800, 600) sets up a drawing area that is 800 pixels wide and 600 pixels high.
Coordinate SystemA 2D grid used to determine the location of any point on the canvas. The origin (0, 0) is typically in the top-left corner, with the x-value increasing to the right and the y-value increasing downwards.A point at (50, 100) is 50 pixels from the left edge and 100 pixels from the top edge.
Primitive ShapesThe basic geometric shapes that a graphics system knows how to draw directly. These are the building blocks for more complex drawings.Common primitives include `rect()` for rectangles, `ellipse()` for circles and ovals, and `line()` for...
3
Core Syntax & Patterns
Shape Drawing Syntax
shapeName(x, y, size1, size2, ...)
Most shape functions require an (x, y) coordinate for positioning, followed by parameters for size. For example, `rect(x, y, width, height)` draws a rectangle at position (x, y) with a given width and height.
State-Based Color Setting
fill(r, g, b); stroke(r, g, b);
Color functions like `fill()` and `stroke()` are 'stateful'. You call them once, and all subsequent shapes will be drawn with those colors until you call the color functions again with new values.
Drawing Order (The Painter's Algorithm)
Code is executed top-to-bottom. Shapes drawn later appear on top of shapes drawn earlier.
To create layers, you must draw the background elements first, followed by the foreground elements. If you draw...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
To draw a 20x20 square perfectly in the center of a canvas of any size, defined by system variables `width` and `height`, which command should be used?
A.rect(width/2, height/2, 20, 20);
B.rect(width/2 - 10, height/2 - 10, 20, 20);
C.rect(width - 20, height - 20, 20, 20);
D.rect( (width-20)/2, (height-20)/2, 40, 40);
Challenging
A programmer uses these variables: `let x = 200; let y = 150; let diameter = 60;`. They draw a circle with `ellipse(x, y, diameter, diameter);`. How would they draw a square that is perfectly enclosed *inside* this circle, touching its edges?
Challenging
You want to create the illusion of a shadow for a blue square. The square is drawn with `fill(0,0,255); rect(100, 100, 50, 50);`. Which code, when placed *before* the square's code, would create a simple, offset gray shadow?
A.fill(0,0,255); rect(105, 105, 50, 50);
B.fill(128); rect(95, 95, 50, 50);
C.fill(128); rect(105, 105, 50, 50);
D.fill(128); rect(100, 100, 50, 50);
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free