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

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

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

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

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

試しにif構文を使って

if(x >600){

x -= 1;
y += 1;

}

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

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

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

javascript
1float x; //少数型の変数xを定義（右上）
2float y; //少数型の変数yを定義(右上)
3float ax; //少数型の変数axを定義(右)
4float bx; //少数型の変数bxを定義（右下）
5float by; //少数型の変数byを定義(右下)
6float cy; //少数型の変数cyを定義（下）
7float dx;//少数型の変数dxを定義（左下）
8float dy; //少数型の変数dyを定義(左下)
9float ex; //少数型の変数exを定義(左左下)
10float ey; //少数型の変数eyを定義(左左下)
11float fx; //少数型の変数fxを定義(左左上)
12float fy; //少数型の変数fyを定義(左左上)
13float gy; //少数型の変数gyを定義(上)
14
15
16
17void setup(){
18  
19  size(500,500) ;
20  background( #ffffff );
21  
22}
23
24
25
26void draw(){
27  
28
29  if(x + 500 >= 600 ){
30    
31    x -= 1;
32    y -= 1;
33    
34  }
35  
36strokeWeight( 4 );
37stroke( 0,200,0 );
38fill( 0,255,0 );
39 
40beginShape();//アメーバの形
41
42x += 1;//毎フレームでアメーバの角のx座標を1ずつ増やす
43y -= 1; //毎フレームでアメーバの角のy座標を1ずつ減らす
44
45ax += 1;//毎フレームでアメーバのa角のx座標を1ずつ増やす
46
47bx += 1; //毎フレームでアメーバのb角のx座標を1ずつ増やす
48by += 1; //毎フレームでアメーバのb角のy座標を1ずつ増やす
49
50cy += 1; //毎フレームでアメーバのc角のy座標を1ずつ増やす
51
52dx -= 0.5; //毎フレームでアメーバのd角のx座標を1ずつ減らす
53dy += 1;//毎フレームでアメーバのd角のy座標を1ずつ増やす
54
55ex -= 1; //毎フレームでアメーバのe角のx座標を1ずつ減らす
56ey += 0.25; //毎フレームでアメーバのe角のy座標を0.25ずつ増やす
57
58fx -= 1; //毎フレームでアメーバのf角のx座標を1ずつ減らす
59fy -= 0.25; //毎フレームでアメーバのf角のy座標を0.25ずつ減らす
60
61gy -= 1; //毎フレームでアメーバのg角のy座標を1ずつ減らす
62
63
64
65
66
67vertex( 300, 80 );
68
69bezierVertex( 240,10, 220, gy + 20, 200,80);//g頂点
70bezierVertex(200,80,200,120,130,120);//凹み
71
72bezierVertex(130,120,fx + 20,fy + 120,100,180);//f頂点
73bezierVertex(100,180,180,220,90,280);//凹み
74
75bezierVertex(90,280,-10 + ex, ey + 320 ,120,320);//e頂点
76bezierVertex(120,320,170,330,155,360);//凹み
77
78bezierVertex(155,360,dx  + 100,dy + 600,200,400);//d頂点
79bezierVertex(200,400,225,350,250,400);//凹み
80
81bezierVertex(250,400,290,cy  + 500,320,380);//c頂点
82bezierVertex(320,380,330,300,360,340);//凹み
83
84bezierVertex(360,340,bx + 450,by + 450,400,300);//b頂点
85bezierVertex(400,300,390,280,420,260);//凹み
86
87bezierVertex(420,260,ax + 580,220,420,200);//a頂点
88bezierVertex(420,200,380,180,420,130);//凹み
89
90bezierVertex(420,130, x + 500,y + 20,350,100);//頂点
91bezierVertex(350,100,325,120,300,80);//凹み
92
93endShape();//アメーバの形終わり
94
95fill(255,255,255);
96ellipse(200,100,100,100);//左目の外側
97ellipse(300,100,100,100);//右目の外側
98
99
100fill(0,200,0);
101ellipse(200,100,50,50);//左目の黒目
102ellipse(300,100,50,50);//右目の黒目
103
104
105beginShape();//核、口の形
106
107vertex(220,160);
108
109bezierVertex(240,170,260,170,280,160);//口の凹み
110bezierVertex(280,160,300,150,320,160);//右の盛り上がり
111bezierVertex(320,160,340,170,320,190);//右膨らみ
112bezierVertex(320,190,260,230,185,190);//下の膨らみ
113bezierVertex(185,190,170,180,185,165);//左膨らみ
114bezierVertex(185,165,200,150,220,160);//左の盛り上がり
115
116endShape();
117  
118
119}

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

Javascript
1float x; //少数型の変数xを定義（右上）
2float y; //少数型の変数yを定義(右上)
3float ax; //少数型の変数axを定義(右)
4float bx; //少数型の変数bxを定義（右下）
5float by; //少数型の変数byを定義(右下)
6float cy; //少数型の変数cyを定義（下）
7float dx;//少数型の変数dxを定義（左下）
8float dy; //少数型の変数dyを定義(左下)
9float ex; //少数型の変数exを定義(左左下)
10float ey; //少数型の変数eyを定義(左左下)
11float fx; //少数型の変数fxを定義(左左上)
12float fy; //少数型の変数fyを定義(左左上)
13float gy; //少数型の変数gyを定義(上)
14
15
16
17void setup(){
18  
19  size(500,500) ;
20  background( #ffffff );
21  
22}
23
24
25
26void draw(){
27  
28strokeWeight( 4 );
29stroke( 0,200,0 );
30fill( 0,255,0 );
31 
32beginShape();//アメーバの形
33
34x += 1;//毎フレームでアメーバの角のx座標を1ずつ増やす
35y -= 1; //毎フレームでアメーバの角のy座標を1ずつ減らす
36
37ax += 1;//毎フレームでアメーバのa角のx座標を1ずつ増やす
38
39bx += 1; //毎フレームでアメーバのb角のx座標を1ずつ増やす
40by += 1; //毎フレームでアメーバのb角のy座標を1ずつ増やす
41
42cy += 1; //毎フレームでアメーバのc角のy座標を1ずつ増やす
43
44dx -= 0.5; //毎フレームでアメーバのd角のx座標を1ずつ減らす
45dy += 1;//毎フレームでアメーバのd角のy座標を1ずつ増やす
46
47ex -= 1; //毎フレームでアメーバのe角のx座標を1ずつ減らす
48ey += 0.25; //毎フレームでアメーバのe角のy座標を0.25ずつ増やす
49
50fx -= 1; //毎フレームでアメーバのf角のx座標を1ずつ減らす
51fy -= 0.25; //毎フレームでアメーバのf角のy座標を0.25ずつ減らす
52
53gy -= 1; //毎フレームでアメーバのg角のy座標を1ずつ減らす
54
55
56
57
58
59vertex( 300, 80 );
60
61bezierVertex( 240,10, 220, gy + 20, 200,80);//g頂点
62bezierVertex(200,80,200,120,130,120);//凹み
63
64bezierVertex(130,120,fx + 20,fy + 120,100,180);//f頂点
65bezierVertex(100,180,180,220,90,280);//凹み
66
67bezierVertex(90,280,-10 + ex, ey + 320 ,120,320);//e頂点
68bezierVertex(120,320,170,330,155,360);//凹み
69
70bezierVertex(155,360,dx  + 100,dy + 600,200,400);//d頂点
71bezierVertex(200,400,225,350,250,400);//凹み
72
73bezierVertex(250,400,290,cy  + 500,320,380);//c頂点
74bezierVertex(320,380,330,300,360,340);//凹み
75
76bezierVertex(360,340,bx + 450,by + 450,400,300);//b頂点
77bezierVertex(400,300,390,280,420,260);//凹み
78
79bezierVertex(420,260,ax + 580,220,420,200);//a頂点
80bezierVertex(420,200,380,180,420,130);//凹み
81
82bezierVertex(420,130, x + 500,y + 20,350,100);//頂点
83bezierVertex(350,100,325,120,300,80);//凹み
84
85endShape();//アメーバの形終わり
86
87fill(255,255,255);
88ellipse(200,100,100,100);//左目の外側
89ellipse(300,100,100,100);//右目の外側
90
91
92fill(0,200,0);
93ellipse(200,100,50,50);//左目の黒目
94ellipse(300,100,50,50);//右目の黒目
95
96
97beginShape();//核、口の形
98
99vertex(220,160);
100
101bezierVertex(240,170,260,170,280,160);//口の凹み
102bezierVertex(280,160,300,150,320,160);//右の盛り上がり
103bezierVertex(320,160,340,170,320,190);//右膨らみ
104bezierVertex(320,190,260,230,185,190);//下の膨らみ
105bezierVertex(185,190,170,180,185,165);//左膨らみ
106bezierVertex(185,165,200,150,220,160);//左の盛り上がり
107
108endShape();
109  
110
111}

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

Processing
1  if(x + 500 >= 600 ){
2
3    x -= 1; // ...A
4    y -= 1;
5
6  }
7//略
8  x += 1;//毎フレームでアメーバの角のx座標を1ずつ増やす ...B
9  y -= 1; //毎フレームでアメーバの角のy座標を1ずつ減らす
10}

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

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

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

Processing
1//略
2float fy; //少数型の変数fyを定義(左左上)
3float gy; //少数型の変数gyを定義(上)
4
5float deltax=1; //追加:伸びる方向を初期値に
6float deltay=-1; //追加
7
8//略
9void draw(){
10  if(x + 500 >= 600 ){
11    deltax=-1;
12    deltay=1;
13  }
14  //x,yの新しい値を計算
15  x+=deltax;
16  y+=deltay;
17
18strokeWeight( 4 );
19stroke( 0,200,0 );
20fill( 0,255,0 );
21
22beginShape();//アメーバの形
23
24
25ax += 1;//毎フレームでアメーバのa角のx座標を1ずつ増やす
26//以下略

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

Processing
1//略
2float fy; //少数型の変数fyを定義(左左上)
3float gy; //少数型の変数gyを定義(上)
4
5float deltax=1; //追加:伸びる方向を初期値に
6float deltay=-1; //追加
7
8//略
9void draw(){
10  if(x + 500 >= 600 ){ //伸びきっている
11    deltax=-1;
12    deltay=1;
13  }
14  if(x + 500 < 500){ //縮みきっている
15    deltax=1;
16    deltay=-1;
17  }
18  //x,yの新しい値を計算
19  x+=deltax;
20  y+=deltay;
21
22strokeWeight( 4 );
23stroke( 0,200,0 );
24fill( 0,255,0 );
25
26beginShape();//アメーバの形
27
28
29ax += 1;//毎フレームでアメーバのa角のx座標を1ずつ増やす
30//以下略

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

Processing
1void draw(){
2  background(255);

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

Processing
1void draw(){
2  fill(255,15);
3  noStroke();
4  rect(0,0,width,height);

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

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

Processing
1final PVector unit=new PVector(1,-1);
2final float multi = 100;
3final float offset=0.5;
4float pseudopod = 0;
5float th = 0;
6
7void draw() {
8  background(255);
9  th=(th+3.6)%360;
10
11  strokeWeight( 4 );
12  stroke( 0, 200, 0 );
13  fill( 0, 255, 0 );
14
15  beginShape();//アメーバの形
16
17  x = unit.x*multi*(sin(radians(th))+offset);
18  y = unit.y*multi*(sin(radians(th))+offset);

投稿2019/11/23 04:25

編集2019/11/23 13:10

thkana

総合スコア7703

thkana

2019/11/25 13:44 編集

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

TN8001

2019/11/23 05:05

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

thkana

2019/11/23 08:27

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

oikashinoa

2019/11/25 11:45

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

thkana

2019/11/25 13:46

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

oikashinoa

2019/11/25 14:08

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

行動規範の内容に同意します

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

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

Processing
1float x; // 少数型の変数xを定義（右上）
2float y; // 少数型の変数yを定義(右上)
3float ax; // 少数型の変数axを定義(右)
4float bx; // 少数型の変数bxを定義（右下）
5float by; // 少数型の変数byを定義(右下)
6float cy; // 少数型の変数cyを定義（下）
7float dx; // 少数型の変数dxを定義（左下）
8float dy; // 少数型の変数dyを定義(左下)
9float ex; // 少数型の変数exを定義(左左下)
10float ey; // 少数型の変数eyを定義(左左下)
11float fx; // 少数型の変数fxを定義(左左上)
12float fy; // 少数型の変数fyを定義(左左上)
13float gy; // 少数型の変数gyを定義(上)
14
15boolean isExpand = true; // boolean型の変数isExpandを定義&初期化（trueで今伸びている）
16
17void setup() {
18    size(500, 500);
19    background(#ffffff);
20}
21
22void expand() { // アメーバの角を伸ばす
23    x += 1; // 毎フレームでアメーバの角のx座標を1ずつ増やす
24    y -= 1; // 毎フレームでアメーバの角のy座標を1ずつ減らす
25
26    ax += 1; // 毎フレームでアメーバのa角のx座標を1ずつ増やす
27
28    bx += 1; // 毎フレームでアメーバのb角のx座標を1ずつ増やす
29    by += 1; // 毎フレームでアメーバのb角のy座標を1ずつ増やす
30
31    cy += 1; // 毎フレームでアメーバのc角のy座標を1ずつ増やす
32
33    dx -= 0.5; // 毎フレームでアメーバのd角のx座標を1ずつ減らす
34    dy += 1; // 毎フレームでアメーバのd角のy座標を1ずつ増やす
35
36    ex -= 1; // 毎フレームでアメーバのe角のx座標を1ずつ減らす
37    ey += 0.25; // 毎フレームでアメーバのe角のy座標を0.25ずつ増やす
38
39    fx -= 1; // 毎フレームでアメーバのf角のx座標を1ずつ減らす
40    fy -= 0.25; // 毎フレームでアメーバのf角のy座標を0.25ずつ減らす
41
42    gy -= 1; // 毎フレームでアメーバのg角のy座標を1ずつ減らす
43}
44
45void contract() { // アメーバの角を縮める
46    x -= 1;
47    y += 1;
48
49    ax -= 1;
50
51    bx -= 1;
52    by -= 1;
53
54    cy -= 1;
55
56    dx += 0.5;
57    dy -= 1;
58
59    ex += 1;
60    ey -= 0.25;
61
62    fx += 1;
63    fy += 0.25;
64
65    gy += 1;
66}
67
68void draw() {
69    background(255);
70
71    strokeWeight(4);
72    stroke(0, 200, 0);
73    fill(0, 255, 0);
74
75    if (100 < x) { // 最大に伸びたら
76        isExpand = false;
77    } else if (x < -50) { // 最小に縮んだら
78        isExpand = true;
79    } else {
80        if (random(40) < 1) { // たまに向きを逆にする
81            isExpand = !isExpand;
82        }
83    }
84
85    beginShape(); // アメーバの形
86
87    if (isExpand) {
88        expand(); // アメーバの角を伸ばす
89    } else {
90        contract(); // アメーバの角を縮める
91    }
92
93    vertex(300, 80);
94
95    bezierVertex(240, 10, 220, gy + 20, 200, 80); // g頂点
96    bezierVertex(200, 80, 200, 120, 130, 120); // 凹み
97
98    bezierVertex(130, 120, fx + 20, fy + 120, 100, 180); // f頂点
99    bezierVertex(100, 180, 180, 220, 90, 280); // 凹み
100
101    bezierVertex(90, 280, -10 + ex, ey + 320, 120, 320); // e頂点
102    bezierVertex(120, 320, 170, 330, 155, 360); // 凹み
103
104    bezierVertex(155, 360, dx + 100, dy + 600, 200, 400); // d頂点
105    bezierVertex(200, 400, 225, 350, 250, 400); // 凹み
106
107    bezierVertex(250, 400, 290, cy + 500, 320, 380); // c頂点
108    bezierVertex(320, 380, 330, 300, 360, 340); // 凹み
109
110    bezierVertex(360, 340, bx + 450, by + 450, 400, 300); // b頂点
111    bezierVertex(400, 300, 390, 280, 420, 260); // 凹み
112
113    bezierVertex(420, 260, ax + 580, 220, 420, 200); // a頂点
114    bezierVertex(420, 200, 380, 180, 420, 130); // 凹み
115
116    bezierVertex(420, 130, x + 500, y + 20, 350, 100); // 頂点
117    bezierVertex(350, 100, 325, 120, 300, 80); // 凹み
118
119    endShape(); // アメーバの形終わり
120
121    fill(255, 255, 255);
122    ellipse(200, 100, 100, 100); // 左目の外側
123    ellipse(300, 100, 100, 100); // 右目の外側
124
125
126    fill(0, 200, 0);
127    ellipse(200, 100, 50, 50); // 左目の黒目
128    ellipse(300, 100, 50, 50); // 右目の黒目
129
130
131    beginShape(); // 核、口の形
132
133    vertex(220, 160);
134
135    bezierVertex(240, 170, 260, 170, 280, 160); // 口の凹み
136    bezierVertex(280, 160, 300, 150, 320, 160); // 右の盛り上がり
137    bezierVertex(320, 160, 340, 170, 320, 190); // 右膨らみ
138    bezierVertex(320, 190, 260, 230, 185, 190); // 下の膨らみ
139    bezierVertex(185, 190, 170, 180, 185, 165); // 左膨らみ
140    bezierVertex(185, 165, 200, 150, 220, 160); // 左の盛り上がり
141
142    endShape();
143}