US Hawks Hang Gliding Association

Learn to Program: Etch Series



This topic is about learning to program a series of simulated graphics computers that will be named "Etch1", "Etch2", and so on. The name comes from the famous "Etch-a-Sketch" toy that could draw by moving a "pen" across the screen. The toy had 2 knobs - one for horizontal movement and one for vertical movement. A skilled operator could draw diagonally by moving both simultaneously at varying relative rates.

The "Etch" series of "computers" are being designed with 2 criteria in mind:

      1. To be easy to understand and to program
      2. To actually run right inside our forum

Each new version will be introduced as it is developed, and the full documentation is currently in the "Forum Help and "How To's"" section which documents our custom BBCodes. Please feel free to try them out with posts in this topic or elsewhere in the forum.

But most importantly, have fun!!

Learn to Program: Etch1 Introduction

The "Etch1" computer has a fairly simple instruction set where each instruction is just a single character. An Etch1 computer program is just a series of these single character instructions that tell the computer what to do. There are a total of 28 different instructions, but most programs will rely most heavily on only 4 (U, D, R, L). These 4 instructions (U, D, R, L) stand for Up, Down, Right, and Left. Here is an example program that draws a simple diagram using only those 4 instructions (You can ignore the spaces. They are just helping to show the structure of this program.):

      UUU RRR DDD LLL LLL DDD RRR UUU

This program begins with a series of three "Up" instructions (UUU) which draw a small vertical line starting at the center and moving upward (all "Etch1" programs start at the center of the drawing). The next three instructions are all "Right" instructions (RRR) which will draw a short line to the right. Similarly, the "D" instructions draw down, and the "L" instructions draw left.

Now look at that program, and try to visualize what those instructions will draw. Get out a pen and paper and try to draw for yourself what that computer program tells you to draw. When you're ready, click this first button below to see how the "Etch1" computer follows those same instructions.

Draw Simple_Diagram_100_100
Your browser does not support HTML5 canvas

Did it match what you expected? If not, please take some time to understand why the program drew what it drew. Maybe use pen and paper to try to follow the instructions again now that you know what it should be drawing.

Let's try another one. This one is a bit longer, and it might be helpful for you to use lined paper or even graph paper for this drawing. Here's the computer program:

      LLDDRRRRDLLLLLUUUUUUURRRRRDLLLLDDRRRDL

When you think you've got it, go ahead and press the button below to see if your drawing matches the computer output.

Draw Ex_200_100
Your browser does not support HTML5 canvas

How did you do this time? Again, if your drawing didn't match, be sure to understand why and draw it again until it makes sense.

There's a lot more to this simple drawing "language" than that. For example, here's a simple hang glider outline drawn in "Etch1":

Draw HG_Example_500_200
Your browser does not support HTML5 canvas

That glider was drawn with these instructions:

      WW3SSMUUKRRRRRRDDDkKLLLLLLUkKLLLLLLDkKRRRRRRUUUkK9DDDDk

For more details see the full set of instructions below or read the BBCode tutorial for "Etch1" at: https://ushawks.org/forum/viewtopic.php?f=7&t=24&start=10#p31050.

========================= Etch 1 Instruction Set =========================

Reference

This is the full "Etch1" instruction set. It is placed here for quick reference. These instructions will be explained in future posts.

u: Draw (or Move) up by 1 unit
d: Draw (or Move) down by 1 unit
r: Draw (or Move) right by 1 unit
l: Draw (or Move) left by 1 unit
U: Draw (or Move) up by 10 units
D: Draw (or Move) down by 10 units
R: Draw (or Move) right by 10 units
L: Draw (or Move) left by 10 units
M: Enter Move Mode
m: Exit Move Mode
+: Increase Unit Length by 1
-: Decrease Unit Length by 1
S: Increase Unit Length by factor of 2
s: Decrease Unit Length by factor of 2
W: Increase Line Width by 1
w: Decrease Line Width by 1
0: Set Color to Black
1: Set Color to Blue
2: Set Color to Green
3: Set Color to Cyan
4: Set Color to Red
5: Set Color to Magenta
6: Set Color to Yellow
7: Set Color to White
8: Set Color to Orange
9: Set Color to Gray
K: Keep this point for a later "k" draw
k: Draw line from previous Keep

Learn to Program: Etch1 - Your First Program

Computer programming is generally done in at least 2 steps: writing the program and running the program. These 2 steps are repeated again and again as the program is developed. We'll use a previous program (above) as our first step. So here is our first written program:

      UUU RRR DDD LLL LLL DDD RRR UUU

Now to run that program, you'll have to put it into your own post inside the "etch1" tags as shown here:

      [etch1=My_First_Etch_100_100]UUU RRR DDD LLL LLL DDD RRR UUU[/etch1]

Go ahead and copy that line and paste it into a post of your own to check it out. You should change the name part from "My_First_Etch_100_100" to something else like "Bobs_First_Etch_100_100" or "Joes_First_Etch_100_100". You can name it anything you like as long as it is both unique on the page and ends with two numbers like "_100_100". Those last two numbers ("_100_100") are the width and height of the drawing area that will be created inside your post. You can use different numbers for different sized drawings.

OK, go ahead and give it a try. Just copy that text into your own post and change the name to your name (or to something creative).

OK, I copied that text into my post right here and changed the name to "StudentHawks_First_Etch_100_100":

Draw StudentHawks_First_Etch_100_100
Your browser does not support HTML5 canvas

When I click the button, my post shows this: