Animating a For Loop

ericsouther

I am trying to move a grid of shapes off screen as individual objects, but i'm having trouble with needing to track the x,y for a wrap around once the object exits the frame, and the x,y needed in a for loop to create a grid. I have more detailed questions in the code. I know it must be something simple. I've tried making new variables like an xSpace and a ySpace for use in a for loop that would add onto each xy location, but the way I have it setup isn't quite working.

Here is what I'm working on, I'd appreciate any help: https://dropbox.com/s/au3btfalgo3zcw9/AnalogDriftArray.zip

PhiLho

"Animating a For Loop"
Cannot work. draw() show stuff on screen only after the call ends. See What are setup() and draw()? and other articles of the Technical FAQ.

Chrisir

Screen is only updated at end of draw()

What you can do: save images in for-loop (in an arraylist) and replay images later

;-)

Chrisir

or:

try to get rid of the inner for-loops

/** Eric Souther
 June 7th, 2014
 Analog Drift */

// The problem/Question:
/** I am trying to move a grid of shapes off screen as 
 individual objects, but i'm having trouble with needing to 
 track the x,y for a wrap around once the object exits the frame,
 and the x,y needed in a for loop to create a grid.*/


//Array of shape Objects   
Shape[] shapes=new Shape[100];
/** Rate of Drift: rateX, rateY;
 exponential growth with arrow keys */
//float rateX = 10;
//float rateY = 1;

void setup() {
  size(720, 480);
  smooth();
  /** I have tried setting grid here with for loops, 
   but the shape.wrap() function if statment work 
   off one object instead of each independently, 
   which is what I'm looking to do.*/
  int x_i = 0;
  for (int i=0; i < shapes.length; i++) {
    shapes[i] = new Shape(x_i*100+20, i*70, 50, 50);
    if (i % 10 == 0) 
      x_i += 1;
  }
}

void draw() {
  background(0);
  for (int i=0; i < shapes.length; i++) {
    /** So I thought I would set the grid with spacing variables with
     the sX (x space) and sY (y space) of the grid. The reults 
     are interesting, but not what I'm trying to do.*/

    shapes[i].display();
    shapes[i].move();
    shapes[i].wrap();
  }//for
}

//void keyPressed () {
//  if (key == CODED) {
//    if (keyCode == UP) {
//      rateY-=1;
//    } 
//    else if (keyCode == DOWN) {
//      rateY+=1;
//    } 
//    else if (keyCode == LEFT) {
//      rateX-=1;
//    } 
//    else if (keyCode == RIGHT) {
//      rateX+=1;
//    }
//  }
//}

void keyReleased() {
  if (key == CODED) {
    if (keyCode == UP || keyCode == DOWN) {
      //rateY=rateY;
    } 
    else if (keyCode == LEFT || keyCode == RIGHT) {
      //rateX=rateX;
    }
  }
}

// =====================================

class Shape {

  float x=100;
  float y=240;

  float w=50;
  float h=50;

  float driftXspeed;
  float driftYspeed;

  color fillCol = color(random(255), random(255), random(255)); 

  Shape(float tempX, float tempY, 
  float tempW, 
  float tempH) {
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    driftXspeed = 2;
    driftYspeed = .2;
  }

  void display() {
    noStroke();
    rectMode(CENTER);
    fill(fillCol);
    // The x y are the postion and the sX/sY are attempting to
    // create grid, but failing.
    rect(x, y, w, h);
  }

  void move() {
    x+=driftXspeed;
    y+=driftYspeed;
  }

  void wrap() {
    // Wrap Around Drifts
    if (x > width+w/2) {
      x=0-w/2;
    }
    if (x < 0-w/2) {
      x=width+w/2;
    }

    if (y < 0-w/2) {
      y=height+w/2;
    }
    if (y > height+w/2) {
      y=0-w/2;
    }
  }
}
//

Chrisir

to achieve a simple grid, you just want a double for loop without any wrap

see line 26 to 29 mainly :

/* Eric Souther
 June 7th, 2014
 Analog Drift */

// The problem/Question:
/*I am trying to move a grid of shapes off screen as 
 individual objects, but i'm having trouble with needing to 
 track the x,y for a wrap around once the object exits the frame,
 and the x,y needed in a for loop to create a grid.*/


//Array of shape Objects   
Shape[] shapes=new Shape[100];
/* Rate of Drift: rateX, rateY;
 exponential growth with arrow keys */
//float rateX = 10;
//float rateY = 1;

void setup() {
  size(720, 780);
  smooth();
  /* I have tried setting grid here with for loops, 
   but the shape.wrap() function if statment work 
   off one object instead of each independently, 
   which is what I'm looking to do.*/
  int i = 0;

  for (int x=0; x < shapes.length/10; x++) {
    for (int y=0; y < shapes.length/10; y++) {
      shapes[i] = new Shape(x*60+5, y*60+5, 50, 50);
      i++;
    }
  }
}

