Assignment 08

Assignments: Due Monday 10/22

This is a large assignment. You have:

  • Looking Outwards
  • Readings
  • Small Assignments & Puppet Project

A. Looking Outwards: Work made in Arduino.

There are many sites which feature work created with Arduino. Peruse them. In a single blog post, please write 3 Looking Outwards entries for projects that you have found there. Try to choose diverse things. Remember to categorize your blog post with “Looking Outwards”. Here are some places to get started. (In addition to searching for Arduino, you can also try search terms like “physical computing” or “tangible interaction”.)

B. Readings:

  • More on Transforms:
  • Arrays.
    • Read: Getting Started with Processing, 141-157 ( Arrays)
    • Processing: A Handbook: Data4 (Arrays, p.301); Synthesis 3 (Motion & Arrays, p.371)

C. Code Projects.

Upload all assignments below to our OpenProcessing classroom.

08a. Simple Array Assignment: Array Search

// Below is some code which fills an array (called myArray)
// with 100 random integers between 0 and 100.
// 
// Write some code which uses a for{} loop to search through 
// this array, starting from the lowest index (0), and
// which reports the index of the first value stored in the array
// which is greater than or equal to 96. 
// [You can display the "report" with the text() command.]
// In other words: report the lowest-numbered index in the array
// which stores a number greater than or equal to 96.
// You may not modify the code below; assume your code follows after it.

int myArray[];
int nElements = 100;
myArray = new int[nElements];
for (int i=0; i < nElements; i++){
  int randomInt = (int)random(100);
  myArray[i] = randomInt;
}

08b. Simple Array Assignment: Procedural Reassignment

Declare, allocate and initialize an array of 5 floats. Init them with random numbers between 0-255. Use these floats to control the gray-level color of 5 corresponding circles. Now create a time-based program in which, on each time-step (draw() call), the values in these arrays are increased by 1. When the value stored in each position is greater than 255, have it reset to 0.

08c. Simple Array Assignment: Averaging

// The following array represents the scores achieved by some students on an exam.
// You will use this to accomplish two tasks:
//
// (1) First, plot these values as a bar chart, ideally extending 
// from the bottom of the canvas upwards.
//
// (2) Using a for{} loop, compute the average score by adding up all of the values, 
// and then dividing this sum by the number of scores (obtained with array.length).
// Hint: To add up the values, iterate through the array 
// while accumulating a running total of the scores into a variable.
// Then plot the average value as a horizontal line cutting through the scores.
// What is the average value? Display it with the text() command.

float scores[] = {
  21.43, 50.00, 59.52, 65.48, 71.43, 71.43, 82.74, 85.71,
  85.71, 85.71, 91.67, 92.86, 93.45, 94.64, 96.43, 98.81,
  102.98, 103.57, 104.17};

08d. Simple Array Assignment: Centroid of a Polygon

// The following two arrays define a sequence of x-values, 
// and a sequence of y-values, which describe a certain shape or polygon. 
// 
// (1) In a canvas of size 300x250 pixels, plot this shape.
// You should use array.length to automatically determine 
// the number of points to plot. Also, use beginShape()/endShape() 
// to plot the polygon.
//
// (2) The "centroid" of a shape is defined as a point, whose:
// x-coordinate is the average of the x-coordinates of the shape, and whose
// y-coordinate is the average of the y-coordinates of the shape.
// Compute and plot the centroid of this shape, using a small crosshair. 
//  
// (3) In your opinion, what does this shape portray? 
// (Can you find the image that I traced, using Google Image search?)

int[] x ={
  197,197,199,200,200,201,201,201,200,202,
  202,202,201,200,199,200,198,194,192,189,
  188,189,191,194,195,198,201,201,203,205,
  203,206,205,203,203,206,209,214,215,217,
  220,221,223,223,222,219,213,208,204,204,
  201,197,192,189,185,182,180,178,176,168,
  161,156,153,154,154,150,147,143,141,134,
  131,127,123,116,109,107,101,87,77,70,65,
  60,59,60,62,65,70,73,73,75,79,84,89,93,
  98,100,101,103,107,108,111,112,112,112,
  114,117,117,115,115,115,111,110,110,110,
  110,109,108,108,109,108,107,106,106,106,
  107,108,109,115,120,128,135,138,145,149,
  153,157,162,166,169,173,176,181,186,191};

int[] y ={
  4,9,11,14,18,23,29,35,39,42,46,49,50,52,
  56,60,67,78,82,86,91,99,103,111,118,128,
  137,142,153,163,171,182,191,200,204,206,
  206,208,209,208,209,210,213,217,221,221,
  222,221,221,225,226,227,225,227,226,226,
  224,221,220,222,222,221,222,225,228,228,
  226,228,228,228,228,227,228,228,220,216,
  211,207,201,193,185,175,168,163,161,159,
  159,161,165,170,174,179,183,185,186,186,
  170,156,144,136,125,121,115,112,108,103,
  97,92,87,83,71,66,61,58,56,54,49,45,40,
  37,32,27,23,19,13,9,10,13,17,23,30,32,
  31,29,29,30,31,31,32,28,24,18,13,9};

08e. PUPPET!
Make a puppet with limbs. Give it a dynamic behavior; you might find it helpful to use the noise() function. See the PuppeTool demo by Frederic Durieu (LeCielEstBleu):

You may also be helped by the moving limb example in Lecture 08.

Here is another example of using the noise() function to control something dynamically over time:

void setup(){
  size(600, 400); 
}

void draw(){
  textAlign (CENTER);
  background(200);
  smooth();

  noFill();
  rect (50,100,100,200);
  fill(0) ;

  // Choose different values of the noise field. 
  // The special numbers just ensure that we're fetching values 
  // from different places in the noise landscape. 
  float noiseValue1 = noise(  millis()/1000.0 ); 
  float noiseValue2 = noise( (millis()+12345)/1357.9  ); 
  float noiseValue3 = noise( (millis()+23456)/1111.1  );
  float noiseValue4 = noise( (millis()+34567)/1212.1  );

  // Animate the position of something
  float x1 = map(noiseValue1, 0,1,  50, 150); 
  float y1 = map(noiseValue2, 0,1,  100,300); 
  text ("Translation", 100, 50); 
  pushMatrix();
  translate(x1, y1); 
  ellipse (0,0, 30,30); 
  popMatrix();

  // Animate the rotation of something
  float noiseAngle = map(noiseValue3, 0,1,  -40,40); 
  text ("Rotation", 300, 50); 
  pushMatrix();
  translate (300, 100); 
  rotate( radians(noiseAngle)); 
  line (0,0, 0,200);
  ellipse (0,200, 30,30); 
  popMatrix();

  // Animate the size of something
  float noiseScale = map(noiseValue4, 0,1,  0.75, 2.0); 
  text ("Scale", 500, 50); 
  pushMatrix();
  translate (500, 200); 
  scale ( noiseScale);
  ellipse (0,0, 30,30); 
  popMatrix();
}
Posted in