How to isolate a part in order to animate? How to add 'movement' to a created image.

sjon

Wasn't sure how to explain that, as I'm not too sure what the name of what I want to do is.

But I have an image to use as an example - here's a link to an image of what I've made

So It's a simple little thing, grid of rects with another grid of rects overlayed and shifted. But once I've got to this point I'm not too sure how to go about creating some kind of movement.

What I would like to do is shift the overlay squares about, so have them move down or something like that, idk yet. Get them to move somewhere then move back again might be nice, move diagonally etc.

Sorry this is a bit of a sloppy question, I'm open to any advice really I just wasn't sure how to progress with this I guess.

I've added some translation, but it's kind of weird as I don't know why some of the squares are moving faster than others.

thanks!

here's the code :

EDIT -> Code updated here

void setup() {
  size(700, 700);
  background(255);
}

// Overlay squares.
// r_ stands for rect here and elsewhere. 
float r_x; 
float r_y;
float r_size;

float x_translation = 0;
float y_translation = 0;
float translation_increase = 0.05;



void draw() {
  noStroke();
  draw_back();
  rectMode(CORNER);
  r_x = width/24;
  r_y = height/24;
  r_size = height/12;
  for (int k = 0; k<6; k++) {
    for (int i = 0; i<6; i++) {
      fill(255);
      translate(0, y_translation);

      ellipseMode(CENTER);
      rect(r_x, r_y, r_size, r_size);
      r_x += r_size*2;
    } // end of column loop
    r_x = width/24;
    r_y += r_size*2;
  } // end of row loop
  y_translation += translation_increase;
}// draw end


// this just draws the back grid background
void draw_back() {
  // these are the variables to be used with the 
  // background squares
  float size = height/12;
  float x = width/12 - size/2;
  float y = height/12 - size/2;
  for (int k = 0; k < 12; k++)
  {
    for (int i = 0; i< 12; i++) {
      fill(0);
      rectMode(CENTER);
      rect(x, y, size-10, size-10); 
      x += size;
    } // end of column loop
    x = width/12 - size/2;
    y += size;
  } // end of row loop - end of grid
}

stewartbracken

HEY, this looks fun. I haven't run your code yet, but it looks like you are using translate() which modifies the view matrix, but you are never saving the view matrix state or returning it back to normal after each frame. You should first read up on the matrix in Processing https://processing.org/tutorials/transform2d/.

I'm sure the fix to your draw() method would be something like this:

void draw() {
  noStroke();
  draw_back();
  rectMode(CORNER);
  r_x = width/24;
  r_y = height/24;
  r_size = height/12;
  pushMatrix(); //save matrix state before you start translating it.
  for (int k = 0; k<6; k++) {
    for (int i = 0; i<6; i++) {
      fill(255);
      ellipseMode(CENTER);
      rect(r_x, 0, r_size, r_size); //since you're translating y, you don't need to set y position.
      r_x += r_size*2;
    } // end of column loop
      translate(0, y_translation); //translate y by y_translation for each row going down
    r_x = width/24;
    //r_y += r_size*2; //don't need to move y position since you translate y in the view matrix
  } // end of row loop
popMatrix(); //return matrix to it's state before pushMatrix() call above

}// draw end

sjon

edit - just a note - the push / popMatrix() doesn't actually change anything in the code below.

---

thanks @stewartbracken, that doesn't fix it though.

