Posted by & filed under Uncategorized.

We talked about a ton of things this week.

1. Objects review
2. The Matrix
3. Rotation
4. 3D
5. Pixels!
6. Pixels and the video camera
7. OpenCV
8. More Libraries: Minim
9. More Libraries: OSC
10. FaceOSC
11. Kinect
12. OpenTSPS
13. Arduino
14. Arduino & Processing
15. Etc.

 
 
Objects review
We looked at different ways that we can implement objects in our code.
In the first example, we take one of the data sketches from last week and make the data more interactive by making them objects.

This is what the draw loop looks like:

void draw() {
  background (0);
  for (int i = 0; i < items.length; i++) {
    items[i].drawRect(); 
    items[i].activateHover();
    if (items[i].isHover == true && mousePressed == true) {
      items[i].drawText();
    }
  }
}

In the second, we take an example from Dan Shiffman’s excellent Learning Processing and see how we can use objects to create game objects that detect collision.

void draw() {
  background(255);
  // Move and display balls
  ball1.move();
  ball2.move();
  
  if (ball1.intersect(ball2)) { // New! An object can have a function that takes another object as an argument. This is one way to have objects communicate. In this case they are checking to see if they intersect.
    ball1.highlight();
    ball2.highlight();
  }
  
  ball1.display();
  ball2.display();
}

Finally, in the third example, we use objects as a way to control the flow of the story by making each page an object:

void draw() {
  switch (pageNum) {
  case 0:
    pages[0].display(); 
    break;
  case 1:
    pages[1].display(); 
    break;
  case 2:
    pages[2].display(); 
    break;
  case 3:
    pages[3].display(); 
    break;
  case 4:
    pages[4].display(); 
    break;
  }
}

In the third example, you can see how we used the switch(case) structure instead of our usual if/else.

 
 
The Matrix
In class, we talked about how the matrix is a bit like adding layers in Photoshop and Illustrator. It is similar in that you can affect the position and movement of one “layer” or matrix without affecting the other, but it does a bit more than that — it also resets your coordinate system.
Read up on how to use the Matrix and Translations here: http://processing.org/tutorials/transform2d/.

In brief:
pushMatrix(); – starts the new matrix
translate (x, y, z); – moves the matrix to a new location
popMatrix() – closes the matrix and resets the old coordinate system.

Intermission: A word on Processing Render Modes
You can control a bit of how Processing renders your sketch by switching modes around (there are really only 3: P2D, P3D, and PDF). You can read more of why we would need to do it here.

For the next few examples, we will be working in the 3D space — introducing a new axis, the z-axis — so we’ll need to work in P3D. To do that, we just need to append another parameter to our size() function, like so:

void setup() {
  size(640,480,P3D);
}

 
 
The Matrix and Rotation
Unless you want to rotate the entire canvas, you cannot rotate without using transform. Processing will always rotate around (0,0), so in order to change the rotation point, you need to move 0,0!

In this example, we rotate around the z-axis:

pushMatrix(); 
  translate (width/2, height/2); 
  rotateZ (radians (angle)); 
  angle += 5; 
  rectMode (CENTER); 
  rect (0, 0, 50, 50); 
popMatrix(); 

 
 
The Matrix and 3D
Drawing shapes in 3D is almost the same as drawing them in 2D. A rect is a box, and an ellipse is a sphere.

The biggest difference — other than that you are now adding a third dimension to your shape — is that when you create a box or a sphere, you only describe the size:

sphere(28);

and not the location! That’s because you need to use translate() to describe the location of 3d things:

noStroke();
lights();
translate(58, 48, 0);
sphere(28);

This example in our repository shows a 3d box rotating based on the location of your mouse.

 
 
Pixels
Processing makes it easy for us to work with pixels. What’s a pixel? Well, its a tiny object that contains color information, basically. And every Processing canvas, picture, video, or shape has a combination of pixels that make it up, and the way that we access those pixels is through a pixels[] array.

For instance, if you want to get/set/use all the pixels that make up the entire canvas, you would just use:

pixels

To control the pixels in a picture of a cow, you would use:

cow.pixels

Or the video camera:

camera.pixels

To get only ONE single pixel, just call the specific index of that pixel, in the same way you would a normal array:

pixels[3300];
cow.pixels[22];
camera.pixels[940]; 

But you probably will never really want to call just one, you’ll want to have control over the entire pixels array, in which case you’ll have to loop through them all like so:

for (int i = 0; i < cow.pixels.length; i++) {
    color thisColor = cow.pixels[i]; 
}
}

A really, really important thing that we need to know about pixels is that they can be accessed in two ways: by their location (x,y) coordinates, or by their location (or index) in the pixels[] array.

If you have their location but want to know their index in the pixels array, you simply use this handy formula:

x + y * width

So say, you wanted to use the location to double-for-loop through all the pixels, you can still access them using the index of the array like so:

for (y = 0; y < cow.height; y++) {
   for (x = 0; x < cow.width; x++) {
   color thisColor = cow.pixels[x + y * cow.width];
   }
}

One last important thing about working with pixels. Before we use an image, a video, or the canvas’ pixels, we just need to tell Processing to load them all into an array, like so:

loadPixels(); 
cow.loadPixels(); 
camera.loadPixels(); 

And when we finish doing whatever we want with them, we tell Processing to update:

updatePixels(); 
cow.updatePixels(); 
camera.updatePixels(); 

It’s a complex topic, so I would suggest going through this tutorial to understand it better: http://www.processing.org/tutorials/pixels/

We have a ton of pixels examples in our class repo, too.

This one simulates analog TV noise by assigning random grey values to every pixel on the screen:

void draw() {
  loadPixels();

  for (int i = 0; i < pixels.length; i++) {
    pixels[i] = color (random (255)); 
  }
  updatePixels(); 
}