void draw() {
  background(0);
  for (int i=0; i < shapes.length; i++) {
    /* So I thought I would set the grid with spacing variables with
     the sX (x space) and sY (y space) of the grid. The reults 
     are interesting, but not what I'm trying to do.*/

    shapes[i].display();
    shapes[i].move();
    shapes[i].wrap();
  }//for
}

//void keyPressed () {
//  if (key == CODED) {
//    if (keyCode == UP) {
//      rateY-=1;
//    } 
//    else if (keyCode == DOWN) {
//      rateY+=1;
//    } 
//    else if (keyCode == LEFT) {
//      rateX-=1;
//    } 
//    else if (keyCode == RIGHT) {
//      rateX+=1;
//    }
//  }
//}

void keyReleased() {
  if (key == CODED) {
    if (keyCode == UP || keyCode == DOWN) {
      //rateY=rateY;
    } 
    else if (keyCode == LEFT || keyCode == RIGHT) {
      //rateX=rateX;
    }
  }
}

// =====================================

class Shape {

  float x=100;
  float y=240;

  float w=50;
  float h=50;

  float driftXspeed;
  float driftYspeed;

  color fillCol = color(random(255), random(255), random(255)); 

  Shape(float tempX, float tempY, 
  float tempW, 
  float tempH) {
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    driftXspeed = 2;
    driftYspeed = .2;
  }

  void display() {
    noStroke();
    rectMode(CENTER);
    fill(fillCol);
    // The x y are the postion and the sX/sY are attempting to
    // create grid, but failing.
    rect(x, y, w, h);
  }

  void move() {
    x+=driftXspeed;
    y+=driftYspeed;
  }

  void wrap() {
    // Wrap Around Drifts
    if (x > width+w/2) {
      x=0-w/2;
    }
    if (x < 0-w/2) {
      x=width+w/2;
    }

    if (y < 0-w/2) {
      y=height+w/2;
    }
    if (y > height+w/2) {
      y=0-w/2;
    }
  }
}
//

Chrisir

to see the cells / bricks / stones as individuals I gave them each a random color.

also when you display() it in the class, use the values in the class. Don't use parameters

same goes for function move() in the class where you gave ratex and ratey as parameters instead of using driftXspeed and driftYspeed

;-)

ericsouther

Thanks everyone! Chrisir your simple grid example is closer to what I am trying to do, which is to rebuild aspects of the EAB videolab Mainly it's pattern generation and real time keying. This is why I need rateX and rateY parameters for exponential performative change in drift speed.

I worked further with the code before everyones help and used syphon to send frames to MAX for chromakeying 5 videos into separate layers of 4 patterns generated in processing. Now with the more grid like an less buggy thanks to your help I'm on to the next problem. Thanks again everyone.

    //
    /* Eric Souther
     June 13th, 2014
     Analog Drift */

    //Array of shape Objects   
    Shape[] shapes=new Shape[1000];
    /* Rate of Drift: rateX, rateY;
     exponential growth with arrow keys */
    float rateX = 1;
    float rateY = 1;

    void setup() {
      size(720,480);
      smooth();
      int i = 0;
      for (int x=0; x < shapes.length/100; x++) {
        for (int y=0; y < shapes.length/100; y++) {
          shapes[i] = new Shape(x*80+5, y*50+5, 40, 40);
          i++;
        }
      }
    }

    void draw() {
      background(0);
      for (int i=0; i < shapes.length/10; i++) {
        shapes[i].display();
        shapes[i].move(rateX,rateY);
        shapes[i].wrap();
      }
    }

    void keyPressed () {
      if (key == CODED) {
        if (keyCode == UP) {
          rateY-=1;
        } 
        else if (keyCode == DOWN) {
          rateY+=1;
        } 
        else if (keyCode == LEFT) {
          rateX-=1;
        } 
        else if (keyCode == RIGHT) {
          rateX+=1;
        }
      }
    }

    void keyReleased() {
      if (key == CODED) {
        if (keyCode == UP || keyCode == DOWN) {
          rateY=rateY;
        } 
        else if (keyCode == LEFT || keyCode == RIGHT) {
          rateX=rateX;
        }
      }
    }
    // =====================================
    class Shape {

      float x=100;
      float y=240;
      float w=50;
      float h=50;

      Shape(float tempX, float tempY, 
            float tempW, float tempH) {
        x = tempX;
        y = tempY;
        w = tempW;
        h = tempH;
      }

      void display() {
        noStroke();
        rectMode(CENTER);
        fill(255);
        rect(x, y, w, h);
      }

      void move(float rateX, float rateY) {
        x+=rateX;
        y+=rateY;
      }

      void wrap() {
        // Wrap Around Drifts
        if (x > width+w/2) {
          x=0-w/2;
        }
        if (x < 0-w/2) {
          x=width+w/2;
        }

        if (y < 0-w/2) {
          y=height+w/2;
        }
        if (y > height+w/2) {
          y=0-w/2;
        }
      }
    }
    //

