previous

page 1

next
Click on the DEMO button to see the patterns that the little red robot can draw.
DEMO
Each digit specifies how many steps to move.
After each move the robot makes a right turn.
This process repeats until the robot is back at its start position.
These patterns are called spirolaterals.

The area where the drawing is taking place is called a canvas. It's very easy to set up but a little tricky to use so I hope you'll bear with me.

For simplicity, I'm going to revert to the way I presented Project 1 by just using the minimum amount of code to get the effect I want.

So save the following in play.html in a project_13 directory and run it.

<canvas></canvas>

Not much to see, eh? Let's put a border around the canvas so we can see it:

<style>
#c {
border:1px solid red;
}
</style>
<canvas id='c'></canvas>

This is the result.

Note that, unlike my demo, the canvas is fixed in size.

Note also that it is transparent - ie you can see my page colour behind it.

previous
next