Processing 2.0 – FOR Loops Image Test

For this we added an image ito processing which involved naming a jpg file and dropping it onto the sketch for it to be saved in the sketches folder, similar to uploading a video on to iMovie for it to find the clip when you want it to play.

The aim of this work shop is to scale the image. From this I used an image of an elder lady looking out of her window. Firstly I created multiples of the image from the original size of the image to a quarter of size. For the quarter image I changed the co-ordinates to mouseX and mouseY so the image would follow the cursor wherever I put it on the canvas.

Here below is the code I used during the beginning of the workshop which lead further to creating a more complex image.

PImage img1;
void setup(){

img1 = loadImage(“gran.jpg”);

size(img1.width, img1.height);
background(0);
}

int s=10;

void draw(){
//tint(255,0,0,20);
image(img1,0,0,img1.width,img1.height);
//image(img2,0,0,img2.width/2,img2.height/2);
//image(img3,0,0,img3.width/3,img2.height/3);
//image(img4,mouseX,mouseY,img4.width/4,img2.height/4);
for (int y=0;y<height; y=y+s){
for (int x=0; x<width; x=x+s){
rect(x,y,s,s);

}
}
}

 

The image that we ended up achieving was of the granny and an edited picture of patrick star changing from one image to another depending on the mouse button being held down.

additionally we cut the image into pixels and got the image to shake in a random pattern within a certain parameter so you could tell there was an image but you weren’t able to tell what the image was. Lastly, I also added text so when the image changes, text appears as well.

 

From this workshop it intrigued me how I could change so much of the image with this amount of code and I’m interested on how much more I would be able to do further on.
00003(1)

I know there is improvement to make towards this image but I was pleased it worked and came out quite well for a first attempt.

 

Below here is the final sketch including some of the code that was taken out along the way.

PImage img1;
void setup(){
img1 = loadImage(“patrick.jpg”);

size(img1.width, img1.height);
background(0);
image(img1,0,0,img1.width,img1.height);
}

int s=6;

void draw(){
fill(250,40,35);
textSize(20);
//tint(255,0,0,20);
if(mouseButton == LEFT || keyPressed){
img1 = loadImage(“gran.jpg”);
text(“GIRL”,10,40);
} else {img1=loadImage(“patrick.jpg”);
text(“GET ON MY LEVEL”,10,40);
} //int s = int(random(10,100));

img1.loadPixels();
//image(img2,0,0,img2.width/2,img2.height/2);
//image(img3,0,0,img3.width/3,img2.height/3);
//image(img4,mouseX,mouseY,img4.width/4,img2.height/4);
for (int y=0;y<height; y=y+s){
for (int x=0; x<width; x=x+s){

int loc = x + (y*width);
color c = img1.pixels[loc];
stroke(c,100);
fill(c,20);
rect(x+ random(-10,10),y+random(-20,20),s,s);

}

}
}

 

Advertisements

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