Assignment 05

Readings for Wednesday 9/26:

  • Getting Started with Processing: Chapter 4 (pp. 37-50)
  • Processing: A Handbook, the following sections:
    • Data 1: Variables;
    • Math 1: Arithmetic;
    • Control 2: Repetition;
    • Data 2: Text;

Readings for Monday 10/1:

  • Processing: A Handbook, the following sections:
    • Math 4: Random;
    • Transform 1: Translate, Matrices
    • Transform 2: Rotate, Scale

Project 05a: Embedded Iteration

Wallpaper using nested for { } loops.
Due Monday, October 1.

Project 05b: PDF Output!

Processing toolkit is not limited to rendering graphics to your computer’s screen device; it can also render and export PDF files. In this assignment you will modify Assignment 05a to be exported via PDF, such that the deliverable is a high-resolution PDF vector file (embedded in a blog post) and and associated paper printout. No credit for this project will be given for screenshots or other raster graphics. Due Monday, October 1.

  • Instead of drawing to the screen, we can draw your wallpaper to a (vector based) PDF file.
  • See: http://www.processing.org/reference/libraries/pdf/index.html.
    • Use the techniques described there to produce a PDF version of your wallpaper.
    • I recommend either ”Single Frame (With Screen Display)” or ”Single Frame from an Animation (With Screen Display)”.
  • Print out your PDF onto an 11×17″ sheet of paper and bring it to class for a pinup critique. Color or B&W are both fine; up to you. Portrait or landscape orientations are both fine, too. The crit will be at the beginning of class on Monday 10/1, so please have your work printed beforehand.
  • Additionally, embed your PDF in a blog post, categorized “Assignment-05”. We are using the Embed PDFplugin. To embed the PDF in your blog post:
    • Click on the little “Add Media” button in the WordPress editor (  ), just above the text-formatting toolbar containing buttons for Bold, Italic, etc.
    • Upload your PDF to the course server;
    • Be sure to grab the “Link URL” of your PDF image (it will look like ./wp-content/uploads/2012/09/yourname-wallpaper.pdf or something);
    • You will now embed the PDF into your WordPress blog post, using a specially-formatted “shortcode”, which will cause it to be viewed with the Google Docs PDF Viewer. To do this, simply include the URL for your specific PDF document on its own line, or wrapped in the embed tag as shown below — and the plugin will embed the PDF into the page. The URL of your document must end with .pdf

Here’s what the HTML for your embedded PDF will look like in WordPress:

./files/2012/09/golan-wallpaper.pdf

And here’s how your PDF should appear when it is successfully embedded (naturally, your composition will be much more interesting):

./files/2012/09/golan-wallpaper.pdf

Project 05c: “Chaos vs. Order”

A Composition with Interactively-Parameterized Randomness.
Due Monday, October 1.

  • Make an interactive composition which depicts “order” when the mouseX is on the left side of the canvas, and “chaos” when it is on the right side.
  • The degree of order/chaos (entropy) should vary smoothly with the position of the mouse. You may wish to look at the helpful functions: map(), constrain()
  • Consider different optical features which can be chaotic or ordered: size, position, color, regularity of spacing (rhythm), weight, texture, amount of detail, etc.
  • If you are an advanced student, think in advanced ways. What if the chaos concerns the way things are animated (e.g. erratically)? What if the composition is figurative and not abstract? Etc.
  • Upload your work to our OpenProcessing classroom.

The following code is not offered as a template, but rather, as the simplest possible illustration of what I mean by the assignment. Please do not just submit the code below with random colors; go create your own composition.

void setup(){
  size(500,200); 
}

void draw(){
  background(255);
  smooth(); 

  float randomness = map(mouseX, 0,width, 0,1);
  randomness = constrain(randomness, 0,1); 

  for (int i=1; i < 25; i++){
    float xA = (i*20)  + randomness * random(-15,15); 
    float xB = (i*20)  + randomness * random(-15,15);
    line (xA,0, xB,height); 
  }
}

 

Posted in