techpppp: 2009

I am a big fan of Processing . I will show you a simple application I programmed with it.

As described by the website, it is:
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. Processing is an alternative to proprietary software tools in the same domain.

If you don't know how to program, this is a great way to learn, as you can get quick, gratifying results. The latter is very important.
A lot of people give up making their own programs because of the considerable amount of time and things they have to learn before creating something.

If you already know how to program, but you don't practice at work, it will feel great to walk in familiar shoes ! As it's based on Java, you can forget the nightmares you had with other languages like C (pointers..arrr my head hurts!).
I mastered Object Oriented Programming, thanks to Processing ! Also I understood a lot more about computer animation, graphics, how they are rendered...and then you can start doing your own.
You can move on to faster or more complete development environment once you feel confortable. Because, truth be told, the C language is much faster than Processing/Java.

Enough ranting, here is my program, followed by step by step explanations.

String path1,path2;
PImage p1,p2;

void setup(){
size(640,480);
String path1 = selectInput();
p1 = loadImage(path1,"jpg");
p1.resize(width,height);
image(p1,0,0);

String path2 = selectInput();
p2 = loadImage(path2,"jpg");
p2.resize(width,height);
}
void draw(){
if (mousePressed ==true && (mouseButton == LEFT)){
copy(p2,mouseX,mouseY,20,20,mouseX,mouseY,20,20);
}
}

You should download Processing, unzip it,launch it, then paste the code into it.
Just hit the play button. You will be asked twice for a file. Choose two different pictures, JPG format. Click around the picture, drag...
You will then understand what this application is about!

Step by step
First, you need the variables to play with: 2 pieces of text ("String") to hold the path to the images, and 2 images ("PImage") to hold the images themselves.

String path1,path2;
PImage p1,p2;

In Processing, you get your stuff ready in the "void setup()" section, before everything starts happening in the "void draw()" section. Note that they are delimited by brackets.

size sets the size of the application to 640 pixels by 480 pixels.
selectInput calls the dialog to choose a file and stores its path in "path1"
loadImage loads the image into memory, into the "p1" PImage variable.
resize set the size of the "p1" Pimage to the "width" and "height" of the application - we stated these previously with size(). Otherwise, the image you've chosen with selectInput might be too big or too small.
image displays "p1" inside the application window.

We do the same thing for the second picture..but we keep it into memory without displaying it. Yes, you have noticed we are not using image() on this one !

void setup(){
size(640,480);
String path1 = selectInput();
p1 = loadImage(path1,"jpg");
p1.resize(width,height);
image(p1,0,0);

String path2 = selectInput();
p2 = loadImage(path2,"jpg");
p2.resize(width,height);
}

Now the action starts. The code in "void draw()" is run 60 times per second! This rate is called 60 FPS - frames per second.
So what am I doing for EACH FRAME?
I'm checking if it's true that the mouse button is pressed, and if it's the LEFT mouse button.
In this case, I'll call the "copy()" function. Let's detail this just after the code.

void draw(){
if (mousePressed ==true && (mouseButton == LEFT)){
copy(p2,mouseX,mouseY,20,20,mouseX,mouseY,20,20);
}
}

From the reference :
"[..]copies a region of pixels from an image used as the srcImg parameter into the display window.[..]"

So, I am copying a part of the second image("p2"). Actually, I am copying from the same place you clicked - mouseX and mouseY represent the coordinates of the click.
And the size of the block being copied is 20 pixels by 20 pixels.
After copying the bit I wanted, I'm "pasting" it at the same coordinates, the same size.

copy(p2,mouseX,mouseY,20,20,mouseX,mouseY,20,20);

Think this one thoroughly, keep the application open with the code and the reference.....concentrate !
This line might be the hardest to grasp for newbies, but if you understood this, your imagination can now run wild !
If you want to go further or have an easier start,
do have a look at the Processing website, the reference always comes with examples, or you can go through the tutorials.
More advanced libraries can help you achieve anything : music,3D, animation, movie editing, real time video editing, playing with network and the web, etc, etc....

Or you can just peek at the Exhibition or the eye candy at OpenProcessing

techpppp

Monday, October 26, 2009

Multi touch table - MT Crayon Physics

Tuesday, September 29, 2009

A simple application with Processing

Sunday, March 29, 2009

Starting with Blogger