Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 
(x,y) w
四角 
(x,y) w 
rect(x,y,w,h); h
色の指定 
h 
w 
色=(R,G,B) 
0〜255の間で指定 
stroke(0,0,100); //紺色 
fill(0,255,255); //水色 
ellipse(150,150,200,200);
透明度の指定 
h 
w 
0〜255の間で指定 
fill(255, 0, 0, 80); 
ellipse(120, 120, 180, 180); 
fill(0, 0, 255, 80); 
ellipse(180, 180, 180,...
for文
void setup() { 
size(560, 300); 
background(255,255,255); 
} 
void draw() { 
background(255, 255, 255); 
int i = 0; 
for (...
if文
void draw() { 
background(255, 255, 255); 
int i = 0; 
for (i = 0; i < 9; i++) { 
if (i % 2 == 0) { 
fill(0, 200, 200); 
}...
問題(1) 
右図のように 
円をしきつめるには 
どうしたらよいか?
問題(2) 
右図のように 
円の色を変えるには 
どうしたらよいか?
Upcoming SlideShare
Loading in …5
×

Processing資料(1) Processingの基本

1,189 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Processing資料(1) Processingの基本

  1. 1. Processingの基本 Processing資料(1)
  2. 2. キャンバスの座標 (x,y) = (0,0) (x,y) = (300,300)
  3. 3. 構造 void setup(){ size(300,300); } void draw(){ ellipse(150,150,50,50); } 最初に一度だけ実行 繰り返し実行
  4. 4. setup関数 void setup(){ //画面サイズの指定 size(300,300); //背景色の指定 background(255,255,255); }
  5. 5. draw関数 void draw(){ //背景の更新 background(255,255,255); //円を描く ellipse(150,150,50,50); }
  6. 6. アニメーション int x = 0; void draw(){ ellipse(x,150,30,30); x++; }
  7. 7. 線 line(x1,y1,x2,y2); (x1,y1) (x2,y2)
  8. 8. 円 ellipse(x,y,w,h); h (x,y) w
  9. 9. 四角 (x,y) w rect(x,y,w,h); h
  10. 10. 色の指定 h w 色=(R,G,B) 0〜255の間で指定 stroke(0,0,100); //紺色 fill(0,255,255); //水色 ellipse(150,150,200,200);
  11. 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. 12. for文
  13. 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. 14. if文
  15. 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. 16. 問題(1) 右図のように 円をしきつめるには どうしたらよいか?
  17. 17. 問題(2) 右図のように 円の色を変えるには どうしたらよいか?

×