Category: Creative Coding

Assignment: Text Generator

Starting from the example here, create a random text generator “with a purpose”. Try to surprise yourself with the combinations!
Download example

The template should work without any installation, the library is included in the folder.
You can only edit the text files respecting the syntax.
(It is based on the Rita library).

By Monday December 2 come up with an idea (possibly more), do the research and collect all the material you need to work.
Monday is going to be a work day.

Potential Literature

fridge_poetry

The “modularity” principle we found in new media is the basis of all languages: we combine a set of symbols to compose words, words to make sentences and so on.
The part of a text are clearly distinct and easy to recombine, and especially in poetry new unexpected meanings can emerge from arbitrary juxtapositions.
Many writers, poets and artists experimented with loss of control in writing.

Given enough time, a hypothetical monkey typing at random would, as part of its output, almost surely produce all of Shakespeare’s plays.
– the Infinite Monkey Theorem

Not to be taken literally…

In an experiment conducted in a Zoo in England, zookeepers left a computer keyboard in the cage of six macaques for a month. The monkeys produced only a five page document, consisting mostly of the letter S, until the alpha male bashed the keyboard with a stone and all the other monkeys urinated and defecated on it.
– Dario Maestripieri, Primatologist

Writers and artists have been fascinated with randomness and with the combinatorial properties of text since DADA.


To make a Dadaist poem
Take a newspaper.
Take a pair of scissors.
Choose an article as long as you are planning to make your poem.
Cut out the article.
Then cut out each of the words that make up this article and put them in a bag.
Shake it gently.
Then take out the scraps one after the other in the order in which they left the bag.
Copy conscientiously.
The poem will be like you.
And here you are a writer, infinitely original and endowed with a sensibility that is charming though beyond the understanding of the vulgar.
– Tristan Tzara, 1920

Writer William Burroughs in the ’50s applied this technique, dubbed cut-up technique, to his own writing and recordings. (And David Bowie, and Kurt Cobain, and Thom Yorke…)

At that point, artists were applying randomness not only to text:

In John Cage’s Music of Changes (1951) the composer selected duration, tempo, and dynamics by using the I-Ching, an ancient Chinese book which prescribes methods for arriving at random numbers.

Raymond Queneau – Hundred Thousand Billion Poems (1961)

Web port here

Queneau was the founder of Oulipo – Ouvroir de littérature potentielle (workshop of potential literature). They wrote with artificial constraints in writing like palindromes or lipograms or story generating algorythms.

Principle of variability in new media

A new media object is not something fixed once and for all but can exist in different, potentially infinite, versions. This is another consequence of numerical coding of media and modular structure of a media object
Lev Manovich – The language of New Media

The first example of Computer based text generator is Loveletter by Christopher Strachey (1952)
Web version

The Policeman’s Beard is Half Constructed is the first book supposedly written by a an artificial intelligence program called RACTER in 1983. In reality it used prewritten madlib-like templates with randomized word.

Happily and sloppily a skipping jackal watches an aloof crow. This is enthralling. Will the jackal eat the crow? I fantasize about the jackal and the crow, about the crow in the expectations of the jackal.
Babbitt, along with other enthusiasts, married a runner, and consequently L. Ron Hubbard married Schubert, the confused feeler, himself who was divorcing L. Ron Hubbard’s Tasmanian devil. Then elegance prevailed. Poor Babbitt! But that’s how enthusiasts are.

The Policeman’s Beard is Half Constructed

Context free grammars
Generation of text according to formal rules.

Taroko Gorge by Nick Momford. Derivative works using different databases and algorithms.

Word generation under constraint:
Adhesion text
You can create pretty interesting literature with it.

Text generation as parody:

Postmodernism generator

And…
Automatic CS Paper Generator

Art critique generator

Artist Statement
Bad literature

And so on…

Machine imagined art
– based on the Tate database

