Tracing Tool Example
Step 1. When choosing the new module, pick “tracing tool”
You’ll see a page that looks like this:
Click “create” and it will take you to this page:
Once you click compile (the blue play button top left). You’ll see an image appear and the instructions on
how to use the tracing tool.
By clicking this window, you will get rid of the instructions and see the full image:
This image is produced by a image URL that can be found in “imageUrl” on line 4
To replace this image with a picture of your choice, you need to find an image and its url, paste it in
between quotes “ “
Delete the demo URL, add your picture’s URL, and make sure it’s in between quotes or else it will
NOT show you the image.
How do I find an image URL?
Once you find an image like so:
Double click and see options:
You want to select “ copy image address”
Once you have copied your image address, replace the URL and then find yourself with a new picture in
the tracing tool module:
Now we are one step closer to where we want to be in order to start tracing.
● As you can tell the picture is quite zoomed in
● This is because if you don't select an image with the perfect dimensions, it may be either too
small or too big.
● You can change this.
We have an option to scale (stretch or shrink) the picture on line 9:
Since our picture is zoomed in, you want to scale it by a smaller number, let’s try 0.1 and see where that
gets us.
Now we have one last thing missing. The image seems to be the perfect size, but the drawing itself seems
to be cut off. This is because the images width and height don’t perfectly line up with the demo width and
height.
As you can tell by looking at the screen, we have options “imageWidth” and “imageHeight”
● You can adjust these until they perfectly fit your picture.
● In this case, if we change it to Width = 600, Height = 600 it will look pretty good!
If you have a hard time estimating dimensions, go back to the page where you found your image and the
details of the dimensions should be there.
Bottom left tells us the dimensions if we hover over the image.
Finally, if we want to center the image we have to play around with “imagePos” (which stands for image
position) on line 11 until we get the perfect position.
Since it looks perfect now, we can start tracing!
Notes:
● if you mess up, click the red x on the screen and it will take you one step back.
● Command A will show you your trace so far.
● It will also show you coordinates at the bottom of your page:
●
●
Command c is another way to copy
Please press command c to copy the coordinates.
To test our trace, we can paste the coordinates into “ShapesSoFar”
Warning! Make sure you either fill or outline it with a colour, or else it will show you an error.
● We do this to make sure our creation works!
Now, you can go back to a new page and paste it into “myShapes model” and make any further
adjustments to the picture.
● In this case, I just added two circles to create eyes