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

課題の提出方法

2つのファイルを提出する

提出ファイルその1: ソースコード（プログラム）

以下の点に注意すること。間違えた場合は減点となる。

• ファイル名に付ける学籍番号は半角数字で入力する。ハイフンは含めない（数字だけ）
• ファイル名にはスペースを含めない。applet学籍番号氏名を続けて入力する

提出ファイルその2: 作品の画像ファイル

作成方法は以下の通り

• draw関数の最終行（"}"の1行前）に画像で保存する命令save()を記述する（※draw関数を用いていない場合は、最終行にsave()を記述する）
• ファイル名は「学籍番号.png」の形式とする

記述例

.....
void draw() {
  .....
  .....
  .....
  save("0910000.png");
}
.....

• プログラムを実行すると、sketchフォルダ内に画像ファイルが生成される
• Processing のメニューで 「Sketch」＞「Show Sketch Folder」を選択すると画像ファイルを表示できる
• 画像ファイル名を「学籍番号氏名-作品タイトル.png」に変更する ※英数字とハイフンは半角文字を用いる
• それをGoogleドキュメントにアップロードし共有する

プレゼンテーション

• 持ち時間は2分間（長すぎず短すぎず適切に収まるようリハーサルをすること）
• 発表内容は「テーマ『群れ』をどのように解釈したか」「それを表現するために自分なりに工夫した点」など
• プレゼンテーションも評価の対象となる

画像を指定した範囲でランダムに配置する

角度、大きさ、座標、色をランダムに指定する。

用意したハートの画像（ドロップシャドゥをかけ背景は透過処理とした）

以下、複数の方法を提示する。どれが正解ということはなく、自身の作品に最も適した方法を選択する。

関数を使わずに

PImage heart;

void setup() {
  size(500, 500);
  colorMode(HSB);
  background(0);
  smooth();
  heart = loadImage("heart.png"); //ハート画像の読み込み
  imageMode(CENTER);
  noLoop();
}

void draw() {
//ハートをランダムに表示
  for (int i = 0; i < 50; i++) {
      pushMatrix();
      translate(random(width), random(100, 200));
      scale(random(0.2, 0.6));
      rotate(random(-PI/6, PI/6));
      tint(random(0,10), random(51, 204), 255);
      image(heart, 0, 0);
      popMatrix();
  }
}

関数を使って1（ハート1つのランダム描画を関数とする）

PImage heart;

void setup() {
  size(500, 500);
  colorMode(HSB);
  background(0);
  smooth();
  heart = loadImage("heart.png"); //ハート画像の読み込み
  imageMode(CENTER);
  noLoop();
}

void draw() {
  //ハートをランダムに表示
  for (int i = 0; i < 100; i++) {
    pushMatrix();
    transformHeart(random(width), random(100, 200));
    popMatrix();
  }
}

//ハートをランダムに回転、縮小、色づけする関数（ハートの座標を引数にする）
void transformHeart(float x, float y) {
  translate(x, y);
  scale(random(0.2, 0.6));
  rotate(random(-PI/6, PI/6));
  tint(random(0,10), random(51, 204), 255);
  image(heart, 0, 0);
}

関数を使って2（ハート複数のランダム描画を関数とする）

PImage heart;

void setup() {
  size(500, 500);
  colorMode(HSB);
  background(0);
  smooth();
  heart = loadImage("heart.png"); //ハート画像の読み込み
  imageMode(CENTER);
  noLoop();
}

void draw() {
  randomHeart(100); //ハートをランダムに「100個」表示
}

//ハートをランダムに表示する関数（ハートの個数を引数にする）
void randomHeart(int num) {
  for (int i = 0; i < num; i++) {
    pushMatrix();
    translate(random(width), random(100, 200));
    scale(random(0.2, 0.6));
    rotate(random(-PI/6, PI/6));
    tint(random(0,10), random(51, 204), 255);
    image(heart, 0, 0);
    popMatrix();
  }
}

画像を規則的に配置する（大きさや角度はランダムに設定する）

PImage heart;

void setup() {
  size(500, 500);
  colorMode(HSB);
  background(0);
  smooth();
  heart = loadImage("heart.png"); //ハート画像の読み込み
  imageMode(CENTER);
  noLoop();
}

void draw() {
  //ハートを規則的に表示
  int intervalNum = 50;
  for (int j = 0; j < height; j += intervalNum) {
    for (int i = 0; i < width; i += intervalNum) {
      pushMatrix();
      transformHeart(i + intervalNum/2, j + intervalNum/2);
      popMatrix();
    }
  }
}