Meaning by Eugenio Tisselli, 2005
Each time this page is visited, one of the words in the following section will be replaced by a synonym. The replaced word is shown in bold. Refresh the page to replace another word.
(Bad) jokes generation
By Darius Kazemi
You must be – from dictionary
Two headlines – from headlines
Amrite – from twitter trends and ryhmes
metaphor-a-minute
– from dictionary
freestyle 80s battle rap generator – dictionary and fixed templates

Markov Chain generation
The algorithm analyzes a source text and stores all the variations of a sequence of n letters.
Text generation starts from a random 5-character sequence present in the table, then out of the possible resolutions it randomly picks the next symbol.

'hello ' -> [m,w,p] chooses 'm' (randomly)
'ello m' -> [a,a,a,o,o] chooses 'a' (randomly)
'llo ma' -> [m]
'lo mam' -> [a,b]
'o mama' -> [' ']
' mama ' -> [w,!]
'mama w'....

The result is text that sounds right but doesn’t make any sense.

Example Dissociated press

The most common and utilitarian use of Markov chain for text generation is Spam

living with bubble bounce fairy from diskette.
Still eat her from cream puff
from, ignore her around widow with fairy living with freight train.cleavage
ignore from industrial complex.

Because is predestined friends,
Designer Shoes
we meet by chance in the space,
because is sincere,
we become the friend who separates the screen,
a blessing,
worries,

Wholesale designer shoes
our invariable subject
stays behind in your space
belongs to my footprint
to remain the regard your space
to wish your joyful happy each day!

From Spam Poetry Institute

What would I say
– based on your Facebook updates

Sound with Arduino and Processing

Since you are all obsessed with making noisy things here are two examples.

The Processing library for sounds is minim. It is included in Processing and you can find examples in the example menu.

Here’s a basic one to play sound files. You need a file in your folder. You can grab this one for testing:

import ddf.minim.*;
Minim minim;
 
//this is the object that plays your file
AudioPlayer player;
 
void setup()
{
  size(300, 300);
 
  //initialize minim
  minim = new Minim(this);
 
  // loadFile will look in all the same places as loadImage does.
  // this means you can find files that are in the data folder and the 
  // sketch folder. you can also pass an absolute path, or a URL.
  // mp3, wav, ogg should all work
  player = minim.loadFile("test.wav");
 
  // play the file
  player.play();
}
 
void draw()
{
 background(0);
 
  //check if the reproduction is in process
  if ( player.isPlaying() )
  {
    text("The player is playing.", 5, 15);
  }
  else
  {
    text("The player is not playing.", 5, 15);
  }
}
 
//replay the file if the mouse is pressed
void mousePressed()
{
  //it's weird but you have to rewind a file to play it
  player.rewind();
  player.play();
}
 
//stop is called when you hit stop on processing. Just leave this here
void stop()
{
  player.close();
  minim.stop();
  super.stop();
}

This is a modification of the above that receives an input from Arduino via Firmata. READ THE POST ARDUINO + PROCESSING FIRST:

//import the libraries for serial communication
//and for arduino/firmata specifically
//and firmata
import ddf.minim.*;
import processing.serial.*;
import cc.arduino.*;
 
//this object represents your board
Arduino arduino;
//this is the minim environment
Minim minim;
 
//this is the object that plays your file
AudioPlayer player;
 
//like in an arduino sketch it's good to
//use variables for pin numbers 
int sensorPin = 0;
 
//this is the minimum value from the sensor that will trigger the sound
int threshold = 360;
 
void setup()
{
  size(300, 300);
 
  //the arduino object needs to be created at the beginning
  arduino = new Arduino(this, Arduino.list()[0], 57600);
 
  //once it's created I set the pin modes  
  arduino.pinMode(sensorPin, Arduino.INPUT);
 
  //initialize minim
  minim = new Minim(this);
 
  // loadFile will look for a file in the data folder
  // mp3, wav, ogg should all work
  player = minim.loadFile("test.wav");
}
 
void draw()
{
  background(0);
 
  //read an analog value from the sensor pin
  int analogValue =  arduino.analogRead(sensorPin);
  println(analogValue); //print it for testing purposes
 
  //check if the reproduction is in process if not don't trigger another sound
  if ( player.isPlaying() == false && analogValue > threshold)
  {
    //it's weird but you have to rewind a file to play it
    player.rewind();
    player.play();
  }
}
 
