Category: Lecture

Lecture 10

Automata.

It all started with automata like Vaucanson’s Digesting Duck (1739)

Before this was the “Praying Monk”, built in South Germany or Spain around 1560.

Hear the story in this episode of Radiolab.

Or the Ultimate machine, theorized by Claude Shannon, the father of information theory:

Modern automata of the Cabaret Mechanical Theater :

Existentialist mechanical sculptures by Arthur Ganson:

Sprawling modular mechanisms by School of Art MFA alumnus, Greg Witt:

Wind powered “beach animals” by Dutch artist, Theo Jansen:
Strandbeest

Riotous robotic performances by Mark Pauline’s Survival Research Lab:

 

Comments Off on Lecture 10 Posted in

09c. Blinking LEDs

Remove everything from the breadboard and let’s make CIRCUIT #1

Copy the code from the manual.

Now make it blink faster!

Blinking 2 LEDs

int L1 =  13;    // LED connected to digital pin 13
int L2 =  12;    // LED connected to digital pin 12
 
// The setup() method runs once, when the sketch starts
 
void setup()   {                
  // initialize the digital pin as an output:
  pinMode(L1, OUTPUT);
  pinMode(L2, OUTPUT);
}
 
// the loop() method runs over and over again,
// as long as the Arduino has power
 
void loop()                    
{
  digitalWrite(L1, HIGH);   // set the LED on
  delay(1000);                  // wait for a second
  digitalWrite(L2, HIGH);   // set the LED on
  delay(1000);                  // wait for a second
  digitalWrite(L1, LOW);    // set the LED off
  delay(1000);                  // wait for a second
  digitalWrite(L2, LOW);    // set the LED off
  delay(1000); 
}

Make them blink at the same time and alternated.

Blinking 3 LEDs

Now 3 LEDs!

int L1 =  13;    // LED connected to digital pin 13
int L2 =  12;    // LED connected to digital pin 12
int L3 =  11;    // LED connected to digital pin 11
 
// The setup() method runs once, when the sketch starts
 
void setup()   {                
  // initialize the digital pin as an output:
  pinMode(L1, OUTPUT);
  pinMode(L2, OUTPUT);
  pinMode(L3, OUTPUT);
}
 
// the loop() method runs over and over again,
// as long as the Arduino has power
 
void loop()                    
{
  digitalWrite(L1, HIGH);   // set the LED on
  delay(1000);                  // wait for a second
  digitalWrite(L2, HIGH);   // set the LED on
  delay(1000);                  // wait for a second
  digitalWrite(L3, HIGH);    // set the LED off
  delay(1000);              // wait for a second
  digitalWrite(L1, LOW);    // set the LED off
  digitalWrite(L2, LOW);    // set the LED off
  digitalWrite(L3, LOW);    // set the LED off
  delay(1000);
}

Exercise 1.

Using all of your red LEDs, make a circuit that reproduces KITT’s flashing light pattern from Knight Rider.

Upload a video of your working circuit on YouTube and post the link on the blog. Include your Arduino code.

To upload code into the blog, we are using the WP-Syntax WordPress plugin. To embed code in your post, switch to the “HTML” view tab in the WordPress editor, and then wrap your code with the following tags:

 

 

Exercise 2

Get working “Circuit #3” (RGB LED) from the SIK GUIDE book. The code for this sketch is available at http://www.sparkfun.com/sikcode

/*
SparkFun Inventor's Kit
Example sketch 03
 
RGB LED
 
  Make an RGB LED display a rainbow of colors!
 
Hardware connections:
 
  An RGB LED is actually three LEDs (red, green, and blue) in
  one package. When you run them at different brightnesses,
  the red, green and blue mix to form new colors.
 
  Starting at the flattened edge of the flange on the LED,
  the pins are ordered RED, COMMON, GREEN, BLUE.
 
  Connect RED to a 330 Ohm resistor. Connect the other end
  of the resistor to Arduino digital pin 9.
 
  Connect COMMON pin to GND.
 
  Connect GREEN to a 330 Ohm resistor. Connect the other end
  of the resistor to Arduino digital pin 10.
 
  Connect BLUE to a 330 Ohm resistor. Connect the other end
  of the resistor to Arduino digital pin 11.
 
This sketch was written by SparkFun Electronics,
with lots of help from the Arduino community.
Visit http://learn.sparkfun.com/products/2 for SIK information.
Visit http://www.arduino.cc to learn about the Arduino.
 
Version 2.0 6/2012 MDG
*/
 
