To get to Arduino you’ve first to know its friends

We started the category introducing Arduino, but Arduino has some friends and believe me it is really attached to them and it is not going to work without some of them.

One of them, or at least the first you have to socially know is Processing and …what is processing?

same question same answer..quoting the official site:

“Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool.”

Guess we’re  one of the guys mentioned up there, I like to call myself a designer but because is becoming very common nowadays I actually prefer being considered a “student” an evergreen to me.

Before we start: download Processing at the main page.

For Linux users (as me!):after you have downloaded Processing, extract the folder, open the Shell, enter in the folder using the command cd, remember always to enter in the directory before, like:

cd Desktop

cd processing-1.0.9

and then start the program writing:

sh processing.

and here you go. Processing is there and then you can easily add it to the menu start.

The language is not so difficult and Processing helps you a lot pointing out the mistakes and the possible solutions, so “rect” is to define a rectangle, “line” is to define a line and “point” is just a point.

You have four variables to define objects: the first two refer to high and width compared to the size of the background, and the others two define the dimension in high and width of the object itself.

Another important issue is “void Setup” and “void Draw”; “void Setup” is the static part, were you put the data that are not going to change while the program is running like the background and its color, in “void Draw” you can write down all the rest as variables, numbers and so on.

I suggest you to follow the instruction in this book: Learning Processing, or one of these others you can find a complete list on Processing web sites.

So Processing is more or less like learning German, there’s a kind of familiarity with Latin there, you can hear it, but the connection is not so straight so you’re not going to learn it in two days (I worked on processing in two days and in fact I didn’t learn it), but what you can do is practice with the basic while you are studying the rest; in other words that’s how I’ve learned to say Danke and Bitte in Processing!

The original idea was to have a bunch of squares in the page and being able to move them using the mouse (dragging a specific square) from one angle to another of the window, depending on the side where you moved the square the color inside the square would’ve change. Cool, don’t you think? Well this is not happened.

that’s what is behind this picture: it seems a simple square but isn’t it for two reason.

The first one is that you’re seeing a static image, so you’re missing the fact that you can drag  all around the page that square, by clicking on the surface and stopping the movement just releasing it.

The second one is that working on the code for 6 hours for making this work makes that square special to me!

here’s the code:

float r =229;
float g=85;
float b=0;
float x;
float y;
void setup () {
 size (200,200);
 background (255);
 void mousePressed () {

fill (229,26,78);
rect(x,y, 55,55);
void mouseDragged() {

fill (229,26,78);

//x,y, tengono fermo il quadrato in qualsiasi punto, mentre mouseX, e MouseY lo trascinano, un alternativa al drop è dare coordinate di x,y,

 void draw () {
 background (255);

if (mousePressed == true) {
 x=mouseX;// nel momento in cui si fa il drag le variabili x ed y diventano mouseX e mouseY e si muovono!



I tell you my problem: I made the square but i wasn’t able to correctly drag the square around, even using the command void mouseDragged, there was something wrong cause a copy of that square was still in the background and the drag was working only while movement, disappearing once stopped.

So I added mousePressed to resolve the problem with the movement and it worked, but the other square was still in the background, after hours of intensive swearing looking at  codes of the projects at Open Processing and thanks to Andrea I’ve changed the first two variables of the square in x and  y telling to processing to follow the position of the square comparing to the input of X (horizontal) and Y(vertical) in any moment, while the mouse was pressed. The square in the background was not there anymore and that’s made my day.

The work is till incomplete,what is coming next is to divide the background in four areas and give to each of them different values for colors, so that moving the square in a specific area will influence and change the color of the square itself.

Stay tuned.Squares are going to change.