//stop is called when you hit stop on processing. Just leave this here
void stop()
{
  player.close();
  minim.stop();
  super.stop();
}

Using OSX Text to speech from Arduino + Processing
Here’s a fun feature of Mac OSX. It may change depending on your version.
This sketch works like the one above but synthesize a voice from a String (text).

//import the libraries for serial communication
//and for arduino/firmata specifically
import processing.serial.*;
import cc.arduino.*;
import java.io.IOException;
 
//this object represents your board
Arduino arduino;
 
//like in an arduino sketch it's good to
//use variables for pin numbers 
int sensorPin = 0;
 
//this is the minimum value from the sensor that will trigger the sound
int threshold = 360;
//counter to avoid overlapping
int waitTime = 0;
 
void setup()
{
  size(300, 300);
 
  //the arduino object needs to be created at the beginning
  arduino = new Arduino(this, Arduino.list()[0], 57600);
 
  //once it's created I set the pin modes  
  arduino.pinMode(sensorPin, Arduino.INPUT);
}
 
void draw()
{
  background(0);
 
  //read an analog value from the sensor pin
  int analogValue =  arduino.analogRead(sensorPin);
  println(analogValue); //print it for testing purposes
 
  //if above a certain threshold and wait is over
  if (analogValue > threshold && waitTime <=0)
  {
    //your text
    String text = "Hello World";
    //your speed
    int voiceSpeed = 200;
 
    //reset the wait time according to length of text and speed
    //the 50 is a "magic number" you may need to tweak it according to your needs
    waitTime = text.length() * voiceSpeed / 50;
 
    /*the voice must be put in quotes, these are the available ones:
     Alex, Bruce, Fred, Junior, Ralph, Agnes, Kathy, Princess, Vicki, Victoria
     Albert, "Bad News", Bahh, Bells, Boing, Bubbles, Cellos, Deranged, "Good News",
     Hysterical, Pipe Organ, Trinoids, Whisper, Zarvox
     */
    say(text, "Alex", voiceSpeed);
  }
 
  //wait time is just a counter that lets some time pass between utterances 
  waitTime--;
  println("Waiting "+waitTime);
 
}
 
//this is the function that connects to the OSX text to speech system
void say(String script, String voice, int speed) {
  try {
    Runtime.getRuntime().exec(new String[] {
      "say", "-v", voice, "[[rate " + speed + "]]" + script
    }
    );
  }
  catch (IOException e) {
    System.err.println("IOException");
  }
}

Arduino + Processing

The easiest way to make Arduino and processing talk is via Firmata. Firmata is a program that runs on Arduino and allows you to control it from Processing. Basically, you’ll upload Firmata on your board once then you can close the Arduino app (the IDE) and then simply work from Processing.

The full instructions to make arduino talk to Processing through Firmata are here.
The setup is not hard:

1- Unzip the Processing library and copy the “arduino” folder into the “libraries” sub-folder of your Processing Sketchbook.
(You can find the location of your Sketchbook by opening the Processing Preferences. If you haven’t made a “libraries” sub-folder, create one.)

2- Run Arduino, open File > Examples > Firmata > StandardFirmata sketch,
and upload it to the Arduino board. You can now close the Arduino application.

3- Run the processing sketch below, it’s the infamous blinking LED. As you can see the commands are similar to pure Arduino except now you can mix Arduino code and Processing code in the same sketch:

import processing.serial.*;
import cc.arduino.*;
 
Arduino arduino;
int ledPin = 13;
 
void setup()
{
  //println(Arduino.list());
  arduino = new Arduino(this, Arduino.list()[0], 57600);
  arduino.pinMode(ledPin, Arduino.OUTPUT);
}
 
void draw()
{
  arduino.digitalWrite(ledPin, Arduino.HIGH);
  delay(1000);
  arduino.digitalWrite(ledPin, Arduino.LOW);
  delay(1000);
}

