Processing 1.0 - Processing Discourse

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.

Index › Programming Questions & Help › Syntax Questions › Animation and looping

‹ Previous Topic | Next Topic ›

Pages: 1

Animation and looping (Read 1040 times)

Weremer

Animation and looping
Oct 14^th, 2009, 1:12pm

Hi, it´s me again, this time I want to try some simple animation and create a point moving from the middle of the window to its end

I don´t want to loop() the whole draw() function because I intend the point only to move once and then I'll display another data, but I can't figure out how to make it move using for() or while() iterations.

Maybe I should create more funcions except draw()?

This is my first attempt:
float time, distance, speed, i;

void setup() {
size(400,300);
background(255);
smooth();
}

void draw() {
for (i = 0; i<=width;) {

background(255);
time = millis();
speed = 0.05;
distance = width/2 + speed*time;
fill(0);
ellipse(distance, height/2, 10, 10);
i = distance;
}

}

Doesn't work without loop()

This is the second one, it's too complicated, I suspect that it could have been done simplier:

PFont font;
int i = 0;
int j = 0;
int k = 0;

void setup() {
size(500, 300);
background(0);
smooth();
font = loadFont("Arial-Black-16.vlw");
}

void draw() {
moveRed();
}

void moveRed()
{
loop();
background(0);
stroke(100, 0, 0);
line(width/2, height/2, width, height/2);
fill(100, 0, 0);
textFont(font);
text("X", width-20, height/2-5);
triangle(width-10, height/2-5, width-10, height/2+5, width, height/2);
ellipse(i+250, height/2,10,10);
i = i + 1;
strokeWeight(2);
line(width/2, height/2, width, height/2);
if (i>=width) {

noLoop();
moveGreen();
}

}

void moveGreen()
{
loop();
background(0);
stroke(100, 0, 0);
strokeWeight(2);
line(width/2, height/2, width, height/2);
stroke(0, 100, 0);
line(width/2, height/2, 0, height);
fill(0, 100, 0);
textFont(font);
triangle(1, height-1, 10, height-10, 20, height-10);
text("Y", 1, height-10);
ellipse(height-j,350-2*(height-j)/3,10,10);
j = j + 1;
if (j>=height) {

noLoop();
moveBlue();
}
}
void moveBlue()
{
loop();
background(0);
stroke(100, 0, 0);
strokeWeight(2);
line(width/2, height/2, width, height/2);
stroke(0, 100, 0);
line(width/2, height/2, 0, height);
stroke(0, 0, 100);
strokeWeight(4);
line(width/2, height/2, width/2, 0);
fill(0, 0, 100);
triangle(width/2, 1, width/2-5, 5, width/2+5, 5);
textFont(font);
text("Z", width/2-20,20);
ellipse(width/2, height/2+k,10,10);

k = k - 1;
if (k<(-1)*height) {
noLoop();
}
}

blindfish

Re: Animation and looping
Reply #1 - Oct 15^th, 2009, 1:18am

Weremer wrote on Oct 14^th, 2009, 1:12pm:

I don´t want to loop() the whole draw() function because I intend the point only to move once and then I'll display another data, but I can't figure out how to make it move using for() or while() iterations.

Maybe I should create more funcions except draw()

No. If you want to animate the motion of the point as it moves you have to use draw: the screen only updates at the end of draw so any 'animation' loop within draw using noLoop will effectively be ignored and jump straight to the end. In your second attempt although you're using 'noLoop' you immediately call 'loop' in your next function so effectively everything is constantly looping, even those functions you called noLoop within (it applies to the whole of draw, regardless of where you call it).

There may be arcane workarounds but it's much simpler to simply use a condition to check whether your point has reached its target and then stop any motion. In your case you'd stop adding to the iterator values (i,j,k) once the ellipse reaches its target; something like this:

Code:

// note that i doesn't have to travel the whole width before it reaches the edge...
if (i<width-250) {
   i = i + 1;
 }
 else {
   moveGreen();
}

BTW - a good goal would be to create a function that accepts parameters to achieve the line drawing and ellipse movement rather than creating a new function for each one.

Where is the what if the what is in why?

Weremer

Re: Animation and looping
Reply #2 - Oct 15^th, 2009, 2:14pm

Like that:

void draw() {

if (i<=width/2+5) {
move(100, 0, 0, width/2, height/2, width, height/2, "X", width-20, height/2-5,
width-10, height/2-5, width-10, height/2+5, width, height/2,
i+250, height/2);
i = i + 1;
}
else {
condition1 = true;
noLoop();
}

if(condition1)
{
if (j<height) {
move(0, 100, 0, width/2, height/2, 0, height,
"Y", 1, height-10,1, height-1, 10, height-10, 20, height-10, height-j,350-2*(height-j)/3);
j = j + 1;
}
else {
condition2 = true;
}

}
if(condition2)
{
if (k>(-1)*height) {
move(0, 0, 100, width/2, height/2, width/2, 0,
"Z", width/2-20, 20, width/2, 1, width/2-5, 5, width/2+5, 5, width*3/4, height/2+k);
k = k - 1;
}
else {
condition3 = true;
}

}

if (condition3)
{
some stuff TBC

}

}

