a-06 図形を描く, 色を使う(その2)

2011年5月16日

このエントリーをはてなブックマークに追加

triangle() 三角形を描く

1a-08-triangle

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

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

quad() 四角形を描く

1a-08-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() 繋がった線分を描く(多角形を描く)

1a-08-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);

beginShape(), endShape()に設定できるパラメータ

  • beginShape ... POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP
  • endShape ... CLOSE

TRIANGLE_FAN

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

色の設定(おさらい)

パラメータの数が

  • 1つ ... gray
  • 2つ ... gray, alpha
  • 3つ ... R, G, B または H, S, B
  • 4つ ... R, G, B, alpha または H, S, B, alpha

color1

background(0);
fill(255);
rect(10, 10, 60, 60); //左上
fill(255);
rect(30, 30, 60, 60); //右下

color2

background(0);
fill(255, 102);
rect(10, 10, 60, 60); //左上
fill(255, 204);
rect(30, 30, 60, 60); //右下

color3

background(0);
fill(255, 0, 0);
rect(10, 10, 60, 60); //左上
fill(0, 0, 255);
rect(30, 30, 60, 60); //右下

color4

background(0);
fill(255, 0, 0, 153);
rect(10, 10, 60, 60); //左上
fill(0, 0, 255, 153);
rect(30, 30, 60, 60); //右下

color 変数で色を扱う場合のデータ型, color() 色を設定するための関数

color5

background(0);
color c1 = color(255, 0, 0); // 色変数c1に赤を代入
color c2 = color(0, 0, 255); // 色変数c1に青を代入
fill(c1);
rect(10, 10, 60, 60); //左上
fill(c1 + c2); // 紫が設定される
rect(30, 30, 60, 60); //右下

練習課題「太陽をかこう」 ※要提出

ブルーノ・ムナーリ作「太陽をかこう」の表紙を参考に、太陽を描く。以下のルールを守ること。

  • ウィンドウサイズは幅600高さ600とする
  • カラーモードは自由(RGBでもHSBでも良い)
  • 背景色は白
  • for文、random、半透明の色設定など、これまで学んだことをフルに活用する
    • random (最小値, 最大値) を利用すると良い
  • コメントも記述し、後で見てわかりやすいプログラムにしておく
  • プログラムの正解は十人十色。「表現」に関わるところなので自分自身の力で考えやり抜くこと
  • 締め切りは今週木曜日の18時とする。これ以降の提出は40%offの評価となる
  • 提出には大学のGoogleアカウントが必要となる。

ここから提出

太陽をかこう

このエントリーをはてなブックマークに追加

Archives

以下の記事は、2011年度に筆者が大学での授業で利用していた補足資料です。現在、これらをベースに本ウェブサイトを再構築しています。完了するまで一時的に掲載します。


About

筆者: @mathatelle

ジェネラティブ・アート -Processingによる実践ガイド Processing: A Programming Handbook for Visual Designers and Artists Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction (Morgan Kaufmann Series in Computer Graphics and Geometric Modeling) Processingをはじめよう (Make: PROJECTS) Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門 Processing アニメーションプログラミング入門 デザイン言語 Processing入門 - 楽しく学ぶコンピュテーショナルデザイン Processingプログラミング入門―Javaベースのオープンソース統合開発環境 ProcessingでかんたんAndroidプログラミング FORM+CODE -デザイン/アート/建築における、かたちとコード Form+Code in Design, Art, and Architecture (Design Briefs) Generative Art: A Practical Guide Using Processing Generative Gestaltung ビジュアライジング・データ ―Processingによる情報視覚化手法 ARプログラミング—Processingでつくる拡張現実感のレシピ— Arduinoをはじめよう 第2版 (Make:PROJECTS) +GAINER―PHYSICAL COMPUTING WITH GAINER Beyond Interaction ―メディアアートのためのopenFrameworksプログラミング入門 ビューティフルビジュアライゼーション ビジュアル・コンプレキシティ ―情報パターンのマッピング