2011-aの最近のブログ記事

期末課題テーマ

群れ

（むれ）とは、同一種の生物の個体多数からなる集団である。まれに複数種を含む集団を指す場合もある。

http://ja.wikipedia.org/wiki/群れ

課題概要

テーマからイメージをふくらませ、ビジュアルで表現してください。

スケジュール

• 第10回 企画のチェック, プログラミング
• 第11回 手描きスケッチのチェック, プログラミング
• 第12回 プログラミング, 仮提出
• 第13回 ブラッシュアップ（完成度を高める）
• 第14回 ブラッシュアップ, 完成・本提出　※7月20日を提出締め切りとする
• 第15回 プレゼンテーション＆相互評価

※提出方法や制作のヒントを各回で随時解説する

制作条件

• 作品サイズは幅1024ピクセル・高さ768ピクセル。
• 静止画とする。
• PhotoshopやIllustratorで作成したグラフィックや写真をProcessingに読み込んで利用しても良い。 → 画像の作成方法
• Processingで作成したグラフィックをPhotoshopやIllustratorで後処理することは禁止とする。
• ネット上の画像など、著作物を無断利用することは禁止とする。
• 「プログラミングによるビジュアル表現」「あなたらしい表現」になっていること。

課題の提出窓口

• 提出ファイルの作成方法はこのページを参照してください。
• → 提出窓口へ（まずはログインしてください）
• Googleドキュメントでの共有設定は以下を参照してください。

「アップロード」をクリックし、ファイルを選択する

アップロードする

アップロード完了後、そのファイル名をクリックする

ファイルの共有設定をし、吉村が閲覧できるようにする

draw() 連続して実行する

void draw() {
  ellipse(random(width), random(height), 30, 30);
}

setup() 最初に1回だけ実行する

draw関数を実行する前に1回だけ実行する。1回だけ実行すればいいもの（ウィンドウサイズの指定など）を記述する。

void setup() {
  size(500, 100);
}

void draw() {
  ellipse(random(width), random(height), 30, 30);
}

noLoop() draw関数の処理を繰り返さない（1回だけ実行する）

void setup() {
  size(500, 100);
  noLoop();
}

void draw() {
  ellipse(random(width), random(height), 30, 30);
}

関数をつくる

同じような処理を繰り返す場合、簡潔に記述できる

星を描く（関数を使わずに）

void setup() {
  noStroke();
  smooth();
  background(0);
  noLoop();
}

void draw() {
  //星を描く
  fill(255, 255, 0);
  beginShape();
    vertex(50      , 50 - 20);
    vertex(50 - 12 , 50 + 15);
    vertex(50 + 18 , 50 -  8);
    vertex(50 - 18 , 50 -  8);
    vertex(50 + 12 , 50 + 15);
  endShape(CLOSE);
}

星を2つ描く（関数を使わずに）

void setup() {
  noStroke();
  smooth();
  background(0);
  noLoop();
}

void draw() {
  //星を描く 左
  fill(255, 255, 0);
  beginShape();
    vertex(30      , 50 - 20);
    vertex(30 - 12 , 50 + 15);
    vertex(30 + 18 , 50 -  8);
    vertex(30 - 18 , 50 -  8);
    vertex(30 + 12 , 50 + 15);
  endShape(CLOSE);
  //星を描く 右
  fill(255, 255, 0);
  beginShape();
    vertex(70      , 50 - 20);
    vertex(70 - 12 , 50 + 15);
    vertex(70 + 18 , 50 -  8);
    vertex(70 - 18 , 50 -  8);
    vertex(70 + 12 , 50 + 15);
  endShape(CLOSE);
}

星を2つ描く（関数を使って）

プログラムの書き方1

void setup() {
  noStroke();
  smooth();
  background(0);
  noLoop();
}

void draw() {
  drawStar(30, 50); //星を描く 左
  drawStar(70, 50); //星を描く 右
}

void drawStar(int x, int y) {
  fill(255, 255, 0);
  beginShape();
    vertex(x      , y - 20);
    vertex(x - 12 , y + 15);
    vertex(x + 18 , y -  8);
    vertex(x - 18 , y -  8);
    vertex(x + 12 , y + 15);
  endShape(CLOSE);
}

プログラムの書き方2

void setup() {
  noStroke();
  smooth();
  background(0);
  noLoop();
}