//ハートをランダムに回転、縮小、色づけする関数（ハートの座標を引数にする）
void transformHeart(float x, float y) {
  translate(x, y);
  scale(random(0.2, 0.6));
  rotate(random(-PI/6, PI/6));
  tint(random(0,10), random(51, 204), 255);
  image(heart, 0, 0);
}

奥行き感を出す

PImage heart;

void setup() {
  size(500, 500);
  colorMode(HSB);
  background(0);
  smooth();
  heart = loadImage("heart.png"); //ハート画像の読み込み
  imageMode(CENTER);
  noLoop();
}

void draw() {
  //奥
  for (int i = 0; i < 320; i++) {
    pushMatrix();
    transformHeart(random(width), random(80, 320), random(0.1, 0.2));
    popMatrix();
  }
  filter(BLUR, 2);
  //中間
  for (int i = 0; i < 240; i++) {
    pushMatrix();
    transformHeart(random(width), random(100, 300), random(0.2, 0.4));
    popMatrix();
  }
  filter(BLUR, 1);
  //手前
  for (int i = 0; i < 40; i++) {
    pushMatrix();
    transformHeart(random(width), random(160, 240), random(0.4, 0.6));
    popMatrix();
  }
}

//ハートをランダムに回転、縮小、色づけする関数（ハートの座標, 大きさを引数にする）
void transformHeart(float x, float y, float s) {
  translate(x, y);
  scale(s);
  rotate(random(-PI/6, PI/6));
  tint(random(0,10), random(51, 204), 255);
  image(heart, 0, 0);
}

特定の形の範囲で、画像をランダムに配置する

PImage heart;

void setup() {
  size(500, 500);
  colorMode(HSB);
  background(0);
  smooth();
  heart = loadImage("heart.png"); //ハート画像の読み込み
  imageMode(CENTER);
  noLoop();
}

void draw() {
  //画面の真ん中に大きくハートを描く
  pushMatrix();
  translate(width/2, height/2);
  scale(3.0);
  image(heart, 0, 0);
  filter(BLUR, 2); //少しぼかして境界の色の変化を緩やかにする
  popMatrix();
  //画面の色情報を読み込む（ハートの形を覚える）
  loadPixels();
  //画面をリセット（黒く塗りつぶす）
  background(0);
  //ランダムに点を選び色情報を調べ、明るい色ならば（ハートの形の内側ならば）、その場所にハートを描く
  for (int i = 0; i < 5000 ; i++) {
    int x = int(random(width));
    int y = int(random(height));
    int pos = y*width + x;
    color c = pixels[pos]; //loadPixels()で覚えた画面（ハートの形が描かれた画面）の色情報を代入する
    if(brightness(c) > 204) {
      pushMatrix();
      float heartScale = map(brightness(c), 204, 255, 0.1, 0.3); //点の明るさに応じてハートの大きさを設定（境界付近は小さくなる）
      transformHeart(x, y, heartScale);
      popMatrix();
    }
  }
}

//ハートをランダムに回転、縮小、色づけする関数（ハートの座標, 大きさを引数にする）
void transformHeart(float x, float y, float s) {
  translate(x, y);
  scale(s);
  rotate(random(-PI/6, PI/6));
  tint(random(0,10), random(51, 204), 255);
  image(heart, 0, 0);
}

Adobe Illustrator で作成した画像を Processing で利用したい人のために、手順を解説する（※SVG形式を利用する方法は後期に解説する）。

• Adobe Illustrator で素材を作成
• 書き出し（背景が透過のPNG形式）
• フォトショップでトリミング、保存

解説に利用した Adobe Illustrator のバージョンは「CS3」なので、バージョンの違いにより用語の違いがある場合がある。

Adobe Photoshop で作成した素材を利用したい場合は、メニューの「ファイル ＞ Webおよびデバイス用に保存」でPNG形式を選択し、保存する。

Continue reading

期末課題テーマ

群れ

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

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

課題概要

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

スケジュール

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

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

制作条件

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

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つ描く（関数を使って）

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

練習

• ウィンドウサイズを幅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));
  fill(random(0, 90), 255, 255, 51);
  float d = random(5, 50);
  rect(0, 0, d, d);
  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");

println(photo2.width); //画像の幅をコンソールに表示
println(photo2.height); //画像の高さをコンソールに表示

