[Processing3][if構文]伸びたり縮んだりを繰り返すアメーバ

Question

###　アメーバの凸部分を伸びたり縮んだりさせたい

processingで、以下の画像のようなアメーバを作りました。
この動きだけではなく、アメーバの凸部分だけ伸びたり縮んだりさせたいのですが、
どうも上手にいきません。

![

まずはアメーバを試しに動かしてみようと思って見たのですが、
下の画像のようになってしまいます。

これを伸びきったまんまではなく伸びたり縮んだりを（できればランダムに）
繰り返すようにしたいのですが、この先どうしたらいいでしょうか。。。

試しにif構文を使って

if(x >600){

x -= 1;
y += 1;

}

を挿入して見たのですが、実行してみると下のようにxの動きが止まってしまいます。

私の今の知識では手詰まりなので、詳しい方の助力をいただけると幸いです。
下にコードを載せてありますので、是非よろしくお願いしますm( _ _ )m

####途中でxが止まってしまうコード

float x; //少数型の変数xを定義（右上）
float y; //少数型の変数yを定義(右上)
float ax; //少数型の変数axを定義(右)
float bx; //少数型の変数bxを定義（右下）
float by; //少数型の変数byを定義(右下)
float cy; //少数型の変数cyを定義（下）
float dx;//少数型の変数dxを定義（左下）
float dy; //少数型の変数dyを定義(左下)
float ex; //少数型の変数exを定義(左左下)
float ey; //少数型の変数eyを定義(左左下)
float fx; //少数型の変数fxを定義(左左上)
float fy; //少数型の変数fyを定義(左左上)
float gy; //少数型の変数gyを定義(上)



void setup(){
  
  size(500,500) ;
  background( #ffffff );
  
}



void draw(){
  

  if(x + 500 >= 600 ){
    
    x -= 1;
    y -= 1;
    
  }
  
strokeWeight( 4 );
stroke( 0,200,0 );
fill( 0,255,0 );
 
beginShape();//アメーバの形

x += 1;//毎フレームでアメーバの角のx座標を1ずつ増やす
y -= 1; //毎フレームでアメーバの角のy座標を1ずつ減らす

ax += 1;//毎フレームでアメーバのa角のx座標を1ずつ増やす

bx += 1; //毎フレームでアメーバのb角のx座標を1ずつ増やす
by += 1; //毎フレームでアメーバのb角のy座標を1ずつ増やす

cy += 1; //毎フレームでアメーバのc角のy座標を1ずつ増やす

dx -= 0.5; //毎フレームでアメーバのd角のx座標を1ずつ減らす
dy += 1;//毎フレームでアメーバのd角のy座標を1ずつ増やす

ex -= 1; //毎フレームでアメーバのe角のx座標を1ずつ減らす
ey += 0.25; //毎フレームでアメーバのe角のy座標を0.25ずつ増やす

fx -= 1; //毎フレームでアメーバのf角のx座標を1ずつ減らす
fy -= 0.25; //毎フレームでアメーバのf角のy座標を0.25ずつ減らす

gy -= 1; //毎フレームでアメーバのg角のy座標を1ずつ減らす





vertex( 300, 80 );

bezierVertex( 240,10, 220, gy + 20, 200,80);//g頂点
bezierVertex(200,80,200,120,130,120);//凹み

bezierVertex(130,120,fx + 20,fy + 120,100,180);//f頂点
bezierVertex(100,180,180,220,90,280);//凹み

bezierVertex(90,280,-10 + ex, ey + 320 ,120,320);//e頂点
bezierVertex(120,320,170,330,155,360);//凹み

bezierVertex(155,360,dx  + 100,dy + 600,200,400);//d頂点
bezierVertex(200,400,225,350,250,400);//凹み

bezierVertex(250,400,290,cy  + 500,320,380);//c頂点
bezierVertex(320,380,330,300,360,340);//凹み

bezierVertex(360,340,bx + 450,by + 450,400,300);//b頂点
bezierVertex(400,300,390,280,420,260);//凹み

bezierVertex(420,260,ax + 580,220,420,200);//a頂点
bezierVertex(420,200,380,180,420,130);//凹み

bezierVertex(420,130, x + 500,y + 20,350,100);//頂点
bezierVertex(350,100,325,120,300,80);//凹み

endShape();//アメーバの形終わり

fill(255,255,255);
ellipse(200,100,100,100);//左目の外側
ellipse(300,100,100,100);//右目の外側


fill(0,200,0);
ellipse(200,100,50,50);//左目の黒目
ellipse(300,100,50,50);//右目の黒目


beginShape();//核、口の形

vertex(220,160);

bezierVertex(240,170,260,170,280,160);//口の凹み
bezierVertex(280,160,300,150,320,160);//右の盛り上がり
bezierVertex(320,160,340,170,320,190);//右膨らみ
bezierVertex(320,190,260,230,185,190);//下の膨らみ
bezierVertex(185,190,170,180,185,165);//左膨らみ
bezierVertex(185,165,200,150,220,160);//左の盛り上がり

endShape();
  

}

####全部アメーバの凸が伸びてしまう（何も手を加えていない）コード

float x; //少数型の変数xを定義（右上）
float y; //少数型の変数yを定義(右上)
float ax; //少数型の変数axを定義(右)
float bx; //少数型の変数bxを定義（右下）
float by; //少数型の変数byを定義(右下)
float cy; //少数型の変数cyを定義（下）
float dx;//少数型の変数dxを定義（左下）
float dy; //少数型の変数dyを定義(左下)
float ex; //少数型の変数exを定義(左左下)
float ey; //少数型の変数eyを定義(左左下)
float fx; //少数型の変数fxを定義(左左上)
float fy; //少数型の変数fyを定義(左左上)
float gy; //少数型の変数gyを定義(上)



void setup(){
  
  size(500,500) ;
  background( #ffffff );
  
}



void draw(){
  
strokeWeight( 4 );
stroke( 0,200,0 );
fill( 0,255,0 );
 
beginShape();//アメーバの形

x += 1;//毎フレームでアメーバの角のx座標を1ずつ増やす
y -= 1; //毎フレームでアメーバの角のy座標を1ずつ減らす

ax += 1;//毎フレームでアメーバのa角のx座標を1ずつ増やす

bx += 1; //毎フレームでアメーバのb角のx座標を1ずつ増やす
by += 1; //毎フレームでアメーバのb角のy座標を1ずつ増やす

cy += 1; //毎フレームでアメーバのc角のy座標を1ずつ増やす

dx -= 0.5; //毎フレームでアメーバのd角のx座標を1ずつ減らす
dy += 1;//毎フレームでアメーバのd角のy座標を1ずつ増やす

ex -= 1; //毎フレームでアメーバのe角のx座標を1ずつ減らす
ey += 0.25; //毎フレームでアメーバのe角のy座標を0.25ずつ増やす

fx -= 1; //毎フレームでアメーバのf角のx座標を1ずつ減らす
fy -= 0.25; //毎フレームでアメーバのf角のy座標を0.25ずつ減らす

gy -= 1; //毎フレームでアメーバのg角のy座標を1ずつ減らす





vertex( 300, 80 );

bezierVertex( 240,10, 220, gy + 20, 200,80);//g頂点
bezierVertex(200,80,200,120,130,120);//凹み

bezierVertex(130,120,fx + 20,fy + 120,100,180);//f頂点
bezierVertex(100,180,180,220,90,280);//凹み

bezierVertex(90,280,-10 + ex, ey + 320 ,120,320);//e頂点
bezierVertex(120,320,170,330,155,360);//凹み

bezierVertex(155,360,dx  + 100,dy + 600,200,400);//d頂点
bezierVertex(200,400,225,350,250,400);//凹み

bezierVertex(250,400,290,cy  + 500,320,380);//c頂点
bezierVertex(320,380,330,300,360,340);//凹み

bezierVertex(360,340,bx + 450,by + 450,400,300);//b頂点
bezierVertex(400,300,390,280,420,260);//凹み

bezierVertex(420,260,ax + 580,220,420,200);//a頂点
bezierVertex(420,200,380,180,420,130);//凹み

bezierVertex(420,130, x + 500,y + 20,350,100);//頂点
bezierVertex(350,100,325,120,300,80);//凹み

endShape();//アメーバの形終わり

fill(255,255,255);
ellipse(200,100,100,100);//左目の外側
ellipse(300,100,100,100);//右目の外側


fill(0,200,0);
ellipse(200,100,50,50);//左目の黒目
ellipse(300,100,50,50);//右目の黒目


beginShape();//核、口の形

vertex(220,160);

bezierVertex(240,170,260,170,280,160);//口の凹み
bezierVertex(280,160,300,150,320,160);//右の盛り上がり
bezierVertex(320,160,340,170,320,190);//右膨らみ
bezierVertex(320,190,260,230,185,190);//下の膨らみ
bezierVertex(185,190,170,180,185,165);//左膨らみ
bezierVertex(185,165,200,150,220,160);//左の盛り上がり

endShape();
  

}

Answer 1

一応ProcessingはJavaベースです。JavaとJavascriptは別物...(Javascriptの方が、Javaが流行っていたのでなんとなくそんな名前にしちゃったんだ、とか) でも、ProcessingにもJavascriptモードとかPythonモードもあったりするのでややこしい。その意味でも、タグは修正しておいた方がいいと思います。
あと、「小数」ね。

「途中でxが止まってしまうコード」は、何がいけなかったかというと、プログラムには

  if(x + 500 >= 600 ){

    x -= 1; // ...A
    y -= 1;

  }
//略
  x += 1;//毎フレームでアメーバの角のx座標を1ずつ増やす ...B
  y -= 1; //毎フレームでアメーバの角のy座標を1ずつ減らす
}

と書かれているのでこれを実行すると、
例えばxが100のときには
x+500 >= 600が真なのでAのところで縮むように99に変更した値が
Bでまた伸びる計算で+1されて100になってしまう...
つまりxの値が変化しなくなっているわけですね。ついでに言えば、このときy-=1が2回実行されますから2減ってしまいます。
(こうすればいい、を知るだけじゃなくて、間違ったプログラムがなぜそういう動きをしたのかはちゃんと把握するようにした方がいいと思います)
つまり、伸びる時は伸びる計算だけ、縮む時は縮む計算だけをやってやる必要があります。

さらに言えば、例えばxの値だけをみていると、伸びる途中でも縮む途中でも例えば99になるわけですから、xの値を調べただけでは伸びる計算をすればいいのか縮む計算をすればいいのか判断出来ません。

で、どうするか。一つの方法は、TN8001さんの回答のように、いま伸びているのか縮んでいるのかを示す変数を設置すること。あるいは、変化量を書き換えてやる、という手段も考えられます。
xの変分ということでdeltaxという変数を設置して(同時にyのためにdeltayも)

//略
float fy; //少数型の変数fyを定義(左左上)
float gy; //少数型の変数gyを定義(上)

float deltax=1; //追加:伸びる方向を初期値に
float deltay=-1; //追加

//略
void draw(){
  if(x + 500 >= 600 ){
    deltax=-1;
    deltay=1;
  }
  //x,yの新しい値を計算
  x+=deltax;
  y+=deltay;

strokeWeight( 4 );
stroke( 0,200,0 );
fill( 0,255,0 );

beginShape();//アメーバの形


ax += 1;//毎フレームでアメーバのa角のx座標を1ずつ増やす
//以下略

これだとどんどん縮む方向にいってしまいますから、どこかで伸びる方に転じてやらないと。

//略
float fy; //少数型の変数fyを定義(左左上)
float gy; //少数型の変数gyを定義(上)

float deltax=1; //追加:伸びる方向を初期値に
float deltay=-1; //追加

//略
void draw(){
  if(x + 500 >= 600 ){ //伸びきっている
    deltax=-1;
    deltay=1;
  }
  if(x + 500 < 500){ //縮みきっている
    deltax=1;
    deltay=-1;
  }
  //x,yの新しい値を計算
  x+=deltax;
  y+=deltay;

strokeWeight( 4 );
stroke( 0,200,0 );
fill( 0,255,0 );

beginShape();//アメーバの形


ax += 1;//毎フレームでアメーバのa角のx座標を1ずつ増やす
//以下略

アニメーションの基本としては、書いた画を消して、新しく描く...ですね。伸びる時は前の画が新しい画で隠れてましたけど、縮む時はちょっと見苦しいので、draw()の先頭を

void draw(){
  background(255);

としてやりましょうか。あるいは、小技として

void draw(){
  fill(255,15);
  noStroke();
  rect(0,0,width,height);

なんてやってやるとちょっと残像がつけられたりします。

---

別解というか。他の質問でsinを使って、なんて話が出ているので、変化の単位ベクトルに変化量を掛けて足し込んで伸び縮みをやってみました。
変更点だけ。

final PVector unit=new PVector(1,-1);
final float multi = 100;
final float offset=0.5;
float pseudopod = 0;
float th = 0;

void draw() {
  background(255);
  th=(th+3.6)%360;

  strokeWeight( 4 );
  stroke( 0, 200, 0 );
  fill( 0, 255, 0 );

  beginShape();//アメーバの形

  x = unit.x*multi*(sin(radians(th))+offset);
  y = unit.y*multi*(sin(radians(th))+offset);

Comments

[thkana]

http://zenbullets.com/abandonedart.org/works/267_shmoo/schmoo2.pde (http://zenbullets.com/abandonedart.org/?p=549 からのリンク)
のうにうに感もなかなか。(実行文のコメントになっているのをコメント外すと目玉が付きます)

[TN8001]

これは有名な作品なのかしら
偶然でしょうけど同じような発想になるのが面白いですね＾＾

[thkana]

有名なのかどうかは知りませんが、「ジェネラティブ・アートprocessingによる実践ガイド」という本の中で紹介されいてるものです。

[oikashinoa]

http://zenbullets.com/abandonedart.org/(略） リンク元のUrlも両方試したんですが404でした…
皆さんは拝見出たのでしょうか？

[thkana]

http://zenbullets.com/abandonedart.org/?p=549 の方はなんだか404になりますねぇ。一応チェックしてから書き込んではいるのですが。ソースへのリンクは私の手元では見えますけれど。

[oikashinoa]

うーん見れない。日を改めて試してみます。
thkanaさん返答有難うございました。

Answer 2

processingは詳しくないのですが、アメーバのインパクトが凄かったのでやってみました。（これってJavaですよね？）
ランダムはピクピクしすぎたり、なかなか変化しなかったりで難しいですね。改善の余地がありそうです（最低何フレームは向きを変えない等）

つい面白くて答えになってしまいましたが、ヒントでいい場合はコードの下の余談から見てください。

float x; // 少数型の変数xを定義（右上）
float y; // 少数型の変数yを定義(右上)
float ax; // 少数型の変数axを定義(右)
float bx; // 少数型の変数bxを定義（右下）
float by; // 少数型の変数byを定義(右下)
float cy; // 少数型の変数cyを定義（下）
float dx; // 少数型の変数dxを定義（左下）
float dy; // 少数型の変数dyを定義(左下)
float ex; // 少数型の変数exを定義(左左下)
float ey; // 少数型の変数eyを定義(左左下)
float fx; // 少数型の変数fxを定義(左左上)
float fy; // 少数型の変数fyを定義(左左上)
float gy; // 少数型の変数gyを定義(上)

boolean isExpand = true; // boolean型の変数isExpandを定義&初期化（trueで今伸びている）

void setup() {
    size(500, 500);
    background(#ffffff);
}

void expand() { // アメーバの角を伸ばす
    x += 1; // 毎フレームでアメーバの角のx座標を1ずつ増やす
    y -= 1; // 毎フレームでアメーバの角のy座標を1ずつ減らす

    ax += 1; // 毎フレームでアメーバのa角のx座標を1ずつ増やす

    bx += 1; // 毎フレームでアメーバのb角のx座標を1ずつ増やす
    by += 1; // 毎フレームでアメーバのb角のy座標を1ずつ増やす

    cy += 1; // 毎フレームでアメーバのc角のy座標を1ずつ増やす

    dx -= 0.5; // 毎フレームでアメーバのd角のx座標を1ずつ減らす
    dy += 1; // 毎フレームでアメーバのd角のy座標を1ずつ増やす

    ex -= 1; // 毎フレームでアメーバのe角のx座標を1ずつ減らす
    ey += 0.25; // 毎フレームでアメーバのe角のy座標を0.25ずつ増やす

    fx -= 1; // 毎フレームでアメーバのf角のx座標を1ずつ減らす
    fy -= 0.25; // 毎フレームでアメーバのf角のy座標を0.25ずつ減らす

    gy -= 1; // 毎フレームでアメーバのg角のy座標を1ずつ減らす
}

void contract() { // アメーバの角を縮める
    x -= 1;
    y += 1;

    ax -= 1;

    bx -= 1;
    by -= 1;

    cy -= 1;

    dx += 0.5;
    dy -= 1;

    ex += 1;
    ey -= 0.25;

    fx += 1;
    fy += 0.25;

    gy += 1;
}

void draw() {
    background(255);

    strokeWeight(4);
    stroke(0, 200, 0);
    fill(0, 255, 0);

    if (100 < x) { // 最大に伸びたら
        isExpand = false;
    } else if (x < -50) { // 最小に縮んだら
        isExpand = true;
    } else {
        if (random(40) < 1) { // たまに向きを逆にする
            isExpand = !isExpand;
        }
    }

    beginShape(); // アメーバの形

    if (isExpand) {
        expand(); // アメーバの角を伸ばす
    } else {
        contract(); // アメーバの角を縮める
    }

    vertex(300, 80);

    bezierVertex(240, 10, 220, gy + 20, 200, 80); // g頂点
    bezierVertex(200, 80, 200, 120, 130, 120); // 凹み

    bezierVertex(130, 120, fx + 20, fy + 120, 100, 180); // f頂点
    bezierVertex(100, 180, 180, 220, 90, 280); // 凹み

    bezierVertex(90, 280, -10 + ex, ey + 320, 120, 320); // e頂点
    bezierVertex(120, 320, 170, 330, 155, 360); // 凹み

    bezierVertex(155, 360, dx + 100, dy + 600, 200, 400); // d頂点
    bezierVertex(200, 400, 225, 350, 250, 400); // 凹み

    bezierVertex(250, 400, 290, cy + 500, 320, 380); // c頂点
    bezierVertex(320, 380, 330, 300, 360, 340); // 凹み

    bezierVertex(360, 340, bx + 450, by + 450, 400, 300); // b頂点
    bezierVertex(400, 300, 390, 280, 420, 260); // 凹み

    bezierVertex(420, 260, ax + 580, 220, 420, 200); // a頂点
    bezierVertex(420, 200, 380, 180, 420, 130); // 凹み

    bezierVertex(420, 130, x + 500, y + 20, 350, 100); // 頂点
    bezierVertex(350, 100, 325, 120, 300, 80); // 凹み

    endShape(); // アメーバの形終わり

    fill(255, 255, 255);
    ellipse(200, 100, 100, 100); // 左目の外側
    ellipse(300, 100, 100, 100); // 右目の外側


    fill(0, 200, 0);
    ellipse(200, 100, 50, 50); // 左目の黒目
    ellipse(300, 100, 50, 50); // 右目の黒目


    beginShape(); // 核、口の形

    vertex(220, 160);

    bezierVertex(240, 170, 260, 170, 280, 160); // 口の凹み
    bezierVertex(280, 160, 300, 150, 320, 160); // 右の盛り上がり
    bezierVertex(320, 160, 340, 170, 320, 190); // 右膨らみ
    bezierVertex(320, 190, 260, 230, 185, 190); // 下の膨らみ
    bezierVertex(185, 190, 170, 180, 185, 165); // 左膨らみ
    bezierVertex(185, 165, 200, 150, 220, 160); // 左の盛り上がり

    endShape();
}

---

余談

その際の手順を書き出しました。参考になれば幸いです。
手順間で適宣実行し間違いがないか確認しています。

1. x,y等の数値を変更する部分が、行数が多く見通しが悪いのでexpand関数に切り出した
2. expand関数と反対の動きをする関数が必要と考え、符号を逆にしたcontract関数を作った
3. 今伸びているのか縮んでいるのかの状態を表す、boolean型変数isExpandを作った
4. isExpandの状態によって、expandかcontractどちらかを呼び出すようにした
5. 当然伸びっぱなしになるので、最大に伸びたら（とりあえず100<xとした）isExpand=falseとして、縮みモードへ移行するif文を書いた
6. 今度は縮み過ぎたので、最小に縮んだら（とりあえずx<0とした）isExpand=trueとして、伸びるモードへ移行するif文を書いた
7. 5.6.の時以外にランダムに向きを逆にするために、random関数でたまにisExpand=!isExpandになるようにした
8. たまにが良い感じになるように、random関数の数字を調整した
9. 緑の跡が残るので、background(255)で消した
10. もう少し縮んでほしい気がしたので、変になるギリギリのx<-50に調整した

Comments

[oikashinoa]

キモさにひかれました。時間がないのでアイディアだけ。
processingにsin関数（三角関数）があるなら、expand、contract&if文で座標増減を1つにまとめれると思います。

[TN8001]

sinはあります。でも算数どまりなもんで。。ｗ
変数を1個にできるという意味ですね。
今後もっとかわいい動きになる可能性も考えて、そのままにしておきました＾＾

[thkana]

なんだろう? https://teratail.com/questions/224972 の回答が貼り付けられて見えるのだけれど、編集履歴ではこの質問に対応した回答が見える。teratailのシステムがバグってるのでしょうか?

[TN8001]

本当ですね。。。
thkanaさんの回答を見てコードハイライトにProcessingがあるのを知って変えて回ったのはあるんですが、履歴的には問題なさそうですし。。
問い合わせてみます。ありがとうございました。

[aiaiai7823]

私もteratail全く初心者なのでよく分かっておりませんが、確かに上記の質問の回答が私にも見えてます。
言及していただかなければずっと戸惑っているところでした。。。ありがとうございます。

[TN8001]

aiaiai7823さん、なんかすいません。
回答を見れていないのでしたら「編集 2019/11/23 17:05」というところをクリックしてください。

問い合わせ中なので再編集して余計なことをするとややこしくなりそうで。
回答が来ましたら、何かしらアクションします。

[TN8001]

回答が来ていました。
同様の不具合が確認されていて現在修正中とのことです。
再編集してくれ」との指示のため再編集しました。

[aiaiai7823]

ありがとうございます！！編集押して回答見れましたが、先ほど確認したところ通常の質問の欄から見れるようになっていました！！ランダムな動きにしたいというわがまままで汲んでいただきありがとうございました。。。