Chrisir

you're welcome!

Chrisir

@ Philho, you wrote, draw() show stuff on screen only after the call ends (draw() ends).

I understand that.

When we would use pure Java in eclipse, would that issue remain or could we there say freely "update my screen now" at any time we wanted?

I mean is that a general java restriction of some sort or does it come in because of processing? I remeber when using Pascal or so, the screen was updated throughout....

Thanks!

(It's a sidenote but still)

;-)

GoToLoop

For Java development using other frameworks, go to http://www.java-gaming.org

ericsouther

I understand that the grid is set in the setup, but what if I want to change the spacing dynamically? I've added controls for changing the size of the shapes with CONTROL shrinking and ALT enlarging. I would like to grow grid spacing with the growth of shapes. If I could do it in draw I would make variables for xGridSpace & yGridSpace and have a calculation that took ShapeW and ShapeH into account.

//Array of shape Objects   
Shape[] shapes=new Shape[1000];
/* Rate of Drift: rateX, rateY;
 exponential growth with arrow keys */
float rateX = 1;
float rateY = 1;
// Shape Size
float shapeW = 30;
float shapeH = 30;

/* USE the CONTROL key to shrink shapes
   USE the ALT     key to enlarge shapes */

void setup() {
  size(720, 480);
  smooth();
  int i = 0;
  for (int x=0; x < shapes.length/100; x++) {
    for (int y=0; y < shapes.length/100; y++) {
      shapes[i] = new Shape(x*80+5, y*50+5, 30, 30);
      i++;
    }
  }
}

void draw() {
  background(75, 255, 0);
  shapeH = shapeW;
  for (int v=0; v < shapes.length/10; v++) {
    shapes[v].display(shapeW, shapeH);
    shapes[v].move(rateX, rateY);
    shapes[v].wrap(shapeW, shapeH);
  }
}

void keyPressed () {
  if (key == CODED) {
    if (keyCode == UP) {
      rateY-=1;
    } else if (keyCode == DOWN) {
      rateY+=1;
    } else if (keyCode == LEFT) {
      rateX-=1;
    } else if (keyCode == RIGHT) {
      rateX+=1;
    }
    /* Control - shape size
       ALT     + shape size */
    if (keyCode == CONTROL) {
      shapeW-=3;
    } else if (keyCode == ALT) {
      shapeW+=3;
    }
  }
}

void keyReleased() {
  if (key == CODED) {
    if (keyCode == UP || keyCode == DOWN) {
      rateY=rateY;
    } else if (keyCode == LEFT || keyCode == RIGHT) {
      rateX=rateX;
    } else if (keyCode == ALT || keyCode == CONTROL) {
      shapeW=shapeW;
    }
  }
}

// =====================

class Shape {

  float x=100;
  float y=240;
  float w=50;
  float h=50;

  Shape(float tempX, float tempY, 
        float tempW, float tempH) {
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
  }

  void display(float w,float h) {
    noStroke();
    rectMode(CENTER);
    fill(255,0,0);
    rect(x, y, w, h);
  }

  void move(float rateX, float rateY) {
    x+=rateX;
    y+=rateY;
  }

  void wrap(float w, float h) {
    // Wrap Around Drifts
    if (x > width+w/2) {
      x=0-w/2;
    }
    if (x < 0-w/2) {
      x=width+w/2;
    }

    if (y < 0-h/2) {
      y=height+h/2;
    }
    if (y > height+h/2) {
      y=0-h/2;
    }
  }
}
//

ericsouther

Something like this about works, it's really glitchy tho. Any thoughts?

     xSpace = shapeW/8;
      ySpace = shapeW/8;

      if(xSpace <= 1 || ySpace <= 1){
        xSpace =1;
        ySpace =1;
      }

      for (int v=0; v < shapes.length/10; v++) {
        for (int xGrid=1; xGrid < shapes.length/100; xGrid+=xSpace) {
          for (int yGrid=1; yGrid < shapes.length/100; yGrid+=ySpace) {
            shapes[v].display(shapeW, shapeH, xGrid, yGrid);
            shapes[v].move(rateX, rateY);
            shapes[v].wrap(shapeW, shapeH);
          }
        }
      }
    }

Chrisir

you can just redefine the whole thing by calling the lines from setup() (put them into an extra function)