...and if it was you, as you did? (inverse kinematics)

croqui

hello guys,

can you give some tips on how to do this?

thanks guys!

koogs

post what you have

croqui

thanks! for now, just started with a moving 'quad' ... can be, right?

like this:

float x = 0;
float y = 0;
float speed = 1;


void setup ()  {
  size (800,600);
}


void draw()  {
  background (0);

  noStroke();
  fill (255,255,255);
  // ellipse(x,y,50,50);

  x = x +1;
  y = y + speed;

  if ((y > height) || (y < 0))  {
    speed = speed * -1;
  }

  quad (210, y, 277, y+32, 248, y+78, 190, y+33); 

  if (mouseButton == LEFT) {
    background (150,0,0); // preto
  } 

}

koogs

Well, it's obvious you need 10 shapes, positions and rotations for them all, so you can start there.

You need a class for your shapes (containing what?) and an array of these classes.

Chrisir

I can do this.

But you first

croqui

oh my god, I have to learn how to do this!

Chrisir

I am on a journey

You can solve it!

Chrisir

Each shape has a certain form, a start pos (random) and a target pos

it has also a way to go ("amt", see lerp)

So when mousePressed set a boolean var goToTarget to true

And look at lerp()

koogs

The two lines of specification don't say they need to move slowly into shape on mousePressed, just that they are randomly walking when it isn't...

croqui

i'ts something like that?

PShape tronco;  // QUAD shape
float txshape=0, tyshape=0, pxshape=0, pyshape=0;

void setup() {
  size(800, 600);

  tronco = createShape(QUAD, 173,0, 211,0, 219,73, 164,73);
  tronco.setFill(color(255));
  tronco.setStroke(false);
  tronco.rotate(0.5);  

}


void draw() {
  background(0);

  pxshape = lerp(pxshape, txshape, 1);
  pyshape = lerp(pyshape, tyshape, 1);

  shape(tronco, txshape, tyshape);
}

void mousePressed() {
  txshape = 170;
  tyshape = 200;

}

Chrisir

do you know object oriented programming? make a class myShape.

if not make an array of PShape and fill it with shapes

parallel make 4 parallel arrays to store the wrong random x,y coord and the correct ones (and 2 more arrays to store a movement vector x,y)

when mouse is pressed set a flag boolean usingRandomXY to false :

usingRandomXY=!usingRandomXY; see an example below where you need to use class or more arrays

in the example usingRandomXY is named isMoving (and it's the opposite)

boolean isMoving=false; // see lerp()  -  isMoving==true means lerp() is on

croqui

no, i don't know. is difficult to explain me...?

you don't have one exemple?

Chrisir

PShape[] tronco = new PShape[10];  // QUAD shape

float   pxshape=0, pyshape=0, // initial position
  mxshape=random(-1, 1.21), myshape=random(-1, 1.072), // moving the shape (walking it)
  txshape=170, tyshape=200, // target position 
  cxshape=0, cyshape=0; // current position when using lerp() 

boolean isMoving=false; // see lerp()  -  isMoving==true means lerp() is on
float amt;  //see lerp()

void setup() {
  size(800, 600);

  tronco[0] = createShape(QUAD, 173, 0, 211, 0, 219, 73, 164, 73);
  tronco[0].setFill(color(255));
  tronco[0].setStroke(false);
  tronco[0].rotate(0.5);
}


void draw() {
  background(0);

  cxshape = lerp(pxshape, txshape, amt);
  cyshape = lerp(pyshape, tyshape, amt);

  shape(tronco[0], cxshape, cyshape);

  if (isMoving) {
    amt+=.02;
    if (amt>1.0) 
      amt=1.0;
  } else {
    amt=0;
    pxshape+=mxshape;
    pyshape+=myshape;
    mxshape=keepInside(mxshape, pxshape, 3, width-133 );
    myshape=keepInside(myshape, pyshape, 3, height-133 );
  }

  if (isMoving) {
    text("going to target", 20, 20);
  } else {
    text("drifting", 20, 20);
  }
}

void mousePressed() {
  isMoving=!isMoving; // toggle !!!!

  if (!isMoving) {
    // after lerp
    pxshape = txshape;
    pyshape = tyshape;

    mxshape=random(-1, 1.21); 
    myshape=random(-1, 1.072);
  }


  //txshape = 170;
  //tyshape = 200;
}

float keepInside(float moverAddOfThePosition, float currentPosition, float min, float max) {

  // makes a ball at position currentPosition wnd with movement moverAddOfThePosition 
  // bounce at boundaries min and max. Like with pong, ball bounces left and right.

  // Usage : call separate for x and for y:
  //      mxshape=keepInside(mxshape , pxshape, 33, width-33 );
  //      myshape=keepInside(myshape , pyshape, 33, height-33 );

  if (currentPosition<min) 
    return abs(moverAddOfThePosition); 
  if (currentPosition>max) 
    return -abs(moverAddOfThePosition);

  return moverAddOfThePosition;
}
//

croqui

nice, thanks!

but why in the beginning, the shape come from above and background are gray?

and can i ajust the rotation after de mousePressed?

Chrisir

but why in the beginning, the shape come from above and background are gray?

It is just an example for the usage of lerp() - which you had totally wrong. Do the background and initial position as you like. Position could be random starting position.

Since you have 10 shapes:

You need to bring this into arrays as well:

float   pxshape=0, pyshape=0, // initial position
  mxshape=random(-1, 1.21), myshape=random(-1, 1.072), // moving the shape (walking it)
  txshape=170, tyshape=200, // target position 
  cxshape=0, cyshape=0; // current position when using lerp() 

and can i ajust the rotation after de mousePressed?

yes, similar to the vars above for the position you can do the same with the angle.

Chrisir

also, it's best to place each shape initially (internally) above the origin (0,0) in this line:

tronco[0] = createShape(QUAD, 173, 0, 211, 0, 219, 73, 164, 73);

• this makes the rotation be centered around the center of the shape

Chrisir

...or use a class / objects - see tutorials