Processingの基本

Processing資料(1)

キャンバスの座標

(x,y) = (0,0)

(x,y) = (300,300)

構造

void setup(){size(300,300);

}

void draw(){ellipse(150,150,50,50);

}

最初に一度だけ実行

繰り返し実行

setup関数

void setup(){//画面サイズの指定

size(300,300);

//背景色の指定

background(255,255,255);}

draw関数

void draw(){//背景の更新

background(255,255,255);

//円を描く

ellipse(150,150,50,50);}

アニメーション

int x = 0;

void draw(){ellipse(x,150,30,30);x++;

}

線

line(x1,y1,x2,y2);

(x1,y1)

(x2,y2)

円

ellipse(x,y,w,h);h

w(x,y)

四角

rect(x,y,w,h); h

w(x,y)

色の指定

h

w

stroke(0,0,100); //紺色fill(0,255,255); //水色

ellipse(150,150,200,200);

色=(R,G,B)0〜255の間で指定

透明度の指定

h

w

fill(255, 0, 0, 80);ellipse(120, 120, 180, 180);fill(0, 0, 255, 80);ellipse(180, 180, 180, 180);

0〜255の間で指定

for文

void setup() { size(560, 300); background(255,255,255);}

void draw() { background(255, 255, 255);

int i = 0;

for (i = 0; i < 9; i++) { ellipse(70*i, 150, 50, 50); }}

if文

void draw() { background(255, 255, 255);

int i = 0;

for (i = 0; i < 9; i++) { if (i % 2 == 0) { fill(0, 200, 200); } else { fill(255, 255, 100); } ellipse(70*i, 150, 50, 50); }}

問題(1)

右図のように円をしきつめるにはどうしたらよいか？

問題(2)

右図のように円の色を変えるにはどうしたらよいか？