void draw() {
  drawStar(30, 50); //星を描く 左
  drawStar(70, 50); //星を描く 右
}

void drawStar(int x, int y) {
  pushMatrix();
  translate(x, y);
  fill(255, 255, 0);
  beginShape();
    vertex(  0,-20);
    vertex(-12, 15);
    vertex( 18, -8);
    vertex(-18, -8);
    vertex( 12, 15);
  endShape(CLOSE);
  popMatrix();
}

練習

• ウィンドウサイズを幅200px高さ200pxとして画面中央に星を3つ並べる
• drawStar関数の引数を追加し、drawStar関数で任意の色を指定できるようにする
• 笑顔を描く関数drawSmileを定義し、画面を笑顔で満たす　※arc()関数を使うと円弧を描くことができる

translate() 座標を移動する

rect(0, 0, 30, 20);
translate(40, 30); // 座標軸を 右に40px, 下に30px移動
rect(0, 0, 30, 20);
translate(-10, 30); // 座標軸を 左に10px, 下に30px移動
rect(0, 0, 30, 20);

pushMatrix() 座標をスタックに格納する, popMatrix() 座標をスタックから取り出す

※スタック(stack）とは、データ構造の一種で「最後に入れたデータを最初に取り出せる」ようになっている。

pushMatrix(); //(0, 0)を原点とする座標軸をスタックに格納
translate(40, 30); // 座標軸を 右に40px, 下に30px移動
rect(0, 0, 30, 20);
popMatrix(); //座標軸の位置をスタックから取り出すし設定する ... この場合(0, 0)
rect(0, 0, 30, 20);

pushMatrix(); //(0, 0)を原点とする座標軸をスタックに格納
translate(30, 0); //座標軸を 右に30px移動
rect(10, 40, 20, 20); //真ん中の正方形
pushMatrix(); //(30, 0)を原点とする座標軸をスタックに格納
translate(30, 0); //座標軸を 右に30px移動
rect(10, 40, 20, 20); //右の正方形
popMatrix(); //座標軸の位置をスタックから取り出すし設定する ... この場合(30, 0)
popMatrix(); //座標軸の位置をスタックから取り出すし設定する ... この場合(0, 0)
rect(10, 40, 20, 20); //左の正方形

rotate() 座標を回転する, PI π

※角度は「ラジアン（π: パイ）」で表す。 π = 180°

rect(40, 0, 30, 20);
rotate(PI/6); // 座標軸を 30°回転
rect(40, 0, 30, 20);
rotate(PI/6); // 座標軸を 30°回転
rect(40, 0, 30, 20);

scale() 座標を拡大・縮小する

smooth();
ellipse(20, 20, 30, 30);
scale(2.0); // 座標を 2.0倍に拡大
ellipse(20, 20, 30, 30);
scale(0.2); // 座標を 0.2倍に縮小（一番最初の大きさからは2.0×0.2=0.4倍）
ellipse(20, 20, 30, 30);

rect(10, 10, 20, 10);
scale(2.0, 4.0); // 座標を 幅2.0倍, 高さ4.0倍に拡大
rect(10, 10, 20, 10);

変換を組み合わせる

translate と rotate を組み合わせる

rect(0, 0, 30, 20);
translate(40, 20); // 座標軸を 右に40px, 下に20px移動
rotate(PI/6); // 座標軸を 30°回転
rect(0, 0, 30, 20);
translate(40, 20); // 座標軸を 右に40px, 下に20px移動
rotate(PI/6); // 座標軸を 30°回転
rect(0, 0, 30, 20);

練習

translate, rotate, scale を使って模様をつくる

例1

size (500, 500);
colorMode(HSB, 360, 256, 256);
background(0);
noStroke();
smooth();
rectMode(CENTER);

for (int i = 0; i < 720; i++) {
  pushMatrix();
  translate(random(width), random(height));
  rotate(random(PI/2));
  scale(random(0.5, 5));
  fill(random(0, 90), 255, 255, 51);
  rect(0, 0, 10, 10);
  popMatrix();
}

例2

size (500, 500);
colorMode(HSB, 360, 256, 256);
background(0);
smooth();
translate(100, 400);

for (int i = 0; i < 36; i++) {
  scale(1.1);
  rotate(PI/18);
  stroke(10 * i, 255, 255, 102);
  line(0, 0, 20, 0);
}

PImage 変数で画像を扱う場合のデータ型, image() 画像を表示するための関数

ウェブ上の画像を表示する

size(300, 100);

// PImage 型の変数 logo に画像データを読み込む
PImage logo = loadImage("http://k.yimg.jp/images/top/sp/logo.gif");

// 画像を表示
image(logo, 0, 0);

画像を表示する

この画像をデスクトップにダウンロードしてから、表示させる

手順

1. sketch（プログラム）を書く
2. メニューの「File > Save As」で「書類 > Processing」にsketchを保存
3. Processingのエディタに画像ファイルをドラッグ

size(500, 500);

// PImage型の変数photoに「dandelion.jpg」を読み込む
PImage photo = loadImage("dandelion.jpg");

// 画像を表示
image(photo, 0, 0);

表示位置を調整する

size(500, 500);

PImage photo = loadImage("dandelion.jpg");

image(photo, 50, 100); //画像の左上を(50,100)に指定

表示サイズを調整する

size(500, 500);

PImage photo = loadImage("dandelion.jpg");

image(photo, 50, 100, 300, 200);//画像の幅を300, 高さを200に指定

色を調整する

size(500, 500);

colorMode(HSB);

PImage photo = loadImage("dandelion.jpg");

//黄色を付ける
tint(50, 255, 255);

image(photo, 0, 0);

複数の画像を配置する

上の画像をデスクトップにドラッグして、Processingのエディタにドラッグしておく。

size(500, 500);
background(255);

PImage photo1 = loadImage("dandelion.jpg");
PImage photo2 = loadImage("bus.png");

image(photo1, 0, 0);
image(photo2, 350, 250);

画像を画面の中央に配置する

size(500, 500);
background(255);

PImage photo2 = loadImage("bus.png");

imageMode(CENTER); //基準点を画像の中心に設定
image(photo2, width / 2, height / 2);

練習

1. 写真をランダムな位置に配置する（10個）

2. 写真をランダムな位置に配置する（小さくして100個）

3. 写真をランダムな位置に配置する（サイズもランダムにして100個）

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);

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

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

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

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

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

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

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

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

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アカウントが必要となる。

