Computer Graphics – starting from Scratch                 Adrian Oldknow        10.9.2022

In this series of short blogs, we’ll explore how we can get Scratch to draw shapes with a `pen’.  We have first to load a new `Extension’ using the blue tab at the bottom left of the screen. This will show several new extensions.  Select the `Pen’ option.  This adds a new menu called `Pen’ and a group of green blocks as shown.  As we move Scratch around, we can draw with the `pen’.

 The Coordinates Wiki tells us that: “The screen is a 480x360 rectangle with the origin in the centre.”  To get the feel of working with coordinates, we’ll start by building a program to show the axes.  Most of our programs will start with same three blocks.  To start with a clean screen, we use `erase all’ from `Pen’.  We won’t be needing a visible sprite, so we use `hide’ from `Looks’.  We don’t want to start drawing just yet, so use `pen up’ from `Pen’.  We can move to the left end of the x-axis at (-240,0) using `go to’.  Use `pen down’ before using `go to x 240 y 0’ to draw the x-axis, and use `pen up’ before moving to draw the y-axis starting at (0,-180) and ending at (0,180).  The point at the middle, where the axes cross, has the coordinates (0,0) and is called the `origin’.  

To make life easier I will save my files in Scratch and give you links from where you can download them.  Let’s see how this works.  First, you have to select `Join Scratch’ from the top right in order to register your username and password.  Then you can use it to `Sign in’.  When you have written and tested a program, you can save it and also publish it.  The tools are in the blue bar at the top of the screen.  I am signed in as `AJOteachCG’ and I have uploaded a small photo.  I have typed in a name for my project as `CG-DrawAxes’.

From `File’ you can `Save now’ to store your project online.  If you use `Save to your computer’ it will download `CG-DrawAxes.sb3’ to your computer’s `Downloads’ folder, from where you can copy and paste.

When you have saved your project, you have the option to `Share’.

Then you can `See Project Page’.  You can open this in Scratch by pasting the link.

Give it a try!

Check it works when you click on the Green flag.

Use `See inside’ to return to the Editor.

`My Stuff’ shows your work.

My name is `Adrian’ so let’s see if we can draw an `A’ shape.  I’ve chosen (50,0) as the co-ordinates of the bottom right of the `A’, so `go to x 50 y 0’ moves to the corner, where we put the `pen down’.  Then `go to x 0 y 100’ draws the line up to the top of the A at (0,100).  The pen is still down, so `go to x -50 y 0’ draws the second line from the top to the bottom left corner of the `A’.  Your job is to use further `pen up’, `pen down’ and `go to’ blocks to draw the horizontal line across the middle – good luck!

You can load my version of the file `The letter A.sb3’ from this link.  What other letters can you create?  Before we move on to the next task – drawing polygon, we’ll have a look at a very useful tool called `GeoGebra’.  Select the Geometry App and START.   You can use the mouse wheel to zoom out on the graph-paper until it has similar axes to Scratch.  I have clicked on `Algebra’ to be able to enter coordinates for our points using the keyboard.  You create points such as C by giving them a name and a pair of (x,y) coordinates.  When you press Enter, they appear on the graph paper.  Create O as the origin.  Now select the `Tools’ tab to see some of the useful things which GeoGebra lets us do.  We’ll use `Segment’ to connect points such as AB and BC.  I’ve also created segment  OB, as well as a point D which can slide on OB.  If you right-click on the graph-paper you can select choices to hide the Axes and the Grid.  In order to create the cross-bar for the A, we can create a line through D perpendicular to AB and create the points E and F where it intersects AB and BC.  After your construction has been done, you can hide objects such as O, OB and D and construct the segment EF.  

If you create an account, you can save and share your GeoGebra work with others.  Here is my CS-The Letter A file.  You could now return to the `Letter A’ project in Scratch and join (27,46) to (-27,46) to put in the cross-bar.

Returning to Scratch, I have posted a file called CG-Rotation which uses some other Motion blocks to move and draw.  The key one is `move 100 steps’.  We place our hidden sprite at the origin (0,0) and then tell it to move 100 paces.  Of course, it has no idea in which direction to move, so we have to use `point in direction 0’ to tell it to move North.  This uses the compass system in which headings of 0, 90, 180 and 270 point towards North, East, South and West.  We leave (0,0) heading North to reach (0,100).  Then we use `turn clockwise 60 degrees’ to somewhere near NE.  If we repeat the `move 100’ and `turn 60’ combination we are starting to draw a polygon.  Can you complete it?  How many sides does it have?  This polygon is called a `hexagon’.  Can you rewrite this using a `repeat’ block to make a shorter program?  Can you use it to make polygons of any number of sides?       If you have many sides it looks like a circle – how many?  Can you make a picture with some polygons?