a-15 動き(2) ２点間移動

---

a-15 ２点間移動

A地点からB地点へ移動するアニメーションは、tweening（トゥイーニング）と呼ぶ

int startX = 20;
int stopX = 480;
int startY = 30;
int stopY = 480;
float x = startX;
float y = startY;
float step = 0.005;
float pct = 0.0;

void setup(){
  size(500,500);
}

void draw(){
  background(251,187,186);
  if(pct < 1.0){
    x = startX + ((stopX-startX)*pct);
    y = startY + ((stopY-startY)*pct);
    pct += step;
  }
  
  ellipse(x,y,20,20);
}

A地点

B地点

PImageも使えば、画像をtweeningさせる事もできます。

int startX = 20;
int stopX = 480;
int startY = 30;
int stopY = 480;
float x = startX;
float y = startY;
float step = 0.005;
float pct = 0.0;
PImage img;

void setup(){
  size(500,500);
  img = loadImage( "cake.png" );
}

void draw(){
  background(251,187,186);
  if(pct < 1.0){
    x = startX + ((stopX-startX)*pct);
    y = startY + ((stopY-startY)*pct);
    pct += step;
  }
  
  image( img, x, y );
}

ショートケーキ（画像）の２点間移動