void move(int ellipsecolor1, int ellipsecolor2, int ellipsecolor3, int x1_line, int x2_line, int y1_line,
int y2_line, String name, int textpos_x, int textpos_y, int x1_triangle, int y1_triagle, int x2_triangle, int y2_triangle, int x3_triangle, int y3_triangle, int x_ellipse, int y_ellipse)
{
loop();
background(0);
stroke(ellipsecolor1, ellipsecolor2, ellipsecolor3);
strokeWeight(2);
line(x1_line, x2_line, y1_line, y2_line);
fill(ellipsecolor1, ellipsecolor2, ellipsecolor3);
textFont(font);
text(name, textpos_x, textpos_y);
triangle(x1_triangle, y1_triagle, x2_triangle, y2_triangle, x3_triangle, y3_triangle);
ellipse( x_ellipse, y_ellipse, 10, 10);
}

?

It's almost done, I'm thinking about how to keep all the axises present, though.

I´d like the point to move pn some more sofisticated trayectory, parabolic, maybe, how do I do that?

Thank you for your help

blindfish

Re: Animation and looping
Reply #3 - Oct 15^th, 2009, 3:16pm

Weremer wrote on Oct 15^th, 2009, 2:14pm:

Like that:
<snip>

It's almost done, I'm thinking about how to keep all the axises present, though.

I´d like the point to move pn some more sofisticated trayectory, parabolic, maybe, how do I do that

Thank you for your help

Definitely an improvement. To keep the axes present it's simply a matter of moving the conditions around a bit and shifting background(0) from the function and back into draw():

Code:

PFont font;
int i = 0;
int j = 0;
int k = 0;
boolean condition1;
boolean condition2;
boolean condition3;

void setup() {
 size(500, 300);
 background(0);
 smooth();
 font = createFont("Arial", 16);
}

void draw() {
  background(0);
  move(100, 0, 0, width/2, height/2, width, height/2, "X", width-20, height/2-5, width-10, height/2-5, width-10, height/2+5, width, height/2, i+250, height/2);
   
  if (i<=width/2+5) {
    i = i + 1;
  }
  else {
    condition1 = true;
  }
 
  if(condition1) {  
    move(0, 100, 0, width/2, height/2, 0, height, "Y", 1, height-10,1, height-1, 10, height-10, 20, height-10, height-j,350-2*(height-j)/3); 

    if (j<height) {   
      j = j + 1;
    }
    else {
      condition2 = true;
    }
  }
   
  if(condition2) {  
    move(0, 0, 100, width/2, height/2, width/2, 0, "Z", width/2-20, 20, width/2, 1, width/2-5, 5, width/2+5, 5, width*3/4, height/2+k);
    
    if (k>(-1)*height) {
      k = k - 1;
    }
    else {
      condition3 = true;
    }
  }
 
   if (condition3){
     // some stuff TBC
   }
}

void move(int ellipsecolor1, int ellipsecolor2, int ellipsecolor3, int x1_line, int x2_line, int y1_line,
int y2_line, String name, int textpos_x, int textpos_y,  int x1_triangle, int y1_triagle, int x2_triangle, int y2_triangle, int x3_triangle, int y3_triangle, int x_ellipse, int y_ellipse) {
  stroke(ellipsecolor1, ellipsecolor2, ellipsecolor3);
  strokeWeight(2);
  line(x1_line, x2_line, y1_line, y2_line);
  fill(ellipsecolor1, ellipsecolor2, ellipsecolor3);
  textFont(font);
  text(name, textpos_x, textpos_y);
  triangle(x1_triangle, y1_triagle, x2_triangle, y2_triangle, x3_triangle, y3_triangle);
  ellipse( x_ellipse, y_ellipse, 10, 10);
}

Moving everything into a function like that is a good first step towards modularising your code. Of course strictly speaking the next, and better, step is to create an object to perform this task. And as for parabolic curves... they're mathematical structures so it should just be a matter of converting appropriate algebraic formula into code; which actually shouldn't be too difficult

Where is the what if the what is in why?

Weremer YaBB Newbies Offline Posts: 15	Re: Animation and looping Reply #4 - Oct 16^th, 2009, 6:17am Thank you for the guidance

Pages: 1

‹ Previous Topic | Next Topic ›