Here is another example I have covered in my workshop. This an example of functions and arrays. This started off with a house shape which I multiplied and agile in a a row. Moving from that we set the position of the houses to the curer so the image would move where I wanted it. I then asked for the image to rotate repeatedly in the draw section and that changed the image with a slight opacity so once the image overlaid the colour would be more vibrant. Here is the code below of my final sketch.Screen Shot 2015-01-26 at 12.07.41Screen Shot 2015-01-26 at 12.09.02

Here is the final piece that I created.

arrays (Converted) from Hayley Vice on Vimeo.

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

}

}
}

 

Processing 2.0 – Test 1

Here was my first attempt during a work session.

The first section show the setup of the page. I have set the size too 640×480 with the colour rate to be in HSB (Hue, Saturation, Brightness) and a fast frame rate of 25 frames per second.

// this is my first sketch// void setup (){ size(640,480); frameRate(25); colorMode(HSB, 100); }

The void draw section turns it into an animation rather than a still image. I have placed into e background here so the background reloads itself with each frame change.However i have added ‘random’ so it is different each time. Throughout the code their is mistakes and a lot of mess which I need to go through to improve.

void draw(){ background(random(0,100),random(50,100),100); strokeWeight (12); point(width/2,height/2); strokeWeight (3); //stroke(255,255,0); noStroke(); ellipse(mouseX,mouseY,random(width),random(height)); // drawing an ecllipse fill(random(0,100),random(50,100),100); ellipse(width/2,height/2,300,300);

Lines position set to ‘mouseX’ and ‘mouseY’ means the position will move where the mouse is on the canvas.

strokeWeight(40); stroke(random(0,100),random(0,250),100); line(mouseX,mouseY,random(width),random(height)); //point and text that moves to a random postition on the canvas – current point random strokeWeight(5); fill(random(0,100),random(50,100),100); //point(random(0,width),random(0,height)); text(“SWAG”,random(0,width),random(0,height)); if (keyPressed) { if (key == ‘ ‘) { background(random(0,100),random(50,100),100); } }

To save each frame and make a small video of my interactive graphic I added this last section of code.

saveFrame(“myimage####.png”); }

Here is a small clip of the processing interactive graphic finished.

!!PLEASE DONT WATCH IF YOU’RE EPILEPTIC!!

myimage0001(2) from Hayley Vice on Vimeo.

This piece interests me though the crazy change of colours and the curiosity it gives you because you don’t know what to expect next.

Processing 2.0

Processing is an programming language which is tailored towards designers. This software has similar code to Java ad allows the user to create, visual art, information graphics, and much more etc.

processing2-logo

The program is free to download online and is open for anyone to use, packed with libraries of examples for you to alter to your hearts content.

Here are a couple examples found in the libraries you can download from the processing program.

Screen Shot 2014-10-23 at 11.22.09

Bibliography

Processing, (2014). Processing Logo. [image] Available at: https://processing.org/img/processing2-logo.jpg [Accessed 14 Oct. 2014].