Set 09 (Due 11/5)

This set of Week 9 Deliverables, which has 4 parts, is due by 11:59pm EDT on Thursday, November 5th, 2015. (There is no required reading, and there is no Looking Outwards due this week.)


Assignment 09-A: Turtle’s Meander

In this Assignment, you will use Turtle Graphics to render a series of meanders. The purpose of the Assignment is to introduce you to the use of Turtle Graphics. The Assignment also stresses the use of the while() iterative construct. 

Background

meanders
Meander motifs on Greek vases, 1st millennium B.C.E.

A meander or meandros (Greek: Μαίανδρος), also called a Greek fret or Greek key, is a decorative border constructed from a continuous line, shaped into a repeated motif. Meanders are common decorative elements in Greek and Roman art, used as running ornaments. On one hand, the name “meander” recalls the twisting and turning path of the Maeander River in Asia Minor, and on the other hand, as Karl Kerenyi has pointed out, “the meander is the figure of a labyrinth in linear form” [Wikipedia].

rhodes_meander_hg
A meander, in pavement on the Greek island of Rhodes (source: Wikipedia)

The meander, we are reminded, is like the zig-zagging course traced by someone… someone, perhaps, like our Turtle.

Requirements

For Assignment 09-A, you will use our p5.js Turtle Graphics API to render the following six meanders:

greek-border-patterns

  • Observe the above designs carefully, noting their differences. Trace them out with your finger, making a note of when you turn left, when you turn right, and how far you travel on each leg of the motif.
  • Using our p5.js lightweight sketch template, prepare a canvas whose dimensions are 800 x 500. Using Turtle Graphics, you are asked to render all six meanders into the same canvas. You will render them all in one single instant, using noLoop(). Our p5.js Turtle Graphics code and API can be found here.
  • Using pencil and paper, take a moment to figure out what is the “irreducible unit” that is repeated in each of the above designs. You must use an iterative code structure to direct your Turtle to repeat this unit across the canvas. You will notice the obvious fact that the smaller motifs (for example, in the top row) are repeated more frequently.
  • For full credit, you must use a while() structure to govern the repetition of your turtle. Thus, instead of asking your turtle to (for example) repeat the bottom motif precisely 7 times, you would instead ask it to repeat that motif so long as (i.e., while) the turtle’s horizontal position is less than the width of the canvas.
  • Your turtle(s) should draw a black line against a white background, using CSS color names. We strongly recommend you set your strokeWeight to 6 pixels, your strokeJoin to MITER, and your strokeCap to PROJECT.
  • You may choose to execute this Assignment with six different turtles, or with a single one; either way is fine.

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-09-A
  • Name your project UserID-09-A. For example, if your Andrew ID is placebo, then your project name should be placebo-09-A.
  • Zip and upload your code to Autolab, using the provided instructions. Zip your entire sketch folder. (Since you’re using our lightweight sketch template, there will be no libraries subdirectory to include.)


Assignment 09-B: Turtle’s Phyllotactic Spiral

In this Assignment, you will use Turtle Graphics to render a phyllotactic (golden) spiral. The purpose of the Assignment is to reinforce your understanding of Turtle Graphics. The Assignment also introduces a key form in computational graphics and biological morphology. 

Background

Phyllotaxis is one of the best-known patterns in nature — a core principle of biological growth which governs the morphology of many plants. This beautiful arrangement of leaves in some plants obeys a number of subtle mathematical relationships, which are closely connected to both the Fibonacci number series and to the Golden Ratio.

The phyllotactic spiral has been shown to be an optimally-efficient solution for the close-packing of growing elements — such as leaves, petals, and seeds. More information about this important pattern can be found at this excellent site.

phyllotaxis-spirals

Perhaps owing to their “natural” beauty, phyllotactic spirals are also widely employed in the arts and design. For example, John Edmark developed this phyllotactic animated sculpture in a residency at the Autodesk Pier9 3D-printing facility:

In a phyllotactic spiral, subsequent elements (such as leaves) are rotated from their previous elements by the Golden Angle. This angle, which is approximately 137.507764°, is obtained from 360°/ϕ², where ϕ (phi) is the Golden Ratio (approximately 1.618034, or precisely [1+√5]/2).

