CS 231 Lab 6: Drawing line patterns

Drawing line segments under modified orientations

The idea for this lab was kindly suggested by Alex Leighton, a current CS major (thanks, Alex!), based on a project he did earlier in his schooling (on a calculator, no less!). The lab is meant to give you some further experience with loops and arrays, some first lab experience with scanner-based input, and also to give you some more freedom (and responsibility) for overall program and class design.

The basic idea behind the lab is to draw certain specific patterns of lines under user control. The user inputs a series of numbers (let's assume they are non-negative integers) via a scanner input box. After the user hits "enter", the program will use the integers to draw a pattern of lines in a draeing panel as follows: each integer is interpreted as the length of a line segment to be drawn from the current position, but with successive "right-hand" turns after each segment is drawn.

To get a better idea of the idea, imagine that you are standing on the screen yourself, prepared to do the drawing. You begin facing toward the right ("east"): after drawing the first segment, you turn right (clockwise when viewed from above), so now you're facing down ("south"). Then you draw another line segment, and now turn to face "west". You repeat the process of drawing a segment and turning 90 degrees for each of the integers you read in; when you reach the end of the list, you continue again from the front, re-using the numbers as you go.

(The idea of imagining yourself, or some other being, as doing the drawing under various commands was popularized in the Logo language, which was developed for teaching children. The Logo version used a turtle (its tail raised and lowered the pen to the paper), so these are often called "turtle graphics". Typical turtle commands include movement, rotation, and raising or lowering a pen chosen from several different colors or line styles. Our "turtle" is pretty limited, in that it only draws and turns 90 degrees, and always in that order.)

Your job is to write a program which will do this sort of drawing, based on the numbers entered into scanner input. You should repeatedly read in numbers, redrawing the line pattern each time, until the user enters an empty input. This will allow the user to modify the numbers to see the effect on the pattern drawn.

Overall program design

Most of the programming we have done so far has been either simple class-less expression evaluation in the interactions pane or class-based programming. Lately, we have been "driving" the overall program through a main() method in a Main class. This lab can be approached in a couple of ways:

You might define a "turtle graphics" object which can be given commands to move, turn and draw. It would need to keep its current (x,y) position as well as its orientation or facing (the latter is a bit more difficult, but you might use an integer or character to encode the direction: remember that for this program you need only the four major compass directions).

On the other hand, you might not need any other objects: if you are tricky about it, you might be able to fit all the logic of drawing and turning in the main class. In this case you would issue the drawing commands directly from a loop.

There is no right or wrong answer to the issue of program design, but you should start thinking about these issues and be prepared to implement your approach.

The basic process, plus some tips

As you can tell from the description above, and somewhat independently of your object or main class design, your program will need to go through the following steps each time it re-draws the pattern:

split up the user's scanner input into individual numbers: remember to allow the user to enter several numbers at once! (This makes it easier to develop patterns.) You will want to use a loop, controlled by a scanner's hasNextInt() method. You can store the numbers in an array, but how do you know how big to make it? (Hint: you may assume there will never be more than some default maximum: remember to tell the user what the maximum is with your input prompt!)

another way to split up the user's input into pieces is to use some handy static methods from the String and Integer classes. If you have a string of input (say from a user's scanner input), you can split it up into an array of "words" as follows:
String[] words = myString.split(" +");
Then any given "word" (in this case it will be a numeral, i.e., a string representing some integer) can be converted into a number as follws:
... Integer.parseInt(words[i]) ...
This code could be wrapped in a loop in order to convert every numeral in an input string into a number in an array. If you use this approach, you don't need to worry about a maximum size of input, since the split() method will size the array for you.

once you have the segment lengths (the integers), you will want to loop around a large number of times (say 100 or 500), drawing and turning each time: this will ensure that you draw out the pattern sufficiently without going on forever (if you try to stop the drawing based on repeated positions, you may either stop too soon or go on too long);

each time, you draw a segment, make its actual length proportional to the integer given, but use some multiple of pixels (say 10) in order to make the pattern larger and easier to see; your line will go for this porportional distance in the "current" direction;

remember to update the current co-ordinates after you're done drawing the line segment; you need to begin the next segment where the last one left off.

Big Hint: you can use the modulus operator (% in Java) in a couple of places in your code: first, you can use the current "frame" number (in your big drawing loop) modulo the number 4 to tell you which direction you're currently facing. (If you use a class-based approach, you won't have a loop number, but you can increment your current "direction" by one, then use the modulus to convert.) In any case, any number "modulo" four will always give you a number between 0 and 3, which you can use to represent one of the four directions.
You can also use modulus to access the array of numbers: recall that you will run your overall loop for a large number of repetitions, but your array of numbers will generally be rather small (say 20 or so). By using the loop number modulo the array length, you can ensure that you have a valid index into the array, and that you properly re-use the numbers from the user input (array).

have fun creating interesting patterns: if you find ones you like, you could add a button that "forces" those numbers into the text field using the setText() method (this just makes for a convenient way to remember and re-enter the numbers, without having to memorize them or write them down);

Have fun and experiment! Try using different colors of pen, perhaps rotating them. Or drawing small circles at each "stopping point" to make the pattern more interesting (see the last sample picture below).

Some sample pictures

Here are some sample snapshots from the sample implementation I did myself to test out the idea for the lab (in the last one, I also drew colored "dots" every time the pen "stopped"):