Lesson 25 of 26 · about 15 min
Drawing and plotting
A canvas is a grid of pixels with (0, 0) at the top-left. Shapes, loops and a little math turn numbers into pictures and data into charts.
🧭 What you need first: Grids and images
A screen is a giant sheet of graph paper, and every square is a pixel. To draw, you tell the computer where (coordinates) and what (a shape and a color).
One surprise: on screens, the y-axis is upside down compared to math class. (0, 0) is the top-left corner, and y gets bigger as you go down, just like reading a page from top to bottom.
Combine shapes with loops and you get patterns: a row of 10 circles is one line of code inside a loop. Combine them with data and you get charts, which is how scientists, businesses and journalists spot patterns no table of numbers would reveal.
Another way: a street address
“3rd avenue, 5th street” pinpoints a corner in a grid city. (x, y) does the same for a pixel: how far across, then how far down.
Another way: reading a page
You read from the top-left corner, across to the right, then down a line. Screen coordinates follow that same order, so y grows downward.
Draw with code
Run it, then experiment: move the sun, change colors, make more stars with the loop.
The real words
- Pixels are the tiny squares of a screen. The canvas here is
WIDTH= 400 byHEIGHT= 300 pixels. - Screen coordinates:
(x, y)measures x pixels from the left and y pixels from the top. - Shapes are drawn in order, so later shapes cover earlier ones, like painting layers.
- Colors can be names (
"gold") or hex codes like"#f97316", the red-green-blue notation from F01. - Patterns come from loops: change the position by a fixed step each round (
x = 30 + i * 30). - Plotting data:
plot(xs, ys)draws a line through points;bar_chart(labels, values)compares amounts. Real-world Python uses a library called matplotlib for this, with the same ideas. - Pick the chart for the question: line charts show change over time, bar charts compare categories.
Draw a house
Draw a house: a rectangle for the walls, a triangle roof (polygon with 3 points) sitting on top, and a door. Use at least 2 rectangles and 1 polygon.
Plot how things grow
Remember lesson 24? Let’s see the difference between n, n log n and n².
Make xs = the numbers 1 to 20. Plot ys = x * x for each x (in red), then plot ys = 2 * x (in blue) on the same canvas, with labels.
Notice that each plot scales to fit, so compare the numbers on the axis: x² reaches 400 while 2x only reaches 40.
On a 400 × 300 canvas, where is the point (0, 300)?
Got it?
Finish the lesson to color it in on your map and collect its concept cards.
Did this lesson click?