// First we'll define the pins by name to make the sketch
// easier to follow.
 
// Here's a new trick: putting the word "const" in front of a
// variable indicates that this is a "constant" value that will
// never change. (You don't have to do this, but if you do, the
// Arduino will give you a friendly warning if you accidentally
// try to change the value, so it's considered good form.)
 
const int RED_PIN = 9;
const int GREEN_PIN = 10;
const int BLUE_PIN = 11;
 
// This variable controls how fast we loop through the colors.
// (Try changing this to make the fading faster or slower.)
 
int DISPLAY_TIME = 100;  // In milliseconds
 
void setup()
{
  // Here we'll configure the Arduino pins we're using to
  // drive the LED to be outputs:
 
  pinMode(RED_PIN, OUTPUT);
  pinMode(GREEN_PIN, OUTPUT);
  pinMode(BLUE_PIN, OUTPUT);
}
 
void loop()
{
  // In this sketch, we'll start writing our own functions.
  // This makes the sketch easier to follow by dividing up
  // the sketch into sections, and not having everything in
  // setup() or loop().
 
  // We'll show you two ways to run the RGB LED.
 
  // The first way is to turn the individual LEDs (red, blue,
  // and green) on and off in various combinations. This gives you
  // a total of eight colors (if you count "black" as a color).
 
  // We've written a function called mainColors() that steps
  // through all eight of these colors. We're only "calling" the
  // function here (telling it to run). The actual function code
  // is further down in the sketch.
 
  mainColors();
 
  // The above function turns the individual LEDs full-on and
  // full-off. If you want to generate more than eight colors,
  // you can do so by varying the brightness of the individual
  // LEDs between full-on and full-off.
 
  // The analogWrite() function lets us do this. This function
  // lets you dim a LED from full-off to full-on over 255 steps.
 
  // We've written a function called showSpectrum() that smoothly
  // steps through all the colors. Again we're just calling it
  // here; the actual code is further down in this sketch.
 
  showSpectrum();
}
 
// Here's the mainColors() function we've written.
 
// This function displays the eight "main" colors that the RGB LED
// can produce. If you'd like to use one of these colors in your 
// own sketch, you cancopy and paste that section into your code.
 
void mainColors()
{
  // Off (all LEDs off):
 
  digitalWrite(RED_PIN, LOW);
  digitalWrite(GREEN_PIN, LOW);
  digitalWrite(BLUE_PIN, LOW);
 
  delay(1000);
 
  // Red (turn just the red LED on):
 
  digitalWrite(RED_PIN, HIGH);
  digitalWrite(GREEN_PIN, LOW);
  digitalWrite(BLUE_PIN, LOW);
 
  delay(1000);
 
  // Green (turn just the green LED on):
 
  digitalWrite(RED_PIN, LOW);
  digitalWrite(GREEN_PIN, HIGH);
  digitalWrite(BLUE_PIN, LOW);
 
  delay(1000);
 
  // Blue (turn just the blue LED on):
 
  digitalWrite(RED_PIN, LOW);
  digitalWrite(GREEN_PIN, LOW);
  digitalWrite(BLUE_PIN, HIGH);
 
  delay(1000);
 
  // Yellow (turn red and green on):
 
  digitalWrite(RED_PIN, HIGH);
  digitalWrite(GREEN_PIN, HIGH);
  digitalWrite(BLUE_PIN, LOW);
 
  delay(1000);
 
  // Cyan (turn green and blue on):
 
  digitalWrite(RED_PIN, LOW);
  digitalWrite(GREEN_PIN, HIGH);
  digitalWrite(BLUE_PIN, HIGH);
 
  delay(1000);
 
  // Purple (turn red and blue on):
 
  digitalWrite(RED_PIN, HIGH);
  digitalWrite(GREEN_PIN, LOW);
  digitalWrite(BLUE_PIN, HIGH);
 
  delay(1000);
 
  // White (turn all the LEDs on):
 
  digitalWrite(RED_PIN, HIGH);
  digitalWrite(GREEN_PIN, HIGH);
  digitalWrite(BLUE_PIN, HIGH);
 
  delay(1000);
}
 
// Below are two more functions we've written,
// showSpectrum() and showRGB().
 