I'm aware that the push / popMatrix() functions save the current origin status, though I haven't done that tutorial (i'll have a look this evening, thanks)

As it stands what you've written looks like (and remains as) this , there's no movement. Although adding in a line

y_translate += 0.05;

Does create movement.

This could provide a suitable example to continue with though, how would I get the squares to all land on the positions they're on in this image from where they currently are?

I'm open to any methods and ideas that will help though, techniques etc. Thanks for the tute link, I'll go through that.

here's the code (they kind of fall off at the moment)

    void setup() {
      size(700, 700);
      background(255);
    }

    // Overlay squares.
    // r_ stands for rect here and elsewhere. 
    float r_x; 
    float r_y;
    float r_size;

    float x_translation = 0;
    float y_translation = 0;
    float translation_increase = 0.05;



    void draw() {
      noStroke();
      draw_back();
      rectMode(CORNER);
      r_x = width/24;
      r_y = height/24;
      r_size = height/12;
      pushMatrix();
      for (int k = 0; k<6; k++) {
        for (int i = 0; i<6; i++) {
          fill(255);
          translate(0, y_translation);

          ellipseMode(CENTER);
          rect(r_x, 0, r_size, r_size);
          r_x += r_size*2;
        } // end of column loop
        r_x = width/24;
        r_y += r_size*2;
      } // end of row loop
      y_translation += 0.1;
      popMatrix();
    }// draw end


    // this just draws the back grid background
    void draw_back() {
      // these are the variables to be used with the 
      // background squares
      float size = height/12;
      float x = width/12 - size/2;
      float y = height/12 - size/2;
      for (int k = 0; k < 12; k++)
      {
        for (int i = 0; i< 12; i++) {
          fill(0);
          rectMode(CENTER);
          rect(x, y, size-10, size-10); 
          x += size;
        } // end of column loop
        x = width/12 - size/2;
        y += size;
      } // end of row loop - end of grid
    }

stewartbracken

Do you want it to loop for a gif or something? How about using sin()? Right after the pushMatrix() call you can add
translate( sin(1.0millis()/1000.0) * r_size2) Essentially this will move all blocks by [-r_size2, r_size2]. This is a technique I use for looping gifs/animations. I'll let you figure out exactly how this works. Oh an for this to work, remove the y_translation+=.1 line

sjon

hey stewart - is this line correct :

  translate( sin(1.0millis()/1000.0) * r_size2)

I'm not sure what the 1.0millis() is meant to be doing there, I hadn't thought of translating by time though (doh...) so cheers for that.

But I'm not sure what's going on with that line that you wrote,

cheers!

sjon

using

    translate(0, (height/2 + sin(theta)*height/2)-r_size);

makes a sketchy sine wave kind of thing, but how to move them individually? Or even as one unit, but appearing in different places like they are on this image

akenaton

@sjon::: is it what you want???

    // Overlay squares.
    // r_ stands for rect here and elsewhere.
    float r_x;
    float r_y;
    float r_size;

    float x_translation = 0;
    float y_translation = 0;
    float translation_increase = 0.05;

    void setup() {
      size(700, 700);
      r_x = width/24;
     r_y= height/24;
     r_size = height/12;
      background(255); 
     draw_back();
    }


    void draw() {

     background(255);//no trails!
      draw_back();
      noStroke();
      rectMode(CORNER);
    //  r_x = width/24;
    //  r_y = height/24;
    //  r_size = height/12;
      //pushMatrix();//useless as you translate ++;
       translate(0, y_translation);//TRANSLATE HERE AND NOT IN THE LOOP!!!
      for (int k = 0; k<6; k++) {
        for (int i = 0; i<6; i++) {
          fill(255,0,0);
    //      translate(0, y_translation);NO!!!!
          //ellipseMode(CENTER);USELESS....
          rect(r_x, 0, r_size, r_size);
          r_x += r_size*2;

        } // end of column loop
        r_x = width/24;
        //r_y += r_size*2;//USELESS.....

      }
      // end of row loop
     y_translation += 0.1;
      //popMatrix();


    }// draw end


    // this just draws the back grid background
    void draw_back() {

      fill(0,255,0);
      float size = height/12;
      float x = width/12 - size/2;
      float y = height/12 - size/2;
      for (int k = 0; k < 12; k++)
      {
        for (int i = 0; i< 12; i++) {
          //fill(0);
          rectMode(CENTER);
          rect(x, y, size-10, size-10);
          x += size;
        } // end of column loop
        x = width/12 - size/2;
        y += size;
      } // end of row loop - end of grid

    }

akenaton

of course if you want ALL the squares at the same speed::

    // Overlay squares.
    // r_ stands for rect here and elsewhere.
    float r_x;
    float r_y;
    float r_size;

    float x_translation = 0;
    float y_translation = 0;
    float translation_increase = 0.05;




    void setup() {
      size(700, 700);
      r_x = width/24;
     r_y= height/24;
     r_size = height/12;
      background(255); 
     draw_back();
    }

    void draw() {

     //background(255);//no trails!
      draw_back();
      noStroke();
      rectMode(CORNER);

    r_y = height/24;

      //pushMatrix();//useless as you translate ++;
       translate(0, y_translation);//TRANSLATE HERE AND NOT IN THE LOOP!!!
      for (int k = 0; k<6; k++) {
        for (int i = 0; i<6; i++) {
          fill(255);
    //      translate(0, y_translation);NO!!!!
    //ellipseMode(CENTER);
          rect(r_x, r_y, r_size, r_size);
          r_x += r_size*2;

        } // end of column loop
        r_x = width/24;
        r_y += r_size*2;

      }
      // end of row loop
     y_translation += 0.1;
      //popMatrix();


    }// draw end


    // this just draws the back grid background
    void draw_back() {
      // these are the variables to be used with the
      // background squares
      fill(0);
      float size = height/12;
      float x = width/12 - size/2;
      float y = height/12 - size/2;
      for (int k = 0; k < 12; k++)
      {
        for (int i = 0; i< 12; i++) {
          //fill(0);
          rectMode(CENTER);
          rect(x, y, size-10, size-10);
          x += size;
        } // end of column loop
        x = width/12 - size/2;
        y += size;
      } // end of row loop - end of grid

    }

sjon

@akenaton - thanks very much, I'll have chance to go over these properly tomorrow and work out whats going on :)

sjon

hi @akenaton

Referring to the code that you posted first (on this link) :

[1]

// TRANSLATE HERE AND NOT IN THE LOOP

I don't see what you're saying with this. Why translate there instead of within the loop? The difference is in the way that the squares fall. If there is a translation outside of the loop (where you put it) they all fall at the same time, whereas if they are inside of the loop they fall kind of staggered and the fact that there are many squares is noticable.

I would have thought that if one was going to do the translation the way you suggested there would be other changes to be made - such as changing the amount of squares to only those visible (as it's pointless having loads of overlapped squares).

[2]

//useless as you translate++

Not sure what you mean by translate++, as in increment a translation with each iteration?

---

Looking at the second example that you posted

Again you translate outside of the loop. I think that's so that the translate treats the for loops as 'one thing'. Is that correct? The reason I ask is that the way you have expressed yourself seems as though you think it's objectively wrong, so I'm interested to hear why, perhaps there is a fairly common lesson for me to learn here.

I'm not sure why Processing seems to be rendering your second example oddly.

here's an image of the way that the background looks when I run it You can see that the squares seem to have edges removed from them (the black squares). And when the code is run the white squares appear to 'hang' for a bit as they cross the white breaker lines.

---

Cheers :)

akenaton

@json===

you wrote::

I've added some translation, but it's kind of weird as I don't know why some of the squares are moving faster than others.

"translate" in the for loop was the reason! - you can do that (it is not "wrong") but the last square will always fall more quickly... as for the second question (background looks weird) add background(255) at the beginning of the draw(); as for hanging i think it is an "illusion".

sjon

@akenaton - ha ha, yeah it is an illusion :P

thanks for your input, there was no definite goal to this post anyway it was more a general curiosity, so there's not really any definite answer either.

Any areas that particularly apply to this practice wise would be good to hear, cheers :)

sjon

the accept answer doesn't seem to be here anymore?

akenaton

i dont know...

PhiLho

"the accept answer doesn't seem to be here anymore?"
Because when you created the thread, you checked "Discussion" instead of "Question", I think. I fixed that, you can accept an answer.