→ ここから提出

if〜else〜 条件分岐命令

条件ごとに処理を行いたい場合に利用する。

if (条件式) {条件式が「真(true)」の場合に実行する内容をここに書く。「偽(false)」の場合は実行されない。}

「条件式がtrueになる場合」

int i = 1;
if (i > 0) background(255, 0, 0); //iに代入された「1は0よりも大きい」はtrueなので、「背景色を赤にする」を実行する

「条件式がfalseになる場合」

int i = 0;
if (i > 0) background(255, 0, 0); //iに代入された「0は0よりも大きい」はtrueではない（false）ので、「背景色を赤にする」は実行されない

※条件式に応じて複数の処理を実行する場合は、その処理を{ }でくくる。{ }の内容にはインデントを入れる。

int i = 0;
if (i > 0) {
  background(255, 0, 0);
  ellipse(50, 50, 50, 50);
}

条件式

== 左辺が右辺に等しい

「変数iが10に等しければtrue」

i == 10

※「i=10」は「iに10を代入」である。混同しやすいので注意。

!= 左辺が右辺に等しくない

「変数iが10に等しくなければtrue」

i! = 10

< 左辺が右辺より小さい

「変数iが10より小さければtrue」

i < 10

> 左辺が右辺より大きい

「変数iが10より大きければtrue」

i > 10

<= 左辺が右辺以下

「変数iが10以下ならばtrue」

i <= 10

>= 左辺が右辺以上

「変数iが10以上ならばtrue」

i >= 10

※<=, >=を逆に書く（=<, =>）とエラーになるので注意。

&& かつ

「変数iが0より大きく、かつ、変数iが10より小さければtrue」

i > 0 && i < 10

|| または

「変数iが0より小さい、または、変数iが10より大きいならばtrue」

i < 0 || i > 10

演習

「繰り返し、線を描く（ウィンドウの幅いっぱいに縦線を敷き詰める）」

for(int i = 0; i < width; i++){
  line(i, 0, i, height);
}

※このプログラムに条件分岐を加えていく → 「特定の条件を満たす場合にのみ、線を描く」