// showRGB() displays a single color on the RGB LED.
// You call showRGB() with the number of a color you want
// to display.
 
// showSpectrum() steps through all the colors of the RGB LED,
// displaying a rainbow. showSpectrum() actually calls showRGB()
// over and over to do this.
 
// We'll often break tasks down into individual functions like
// this, which makes your sketches easier to follow, and once
// you have a handy function, you can reuse it in your other
// programs.
 
// showSpectrum()
 
// This function steps through all the colors of the RGB LED.
// It does this by stepping a variable from 0 to 768 (the total
// number of colors), and repeatedly calling showRGB() to display
// the individual colors.
 
// In this function, we're using a "for() loop" to step a variable
// from one value to another, and perform a set of instructions
// for each step. For() loops are a very handy way to get numbers
// to count up or down.
 
// Every for() loop has three statements separated by semicolons:
 
//   1. Something to do before starting
 
//   2. A test to perform; as long as it's true,
//      it will keep looping
 
//   3. Something to do after each loop (usually
//      increase a variable)
 
// For the for() loop below, these are the three statements:
 
//   1. x = 0;     Before starting, make x = 0.
 
//   2. x < 768;   While x is less than 768, run the
//                 following code.
 
//   3. x++        Putting "++" after a variable means
//                 "add one to it". (You can also use "x = x + 1")
 
// Every time you go through the loop, the statements following
// the loop (those within the brackets) will run.
 
// And when the test in statement 2 is finally false, the sketch
// will continue.
 
void showSpectrum()
{
  int x;  // define an integer variable called "x"
 
  // Now we'll use a for() loop to make x count from 0 to 767
  // (Note that there's no semicolon after this line!
  // That's because the for() loop will repeat the next
  // "statement", which in this case is everything within
  // the following brackets {} )
 
  for (x = 0; x < 768; x++)
 
  // Each time we loop (with a new value of x), do the following:
 
  {
    showRGB(x);  // Call RGBspectrum() with our new x
    delay(10);   // Delay for 10 ms (1/100th of a second)
  }
}
 
// showRGB()
 
// This function translates a number between 0 and 767 into a
// specific color on the RGB LED. If you have this number count
// through the whole range (0 to 767), the LED will smoothly
// change color through the entire spectrum.
 
// The "base" numbers are:
// 0   = pure red
// 255 = pure green
// 511 = pure blue
// 767 = pure red (again)
 
// Numbers between the above colors will create blends. For
// example, 640 is midway between 512 (pure blue) and 767
// (pure red). It will give you a 50/50 mix of blue and red,
// resulting in purple.
 
// If you count up from 0 to 767 and pass that number to this
// function, the LED will smoothly fade between all the colors.
// (Because it starts and ends on pure red, you can start over
// at 0 without any break in the spectrum).
 
