質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

Q&A

解決済

1回答

182閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

0グッド

0クリップ

投稿2019/11/11 10:54

編集2020/01/29 05:55

横幅が伸縮する図形

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

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

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

該当のソースコード

Java

1float [] b=new float[10]; 2int [] c=new int[10]; 3float [] d=new float[10]; 4float [] e=new float[10]; 5float [] f=new float[10]; 6float [] g=new float[10]; 7float [] h=new float[10]; 8float [] j=new float[10]; 9float [] k=new float[10]; 10float [] l=new float[10]; 11void setup(){ 12 size(600,400); 13 background(200); 14 strokeWeight(1); 15 stroke(0,0,200); 16 rect(100,50,400,300); 17 stroke(220,220,220); 18 line(100,height/2,500,height/2); 19 line(width/2,50,width/2,350); 20 text("50",80,200); 21 text("50",505,200); 22 text("0",90,350); 23 text("0",505,350); 24 text("100-",80,50); 25 text("100-",500,50); 26 text("0",95,360); 27 text("5,000",280,360); 28 text("10,000",465,360); 29 b[0]=2755+3293;//1980 30 b[1]=3348+2676; 31 b[2]=2017+2777; 32 b[3]=3191+2893; 33 b[4]=3042+3017; 34 b[5]=2812+2364; 35 b[6]=1974+1555; 36 b[7]=1273+909; 37 b[8]=495+174; 38 b[9]=55; 39 40 c[0]=2287+2726;//1985 41 c[1]=3211+2620; 42 c[2]=1811+2296; 43 c[3]=2753+3093; 44 c[4]=2807+2962; 45 c[5]=2942+2707; 46 c[6]=2280+1825; 47 c[7]=1404+1088; 48 c[8]=694+292; 49 c[9]=72; 50 51} 52void draw(){ 53 keyPressed1(); 54 keyPressed2(); 55} 56void keyPressed1(){ 57 58 strokeWeight(2); 59stroke(200,0,0); 60 rect(100,50,b[9]*0.04,30);//90- 61 rect(100,80,b[8]*0.04,30);//80 62 rect(100,110,b[7]*0.04,30);//70 63 rect(100,140,b[6]*0.04,30);//60 64 rect(100,170,b[5]*0.04,30);//50 65 rect(100,200,b[4]*0.04,30);//40 66 rect(100,230,b[3]*0.04,30);//30 67 rect(100,260,b[2]*0.04,30);//20 68 rect(100,290,b[1]*0.04,30);//10 69 rect(100,320,b[0]*0.04,30);//0 70 71 72} 73void keyPressed2(){ 74 frameRate(1); 75 stroke(0,65,0); 76 for(float i = 0 ;i < 6 ;i++){ 77 78 rect(100+b[9]*0.04,50,(c[9]-b[9])*(float)i*0.04,30);//90- 79 rect(100+b[8]*0.04,80,(c[8]-b[8])*(float)i*0.04,30);//80 80 rect(100+b[7]*0.04,110,(c[7]-b[7])*(float)i*0.04,30);//70 81 rect(100+b[6]*0.04,140,(c[6]-b[6])*(float)i*0.04,30);//60 82 rect(100+b[5]*0.04,170,(c[5]-b[5])*(float)i*0.04,30);//50 83 rect(100+b[4]*0.04,200,(c[4]-b[4])*(float)i*0.04,30);//40 84 rect(100+b[3]*0.04,230,(c[3]-b[3])*(float)i*0.04,30);//30 85 rect(100+b[2]*0.04,260,(c[2]-b[2])*(float)i*0.04,30);//20 86 rect(100+b[1]*0.04,290,(c[1]-b[1])*(float)i*0.04,30);//10 87 rect(100+b[0]*0.04,320,(c[0]-b[0])*(float)i*0.04,30);//0 88 89} 90}

試したこと

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

y_waiwai

2019/11/11 11:22

質問文は編集できますんで、追記修正しましょう
退会済みユーザー

退会済みユーザー

2019/11/11 12:34

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

回答1

0

ベストアンサー

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

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

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

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

Processing

1void setup(){ 2 size(600,400); 3 noFill(); 4} 5 6int value=0; 7int delta=1; 8void draw(){ 9 background(204);//消して 10 value=value+delta;//値を少し変えて 11 if(value>100){ 12 delta=-1; 13 } 14 if(value<-100){ 15 delta=1; 16 } 17 stroke(200,0,0);//描く 18 rect( 100,50,300,30); 19 stroke(0,65,0); 20 rect( 400,50,value,30); 21}

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

Processing

1void setup(){ 2 size(300,300); 3} 4int x=0; 5void draw(){ 6 for(;;){ 7 circle(x,height/2,50); 8 x=(x+2)%width; 9 delay(20); 10 println(x); 11 } 12}

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

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

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

Processing

1int x=0; 2void draw(){ 3 if(x>=width){ 4 x=0; 5 } 6 circle(x,height/2,50); 7 x++; 8}

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

投稿2019/11/11 14:18

編集2019/11/12 21:05
thkana

総合スコア7610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/11/12 09:49 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問