Computer Science
Grade 9
20 min
Creating Pictures
Creating Pictures
What you'll learn
- Identify at least three different types of events (e.g., click, keypress, mouseover) commonly used in programming environments and describe how they trigger actions.
- Explain, using code examples, the relationship between event listeners, event handlers, and the code that executes in response to an event.
- Apply event handling techniques in a block-based programming environment to create a simple interactive program with at least two different events triggering distinct actions.
- Solve a debugging problem involving event handling by identifying the incorrect event listener or handler in a given code snippet and correcting it to achieve the intended program behavior.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Explain how digital images are represented using pixels and a coordinate system.
Define the RGB color model and apply specific color values to shapes.
Write code to draw primitive shapes like rectangles, ellipses, and lines on a digital canvas.
Control the position and size of shapes using coordinate parameters.
Combine multiple shapes in the correct order to create a composite picture (e.g., a simple character or scene).
Use variables to manage properties like position, size, and color, making their code more readable and easier to modify.
Ever wondered how video game characters or app icons are drawn by a computer? 👾 Let's learn how to command the pixels and create art with code!
In this lesson, you'll learn the fundamental principles of cre...
2
Key Concepts & Vocabulary
TermDefinitionExample
PixelThe smallest controllable element of a picture on a screen. Think of it as a single, tiny square of color that makes up a larger image.A 1920x1080 screen is a grid made of 1,920 columns and 1,080 rows of these tiny pixel dots.
CanvasThe digital drawing area or screen where you create your picture. It has a specific width and height measured in pixels.Creating a `createCanvas(400, 400)` gives you a square area that is 400 pixels wide and 400 pixels tall to draw in.
Coordinate SystemA grid system used to specify locations on the canvas. In most computer graphics, the point (0, 0) is at the top-left corner, with X increasing to the right and Y increasing downwards.The point `(50, 100)` is 50 pixels from the left edge and 100 pixels down from the top edge.
RGB Color...
3
Core Syntax & Patterns
Shape Drawing Syntax
shapeName(x, y, width, height);
To draw a shape, you call its function with arguments that define its position and size. The `x` and `y` coordinates typically define the top-left corner (for a rectangle) or the center (for an ellipse).
Color Setting Syntax
fill(r, g, b);
stroke(r, g, b);
Before drawing a shape, you must call color functions to set its properties. `fill()` sets the interior color, and `stroke()` sets the outline color. These settings apply to all subsequent shapes drawn until they are changed again.
The Painter's Algorithm
Shapes are drawn in the order they appear in the code.
Just like painting on a canvas, shapes drawn later will appear on top of shapes drawn earlier. To create layers, you must draw the background elements...
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
You need to draw a 50x50 square perfectly centered on a 500x500 canvas. What are the correct `x` and `y` starting coordinates for the square's top-left corner?
A.x = 500, y = 500
B.x = 250, y = 250
C.x = 225, y = 225
D.x = 200, y = 200
Challenging
You see a final image of a large blue circle partially covered by a smaller red square. Which code snippet MUST be true to have produced this image?
A.The `rect()` command came after the `ellipse()` command.
B.The `fill()` for red came after the `fill()` for blue.
C.The `ellipse()` command came after the `rect()` command.
D.The `background()` command was the last line of code.
Challenging
A programmer wants to draw a target symbol: a large red circle, with a smaller white circle inside, and an even smaller red circle in the very center. All circles share the same center point. What is the correct drawing order?
A.Smallest red circle, white circle, largest red circle.
B.White circle, largest red circle, smallest red circle.
C.Largest red circle, white circle, smallest red circle.
D.Smallest red circle, largest red circle, white circle.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing FreeMore from Digital Art and Design
Computer Science for other grades
Frequently asked questions
What grade level is "Creating Pictures"?
Creating Pictures is a Grade 9 Computer Science lesson on ExcelOS.
What will I learn in Creating Pictures?
You'll be able to: Identify at least three different types of events (e.g., click, keypress, mouseover) commonly used in programming environments and describe how they trigger actions; Explain, using code examples, the relationship between event….
Is "Creating Pictures" free to practice?
Yes. You can read the tutorial preview for free, and signing up for a free ExcelOS account unlocks the full tutorial and all practice questions with instant feedback.
How many practice questions are included with Creating Pictures?
This lesson includes 27 practice questions across multiple difficulty levels, each with instant feedback and explanations.