a-02 図形を描く, 色を使う

2011年4月18日

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

point() 点を描く

「座標 (2, 5) に点を描く」

point(2, 5);

point

左上部分を拡大すると... ↓

座標 (2, 5) に点を描く

コンピュータの画面は、小さな正方形が整列して並べられている(携帯電話の画面も同じ)。個々の正方形に色を付けることで文字やイラスト、写真を表示している。

練習

point() で絵文字を描く

emoji

↓拡大図

絵文字

size() ウィンドウ(キャンバス)のサイズを指定する

「ウィンドウサイズを幅480ピクセル高さ320ピクセルに設定」

size(480, 320);

1a-02-01

rect() 矩形(長方形、正方形)を描く

「左上の点が(60,80)で幅240ピクセル高さ180ピクセルの矩形」

size(480, 320);
rect(60, 80, 240, 180);

1a-02-02

後に書いた矩形が、重なり順で上になる。

size(480, 320);
rect(60, 80, 240, 180);
rect(120, 140, 240, 100);

1a-02-03

strokeWeight() 線の太さを設定する

「線の太さを3にする」

size(480, 320);
strokeWeight(3);
rect(60, 80, 240, 180);
rect(120, 140, 240, 100);

1a-02-07

strokeJoin() 接点(頂点)のスタイルを設定する

  • strokeJoin(MITER) ... 留め継ぎにする ※デフォルト
  • strokeJoin(BEVEL) ... 斜角をつける
  • strokeJoin(ROUND) ... 丸くする

※デフォルトは、あらかじめ設定されている値・状態のこと

「接点を3つのスタイルで設定し、矩形を描く」

size(480, 320);
strokeWeight(20);

strokeJoin(MITER);
rect(80, 100, 80, 120); //左

strokeJoin(BEVEL);
rect(200, 100, 80, 120); //中央

strokeJoin(ROUND);
rect(320, 100, 80, 120); //右

strokeJoin

rectMode() rect の座標指定を設定する

  • rectMode(CORNER) ... rect(左上頂点のx座標, 左上頂点のy座標, 幅, 高さ) ※デフォルト
  • rectMode(CORNERS) ... rect(左上頂点のx座標, 左上頂点のy座標, 右下頂点のx座標, 右下頂点のy座標)
  • rectMode(CENTER) ... rect(中心のx座標, 中心のy座標, 幅, 高さ)
  • rectMode(RADIUS) ... rect(中心のx座標, 中心のy座標, 幅の半分, 高さの半分)

「それぞれのモードで同じ位置に矩形を描く」

size(480, 320);
noFill(); //塗りつぶさない

rectMode(CORNER);
rect(60, 80, 240, 180);

rectMode(CORNERS);
rect(60, 80, 300, 260);

rectMode(CENTER);
rect(180, 170, 240, 180);

rectMode(RADIUS);
rect(180, 170, 120, 90);

rectMode

ellipse() 円(楕円、正円)を描く

「中心(240,160), 横直径180, 縦直径120の楕円を描く」

size(480,320);
ellipse(240,160,180,120);

1a-03-01

「中心(100,80), 直径120の円を描く」

size(480,320);
ellipse(240,160,120,120);

1a-03-02

ellipseMode() ellipse の座標指定を設定する

  • ellipseMode(CENTER) ... ellipse(中心のx座標, 中心のy座標, 横直径, 縦直径) ※デフォルト
  • ellipseMode(RADIUS) ... ellipse(中心のx座標, 中心のy座標, 横半径, 縦半径)
  • ellipseMode(CORNER) ... ellipse(バウンディングボックスの左上頂点のx座標, バウンディングボックスの左上頂点のy座標, 横直径, 縦直径)
  • ellipseMode(CORNERS) ... ellipse(バウンディングボックスの左上頂点のx座標, バウンディングボックスの左上頂点のy座標, バウンディングボックスの右下頂点のx座標, バウンディングボックスの右下頂点のy座標)

※バウンディングボックスとは、図形を囲む最小の矩形のこと

色を表現する方法

RGBとHSB

参考:イラストレータのカラーパネルで色を作る

RGB - HSB

  • RGB: R:0, G:0, B:0
  • HSB: H:0°〜360°, S:0%〜100%, B:0%

  • RGB: R:255, G:0, B:0
  • HSB: H:0°, S:100%, B:100%

  • RGB: R:255, G:255, B:0
  • HSB: H:60°, S:100%, B:100%

  • RGB: R:0, G:255, B:0
  • HSB: H:120°, S:100%, B:100%

シアン(水)

  • RGB: R:0, G:255, B:255
  • HSB: H:180°, S:100%, B:100%

  • RGB: R:0, G:0, B:255
  • HSB: H:240°, S:100%, B:100%

マゼンタ(紫)

  • RGB: R:255, G:0, B:255
  • HSB: H:300°, S:100%, B:100%

  • RGB: R:255, G:255, B:255
  • HSB: H:0°〜360°, S:0%, B:100%

不透明度(アルファチャンネル)

alpha

アルファ値が100%未満の場合、下が透けて見える。0%で完全に見えなくなる。

colorMode() カラーモードを指定する

背景や図形に色を塗り色を指定する前に、カラーモード(RGBまたはHSB)を指定する

「RGBモード(R,G,B:各256段階)で指定する」

colorMode(RGB,256);

「HSBモード(H:360段階, S,B:各100段階)で指定する」

colorMode(HSB,360,100,100);

「HSBモード(H:360段階, S,B,Alpha:各100段階)で指定する」

colorMode(HSB,360,100,100,100);

background() 背景(ウィンドウの地色)に色を付ける

「背景色に青を指定(RGBモードで)」

size(480,320);
colorMode(RGB,256);
background(0,0,255);

1a-03-03

stroke() 線に色を付ける

「縁が青い線の円を描く」

size(480,320);
colorMode(RGB,256);
stroke(0,0,255);
ellipse(240,160,100,100);

1a-03-04

noStroke() 線なし

「縁線のない円を描く」

size(480,320);
noStroke();
ellipse(240,160,100,100);

1a-03-05

strokeWeight() 線の太さを設定する

「縁線が青・太さ10の円を描く」

size(480,320);
colorMode(RGB,256);
stroke(0,0,255);
strokeWeight(10);
ellipse(240,160,100,100);

1a-03-06

fill() 塗りに色を付ける

「青く塗られた円を描く」

size(480,320);
colorMode(RGB,256);
noStroke(); // 縁線を消す
fill(0,0,255);
ellipse(240,160,100,100);

1a-03-07

noFill() 塗りつぶしなし

「縁線が青・太さ10、塗りつぶしなしの円を描く」

size(480,320);
colorMode(RGB,256);
stroke(0,0,255);
strokeWeight(10);
noFill();
ellipse(240,160,100,100);

1a-03-08

smooth() 図形のエッジを滑らかにする(アンチエイリアス)

「エッジの滑らかな円を描く」

size(480,320);
colorMode(RGB,256);
smooth();
stroke(0,0,255);
strokeWeight(10);
ellipse(240,160,100,100);

1a-03-09

[tips] リファレンスを使う

忘れたらリファレンスを調べればよい。

まとめ

*は授業では詳しく説明していないもの。自習しておくこと。

構造

形を描く

原形

属性

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

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プログラミング入門 ビューティフルビジュアライゼーション ビジュアル・コンプレキシティ ―情報パターンのマッピング