Obviously the Arduino needs to be connected to the computer with Processing all the time.

Processing and sensor
This is a more interesting example. You can use this circuit or something that uses an analog and a digital input:

//import the libraries for serial communication
//and for arduino/firmata specifically
import processing.serial.*;
import cc.arduino.*;
 
//this object class Arduino
//represents guess what? Your board
Arduino arduino;
 
//like in an arduino sketch it's good to
//use variables for pin numbers 
int buttonPin = 13;
int sensorPin = 0;
 
void setup() {
  size(500, 500);
  smooth();
  noStroke();
  ellipseMode(CENTER);
 
  //the arduino object needs to be created at the beginning
  arduino = new Arduino(this, Arduino.list()[0], 57600);
 
  //once it's created I set the pin modes  
  arduino.pinMode(buttonPin, Arduino.INPUT);
  arduino.pinMode(sensorPin, Arduino.INPUT); 
}
 
//we are in processing so the main function is draw (not loop)
void draw()
{
  //read a digital value from the button pin
  int digitalValue = arduino.digitalRead(buttonPin);
 
  //change the background accordingly
  if (digitalValue == Arduino.HIGH)
    background(255);
  else
    background(0);
 
  //read an analog value from the sensor pin
  int analogValue =  arduino.analogRead(sensorPin);
  println(analogValue); //print it for testing purposes
 
  //draw a red circle ellipse the size of the analog value
  fill(255,0,0);
  ellipse(width/2, height/2, analogValue, analogValue);
}

Some exercises:
– Threshold switch, if the sensor reaches a certain value the background changes.

– Combine this example with your order and chaos processing sketch, replacing the pressure sensor with a slider or another analog sensor.

– Team up with a friend and use two knobs potentiometers to make a digital etch-a-sketch. One pot controls x, controls y, the red buttons clear the drawing.

Interactive Object Proposals

1.) A fight with futility: A machine with a switch that, once it is turned on, a series of processes start that work to switch the button back and turn the machine off.

Or, painfully loud static noise playing from headphones, and the only way to turn then volume down is by yelling louder.

 

2.) A simple “On / Off” button that, when you switch it on, the computer randomly generates either “You win” or “You lose”. The code is very long and written as if there are many calculations and steps going into determining whether or not “you win”. The button is decked out with lots of wires and gadgetry to make it look like a very high tech machine, when it is actually just a very simple button.

Assignment: Particle System

This is a suggested starting point for the assignment. It’s a slightly different particle system than the one we programmed in class. The “things” move according to a angular direction instead of speedX and speedY.

int NUM_THINGS = 10;
 
// creating an (empty) global array with a
// capacity of 10 elements of type Ball
Thing[] things = new Thing[NUM_THINGS];
 
void setup() 
{
  size(500, 500); 
  smooth();
 
 
  for (int i = 0; i < NUM_THINGS; i++) 
  {
    things[i] = new Thing();   // populating the array
 
    things[i].x = random(0, width);
    things[i].y = random(0, height);
    things[i].direction = random(0, 360);
  }
}
 
void draw() 
{ 
  //bg is not conceptually part of the class
  background( 0, 0, 0);
 
  //call the method update everytime I draw
  for (int i = 0; i < NUM_THINGS; i++)
  {
    things[i].update();
  }
}
 
 
class Thing
{
  //parameters of my thing
  float myDiameter = 10;
  float x;
  float y;
  color col = #00FFFF;
  float speed = 1;
  float direction = 0;
 
  //Constructor function - same name as the class
  Thing()
  {
  /*
  like the setup in the main sketch the constructor function 
  is executed once as soon as the object is created
  */
  }
 
