Beginner: Pointilism or GTFO

 

By now you should have Processing installed in your computer. Do you?

 

So, what’s pointilism? What is it good for?

Pointilism, is a painting technique using points to create an image.

In the past, ancient people would take billions of years creating such masterpieces.

Sometimes people got to draw just one painting during their whole lifetime due

to the difficutly presented by the technique.

Now, thanks to technology, and the fact that we live in the future,

you can pointilize an image in just a matter of seconds.

Problem, renaissance man?

Good, let’s start pointilizing some stuff.

Go ahead and open Motherfucking  Processing.

Let’s start by loading an image.

Create a new processing sketch,

save it and place an image inside the sketch folder.

This one should do:

 

To find where’s your sketch folder type: Apple+K

 

Once that is done, copy, paste, read and run this code:

 

//Here we create our image object.
PImage myImage;

void setup()
{
//Here we load it from our sketch folder.
//Find your sketch folder in Sketch>>show sketch folder
//or just type Apple+K
myImage = loadImage(“simmons.jpg”);

//Here we use the information of the loaded pic
//to set up the size of our window.
//We’re going to pointilize only the pic
//so it’s ok to use the pictures same width and height
//to set up the window.
size(myImage.width,myImage.height);
//We’re just drawing once
//so only one loop of our drawing function
//will be needed.
noLoop();
}

void draw()
{
//Place the loaded image at 0,0 pixels of our window
//and because the window is exactly the size of the picture
//you should only see the picture inside the window.
image(myImage,0,0);
}

You should get this:

Let’s keep moving.

So now we know how to load an image.

To pointilize that image we’re gong to need access it’s pixels.

Let’s do this with this next example.

Copy, paste, read and run:

 

PImage myImage;

void setup()
{
myImage = loadImage(“simmons.jpg”);
size(myImage.width,myImage.height);
noLoop();
}

void draw()
{
//We’re using two loops to read the pixels.
//The inner loop will read each column of pixels
// and the outer will read an inner loop for each width pixel.
//In the structure of the loop first we declare an int and set it to 0
//then we create the conditional if the i is less than the width of the image
//do what’s inside the loop, then add 1 to the variable
//that’s what the “++” in the i++ stands for.
for (int i = 0; i < myImage.width; i++){
for (int j = 0; j < myImage.height; j++){

//here we create a color variable and use the .get to acces the pixels.
color pixelColor = myImage.get(i,j);

//Use the println() function to check values in the output section of your window.
println(“Pixel: ” + i+ “, ” +j+” is of color: “+ pixelColor);
}
}
}

This code shouldn’t do much except print all the colors of pixels.

It should look something like this:

To see how the .get()works, click here.

*Melvin parenthesis.

When drawing with watercolor my teacher would tell me to close my eyes until I see everything blurry. While doing this he explained to me that painting is about seeing the world as stains, and then translating those stains into strokes.

 

Squinch your eyes and see the world as stains.

 

Ok, so you got two concepts now in your head:

The first one is how to acces pixels of an image,

the second one is how to paint with stains.

Let’s mix them together and create our pointilism software.

I’ll add an extra feature to our code, a PDF export

so you can have a nice PDF of your masterpiece to share.

Copy, paste, read and run:

//You need this library to create the pdf.
//No need to download it’s already installed by default.
import processing.pdf.*;

PImage myImage;

int leap, pointSize;

void setup()
{
myImage = loadImage(“simmons.jpg”);
size(myImage.width,myImage.height);

smooth();
noLoop();

//Here we define every each pixels to check and draw a point.
//Play with leap/pointSize to see how they work together.
leap = 6;
//Here we define the size of the point.
pointSize = leap;
//here you specify the name of your PDF.
beginRecord(PDF, “simmons.pdf”);
}

void draw()
{

//Let’s choose a white background.
background(255);
//Notice the i+=leap
//that means instead of running through all of the pixels
//it will check every leap
//You’ll see how the smaller the leap the longer it takes
//to Pointilize.
for (int i = 0; i < myImage.width; i+=leap){
for (int j = 0; j < myImage.height; j+=leap){
//Get the color of the pixel.
color pixelColor = myImage.get(i,j);
//Remove the stroke.
noStroke();
//Fill the ellipse with the pixel color.
fill(pixelColor);
//Draw the elipse.
ellipse(i,j,pointSize,pointSize);
}
}
//After this command the PDF is created,
//anything beyond it won’t be saved.
endRecord();
println(“Finish!”);
}

You should get this on your window.

And this nice PDF inside your sketch folder:

Simmons PDF

You just have been Simmoned.

If you want to start playing with the reference:

http://www.processing.org/reference/


Flattr this

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s