読者です 読者をやめる 読者になる 読者になる

Shiho's engineering blog

誰でもみれるノートのようなもの

Processing 入門① 動きまくる円を作ってみた

つねづねやってみたかったprocessingをついにいじってみました。

プログラミング初心者でも大丈夫!Processingでデジタルアートを作ろう | 株式会社LIG

を参考に基本的なファンクションを押さえます。

setup()

初期設定 背景色 画面サイズなど

size([よこ], [たて])

スケッチの画面幅を指定。

background([グレースケール], [透明度])

void setup(){
  size(600,600);
  background(255):
}

void draw(){
  noFill();
  stroke(0,0,255);
  ellipse(300,200,100,100);
}

draw()

1秒間の間にフレームレートの数(初期値は60)だけ繰り返し実行

ellipse([円の中心のx座標],[円の中心のy座標], 縦の半径、横の半径)

円を書くことが出来る

fill(赤,蒼,緑, 透明度)

塗りつぶし

stroke(赤,蒼,緑,透明度)

線の色

変数を使ってみる

void setup(){
  size(600,600);
  background(255):
}

float x = 300:
float y = 200;
int r = 180;

void draw(){
  noFill();
  stroke(0,0,255);
  ellipse(x,y,r,r);
  x = x + 1;
}

# drow()が実行される旅にxの値が増えていく

円が動いているようにする

void setup(){
  size(600,600);
  background(255);
}

float x = 300;
float y = 200;
int r = 100;

void draw(){
fill(255);
noStroke();
rect(0,0,600,400);
noFill();
stroke(0,0,255);
ellipse(x,y,r,r);
x = x + 1; // これでx軸移動する。 x += random(-90,90); とかにするともっとイキモノっぽく面白く動く
}

動画書き出し

saveFrameをdrawの最期に入れる

draw(){
  saveFrame("frames/######.png");  //そのまま#と記述しないとそれぞれの瞬間が出力されずあとでツール>ムービーメーカーから動画にできないのに注意
}

実践してみた

void setup(){
  size(600,600);
  background(0,0,0,0.7);
  frameRate(10); 
}
float x = 10;
float y = 10;

void draw(){
  fill(0);
  stroke(255,0,255);
  rect(0,0,600,600);
  ellipse(300,300,x,y);
  x += random(-90,90);
  y += random(-100,90);
  ellipse(300,300,x,y);
  saveFrame("frames/######.png");
}

  • ellipse() を2回やることで、残像感を出してみた。
  • さらに、frameRateを下げて、ちょっとゆっくり描画してみた。
  • xとyの値にrandomの幅の微妙な変化を入れ、揺れを作ってみた。

できた動画がこちら!

同じ色でfillすると重なりがなくなってなんだかより幾何学的に感じられますね。↓

void setup(){
  size(855,480);
  background(0,0,0);
  frameRate(10); // the less it is , the slower drawing become.
}
float x = 10;
float y = 10;

void draw(){
  fill(0);
  stroke(255,255,255);
  rect(0,0,0,600,600);
  ellipse(427,240,x,y);
  x += random(-90,90);
  y += random(-90,90);
  ellipse(427,240,x,y);
  saveFrame("frames/######.png");
}