• x座標が3のとき
• x座標が3でないとき
• x座標が33未満のとき
• x座標が3または33のとき
• x座標が3以上33以下のとき
• x座標が3の倍数のとき
• x座標が3の倍数かつ7の倍数でないとき

※ i%3は「iを3で割ったときの余り」を計算する。たとえば「5%3」は「2」であり、「9%3」は「0」となる。

if (条件式) {条件式がtrueの場合の実行内容} else {条件式がfalseの場合の実行内容}

「条件式の結果によって、異なる処理を実行する」

float ramdomNum = random(100); //0から100の間の値をランダムに生成
println(ramdomNum); //コンソールに値を表示
if (ramdomNum < 50) background(255, 0, 0); //50未満ならば、背景色を赤にする
else background(0, 255, 0); //そうでないなら、背景を緑にする

「画面左から縦線をびっしりと引くとき、ランダムな値に応じて線の色を設定する」

//画面左から縦線をびっしりと引く
for (int i = 0; i < width; i++) {
  float ramdomNum = random(100); //0から100の間の値をランダムに生成
  if (ramdomNum < 50) stroke(0); //50未満ならば、線の色を黒に設定
  else stroke(255); //そうでないとき、線の色を白に設定
  line(i, 0, i, height); //縦線を描く
}

「画面左から縦線をびっしりと引くとき、x座標が3の倍数（3で割って割り切れる）のときには黒い線を、3の倍数でないときには白い線を描く」

//画面左から縦線をびっしりと引く
for (int i = 0; i < width; i++) {
  //条件に従って色の設定をする
  if (i%3 == 0) stroke(0); //iが3で割り切れるとき、線の色を黒に設定
  else stroke(255); //そうでないとき、線の色を白に設定
  line(i, 0, i, height);
}

if (条件式A) {条件式Aがtrueの場合の実行内容} else if (条件式B) {条件式Bがtrueの場合の実行内容} else {条件式A,Bがfalseの場合の実行内容}

「画面左から縦線をびっしりと引くとき、x座標が3の倍数のときには赤い線を、3で割って1余るときには緑の線を、それら以外のときには青い線を描く」

//画面左から縦線をびっしりと引く
for (int i = 0; i < width; i++) {
  //条件に従って色の設定をする
  if (i%3 == 0) stroke(255, 0, 0); //iが3で割り切れるとき、線の色を赤に設定
  else if (i%3 == 1) stroke(0, 255, 0); //iを3で割って1余るとき、線の色を緑に設定
  else stroke(0, 0, 255); //そうでないとき、線の色を青に設定
  line(i, 0, i, height);
}

switch 〜 case 〜 default パターン振り分け

↑上のプログラムをswitch文で書きかえる

//画面左から縦線をびっしりと引く
for (int i = 0; i < width; i++) {
  switch (i%3) {
    case 0: //i%3の結果が0のとき以下を実行 
      stroke(255, 0, 0);
      break; // switch文を抜ける
    case 1: //i%3の結果が1のとき以下を実行 
      stroke(0, 255, 0);
      break;
    default: //どのケースにも当てはまらないとき以下を実行
      stroke(0, 0, 255);
      break;
  }
  line(i, 0, i, height);
}

まとめ

制御

条件

• if
• switch()

for 処理を繰り返す

for ()の条件を満たす間、繰り返し {}内の処理の実行する。

size(400,200);

for(int i = 0; i < 3; i++){
  ellipse(100 + 100 * i, 100, 60, 60);
}

上のfor文では、以下のように i = 0 を初期値として、iが3未満ならば、iを1ずつ増やして{}内を実行している。

ellipse(100 + 100 * 0, 100, 60, 60); // i=0のとき
ellipse(100 + 100 * 1, 100, 60, 60); // i=1のとき
ellipse(100 + 100 * 2, 100, 60, 60); // i=2のとき

練習

• 円を5つ並べてみる
• 一定の大きさで小さくなる円を3つ描く

繰り返しを繰り返す（for文を入れ子にする）

横に3つ並んだ円を、3段描く。

size(400,400);

//1段目
for(int i = 0; i < 3; i++){
  ellipse(100 + 100 * i, 100, 60, 60);
}

//2段目
for(int i = 0; i < 3; i++){
  ellipse(100 + 100 * i, 200, 60, 60);
}