  //method(s) for my thing
  void update()
  {
    /*
    convert direction into radians
     break it down to the sinus and cosinus
     which are the vertical and horizontal component 
     of the angle then multiply for speed 
     (because in trigonometry you always work with a radius of 1)
     */
    float dX = cos(radians(direction))*speed;
    float dY = sin(radians(direction))*speed;
 
    //the result are the steps in the vertical and horizontal direction
    x = x + dX;
    y = y + dY;
 
    //direction++;
 
    //managing borders
    if (x > width)
    {
      x = 0;
    }
 
    if (x < 0)
    {
      x = width;
    }
 
    if (y > height)
    {
      y = 0;
    }
 
    if (y < 0)
    {
      y = height;
    }
 
    //draw the thing  
    fill(col);
    noStroke();
    ellipse(x, y, myDiameter, myDiameter);
 
    /*
    //example of interaction among things//
    //every object scans the other objects using the global array
    for (int i = 0; i < NUM_THINGS; i++)
    {
      //temporary variable to store the other
      Thing other = things[i];
 
      //it's not a good idea to make theinteract with itself
      //this points to the specific instance
      if (this != other)
      {
        //after I determine it's another thing I check the distance
        if (dist(x, y, other.x, other.y)<100)
        {
          //and do something
          stroke(255);
          line(x, y, other.x, other.y);
        }
      }
    }
    */
    ////////////
  }
}

Assignment

Start from this code and produce a “more interesting” “flock of things” using interaction and/or random (to change behavior every so often for example) and by interrelating the behavior of the various things with each other (uncomment the distance part).

Advanced: create one or more additional classes and produce an artificial ecosystem in wich certain objects interact with others.

Objects

Back to the circle animation:

int myDiameter = 10;
float posX = 250;
float posY = 250;
 
void setup() 
{
  size(500, 500); 
  smooth();
  noStroke();  
}
 
void draw() 
{ 
  background( 0, 0, 0);
  ellipse(posX, posY, myDiameter, myDiameter);
  posX++;
}

If we want to animate a circle we need to save coordinates.
But what if we want to move many circles, each one independently?
We can make more variables and arrays but when we have a whole lot of different entities with different characteristics it would become a nightmare.

The solution to this an many other problems are objects
and Object Oriented Programming OOP

How to write a class

A class is the code to defines a certain kind of object.
Class is the abstract idea, the blueprint. Objects are “instances” of a class.
Think about the idea of a cat and a cat specimen.

The code can go anywhere outside setup and draw or on another file:

//class name capitalized
class Ball
{
  //we move the variables here because
  //they belong only to this class
  //they are "properties" of this class
  int myDiameter = 10;
  float posX = 250;
  float posY = 250;
 
  //we move here all the functions that pertain to the class
  //they are called "methods"
  void update()
  {
  ellipse(posX, posY, myDiameter, myDiameter);
  posX++;
  }
}

Using Objects

Objects need to be declared like variables and created with the command “new”.

//declare an object myBall of the class Ball
Ball myBall;
 
void setup() 
{
  size(500, 500); 
  smooth();
  noStroke();
 
  //create the ball
  myBall = new Ball();
 
  //this is how I access the property of the object I just 
  //created, the default value of posX is immediately overwritten 
  myBall.posX = 100;
 
}
 
void draw() 
{ 
  //bg is not conceptually part of the class so it's in the draw function
  background( 0, 0, 0);
 
  //this is how I call the method update
  myBall.update();
}
 
 
class Ball
{
  //properties with default value
  int myDiameter = 10;
  float posX = 250;
  float posY = 250;
 
  //method that draws and moves the ball
  void update()
  {
  ellipse(posX, posY, myDiameter, myDiameter);
  posX++;
  }
}

Exercises:
Add a color property
Make the ball wrap around the screen
Create another instance of the ball

Arrays of objects

Objects are particularly useful when used in combination with arrays.
This program manages n balls “stored” in a global array.

 
int NUM_BALLS = 10;
 
// creating an (empty) global array with a
// capacity of 10 elements of type Ball
Ball[] myBalls = new Ball[NUM_BALLS];
 
void setup() 
{
  size(500, 500); 
  smooth();
  noStroke();
 
  // populating the array
  // with new Ball objects
 for (int i = 0; i < NUM_BALLS; i++) 
  {
    myBalls[i] = new Ball(); 
 
    //assigning random positions  
    myBalls[i].posX = random(0, width);
    myBalls[i].posY = random(0, height);
    myBalls[i].speed = 2;
  } 
}
 
