Summary

As you have seen from CS 105, Processing makes it quick and easy to set up interactive art and design tools. To ease you back into programming, we'll build up a sequence of drawing sketches with a few special effects thrown in. I was inspired by a short demonstration near the beginning of Zach Lieberman's talk at the 2015 Eyeo festival (watch the section from 9:30–11:30), which I saw mentioned in Golan Levin's notes from his Processing-based course at CMU.

It takes four numbers to represent a line segment: the x and y coordinates of the start and end points of the segment. In that case, we can represent a sequence of line segments using an array whose size is a multiple of four, by storing groups of four numbers (x₁, y₁, x₂, y₂). We can automate some of the complexity of putting numbers into an array four at a time using a variable and some helper functions, as follows.

// Use an array of floats to hold the line segments
// that have been painted so far.
float[] lines = {};

// Call this function to find out how many line segments
// are currently in the array.
int countLines()
{
  // Every line segment uses four numbers, so this
  // is easy to compute.
  return lines.length / 4;
}

// Append a single line segment to the array of lines.
// Use this to record each new segment you want to keep.
void addLineToEnd( int x1, int y1, int x2, int y2 )
{
  lines = append( lines, x1 );
  lines = append( lines, y1 );
  lines = append( lines, x2 );
  lines = append( lines, y2 );
}

// Throw out the line segment at the front of the list.
void removeLineFromFront()
{
  if ( lines.length >= 4 ) {
    lines = subset( lines, 4, lines.length - 4 );
  }
}

You should use this code in your solutions to the problems below.

Question 1 Saved segments

Create a Processing sketch called SavedSegments that displays a drawing created interactively by the user. As long as the user is dragging the mouse in the sketch window, the sketch should save the incremental segments into the array using the code above. When drawing, it should iterate over all the stored segments and draw them one by one.

Assuming that you've copied the code above into an initially empty sketch, you can complete this question with the following steps (provided in moderate detail for this first assignment):

• Write a setup() function that sets the size of the sketch to (500,500) and sets the colour for drawn lines. Choose any colour you want, as long as it's clearly visible on the background colour you choose below.
• Write a draw() function that clears the screen to a background colour of your choice and then walks over the array (four steps at a time!), drawing each line segment in turn. Remember that you don't know the length of the array ahead of time; its length will keep changing.
• Write a mouseDragged() hook that's called when the user draws with the mouse button pressed. In that function, store the newly drawn line segment, which starts at coordinates (pmouseX, pmouseY) and ends at (mouseX, mouseY). The body of mouseDragged() can be a single line of code.

Question 2 Drawing a snake

Save a copy of the sketch in Question 1 into a new sketch called SnakeDraw. Modify this new sketch so that the only the most recent 100 line segments are stored—that is, once the size of the array of line segments grows to be larger than 400, it is always truncated to 400. To do this, modify the mouseDragged() function you wrote above to check the number of segments in the array, and remove the first segment if that number is larger than 100.

Remember that the choice of keeping 100 segments is fairly arbitrary. Good style demands that you store that value in a global constant at the top of the sketch so that you can modify it later if desired.

Question 3 Conveyor belt

Save a copy of the sketch from Question 2 (not Question 1!) into a new sketch called ConveyorBelt. Modify this new sketch so that the saved line segments are constantly falling towards the bottom of the screen. Inside the draw() function, add a loop that walks over the array of line segments, adding 2 to the y coordinate of the start and end points of every segment. (The paths you draw will look a bit more jagged; don't worry about that.)

Question 4 Fuzzy lines

Save a fresh copy of the sketch from Question 2 into a new sketch called FuzzyLines. Modify this new sketch so that every point of every line segment moves randomly by small increments in every frame. To do this, put a loop in draw() that walks over every point in the array, adding random real numbers between -2.5 and 2.5 to every x and every y coordinate. Such numbers can be computed using the expression random( 5.0 ) - 2.5. Make sure to add a different random number to every coordinate. The segments will slowly break up into a disorganized cloud.

Question 5 Your choice

Create a simple interactive drawing sketch in the style of the four above, which includes (at least) one additional special effect of your choosing. The effect can be anything you want, as long as its impact is immediately obvious by looking at the running sketch. Of course, fancy changes to rendering style, colours and geometry are all welcome. To begin, copy the code from one of the four sketches above into a new sketch called FreeDraw, then start modifying the code. Include a comment at the top of the sketch explaining your effect and (if necessary) how to control it for maximum visual impact.

Submission

Remember to review the Code Style Guide and use Processing's built-in auto format tool. Then review the How To Submit document. When you're ready, zip all the sketches created above (SavedSegments, SnakeDraw, ConveyorBelt, FuzzyLines, and FreeDraw) into a single archive called A00.zip and upload that file to LEARN.