//3段目
for(int i = 0; i < 3; i++){
  ellipse(100 + 100 * i, 300, 60, 60);
}

y座標に着目すると、100ずつ増えているので、以下のように書きかえることができる。

size(400, 400);

for (int j = 0; j < 3; j++) {
  for (int i = 0; i < 3; i++) {
    ellipse(100 + 100 * i, 100 + 100 * j, 60, 60);
  }
}

繰り返しに合わせて色を付ける

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

for(int x = 0; x < 10; x++){
  fill(x*10, 10, 99);
  rect(x*20, 0, 10, 10);
}

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

for(int y = 0; y < 10; y++){
  for(int x = 0; x < 10 ; x++){
    fill(10*x, 10+y*10, 99);
    rect(x*20, y*20, 10, 10);
  }
}

random() ランダムに決める

size(200,200);

for(int i=0; i<100; i++){
  line(random(width), random(height), random(width), random(height));
}

※プログラムが実行されるたびに、出力結果が変わる。

色もランダムにしてみる

size(200, 200);
colorMode(RGB, 100);
background(99);

for(int i = 0; i < 100; i++){
  stroke(random(100), random(100), random(100));
  line(random(width), random(height), random(width), random(height));
}

ランダムな値（乱数）を変数に入れて利用する

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

for(int x = 0; x < width; x++){
  float color1 = random(100); // 色を設定する乱数の値は0から100未満とする
  stroke(color1, 60, 99);
  line(x, 0, x, height);
}

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

まとめ

制御

繰り返し処理

• for

数学

ランダム

• random()

[おさらい] 色を使う

練習: 国旗を描く

size(480, 320);
background(255);
noStroke();
//左長方形（青）
fill(0, 30, 150);
rect(0, 0, 160, 320);
//右長方形（赤）
fill(210, 30, 30);
rect(320, 0, 160, 320);

数値と計算式

数値の代わりに計算式で書くことができる。

size(400, 200);
ellipse(100, 100, 60, 60); // 中心(100,100)で直径60の円
ellipse(100+200, 100, 60, 60); //上の行で描いた円を「x軸方向に200移動」した円

変数

変数とは：プログラムで使うデータの入れ物のこと。

変数を使ったプログラム

※「intって何・・・？」などプログラムの記述に関する約束ごとは、じょじょに説明していきます。

size(400, 200);
int x = 100; //中心のx座標を「x」とし、100を代入
int y = 100; //中心のy座標を「y」とし、100を代入
int d = 60; //直径を「d」とし、60を代入
ellipse(x, y, d, d); // 中心(x,y)で直径dの円

直径の値を変更したいとき、1箇所の修正で済むので効率的 （「効率化」がプログラミングの楽しさのひとつ）

int, float データ型

データ型とは：プログラムの中で使うデータである数値や、色や、文字などを区別するための分類のこと。

まず、以下2つのデータ型を覚える

• int（イント）：整数
• float（フロート）：小数

変数の宣言

変数を使うには、変数を「宣言」する必要がある。

int x = 100; //「x」は「int型変数」で、「x」に100を代入する。という意味

= 変数への代入

変数への代入とは：宣言して作った変数の中に、数字や計算結果を納めること。

x = 100; // xに100を代入
x = 100 + 200; // xに「100+200」を代入
x = x + 100; // xに「x+100」を代入（xに100を加えて、xの新しい値とする）
x += 100; // x=x+100 と同じ
x -= 100; // x=x-100 と同じ
x *= 100; // x=x*100 と同じ
x /= 100; // x=x/100 と同じ
x++; // x+=1 (x=x+1)  と同じ
x--; // x-=1 (x=x-1)  と同じ

例）円を3つ並べて描く

size(400, 200);

int x = 100;
int y = 100;
int d = 60;

ellipse(x, y, d, d);

x += 100; //x=200になる
ellipse(x, y, d, d);

x += 100; //x=300になる
ellipse(x, y, d, d);

println() コンソールに値を表示

コンソール（エディタの下部）に値を表示する

int x = 1;
int y = 2;
println(x);
println(y);
x += y;
println(x);

width, height システム変数

システム変数とは：Processingが用意する変数

• width: ウィンドウの幅
• height: ウィンドウの高さ

