Learning Processing 2

On my second workshop for processing we learnt some very handy and useful tools that will contribute towards understanding what is needed for an interactive project. This workshop was very enjoyable and I couldn’t wait to sink my teeth in again to Processing and as soon as I got home I did that.

While unlike last week I won’t share the code created during the WorkShop I will show my culumination of the workshop in which combines the 3 parts we learnt. These are:

– Saving out into an image

– Mouse Clicks

– Using Integers to randomise colours/size and loops.

The mouse click was very reminiscent of paint but then got more complicated introducing loops and opacity to create some abstract art. After this we learnt how to make pattern loops which were good but I didn’t see the use for them, however they looked good yet I craved more interaction. This led me to playing around and I made the spin happen upon what a mouse click. Taking this further I researched changing colours upon a click instead of it being random as it moves.  I was very happy with this, it was fun to play with as well as code and it created interesting designs with ease. With the inclusion of the save function too I have attached two examples below.

processing_image_15102014

processing_image_15102014

I decided to change the shape from a triangle to a rectangle though I also tried a circle

and preferred this as demonstrated below.

processing_image_15102014processing_image_15102014

processing_image_15102014

Overall I am still very much enjoying processing and find the coding simple and easy to pick up and with the help of the internet there are plenty of guides out there to easily pick up new techniques.

Please find below the code I made:

void setup(){
size(1080,720);
colorMode(HSB,100);
background(#ffffff);
frameRate(50);
}

int rt=0;
int sz=1;
int cl=0;

void draw(){
if(mousePressed){
if(mouseButton == LEFT){
fill(cl,255,255,20);
noStroke();
translate(mouseX,mouseY);
rotate(rt);
rect(0,0,sz,sz);
}

if(mouseButton == RIGHT){
cl+=10;
cl%=255;
}

else {
save(“processing_image_15102014.png”);
}
}

sz=(sz+2)%300;
rt=rt+4;
cl=(cl+1)%100;
}

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