processingでのforの使い方について

Question

横幅が伸縮する図形

processingでfor文を使い、増減するグラフを制作しています。

発生している問題・エラーメッセージ

グラフの伸縮を表現したいのですが、どうすればいいのか分かりません。  
forの中身を5回繰り返して徐々に増減するようにしたいのですが、  
何故か実行すると一度に全てが終わってしまいます。  
 
完成のイメージは、赤のグラフの状態から緑の部分を徐々に足したり引いたりして新たなグラフの形にすることです。(緑の部分の変化を徐々にさせることです。)  
 
その足したり引いたりした部分が分かりやすいように色分けしています。  

該当のソースコード

float [] b=new float[10];
int [] c=new int[10];
float [] d=new float[10];
float [] e=new float[10];
float [] f=new float[10];
float [] g=new float[10];
float [] h=new float[10];
float [] j=new float[10];
float [] k=new float[10];
float [] l=new float[10];
void setup(){
 size(600,400);
 background(200);
 strokeWeight(1);
 stroke(0,0,200);
 rect(100,50,400,300);
 stroke(220,220,220);
 line(100,height/2,500,height/2);
 line(width/2,50,width/2,350);
 text("50",80,200);
 text("50",505,200);
 text("0",90,350);
 text("0",505,350);
 text("100-",80,50);
 text("100-",500,50);
 text("0",95,360);
 text("5,000",280,360);
 text("10,000",465,360);
  b[0]=2755+3293;//1980
  b[1]=3348+2676;
  b[2]=2017+2777;
  b[3]=3191+2893;
  b[4]=3042+3017;
  b[5]=2812+2364;
  b[6]=1974+1555;
  b[7]=1273+909;
  b[8]=495+174;
  b[9]=55;
 
  c[0]=2287+2726;//1985
  c[1]=3211+2620;
  c[2]=1811+2296;
  c[3]=2753+3093;
  c[4]=2807+2962;
  c[5]=2942+2707;
  c[6]=2280+1825;
  c[7]=1404+1088;
  c[8]=694+292;
  c[9]=72;
 
}
void draw(){
 keyPressed1();
 keyPressed2();
}
void keyPressed1(){
 
  strokeWeight(2);
stroke(200,0,0);
  rect(100,50,b[9]*0.04,30);//90-
  rect(100,80,b[8]*0.04,30);//80
  rect(100,110,b[7]*0.04,30);//70
  rect(100,140,b[6]*0.04,30);//60
  rect(100,170,b[5]*0.04,30);//50
  rect(100,200,b[4]*0.04,30);//40
  rect(100,230,b[3]*0.04,30);//30
  rect(100,260,b[2]*0.04,30);//20
  rect(100,290,b[1]*0.04,30);//10
  rect(100,320,b[0]*0.04,30);//0
 
   
}
void keyPressed2(){
 frameRate(1);
 stroke(0,65,0);
 for(float i = 0 ;i < 6 ;i++){
 
  rect(100+b[9]*0.04,50,(c[9]-b[9])*(float)i*0.04,30);//90-
  rect(100+b[8]*0.04,80,(c[8]-b[8])*(float)i*0.04,30);//80
  rect(100+b[7]*0.04,110,(c[7]-b[7])*(float)i*0.04,30);//70
  rect(100+b[6]*0.04,140,(c[6]-b[6])*(float)i*0.04,30);//60
  rect(100+b[5]*0.04,170,(c[5]-b[5])*(float)i*0.04,30);//50
  rect(100+b[4]*0.04,200,(c[4]-b[4])*(float)i*0.04,30);//40
  rect(100+b[3]*0.04,230,(c[3]-b[3])*(float)i*0.04,30);//30
  rect(100+b[2]*0.04,260,(c[2]-b[2])*(float)i*0.04,30);//20
  rect(100+b[1]*0.04,290,(c[1]-b[1])*(float)i*0.04,30);//10
  rect(100+b[0]*0.04,320,(c[0]-b[0])*(float)i*0.04,30);//0
 
}
}

試したこと

時間の制御(?)delayの挿入

補足情報（FW/ツールのバージョンなど）

processing3.5.3使用
本当にプログラミングの初心者なのでどうすればよいかわかりません。
ご教授お願い致します。

Comments

[y_waiwai]

質問文は編集できますんで、追記修正しましょう

[退会済みユーザー]

返信ありがとうございます。
編集してみましたので、よろしければご教授お願い致します。

[Y.H.]

非道い質問者ですね。。。同じ人ですかね。
https://teratail.com/questions/224087

Answer 1

アニメーションの基本は、
絵を描いて
消して
ちょっと変えた絵を描いて
消して
ちょっと変えた絵を描いて
...
と繰り返すことでちょっと変えた部分が「動いて」見える、ということです。

processingでは、draw()が繰り返し呼ばれることを利用して
draw()の先頭でbackground()で画を消して
一回のdraw()では一枚の画だけを描きdraw()を終了
次のdraw()の先頭でbackground()で画を消して
パラメータを少し変えて
ちょっと違った一枚の画を描き、draw()を終了
次のdraw()の先頭で...

というような操作を繰り返すことが基本形となるでしょう(もちろん、いろいろバリエーションはあります)。

あなたの描きたい動きがちょっと読み取れないので、勝手に書いた伸び縮みサンプルプログラムを示してみます。なにかの参考になるでしょうか...

void setup(){
  size(600,400);
  noFill();
}

int value=0;
int delta=1;
void draw(){
  background(204);//消して
  value=value+delta;//値を少し変えて
  if(value>100){
    delta=-1;
  }
  if(value<-100){
    delta=1;
  }
  stroke(200,0,0);//描く
  rect( 100,50,300,30);
  stroke(0,65,0);
  rect( 400,50,value,30);
}

---

追記
コメント、編集されていますがforでやりたいいうような旨が書かれていたかと。
Processingの構造がそもそもdraw()の合間に描画する、ということを想定しているようで、draw()から抜けないで描画のトリガを掛ける方法もあるのかも知れませんが私は知りません。

void setup(){
  size(300,300);
}
int x=0;
void draw(){
  for(;;){
    circle(x,height/2,50);
    x=(x+2)%width;
    delay(20);
    println(x);
  }
}

では、xの値が増えていくのがコンソール(IDEウインドウの下の方)では見えますが描画は最初の方だけちょこっと行われるだけ、そのタイミングも実行毎にばらつきます。制御出来ていないということ。
なので、アニメーションはforループで行わない、というのが原則ではないでしょうか。

void draw(){
  for(int x=0; x<width; x++){
    circle(x,height/2,50);
  }
}

ではなく、これを展開して

int x=0;
void draw(){
  if(x>=width){
    x=0;
  }
  circle(x,height/2,50);
  x++;
}

とすれば「動いて」みえると思います。

Comments

[退会済みユーザー]

返信ありがとうございます。
processingについての知識が増えました。