simple image steganography in processing

Hi guys, today I'm posting about a project I started some time ago but which today I refined and made faster.
First of all: what is steganography?
Steganography is the discipline whose purpose is to hide the communication between two people.
Maybe you're wondering what's the difference with criptography (if not go fuck yourself,  just kidding): the difference is that while criptography makes the messages between two people not understandable, steganography's purpose is to completly hide the communication.

An example can be: Person A sends to person B a text file about an ordinary topic, but then imagine that in each paragraph of the text there is a number of commas which goes from 0 to 26.
This number could indicate a letter of the alphabet or a "space" (if = 0).

Now, this is a very simple way to send messages and in computer science people exchange lots of data and there are lots of places where you can hide messages (metadata, audio noise, text font etc..).
In this project I'll show you a REALLY simple and rough way to hide an image in another image.

Before going to the code there is an import concept that I'd like to explain: in each byte there are some bit which affect relatively a few the decimal value of the byte.
These bits are called less significant bits (from now I'll refer to them as LSB).
An example: 10010101 = 149
                      10010100 = 148

so here the Least Significant Bit is this: 10010101 infact here its value affects the decimal number by just one unit.


Now coming back to the idea of steganography in images, for each pixel of an image we have 3 bytes on which we can work: the bytes containing values for red, green and blue colors (and sometimes also for alpha transparency, but I won't talk about this).
Of course the process will work on LSB so the resulting image will be mostly equal to the original (no human eye will notice the difference).
As I said I'll make very simple tutorial so I'll explain you how to hide a binary image (which means with only black and white, NO INTERMEDIATE COLORS) in the blue channel (it's the simplest to work on).
My code has also other limitation due to the fact that I just made a code snippet and not a complete work: the image you want to hide and the "container" image must be of the same size and in .bmp format (I haven't tried other, maybe will work anyway).

Just one more things before the code: to make the program faster I used some bits operation, you want to understand them completly have a look at processing reference for bitwise OR and bitwise AND (maybe also bitshift).
Here is a very simple schematic on how an RGB color variable is stored:

Here is the code: 

PImage img, hidden;
int maxw, maxh;

void setup(){
  colorMode(RGB, 255);
  img = loadImage("img.bmp");
  hidden = loadImage("hidden.bmp");
  maxw = img.width;
  maxh = img.height;
  img.loadPixels();
  hidden.loadPixels();
  }
 
void draw(){
  for(int n = 0; n < maxw*maxh; n++){
    if(hidden.pixels[n] == color(255)){
      img.pixels[n] = img.pixels[n] | unbinary("000000000000000000000001");       }
    else{ 
      img.pixels[n] = img.pixels[n] & unbinary("111111111111111111111110");        }
    }
  img.save("processed.bmp");
  exit();
  }

This code, given a "container" image img.bmp and an image to hide(binary) hidden.bmp we'll process them and output to processed.bmp
This final image so contains in the least significant bit of the blue channel a binary image, to extract it you'll have to make another sketch:

PImage img, hidden;
int maxw, maxh;

void setup(){
  colorMode(RGB, 255);
  img = loadImage("processed.bmp");
  maxw = img.width;
  maxh = img.height;
  img.loadPixels();
  hidden = createImage(maxw, maxh, RGB);
  hidden.loadPixels();
  }
 
void draw(){
  for(int n = 0; n < maxw*maxh; n++){
    if((img.pixels[n] & unbinary("000000000000000000000001")) == 0){
      hidden.pixels[n] = color(0);
      }
    else{
      hidden.pixels[n] = color(255);
      }
    }
  hidden.save("foundhidden.bmp");
  exit();
  }
 
 
This sketch, given an image (processed with the program above) processed.bmp will extract the hidden image and output it in foundhidden.bmp
Here is a zip with all files: link.
I know it's a really rough sketch but I think it can be useful just to understand some concepts of steganography, if you refine the code (store image in all the channels and use more LSB instead of just one) advise me, I'd be happy to see your work.
Everyone is free to use the code in this post but I'd appreciate if you mention my name.
I hopeyou like this post, if you have any question please comment or send me an email to damianoandre@gmail.com

Bye, Dami

Main concepts of a grid-based game in processing

This isn't actually a project I worked on but something I did two years ago and I want to share.
For the ones who don't know what a grid based game is, try to think at most of the Pokémon games.
The advantages of creating a grid-based game are:
-lightweight game: all the information (as we'll see) can be stored in a few file and the media files (graphics and sound) are usually a few.
-long-plot game: in this post I'll talk about just the basic concepts but developing this type of game can bring you a endless suite of tools for creating a really long-plotted game.
-easy to code: generally this type of game is easy to code natively (without the use of any external library) and this makes you able to access all the parts of your own engine.

Some concept of my really really simple engine:
1) the game is based on a "map", stored in an array and load from a file
2) in the map moves an element called Personaggio (it's the italian word for "character"), I created a customized class for this
3) the draw() function is used just to draw what's saved in the map array, all the  changes to array are made through the keyPressed() function
4) the character moves to a direction (up, down, left, right) which is stored in a variable

Here is the code I wrote, everyone is free to use it but I would appreciate if you mention my name:

//code by Damiano Andreghetti 08/2014

String mapfile = "map.txt";
int msx = 0;
int msy = 0;
int[][] map = new int[1000][1000];
int dir = 0;
int s = 20;
Personaggio personaggio;

void setup(){
  loadMap(mapfile);
  size(800,800);
}
 
void draw(){
  background(180);
  for(int row = 0; row < msy; row++){
    for(int col = 0; col < msx; col++){
      int val = map[row][col];
      if(val == 49){
          fill(255,0,0);
          rect(col*s, row*s, s, s);         
         }
      if(val == 50){
        fill(0, 255, 0);
        rect(col*s, row*s, s, s);
        if(dir == 0){
          fill(0);
          line(col*s+s/2, row*s+s/2, col*s+s, row*s+s/2);
          }
        if(dir == 1){
          line(col*s+s/2, row*s+s/2, col*s+s/2, row*s+s);
          }
        if(dir == 2){
          line(col*s+s/2, row*s+s/2, col*s, row*s+s/2);
          }
        if(dir == 3){
          line(col*s+s/2, row*s+s/2, col*s+s/2, row*s);
          }
        }
      if(val == 51){
        fill(0, 0, 255);
        rect(col*s, row*s, s, s);
        }
      }
  }   
}

void loadMap(String mapfile){
  String lines[] = loadStrings(mapfile);
  msy = lines.length;
  msx = lines[0].length();
  for (int i = 0 ; i < msy; i++) {   
    for (int b = 0; b < msx; b++) {
      map[i][b] = lines[i].charAt(b);
      if(lines[i].charAt(b) == 50){
        personaggio = new Personaggio(b,i);
        }
      }
    } 
  }

class Personaggio {;
int xpos, ypos;
  Personaggio(int x, int y){
    xpos = x;
    ypos = y;   
    map[ypos][xpos] = 50;
    }
  void move(int mx, int my){
    if(map[ypos+my][xpos+mx] == 48){
        map[ypos][xpos] = 48;
        xpos += mx;
        ypos += my;
        map[ypos][xpos] = 50;
      }
    }
}

void keyPressed() {
  if(keyCode == UP){
   if(dir == 3){
     personaggio.move(0, -1);
     }
   else{
     dir = 3;
     }
   }
  if(keyCode == DOWN){
   if(dir == 1){
     personaggio.move(0, 1);
     }
   else{
     dir = 1;
     }
   }
  if(keyCode == LEFT){
   if(dir == 2){
     personaggio.move(-1, 0);
     }
   else{
     dir = 2;
     }
   }
  if(keyCode == RIGHT){
   if(dir == 0){
     personaggio.move(1, 0);
     }
   else{
     dir = 0;
     }
   }
}

This is a good map you can use to test it:

11111111111
12000000001
10000000001
10000000003
10000000003
10000000001
10011100001
10010100001
10000100001
10000100001
11111111111

the code is really simple but you can make it better easily, by adding for example:
-sprites
-functions for making the character interact with the environment
-bots

I hope this will be useful for you as a row and basic engine for a grid-based game.
If you have any question about the code just comment or send me an email to damianoandre@gmail.com

Bye, Dami

Arduino color detector

Hi guys I'm here with a really nice project: recognise colors with arduino.
It uses a particular property of colors:
The color of an object depends on both the physics of the object in its environment and the characteristics of the perceiving eye and brain. Physically, objects can be said to have the color of the light leaving their surfaces, which normally depends on the spectrum of the incident illumination and the reflectance properties of the surface, as well as potentially on the angles of illumination and viewing. (from wikipedia)
First of all we are talking about objects which don't emit light by themselves.
Then we know that the color we sense is the light that an object reflects, so:
if we know exactly the quantity of light that goes to an object and then with a sensor we measure the quantity that has been reflected we can know the color of the object.
 
The main "problems" are two: we have to do this 3 times (for red, green, blue light), the result is influenced by sources of light we can't control (environmental lights).
The solution to the first problem is simply the repetition of the code three time; for the second problem we have to make a calibration for the sensor.
This calibration consist of gathering the maximum and the minimum light that an object can reflect in this particular environment (we have to do also this 3 times).

Hardware:
you'll nedd:
-an arduino
-an RGB led
-a photoresistor
-2x 10Kohm resistor
-a 220ohm resistor
-a pushbutton
then assemble everything this way:

Here is the arduino code:

/*
Color detector with arduino, RGB led and photoresistor
Code by Damiano Andreghetti (also thanks to the adafruit tutorial about the RGB led)
for more information check my blog: www.ilblogdidami.blogspot.com

Everyone is free to use this code, but I would appreciate if you mention my name
*/

int redPin = 11;
int greenPin = 9;
int bluePin = 10;
int buttonPin = 2;
int buttonState = 0;
int phrPin = 0; //photoresistor pin

//other variables for calibrating and measuring
float calwr, calwg, calwb, calbr, calbg, calbb, r, g, b = 0;


//uncomment this line if using a Common Anode LED
#define COMMON_ANODE

void setup(){
  pinMode(redPin, OUTPUT);
  pinMode(greenPin, OUTPUT);
  pinMode(bluePin, OUTPUT);
  pinMode(buttonPin, INPUT);
  pinMode(phrPin, INPUT);
  Serial.begin(9600);
}
    
void loop(){
  buttonState = digitalRead(buttonPin);
  if(buttonState == 0){
    Serial.println("button pressed: calibrating white");  
    calibration();
  }
  else{
    measure();
  }
}

float readColor(int times){
  float avg, total, current = 0;
  for(int n = 0; n <= times; n++){
    current = analogRead(phrPin);
    total += current;
    delay(20);
  }
  avg = total/times;
  return avg;
}

void setColor(int red, int green, int blue){
  #ifdef COMMON_ANODE
  red = 255 - red;
  green = 255 - green;
  blue = 255 - blue;
  #endif
  analogWrite(redPin, red);
  analogWrite(greenPin, green);
  analogWrite(bluePin, blue);
}

/*
This function is needed because the raw measure is influenced by
environmental light.
*/
void calibration(){
  //first calibrate with white color
  setColor(255, 0, 0);
  delay(100);
  calwr = readColor(7);
  setColor(0, 255, 0);
  delay(100);
  calwg = readColor(7);
  setColor(0, 0, 255);
  delay(100);
  calwb = readColor(7);
  setColor(0, 0, 0);
  //then wait until the button is pressed again
  //so we can calibrate with black color
  Serial.println("waiting to calibrate black");
  for(int i = 0; i <= 10; i+=0){
    buttonState = digitalRead(buttonPin);
    if(buttonState == 0){  
      //calibrate with black color
      setColor(255, 0, 0);
      delay(100);
      calbr = readColor(7);
      setColor(0, 255, 0);
      delay(100);
      calbg = readColor(7);
      setColor(0, 0, 255);
      delay(100);
      calbb = readColor(7);
      setColor(0, 0, 0);
      i = 20;
    }
    else{
      //nothing
    } 
  }
}
 
void measure(){
  float deltacal = 0;
  setColor(255, 0, 0);
  delay(100);
  deltacal = calwr-calbr;
  r = (readColor(7) - calbr)/(deltacal)*255;
  setColor(0, 255, 0);
  delay(100);
  deltacal= calwg-calbg;
  g = (readColor(7) - calbg)/(deltacal)*255;
  setColor(0, 0, 255);
  delay(100);
  deltacal = calwb-calbb;
  b = (readColor(7) - calbb)/(deltacal)*255;
  Serial.print(int(r));
  Serial.print(",");
  Serial.print(int(g));
  Serial.print(",");
  Serial.println(int(b));
}

Now upload this code to the arduino.
To calibrate the sensor press one time the button (the sketch check the button status before the red light) while a white object is near the sensor, then the led turns off.
Now put a black object near the sensor and push the button another time.

The arduino will start writing via serial the RGB value it detects.

Now we're going to use processing to display the result.
Here is a simple sketch:

/*
Sketch used to display the result of the color detector made with arduino
Code by Damiano Andreghetti based on processing serial
for more information and for the arduino schematic and code
check my blog: www.ilblogdidami.blogspot.com

Everyone is free to use this code, but I would appreciate if you mention my name
*/

import processing.serial.*;

Serial port;  // Create object from Serial class
String buff;  // Data received from the serial port
int r,g,b = 0;

void setup() {
  size(600, 600);
  noStroke();
  // List all the available serial ports in the output pane.
  // You will need to choose the port that the Wiring board is
  // connected to from this list. The first port in the list is
  // port #0 and the third port in the list is port #2.
  println(Serial.list());

 
  // use your port
  port = new Serial(this, Serial.list()[1], 9600);
}

void draw() {
  if (0 < port.available()) { 
    buff = port.readString();
    String[] list = split(buff, ',');
    if(list.length == 3){
      r = int(list[0]);
      g = int(list[1]);
      b = int(list[2]);
      background(r,g,b); 
      }
    else{
      background(r,g,b);
      }
    }
  else{
    background(r,g,b);
    }
} 

To make everything work connect the arduino, calibrate the sensor, and run the processing sketch.
If there are some problems re-calibrate the sensor and use a dark-color cylinder to isolate LED and resistor from the environment. Like this:

Here are other photos of the project:

Here is also a video of the project:

I hope you like this post, if you have any question comment or send me an email to damianoandre@gmail.com

Bye, Dami

Processing Particle System

Today I'm posting about a really simple particle system made using processing, here is the code:

Particle particle;

void setup(){
  size(400, 400);
  particle = new Particle(70000, width/2, height/2, color(0, 0, 255));
  particle.generate();
  }

void draw(){
  background(255);
  particle.setDir(mouseX, mouseY);
  particle.update();
  }

//here is the particle system
class Particle{
  int qnt; //Particles count
  float dirx, diry;
  float[] xpos;
  float[] ypos;
  color c;
  Particle(int q, int dx, int dy, color col){ 
    qnt = q;
    dirx = dx;
    diry = dy;
    xpos = new float[q+1];
    ypos = new float[q+1];
    c = col;
    }
  void generate(){                            
    for(int i = 0; i<= qnt; i++){
      xpos[i] = random(0, width);
      ypos[i] = random(0, height);
      stroke(c);
      point(xpos[i], ypos[i]);
      }
    }
  void update(){                            
    for(int i = 0; i<= qnt; i++){
      float spd = random(0, 20);
      float rnd = random(0, 20);            
      if(xpos[i] < dirx-rnd){
        xpos[i] += spd;
        }
      if(xpos[i] > dirx+rnd){
        xpos[i] -= spd;
        }
      if(ypos[i] < diry-rnd){
        ypos[i] += spd;
        }
      if(ypos[i] > diry+rnd){
        ypos[i] -= spd;
        }
      stroke(c);
      point(xpos[i], ypos[i]);
      }
    }
  void setDir(float xd, float yd){
    dirx = xd;
    diry = yd;
    }
  }

As you can see it's really simple (no physics)  but it's also simple to edit it so I think it should be useful.
Here is the link for downloading the code(.zip)  and here is the link for the webdemo(processing.js).

I hope you like this post!

Bye, Dami

Processing speedart + ezvid

Today I made my first speedart video:

I hope you like it!
You can see the final result here(I used processing.js).
For mounting the video  I used a free software called Ezvid that it's useful for creating video and slideshow; it also has functions for audio recording from mic, screen capturing, uploading direct to youtube....
Unfortunately I discovered the screen capture function after that I recorded my video so I used another screen recorder.I think that Ezvid it's a really useful software, it's user-friendly, and it has a lot of cool functions.

Bye, Dami

Processing music frequency visualizer super mario version

Today I'm posting about a new project in processing that uses minim audio library to visualize frequency using super mario tubes.
I think it's cool, here is the code

import ddf.minim.signals.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.ugens.*;

Minim minim;
AudioPlayer song;
FFT fft;

String song_file = "song.mp3";
PImage tube_up;
PImage tube_sec;
PImage bg_mario;
int m = 3;

void setup(){
  size(1200, 622);
  tube_up = loadImage("tube_up.png");
  tube_sec = loadImage("tube_sec.png");
  bg_mario = loadImage("bg_mario.png");
  frameRate(60);
  minim = new Minim(this);
  song = minim.loadFile(song_file, 512);
  song.play();
  fft = new FFT(song.bufferSize(), song.sampleRate());
}

void draw(){
  background(bg_mario);
  fft.forward(song.mix);
  stroke(127, 255, 0, 200);
  for(int i = 0; i <= fft.getFreq(80)*m; i++){
    image(tube_sec, 10, height-(10+i));
    }
  image(tube_up, 10, height-(74+fft.getFreq(80)*m));
  for(int i = 0; i <= fft.getFreq(150)*m; i++){
    image(tube_sec, 180, height-(10+i));
    }
  image(tube_up, 180, height-(74+fft.getFreq(150)*m));
  for(int i = 0; i <= fft.getFreq(200)*m; i++){
    image(tube_sec, 350, height-(10+i));
    }
  image(tube_up, 350, height-(74+fft.getFreq(200)*m));
  for(int i = 0; i <= fft.getFreq(300)*m; i++){
    image(tube_sec, 520, height-(10+i));
    }
  image(tube_up, 520, height-(74+fft.getFreq(300)*m));
  for(int i = 0; i <= fft.getFreq(400)*m; i++){
    image(tube_sec, 690, height-(10+i));
    }
  image(tube_up, 690, height-(74+fft.getFreq(400)*m));
  for(int i = 0; i <= fft.getFreq(500)*m; i++){
    image(tube_sec, 860, height-(10+i));
    }
  image(tube_up, 860, height-(74+fft.getFreq(500)*m));
  stroke(255);
}

I think it's a simple sketch so I won't explain how does it function.

You can download the sketch and the file you need to run it here.
You can also try a web version here(java required).

The demo song that I put in the zip folder and that I used in the web version is
Drive Hard - PrototypeRaptor

I hope you like my post, if you have any question please comment or send me an e-mail to damianoandre@gmail.com

Bye, Dami

P.S.:probably next week I'm gonna post about a TV B gone made using arduino and an Attiny85

Processing Text-image generator Processing

This is a simple post about a processing sketch that makes you able to generate from a normal image an image like this, formed by letter/numbers of differents colors.

This is the processing sketch:

PImage img;
String txt = "hello"; //here goes your text
float spacex = txt.length()*2.9;
//you should need to recalibrate this variable
float spacey = 5.0;

void setup(){
  img = loadImage("img2.jpg");
  size(img.width*2, img.height*2);
  noStroke();
  background(255);
  smooth();
  }

void draw(){
  for(int xpix = 0; xpix <= img.width; xpix += spacex){
    for(int ypix = 0; ypix <= img.height; ypix += spacey){
      color pixcol = img.get(xpix, ypix);
      fill(pixcol);
      text(txt, int(map(xpix, 10, img.width, 10, img.width*2)), int(map(ypix, 10, img.height, 10, img.height*2)));
      }
    }
    saveFrame("img-text.jpg");
  }

This sketch simply create the image getting the color of the processed pixel and save the final result (saveFrame) as an image.
This sketch can generate from this image:

this image:

I hope you like this post, if you have questions comment or send me an e-mail to damianoandre@gmail.com

Bye, Dami

P.S.:the sketch it's calibrated to wite "0" but if you want to write something else you have to recalibrate some things.

Arduino and processing led blinking following music rythm

Hi,
Today I'm writing about a simple project with Arduino and Porcessing to blink 5 LEDs following the music rythm.
To do it we need an audio librari for processing called minim, (created by Damien di Fede) and we need the Firmata library for communicating to Arduino.
For this project you need:
-Arduino board
-5 LEDs (1,8-2v)
-5 220ohm resistors
-breadboard
-some wires
-arduino library for processing (http://www.arduino.cc/playground/Interfacing/Processing)
-minim audio library(http://code.compartmental.net/minim/distro/minim-2.0.2-lib.zip)

First of all prepare the simple connections on your breadboard following this image:

Then open the arduino software and upload the standardFirmata sketch (File>examples>Firmata>StandardFirmata).
Now, before writing the processing code I'd like to tell you something aboute the libraries we're going to use: Firmata is a library made for communciating between processing and Arduino. When you run Firmata in arduino, you can call arduino functions from processing using the arduino library for processing.
The minim library is an audio library for processing, I think it's the best library about audio and sound for processing because it's easy to use but have lots of functions. For the reference chek this link: http://code.compartmental.net/tools/minim/.
Now download the libraries and write the following code in a processing sketch:

import ddf.minim.*;
import ddf.minim.signals.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*; //Import ddf.minim library
import processing.serial.*; //Import serial library
import cc.arduino.*; //Import Arduino library

Arduino arduino;
Minim minim;
AudioPlayer song;
FFT fft;
//I create the objects

//To play another song change the song_file value
String song_file = "song.mp3";
int xmax = 600; //window width
int ymax = 300;//window height

void setup()
{
  size(xmax, ymax);
  minim = new Minim(this);
  arduino = new Arduino(this, Arduino.list()[1], 57600);
  song = minim.loadFile(song_file);
  song.play();
  fft = new FFT(song.bufferSize(), song.sampleRate());
  // in this function I create the minim object, I start
  //communicating with Arduino,I load the song and I play it and
  // I start the Fast Fourier Transofrm
}

void draw()
{
  background(0);
  fft.forward(song.mix);
  stroke(127, 255, 0, 200); //I set the color of my lines
  for(int i = 10; i < fft.specSize(); i++){
    line(i, height-30, i, height - (30+fft.getFreq(i*10)));
    // I create lines that represent the amplitude
    // of each frequency.
    text("Min Freq", 10, height-10);
    text("Max Freq", fft.specSize(), height-10);
  }
  ledcontrol(); //I call the function for the arduino
}

void ledcontrol(){
  //In this function I use arduino analogWrite function
  // to write in PWM pins the amplitude
  // of five general frequency
  arduino.analogWrite(3, int(fft.getFreq(500)));
  arduino.analogWrite(5, int(fft.getFreq(400)));
  arduino.analogWrite(6, int(fft.getFreq(250)));
  arduino.analogWrite(9, int(fft.getFreq(150)));
  arduino.analogWrite(10, int(fft.getFreq(80)));
  }

The code is simple so I think it's not necessary to explain it.
You can download the project files (.zip) here: download.
Here is a test:

For more information about the project comment or send me an e-mail to damianoandre@gmail.com

Bye, Dami

Arduino and Processing serial communication

This a tutorial about serial communication between processing and arduino.
There are two way to communicate from processing to arduino:
-Using "arduino" library in processing and "Firmata" library in arduino
-Using serial library in processing and arduino
In this tutorial I will use the second way because so you haven't to use any extra library.
First of all connect a potentiometer to arduino like in this image:

Then open arduino software and write the following code:

int potPin = 0;

void setup(){
  Serial.begin(9600);
  }

void loop(){
  int val = map(analogRead(potPin), 0, 1023, 0, 255);
  Serial.println(val);
  delay(40);
  }



Using Serial.begin(9600) we start a serial communication between arduino and pc,  then using  
int val = map(analogRead(potPin), 0, 1023, 0, 255);
Serial.println(val);
we assign the analog input from pin 0 to the integer "val" and we modify its value using map() function; finally we write the value of  "val" in the serial port.
Now we have to communicate to arduino shield using processing (in this tutorial I use processing because it's more simple but you can do the same thing using other programming language), so open the processing sketch editor and write the following code:

import processing.serial.*;
Serial port;
float brightness = 0;

void setup(){
  size(500, 500);
  port = new Serial(this, "COM3", 9600);
  port.bufferUntil('\n');
  }

void draw(){
  background(0,0,brightness);
  }

void serialEvent (Serial port){
  brightness = float(port.readStringUntil('\n'));
  }




Using import processing.serial.* we import the processing serial library that we will use to communicate with arduino, then we create a Serial object called "port" and a float called brightness.
In void setup we set the window size and we start communicating with arduino, that is connected to the serial port "COM3" (in this case the arduino port is COM3 but your arduino can be connected in another serial port so if you want to know it, go to start>control panel>devices and printers>device manager and then look for your arduino in the "ports" section) using  
port = new Serial(this, "COM3", 9600);
port.bufferUntil('\n');.

In void draw we set the background color and we assign the blu color to the "brightness" float.
Finally we create a function called serialEvent and we add the "Serial port"  to its arguments.
In this function we assign the serial port value to the brightness float.

Now if you upload the sketch to arduino and you run the processing code the window bakcgound will change if you move potenziometer.
You can download this project here.
I hope you like this post, please comment or send me an e-mail to damianoandre@gmail.com.

P.S.: I'm happy to say you that my blog has more than 8000 views :DD

Bye, Dami