Home > 1a > | ノート > 1a-08 これまでのおさらいと発展

1a-08 これまでのおさらいと発展

Posted by: masa
2009年6月 8日 14:40
1a | ノート

教科書 p.42〜p.65 のおさらい

かたちを描く（rectとellipseのほか）
色を使う（不透明度）
ランダムに決める（上限と下限の範囲を決めて）

連絡

次回以降、これまで学んだことをベースに作品制作の練習に入ります。これまでのノートを必ず持参すること。

※前々回の授業の冒頭でも言いましたが、授業マナーを守る学生のみ、TAからの助言を受けることができます。教科書を持ってこない、ノートをとらない学生は助言を受けることができません。真面目な学生を優先してサポートします。

point 点を描く

ここでいう点は「幅1ピクセル×高さ1ピクセルの正方形」（＝画面の最小単位）になる。

「x座標240, y座標120の位置に点を描く」

size(720,480);
point(240,120);

line 線を描く

2つの点で結ばれた線分を描く。

「2点(120,240), (600,360)を結ぶ線分を描く」

size(720,480);
line(120,240,600,360);

rectMode 矩形（長方形、正方形）を描くときのモード

3種類の描き方がある。

rectMode(CORNER) 矩形の左上の点の座標と幅・高さを指定

「左上の点が(90,60)で幅540・高さ360の矩形」

size(720,480);
rectMode(CORNER);
rect(90,60,540,360);

※rectModeを指定しない場合は、自動的に「rectMode(CORNER)」が適用される。

rectMode(CENTER) 矩形の中心点の座標と幅・高さを指定

「中心点が(360,240)で幅540・高さ360の矩形」

size(720,480);
rectMode(CENTER);
rect(360,240,540,360);

rectMode(CORNERS) 矩形の向かい合う頂点の座標を指定

「(90,60)と(630,240)を向かい合う頂点とする矩形」

size(720,480);
rectMode(CORNERS);
rect(90,60,630,420);

ellipseMode 円（楕円、正円）を描くときのモード

ellipseMode(CENTER)
ellipseMode(CENTER_RADIUS)
ellipseMode(CORNER)
ellipseMode(CORNERS)

詳しくは教科書45ページを参照

triangle 三角形を描く

「3点(100,20),(180,180),(20,180)からなる三角形を描く」

size(200,200);
triangle(100,20,180,180,20,180);

quad 四角形を描く

「4点(20,0),(200,100),(180,200),(0,160)からなる四角形を描く」

size(200,200);
quad(20,0,200,100,180,200,0,160);

beginShape, endShape, vertex 多角形を描く

「5点(100,0),(200,80),(120,200),(40,180),(0,60)からなる五角形を描く」

size(200,200);
beginShape();
  vertex(100,0);
  vertex(200,80);
  vertex(120,200);
  vertex(40,180);
  vertex(0,60);
endShape(CLOSE);

不透明度の設定

size(200,200);
colorMode(HSB,100);
background(99);
noStroke();

fill(0,99,99); //赤
rect(0,0,150,150);

fill(20,99,99,49); //半透明の黄色
rect(50,50,150,150);

ランダムに決める（上限と下限の範囲を決めて）

size(400,400);
for(int i=0; i<100; i++){
  stroke(0);
  float x1 = random(100,300);
  float y1 = random(100,200);
  float x2 = random(100,300);
  float y2 = random(200,300);
  line(x1,y1,x2,y2);
}

※randomはfloat型で変数を設定する（int型にするとエラーになる）。

練習課題

上のようなグラフィックを作成する。以下のルールを守ること。

ウィンドウサイズは幅400高さ400とする
カラーモードは自由（RGBでもHSBでも良い）
背景色は白
for文を使って、600個の円をウィンドウ全体にランダムに配置する
- 円の大きさは、直径10〜30をランダムに指定する
- 円の色は、赤〜オレンジ系をランダムに指定する
- 円の色の不透明度は、50%とする

練習問題の解答例

step1. 直径30として、600個の円をウィンドウ全体にランダムに配置する

size(400,400);

for(int i=0 ; i<600 ; i++){
  float x=random(width);
  float y=random(height);
  float d=30;
  ellipse(x,y,d,d);
}

step2. 直径10〜30をランダムに指定する

size(400,400);

for(int i=0 ; i<600 ; i++){
  float x=random(width);
  float y=random(height);
  float d=random(10,30); // 10以上30未満のランダムな値をRに代入
  ellipse(x,y,d,d);
}

step3. 赤〜オレンジ系をランダムに指定する

size(400,400);
colorMode(HSB,100);//カラーモードの設定
background(99);//背景色を白に設定

for(int i=0 ; i<600 ; i++){
  float color1=random(0,10); //0以上10未満のランダムな値をcolor1に代入
  fill(color1,99,99);//塗り色の設定
  float x=random(width);
  float y=random(height);
  float d=random(10,30); 
  ellipse(x,y,d,d);
}

step4. 円の色の不透明度は、50%とする

size(400,400);
colorMode(HSB,100);
background(99);

for(int i=0 ; i<600 ; i++){
  float color1=random(0,10); 
  fill(color1,99,99,50);//塗り色に不透明度の値を追加
  float x=random(width);
  float y=random(height);
  float d=random(10,30); 
  ellipse(x,y,d,d);
}

step5. 最終調整

size(400,400);
colorMode(HSB,100);
background(99);
noStroke(); //枠線をトル
smooth(); //縁をスムースに

for(int i=0 ; i<600 ; i++){
  float color1=random(0,10);
  fill(color1,99,99,50);

  float x=random(width);
  float y=random(height);
  float d=random(10,30);
  ellipse(x,y,d,d);
}