This one adjusts the brightness of an image based on where your mouse location is (you’ll need to download the tuna.jpg file here).

This one shows you how to manipulate a double-for-loop so you only affect every 10th pixel.

  loadPixels();
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      if (x % 10 == 0) { //this affects every 10th column. Try a making a box area
      pixels [x+y*width] = color (random(255)); 
      }
    }
  }
  updatePixels(); 

And this cool one uses the brightness of the pixels to extrude them to the z-axis.

 
 
The Video Camera
Before we combine pixels and the video camera, let’s figure out how to access the camera.

The first thing we would need to do is to import the Processing video library, like so:

import processing.video.*;

Then we will declare a Capture object and call it “video”, like so:

Capture video;

To initialize, we need to just say:

 video = new Capture (this); 

You can specify the size of your capture as well as the desired frame rate by initializing it in one of the ways listed in the reference:

Capture(parent)
Capture(parent, requestConfig)
Capture(parent, requestWidth, requestHeight)
Capture(parent, requestWidth, requestHeight, frameRate)
Capture(parent, requestWidth, requestHeight, cameraName)
Capture(parent, requestWidth, requestHeight, cameraName, frameRate)
1

To start the camera, we say so in setup():

1  video.start();  

And to playback the feed, this is what we write in draw():

  if (video.available()) { //first check to see if we are receiving a stream
    video.read(); //then read the stream
  }

 image(video, 0, 0); //we are displaying the video as we would a PImage, by calling "image"!
 

Choosing another camera that’s not your built-in default

Use this code from the Processing examples to list the cameras that are currently in your system:

  String[] cameras = Capture.list();

  if (cameras == null) {
    println("Failed to retrieve the list of available cameras, will try the default...");
    cam = new Capture(this, 640, 480);
  } if (cameras.length == 0) {
    println("There are no cameras available for capture.");
    exit();
  } else {
    println("Available cameras:");
    for (int i = 0; i < cameras.length; i++) {
      println(cameras[i]);
    } 

It will print out a list to the console. Find your camera in the list and include it in the arguments when you initialize, like so:

 cam = new Capture(this, cameras[2]); 

 
 
Pixels and the Video Camera
So now we can combine pixels and live video! Woot!

If you haven’t already guessed, we can apply basically anything that we have done with still images with moving images. Accessing camera pixels is the same as accessing PImage pixels.

In this example we convert video pixels into little ellipses, to get that halftone effect.

if (vid.available()) {
    vid.read(); 
    vid.loadPixels(); 
    
    for (int x = 0; x < vid.width; x+=5) {
      for (int y = 0; y < vid.height; y+=5) {
        float bright = brightness(vid.pixels[x + (y * vid.width)]);
        float mapBright = map (bright, 0, 255, 1, 2); 
        ellipse (x, y, mapBright, mapBright); 
      }
    }
    
  }

And in this one, we extrude those pixels in 3d space and rotate as we go!

void draw() {
  background (0); 
  ellipseMode (CENTER); 
  
  float rotY = map (mouseX, 0, width, 0, 360); 
  float rotX = map (mouseY, 0, height, 0, 360); 
  pushMatrix();
  translate (width/2, height/2); 
  rotateY(radians (rotY)); 
  rotateX (radians (rotX)); 
  
  if (vid.available()) {
    vid.read(); 
    vid.loadPixels(); 
    
    for (int x = 0; x < vid.width; x+=10) {
      for (int y = 0; y < vid.height; y+=10) {
        float bright = brightness(vid.pixels[x + (y * vid.width)]);
        float mapBright = map (bright, 0, 255, 3, 9); 
        pushMatrix();
        translate (x - width/2, y - height/2, mapBright*50);
        ellipse (0, 0, mapBright, mapBright); 
        popMatrix(); 
      }
    }
    
  }

There are a ton of things we can do with live image processing. Blob detection, background subtraction, detecting movement, color, and patterns. We can even do photoshoppy things like add blur or change color. Sometimes those tasks involve complicated algorithms, so now we will look at libraries that people have made to make our lives easier.

 
 
OpenCV

Open CV is a prolific library for computer vision. There are a few ports of this library to Processing, but the one we are going to use isn’t on the Processing.org site. It’s by Greg Borenstein, and I find that it is much more reliable (and easier to use) than the others. Download it here.

Copy the downloaded folder into your Processing libraries folder and restart the program. If you do it right, you should be able to go to File > Examples > Contributed Libraries > OpenCV for Processing.

Here’s an example using video and face detection:

import gab.opencv.*;
import processing.video.*;
import java.awt.*;

Capture video;
OpenCV opencv;

void setup() {
  size(640, 480);
  video = new Capture(this, 640/2, 480/2);
  opencv = new OpenCV(this, 640/2, 480/2);
  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);

  video.start();
}

void draw() {
  scale(2);
  opencv.loadImage(video);

  image(video, 0, 0 );

  noFill();
  stroke(0, 255, 0);
  strokeWeight(3);
  Rectangle[] faces = opencv.detect();
  println(faces.length);

  for (int i = 0; i < faces.length; i++) {
    println(faces[i].x + "," + faces[i].y);
    rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height);
  }
}

void captureEvent(Capture c) {
  c.read();
}

 
 
Minim
If you want to work with audio, look no further than the Minim library. It used to be separate, but now its baked into Processing. To learn how to use it, check out the docs here.

In class, we looked at how we can turn a switch on based on the volume of the noise in the room, or how to pause and play a song using the spacebar.

 
 
OSC
OSC (stands for Open Sound Control) is a communications protocol used so that different apps can talk to each other over a network.

You can learn more about it here. The Processing implementation for using OSC is called OSCP5, and you can download it here.

I mention OSC now because it is how we will bring live data into Processing later on. But first …

 
 
