第10回追加テンプレート3

動く絵本

float tx1 = 200, ty1 = 100, tr1 = 30, tVx1 = 0, tVy1 = 1;
float tx2 = 200, ty2 = 315, tr2 = 180, tVx2 = 1, tVy2 = 1;
float tx3 = 350, ty3 = 100, tr3 = 30, tVx3 = 0, tVy3 = 0;

int page = 1; //今何ページ目かを管理する
void setup() {
  size(400, 400);
}
void draw() {
  background(255);

if (page == 1) {
    page1(); //1ページ目のメソッド呼び出し
  } else if (page == 2) {
    page2(); //2ページ目のメソッド呼び出し
  } else if (page == 3) {
    page3(); //3ページ目のメソッド呼び出し
  }
}

void page1() {
  //まずは背景を書いていく

tx1 += tVx1;
  float d = dist(mouseX, mouseY, tx1, ty1);
  //クリック時にマウス座標と近ければ
  if (mousePressed && d < tr1/2) {
    fill(255, 0, 0); //塗りつぶしの色を変える
  } else {
    fill(0, 0, 255);
  }
  ellipse(tx1, ty1, tr1, tr1);

ty2+=tVy2;
  if (ty2 < 300) {
    tVy2 = - tVy2;
  } else if (ty2 > 330) {
    tVy2 = - tVy2;
  }
  float d2 = dist(mouseX, mouseY, tx2, ty2);
  if (mousePressed && d2 < tr2/2) {
    tVx1 = 1;  //図形２をクリックすると、図形１が動く
  } else {
  }
  fill(255, 255, 0);
  ellipse(tx2, ty2, tr2, tr2);

ty3+=tVy3;
  float d3 = dist(tx1, ty1, tx3, ty3);
  if (d3 < tr1/2 + tr3/2) {
    tVy3 = 1;  //図形1と図形３が当たると図形３が動く
  } else {
  }
  fill(255, 0, 255);
  ellipse(tx3, ty3, tr3, tr3);

fill(255);
  rect(300, 300, 100, 100);
  fill(0);
  text("next", 300, 300);
  float d4 = dist(mouseX, mouseY, 350, 350);
  if (mousePressed && d4 < 50) {
    page = 2;  //次のページへ
    mousePressed = false;
  }
}

void page2(){
  text("page2",200,200); 
  fill(255);
  rect(300, 300, 100, 100);
  fill(0);
  text("next", 300, 300);
  float d4 = dist(mouseX, mouseY, 350, 350);
  if (mousePressed && d4 < 50) {
    page = 3;  //次のページへ
    mousePressed = false;
  }
}
void page3(){
  text("page3",200,200); 
  fill(255);
  rect(300, 300, 100, 100);
}

void keyPressed() {
  if (keyCode == ENTER) {
    saveFrame("image-####.png");
  }
}