Classes on Processing

I wish i'd had the explanation I'll give about classes on Processing when I was learning for the first time...

I reunite the basic information you need to understand classes below:

A class is the basis of the object-oriented programming: "A class is a blueprint or prototype from which objects are created." And, for instance, an object is "a software bundle of related state and behavior. Software objects are often used to model the real-world objects that you find in everyday life". (http://docs.oracle.com/javase/tutorial/java/concepts/index.html).

"A class is a composite of fields (data) and methods (functions that are a part of the class) which may be instantiated as objects. The first letter of a class name is usually uppercase to separate it from other kinds of variables". (http://processing.org/reference/class.html)

Now, I'll show how to create a Class, and an array of objects.

cuBEEc

A cubic bee

Fist of all, you need to create the class and the constructor:

class Bee { //The first letter must be UperCase
//declare the variables we'll need, or the properties
int angle; //angle that rotates the wings
int factor=30; //a crazy variable that I used to control the frequency of the wings
float posX, posY,posZ; //variables for the position of the bee


  Bee () {  //constructor

  } 


} 

And then, create functions and methods

class Bee { 
int angle;
int factor=30;
float posX, posY,posZ;


  Bee () {  
 
  } 
 void update(){ //function that updates the rotation of the wings
    angle+=factor;
  if(angle>80){
    factor=factor*-1;
  }
   if(angle<0){
     factor=factor*-1;
   }
   
 }
 
 void render(float x, float y,float z){ //function that draws the bee, receiving the parameters like position in x,y, and z axis;
  
  posX=x;
  posY=y; 
  posZ=z;
   

//rectangles and triangles that creates the bee
  pushMatrix();  
  noStroke();
  translate(posX,posY+30,posZ);
  pushMatrix();
  translate(15,0);
  pushMatrix();
  rotate(radians(angle));
  fill(80,180);
  rect(0,0,-30,8);
  popMatrix();
  pushMatrix();
  rotate(radians((angle)*-1));
  rect(0,0,30,8);
  popMatrix();
  
  popMatrix();
  fill(220,220,0);
  quad(30,0,35,5,35,25,30,30);
  fill(255,255,0);
  rect(0,0,30,30);
  fill(0);
  triangle(35,10,40,15,35,20);
  triangle(8,30,13,30,13,35);
  triangle(17,30,22,30,17,35);
  fill(0);
  rect(25,0,5,30);
  rect(0,0,5,30);
  popMatrix();
 } 
} 

Now, you have to declare and initialize the class:

int numBees=1;//number of bees
 Bee [] b = new Bee[numBees]; //an array of bees

 
 void setup() {
  size(1200,700,OPENGL);//size of the screen, using OpenGl rendering for Z axis translation

  frameRate(60);//frame rate of 60 frames per second
 
//using a "for" function to initialize all the bees 
 for (int i=0;i<numBees;i++){
    b[i]= new Bee ();

 }
 
 void draw(){
background(255);//white background

//a "for" function to call the functions of the class for all the bees
    for (int i=0;i<numBees;i++){
      b[i].update();//update wings rotation
    b[i].render(width/2,height/2,300); //draw the bees at the given positions (x,y,z)
  } 
   
 } 

I used this class to create a flocking of animated bees. But if you want a simpler way to move the bees randomly like insects, you can use perlin noise...

Processing glitch camera

<Running with Processing 1.5.1!!>

//glitch camera still generator
//click to save image
 
import processing.video.*;
 
Capture cam;
 
int N=0;
 
void setup(){
size (851,315);
background(255);
colorMode(HSB);
 
 
// If no device is specified, will just use the default.
  cam = new Capture(this, 851, 315);
 
  // To use another device (i.e. if the default device causes an error),  
  // list all available capture devices to the console to find your camera.
  //String[] devices = Capture.list();
  //println(devices);
   
  // Change devices[0] to the proper index for your camera.
  //cam = new Capture(this, width, height, devices[0]);
 
  // Opens the settings page for this capture device.
  //camera.settings();
}
 
void draw(){
 
  Set();
    if (cam.available() == true) {
      if(frameCount==2||frameCount%150==0){
    cam.read();
    image(cam, 0, 0);
    // The following does the same, and is faster when just drawing the image
    // without any additional resizing, transformations, or tint.
    set(width, height, cam);
     for (int i=0; i<100;i++){
       noStroke();
    fill(random(0,360),300,300,100);
    rect ((random (0, width)),(random (0, height)),(random (0,50)),(random(0,50)));
    
  }
      }
  }
  
 
     
 
 
}
 
int r(int a){
  return int(random(a));
}
 
void mouseReleased (){
  N++;
  save("glitchCamera"+ (N)+".tif");
}
 
void Set() {
  for (int i=0; i<10; i++) {
    int x = r(width);
    int y = r(height);
    set(x+r(50)-1,y+r(3)-1,get(x,y,r(99),r(30)));
  }
}

Facebook glitch cover generator made with Processing

//FaceBook glitch cover generator
//click to save image

int N=0;

void setup(){
size (851,315);
background(255);
}

void draw(){
  
  Set();
  Glitch(); 

}

int r(int a){
  return int(random(a));
}

void mouseReleased (){
  N++;
  save("glitchCover"+ (N)+".tif");
}

void Set() {
  for (int i=0; i<10; i++) {
    int x = r(width);
    int y = r(height);
    set(x+r(50)-1,y+r(3)-1,get(x,y,r(99),r(30)));
  }
}

void Glitch() {
  if (frameCount%(r(250)+1) == 0) {
    int lineDensity = int(noise(frameCount)*width);
    for (int i=0; i<width*1.5; i+=lineDensity) {
      stroke(random(0, 255),random(0, 255),random(0, 255));
      strokeWeight(random(1,50));
      line(-100,i,i,-100);
    }
  }
}

Midi to waveform representation in Processing

Here I'll show how to convert midi notes to frequency, and how to show that frequency with a sine wave

//click on the note numbers to get the respective frequency 
  
float hertz;
  
int noteNumber;//variable for the midi note
  
int xspacing = 5;   // How far apart should each horizontal location be spaced
  
int w;              // Width of entire wave
  
  
  
int theta = 0;  // Start angle at 0
  
float ampl;  // Height of wave
  
float period = 100.0;  // How many pixels before the wave repeats
  
float dx;  // Value for incrementing X, a function of period and xspacing
  
float[] yvalues;  // Using an array to store height values for the wave
  
  
  
void setup() {
  
  size(640, 360);
  
  w = width+16;
  
  dx = (TWO_PI / period) * xspacing;
  
  yvalues = new float[w/xspacing];
  
}
  
  
  
void draw() {
  
  background(0,0,255);
  
   
  
  float startPointX = width/2; //define the X position of the start point in the center of the screen;
  
  float startPointY = height/2; //define the Y position of the start point in the center of the screen;
  
  float endPointX=mouseX; //define the X position of the end point that will follow the mouse;
  
  float endPointY=mouseY; //define the Y position of the end point that will follow the mouse;
  
    
  
  float deltaX=mouseX-width/2; //create a variable with the delta of the x component of the ending - start point
  
  float deltaY=mouseY-height/2; //create a variable with the delta of the y component of the ending - start point
  
  float angleInRadians=atan2(deltaY,deltaX); //get the angle in radians between them with atan2()
  
  
  
  
  
  PVector[]points=new PVector[100]; //create an array of vectors that will store the flat positions of points that will create the graph with the number of elements equal to the size of the of the arraylist
  
  PVector[]amplitude = new PVector[100]; //create an array of vectors that will store the amplitude of the mapped mouse with the number of elements equal to the size of the of the arraylist
  
    
  
//initalize each vector with x=0 and y=0 values;
  
  for(int a=0; a<100-1; a++){
  
    points[a] = new PVector(0,0,0);
  
    amplitude[a] = new PVector(0,0,0);
  
  }
  
   
  
  //here the magic begins
  
  
  
//we will create a line made of vertex, and each vertex will receive the values of the vectors
  
  
  
textSize(28);
  
fill(255);
  
text("60",30,40);
text("69",width-60,40);
text("100",30,height-40);
text("127",width-60,height-40);
  
text("hertz "+hertz,width-300,height/2+100);
  
  
  
if(mousePressed){
  
  if((mouseX>10&&mouseX<50) && (mouseY>10&&mouseY<60)){
  
    noteNumber=60;
  
  }
  
  if((mouseX>width-80&&mouseX<width) && (mouseY>10&&mouseY<60)){
  
    noteNumber=69;
  
  }
  
   if((mouseX>10&&mouseX<50) && (mouseY>height-70&&mouseY<height)){
  
    noteNumber=100;
  
  }
  
    if((mouseX>width-80&&mouseX<width) && (mouseY>height-70&&mouseY<height)){
  
    noteNumber=127;
  
  }
  
  
}
  
println("noteNumber "+ noteNumber);
  
//convert midi to frequency
  
    
hertz = ( 440*pow(2,((noteNumber-69)/12.0))) ;
println("hertz "+ hertz);
  
  
  
  ampl=20;//aplitude of 20px
  
  
  
  // For every x value, calculate a y value with sine function
  

  
  for (int i = 0; i < 100-1; i++) {
 
    
    theta += int(hertz);
   theta+=int(dx);
   if(theta%1000==0){//reset theta
     theta=0;
   }
   
    yvalues[i] = sin(theta)*ampl;
  
   println(theta);  
  
  }
  
 
  
  
  
  beginShape();
  
  noFill(); //no fill
  
  stroke(255); // white stroke
  
  strokeWeight(2); //2 px stroke
  
  
  
  for(int i = 0; i<100-1;i++){
  
  
  
  float X=lerp(startPointX,endPointX,i/float(99)); // create a linear interpolation between the start and the end point of the X component, and the amount of interpolation will cover the entire interval;
  
  float Y=lerp(startPointY,endPointY,i/float(99));  // create a linear interpolation between the start and the end point of the Y component, and the amount of interpolation will cover the entire interval;
  
  amplitude[i].set(0,(yvalues[i]),0); //set each vertex of the aray with the amplitude of the graph, acquiring the data of the buffer
  
  rotate2D(amplitude[i],angleInRadians); //rotate the vector of amplitude acordingly to the angle between the start and end points
  
  
  
  points[i].set(X,Y,0); //set each vertex of the array with the correspondent value of the interpolation, creating a flat line
  
  points[i].add(amplitude[i]); //add the amplitude vector to the flat line of vectors, creating a 2D graph
  
   
  
  vertex (points[i].x,points[i].y); //draw each vertex with the values (coordinates) of the vertex
  
  }
  
  endShape();
  
   
  
  //draw the ellipses with the positions of the startpoint and endpoint
  
  float diam=40;
  
  fill(255);
  
  ellipse(startPointX,startPointY,diam,diam);
  
  ellipse(endPointX,endPointY,diam,diam);
  
   
  
  
  
}
  
  
//A function that rotates the vector
  
  
  
void rotate2D(PVector v, float angle) {
  
  // What's the magnitude?
  
  float m = v.mag();
  
  // What's the angle?
  
  float a = v.heading2D();
  
  
  
  // Change the angle
  
  a += angle;
  
  
  
  // Polar to cartesian for the new xy components
  
  v.x = m * cos(a);
  
  v.y = m * sin(a);
  
}

Dynamic waveform representation in Processing

I'll show how to use the method of the previous tutorial to draw dynamic waveforms, displaying the sound of the microphone input between two points: the center of the screen and the mouse.

Reactable look-alike =)

First, let's import the minim library

import ddf.minim.*; //import minim

Minim minim;//declare minim

AudioInput in; //declare an input

int bufferSize = 1280; //define the buffer size

int newBufferSize = bufferSize; //declare and initialize the buffer size

void setup(){

  size(700,700); // size of the screen

  minim = new Minim(this); //initialize minim

  in = minim.getLineIn(Minim.MONO, bufferSize);// get a line in from Minim, default bit depth is 16

}

void draw(){

}

And... change variables
The amplitude of the graph will be the spectrum of the input audio wave. We just have to change the values of the amplitude vector for the values of the buffer, which we get with a "for" function that increment till the buffer size -1, and replace the Y component of the vector with (in.left.get()) .

import ddf.minim.*; //import minim
Minim minim;//declare minim
AudioInput in; //declare an input




int bufferSize = 1280; //define the buffer size
int newBufferSize = bufferSize; //declare and initialize the buffer size

void setup(){
  size(700,700,P3D); // size of the screen
  minim = new Minim(this); //initialize minim
  in = minim.getLineIn(Minim.MONO, bufferSize);// get a line in from Minim, default bit depth is 16
  // get a line out from Minim, default sample rate is 44100, default bit depth is 16
  

  
}

void draw(){
  
  background(0,0,255);
  
  float startPointX = width/2; //define the X position of the start point in the center of the screen;
  float startPointY = height/2; //define the Y position of the start point in the center of the screen;
  float endPointX=mouseX; //define the X position of the end point that will follow the mouse;
  float endPointY=mouseY; //define the Y position of the end point that will follow the mouse;
  
  
float deltaX=mouseX-width/2; //create a variable with the delta of the x component of the ending - start point
float deltaY=mouseY-height/2; //create a variable with the delta of the y component of the ending - start point
float angleInRadians=atan2(deltaY,deltaX); //get the angle in radians between them with atan2()


  PVector[]points=new PVector[1280]; //create an array of vectors that will store the flat positions of points that will create the graph with the number of elements equal to the size of the of the arraylist 
  PVector[]amplitude = new PVector[1280]; //create an array of vectors that will store the amplitude of the mapped mouse with the number of elements equal to the size of the of the arraylist
  
//initalize each vector with x=0 and y=0 values;
  for(int a=0; a<1280-1; a++){
    points[a] = new PVector(0,0,0);
    amplitude[a] = new PVector(0,0,0);
  }
  
//here the magic begins

//we will create a line made of vertex, and each vertex will receive the values of the vectors

  beginShape();
  noFill(); //no fill
  stroke(255); // black stroke
  strokeWeight(3); //5 px stroke

  for(int i = 0; i<1280-1;i++){

  float X=lerp(startPointX,endPointX,i/float(1280-1)); // create a linear interpolation between the start and the end point of the X component, and the amount of interpolation will cover the entire interval;
  float Y=lerp(startPointY,endPointY,i/float(1280-1));  // create a linear interpolation between the start and the end point of the Y component, and the amount of interpolation will cover the entire interval;
  amplitude[i].set(0,(in.left.get(i)*200),0); //set each vertex of the aray with the amplitude of the graph, acquiring the data of the buffer
  rotate2D(amplitude[i],angleInRadians); //rotate the vector of amplitude acordingly to the angle between the start and end points

  points[i].set(X,Y,0); //set each vertex of the array with the correspondent value of the interpolation, creating a flat line
  points[i].add(amplitude[i]); //add the amplitude vector to the flat line of vectors, creating a 2D graph 
  
  vertex (points[i].x,points[i].y); //draw each vertex with the values (coordinates) of the vertex
  }
  endShape();
  
  //draw the ellipses with the positions of the startpoint and endpoint
  float diam=40;
  fill(255);
  ellipse(startPointX,startPointY,diam,diam);
  ellipse(endPointX,endPointY,diam,diam);
  
}


//A function that rotates the vector

void rotate2D(PVector v, float angle) {
  // What's the magnitude?
  float m = v.mag();
  // What's the angle?
  float a = v.heading2D();
 
  // Change the angle
  a += angle;
 
  // Polar to cartesian for the new xy components
  v.x = m * cos(a);
  v.y = m * sin(a);
}

Dynamic Graphs and Processing

I figured out a simple way to manage graphs in Processing using basically ArrayList, PVector, lerp(); and map(). This method is pretty handy and gives more control to generate graphs.
In this "tutorial" I will show how to create a real time graph that analyses the movement of the mouse, displaying the graph between two defined points (beginning in the center of the screen and following the mouse).
This method can be used to render waveforms following two defined points, or to draw mapped graphs wherever you want to put it in the space of the screen.

Look at the waveforms in the Reactable



I didn't have luck searching for tutorials in order to create and display "controlled" graphs, so, I created a very unique way to solve this problem.

ArrayList.
ArrayList is more flexible than simple arrays to manage data because it's resizable, and the limit of elements is defined by the available memory of the system. If you have to store and analyse an unknown number of elements (Objects, Integers, Floats, Strings, etc), its best to use arraylists. When an element is added, the size of the array increases automatically. It's good to analyse realtime data.

PVector 
PVector is handy because it's possible to think each component of the vector independently. For graphs, you can think each axis of data at time. I used it to rotate real time graphs, like waveforms.

lerp();
Lerp stands for "linear interpolation", and lerp() is a function that make the interpolation between two points. That was the function I used to put de graph wherever I want ( vertical, diagonal, horizontal, backwards). You just specifies where is the beginning point and the end point, and the amount of interpolation in the range of 0 and 1 (0.1 is near to the first point, 0.5 is in the middle and 0.9 is near to the end point). With a "for" function, you achieve an interpolation between any coordinates.

map();
Map() is a function that remaps a number from one range to another. I used this to modify the range of the data in order to resize the graph.

Now, let's put everything together.

Let's start capturing the data.

ArrayList <Float> variation = new ArrayList<Float>(); //Create an ArrayList of floats



void setup(){

  size(400,400); //set the size as 400x400 px

}



void draw (){

  background(200); //set gray background

  float mapMouseXFromCenter = map(mouseX,0,width,-200,200); //create a variable that remaps the X axis of mouse from the range from 0 to width to  the range from -200 to 200: when the mouse is in the 0 position (the left border), the value of the variable is -200, and when the mouse is in the oposite border (width, or 400), the variable is equal to 200



  variation.add (mapMouseXFromCenter); //store the data of the variable (mapped mouse) related to each frame in the arraylist



}

Now, let's display the data

ArrayList <Float> variation = new ArrayList<Float>();





void setup(){

  size(400,400);



}



void draw (){

  background(200);

  float mapMouseXFromCenter=map(mouseX,0,width,-200,200);

  variation.add (mapMouseXFromCenter);



  float startPointX = width/2; //define the X position of the start point in the center of the screen;

  float startPointY = height/2; //define the Y position of the start point in the center of the screen;

  float endPointX=mouseX; //define the X position of the end point that will follow the mouse;

  float endPointY=mouseY; //define the Y position of the end point that will follow the mouse;



  PVector[]points=new PVector[variation.size()]; //create an array of vectors that will store the flat positions of points that will create the graph with the number of elements equal to the size of the of the arraylist

  PVector[]amplitude = new PVector[variation.size()]; //create an array of vectors that will store the amplitude of the mapped mouse with the number of elements equal to the size of the of the arraylist



//initalize every vectors with x=0 and y=0 values;

  for(int a=0; a<variation.size()-1; a++){

    points[a] = new PVector(0,0);

    amplitude[a] = new PVector(0,0);

  }



//here the magic begins



//we will create a line made of vertex, and each vertex will receive the values of the vectors



  beginShape();

  noFill(); //no fill

  stroke(0); // black stroke

  strokeWeight(5); //5 px stroke



  for(int i = 0; i<variation.size()-1;i++){



  float X=lerp(startPointX,endPointX,i/float(variation.size()-1)); // create a linear interpolation between the start and the end point of the X component, and the amount of interpolation will cover the entire interval;

  float Y=lerp(startPointY,endPointY,i/float(variation.size()-1));  // create a linear interpolation between the start and the end point of the Y component, and the amount of interpolation will cover the entire interval;



  points[i].set(X,Y,0); //set each vertex of the array with the correspondent value of the interpolation, creating a flat line

  amplitude[i].set(0,variation.get(i),0); //set each vertex of the aray with the amplitude of the graph, acquiring the data of each element of the arraylist

  points[i].add(amplitude[i]); //add the amplitude vector to the flat line of vectors, creating a 2D graph



  vertex (points[i].x,points[i].y); //draw each vertex with the values (coordinates) of the vertex

  }

  endShape();



}

Try to copy and run this code to see what happens. Now we have the graph right where we intend to: starts in the middle of the screen and follow the mouse. But, the graph doesn't rotates accordingly to the mouse.

When the mouse is under the start point, the graph distorts to a straight line

Rotating Vectors

In order to achieve the rotation we need, we will need to rotate the amplitude vector accordingly to the angle between the start and the end points of the graph.

ArrayList <Float> variation = new ArrayList<Float>(); 


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

void draw (){
  background(200);
  float mapMouseXFromCenter=map(mouseX,0,width,-200,200);
  float mapMouseYFromCenter=map(mouseY,0,height,-200,200);
  variation.add (mapMouseXFromCenter);
  
  float startPointX = width/2; //define the X position of the start point in the center of the screen;
  float startPointY = height/2; //define the Y position of the start point in the center of the screen;
  float endPointX=mouseX; //define the X position of the end point that will follow the mouse;
  float endPointY=mouseY; //define the Y position of the end point that will follow the mouse;
  
  PVector[]points=new PVector[variation.size()]; //create an array of vectors that will store the flat positions of points that will create the graph with the number of elements equal to the size of the of the arraylist 
  PVector[]amplitude = new PVector[variation.size()]; //create an array of vectors that will store the amplitude of the mapped mouse with the number of elements equal to the size of the of the arraylist
  
//initalize every vectors with x=0 and y=0 values;
  for(int a=0; a<variation.size()-1; a++){
    points[a] = new PVector(0,0,0);
    amplitude[a] = new PVector(0,0,0);
  }
//rotating the vectors

float deltaX=mouseX-width/2; //create a variable with the delta of the x component of the ending - start point
float deltaY=mouseY-height/2; //create a variable with the delta of the y component of the ending - start point
float angleInRadians=atan2(deltaY,deltaX); //get the angle in radians between them with atan2()


//here the magic begins

//we will create a line made of vertex, and each vertex will receive the values of the vectors

  beginShape();
  noFill(); //no fill
  stroke(0); // black stroke
  strokeWeight(5); //5 px stroke

  for(int i = 0; i<variation.size()-1;i++){

  float X=lerp(startPointX,endPointX,i/float(variation.size()-1)); // create a linear interpolation between the start and the end point of the X component, and the amount of interpolation will cover the entire interval;
  float Y=lerp(startPointY,endPointY,i/float(variation.size()-1));  // create a linear interpolation between the start and the end point of the Y component, and the amount of interpolation will cover the entire interval;

  points[i].set(X,Y,0); //set each vertex of the array with the correspondent value of the interpolation, creating a flat line
  amplitude[i].set(0,variation.get(i),0); //set each vertex of the aray with the amplitude of the graph, acquiring the data of each element of the arraylist
  rotate2D(amplitude[i],angleInRadians); //rotate the vector of amplitude acordingly to the angle between the start and end points
  points[i].add(amplitude[i]); //add the amplitude vector to the flat line of vectors, creating a 2D graph 
  
  vertex (points[i].x,points[i].y); //draw each vertex with the values (coordinates) of the vertex
  }
  endShape();
  if(frameCount%1000==0){
    for(int j=0; j<variation.size()-1;j++){
    variation.remove(j);
    }
  }
  
}

//A function that rotates the vector

void rotate2D(PVector v, float angle) {
  // What's the magnitude?
  float m = v.mag();
  // What's the angle?
  float a = v.heading2D();
 
  // Change the angle
  a += angle;
 
  // Polar to cartesian for the new xy components
  v.x = m * cos(a);
  v.y = m * sin(a);
}

The intended result:

The graph is dynamically drawn wherever we want

With this method, we have complete control to the graph, defining beginning  and ending points, amplitude, rotation and where the graph is rendered. With the values of the resultant vector (points[i].x and points[i].y) we can make any graph we need.

Bonus: 3D graph

Adding the third dimention of the graph makes a very unusual representation of data (just by adding the Z component (the mapped mouseY). With this, we have 3 dimensions of data: time, mouseX and mouseY;

ArrayList <Float> variation = new ArrayList<Float>(); 
ArrayList <Float> Z=new ArrayList<Float>();


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

void draw (){
  background(200);
  float mapMouseXFromCenter=map(mouseX,0,width,-200,200);
  float mapMouseYFromCenter=map(mouseY,0,height,-200,200);
  variation.add (mapMouseXFromCenter);
  Z.add(mapMouseYFromCenter);
  
  float startPointX = width/2; //define the X position of the start point in the center of the screen;
  float startPointY = height/2; //define the Y position of the start point in the center of the screen;
  float endPointX=mouseX; //define the X position of the end point that will follow the mouse;
  float endPointY=mouseY; //define the Y position of the end point that will follow the mouse;
  
  PVector[]points=new PVector[variation.size()]; //create an array of vectors that will store the flat positions of points that will create the graph with the number of elements equal to the size of the of the arraylist 
  PVector[]amplitude = new PVector[variation.size()]; //create an array of vectors that will store the amplitude of the mapped mouse with the number of elements equal to the size of the of the arraylist
  
//initalize every vectors with x=0 and y=0 values;
  for(int a=0; a<variation.size()-1; a++){
    points[a] = new PVector(0,0,0);
    amplitude[a] = new PVector(0,0,0);
  }
//rotating the vectors

float deltaX=mouseX-width/2; //create a variable with the delta of the x component of the ending - start point
float deltaY=mouseY-height/2; //create a variable with the delta of the y component of the ending - start point
float angleInRadians=atan2(deltaY,deltaX); //get the angle in radians between them with atan2()


//here the magic begins

//we will create a line made of vertex, and each vertex will receive the values of the vectors

  beginShape();
  noFill(); //no fill
  stroke(0); // black stroke
  strokeWeight(5); //5 px stroke

  for(int i = 0; i<variation.size()-1;i++){

  float X=lerp(startPointX,endPointX,i/float(variation.size()-1)); // create a linear interpolation between the start and the end point of the X component, and the amount of interpolation will cover the entire interval;
  float Y=lerp(startPointY,endPointY,i/float(variation.size()-1));  // create a linear interpolation between the start and the end point of the Y component, and the amount of interpolation will cover the entire interval;

  points[i].set(X,Y,0); //set each vertex of the array with the correspondent value of the interpolation, creating a flat line
  amplitude[i].set(0,variation.get(i),Z.get(i)); //set each vertex of the aray with the amplitude of the graph, acquiring the data of each element of the arraylist
  rotate2D(amplitude[i],angleInRadians); //rotate the vector of amplitude acordingly to the angle between the start and end points
  points[i].add(amplitude[i]); //add the amplitude vector to the flat line of vectors, creating a 2D graph 
  
  vertex (points[i].x,points[i].y); //draw each vertex with the values (coordinates) of the vertex
  }
  endShape();
  if(frameCount%1000==0){
    for(int j=0; j<variation.size()-1;j++){
    variation.remove(j);
    Z.remove(j);
    }
  }
  
}

//A function that rotates the vector

void rotate2D(PVector v, float angle) {
  // What's the magnitude?
  float m = v.mag();
  // What's the angle?
  float a = v.heading2D();

  // Change the angle
  a += angle;

  // Polar to cartesian for the new xy components
  v.x = m * cos(a);
  v.y = m * sin(a);
}

Next, I'll show how to render a waveform capturing the data from a microphone using minim.

Posting

I'm very busy these days and I have no hope that this will change anytime soon. I'll try to post with regularity, but I can't assure it... Sorry... :(

Collective face

According with the philosopher Levinas, the concept of face is applicable only to humans. But, if we could analyse the whole internet as a collective human face?

The internet is a acentric rhisomatic web that is expanding, but it's limited. It is a matted web in which the linked points are partially formed by proposed source codes and by rearrangement or addition of code. Internet is a medium, a language and a situation. Strictly speaking, internet is a huge set of data open to modification arising from any part of the web, and it's a place where the source code is modified and expanded accordingly with the users activity. It's a finite web that could be analysed. It's possible (with the correct method) to measure whole humanity as an single individual. It's possible to measure the macro-humor of the internet in a determined moment, evaluate if the internet is being creative or not. This way, i think the internet is like a collective face.

Converting Computer ATX Power Supply to Lab Bench Power Supply

Building an .apk file from your Processing sketch on OSX in order to publish it in Google Play

Building a comercial app for Android OS.
Processing is capable of run the sketch directly on device, however, it doesn't generate the file with a commercial format, that is a signed .apk. In order to get that file, there is a list of procedures to make.

Preparing the sketch
Create icons
It's indicated that you create the icons that will appear when a customer install the application. To get that, you should create three versions of the same icon with different resolutions in png (36x36px, 48x48px and 72x72px), name them as "icon-36.png", "icon-48.pg" and "icon-72.png" and place them inside the sketch folder (not data folder or any other subfolder).

Exporting the sketch
With the sketch opened in Processing in Android Mode, go to File > Export Android Project. It wil create an "android" folder inside the sketch folder with the project.
I had problems exporting with the 2.0 beta version of Processing. I used the version 2.0a.6.

Signing
Installing Tools
The programs needed are Apache Ant, Java Development for OSX, MacPorts, OpenSSL and Android SDK.

Install Apache Ant, that could be download there:  http://ant.apache.org/bindownload.cgi
Extract the archive and rename to "ant". Open Terminal and browse to ant folder. Use the command below to move the folder to ".usr/local":

mv ant /usr/local

Next, type the following command:

cd /usr/local
ln -s ant ant

Open the archive "bashrc"inside "/etc" with the command

sudo pico bashrc

add the following lines in the end of the text

export ANT_HOME=/usr/local/ant
export PATH=${PATH}:${ANT_HOME}/bin

Press control+x to exit and save the file without rename it.
Close Terminal and open it again. Type

ant

If the message “build.xml does not exist” appears, the process is successful.

Install Java Development for OSX https://developer.apple.com/downloads/index.action (mine was Java for OSX 2012-005 Developer Package)

Install MacPorts (http://www.macports.org/install.php).
Use MacPorts to install OpenSSL with the following command:

sudo port sync; sudo port selfupdate; sudo port install openssl


If you don't have the Android SDK installed, Install Android SDK: download this file and extract it into a safe place:  http://developer.android.com/sdk/index.html. Go to the folder "tools" and open the file "android". Next, download the packages. I suggest you download everything you could.


Create the secret key
Open Terminal and browse to the folder in which the Android project were exported.
Create the secret key in order to sign the app.
Type the syntax below replacing the data inside brackets, including the brackets "{}"with the actual names and paths.

keytool -genkey -v -keystore {sketchName}-release-key.keystore -alias {yourName} -keyalg RSA -keysize 2048 -validity 10000

It will be made various questions like your name and last name, city, etc. Fill everithing and type return everytime. When it's done, the following message will be showed [Storing {sketchName}-release-key.keystore], and the file will be stored inside the android folder.

Build an unsigned .apk file
Open Terminal, browse to the android folder and type

ant release

When the build is complete, the message "Build Successful"will be showed and the folde /bin with the unsigned apk file will be created inside the folder "android".
Sign the apk file with the secret key replacing the data inside brackets, and the brackets, with actual data

jarsigner -verbose -keystore {sketchName}-release-key.keystore {complete/path/to/sketchFolder/android/bin/sketchName-unsigned.apk} {Your name (that you defined in the secret key step)}

Hit return

It wil ask you to insert the password that you defined in the secret key step

Next, verify if jarsigner did what it had to with the following command"

jarsigner -verify {complete/path/to/sketchFolder/android/bin/sketchName-unsigned.apk}

The following message will appear:

jar verified.

Finally, build an signed apk ready to publish in Google Play with the command:

zipalign -v 4 {complete/path/to/sketchFolder/android/bin/sketchName-unsigned.apk} {sketchName}.apk

A long list of messages will appear and the message "Verification successful" will be showed
If everything worked, there will be a new file with the name {sketchName}.apk inside the "android" folder.

But, I had a problem. When I called the command "zipalign", the message "command not found" appeared.
What I did (and worked fine) is to open Terminal and browse inside the folder that you installed the Android SDK tools " /android-sdk-macosx/tools" and type the following command:

./zipalign -v 4 {complete/path/to/sketchFolder/android/bin/sketchName-unsigned.apk} {sketchName}.apk

In this case, the file {sketchName}.apk will be builded inside the "tools" folder.
This is the file ready to publish in Google Play.

Thats it! I hope you enjoy!!

Introduction to Arduino Part 1

The best way to learn how to make things with Arduino is to study the electricity laws and the details of electronics first.

But I think you can take a shortcut and pass through all this boring stuff and make the exciting first contact with Arduino. Then, if you like the experience, you can study electricity and electronics more profoundly. 

FIRST:  Know the basic components and how it works.

The most basic thing you should know is the Arduino board.

Arduino

Arduino is nothing more than a simple programable computer, and it works like a microcontroller. To make it work, you have to code in the Arduino IDE with a syntax based in Java, and upload the compiled code to the board using the USB connection. And, of course, you need (in most cases) to create a circuit connected to the Arduino board.

This is the Arduino UNO R3

Arduino UNO R3 Parts. Click to enlarge!

1- USB jack

2- power jack,

3- processor

4- communication chip

5- 16 mhz crystal

6- reset button

7- On led

8- TX/NX leds

9- Led

10- Power pins

11- Analog Inputs

12- TX and RX pins

13- Digital Inputs/outputs. The "~" in front of the numbers are for PWM outputs. 

14- Ground and AREF pins.

15-ICSP for Atmega328

16- ICSP for USB interface

The number of pins (Digital in/out and Analog in) vary with the model of the board.  

Power and Connection

The board can work connected to a computer with an USB cable. In that case, the board works with 5V tension and the max current of 50 mA. If the components of the circuit works with that tension and current, you can use only the power that comes from the USB cable. But, if you want the board running alone, you have to connect a external electrical source.

Important: don't fry your Arduino and/or your USB port!!
Never make a circuit that demands a current greater than 50mA in each port. It could fry your Arduino and/or the USB of your computer.

Never change the wiring of the circuit while connected to USB and/or to an external source.

In cases like that (picture below) is pretty easy to make a short circuit if you accidentally touch in something with exposed terminals, like resistors, transistors, diodes. 

So, if you want to make any change in the circuit, is safer to disconnect the Arduino board of USB and turn off the external source.

Power pins

The power pins (number 10 in the picture above) consists of

3.3V: 3.3Volts out
5V: 5 Volts out
GND: 2 Grounds
VIN: The input voltage to the Arduino board when it's using an external power source (as opposed to 5 volts from the USB connection or other regulated power source). You can supply voltage through this pin, or, if supplying voltage via the power jack, access it through this pin.

3.3V pin apply the current of 3.3V.

5V pin apply the current of 5V.

GND is the reference point in an electrical circuit from which other voltages are measured.

VIN apply the voltage and resistance that comes from a external source. For example, if you connect a source of 9V and 300mA, this is the tension and current that you achieve from this pin.

Analog Pins

Analog pins (number 11 in the picture above) are inputs where you connect analogue components like potentiometers and other sensors. While the digital inputs/outputs work only with 0 and 1 values, the analog imputs works with a values from 0 to 1023.

Digital pins

Digital pins (number 13 in the picture above) can work as inputs or outputs and you define how it will operate with the function pinMode().
The pins that have the "~" in front of the numbers are PWM (Pulse Width Modulation) out, and they can emulate analog output with analogWrite() function. When you use this function, the board modulates the pulse width, varying the frequency of max and low pulses (0 or 1), emulating an analog pulse.

Thats how analog pulse is emulated with PWM out

The first pulse is a digital PWM and the second is a analog pulse.

Next, the protoboard:

Protoboard

This is a protoboard

"A protoboard, also known as breadboard ( is a construction base for prototyping of electronics. The term is commonly used to refer to solderless breadboard(plugboard).

Because the solderless breadboard does not require soldering, it is reusable. This makes it easy to use for creating temporary prototypes and experimenting with circuit design."(Wikipedia).

And this is how those pins are connected

The pins of the protoboard have a pattern of connection, as shown in the picture above. 

The "a" lines are connected horizontally, but, generally, in the middle of them there are a disconnection. These lines are for power supply, where the power cables are inserted.

The "b" lines are connected vertically. There you insert the components and other cables.

Components

Resistor

Resistors

"A resistor is a passive two-terminal electrical component that implements electrical resistance as a circuit element". (Wikipedia).

resistors symbols

a: Resistor;

b: Variable Resistor (Rheostat);

c: Potentiometer;

This is a Potentiometer

"A potentiometer, informally, a pot, in electronics technology is a component, a three-terminal resistor with a sliding contact that forms an adjustable voltage divider.^[1] If only two terminals are used, one end and the wiper, it acts as avariable resistor or rheostat."(Wikipedia).

The colors of the lines indicates the resistivity of the resistor. There is a color code, as you can see below.

 The trick to find the resistance of the resistor is to identify the golden or the silver band, which are the most common index of tolerance. When you find it, this band would be the last of the sequence, and you need to start reading the other way.

 So, for example, if you have this:

The first thing to find is the golden/silver band. In this case, it's golden. So, the sequence is 1-Red, 2-Red, 3-Orange, 4- Gold.

The first band is the first digit, the second band is the second digit. If the third one is the last before the golden band, it is the multiplier, and the last is the tolerance.

So, if you look again at that color code, the reading of the resistor above is 2-2-1kΩ-5%. So, this is a 22kΩ resistor with 5% of tolerance.

More bands = more precision. Generally there are only 4.

Capacitor

Capacitors

"A capacitor (originally known as condenser) is a passive two-terminal electrical component used to store energy in an electric field. (Wikipedia) ".

Capacitors Symbol

Again, there is a color code, as you can see below.

Diode

"In electronics, a diode is a two-terminal electronic component with asymmetric transfer characteristic, with low (ideally zero) resistance to current flow in one direction, and high (ideally infinite) resistance in the other. A semiconductor diode, the most common type today, is a crystalline piece of semiconductor material with a p-n junction connected to two electrical terminals."(Wikipedia).

This is the symbol of diode

In order to know what is the current flow, you need to find the cathode the "negative pole". In the common diode, the cathode is the side with a (white/black) band painted.

LED

LEDs are diodes. LED stands for Light-Emitting Diode. So, there is a polarity too.

In order to know what is the anode e what is the cathode, you have 3 alternatives:

1- The shorter terminal is the cathode (-);

2- The straight side is the cathode (-);

3- Inside the "bulb" the larger leg is the cathode (-);

this is the LED symbol

The oposite of LED is Photodiode.

"A photodiode is a type of photodetector capable of converting light into either current or voltage, depending upon the mode of operation.^[1] The common, traditional solar cell used to generate electric solar power is a large area photodiode." (wikipedia).

Photodiodes

Photodiodes can look exactly like LEDs. In order to identify them, the trick is to look for the bulb with larger area.

This is the Photodiode symbol

Transistor

transistors

"A transistor is a semiconductor device used to amplify and switch electronic signals and electrical power. It is composed of semiconductor material with at least three terminals for connection to an external circuit. A voltage or current applied to one pair of the transistor's terminals changes the current flowing through another pair of terminals. Because the controlled (output) power can be higher than the controlling (input) power, a transistor can amplify a signal." (Wikipedia).

There are four types of polarity of transistors: NPN, PNP, P-Channel, N-Channel

Usually, transistors have 3 legs: base, emitter and colector. The way you discover which is which is to discover what are the model of the transistor you have. 

For example, below there is a tip122 transitor. You can find the model in the body of the transistor (the letters and numbers highlighted below).

With that number, you use google to search for the data sheet. Use the keywords "tip122 data sheet".

With that, you discover what is the type of the transistor (NPN, in this case) and what is the base, the collector and the emitter.

Relay

Relays

"A relay is an electrically operated switch. Many relays use an electromagnet to operate a switching mechanism mechanically, but other operating principles are also used. Relays are used where it is necessary to control a circuit by a low-power signal (with complete electrical isolation between control and controlled circuits), or where several circuits must be controlled by one signal. "(Wikipedia).

Relay Symbol

The relay's switch connections are usually labelled COM, NC and NO:

• COM = Common, always connect to this, it is the moving part of the switch.
• NC = Normally Closed, COM is connected to this when the relay coil is off.
• NO = Normally Open, COM is connected to this when the relay coil is on.
• Connect to COM and NO if you want the switched circuit to be on when the relay coil is on.
• Connect to COM and NC if you want the switched circuit to be on when the relay coil is off.

There are mainly two types of relays: a relay with moving parts, and a solid-state relay.

The number of pins vary with the model of relay. To know how your relay operates, google the model of it. For example, the relay below is a "JQC-3F(T73)", so, google the keywords "JQC-3F(T73) data sheet". 

You will discover that this is a 5 pin relay that operates in 12V.

Search again how a 5 pin relay works.

You will find this schematic:

A 5-PIN relay has a single control circuit, but two separate current paths for the switch: One when the relay is de-energized (OFF - no current through the control coil) and the other the energized (ON - current is flowing through the control coil). When the 5-PIN relay is de-energized (OFF), pins 4 and 5 have continuity. When the relay is energized (ON), pins 3 and 5 have continuity.

Solenoid

"Solenoid is a specific type of relay that internally uses an electromechanical solenoid to operate an electrical switch; for example, anautomobile starter solenoid, or a linear solenoid, which is an electromechanical solenoid."(Wikipedia).

The symbol of a solenoid

To know what type of solenoid you need, you have to know the voltage and amperage needed, the current type (Direct Current or Alternating Current), the power (in Watts), the relative period of activity and the course of the rod.

The relative period of activity is measured by this formula: PA=(sum of the active time/sum of the active time + inactive time) X 100%.

For example, the solenoid I have (above) needs 12V, 130mA when it's active, Alternating Current, have 9W, a PA of 100% and a course of the rod of 8mm. 

Drivers: H-Bridge

"An H bridge is an electronic circuit that enables a voltage to be applied across a load in either direction. These circuits are often used in robotics and other applications to allow DC motors to run forwards and backwards. H bridges are available as integrated circuits, or can be built from discrete components." (Wikipedia)

Below, the schematic of how the H-bridge works.

 Discrete H-Bridge

  Discrete H-Bridge

Sensors

Sensors

There are a bunch of sensors. Temperature sensors, light sensor, infrared sensors, distance sensors, gyroscopes, accelerometers...

"A sensor (also called detector) is a converter that measures a physical quantity and converts it into a signal which can be read by an observer or by an (today mostly electronic) instrument. For example, a mercury-in-glass thermometer converts the measured temperature into expansion and contraction of a liquid which can be read on a calibrated glass tube. A thermocouple converts temperature to an output voltage which can be read by a voltmeter. For accuracy, most sensors are calibrated against known standards."(Wikipedia).

All the sensors I've ever played with work with analog values (0 to 1023). I'm not sure if all the sensors are analog, but I think most of they are. 

They are connected to the analog input pins of Arduino. They are read by the function analogRead(). 

the most common sensors are:

Temperature Sensor

Distance Sensor

Light sensors

Force Sensors

Accelerometer Sensor

Gyroscope Sensor

Tools

Multimeter

A pretty handy tool you should have is a multimeter. 

"A multimeter or a multitester, also known as a VOM (Volt-Ohm meter), is an electronic measuring instrument that combines several measurement functions in one unit. A typical multimeter may include features such as the ability to measure voltage, current and resistance. Multimeters may use analog or digital circuits—analog multimeters (AMM) and digital multimeters (often abbreviated DMM or DVOM.) Analog instruments are usually based on a microammeter whose pointer moves over a scale calibrated for all the different measurements that can be made; digital instruments usually display digits, but may display a bar of a length proportional to the quantity being measured."(Wikipedia).

Instead of teach how to use it, I'll embed a video of a basic tutorial on how to use this thing.

Buying your kit

With all that in mind (you can back here every time you have questions), you can make the next step, that is to buy the Arduino Starter Kit. The basic things you should have is: 

• Arduino Uno
• USB cable
• Breadboard
• Breadboard cables (8~22 cm). About 70 cables are very handy.
• A bunch of LEDs, 5 of each is a good number (red / green / yellow/ white)
• Speaker
• Piezoelectric Buzzer plate
• Push button switches
• Light dependent resistor
• Adjustable resistor
• Sensors, (Flame sensor, temperature sensor, Infrared receiver)
• Resistor kit (200ohm / 1K ohm / 10K ohm) 10 of each is a great beginning
• 9V battery 
• Battery slot
• Storage case 

Testing connection

The next step is to test if everything works.

First of all, download the latest version of Arduino for your OS and install it.

If you have an older Arduino like Duemilanove, Diecimila, or any board with this FTDI chip (image below) you have to install a FTDI driver.

Download the driver for your OS here: http://www.ftdichip.com/Drivers/VCP.htm

These are the drivers you have to install

If your board is newer, like Arduino Uno or Mega 2560, no problem, you don't need to install anything: it'll be detected automatically.

Open the IDE

Connect the Arduino board on your computer.

Go to "Tools"> "Board" and select the model of the board connected to the computer.

Next, go to ""Tools"> "Serial Port" and select the port in which your Arduino is connected.

If your Arduino is plugged, there must be two usb connections and they must be the below the others. For instance, mine is /dev/tty.usbmodem1421

Then, go to "File">"Examples">"01.Basics">"Blink"

Open it, then click on "Upload" (the rounded arrow button), and the program will be compiled and uploaded to the board.

If everything works, the built in led of your Arduino board should blink.

If you selected the wrong board or the wrong port, it will not upload. If it happened, try to select the correct model of your board and the correct port.

Now, you are ready to enter the world of Arduino.

The way I started was following the basic tutorials on Learning session of Arduino website:

So, please, enter http://arduino.cc/en/Tutorial/HomePage

I'll not make tutorials since there are good ones already done. I'll teach how to follow the first tutorials, and then you will be by your own. 

Control Flow

Take a peek at http://arduino.cc/en/Tutorial/BareMinimum

It will teach you the bare minimum needed to get started.

The structure of the code is very similar to Processing. 

//------------------------------------------------------------------------------------

before everything, you can declare global variables and import libraries. 

void setup()

{

// With the function void setup() you run the setup code only once. 

}

void loop ()

{

// With the function void loop() you run your main code repeatedly 

}

//------------------------------------------------------------------------------------

The First Circuit

Blink (with led and resistor on the protoboard)

I'll teach how to follow the "hello world" of Arduino, that is a blinking LED.

Enter this tutorial: http://arduino.cc/en/Tutorial/Blink

• First, you'll notice that there is a description

Blink

This example shows the simplest thing you can do with an Arduino to see physical output: it blinks an LED.

• What is needed (that is not complete, because the resistor is missing):

Hardware Required

• Arduino Board
• LED

• And the instructions: 

To build the circuit, attach a 220-ohm resistor to pin 13. Then attach the long leg of an LED (the positive leg, called the anode) to the resistor. Attach the short leg (the negative leg, called the cathode) to ground. Then plug your Arduino board into your computer, start the Arduino program, and enter the code below.

Most Arduino boards already have an LED attached to pin 13 on the board itself. If you run this example with no hardware attached, you should see that LED blink.

• Notice that strange example picture:

It's strange because the resistor is directly connected to the LED

• And the schematic (that is more precise)

Always follow the schematic in order to know what to do

• And, finally, the code with a explanation of the functions.

Code

In the program below, the first thing you do is to initialize pin 13 as an output pin with the line

pinMode(13, OUTPUT);

In the main loop, you turn the LED on with the line:

digitalWrite(13, HIGH);

This supplies 5 volts to pin 13. That creates a voltage difference across the pins of the LED, and lights it up. Then you turn it off with the line:

digitalWrite(13, LOW);

That takes pin 13 back to 0 volts, and turns the LED off. In between the on and the off, you want enough time for a person to see the change, so the delay() commands tell the Arduino to do nothing for 1000 milliseconds, or one second. When you use the delay() command, nothing else happens for that amount of time. Once you've understood the basic examples, check out the BlinkWithoutDelay example to learn how to create a delay while doing other things.

Once you've understood this example, check out the DigitalReadSerial example to learn how read a switch connected to the Arduino.

/*
  Blink
  Turns on an LED on for one second, then off for one second, repeatedly.

  This example code is in the public domain.
 */

// Pin 13 has an LED connected on most Arduino boards.
// give it a name:
int led = 13;

// the setup routine runs once when you press reset:
void setup() {              
  // initialize the digital pin as an output.
  pinMode(led, OUTPUT);  
}

// the loop routine runs over and over again forever:
void loop() {
  digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);               // wait for a second
  digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);               // wait for a second
}

Making the fucking LED blink on and off

In order to make this thing done, just look to the schematic and notice what is really needed:

• Arduino
• LED
• Resistor 220 ohms

And, since that you don't need a soldered circuit of a blinking LED forever, use:

• Protoboard
• Protoboard cables

Again: take a peek to the schematic

First: Insert a LED on the protoboard wherever you like, since that you connect it horizontally (the legs of the LED couldn't be at the same column) and notice what is the anode and what is the cathode (the cathode have a short leg)

Next, connect the resistor to the anode of the LED, following the anode column.

Then, connect the cable to the cathode of the LED and to the GND pin of the Arduino

And, finally, connect the cable to the digital pin 13 and to the anode of the LED

Now your circuit is complete. Paste the code below inside the Arduino IDE, connect your Arduino to the computer, and upload it to the board.

/*
  Blink
  Turns on an LED on for one second, then off for one second, repeatedly.

  This example code is in the public domain.
 */

// Pin 13 has an LED connected on most Arduino boards.
// give it a name:
int led = 13;

// the setup routine runs once when you press reset:
void setup() {              
  // initialize the digital pin as an output.
  pinMode(led, OUTPUT);  
}

// the loop routine runs over and over again forever:
void loop() {
  digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);               // wait for a second
  digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);               // wait for a second
}

Your led should blink like this, and your first step is accomplished.

Use the same methodology for all the tutorials of the learning session of Arduino site http://arduino.cc/en/Tutorial/HomePage and you could probably become a self taught master of Arduino.
If you arrived at this point, you have a homework to do, that is to follow all tutorials of that link.

This part of the tutorial is over. Wait for the next.

Tank you for being here!