image(photo2, (width - photo2.width) / 2, (height - photo2.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アカウントが必要となる。4年生以上で未発行の者はサポート室に申請して発行してもらうこと。

if〜else 条件分岐命令

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

int x = 1;
if (x > 0) background(255, 0, 0); //xが0よりも大きいならば、背景色を赤にする

条件式

== 左辺が右辺に等しい

「変数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

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

「x座標が3の倍数のときには赤い線を、3の倍数でないときにはオレンジの線を描く」

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

for(int i = 0; i < width; i++){
  //条件に従って色の設定をする
  if(i % 3 == 0){
    stroke(0, 99, 99); //赤
  }else{
    stroke(10, 99, 99); //オレンジ
  }
  //線を描く
  line(i, 0, i, height);
}

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

「x座標が3の倍数のときには赤い線を、3で割って1余る数のときにはオレンジの線を、それら以外の場合は黒い線を描く」

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

for(int i = 0; i < width; i++){
  //条件に従って色の設定をする
  if(i % 3 == 0){
    stroke(0, 99, 99); //赤
  }else (i % 3 == 1){
    stroke(10, 99, 99); //オレンジ
  }else{
    stroke(0); //黒
  }
  //線を描く
  line(i, 0, i, height);
}

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

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

for(int i = 0; i < width; i++){
  //条件に従って色の設定をする
  switch(i % 5){
    case 0:
      stroke(0, 99, 99); //赤
      break;
    case 1:
      stroke(10, 99, 99); //オレンジ
      break;
    case 2:
      stroke(20, 99, 99); //黄
      break;
    default: //3,4のとき
      stroke(30, 99, 99); //緑
      break;
  }
  //線を描く
  line(i, 0, i, height);
}

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

for(int i = 0; i< width / 5; i++){
  //条件に従って色の設定をする
  switch(i % 5){
    case 0:
      fill(0, 99, 99); //赤
      break;
    case 1:
      fill(10, 99, 99); //オレンジ
      break;
    case 2:
      fill(20, 99, 99); //黄
      break;
    default: //3,4のとき
      fill(30, 99, 99); //緑
      break;
  }
  //矩形を描く
  rect(i*5, 0, 5, height);
}

演習

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

size(200, 200);
colorMode(HSB, 100);
stroke(0, 99, 99);

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

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

• x座標が3のときだけ、赤い線を描く
• x座標が3でないときだけ、赤い線を描く
• x座標が3または33のときだけ、赤い線を描く
• x座標が3の倍数のときだけ、赤い線を描く
• x座標が3の倍数かつ7の倍数のときだけ、赤い線を描く

「x座標が3または33のときだけ、赤い線を描く」

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

for(int i = 0; i < width; i++){
  if(i == 3 || i == 33){//iが3,33のときだけ以下を実行
    line(i, 0, i, height);
  }
}

「x座標が3の倍数のときだけ、赤い線を描く」

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

for(int i = 0; i < width; i++){
  if(i % 3 == 0){//iが3の倍数のときだけ以下を実行
    line(i, 0, i, height);
  }
}

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

まとめ

制御

条件

• 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つ描く

繰り返しを繰り返す

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

for文の中にfor文を書くことができる

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);
colorMode(RGB,100);
background(99);

for(int i=0; i<100; i++){
  stroke(0);
  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()

[おさらい] 色を使う

練習1: 国旗を描く

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

練習2: 背景色に黄を指定する

• RGBで指定
• HSBで指定

数値と計算式

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

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)

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

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

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

[おさらい] Processingで描く

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

練習

point() で絵文字を描く

↓拡大図

//左目
point(1, 1);
point(3, 1);
point(0, 2);
point(2, 2);
point(4, 2);
point(0, 3);
point(4, 3);
point(1, 4);
point(3, 4);
point(2, 5);

//右目
point(1+7, 1);
point(3+7, 1);
point(0+7, 2);
point(2+7, 2);
point(4+7, 2);
point(0+7, 3);
point(4+7, 3);
point(1+7, 4);
point(3+7, 4);
point(2+7, 5);

//口
point(3, 7);
point(4, 7);
point(5, 7);
point(6, 7);
point(7, 7);
point(8, 7);
point(3, 8);
point(8, 8);
point(4, 9);
point(7, 9);
point(5, 10);
point(6, 10);

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

まとめ

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

構造

• ウィンドウのサイズを指定する 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/

Processingの特徴

• 短いソースコードで動いてくれる
• ActionScript, javascript, C++に、Processingライクに記述できるライブラリがある
  • Processingのソースコードをもとに（少し改変することで）、iPhoneアプリをつくることもできる

Processingを使った作品の紹介

• Exhibition Archives \ Processing.org
• deprocess | ben fry
• Solar, with lyrics. on Vimeo
• YouTube - d.v.dはDVDじゃありません
• iPorcessing

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

• HTML5 Canvas and Audio Experiment
• BallDroppings

Processingの開発環境

• Environment (IDE) \ Processing.org

前提知識

コンピュータの座標空間

• Drawing \ Processing.org

Processingで描く

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

課題

→ 課題の提出窓口 （要ログイン）