In the illustration at left below, the Golden Angle is the angle subtended by the smaller (red) arc when two arcs that make up a circle are in the Golden Ratio. In the lower right, you can see that each (numbered) leaf of the plant is rotated by this angle from the leaf with the previous number. The optimality of this arrangement becomes clear when you consider that more “common” angles (90°, 45°, 30°, etc.) would cause leaves to overlap precisely, blocking the sunlight from leaves lower down….

golden-angle-leaves

Requirements

In this Assignment, you will use Turtle Graphics to generate a phyllotactic spiral comprised of small geometric “seeds”. Your final result should resemble something like the following:

phyllo-static

  • Using our lightweight sketch template, prepare a canvas whose dimensions are 800 x 600. Have your turtle start drawing at the center of the canvas.
  • At each step in the spiral, your turtle should draw a small regular polygon, such as the hexagonal “seeds” shown above.
  • Note that you will need to control the turtle’s penDown() and penUp() functions appropriately, so that the “seeds” are not connected by lines as the turtle proceeds outwards. (It’s OK if some of the seeds in the center overlap.)
  • Be sure to have your turtle use the Golden Angle, ~137.507764°, to reckon where to place the next seed.
  • Please note, you are prohibited from using p5.js drawing commands (such as ellipse(), rect(), etc.).

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-09-B
  • Name your project UserID-09-B. For example, if your Andrew ID is placebo, then your project name should be placebo-09-B.
  • Zip and upload your code to Autolab, using the provided instructions. Zip your entire sketch folder. (Since you’re using our lightweight sketch template, there will be no libraries subdirectory to include.)

By the way — you might be interested to know that even a tiny deviation from the Golden Angle can fail to produce phyllotaxis. The following animation shows what happens when the angle between spiral elements deviates from the Golden Angle by as little as ±0.25°! (The spiral turns yellow when it’s closest to the Golden Angle.)

phyllo


Assignment 09-C: Mixies

In this Assignment, you will create an interactive Exquisite Corpse sketch. The purpose of this assignment is to give you experience developing a simple visual game, and to reinforce your understanding of the while() structure. 

Background

An Exquisite Corpse, also known as an exquisite cadaver (from the original French term cadavre exquis), is a method by which an image is collectively assembled. Often, a simple set of rules is devised that allows each contributor to add his or her contribution without knowledge about how the final composition will appear. For example, one person might draw the head of a creature, while someone else would draw the body, while a third person might add the feet. The Exquisite Corpse was a popular parlor game in the Victorian era, and was rediscovered by Surrealist and Dadaist artists in the early 20th century — as as a quasi-algorithmic generative technique for creating surprising new forms. Below is a set of recent exquisite corpse artworks by artists (and brothers) Jake and Dinos Chapman, from the collection of the Tate Museum, London.

chapman-corpses-800

And here’s an interactive exquisite corpse (2007) by Professor Levin:

In this assignment, you will create an interactive exquisite corpse software, using the circus characters from a set of “Mixies” cards from 1956:

mixies-box-800

Courtesy of CMU HCII student Meg Richards, we have been generously provided with scans of her collection of Mixies cards, which were produced in 1956 by the Ed-u-Cards Manufacturing Company. In these cards, a figure of a person or animal was cut into three pieces and each placed on a card. The deck consisted of 12 heads, 12 middles, and 12 feet, which players could mix up in different ways. The box states that the game can generate “1001 funny figures”, but in fact, there are 12x12x12 = 1728 unique combinations. (Perhaps 727 of them are less funny than the others.)

mixies

You can find all of the image assets for this Assignment:

When you have finished your submission, it should look and behave similar to the following screen-grabbed recording:

mixies

Requirements