void draw() 
{ 
  background( 0, 0, 0);
 
  //call the method update every time I draw
  for (int i = 0; i < NUM_BALLS; i++) 
  {
    myBalls[i].update();
  }
 
 
}
 
 
class Ball
{
  //properties
  int myDiameter = 10;
  float posX = 250;
  float posY = 250;
  color col = #00FFFF;
  float speed = 0;
 
  //methods
  void update()
  {
  fill(col);
  ellipse(posX, posY, myDiameter, myDiameter);
  posX = posX + speed;
 
  //bouncing back and forth
  if(posX > width)
    {
    //it's better to instantly update the ball position to the max
    posX = width;
    speed *= -1;
    }
 
  if(posX < 0)
    {
    //it's better to instantly update the ball position to the max
    posX = 0;
    speed *= -1;
    }
  }
 
}

Complexity and Emergence

Game of life by John Conway (1970)

Cellular Automata

Inspired by Go, originally implemented as analog system.

Two steps (generations) of the game of life

Try it in motion online or offline.
Reminds of fire burning forests, bacteria, molds, etc…
(SimCity is based on cellular automata as well)

Flocks

Flock algorithm (Boids) implementation in processing

Birds, fish, bugs, buffalos…

1) Don’t get too crowded.
2) Don’t get too isolated.
3) Swim with neighbors.
(An optional 4th rule is that you should do what it takes to flee predators)

Recursion


In order to understand recursion you must first understand recursion.
Ok, imagine a function that calls itself.

Soulwire recursion toy (click)

Fractals


Self similar patterns based on mathematical sets. Formulas are relatively simple to define but generate a great level of complexity.

Cauliflower, self-similar patterns are also found in nature

Mandelbrot Fractal Set

Some resources about fractals here.

Artificial Life


Levitated – Walking things


Levitated – Legged Creatures


Cindermedusae by Marcin Ignac

Evolutionary algorithms


Darwin Hill (arbitrary selection)


Karl Sims – Evolved Virtual Creatures, Evolution Simulation, 1994

Process:

  • Generate the initial population of individuals randomly – first Generation
  • Evaluate the fitness of each individual in that population
  • Repeat on this generation until termination (time limit, sufficient fitness achieved, etc.):
  • Select the best-fit individuals for reproduction – parents
  • Breed new individuals through crossover and mutation operations to give birth to offspring
  • Evaluate the individual fitness of new individuals
  • Replace least-fit population with new individuals


Communion by Matt Pyke (Universal Everything) and Field.io – Marcus Wendt and Vera-Maria Glahn. Video here.

The installation is in a rectangular room with 6 separate projection on the walls creating almost a 360º environment. The final piece includes an array or evolving creatures going through stages of development – evolution from simple to complex with human like properties with generative behaviours


Want more of this? Read Out of control by Kelvin Kelly. Not extremely new, a little too Californian Ideology (pre dot com boom) but still good.

Patterns, patterns, patterns…

Time functions and text (Clock)

This is how to use time functions (you also have day(), month(), year()). They simply read your operating system’s clock.

This sketch prints 3 bars proportional to seconds minutes and hours.

int s;
int m;
int h;
 
void setup()
{
  size(250, 250);
}
 
//this function is called 60 times per second
void draw()
{
  background(0);
 
  //update variables with time and date
  s = second();
  m = minute();
  h = hour();
 
  //change fill
  fill(255, 0, 0);
  //map the lenght of my bar according to my seconds
  float sWidth = map(s, 0, 60, 0, 200);
  //draw a rectangle
  rect(0, 0, sWidth, 50);
 
  //do the same for minutes and hours
  fill(0, 255, 0);
  float mWidth = map(m, 0, 60, 0, 200);
  rect(0,100, mWidth, 50);
 
  fill(0, 0, 255);
  float hWidth = map(h, 0, 23, 0, 200);
  rect(0,200, hWidth, 50);
 
}