「ウィンドウサイズいっぱいに円を描く」

size(200, 200);
int x = width / 2; //中心のx座標「x」はウィンドウの幅（200）の半分 → 100
int y = height / 2; //中心のy座標「y」ウィンドウの高さ（200）の半分 → 100
int d = width; //直径「d」はウィンドウの幅（200）
ellipse(x, y, d, d); // 中心(x,y)で直径dの円

sizeの値を変更してみる。2行目以降は全く同じコードであるが、違うサイズの円が描かれる。

size(400, 400);
int x = width / 2; //中心のx座標「x」はウィンドウの幅（400）の半分 → 200
int y = height / 2; //中心のy座標「y」ウィンドウの高さ（400）の半分 → 200
int d = width; //直径「d」はウィンドウの幅（400）
ellipse(x, y, d, d); // 中心(x,y)で直径dの円

まとめ

構造

• 代入 = (assign)

環境

• ウィンドウの幅 width
• ウィンドウの高さ height

データ

基本データ型

• 整数 int
• 小数 float

出力

テキストエリア

• コンソールのテキストエリアに出力 print()
• コンソールのテキストエリアに出力（新しい行で出力） println()

数学

演算子

• + (addition)
• - (minus)
• * (multiply)
• / (divide)
• % (modulo)
• += (add assign)
• -= (subtract assign)
• *= (multiply assign)
• /= (divide assign)
• ++ (increment)
• -- (decrement)

point() 点を描く

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

point(2, 5);

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

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

練習

point() で絵文字を描く

↓拡大図

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

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

size(480, 320);

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

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

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

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

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

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

「線の太さを3にする」

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

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); //右

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);

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

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

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

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

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

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: ウィキペディアでRGBについて詳しく読む
• HSB: ウィキペディアで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%

不透明度（アルファチャンネル）

アルファ値が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);

stroke() 線に色を付ける

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

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

noStroke() 線なし

「縁線のない円を描く」

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

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

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

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

fill() 塗りに色を付ける

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

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

noFill() 塗りつぶしなし

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

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

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

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

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

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

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

• Extended Language (API) \ Processing.org
• Extended Language (API) \ Processing 1.0 (BETA) ← 日本語訳したもの。情報が古い場合があるので、英語版を読めるようになること。

まとめ

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

構造

• ウィンドウのサイズを指定する size()
• コメントを付ける // (comment)
• 命令を区切る ; (semicolon)

形を描く

原形

• 点を描く point()
• 線を描く line()
• 矩形を描く rect()
• 楕円を描く ellipse()
• * 弧を描く arc()
• * 三角形を描く triangle()
• * 四角形を描く quad()

属性

• 線の太さを設定する strokeWeight()
• * 線の端のスタイルを設定するstrokeCap()
• 接点のスタイルを設定する strokeJoin()
• エッジを滑らかにする（アンチエイリアス）smooth()
• rect の座標指定を設定する rectMode()
• ellipse の座標指定を設定する ellipseMode()

色

• カラーモードを設定する colorMode()
• 背景（ウィンドウの地色）に色を付ける background()
• 塗りに色を付ける fill()
• 塗りなしnoFill()
• 線に色を付ける stroke()
• 線なし noStroke()

Processingとは

• オープンソースのプログラミング言語
  • 無料で利用できる
  • ダウンロード → http://processing.org/download/
• 描画やインタラクションをプログラミングで表現したい人向けの開発環境
• 学生、アーティスト、デザイナーが扱いやすいように配慮されている
• 詳しくは公式サイトを参照 → http://processing.org/

Processingの特徴

• 短いソースコードで動いてくれる
• Processing を扱えるようになることで、iPhone や Android の「アプリ」をつくることもできる

Processingを使った作品の紹介

• Exhibition Archives \ Processing.org
  • Aaron Koblin - Flight Patterns
  • Mary Huang :: portfolio

Solar, with lyrics. from flight404 on Vimeo.

processing.js (Google Chrome または Safari での閲覧を推奨)

• HTML5 Canvas and Audio Experiment
• BallDroppings

Processingの開発環境

• Environment (IDE) \ Processing.org

前提知識

コンピュータの座標空間

• Drawing \ Processing.org

Processingで描く

• 点を描く point()
• 線を描く line()
• 楕円を描く ellipse()
• 矩形を描く rect()