The Kinect
If you didn’t already know, the Microsoft Kinect, launched as an accessory to the Xbox gaming console, has become very popular in the art installation/ hacker world. At its most basic, it is a depth camera, able to give you 3D information about the world in front of you. But more than that, you can get skeleton tracking, face tracking, joint detection, etc.

To get the Kinect to talk to Processing, we need the Simple OpenNI library, here. There are instructions on that page, but its actually easier to go to your Tools > Library > Add Library feature in the Processing IDE and just download it from there.

However, the docs are in the actual download, so you might want to download the zip anyway, even if you dont use it to install the actual library.

Once you’ve downloaded the library, restart Processing. Your Examples folder (under file…) should show SimpleOpenNI under Contributed Libraries.

You need to plug in a Kinect to your computer before you run this. I would start by looking at the DepthImage example to see what the Kinect sees, and then the User example to see skeleton data.

 
 
FaceTracker
Remember when I said OSC would be important? This is where we will use it. FaceOSC is an app made by Kyle McDonald. It looks for any faces in a camera feed, as well as amazing details like eye location, mouth height, etc — and sends it out as numbers via OSC. What we need to do in Processing is “catch” those numbers and use them in our sketch.

Download FaceOSC here: https://github.com/kylemcdonald/ofxFaceTracker/downloads
Learn how to use it with OSC here: https://github.com/kylemcdonald/ofxFaceTracker/wiki/Osc-message-specification
Access the OSC data using Processing (as well as some other frameworks) using these templates by Dan Wilcox: https://github.com/CreativeInquiry/FaceOSC-Templates

If you weren’t in class, all you need to do is:
1. Make sure you have a camera
2. Open up the faceOSC app (just double click it like a normal app)
3. Point the camera at your face to make sure its detecting something (you’ll know when its working). If it doesn’t work, maybe play with the lights around you, as it might be too bright/ too dark.
4. Open one of the Processing examples under the templates made by Dan Wilcox. The FaceOSCReceiver is a good place to start.
5. Run the sketch, and you should see the Processing sketch responding to the OSC app. Yippee!

 
 
OpenTSPS
Open TSPS (Toolkit for Sensing People in Spaces) is another App that takes camera information and sends it out via OSC. This was created by the people at Rockwell group. Go ahead and download the app from the link above. Their website is pretty self-explanatory, so I will let you guys peruse it.

Here’s how you would use it with Processing.

 
 
The Arduino
The Arduino is how we will get Processing to talk to the physical world.
You will need the board, of course (you can get these now at any old Radio Shack) and the software, which you download here: http://arduino.cc/

If you don’t have a board, 123dcircuits.io is an AMAZING resource that lets you run simulations on a virtual Arduino + breadboard. It’s a great way to practice (and even learn about electronics!).

Because Arduino and Processing are so friendly with each other, the minute you open up the Arduino interface you will see the similarities. Arduino is built on C and Processing on Java, but even with these differences the language still feels quite similar.

These are the first things you need to know about writing Arduino Code (from a Processing point of view):
1. Instead of setup() and draw(), its setup() and loop().
2. We use PINMODE(pin, input or output) to tell Arduino if the thing that is connected to a specific pin is either an input or an output
3. We say ANALOGWRITE (pin, value) to control something analog (like an LED), and ANALOGREAD(PIN) to get a value from an analog sensor (like a temperature, light, or pressure sensor).
4. We say DIGITALWRITE (pin, value) to write out digital values (turn something on or off), and DIGITALREAD(pin) to get digital values (from a switch).
5. In Processing, all we need to do is RUN. In Arduino, we do two things: COMPILE, and then UPLOAD. Which makes sense — you first assemble all the code, and then move it to the board :)

Finally, how do we get those values to Processing? Instead of OSC, Adruino and Processing talk through another protocol, serial. Read more about serial here: http://www.processing.org/reference/libraries/serial/ and on the arduino site, here: http://arduino.cc/en/reference/serial#.UwA9i0JdLRo

The examples that we used in class are here. Both the Arduino code and Processing code are included.

To recap what we did in class:

To run the examples, you’ll need an Arduino, a USB Cable, a breadboard, an LED or two, a switch, and a resistor.
1. Plug in your Arduino.
2. Open the arduino equivalent of the sketch (it has an “_ard” or .ino suffix, and won’t open in Processing)
3. You’ll see in the top of the sketch where you’ll need to hook up the LED/ switch/ whatever you need.
3. Compile it first (the check button)
4. Under Tools, first select your board (the name of it should be written on your board itself) and the serial port (choose the cu.usb one).
5. Now, hit upload! The little LED on your board should blink while it uploads.
6. Open the equivalent Processing sketch and hit play (you know how to do that).

 
 
CLOSING
That’s it! I know that was a ton of stuff, so feel free to write me if you have questions (in fact, please do).

Here are some more resources to send you on your way:

Join the community:
Share your work, see what others have done:http://www.openprocessing.org/
Collaborative Coding: http://sketchpad.cc/

Libraries:
2D Physics: Box2d
3D Physics: ToxicLibs
Buttons and Sliders: ControlP5
Geometry: Geomerative
And so much more!

Further Learning:
Super Handy: 25 Life-Saving Tips for Processing
Simulate Nature: Nature of Code
A really cool book I just bought: Generative Design
Processing and Data: Visualizing Data
Watch for this Coursera course to come back: https://www.coursera.org/course/compartsprocessing
Processing, Arduino, and Openframeworks in a book: Programming Interactivity

Computer Vision:
Kinect: Making Things See

The Arduino:
Use the Arduino without an Arduino: 123d.circuits.io
The Arduino and the World: Making Things Talk

Posted by & filed under Uncategorized.

Here’s what we talked about this week:
1. Loops review
2. Tweening
3. Easing
4. Timer
5. Importing image files (PImage)
6. Drawing irregular shapes
7. Classes & Objects
8. Data with LoadStrings()
9. Importing a CSV
10. The Table Class
11. Twitter

