CS 106: Assignment 07

CS 106 Winter 2016

Assignment 07: Randomness and noise

Due: Monday March 14th, 11:59am (noon, not midnight!)

Starter code: A07.zip (for Question 2)

Question 1 Pipes

Let's have another look at the sort of pictures we first explored in Assignment 01, Question 2 (Arcs). Download the two files tile1.svg (crossing) and tile2.svg (arcs) and add them to a new sketch. You'll draw grids of these two tiles, where each tile might be drawn at its initial orientation or rotated by 90 degrees. Don't create pre-rotated alternative SVGs: use geometric context to rotate the tiles inside the sketch.

Now write a sketch that draws an 8×6 grid of tiles in an 800×600 window. At a high level, the sketch is similar to the TenPrintControl sample sketch in Module 08: the X position of the mouse should be used each frame to control the relative proportions of arc tiles and crossing tiles. When the mouse is on the left side of the window, use only arc tiles (as in the left image above), and when the mouse is on the right, use only crossing tiles (as in the right image above). But there are two main differences:

When drawing an arc tile, you must always select one of the two possible orientations of the tile at random, with each orientation being equally likely.
When drawing a crossing tile, you must strictly alternate the two orientations, as in the image on the right above. (There's a nice trick to decide which orientation to use. Use nested loops, one counting up in Y and the other in X. For each grid cell, rotate the tile by 90 degrees, and translate it back into place, if X+Y is odd; otherwise draw an unrotated tile.)

Let me reiterate how the logic works. For each grid cell, first decide whether to draw an arc tile or a crossing tile. The decision should be based on the comparison between a random number and a threshold, with the threshold computed from the X position of the mouse. If you are drawing an arc tile, flip a coin to decide whether or not to draw it rotated. If you are drawing a crossing, draw it according to a strict alternation so that you get a "basketweave pattern" as above.

Finally, control the generation of random numbers so that the sketch isn't completely chaotic:

Initialize the random seed every time you draw the grid, so that you get the same sequence of random choices.
Add a keyPressed() hook that changes the seed you're using (say, by adding 1 to it). That will let you browse through lots of different random patterns.

Save your work in a sketch titled Pipes.

Question 2 Archipelago

Create a sketch that displays an imaginary archipelago, a seemingly infinite map-like view of islands in water. The shapes and layout of islands is generated by applying a threshold to the noise() function at every pixel. You should be able to use direct manipulation to pan around the map forever, in the style of Google Maps.

Here's a suggested approach:

Download the starter code and open the Archipelago sketch. The starter code demonstrates how to manually assign a colour to every pixel in the sketch window, using the built-in functions loadPixels() and updatePixels(), together with the built-in array pixels. If you want to know more, see Section 15.5 of the textbook. You can leave this structure as it is, except that you will change the color values written to the pixels array.
Change the provided code so that the colour drawn at every pixel is taken from the two-dimensional version of the noise() function. This is a bit like the start of the NoiseDriver sketch in Lab 08, but you need to call the version of noise() that takes two numbers as input.
Add a scaling factor so that your samples of the noise() function are closer together in space. Your drawing should look less like static and more like clouds, as in the video above.
Apply a threshold to the output of the noise() function: if the function returns a value less then a threshold at a given pixel, colour that pixel as land. Otherwise colour it as water. Choose a threshold that gives a reasonable balance between land and water.
Finally, add support for direct manipulation. When the user drags the mouse, the map should pan in that direction as in Google Maps. You'll need global variables to keep track of the total amount of panning, and you can update those variables in a mouseDragged() hook.

Keep in mind that the noise() function is far from perfect. Don't be surprised if, some of the time, you find lines of mirror reflection in your islands. You don't have to try to fix that, though it may be possible to use the noiseDetail() function to do so.

The whole sketch can be completed in about 35 lines of code (not counting comments), though of course individual solutions might vary.

There are plenty of opportunities to enhance this simple sketch with other design elements taken from maps. If you're interested, you might experiment with enhancements. Creative or artistic enhancements might receive bonus marks. Here are a few suggestions:

Add cities as dots on the map. This is fairly tricky. You'll want to make sure the cities are on land, relatively sparse, and not clumped too closely together. It might be possible to use further layers of noise to decide on city locations, in which case the cities might even pan around coherently with the map.
Add other land features. It may be possible to specialize land colours to add white for polar regions, beige for desert, etc.
Add zooming. Adding ControlP5 buttons for zooming in and out is easy; making the zoom actually work relative to the centre of the sketch window is probably harder. Making the hypothetical city dots work consistently at multiple zoom levels is probably very difficult.

Save your work in a sketch titled Archipelago.

Question 3 Secret word

We used a tool called Crowdmark to mark your midterm. It lets us assign marks to scanned exam pages, and add textual and graphical annotations. We want to make sure that you have a look at your marked exam and carefully try to understand where you might have lost marks.

To encourage you to look at your exam, we have annotated each one with a six-letter "secret word". Find this secret word. Create a sketch with a single line of code that declares a global variable to be your word, as follows:

String word = "your secret word here";

Replace the text your secret word here with the six-letter word you find in your exam. Save your work as a sketch titled SecretWord. This question will not count towards the assignment, but you will receive a 5% bonus on the midterm.

Submission

Remember to review the Code Style Guide and use Processing's built-in auto format tool. Then review the How To Submit document. At the top of all of your source files, be sure to include a comment with your name and student ID number. When you're ready, zip all of the sketches created above (Pipes, Archipelago and SecretWord) into a single archive called A07.zip and upload that file to LEARN.