CS 106 Winter 2016

Assignment 05: Geometric context

Question 1 Phyllotaxis



The golden angle is an angle that divides up the circumference of a circle in the same proportions that the famous golden ratio divides up a line. In radians it is equal to pi * (3 - sqrt(5)).

Armed with the golden angle, it's possible to create a beautiful arrangement of points called a phyllotaxis, as shown above. You will write a sketch that draws this sort of phyllotaxis.

  1. Create a sketch of size 500×500. Call it Phyllotaxis (make sure to spell it correctly!)
  2. In the sketch's draw() function, draw 500 small circles. The nth circle should be at distance 10 * sqrt(n) from the centre of the sketch window, and rotated by an angle n * ga around the centre, where ga is the golden angle above. Draw each circle using the code ellipse( 0, 0, 10, 10 )—you must carry out all necessary translations and rotations using geometric context, including pushMatrix() and popMatrix().
  3. You can use any combination of colours you want for the sketch background and the dots, but use a dark colour for the background.
  4. Now allow the entire phyllotaxis to rotate in place around its centre. Use a global variable to control the rotation speed (i.e., the extra amount that the entire design rotates every frame). The best way to structure your code is with two levels of geometric context. Create an outer context that translates the phyllotaxis to the centre of the sketch window and rotates it according to the speed above (tip: rotate the design by the speed multiplied by the built-in variable frameCount). Then, inside a loop, create a context that transforms each dot into position. Don't forget to use pushMatrix() and popMatrix()!
  5. Finally, use ControlP5 to build a user interface that controls the speed. You should implement exactly three speeds: "Stopped" (no rotation), "Slow" (rotate slowly), and "Golden" (rotate by the golden angle every frame). Use a radio button to select among these three speeds, with "Stopped" as the default. If you've implemented rotation by the golden angle correctly, the effect will be surprisingly cool!

Question 2 Hierarchical drawing

Write a Processing sketch that draws a scene of your design, making use of geometric context functions. The scene can consist of anything you want, as long as it satisfies the conditions below.

  1. Your sketch window should have size at least 400×400, and no more than 1000×1000. Choose a size that's most appropriate for your scene.
  2. The scene should be figurative: it should contain clear objects (people, animals, plants, buildings, vehicles, etc.), and not be an abstract collection of geometry.
  3. Don't use any data from external files (images, SVG files, text files, etc.). All drawing should be based on calls to built-in drawing functions in the sketch itself.
  4. There must be at least one object that's repeated: it should appear at least three times with different transformations, carried out using geometric context. Put the code to draw the object into a helper function, and call that function three times wrapped inside different transformations. At least one of the copies should be scaled, and at least one should be rotated.
  5. At least one object must use more than one level of hierarchy: a geometric context nested inside of another geometric context.

The goal of this question is for you to exercise your use of translate(), rotate(), scale(), pushMatrix() and popMatrix(), but in an open-ended way. You should think carefully about what sort of scene you'd like to draw within the constraints above. Needless to say, we'll award bonus marks for especially creative or artistic results.

Save your work in a sketch called Scene.

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 both of the sketches created above (Phyllotaxis and Scene) into a single archive called A05.zip and upload that file to LEARN.