In some cases I won’t be displaying the full code here. You can download all our code from this repository.

 
 
Loops Review

Two examples to show how we can play with loops to generate interesting imagery:
The first is from Casey Reas & Ben Fry’s Getting Started With Processing

size(480, 120);   
smooth();   
strokeWeight(2);   
for (int i = 20; i < 400; i += 20) {     
  line(i, 0, i + i/2, 80);     
  line(i + i/2, 80, i*1.2, 120);
}

And the second example shows you how to use a double for loop to make a grid of ellipses on the screen:

 for (int i = 0; i < width; i++) {
    for (int j = 0; j < height; j++) {
      ellipse (i*step, j*step, size, size);
    }

 
 
Tweening

We know how to get a shape moving in a linear direction upwards or downwards. We just increment the location variables by a certain number, right?

locX ++;
locY += 1; 
locZ = locZ +1; 

But what if we wanted the shape to go to a specific end location from a specific start location? This is called “tweening”. Here’s one way to do it:

  float targetX = mouseX; //set mouseX as the target, so our circle follows the mouse
  float dx = targetX - x; //get the distance between the circle and the target
  if(dx > 1) { //if the distance is greater than 1, its a positive number so...
    x ++; //move to the right by incrementing
  } else if (dx < 1) { //if its less than 1, its a negative number so ...
    x--; //move to the left by decrementing.
  }

Another, more elegant example is from the Reas/ Fry book: you first get the percentage of the journey so far, and use that to determine, first, if the shape should keep moving or not, and second, how much to increment the movement. Like so:

if (pct < 1.0) {
   x = startX + ((stopX-startX) * pct);
   y = startY + ((stopY-startY) * pct);
   pct +=step;
}
ellipse (x,y, 20, 20); 

 
 
Easing

Easing is a term used in animation to indicate the nice effect that happens when an object approaches its final destination — it gracefully slows down. Instead of incrementing the animation in a linear way

 x=x+1;

we use the distance between current position and destination to determine how fast we should be going. Rather, the closer we are to the destination, the slower we go.

float targetX = mouseX;
float dx = targetX - x;
  if(abs(dx) > 1) {
    x += dx * easing;
  }

Where easing is declared in setup as something like 0.05.

 
 
Timers

Timers are super handy, and you might find yourself using them constantly. The first thing we need to know is that Processing has its own built-in counters: one is millis(), and one other frameCount(). The difference (other than one counting in milliseconds and the other in plain old frames) is that frameCount can vary (you can change it manually, or if you sketch is too slow it will slow down as well), where millis() is a bit more steadfast. Try seeing what millis() can do by printing this out to the console:

println (millis()); 

Anyway, to implement a timer, you need three things:
1. startTime
2. interval
3. millis()

In english, the question we need to ask Processing is this: if the difference between the time that has elapsed and when I started timing has exceeded the chosen interval, time’s up!

In setup:

  startTime = millis(); //set the timer to start counting ... now
  interval = 1000; //whats the interval?

In draw:

if (millis() – startTime > interval) { //ask the question
startTime = millis(); //reset the timer so we start again
okGo = true; //do something!
}

 
 
Importing image files
PImage is the class you need to look at when importing bitmap images.
PShape is what you would use to import vector (Illustrator) files.

Remember that to add external files to Processing you need to save them to a “data” folder within your sketch folder. You can create the folder and move the file manually, or you can just drag your file into the sketch window and Processing does it all for you (thanks, Processing!).

 
 
Drawing Irregular Shapes

If you don’t want to just use ellipses and rects, nor do you want to use a pre-made illustrator vector file, we can also draw things in any irregular way that you please. For that, we use beginShape().

You can use vertex, curveVertex, quadraticBezier, or bezierVertex to define your points.

An example in our repository shows you how you can use an array of numbers to determine the shape (in this case the array was saved mouse locations).

beginShape(); 
  for (int i = 0; i < xVals.length; i++) {
    if (i <= current) {
      curveVertex (xVals[i], yVals[i]);
    }
  }
  endShape();

 
 
Objects and Classes

In class, we defined a class as a cookie cutter or a blueprint for an object (in this case, a cookie or a house).

Let us say I wanted to make a “buster” object from a “Dog” class. I would declare and initialize like I do with all other data types, like so:

Dog buster; // declare
buster = new Dog(); //initialize. Note the usage of the word "new", and also calling this -- "Dog()". This is the CONSTRUCTOR.

And henceforth I can access methods within my new buster object like so:

buster.run();
buster.drool();

When I want to create a new class, this is how I would do it:

class Dog { //note that class names start with a capital letter

//my dog variables here.
// int age;
// Color myColor;
// String breed;

Dog() { //this is my Constructor, where my object is "born". Think of it as the setup() bit of a class.
//setup code here!
}

void run() { //some methods.
}

void drool() {
}

}

When we initialize a new object with the constructor, it would be nice if we could specify the specific things that make that particular object unique. For instance, in our Dog example, wouldn’t it be nice if every time we made a new Dog object, we could tell Processing: “Make me a dog named Buster that is 2 years old, a muddy brown color, that might be some sort of Beagle Mix”?

In the main loop, that initialization might look like this:

buster = new Dog (2, brown, "Beagle Mix"); //we are adding arguments to the constructor!
 

This is how we would write that constructor that when we create the class:


class Dog {
int age;
color myColor;
String breed;

Dog (int age_, color myColor_, String breed_) { //we use the arguments here to COPY the outside values into our class' own values.
age = age_;  // now the value that was entered as an argument when this constructor was used in my objects custom value!
myColor = myColor_;
breed = myBreed_;
}
}

Here is the “ball” example that we used in class:


Ball b;

void setup() {
  size (640, 480);
  b = new Ball (width/2, height/2, 30);
}

void draw() {
  background (0);
  if (b.isMouseOver()) {
    b.displaySq();
  } else {
    b.displayCircle();
  }

}

void keyPressed() {
  b.changeColor (color(int (random (255)), int (random (255)),int (random (255))));
}

class Ball {

  float locX, locY;
  int diam;
  float speed = 5;
  color c = color(int (random (255)), int (random (255)), int (random (255)));

  //constructor
  Ball(float locX_, float locY_, int diam_) {
    locX = locX_;
    locY = locY_;
    diam = diam_;
  }

  void displayCircle() {
    fill (c);
    ellipseMode (CENTER);
    ellipse (locX, locY, diam, diam);
  }

  void displaySq() {
    fill (c);
    rectMode (CENTER);
    rect (locX, locY, diam, diam);
  }

  boolean isMouseOver() {
    if (dist (mouseX, mouseY, locX, locY) < diam/2 ) {       
       return true;      
    } else {       
       return false;      
    }   
   }   

  void bounce() {     
     fill (c);      
     ellipse (locX, locY, diam, diam);     
     locY = locY + speed; //we are incrementing the location with speed     
      speed += 0.1; //and then incrementing the speed with "gravity"     
      if (locY > height) {
      speed = speed * -.85; //lets reverse direction, just like before, but this time significantly less every time so the ball realistically doesn't bounce forever.
      }
  }

  void changeColor(color c_) {
    c = c_;
  }
}

More examples of objects are in our repository. There’s an example of how to make an array of objects, or an arraylist of objects.

 
 
LoadStrings()

LoadStrings() is a Processing function that allows you to take in a body of text and convert into an array of Strings. Every new line in your text that you import takes up a spot in your String array.

In class, we imported the Jabberwocky poem using loadStrings(). We then further subdivided the poem into words by first creating a words[] array, and then splitting up the poem by word using the split() function.

Now that we have all the words individually separated into its own array, we can rearrange them as we want (in this case, just randomly).

The full sketch is in the repo, but here’s the essential bit of it.

Load the poem and split it up into words:

poem = loadStrings ("jabberwocky.txt");
  words = split (poem[0], " "); 
  for (int i =0; i < words.length; i++) {
    println (words[i]);
  }

The Strings and Drawing Text tutorial in Processing is an excellent resource.

 
 
Visualizing Data

In this example, we looked at different ways to visualize an array of numbers (when you work with data, most things you will start off with are just that … arrays of numbers).

Comment and uncomment the different functions in the draw() loop to see how we use the same array and display it in three different ways.

 
 
Importing a CSV into a table

When your data involves quite a bit more than just a single column of numbers, Processing provides us with the Table class. You can read it about the class more here.

In our example, we took some crime data from the government (in the CSV format), and loaded it into a table:

Table table;
table = loadTable("crime_incidents_2013_CSV.csv", "header");

We looped through all the rows, and then isolated the information we wanted by naming the column:

for (int i = 0; i < table.getRowCount(); i++) {
    String shift = table.getRow(i).getString("SHIFT");
    String offense = table.getRow(i).getString("OFFENSE");
    String method = table.getRow(i).getString("METHOD");

We wanted to count the number of Day vs. Night crimes, so we recorded every instance into a counter for each:

if (shift.equals("DAY")) {
      countDay++; 
    } else if (shift.equals("EVENING")) {
      countEvening++; 
    }

Then finally, use the counter values to draw the width of rectangles in the draw loop:

 int mCountDay = (int)map (countDay, 0, table.getRowCount(), 0, width); 
  int mCountEvening =(int) map (countEvening, 0, table.getRowCount(), 0, width); 
  fill (255); 
  rect (0, height/2 -50, mCountDay, 50); 
  rect (0, height/2, mCountEvening, 50);

 
 
Accessing Twitter

To talk to Twitter we are going to install the Twitter4j library here: http://twitter4j.org/en/index.html. Download the latest stable version.

While that is downloading, let’s get some access codes that we need from the Twitter developer’s site.

These are the things we need: A consumer key & secret, and an access token & secret
1. Log in to twitter here: https://dev.twitter.com
2. Go here: https://dev.twitter.com/apps
3. Make a new app and fill out all the forms
4. in the next page, you will find your consumer key & secret. Copy those.
5. Next, create your access token. (It should on the same page, but at the bottom.)
6. Copy your access token and access secret. Set all those aside, we will need them later.

Once your Twitter4j files are downloaded, unzip and navigate to the “bin” folder. Look for these two files:

twitter4j-core-3.0.5.jar
twitter4j-stream-3.0.5.jar

And DRAG them into your new Processing sketch window. A message should appear on top of the console, saying something like, “2 files copied into the sketch.” If you hit cmd + K now, your sketch folder should open up and there will be a code folder in it with your two .jar files.

That should set you up. Check out the 3 twitter examples that I’ve uploaded in our new Github repository here, under Week 3.

Resources:
There’s a ton of stuff out there, but here are some places to start:

data sources:
http://www.informationisbeautiful.net/data/

accessing data:
http://www.visualisingdata.com/index.php/2013/07/a-big-collection-of-sites-and-services-for-accessing-data/

resources:
http://ttdatavis.onthinktanks.org/data-visualisation-resources/

books:
http://www.brainpickings.org/index.php/2011/06/30/best-books-data-visualization-computational-art/

maps:

http://leafletjs.com/

http://openlayers.org/

http://jvectormap.com/

Posted by & filed under Uncategorized.

Some handy Processing shortcuts:

ctrl + R Run the app
ctrl + T format your code
ctrl + K to open your sketch folder

Also, just dragging a file into your sketch automatically adds the file into your data folder.

——————–

Random

We have so far been drawing shapes using hard-coded numbers. But what if we want to introduce some randomness into our work to make it more interesting? Luckily, Processing has a built in function called random().

According to the reference, we can write random() two ways:
random(high) //high is the maximum value, with the minimum value set to 0
random(low, high) //you manually set the minimum value as well as the max

let’s draw an unlimited number of circles in random locations, with random width/ heights:

    ellipse (random (0, width), random (0, height), random (20, 30), random (20, 30));

Here’s some code for an ellipse wandering aimlessly in a black void:

float step;
float locX, locY, r;
color myColor;

void setup() {
  size (200, 200);
  noStroke();
  locX = width/2;
  locY = width/2;
  myColor = color (random (0, 255), random (0, 255), random (0, 255));
  r = 30;
}

void draw() {

  background (0);

  fill (myColor);
  ellipse (locX, locY, r, r);
  step = random (-5, 5); //lets make step random every frame
  locX += step; //and apply that to our current locX, locY
  locY += step;

  //some conditionals to reset the location if our ellipse ever goes off screen.
  if (locX < 0 || locX > width || locY < 0 || locY > height) {
    locX = width/2;
    locY = width/2;
    //might as well create a new color while we are at it!
      myColor = color (random (0, 255), random (0, 255), random (0, 255));

  }
}

—————-

More on Conditionals

Let’s go back to conditionals for a second.

Let’s review the relational operators:
> (greater than)
>= (greater than or equal to)
< (less than)
<= (less than or equal to)
== (equal to)
!= (not equal to)

And the conditional operators:
&& (logical and)
|| (logical or)

Here’s an example where we use the conditional AND to turn two rectangles red when two conditions are met:

void setup() {
size (300, 300);
}

void draw() {
  background(0);
  if (mouseX < width/3 && mouseY < height/3) {
    fill (255, 0, 0);
  } else {
    fill (255);
  }
  rect (0, 0, width, height/3);
  rect (0, 0, width/3, height);

} 

And another example where we use the conditional OR to turn the rectangles red when EITHER of the two conditions are met:

void setup() {
size (300, 300);
noStroke();
}

void draw() {
  background(0);

  if (mouseX < width/3 || mouseX > width - width/3) {
    fill (255, 0, 0); //red
  } else {
    fill (255);
  }

  rect (0, 0, width/3, height); //left circle
  rect (width - width/3, 0, width/3, height); //right circle

}
 

We have been frequently using conditionals < (less than) and > (equal to), but one example of when we can use the == (equals) and != (not equals) is when we use it to check which keys we pressed. In the example below, we print out to the console the letter we press, whether it is A, B, or neither:

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

void draw() {
}

void keyPressed() {
  if (key == 'a') {
    println ("A was pressed!");
  }
  else if (key == 'b') {
    println ("B was pressed!");
  }
  else if (key != 'b' || key != 'a') { //basically the same as just saying "else", but we needed to see != used.
    println ("NOT THE LETTER A or B!");
}
 

————–

Conditionals and the boolean type

Like we said earlier, boolean data type can only contain two possible values: true or false.

We use it like so:

boolean isTheLightOn;
if (mousePressed == true) {
  isTheLightOn = true;
} else {
  isTheLightOn = false;
}

Now that we have a boolean storing the information about the light, we can use it to control other things like:

if (isTheLightOn == true) {
  wakeUp();
  takeAShower();
}

… or something like that.

Here’s a longer example:

boolean isOn;

void setup() {
  size(500, 500);
  isOn = false;
}

void draw() {

  background (0);

  textAlign (CENTER);
  if (isOn == true) {
    textSize (100);
    text ("ON!", width/2, height/2);
  }
  else {
    textSize (20);
    text ("OFF!", width/2, height/2);
  }
}

void keyPressed() {
  isOn = !isOn;
  /*
  this is the longer version of saying:
  if (isOn == true) {
    isOn = false;
  } else if (isOn == false) {
    isOn = true;
  }
  */

} 

———

Let’s revisit the bouncing ball example, but this time adding some gravity:

float y;
float speed;

void setup() {
  size (400, 700);
  speed = 5; //change the initial speed if you want it to start out faster/ slower
}

void draw() {
  background (0);
  ellipse (width/2, y, 20, 20);
  y = y + speed; //we are incrementing the location with speed
  speed += 0.1; //and then incrementing the speed with "gravity"

  if (y > height) {
    speed = speed * -.85; //lets reverse direction, just like before, but this time significantly less every time so the ball realistically doesn't bounce forever.
  }
}

If you are interested in more simulations, I suggest you give Dan Shiffman’s fantastic Nature Of Code a look-see.

———

More loops!

WHILE loops and FOR loops are what we use when we want to repeat what is essentially the same lines of code over and over again, stopping only when a certain condition is met. The condition can be: if the number of lines I have drawn are over 50, if we have checked all the objects in an array, etc.

While loops

In Pseudocode, what the While loop is doing below is something like:
1. Set my first x location to 0.
2. Now, set the condition: WHILE x is still less than the width of my sketch (500 in this case), stay in the loop.
3. Draw a line at the x-position with the variable x. (now currently 0).
4. Now, add 10 the the variable x. (which makes it 10).
5. Since the variable x is still less than 500, stay in the loop, and draw another line at variable x, currently 10.
6. Add 10 the variable x, making it 20.
7. X is still less than 500, so keep going. Draw another line at variable x, now 20 …
8. Keep drawing a line and incrementing the variable x by 10 until you get to 500.
9. Once the variable x is at 500, get out of the loop.
10. Do all the other things in the draw() loop (in our case, there’s nothing there)
11. Go back to #1


int x;
int gap;

void setup() {
size (500, 500);
totalLines = 50;
gap = 10;
}

void draw() {
  //background (0);
  //x = 0; //if you turn on the background, you need to start from 0 every loop.
  stroke(255);
  while (x < width) {
    line (x, 0, x, height);
    x+= gap;
  }

}

For Loop

The same code as above, but written as a for loop. Try to notice where things moved around.

 int x;
int gap;

void setup() {
size (500, 500);
totalLines = 50;
gap = 10;
}

void draw() {

  background (0);

  stroke(255);
  for (int x = 0; x < width; x+=gap) {     line (x, 0, x, height);    }    }  

Another example:

  size(200,200);       background(0);       for (int i=255; i>0; i--){
        noStroke();
        fill(255-i);
        ellipse(width/2, height/2, i, i);
}

or:

size (300, 300);

background (255);
for (int i = 255; i > -1; i--) {
  stroke (i);
  line(i, 0, i, height);
}

—————-

Arrays

Arrays are lists of things. Lists of ints, lists of floats, Strings, even PImages.
There are a few ways to make an array.

First the declaration, note the [] after the data type:

 int[] values 

Then we initialize. We can do this a few ways.

This way says, make space in memory for a 5-slot array, I’ll fill it up later:

 values = new int [5] 

This way says, just fill up the array with the following values now:

 values = {99, 86, 45, 32, 7} 

If you want to access just ONE value in an array, first remember that the index starts at 0, so a 5-slot array would have indexes 0-4.
So in the example above, if I wanted to access the value 45, I would type:

 values [2] 

If I wanted to access a chunk, or all of the values in an array, I would have to use a FOR loop. How convenient, we just learned about them! Sample code below:

int [] amountPeople = {50, 70, 90, 10, 45};

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

void draw() {
  ellipseMode (CENTER);
  for (int i = 0; i < amountPeople.length; i++) {
    ellipse (i*width/amountPeople.length + (width/amountPeople.length)/2, height/2, amountPeople[i],amountPeople[i]);
  }
}

——–
Functions

So far we have used functions, but we haven’t really made any of our own. What’s a function? It looks like this:

 functionName (argument, argument, argument);

Or just

 functionName(); 

Now let’s make a function. As you start to code more, you will value any tool that let’s you do more things with less code. Making your own functions is one such tool. For instance, if we start with this code where we make a circle (of course):

void setup() {
size (640, 480);
noStroke();
}

void draw() {
  background (0);

  fill (255);
  ellipse (width/2, height/2, 30, 30);
  textAlign (CENTER);
  text ("circle", width/2, height/2 + 40);

}

If we wanted to make a lot of circles, we would just encapsulate all the relevant code into a function called “makeCircle”, like so:

void makeCircle() {
  fill (255);
  ellipse (width/2, height/2, 30, 30);
  textAlign (CENTER);
  text ("circle", width/2, height/2 + 40);
}

So if I then wanted to call it in the draw() loop, I would just do this:

void draw() {
  background (0);
  makeCircle();
}

And viola! We are doing the exact same thing that we did before, except with less code in the draw loop. There is a little bit more to it, as you can imagine.

Arguments
The function that we just made is kind of a weird one because if we were to use it over and over again, we would just be drawing the same circle on top of itself. Kind of useless. So how would we make it so we can use this function to draw circles like we want, with the added option of customizing each one? Simple! We would use arguments!

Arguments are the values within the ellipses that we see all the time in the functions that we use:

size (argument1, argument2);
ellipse (argument1, argument2, argument3, argument4);
fill (argument1, argument2, argument3);

Look at our makeCircle() function again. Let’s decide for now that every time we want to make a circle we want to change the location and size. So our final function might look like this:

makeCircle (locX, locY, size); 

When we make our function now, we write our arguments in like this:

void makeCircle(int locX, int locY, int diam) {
  fill (255);
  ellipse (locX, locY, diam, diam);
  textAlign (CENTER);
  text ("circle", width/2, height/2 + 40);
}

Two things to notice:
1. We are declaring our arguments when we make the function, so include the data type
2. When we write the ellipse, we now use the variables for the argument, not the hard coded values!

So if we were to create 3 circles in our draw() loop using our new function, it might look like this:

void draw() {
  background (0);
  makeCircle(330, 250, 80);
  makeCircle(200, 70, 30);
  makeCircle(500, 399, 60);
}

Try this: Make the fill values and text values arguments as well!

Return Type

So far, every function we have made or seen starts with the word “void”. What’s up with that? Well, its the return type. Void means that this function doesn’t return anything. It’s easier to understand with a function that DOES return something, like this add(num, num) function, or the “yellIt(word)” function below that:

void setup() {
  size (640, 480);
}

void draw() {
  background (0);
  int result = add (5, 10);
  println (result);

  String cheer = yellIt ("turtle");
  if (mousePressed) {
    text (cheer, width/2, height/2);
  }
}

int add(int num1, int num2) {
  return num1 + num2;
}

String yellIt(String word) {
  String yelledWord = word + "!!!!";
  return yelledWord;
}

 

Posted by & filed under Uncategorized.

Below is a summary of the topics we discussed as well as some additional resources.

Processing
The Processing website. Spend some time going through the reference, the exhibition, and list of libraries.
The Art of Creative Coding:  A 5-min documentary on Creative Coding.

The Processing Development Environment

The Processing environment is pretty simple. The most important buttons that you need to know are the run button (command+R or ctrl+R) and the stop button (esc).

The Coordinate System

Here’s an image of the Processing coordinate system vs. the Cartesian plane. (Click on the image for more)
Changing the size of the screen with size()
If we need to access the size again sometime in the sketch (like say if I want to draw my shape relative to the dimensions) we can use the built-in Processing variables width and height.

Drawing with Processing
A quick tutorial on basic shapes and the x-y coordinate system.
The basic 2D primitives you can try:
arc()ellipse()line()point()quad()rect()triangle()

Changing color:
background()clear()colorMode()fill()noFill()noStroke()stroke()

Functions
Notice how the format for running all functions is the same:
first the function name, followed by some ellipses with arguments inside. How do we know what arguments the function requires? By checking out the Processing reference, of course!

Variables
Data Types: we talked about two, ints and floats. Read about the others here.
Remember the steps: Declare, Initialize, and Use.

Declare is when we tell the computer to make some space in memory for a variable of a certain type. For example:

int circleX;
float sizeOfSun;
String myName;

Initialize is when we place our first value in, otherwise the variable will default to a value of 0 or worse, some gibberish.

circleX = 10;
sizeOfSun = 1.0089;
myName = "Leroy";

You can actually combine these into one line to make it shorter:

int circleX = 10;
float sizeOfSun = 1.0089;
String myName = "Leroy";

and the last bit is to Use it.

Printing out the Console
use println () to send messages to yourself.
For instance, try typing this in your sketch:

println ("hello, world!" + frameCount); 

or

println ("My mouseX location: " + mouseX + " my mouseY location: " + mouseY);

Setup and Draw

void setup() {
	//things that happen only once
	size(640, 480);
	noStroke();
}
void draw() {
	//things that happen continuously
	background (0);
	fill (255);
	ellipse (width/2, height/2, 30, 30);
}

Introducing Movement
In order to make things move, we need to control the values stored in the variables.
So if we wanted the variable CircleX (x location of the circle) to move to the right, we would need to increment it up.
Like so:

circleX = circleX + 1; 

The shorthand for this is:

circleX++;

Here’s the bouncing ball example:

int x = 0;
int speed = 2;

void setup() {
	size(640,360);
}

void draw() {
	background(255);

	x = x + speed;

	if ((x > width) || (x < 0)) {
	// If the object reaches either edge, multiply speed by -1 to turn it around.
	speed = speed * -1;
	}

	stroke(0);
	fill(175);
	ellipse(x,100,32,32);
}

KeyPressed, Mousepressed Events
We know that the draw() loop just cycles over and over. But what if we want events to occur outside the draw loop, when an event occurs, like a mouse or keypress? We will use the mousePressed() and keyPressed() functions. Like so:

void setup() {
	size (200, 200);
}
void draw() {
	//nothing
}
void mousePressed() {
	rect (mouseX, mouseY, 10, 10);
}

Conditionals
Here’s a brief overview of if/ else statements. It’s for javascript, but the same concepts apply!
This is how we used it in class:

int sqX, sqY, sqW, sqH;
int cR, cG, cB;

void setup () {
	size (500, 500);
	noStroke();
	sqW = width/ 5;
	sqH = height/5;
	sqX = width/2 - (sqW/2);
	sqY = height/2 - (sqH/2);
	cR = 255;
	cB = 0;
	cG= 0;
}
void draw() {
	background (0);
	rolloverSq();
}
void rolloverSq () {
	fill (cR, cG, cB);
	rect (sqX, sqY, sqW, sqH);
	if (mouseX > sqX && mouseX < sqX + sqW && mouseY > sqY && mouseY < sqY + sqH) {
		cR = 255;
		cG = 255;
		cB = 255;
	}
	else {
		cR = 255;
		cB = 0;
		cG= 0;
	}
} 

Grammar

First let us take a step back and review the essentials about the grammar that we use in Processing.

Comments
Comments are notes to yourself (and other programmers) that you leave in your code. Processing will skip over them when it is compiling your code.

// -> are for single lines, like:

void draw() {
background (0); //background is black
fill (255, 0, 0); //red
ellipse (mouseX, mouseY, 80, 80); //the ellipse follows the screen
}

/* some text here */ -> are for multiple lines, like:

/*
the following code is not yet finished. Maybe one day I will finish it.
There are not enough circles. How do I add more circles?
*/
ellipse (20, 20, 20, 20);
ellipse (30, 20, 20, 20);
ellipse (40, 20, 20, 20);
ellipse (50, 20, 20, 20);
ellipse (60, 20, 20, 20);

Naming Your Variables

We usually name our variables with as descriptive a term as possible. It takes longer to type, but when your future self returns to work on old code, or if a colleague wants to look at your work, you will see why it matters.
Variable names, with a few exceptions, start with a lower-case letter.
Variable names should not start with a number or symbol. Underscores and the dollar sign are possible, but using just letters is recommended.
If there are two or more words in your variable name (sizeOfStar), capitalize the first letter of the next word. This is called “camelbacking”

Literals
So remember how variables are storage units for values that change over time? A literal is a static value. Ie: 43, “MakerHaus”, 27.08. Note that String literals are enclosed in quotes (“”).

Functions
Functions are formatted like so:

returnType functionName (argument, argument, argument) {
things happen here
return returnType;
}

an example of this would be (with return type void — returns nothing)

void makeAnEllipse (int circleX, int circleY, int circleW, int circleH) {
ellipse (circleX, circleY, circleW, circleH);
}

and an example of a function that returns something (in this case an integer)

int addTwoThings (int numberOne, int numberTwo) {
int result = numberOne + numberTwo;
return result;
}

Ellipses ()
Ellipses are used to hold the arguments within a function call. There can be any number of arguments within a function, or there can be no arguments at all — like the Processing function noStroke().

Curly Brackets {}
Curly brackets are used to define blocks of code, like within a function, if statement, or for loop.

++ and –
In order to increment a value, we have used:

 value = value + 1;  

We will do this quite a lot, so in order to shorten it we can just say:

value++;

for decrementing:

value--;

and for using a number that’s not 1:

value +=10;
value -=30;
value +=.05;

Dot Syntax
We aren’t here yet, but we use the dot syntax to access a method within an object. For example, if I had a Cat object, and I wanted the cat to run, I might say, cat.run(). The dot allows us to call the method “run” that is within the object “cat.” More on this later.

———–

Curated Works:

Here’s a slideshow of some cool creative coding work. Click on the images to see videos/ more detail.

 

And here is the introduction from class:


 

 

 

More Resources:
Learning Processing
Dan Shiffman’s video channel

Generative Design
Getting Started with Processing

Posted by & filed under Uncategorized.

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!