How to make something happen every second (once).

int s;
int lastSecond;
 
void setup()
{
  size(200, 200);
}
 
//this function is called 60 times per second
void draw()
{
  s = second();
 
  //if the second was updated then do something once
  if (s != lastSecond)
  {
    println("A second elapsed");
    //update the last second
    lastSecond = s;
    //this variables will be the same until
    //the next second change in the clock
  }
}

Text Formatting

Formatting Text

You can change text color, it’s the same as the fill.

size(300,300);
background(0);
 
//text positioning
text("word", 15, 30);
//custom color
fill(0, 102, 153);
text("word", 15, 60);
//with alpha
fill(255, 255, 255, 100);
text("word", 15, 90);

You can use any font as long as you create a processing-friendly version.

Loading a font created with Processing -> tools -> Create font…

PFont font;
// The font must be located in the sketch's 
// "data" directory to load successfully
font = loadFont("CenturyGothic-32.vlw"); 
textFont(font, 32); 
text("word", 15, 50);

Alignment:

size(400, 200);
background(255);
fill(0);
textAlign(CENTER);
text("This text is centered.", width/2, 60); 
textAlign(LEFT);
text("This text is left aligned.", width/2, 100); 
textAlign(RIGHT);
text("This text is right aligned.", width/2, 140);

More advanced stuff

Common problem: second() is related to the system clock but millis() count starts as you run the applet.
Sometimes you need them to be in sync, for example if you want an analog clock with a second arm moving smoothly:

 
int millisRolloverTime;
int prevSec;
 
void setup()
{
  size(100, 100);
  millisRolloverTime = 0;
}
 
void draw()
{
  background(0);
 
  int H= hour ();
  int M= minute ();
  int S= second ();
 
  if (prevSec != S) {
    millisRolloverTime = millis();
  }
 
  prevSec = S;
  int mils = millis() - millisRolloverTime;
  text(second() + " " + mils, 10, 20);
 
}

Here’s a classic analog clock:

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
void setup() {
  size(200, 200);
  stroke(255);
  smooth();
}
void draw() {
  background(0);
  fill(80);
  noStroke();
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  ellipse(100, 100, 160, 160);
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
  float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
  stroke(255);
  strokeWeight(1);
  line(100, 100, cos(s) * 72 + 100, sin(s) * 72 + 100);
  strokeWeight(2);
  line(100, 100, cos(m) * 60 + 100, sin(m) * 60 + 100);
  strokeWeight(4);
  line(100, 100, cos(h) * 50 + 100, sin(h) * 50 + 100);
}

Sounds

We didn’t cover this in class but playing sound files in processing is very easy:

import ddf.minim.*;
 
Minim minim;
AudioPlayer song;
 
void setup()
{
  size(100, 100);
 
  minim = new Minim(this);
 
  // this loads mysong.wav from the data folder
  song = minim.loadFile("mysong.wav");
  song.play();
}
 
void draw()
{
  background(0);
}
 
void stop()
{
  song.close();
  minim.stop();
 
  super.stop();
}

More info here:
http://code.compartmental.net/tools/minim/quickstart/

Like when using external images, to submit on processing you have to export as applet and include all the external files in the zip.

Assignment: Clock Part 1

Looking outward: Information Visualization
Find an example of interesting information visualization and post it / review it on the blog.

It doesn’t have to be related to time measurement but it should be an inspiration for your design

http://infosthetics.com/

Creative applications – visualization

http://www.dataisnature.com/

Clock proposal
Produce at least TWO mock ups for for a non-traditional time visualization / clock / calendar like the examples we saw in class. At least one of the two must be abstract.

* Design something that can be implemented in Processing – that will be the next step!

* You can use photoshop, illustrator, flash, after effects or even processing in static mode. I don’t recommend it but you may also use traditional media, just scan your drawings and add information about colors.

* Try to no use silly external images like cats, internet memes, Pokemons and stuff

* Upload it on the blog and add some text to describe the mechanics