Monday 19 April 2010

Frustration, sucess and animation.


First things first. I wanted my tornado (ellipses) to start off at a certain point so to do this  i declared 3 floats as mentioned in a previous post, i then gave these floats the value of 255,which is the location on the xy scale where they would start.


float z = 255;
float x = 255;
float y = 255;


and the stroke was simply done


stroke(#d504ff);


I then realised that i should construct my animation itself. Meaning what did i want to happen depending ont he wind speed. I looked at the data and saw it was in this mathematical format 3.12. So i was going to use the whole number for my animation, which meant using an IF statement.


int q = int(title[i].getContent().charAt(0));
int w = int(pubDate[i].getContent().charAt(1));
int e = int(value[i].getContent().charAt(2));


I used 3 random letters so that i could use the value of q, which was being pulled in through the xml feed.


so i started with...


if (q <= 210) {
text ("Windspeed is slow, have a nice day! ", 80, 200);


else {
text("Windpseed is high! Take it easy out there!", 50, 150);


Now came hours of research and tutorials..


fill(x,z,y); - This fills my ellipses with colour.
stroke(#d504ff); - this gives it the pink storke outline.
Two very simple lines for code.
ellipse (abs(x+=9*cos(z+=.5-noise(i++)))%L,abs(y+=9*sin(z))%L,40,40);
However this mean looking line required lengthy tutorials via www.learnprocessing.com and www.processing.org.




So using this code it moves the ellipses around the sketch. Ive revised the functions used in this line of code and I do understand why they are sued and what they are for however I dont think id be able to write it off the top of my head. Still in gives me the effect I wanted in my processing. However to get it to move in certain ways I have to change the values of x,y, and z in my IF statement.


text ("Windspeed is slow, have a nice day! ", 80, 200);
z = z - 1;
x = x - 1;
y = y +1;
}
else {






text("Windpseed is high! Take it easy out there!", 50, 150);
x= x - 5;
z = z - 8;
y = y + 5;


}


The numeric values are random numbers I chose, this proved to be very temperamental as the slightest change in the number can result in a completely different animation, as it changes how and where the ellipses fall. It also changes the speed of which they move around the screen, I simply did trial and error with this values till I found an effect I liked for both parts of my IF statement.


Lastly I thought I would explain this..
filter(18);
filter(11);
The filter function is a very artistic function and gave me the wave/ripple/cloud effect when the ellipses move. It distorts the image or in my case my ellipses to create a tail of colour. The numeric value of filter can also be very temperamental however this is a good thing as it makes for very varied animations, and I think it matches my specification perfectly.


So conclusion? Im proud of my work. At the start i hated processing and could not get to grips with it. However tutorials like with most things are a god send! The process was frustrating as I had to learn further before I could really start my sketch, when I just wanted to get it done. There is obviously a lot I still dont understand but I feel through this assignment ive covered the basics and more. As a note its much easier to sign the applet on a mac terminal window as opposed to windows CMD. This process was made simple thanks to Chris saunders. As well as Chris a big thanks goes to www.learnprocessing.org as it has been a huge help!

My processing sketch is available on http://busy-signal.co.uk/processing.html


No comments:

Post a Comment