We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpPrograms › simple picture animation
Page Index Toggle Pages: 1
simple picture animation (Read 1118 times)
simple picture animation
Apr 27th, 2010, 7:58am
 
Hey folks,
I have alittle problem, we had a task in university to make a little picture animation therefore we' ve copied a painting from kandinsky.


void setup() {
 size(350, 505);
 background(50, 100, 95);

//void draw() {
fill(150, 137, 76);
beginShape();
vertex(101, 382);
vertex(165, 335);
vertex(165, 458);
vertex(101, 458);
vertex(101, 382);
endShape();
noStroke();

fill(0);
beginShape();
vertex(165, 335);
vertex(218, 368);
vertex(185, 368);
vertex(185, 382);
vertex(232, 382);
vertex(232, 405);
vertex(180, 405);
vertex(180, 427);
vertex(222, 427);
vertex(222, 458);
vertex(165, 458);
vertex(165, 335);
endShape();

fill(111, 112, 114);
beginShape();
vertex(28, 458);
vertex(42, 458);
vertex(42, 482);
vertex(28, 482);
vertex(28, 458);
endShape();

beginShape();
vertex(292, 20);
vertex(297, 20);
vertex(297, 105);
vertex(292, 105);
vertex(292, 20);
endShape();

fill(0);
beginShape();
vertex(292, 20);
vertex(297, 20);
vertex(297, 105);
vertex(292, 105);
vertex(292, 20);
endShape();

fill(150, 137, 76);
beginShape();
vertex(297, 39);
vertex(334, 39);
vertex(334, 41);
vertex(297, 41);
vertex(297, 39);
endShape();

fill(0);
beginShape();
vertex(297, 50);
vertex(319, 50);
vertex(319, 60);
vertex(297, 60);
vertex(297, 50);
endShape();


beginShape();
vertex(297, 100);
vertex(328, 100);
vertex(328, 105);
vertex(297, 105);
vertex(297, 100);
endShape();

fill(144, 32, 28);
beginShape();
vertex(165, 305);
vertex(100, 305);
vertex(100, 314);
vertex(165, 314);
vertex(165, 305);
endShape();

fill(0);
beginShape();
vertex(165, 289);
vertex(73, 289);
vertex(73, 294);
vertex(165, 294);
vertex(165, 289);
endShape();

fill(180, 122,30);

arc(165, 162, 150, 225, PI/2, PI*1.5); //linker halbkreis
fill(175,130,130,220);
arc(150, 213, 268, 238, 0, PI/2); //viertelkreis rechts unten
fill(170, 180, 170, 220);
arc(150, 213, 268, 238, TWO_PI-PI/2, TWO_PI);//viertelkreis rechts oben



fill(255);
ellipse(209, 162, 10, 10); //großer kreis
fill(76,78,78);
ellipse(200, 156, 4, 4); //kleiner kreis
filter (BLUR, 1);


}

This is my version, now i have to do a simple animation...
i want to make the objects move randomly within the size of the window.
would be fine if someone can help me, i am know how to do it with one single ellipse but i am not sure about freeforms and arcs...
greets
Re: simple picture animation
Reply #1 - Apr 27th, 2010, 8:04am
 
A possible way is to wrap each beginShape()/endShape() block with a pushMatrix(); translate(animPosX, animPosY); on one side, and popMatrix(); on the other side.
Re: simple picture animation
Reply #2 - Apr 27th, 2010, 8:37am
 
Ok, i think we talked about this.. could you please make an example with one of the forms in the code i posted ? That would be great
i am very slow in understanding processing Sad
Re: simple picture animation
Reply #3 - Apr 27th, 2010, 9:13am
 
OK, an example:
Code:
float shape5posX = 0, shape5posY = 0, shape5dirX = -0.5, shape5dirY = 0.25;

void setup() {
size(350, 505);
}
void draw() {
background(50, 100, 95);
// Shape 1
fill(150, 137, 76);
beginShape();
// [...] skipping code
endShape();

// Shape 5
pushMatrix();
translate(shape5posX, shape5posY);
fill(0);
beginShape();
vertex(292, 20);
vertex(297, 20);
vertex(297, 105);
vertex(292, 105);
vertex(292, 20);
endShape();
popMatrix();
shape5posX += shape5dirX;
shape5posY += shape5dirY;

// Shape 6
fill(150, 137, 76);
beginShape();
// [...]

Now, I would instead use arrays, classes and such, but I kept it simple... Smiley
Re: simple picture animation
Reply #4 - Apr 27th, 2010, 9:42am
 
Thank you, thats pretty nice.
now i have another question^^, i want to do it like this for all objects, but what do i have to add that the objects dont run out of the window ? would be nice if they channge direction randomly when they hit "the wall"

and i have this filter (blur) to give it a better look but as i put it into void draw, the filter runs again and again, is there anyway to stop it ?
so i want it blurry but it should blur on and on till the background is black..
greets
Re: simple picture animation
Reply #5 - Apr 27th, 2010, 12:53pm
 
See Learning > Topics Examples > Motion (bounce, collision...).
Re: simple picture animation
Reply #6 - Apr 27th, 2010, 2:28pm
 
ok i tried :

int size = 60;       // Width of the shape
float xpos, ypos;    // Starting position of shape    

float xspeed = 2.8;  // Speed of the shape
float yspeed = 2.2;  // Speed of the shape

int xdirection = 1;  // Left or Right
int ydirection = 1;  // Top to Bottom



void setup() {
 size(350, 505);
 smooth();
  xpos = width/2;
 ypos = height/2;

}

void draw() {
   background(50, 100, 95);
    // Update the position of the shape
 xpos = xpos + ( xspeed * xdirection );
 ypos = ypos + ( yspeed * ydirection );
 
 // Test to see if the shape exceeds the boundaries of the screen
 // If it does, reverse its direction by multiplying by -1
 if (xpos > width-size || xpos < 0) {
   xdirection *= -1;
 }
 if (ypos > height-size || ypos < 0) {
   ydirection *= -1;
 }


fill(150, 137, 76);
pushMatrix();

translate(xpos,ypos);

beginShape();
vertex(101, 382);
vertex(165, 335);
vertex(165, 458);
vertex(101, 458);
vertex(101, 382);
endShape();
popMatrix();


noStroke();

fill(0);
pushMatrix();

translate(xpos,ypos);

beginShape();
vertex(165, 335);
vertex(218, 368);
vertex(185, 368);
vertex(185, 382);
vertex(232, 382);
vertex(232, 405);
vertex(180, 405);
vertex(180, 427);
vertex(222, 427);
vertex(222, 458);
vertex(165, 458);
vertex(165, 335);
endShape();
popMatrix();
}

now there is just one little mistake left, it should move inside the window that i see, so i am not sure which parameter i have to change ?
and i want to have the single shapes move randomly in different directions. would be great if you can change it to the right Smiley
big thanks
Re: simple picture animation
Reply #7 - Apr 27th, 2010, 2:34pm
 
You probably need a "size" different for x and y.
And as I wrote in the other topic, you should zero your reference coordinates (lowest ones), and have initial translations compensating for this.
Page Index Toggle Pages: 1