There are three levels of accomplishment (and corresponding credit) for this Assignment. It will make sense to attempt each of them in turn.

  1. For the lowest credit (a maximum grade of 30%), make your sketch simply select a new card at random, whenever the user clicks in that section of the canvas. For example, if the user clicks in the middle third of the canvas, your code would randomly select a new mid-section card. If you click on the bottom third, you get new randomly-selected feet.
  2. For intermediate credit (a maximum grade of 75%), write code which guarantees that a particular card is never displayed twice in a row. In other words, a freshly displayed card, though randomly selected, should never be the same as the one which was in that spot just previously. For example, suppose the head section is currently from the kangaroo (#8). If the user clicks on the head, then the next head presented to the user will be random — except that it is guaranteed not to be the kangaroo. (If the system does happen to select the kangaroo a second time, then it must continue hunting for a different random head until a non-kangaroo has been found.) To achieve this requirement, your code must use a while() loop, (i.e. “keep searching for a different card so long as [i.e. while] the one you’ve just randomly picked is the same as the one you previously displayed”).
  3. For full credit (a maximum grade of 100%), your code should further guarantee that new, randomly selected cards are different from all four of the cards which were most recently used in that slot. For example, suppose the currently-displayed feet belong to the lion tamer (#11). When the user clicks on the feet, your code will guarantee that the lion tamer’s feet do not reappear for at least four clicks. Put another way, each of the next four newly selected feet are guaranteed to be something other than the lion tamer’s. To achieve this requirement, your code must use a while() loop, and it should also store the indices of the previous four feet images (or heads, etc.) in an array. You may find the Javascript Array.indexOf() function to be particularly helpful in doing this. Solutions that do not use array(s) to record the recent selections will not receive full credit.

As you can see, we are challenging you to design a well-crafted randomization system that makes perpetually “fresh-seeming” choices.

So, to develop your solution:

  • Start from our lightweight sketch template. Create a canvas which is 280×540. (The cards are all 280×180.)
  • Download the bundle of images from this zip file. You will note that these images are logically named and numbered. Unzip this bundle and place its contents into a folder called “assets” inside your sketch folder.
  • We recommend that you create 3 arrays in your code, to store the images of the heads, bodies, and feet, respectively.
  • We ask you to populate these arrays of images computationally. By this we mean that you should generate a string to represent the filename of the image you want to load, and load that file into its respective array, inside a for() loop. Fortunately, all of the images are numbered….
  • We recommend you do all of your image loading in preload(). Remember, you should only need to load an image once. If your preload() function is longer than a dozen lines of code, you’re probably not doing this right.
  • Since you’ll be loading external data files, we recommend that you review the INSTRUCTIONS FOR RUNNING A LOCAL SERVER in order to test your solution in the browser. Alternatively, you can take your chances with the p5.js IDE, but your mileage may vary. You may not use Imgur.com to store images for this assignment.
  • We recommend you use floor() when generating a random number that you intend to use as an index into an array.
  • Go ahead and include your images in your .zip file submitted to Autolab.

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-09-C
  • Name your project UserID-09-C. For example, if your Andrew ID is placebo, then your project name should be placebo-09-C.
  • Zip and upload your code to Autolab, using the provided instructions. Zip your entire sketch folder. (Since you’re using our lightweight sketch template, there will be no libraries subdirectory to include.)


Project 09: Freestyle: Playing with your Turtle(s)

This is a highly open-ended creative Project in which you are asked to create an interesting composition using Turtle Graphics. Essentially, you are invited to explore your own interests while using this very different approach to drawing and rendering. Below are a handful of possible suggestions for paths of exploration; please note that this is not a complete list of possibilities:

  • A turtle which responds to the cursor. You could have a turtle that responds to the position of the user’s cursor, for example, fleeing away from it, spiraling around it, etc.
  • A turtle which responds to an image on which it is crawling. You could use an image (hidden or otherwise) as the “terrain” on which a turtle is crawling, and the turtle could make decisions about which way to turn based on the color of the pixel underneath it.
  • A family of turtles which are following or avoiding each other. With the addition of some noise() or randomness, this can produce very surprising results.
  • Using a turtle to draw different kinds of visual forms. Turtle Graphics are particularly well-suited to drawing complex curves, dotted lines, calligraphic curlicues, and other unusual structures. Google around to see what’s possible…
  • A big flock of turtles that…?

Here are the Project-09 Requirements: 

  • Create a composition using Turtle Graphics using p5.js, as described above. Your canvas should be no larger than 800 pixels in any dimension, please.
  • When you’re done, embed your p5.js sketch in a blog post on this site, using the (usual) instructions here. Make sure that your p5.js code is visible and attractively formatted in the post. Include some comments in your code.
  • In your blog post, write a sentence or two reflecting on your process and product. In discussing your process, it would be awesome if you included any of your paper sketches from your notebook; these could be as simple as photos captured with your phone.
  • Please include one or two screen-shots of your finished composition.
  • Label your project’s blog post with the Category Project-09-Composition.
  • Label your project’s blog post with the Category referring to your section (e.g. GolanSection, RogerSectionA,RogerSectionBRogerSectionD, or RogerSectionE).