void showRGB(int color)
{
  int redIntensity;
  int greenIntensity;
  int blueIntensity;
 
  // Here we'll use an "if / else" statement to determine which
  // of the three (R,G,B) zones x falls into. Each of these zones
  // spans 255 because analogWrite() wants a number from 0 to 255.
 
  // In each of these zones, we'll calculate the brightness
  // for each of the red, green, and blue LEDs within the RGB LED.
 
  if (color = 512       // zone 3
  {
    redIntensity = (color - 512);         // red off to on
    greenIntensity = 0;                   // green is always off
    blueIntensity = 255 - (color - 512);  // blue on to off
  }
 
  // Now that the brightness values have been set, command the LED
  // to those values
 
  analogWrite(RED_PIN, redIntensity);
  analogWrite(BLUE_PIN, blueIntensity);
  analogWrite(GREEN_PIN, greenIntensity);
}

Code to slowly fade from one random color to another:

// This program blends smoothly (linearly)
// from one random color, to another, 
// over the course of a period of 1000 milliseconds
 
const int RED_PIN   = 9;
const int GREEN_PIN = 10;
const int BLUE_PIN  = 11;
 
int rp,gp,bp; // the P (previous) color
int rn,gn,bn; // the N (next) color
 
int prevChangeTime;
int period = 1000;
 
//---------------------------------------------
void setup() {
  pinMode (RED_PIN,   OUTPUT);
  pinMode (GREEN_PIN, OUTPUT);
  pinMode (BLUE_PIN,  OUTPUT);
 
  prevChangeTime = 0;
  int rp = random (0,255);
  int gp = random (0,255);
  int bp = random (0,255);
  int rn = random (0,255);
  int gn = random (0,255);
  int bn = random (0,255);
}
 
//---------------------------------------------
void loop() {
 
  int curTime = millis();
  int elapsed = curTime - prevChangeTime;
 
  if (elapsed > period){ 
	prevChangeTime = curTime; 
	rp = rn;
	gp = gn;
	bp = bn;
	rn = random (0,255);
	gn = random (0,255);
	bn = random (0,255);
  }
 
  int rc = map (elapsed, 0, period, rp, rn);
  int gc = map (elapsed, 0, period, gp, gn);
  int bc = map (elapsed, 0, period, bp, bn);
 
  analogWrite (RED_PIN,   rc);  
  analogWrite (GREEN_PIN, gc); 
  analogWrite (BLUE_PIN,  bc); 
}
Comments Off on 09c. Blinking LEDs Posted in

09a. Your Arduino Kit

Download the intro to Arduino comic from here

Your Arduino kits have been designed and provided by Ben Peoples of BirdBrain Labs, Pittsburgh’s very own travelling Arduino salesman. The kits consist of a Sparkfun Inventor’s Kit base, along with a small handful of extra goodies. The total cost will be just about exactly $100:

Sparkfun Inventor’s Kit (SIK):

Birdbrain Labs Enhancements:

  • 0.5” Diameter FSR
  • Tilt ball switch
  • Slide Potentiometer w/ leads & Knob
  • 1:120 Gearhead motor w/ 3mm D-shaft & leads
  • 2-position toggle switch (On-On) with leads
  • Hall Effect Sensor
  • Nice potentiometer
  • Big Red Button
  • (2) 12” M-F 1×6 Extensions
  • (3) 20” alligator clips
  • TIP120 5A Transistor

Teaching Kit Enhancements:

  • 3-axis Analog Accelerometer w/ headers installed
  • Sharp IR distance sensor
Comments Off on 09a. Your Arduino Kit Posted in

Lecture 09

Introduction to Arduino & electronics for the arts.

See sub-lectures linked from the main pull-down menu (above).

Comments Off on Lecture 09 Posted in

Lecture 06b

  • modulo (%) arithmetic
  • case, switch
  • if/mouse: make a button
  • click, set a boolean

The Trinary (or Ternary) Comparison Operator (see http://en.wikipedia.org/wiki/Ternary_operation):

void setup() {
  size(400, 200);
}
 
void draw() {
  int g = (mouseX < 200) ? 0 : 255;
  background (g);
}

Modulo Arithmetic: the % operator

size(400, 100);
 
background(255);
for (int i=0; i

Trigger an event every N frames, using modulo arithmetic:

void setup() {
  size(400, 100);
}
 
void draw() {
  fill(0);
 
  int x = frameCount % 100;
  if (x == 0){
    background(255,0,0);
    text("bang!!", 200,50);
 
  } else {
    background(129);
    text(x, 200,50);
  }
}

Periodic movement (animation) using Modulo Arithmetic:

float x = 0; 
 
void setup() {
  size(400, 100);
}
 
void draw() {
  background(255);
  fill(0);
 
  x = x + 2.7;
  float pos = x % width;
  ellipse (pos, 50, 20,20);
}

Periodic color animations with Modulo Arithmetic:

void setup() {
  size(400, 150);
}
 
void draw() {
 
  int moddedCounter = frameCount % 100;
  float grayLevel = map(moddedCounter, 0,100, 0,255);
  background(grayLevel); 
 
  fill (255-grayLevel); 
  text(moddedCounter, width/2, height/2); 
}

Switch{} statement as alternative to a large number of if/else{}:

char theKey;
 
//=======================
void setup() {
  size(400, 400);
}
 
//=======================
void keyPressed() {
  theKey = key;
  println("At " + millis() + " milliseconds, you pressed " + theKey);
}
 
//=======================
void draw() { 
  background(200);
 
  switch (theKey) {
 
  case 'e':
  case 'E':
    if (theKey == 'e') {
      strokeWeight(1);
    } else {
      strokeWeight(5);
    }
    ellipse(200, 200, 100, 100);
    break;
 
  case 'r':
  case 'R':
    rect (100, 150, 200, 100); 
    break;
 
  case 's':
    rect (150, 150, 100, 100);
    break;
 
  default:
    break;
  }
 
}

Comparison: Random position, non-drunk walk:

void setup() {
  size (300, 300);
}
 
void draw() {
  background(200);
 
  float rx;
  float ry; 
  rx = width/2;
  ry = height/2;
 
  rx = rx + random(-10, 10);
  ry = ry + random(-10, 10); 
  ellipse(rx, ry, 40, 40);
}

Comparison: Random position, drunk walk — achieved through proper scoping of (persistent) variables:

float rx;
float ry; 
 
void setup() {
  size (300, 300);
  rx = width/2;
  ry = height/2;
}
 
void draw() {
  background(200);
  rx = rx + random(-10, 10);
  ry = ry + random(-10, 10); 
  ellipse(rx, ry, 40, 40);
}

A simple toggle, achieved through negation of a boolean state variable:

boolean isTheBackgroundBlack; 
 
void setup(){
  size(200,200);
  isTheBackgroundBlack = true;
}
 
void draw(){
  if (isTheBackgroundBlack){
    background(0,0,0); 
  } else {
    background(255,200,200);
  }
}
 
void mousePressed(){
   isTheBackgroundBlack = ! isTheBackgroundBlack;
}

Back and Forth Linear Motion:

// back-and-forth motion
float xPos;
float myDirection  = 1;
void setup() {
  size(300,300); 
  xPos = 0; 
}
 
void draw() {
  background(255); 
  fill(255,0,0);
 
  float mySpeed = mouseX / 100.0;
  xPos = xPos + myDirection * mySpeed;
  if (xPos > width){
    myDirection = -1;
  }
  if (xPos < 0){
    myDirection =  1;
  }
  ellipse(xPos, 150, 40,40);
}
Comments Off on Lecture 06b Posted in

Lecture 06

Topics

  • Motion:
    • Circular Motion
    • Lissajous Figures
    • Interpolated Motion
    • Drunk Walk

And

  • Interaction
    • Mouse Interaction
    • Keyboard Interaction
  • State Machines
    • booleans that govern display conditions
  • Functional Abstraction

Homework (due Monday October 8):

  • Clicker Square exercises
  • Rubber Stamp exercises
  • Abstract Clock artwork

Circular Motion:

// Circular motion
void setup() {
  size(300, 300);
}
 
void draw() {
  smooth();
  // comment or uncomment background to leave trails.
  //background(127); 
 
  float centerX   = 150;
  float centerY   = 150;
  float amplitude = 50.0;
  float period    = 0.003;
 
  // Circular motion linked to the (time-varying) millis() function. 
  // Note that millis() gets large fast (1000 per second!), 
  // so we have to multiply it by a small number to work well.
  float xPos = centerX + amplitude * sin(millis()*period);
  float yPos = centerY + amplitude * cos(millis()*period);
  ellipse(xPos, yPos, 20, 20);
}

Lissajous Figures

// Lissajous figures
void setup(){
  size(300,300);
}
 
void draw(){
  smooth();
  //background(127);
 
  float centerX = 150;
  float amplitudeX = 100.0;
  float amplitudeY = 100.0;
  float periodX = 0.003;
  float periodY = periodX * 3.0; // try different ratios!
 
  float xPos = centerX + amplitudeX * sin(millis()*periodX);
  float yPos = centerX + amplitudeY * cos(millis()*periodY);
  ellipse(xPos, yPos, 20,20);
}

Interpolated Motion:

// Zeno's interpolated motion
float xPos;
float yPos;
 
void setup(){
  size(300,300);
  xPos = width/2;
  yPos = height/2;
}
 
void draw(){
  // on each frame, move 5% towards the target (mouse) in X, 
  //            and move 2% towards the target (mouse) in Y 
 
  xPos = 0.95*xPos + 0.05*mouseX; 
  yPos = 0.98*yPos + 0.02*mouseY;
  ellipse(xPos, yPos, 20,20);
}

Drunk Walk:

// Drunk walk! A random offset on each frame. 
// It creates a feedback, using the global variables xPos and yPos:
// Their current values are related to their previous values.
float xPos;
float yPos;
 
void setup(){
  size(300,300);
  xPos = width/2;
  yPos = height/2;
}
 
void draw(){
  background(127);
 
  // my current position is a small random offset from my previous position. 
  xPos = xPos + random(-3,3); 
  yPos = yPos + random(-3,3);
  ellipse(xPos, yPos, 20,20);
}

Back and Forth Linear Motion:

// back-and-forth motion
float xPos;
float myDirection  = 1;
void setup() {
  size(300,300); 
  xPos = 0; 
}
 
void draw() {
  background(255); 
  fill(255,0,0);
 
  float mySpeed = mouseX / 100.0;
  xPos = xPos + myDirection * mySpeed;
  if (xPos > width){
    myDirection = -1;
  }
  if (xPos < 0){
    myDirection =  1;
  }
  ellipse(xPos, 150, 40,40);
}
Comments Off on Lecture 06 Posted in

Lecture 05

Lectures are henceforth renumbered, to maintain parity with the Assignments. This lecture is associated with Assignment 5, due Monday, October 1.


But first:
Michael Hansmeyer on Generative Form-Making (11′, from TED):

Additional examples of generative art developed from iteration + randomness:


Review of Last Week’s Material:

Variables, Iteration, Blocks
A reminder of the basics.

  • Recap of variables (The multiple-lines example)
  • for loops (The multiple-lines example, generalized)
  • Side note: Variables are scoped with respect to { } blocks.

Diagnosing your code
How can you inspect the value which some variable holds?

  • Printing the values of variables to the console
  • Constructing simple strings through concatenation.
  • Displaying strings by drawing text() to the canvas

Discussion topics for Monday 9/24:

  • Basic mathematics and order of operations;
  • Variables: integers vs. floats
  • integer vs. float mathematics
  • brief mention of char, byte, String, boolean variables
  • random()

New Topics for Wednesday 9/26:

Towards greater sophistication.

  • translate(), scale(), rotate()
  • map(), constrain()

Mouse Interaction
Interactions based on continuous cursor data.

  • Printing out the mouse values
  • A ball linked to the mouse directly
  • A ball mathematically related to the mouse value
  • A ball linked to the mouse by inverse relationships
  • A ball linked to the mouse by an intermediate variable

Conditional Testing and Interaction
The if{} structure, with discrete and continuous mouse data.

  • Introduction to conditional testing. if (mouseX > val)
  • Interactions based on discrete mouse data: if (mousePressed)
  • The mousePressed() method
  • A latch, which calls draw() only after mousePressed().

Readings:

  • 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;
    • Math 4: Random;
    • Transform 1: Translate, Matrices
    • Transform 2: Rotate, Scale

For Loop Example
In this example, a for{} loop is used to govern the (A) vertical position and (B) stroke color, of a set of horizontal lines.

// For Loop Example
size (300, 300);
 
background (255, 200, 200);
strokeWeight (3);
stroke(0, 0, 0);
fill (155, 255, 255);
smooth();
 
float leftEdge  = 30;
float rightEdge = 200;
float mySpacing = 20;
int   nLines = 14;
 
for (int i=1; i <= nLines; i=i+1) {
  float greyVal = map(i, 1, nLines, 0, 255); 
  stroke (greyVal);
 
  float yPosition = i*mySpacing;
  line (leftEdge, yPosition, rightEdge, yPosition);
  ellipse (rightEdge, yPosition, 13, 13);
}

For Loop With Random Numbers
In this example, a for{} loop is used to control the (A) fill color and (B) horizontal position of a set of circles. What happens if the line which declares and assigns the float variable “ry” is pulled outside of the for{} loop?

// For Loop With Random Numbers
size (300, 300);
background (255, 200, 200);
strokeWeight (2);
smooth ();
 
line (0,150, width,150);
for (int i=0; i < 10; i++) {
  float rx = i*30 + 15;
  float ry = random(140, 160);   // Y positions are randomized within 140..160
 
  float rGray = random(0, 255);  // Gray values are randomized within 0...255
  fill (rGray); 
  ellipse (rx, ry, 20, 20) ;
}

Live interaction with iteration (for loop):
This code demonstrates how a for{} loop can be used to draw a structure which responds in real-time to interactive input.

// Live interaction with iteration (for loop)
void setup() {
  size (400, 300);
}
 
void draw() {
  background(255, 200, 200);
  strokeWeight(3); 
  smooth( );
 
  for (int i=1; i<20; i++) {
    if (i == 8) {  // Equality test. Note the "double-equals" ( == ) !!!!
      stroke(255, 0, 0);
      line (width/2, 0, mouseX, mouseY);
    } 
    else {
      stroke (0, 0, 0);
      ellipse(i*20, mouseY-50, 25, 25);
    }
  }
}

Embedded Iteration
This is the classic “nested for{} loop”, in which one loop (controlling vertical position and green-ness) is nested inside an outer loop (which controls horizontal position and redness).

// Embedded Iteration
 
size (400, 400); 
background(255, 200, 200);
fill(255, 0, 0); 
smooth(); 
 
for (int x=1; x<20; x=x+1) {
  for (int y=1; y<20; y=y+1) {  
    fill (x*20, y*20, 0);
    ellipse (x*20, y*20, 14, 14);
  }
}

Comments Off on Lecture 05 Posted in

Lecture 02

Processing: Let there be line!

line(10, 10, 40, 60);

For discussion:

  • Running a program; the empty program;
  • commands, syntax, parameters (arguments);
  • the importance of non-alphanumeric characters: parenthesis vs. brackets, commas, semicolon;
  • coordinate system
  • code typography; whitespace-insensitivity.

Canvas

size(500, 500);
background (255, 255, 255);

2D Primitives

point (300, 300);
triangle (10, 20, 50, 200, 200, 100);
  • Make it isosceles!

Quadrilateral

quad (10, 10, 120, 20, 100, 150, 10, 100);
  • Make it rectangular!
  • Make a square!
  • Make a butterfly!

Rectangle

rect (100, 100, 200, 100);
  • Make a square!
  • Center it!

Ellipse

ellipse (300, 200, 300, 200);

How does it work? Check the Processing reference manual
Inscribe the circle in the canvas!


Comments

//why comments
/*
Because they make your code readable.
(O_o)
*/

Attributes

strokeWeight(4);

“camelBack” convention. keepItInMind.
Processing is case sensitive; strokeWeight and strokeweight are not the same.

size(500, 500);
background (255, 255, 255);
line(10, 10, 360, 50);

Pen state

Pixelated line: ugly

size(500, 500);
background (255, 255, 255);
smooth();
line(10, 10, 360, 50);

Antialiased: pretty

size(500, 500);
background (255, 255, 255);
smooth();
line(10, 10, 360, 50);
stroke(255, 0, 0);
line(10, 30, 360, 70);

The state of your pen and your canvas remains the same until you change it.
If you don’t touch it, Processing uses the default.

Colors

//try this
background (255, 255, 255);
//and then try this
//background (0, 0, 0);

Red green blue 0-255.
Make it red!
Try the color picker!

...
strokeWeight(4);
stroke(255, 0, 0);
//noStroke();
fill(0, 255, 0);
//noFill()
triangle(10, 20, 50, 200, 200, 100);

Ok, you are an Artist now. Reproduce the Mondrian! Go!

 

Transparency

size(500,500);
background (255, 255, 255);
smooth();
noStroke();
fill(255,0,0);
rect(100, 100, 100, 100);
fill(0,0,255,127); // try changing the '127'
rect(150, 150, 100, 100);

Transparency is also known as the alpha channel.

Arcs

size(500,500);
background (255, 255, 255);
smooth();
fill(142, 199, 242);
arc(150, 150, 300, 300, 0, PI/2);

The beginning and the end are a little tricky.
Remember: 0 is center right, 2*PI is the full circle. PI half circle. HALF_PI a quarter-circle etc…

  • Draw a pacman!
  • Draw a smiley face!
Comments Off on Lecture 02 Posted in

Lecture 01

Daito Manabe, Electric Stimulus to Face
[http://www.youtube.com/watch?v=YxdlYFCp5Ic]
And http://www.youtube.com/watch?v=pLAma-lrJRM

Kyle McDonald and Arturo Castro, Face Substitution

Julius von Bismark, Image Fulgurator
[http://www.youtube.com/watch?v=EAX_3Bgel7M]

Generativity

Jason Salavon, Vanitas
Jason Salavon, Hero Town

 

Information Visualization as Art

Jason Salavon, 100 Special Moments
Jason Salavon, Every Playboy Centerfold

Aaron Koblin, The Sheep Market
Aaron Koblin, Flight Patterns

Martin Wattenberg, Baby Name Voyager
Martin Wattenberg, ColorCode