Processingについての授業の資料です。

1. Processingの基本
Processing資料(1)

2. キャンバスの座標
(x,y) = (0,0)
(x,y) = (300,300)

3. 構造
void setup(){
size(300,300);
}
void draw(){
ellipse(150,150,50,50);
}
最初に一度だけ実行
繰り返し実行

4. setup関数
void setup(){
//画面サイズの指定
size(300,300);
//背景色の指定
background(255,255,255);
}

5. draw関数
void draw(){
//背景の更新
background(255,255,255);
//円を描く
ellipse(150,150,50,50);
}

6. アニメーション
int x = 0;
void draw(){
ellipse(x,150,30,30);
x++;
}

7. 線
line(x1,y1,x2,y2);
(x1,y1)
(x2,y2)

8. 円
ellipse(x,y,w,h);
h
(x,y) w

9. 四角
(x,y) w
rect(x,y,w,h); h

10. 色の指定
h
w
色=(R,G,B)
0〜255の間で指定
stroke(0,0,100); //紺色
fill(0,255,255); //水色
ellipse(150,150,200,200);

11. 透明度の指定
h
w
0〜255の間で指定
fill(255, 0, 0, 80);
ellipse(120, 120, 180, 180);
fill(0, 0, 255, 80);
ellipse(180, 180, 180, 180);

12. for文

13. 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);
}
}

14. if文

15. 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);
}
}

16. 問題(1)
右図のように
円をしきつめるには
どうしたらよいか？

17. 問題(2)
右図のように
円の色を変えるには
どうしたらよいか？