よくあるスクリーンセイバーみたいに壁で跳ね返るプログラムをProcessingで

日付:
バリエーションで軌跡が残るバージョン


内容

よくあるスクリーンセイバーみたいなプログラムをProcessingで書いてみた。
・壁に当たると跳ね返るついでに色が変わる
・画面をクリックすると動く方向と色が変わる

長方形と楕円が画面内を動き回る

動く様子

動画はTwitterから


バリエーション

動く図形の軌跡を残しても面白い。

・早送り

ソースコード26行目のフレームレートの値を上げる。

・軌跡を残す

86行目のbackground(bg);をコメントアウトまたは削除。

・図形を長方形のみにする

99行目の"*/"と108行目の"/*"を消して楕円表示部分をまるごとコメントアウト。
または、101行目のellipse(x2,y2,w,h);をコメントアウトまたは削除。

・図形を楕円のみにする

88行目の"*/"と97行目の"/*"を消して長方形表示部分をまるごとコメントアウト。
または、90行目のrect(x1,y1,w,h);をコメントアウトまたは削除。

軌跡を残して早送りしたもの。こっちのほうが面白い。
軌跡が残る




長方形のみにして軌跡を残し早送りしたもの。
長方形の軌跡



楕円のみにして軌跡を残し早送りしたもの。

ソースコード

こんな感じ

/*
Screensaver by Processing
よくあるスクリーンセイバーみたいなプログラム
・壁に当たると跳ね返るついでに色が変わる
・画面をクリックすると動く方向と色が変わる

<関数目次>
setup()
mousePressed()
draw()

*/

int dcnt=0;                        //drawカウント
int x1,x2,y1,y2,xm,ym,xm2,ym2;     //x1,y1: xy座標, xm: (x_move)動く方向と距離
int w=50;                          //表示図形の幅
int h=30;                          //表示図形の高さ
color bg=color(0);      //背景色
int c1,c2;          //それぞれの色

int con;     //色数
color[] co;    //色の配列

void setup(){
  
  frameRate(16);   //フレームレートを設定　ここで図形の移動速度が変わる
  size(400,300);   //画面サイズを設定
  
  //初期位置
  x1=0;
  x2=0;
  x2=width/2;
  y2=height/2;
  
  //色の初期設定
  c1=0;
  c2=0;
  
  //移動方向
  xm=5;
  ym=8;
  xm2=8;
  ym2=5;
  
  /*Rainbow*/
  con=12;
  co=new color[con];
  co[0]=color(#ff0000);
  co[1]=color(#ff8000);
  co[2]=color(#ffff00);
  co[3]=color(#80ff00);
  co[4]=color(#00ff00);
  co[5]=color(#00ff80);
  co[6]=color(#00ffff);
  co[7]=color(#0080ff);
  co[8]=color(#0000ff);
  co[9]=color(#8000ff);
  co[10]=color(#ff00ff);
  co[11]=color(#ff0080);
  /**/
  
  background(bg);  //背景色の塗りつぶし
  noStroke();      //枠線なし
}//end:setup()


/*マウスがクリックされると呼び出される　
クリックで移動方向が反転し色も変わる*/
void mousePressed(){
  //移動方向の反転
  xm*=-1;
  ym*=-1;
  //色を変える
  c1++;
  
  //移動方向の反転
  xm2*=-1;
  ym2*=-1;
  //色を変える
  c2--;
  
}//end:mousePressed()


void draw(){
  background(bg);   //背景色で塗りつぶして画面リセット   ！ここをコメントアウトすると軌跡が残る！
  
  /*長方形を表示*/
  fill(co[c1]);     //塗りつぶし
  rect(x1,y1,w,h);  //長方形を表示                    ！ここをコメントアウトすると楕円のみになる！
  x1+=xm;           //x方向の移動
  y1+=ym;           //y方向の移動
  //端にぶつかったら跳ね返り、色が変わる    
  if(x1<0 || x1>width-w){  xm*=-1; c1++;}  //x座標が0未満または画面サイズ超になったらx移動方向を反転し次の色に 
  if(y1<0 || y1>height-h){ ym*=-1; c1++;}  //y座標が0未満または画面サイズ超になったらy移動方向を反転し次の色に
  if(c1==con) c1=0; //色が一周したら最初に戻す
  /**/
  
  /*楕円を表示*/
  fill(co[c2]);        //塗りつぶし
  ellipse(x2,y2,w,h);  //楕円を表示                   ！ここをコメントアウトすると長方形のみになる！
  x2+=xm2;             //x方向の移動
  y2+=ym2;             //y方向の移動
  //端にぶつかったら跳ね返り、色が変わる  
  if(x2<w/2 || x2>width-(w/2)){  xm2*=-1;c2--;}  //x座標が0未満または画面サイズ超になったらx移動方向を反転し次の色に  
  if(y2<h/2 || y2>height-(h/2)){ ym2*=-1;c2--;}  //y座標が0未満または画面サイズ超になったらy移動方向を反転し次の色に
  if(c2<0) c2=con-1;   //色が一周したら最初に戻す
  /**/
  
}//end:draw()



貼り付けたツイートやURLをの不備のため、投稿後に一部訂正しました。

コメント

コメントを投稿