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.
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);
}
}
}
