<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Processing 学習ノート</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/" />
    <link rel="self" type="application/atom+xml" href="http://www.d-improvement.jp/learning/processing/atom.xml" />
    <id>tag:www.d-improvement.jp,2010-04-18:/learning/processing//2</id>
    <updated>2011-12-10T07:09:03Z</updated>

    <subtitle>「メディア制作a,b」サポートブログ。</subtitle>

    <generator uri="http://www.sixapart.com/movabletype/">Movable Type 5.01</generator>

<entry>
    <title>b-11 3Dの座標を使う</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-b/11.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.282</id>

    <published>2011-12-12T05:40:00Z</published>
    <updated>2011-12-10T07:09:03Z</updated>

    <summary>3Dの回転（x軸, y軸, z軸） 2Dの回転をもとに動きを付けてみる void...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-b" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2>3Dの回転（x軸, y軸, z軸）</h2>

<p>2Dの回転をもとに動きを付けてみる</p>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=47850&width=100&height=100&border=true"></iframe>

<pre><code>void setup() {
  size(100, 100);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotate(frameCount*PI/60);
  rect(0, 0, width/2, height/2);
}
</code></pre>

<h3>x軸 <strong>rotateX</strong></h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=47851&width=100&height=100&border=true"></iframe>

<pre><code>void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateX(frameCount*PI/60);
  rect(0, 0, width/2, height/2);
}
</code></pre>

<h3>y軸 <strong>rotateY</strong></h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=47852&width=100&height=100&border=true"></iframe>

<pre><code>void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateY(frameCount*PI/60);
  rect(0, 0, width/2, height/2);
}
</code></pre>

<h4>矩形の描画位置を変更した場合</h4>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=47855&width=100&height=100&border=true"></iframe>

<pre><code>void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateY(frameCount*PI/60);
  rect(width/2, 0, width/2, height/2);
}
</code></pre>

<h3>z軸 <strong>rotateZ</strong></h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=47853&width=100&height=100&border=true"></iframe>

<pre><code>void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateZ(frameCount*PI/60);
  rect(0, 0, width/2, height/2);
}
</code></pre>

<h3>x軸, y軸の両方</h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=47854&width=100&height=100&border=true"></iframe>

<pre><code>void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateX(frameCount*PI/60);
  rotateY(frameCount*PI/60);
  rect(0, 0, width/2, height/2);
}
</code></pre>

<h2>3Dの移動</h2>

<p>z軸方向に移動したい場合は、translate関数の引数を1つ追加する。</p>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=47856&width=100&height=100&border=true"></iframe>

<pre><code>void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0); 
  translate(width*2/5, height/2);
  rotateY(PI/6);
  for (int i = 0; i &lt; 5; i++) {
    pushMatrix();
    translate(0, 0, i*10);
    rotateZ(frameCount*(i+1)*PI/600);
    fill(255, 51);
    rect(0, 0, width/2, height/2);
    popMatrix();
  }
}
</code></pre>

<h2>3Dのオブジェクトを描画する</h2>

<h3>直方体 <strong>box</strong></h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=47858&width=100&height=100&border=true"></iframe>

<pre><code>void setup() {
  size(100, 100, P3D);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateY(frameCount*PI/60);
  box(40, 30, 20); // 幅, 高さ, 奥行きの順。引数を1つにすると立方体になる。
}
</code></pre>

<h3>球 <strong>sphere</strong></h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=47859&width=100&height=100&border=true"></iframe>

<p><strong>lights</strong>関数を用いると光が当たっている状態をシミュレートできる。</p>

<pre><code>void setup() {
  size(100, 100, P3D);
}

void draw() {
  background(0);
  lights();
  translate(width/2, height/2);
  rotateY(frameCount*PI/120);
  translate(50, 0);
  noStroke();
  sphere(10); //半径30pxの球
}
</code></pre>
]]>
        

    </content>
</entry>

<entry>
    <title>b-10 オブジェクト指向プログラミング (OOP)</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-b/10.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.280</id>

    <published>2011-12-05T05:40:00Z</published>
    <updated>2011-12-09T08:58:50Z</updated>

    <summary>オブジェクト指向プログラミングとは？ → オブジェクト指向プログラミング - W...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-b" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<p>オブジェクト指向プログラミングとは？ → <a href="http://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">オブジェクト指向プログラミング - Wikipedia</a></p>

<h2>オブジェクト指向プログラミングでプログラムを書く</h2>

<p>円を描くプログラムを、オブジェクト指向プログラミングで書いてみる。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/5191044948/" title="oop1 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4083/5191044948_a5a9f3911e_o.png" width="100" height="100" alt="oop1" /></a></p>

<h3>step. 0 これまでの書き方</h3>

<pre><code>float x, y, diameter; // x座標, y座標, 直径

void setup() {
  x = 25;
  y = 50;
  diameter = 30;
}

void draw() {
  ellipse(x, y, diameter, diameter);
}
</code></pre>

<h3>step. 1 クラスを定義する</h3>

<pre><code>Spot sp; //オブジェクトを宣言

void setup() {
  sp = new Spot(); //オブジェクトを生成（構築）
  sp.x = 25; //属性（プロパティ）に値を代入。以下同様
  sp.y = 50;
  sp.diameter = 30;
}

void draw() {
  ellipse(sp.x, sp.y, sp.diameter, sp.diameter);
}

//Spotクラスを定義
class Spot {
  //属性を定義
  float x, y, diameter; // x座標, y座標, 直径
}
</code></pre>

<p>※「Spot」は、関数を自分で定義したときのように、適切な名前を考えて付ける。その属性も同様。</p>

<h3>step. 2 クラスにメソッド（method）の定義を追加する</h3>

<pre><code>Spot sp; //オブジェクトを宣言

void setup() {
  sp = new Spot(); //オブジェクトを生成（構築）
  sp.x = 25; //属性（プロパティ）に値を代入。以下同様
  sp.y = 50;
  sp.diameter = 30;
}

void draw() {
  sp.display();
}

//Spotクラスを定義
class Spot {
  //属性を定義
  float x, y, diameter; // x座標, y座標, 直径

  //表示するメソッドを定義
  void display() {
    ellipse(x, y, diameter, diameter);
  }
}
</code></pre>

<h3>step. 3 クラスにコンストラクタ（constructor）の定義を追加する</h3>

<pre><code>Spot sp; //オブジェクトを宣言

void setup() {
  sp = new Spot(25, 50, 30); //オブジェクトを生成（構築）
}

void draw() {
  sp.display();
}

//Spotクラスを定義
class Spot {
  //属性を定義
  float x, y, diameter; // x座標, y座標, 直径

  //コンストラクタを定義
  Spot(float _x, float _y, float _diameter) {
    x = _x;
    y = _y;
    diameter = _diameter;
  }

  //表示するメソッドを定義
  void display() {
    ellipse(x, y, diameter, diameter);
  }
}
</code></pre>

<h3>step. 4 クラスに移動のメソッドを追加し、アニメーションにする</h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=15823&width=100&height=100&border=true"></iframe>

<pre><code>Spot sp; //オブジェクトを宣言

void setup() {
  sp = new Spot(25, 50, 30, 1); //オブジェクトを生成（構築）
}

void draw() {
  background(204);
  sp.move();
  sp.display();
}

//Spotクラスを定義
class Spot {
  //属性を定義
  float x, y, diameter, speed; // x座標, y座標, 直径, 速さ

  //コンストラクタを定義
  Spot(float _x, float _y, float _diameter, float _speed) {
    x = _x;
    y = _y;
    diameter = _diameter;
    speed = _speed;
  }

  //移動するメソッドを定義
  void move() {
    x += speed;
    if (x &gt; width + diameter/2) x = -diameter/2;
  }

  //表示するメソッドを定義
  void display() {
    ellipse(x, y, diameter, diameter);
  }
}
</code></pre>

<h2>クラス定義を別ファイルで管理する</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/5191732978/" title="manage-class1-1 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4131/5191732978_ca16327e3b_o.png" width="507" height="652" alt="manage-class1-1" /></a></p>

<p><a href="http://www.flickr.com/photos/mathatelle/5191733008/" title="manage-class2-1 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4104/5191733008_ec5b89124f_o.png" width="678" height="272" alt="manage-class2-1" /></a></p>

<p><a href="http://www.flickr.com/photos/mathatelle/5191138061/" title="manage-class3-1 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4089/5191138061_a4e512f198_o.png" width="500" height="450" alt="manage-class3-1" /></a></p>

<p><a href="http://www.flickr.com/photos/mathatelle/5191733086/" title="manage-class4-1 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4108/5191733086_00421ac736_o.png" width="500" height="450" alt="manage-class4-1" /></a></p>

<p>※以降、Spot.pde ファイルの内容は同じなので省略する</p>

<h2>異なる属性を持つ複数のオブジェクトを生成（インスタンス化）する</h2>

<h3>2個</h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=15826&width=100&height=100&border=true"></iframe>

<pre><code>Spot sp1, sp2; //オブジェクトを宣言

void setup() {
  sp1 = new Spot(25, 50, 30, 1); //sp1 を生成
  sp2 = new Spot(75, 80, 10, 2); //sp2 を生成
}

void draw() {
  background(204);
  sp1.move();
  sp2.move();
  sp1.display();
  sp2.display();
}
</code></pre>

<h3>60個（配列を使って）</h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=15828&width=100&height=100&border=true"></iframe>

<pre><code>Spot[] sp = new Spot[60];

void setup() {
  for (int i = 0; i &lt; sp.length; i++) {
    sp[i] = new Spot(random(width), random(height), random(5,30), random(0.5,3));
  }
}

void draw() {
  background(204);
  for (int i = 0; i &lt; sp.length; i++) {
    sp[i].move();
    sp[i].display();
  }
}
</code></pre>

<h2>クラスを継承し、拡張された属性または機能を拡張した子クラスを定義する</h2>

<h3>Spot クラスを継承し、色を指定できる ColorSpot クラスを定義する</h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=15847&width=100&height=100&border=true"></iframe>

<pre><code>ColorSpot[] sp = new ColorSpot[60];

void setup() {
  colorMode(HSB);
  for (int i = 0; i &lt; sp.length; i++) {
    sp[i] = new ColorSpot(
      random(width), 
      random(height), 
      random(5,30), 
      random(0.5,3), 
      color(random(255), 255, 255)
    );
  }
}

void draw() {
  background(204);
  for (int i = 0; i &lt; sp.length; i++) {
    sp[i].move();
    sp[i].display();
  }
}
</code></pre>

<h4>ColorSpot.pde</h4>

<pre><code>//Spotクラスを継承し、ColorSpotクラスを定義
class ColorSpot extends Spot {
  //属性を定義
  color col; // 色

  //コンストラクタを定義
  ColorSpot(float _x, float _y, float _diameter, float _speed, color _col) {
    super(_x, _y, _diameter, _speed); //親クラス(Spot)のコンストラクタを呼びだす
    col = _col;
  }

  //移動するメソッドを定義
  void move() {
    super.move(); //親クラス(Spot)のメソッドを呼びだす
  }

  //表示するメソッドを定義
  void display() {
    fill(col);
    super.display();
  }
}
</code></pre>

<h4>Spot.pde</h4>

<pre><code>//Spotクラスを定義
class Spot {
  //属性を定義
  float x, y, diameter, speed; // x座標, y座標, 直径, 速さ

  //コンストラクタを定義
  Spot(float _x, float _y, float _diameter, float _speed) {
    x = _x;
    y = _y;
    diameter = _diameter;
    speed = _speed;
  }

  //移動するメソッドを定義
  void move() {
    x += speed;
    if (x &gt; width + diameter/2) x = -diameter/2;
  }

  //表示するメソッドを定義
  void display() {
    ellipse(x, y, diameter, diameter);
  }
}
</code></pre>

<h2>移動ではなくサイズを変更すると、異なる表現ができる</h2>

<iframe width="428" height="480" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=47458&width=400&height=400&border=true"></iframe>

<h2>シンプルな時計をOOPでつくる</h2>

<iframe width="268" height="320" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=16169&width=240&height=240&border=true"></iframe>

<iframe width="268" height="320" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=16167&width=240&height=240&border=true"></iframe>
]]>
        

    </content>
</entry>

<entry>
    <title>b-09 ライブラリを利用する</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-b/09.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.281</id>

    <published>2011-11-28T05:40:00Z</published>
    <updated>2011-11-26T12:29:46Z</updated>

    <summary>Processingは「ライブラリ」という仕組みで、その機能を拡張することができ...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-b" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<p>Processingは「ライブラリ」という仕組みで、その機能を拡張することができる。以前の授業でライブカメラを使用した際には、videoライブラリというライブラリを利用した。</p>

<p>→ <a href="http://processing.org/reference/libraries/">Processing公式サイトで紹介されているライブラリ一覧（英語）</a></p>

<h2>音を扱う</h2>

<p>Processing で音を扱う場合、標準で用意されている <strong><a href="http://code.compartmental.net/tools/minim/">Minim</a></strong> を利用するのが一般的である。以下の素材を利用して、Processingで音を扱ってみよう。</p>

<p>※<a href="http://dl.dropbox.com/u/446018/for-minum.zip">音声素材のダウンロード</a></p>

<h3>サンプルファイルを再生する</h3>

<p>各種ドラム音のような、サンプルファイルは <strong>AudioSample クラス</strong>を利用する。</p>

<pre><code>import ddf.minim.*;

Minim minim;
AudioSample kick;
AudioSample snare;

void setup() {
  minim = new Minim(this);
  kick = minim.loadSample("kick.wav", 2048);
  snare = minim.loadSample("snare.wav", 2048);
}

void draw() {
}

void keyPressed() {
  if (key == 'k') kick.trigger();
  if (key == 's') snare.trigger();
}

void stop() {
  kick.close();
  snare.close();
  minim.stop();

  super.stop();
}
</code></pre>

<h3>サイン波を生成し、マウス位置に応じて音程・パンを調整する</h3>

<pre><code>import ddf.minim.*;
import ddf.minim.signals.*;

Minim minim;
AudioOutput out;
SineWave sine;

void setup() {
  minim = new Minim(this);
  out = minim.getLineOut(Minim.STEREO);
  sine = new SineWave(440, 0.5, out.sampleRate());
  sine.portamento(200);
  out.addSignal(sine);
}

void draw() {
}

void mouseMoved() {
  float freq = map(mouseY, 0, height, 1500, 60);
  sine.setFreq(freq);
  float pan = map(mouseX, 0, width, -1, 1);
  sine.setPan(pan);
}

void stop() {
  out.close();
  minim.stop();

  super.stop();
}
</code></pre>

<h3>一般的な音楽ファイルを再生する</h3>

<p>ミュージシャンの楽曲のような、一般的な音楽ファイル（再生時間が長い→ファイル容量が大きい）ものは <strong>AudioPlayer クラス</strong>を利用する。</p>

<p>利用した音楽ファイル: <a href="http://ccmixter.org/files/wired/78">ccMixter - Wataridori 2 - Cornelius</a></p>

<pre><code>import ddf.minim.*;

Minim minim;
AudioPlayer player;

void setup() {
  minim = new Minim(this);
  player = minim.loadFile("http://ccmixter.org/contests/freestylemix/Cornelius%20-%20Wataridori%202.mp3", 2048);
  player.play(); //再生
}

void draw() {
}

void stop() {
  player.close();
  minim.stop();

  super.stop();
}
</code></pre>

<h3>mp3ファイルのメタ情報を表示する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/5192179276/" title="Minim AudioMetaData by mathatelle, on Flickr"><img src="http://farm6.static.flickr.com/5241/5192179276_71210c2fdd_o.png" width="510" height="138" alt="Minim AudioMetaData" /></a></p>

<pre><code>import ddf.minim.*;

Minim minim;
AudioPlayer player;
AudioMetaData meta;

void setup() {
  minim = new Minim(this);
  player = minim.loadFile("http://ccmixter.org/contests/freestylemix/Cornelius%20-%20Wataridori%202.mp3", 2048);
  player.play(); //再生
  meta = player.getMetaData();
  //コンソールに音声データのメタ情報を表示
  println("アルバム名: " + meta.album());
  println("曲名: " + meta.title());
  println("アーティスト名: " + meta.author());
}

void draw() {
}

void stop() {
  player.close();
  minim.stop();

  super.stop();
}
</code></pre>

<p>※そのほかAudioPlayer にできることはリファレンスを参照 → <a href="http://code.compartmental.net/minim/javadoc/ddf/minim/AudioPlayer.html">AudioPlayer</a></p>

<h3>物理シミュレーション</h3>

<p>「物が落ちる」といった物理現象を簡単にシミュレートするためのライブラリで、最も有名なのが<strong>Box2D</strong>であり、このBox2DをProcessingで利用できるようにしたものが<strong>BoxWrap2D</strong>である。</p>

<h3>インストール</h3>

<ul>
<li>BoxWrap2Dをダウンロード
<ul>
<li><a href="http://jbox2d.nfshost.com/processing/">BoxWrap2D</a>ページ内の「Get the library」をクリックしてダウンロード</li>
<li>解凍したフォルダ「boxwrap2d」を、次のフォルダ内に配置：書類 ＞ Processing ＞ libraries ※Macの場合</li>
</ul></li>
<li>Processing を起動していた場合は、再起動する</li>
</ul>

<h3>Box2D を使ってみる</h3>

<ul>
<li>「画面をクリックすると、マウスポインタの位置から円が落ちる」プログラムを書いてみる</li>
</ul>

<iframe width="508" height="400" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=6523&width=480&height=320"></iframe>

<pre><code>import org.jbox2d.p5.*;

Physics physics;

void setup() {
  size(500, 500);
  frameRate(60);
  physics = new Physics(this, width, height);
  physics.setDensity(1.0); //重さ(密度)
}

void draw() {
  background(204);
}

void mousePressed() {
  physics.createCircle(mouseX, mouseY, 15);
}
</code></pre>

<h3>反発係数を設定する</h3>

<pre><code>import org.jbox2d.p5.*;

Physics physics;

void setup() {
  size(480, 320);
  frameRate(60);
  physics = new Physics(this, width, height);
  physics.setDensity(1.0); //重さ(密度)
  physics.setRestitution(0.9); //反発係数
}

void draw() {
  background(204);
}

void mousePressed() {
  physics.createCircle(mouseX, mouseY, 10);
}
</code></pre>

<h3>摩擦係数を設定する</h3>

<pre><code>import org.jbox2d.p5.*;

Physics physics;

void setup() {
  size(480, 320);
  frameRate(60);
  physics = new Physics(this, width, height);
  physics.setDensity(1.0); //重さ(密度)
  physics.setRestitution(0.2); //反発係数
  physics.setFriction(0.0); //摩擦係数
}

void draw() {
  background(204);
}

void mousePressed() {
  float d = 5;
  physics.createRect(mouseX - d * 2, mouseY - d, mouseX + d * 2, mouseY + d);
}
</code></pre>
]]>
        

    </content>
</entry>

<entry>
    <title>b-07 時間を使う</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-b/07.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.279</id>

    <published>2011-11-14T05:40:00Z</published>
    <updated>2011-11-12T05:20:09Z</updated>

    <summary>hour, minute, second 時、分、秒 コンソールに日時を表示する...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-b" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2><strong>hour, minute, second</strong> 時、分、秒</h2>

<h3>コンソールに日時を表示する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4074593515/" title="1b-06 時間 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2531/4074593515_54a26ce2d3_o.png" width="365" height="600" alt="1b-06 時間" /></a></p>

<pre><code>void setup() {
  frameRate(1); //フレームレートを1に設定（毎秒1回draw関数を実行）
}

void draw() {
  int h = hour(); //時
  int m = minute(); //分
  int s = second(); //秒
  println(h + ":" + m + ":" + s); //コンソールに日時を表示
}
</code></pre>

<h3>コンソールに日時を表示する（分と秒は2ケタで表示）</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4074593579/" title="1b-06 時間 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2515/4074593579_5664bac28b_o.png" width="365" height="600" alt="1b-06 時間" /></a></p>

<pre><code>void setup() {
  frameRate(1);
}

void draw() {
  int h = hour();
  int m = minute();
  int s = second();
  String t = h + ":" + nf(m, 2) + ":" + nf(s, 2);
  println(t);
}
</code></pre>

<h3>ウィンドウに日時を表示する</h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=13601&width=100&height=100"></iframe>

<pre><code>void setup() {
  textSize(18);
  textAlign(CENTER);
  frameRate(1);
}

void draw() {
  background(0);
  int h = hour();
  int m = minute();
  int s = second();
  String t = h + ":" + nf(m, 2) + ":" + nf(s, 2);
  //println(t);
  text (t, 50, 55);
}
</code></pre>

<h2>時間を視覚化する</h2>

<h3>長方形の長さで、時計を表現する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4082784780/" title="1b-06-3 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3504/4082784780_2afda7eb5f_o.png" width="240" height="240" alt="1b-06-3" /></a></p>

<p>19:45:06</p>

<pre><code>void setup() {
  size(240, 240);
  frameRate(1);
}

void draw() {
  background(204);
  int h = hour();
  int m = minute();
  int s = second();
  //長方形の長さで時計を表現する
  rect(0, 0, h*10, height/3); 
  rect(0, height/3, m*4, height/3);
  rect(0, height*2/3, s*4, height/3);
}
</code></pre>

<h3>三針時計をつくる</h3>

<iframe width="268" height="320" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=13602&width=240&height=240"></iframe>

<p>秒針から作ると、やりやすい。</p>

<pre><code>void setup() {
  size(240, 240);
  frameRate(1);
  smooth();
}

void draw() {
  background(204);
  noStroke();
  ellipse (width/2, height/2, 200, 200);
  int h = hour();
  int m = minute();
  int s = second();
  stroke(0);
  //時針
  strokeWeight(4);
  pushMatrix();
  translate(width/2, height/2);
  rotate((h%12+m/60.0)*TWO_PI/12);
  line(0, 0, 0, -60);
  popMatrix();
  //分針
  strokeWeight(2);
  pushMatrix();
  translate(width/2, height/2);
  rotate((m+s/60.0)*TWO_PI/60);
  line(0, 0, 0, -80);
  popMatrix();
  //秒針
  strokeWeight(1);
  pushMatrix();
  translate(width/2, height/2);
  rotate(s*TWO_PI/60);
  line(0, 0, 0, -90);
  popMatrix();
}
</code></pre>

<p>このプログラムでは、線を rotate() で回転することにより時計の針を描画している。以下のように三角関数を利用して針を描画することも可能。</p>

<pre><code>void setup() {
  size(240, 240);
  frameRate(1);
  smooth();
}

void draw() {
  background(204);
  noStroke();
  ellipse (120, 120, 200, 200);
  int s = second();
  int m = minute();
  int h = hour();
  stroke(0);
  strokeWeight(4);
  line(120, 120 , 60 * cos((h + m/60.0) % 12 * TWO_PI / 12 - HALF_PI) + 120, 60 * sin((h + m/60.0) % 12 * TWO_PI / 12 - HALF_PI) + 120); //時針の描画
  strokeWeight(2);
  line(120, 120 , 80 * cos((m + s/60.0) * TWO_PI / 60 - HALF_PI) + 120, 80 * sin((m + s/60.0) * TWO_PI / 60 - HALF_PI) + 120); //分針の描画
  strokeWeight(1);
  line(120, 120 , 90 * cos(s * TWO_PI / 60 - HALF_PI) + 120, 90 * sin(s * TWO_PI / 60 - HALF_PI) + 120); //秒針の描画
}
</code></pre>

<h2>練習</h2>

<ul>
<li>時間に関する関数を利用し、時間（秒）に反応したアニメーションを作成する</li>
</ul>

<h2>参考資料：時計を用いたビジュアル・インタラクティブ表現</h2>

<ul>
<li><a href="http://vimeo.com/15452594">HIKARI NO TOKEI</a></li>
<li><a href="http://scr.sc/products/dropclock/">SCR | DROPCLOCK by tha</a></li>
<li><a href="http://scr.sc/products/crashclock/">SCR | CRASHCLOCK by tha</a></li>
<li><a href="http://yugop.com/ver3/index.asp?id=3">INDUSTRIOUS CLOCK - SURFACE.YUGOP.COM || MONO*crafts 3.0</a></li>
<li><a href="http://yugop.com/ver3/index.asp?id=29">CLOCKBLOCK1.0 - SURFACE.YUGOP.COM || MONO*crafts 3.0</a></li>
<li><a href="http://www.uniqlo.jp/uniqlock/">UNIQLOCK</a></li>
</ul>

<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="424" height="278" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"><param name="allowScriptAccess" value="always" /><param name="movie" value="http://www.uniqlo.jp/uniqlock/swf/blog_large.swf?user_id=gysxOBGLZl444fIg" /><param name="base" value="." /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="http://www.uniqlo.jp/uniqlock/swf/blog_large.swf?user_id=gysxOBGLZl444fIg" width="424" height="278" allowScriptAccess="always" base = "." quality="high" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" /></object></p>
]]>
        

    </content>
</entry>

<entry>
    <title>b-06 ライブカメラを使う</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-b/06.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.278</id>

    <published>2011-11-07T05:40:00Z</published>
    <updated>2011-11-01T14:55:27Z</updated>

    <summary>Processing でビデオ映像を扱う場合は、ライブラリを利用する。今回は標準...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-b" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<p>Processing でビデオ映像を扱う場合は、ライブラリを利用する。今回は標準で用意されている <strong>Video</strong> ライブラリを利用する。</p>

<h2>ライブカメラの映像を表示する</h2>

<h3>そのまま表示する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4180018215/" title="sketch_1b_10_1 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2590/4180018215_c756b6b601.jpg" width="480" height="320" alt="sketch_1b_10_1" /></a></p>

<pre><code>import processing.video.*; // Videoを扱うライブラリをインポート
Capture camera; // ライブカメラの映像をあつかうCapture型の変数

void setup() {
  size(480, 320);
  camera = new Capture(this, width, height, 12); // Captureオブジェクトを生成
}

void draw() {
  image(camera, 0, 0); // 画面に表示
} 

//カメラの映像が更新されるたびに、最新の映像を読み込む
void captureEvent(Capture camera) {
  camera.read();
}
</code></pre>

<h3>同じ映像を4分割で表示する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4180018279/" title="sketch_1b_10_2 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4005/4180018279_50715a7934.jpg" width="480" height="320" alt="sketch_1b_10_2" /></a></p>

<pre><code>import processing.video.*;
Capture camera;

void setup() {
  size(480, 320);
  camera = new Capture(this, width/2, height/2, 12); // 1/2サイズでCaptureオブジェクトを生成
}

void draw() {
  image(camera, 0, 0); // 画面に表示
  image(camera, width/2, 0); // 画面に表示
  image(camera, 0, height/2); // 画面に表示
  image(camera, width/2, height/2); // 画面に表示
} 

void captureEvent(Capture camera) {
  camera.read();
}
</code></pre>

<h3>一般化して n*n 分割で表示する</h3>

<pre><code>import processing.video.*;
Capture camera;
int d = 4; //画面を4*4で分割する

void setup() {
  size(480, 320);
  camera = new Capture(this, width/d, height/d, 12);
}

void draw() {
  for (int j = 0; j &lt; d ; j++) {
    for (int i = 0; i &lt; d ; i++) {
      image(camera, i*width/d, j*height/d);
    }
  }
} 

void captureEvent(Capture camera) {
  camera.read();
}
</code></pre>

<h3>色情報を取得して再描画する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4180018327/" title="sketch_1b_10_3 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2641/4180018327_242575d31d.jpg" width="480" height="320" alt="sketch_1b_10_3" /></a></p>

<pre><code>import processing.video.*;
Capture camera;

void setup() {
  size(480, 320);
  camera = new Capture(this, width, height, 12);
  smooth();
  noStroke();
}

void draw() {
  background(0);
  camera.loadPixels(); //カメラ画像のpixel情報を読み込み
  int d = 10; //円の直径を定義
  // ライブカメラの映像から、円の直径の間隔ごとに、色情報を取得し、その色で円を描く
  for(int y = d / 2 ; y &lt; height ; y += d) {
    for(int x = d / 2 ; x &lt; width ; x += d) {
      fill(camera.pixels[y * width + x]);
      ellipse(x, y, d, d);
    }
  }
} 

void captureEvent(Capture camera) {
  camera.read();
}
</code></pre>

<h3>練習</h3>

<ul>
<li>円の大きさをランダムにしてみる</li>
<li>異なる図形や文字で描画してみる</li>
<li>色情報を加工してみる</li>
</ul>

<!--
### ライブカメラの映像を表示する（差分を調べる）

    import processing.video.*;
    Capture camera;
    PImage pCamera;

    void setup() {
      size(480, 320);
      camera = new Capture(this, width, height, 12);
      pCamera = new PImage(width, height);
    }

    void draw() {
      pCamera.loadPixels();
      tint(255,64);
      image(camera,0,0);

      int d = 40;
      for(int y=d/2 ; y < height ; y+=d/2) {
        for(int x=d/2 ; x < width ; x+=d/2) {
          int pos = y * width + x;
          color c = camera.pixels[pos];
          float diff = abs(brightness(pCamera.pixels[pos])-brightness(camera.pixels[pos]));
          if (diff > 50) {
            fill(c);
            ellipse(x, y, diff/2, diff/2);
          }
        }
      }
      pCamera.copy(camera, 0, 0, width, height, 0, 0, width, height);
    } 
-->

<h2>参考：OpenCV（画像処理ライブラリ）を使う</h2>

<h3>準備：OpenCVのインストール</h3>

<ul>
<li><a href="http://ubaa.net/shared/processing/opencv/">OPENCV \ library</a>
<ul>
<li>OpenCVのインストール</li>
<li>OpenCVの Processing ライブラリを、書類 ＞ Processing ＞ libraries 内に配置</li>
</ul></li>
</ul>

<p>※Mac室では、インストールの権限制限があり、みなさん自身ではインストールができません。利用したい場合は事前に相談ください。</p>

<h3>そのまま表示する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4180781066/" title="sketch_1b_10_5 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2678/4180781066_d7c1ea3178.jpg" width="480" height="320" alt="sketch_1b_10_5" /></a></p>

<pre><code>import hypermedia.video.*; //OpenCVライブラリをインポート
OpenCV opencv; //OpenCV型の変数

void setup() {
  size(480, 320);
  opencv = new OpenCV(this);
  opencv.capture(width, height); ////映像読み込みの初期化
}

void draw() {
  opencv.read(); //映像を読み込む
  image(opencv.image(), 0, 0); //映像を表示
}
</code></pre>

<ul>
<li>videoライブラリを使用するときよりも、コードがシンプルになる</li>
</ul>

<h3>加工して表示する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4180781156/" title="sketch_1b_10_6 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2543/4180781156_0db8f54230.jpg" width="480" height="320" alt="sketch_1b_10_6" /></a></p>

<pre><code>import hypermedia.video.*;
OpenCV opencv;

void setup() {
  size(480, 320);
  opencv = new OpenCV(this);
  opencv.capture(width/2, height/2);
}

void draw() {
  opencv.read();
  //左上
  opencv.convert(OpenCV.GRAY); //グレースケールに変換  
  image(opencv.image(), 0, 0); //画面に表示　左上
  //右上
  opencv.invert(); //色を反転
  image(opencv.image(), width/2, 0); // 画面に表示　右上
  //左下
  opencv.restore(); //オリジナルの映像に戻す
  opencv.flip(OpenCV.FLIP_HORIZONTAL); //映像を水平方向に反転する
  image(opencv.image(), 0, height/2); // 画面に表示　左下
  //右下
  image(opencv.image(OpenCV.SOURCE), width/2, height/2); // 画面に表示　オリジナルの映像　右下
}
</code></pre>

<h3>そのほかOpenCVでできること</h3>

<ul>
<li>顔認識 → <a href="http://ubaa.net/shared/processing/opencv/opencv_cascade.html">OpenCV::cascade() \ language (API)</a></li>
<li>輪郭検出 → <a href="http://ubaa.net/shared/processing/opencv/opencv_blobs.html">OpenCV::blobs() \ language (API)</a></li>
</ul>
]]>
        

    </content>
</entry>

<entry>
    <title>b-05 ピクセルを操作する </title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-b/05.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.277</id>

    <published>2011-10-31T05:40:00Z</published>
    <updated>2011-10-30T06:59:49Z</updated>

    <summary>pixels[] pixels 配列 画面全体またはPImageオブジェクトを1...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-b" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2><strong>pixels[]</strong> pixels 配列</h2>

<ul>
<li>画面全体またはPImageオブジェクトを1次元の配列として表したもの</li>
<li>color型の配列</li>
<li>(x, y)の情報は pixels[y*width + x] で得られる ※下で具体的に解説</li>
<li><strong>loadPixels()</strong> pixelsを読み込み</li>
<li><strong>updatePixels()</strong> pixelsの更新</li>
</ul>

<p><a href="http://www.flickr.com/photos/mathatelle/5150158241/" title="20101106-161835 by mathatelle, on Flickr"><img src="http://farm2.static.flickr.com/1048/5150158241_ff6e613a25_z.jpg" width="521" height="640" alt="20101106-161835" /></a></p>

<ul>
<li>幅10ピクセル、高さ4ピクセルの画面には、40個の点がある。
<ul>
<li>左上から図のように、0から39の番号を割り振りふる。これらが pixels 配列のインデックス（番号）と一致する。</li>
</ul></li>
<li>幅7ピクエル、高さ4ピクセルの画面には、28個の点がある。
<ul>
<li>点(5, 2) の情報は pixels[19] で得ることができる。この19という数は2*7+5（y座標*幅+x座標）で得られる。</li>
</ul></li>
<li>幅100ピクセル、高さ100ピクセルの画面には、10,000個の点がある。</li>
<li>幅480ピクセル、高さ320ピクセルの画面には、153,600個の点がある。
<ul>
<li>これらの膨大な数の<strong>点の色情報</strong>を扱えるようにするのが pixels 配列である。</li>
</ul></li>
</ul>

<h3>例1 画像の色を調べて表示する（カラーピッカー）</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/6293370733/" title="pixels0 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6118/6293370733_5e758c87ef_z.jpg" width="430" height="640" alt="pixels0"></a></p>

<pre><code>PImage myPhoto;

void setup() {
  size(430, 640);
  myPhoto = loadImage("http://dl.dropbox.com/u/446018/processing/mannalisa.jpg"); //画像を読み込み
  noCursor(); //カーソルを非表示
}

void draw() {
  image(myPhoto, 0, 0); //画像を表示
  loadPixels(); //画面全体の色情報を配列pixelsとして読み込む
  //x,y座標に現在のマウスの位置を代入
  int x = mouseX;
  int y = mouseY;
  //マウス位置に縦線・横線を表示
  stroke(255, 51);
  line(x, 0, x, height);
  line(0, y, width, y);
  //マウス位置の色情報を取得し、塗り色に設定
  fill(pixels[y*width + x]);
  //画面左上にマウス位置の色を表示
  stroke(0);
  rect(20, 20, 60, 60);
}
</code></pre>

<h3>例2 画像の色を調べて、図形や文字で再描画する（モザイク）</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/6293956232/" title="pixels1 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6037/6293956232_99f5a90584_z.jpg" width="430" height="640" alt="pixels1"></a> <a href="http://www.flickr.com/photos/mathatelle/6293458155/" title="pixels1 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6059/6293458155_73c3b88bf2_z.jpg" width="430" height="640" alt="pixels1"></a></p>

<h4>マウスを動かして描く</h4>

<pre><code>PImage myPhoto;

void setup() {
  size(430, 640);
  myPhoto = loadImage("http://dl.dropbox.com/u/446018/processing/mannalisa.jpg"); //画像を読み込み
  noStroke();
  smooth();
  background(255);
}

void draw() {
  myPhoto.loadPixels(); //myPhotoに読み込まれた画像の色情報を配列pixelsとして読み込む
  //x,y座標に現在のマウスの位置を代入（x,yの値が画像サイズを超えないようにconstrain関数を利用）
  int x = constrain(mouseX, 0, myPhoto.width-1);
  int y = constrain(mouseY, 0, myPhoto.height-1); 
  //その点の色情報を取得し、塗り色に設定
  fill(myPhoto.pixels[y*width + x]);
  //その点の位置を中心として直径10から20pxの円を描く
  float d = random(10, 20);
  ellipse(x, y, d, d);
}
</code></pre>

<h4>アニメーションでランダムに描く</h4>

<pre><code>PImage myPhoto;
int myPhotoWidth, myPhotoHeight;

void setup() {
  size(430, 640);
  myPhoto = loadImage("http://dl.dropbox.com/u/446018/processing/mannalisa.jpg"); //画像を読み込み
  //画像のサイズを取得し変数に代入
  myPhotoWidth = myPhoto.width;
  myPhotoHeight = myPhoto.height;
  noStroke();
  smooth();
  background(255);
}

void draw() {
  myPhoto.loadPixels(); //myPhotoに読み込まれた画像の色情報を配列pixelsとして読み込む
  //x,y座標をランダムに指定
  int x = int(random(myPhotoWidth));
  int y = int(random(myPhotoHeight));
  //その点の色情報を取得し、塗り色に設定
  fill(myPhoto.pixels[y*width + x]);
  //その点の位置を中心として直径10から20pxの円を描く
  float d = random(10, 20);
  ellipse(x, y, d, d);
}
</code></pre>

<h2>pixels のカラーデータ</h2>

<p>これらを利用すると、さらに詳細な色設定が可能になる。</p>

<ul>
<li><strong>red()</strong> 赤成分の値</li>
<li><strong>green()</strong> 緑成分の値</li>
<li><strong>blue()</strong> 青成分の値</li>
<li><strong>hue ()</strong> 色相の値</li>
<li><strong>saturation()</strong> 彩度の値</li>
<li><strong>brightness()</strong> 輝度の値</li>
<li><strong>alpha()</strong> アルファ値</li>
</ul>

<p><a href="http://www.flickr.com/photos/mathatelle/6294025592/" title="pixels1 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6033/6294025592_a8f538b7ec_z.jpg" width="430" height="640" alt="pixels1"></a></p>

<pre><code>PImage myPhoto;
int myPhotoWidth, myPhotoHeight;

void setup() {
  size(430, 640);
  colorMode(HSB);
  myPhoto = loadImage("http://dl.dropbox.com/u/446018/processing/mannalisa.jpg"); //画像を読み込み
  //画像のサイズを取得し変数に代入
  myPhotoWidth = myPhoto.width;
  myPhotoHeight = myPhoto.height;
  noStroke();
  smooth();
  background(255);
}

void draw() {
  myPhoto.loadPixels(); //myPhotoに読み込まれた画像の色情報を配列pixelsとして読み込む
  //x,y座標をランダムに指定
  int x = int(random(myPhotoWidth));
  int y = int(random(myPhotoHeight));
  //その点の色情報を取得
  color myPhotoColor = myPhoto.pixels[y*width+x];
  //塗り色に設定（色相と明度は変更なし、輝度は0に設定 ...モノクロになる）
  fill(hue(myPhotoColor), 0, brightness(myPhotoColor));
  //その点の位置を中心として直径10から20pxの円を描く
  float d = random(10, 20);
  ellipse(x, y, d, d);
}
</code></pre>

<h2>練習：画像の色を調べて、図形や文字で再描画する（元画像の原形をとどめていなくても良い）</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/6294084660/" title="pixels4 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6117/6294084660_829fbbd2da_z.jpg" width="430" height="640" alt="pixels4"></a><a href="http://www.flickr.com/photos/mathatelle/6294084782/" title="pixels5 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6045/6294084782_7ff03bf9f1_z.jpg" width="430" height="640" alt="pixels5"></a><a href="http://www.flickr.com/photos/mathatelle/6294084844/" title="pixels6 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6227/6294084844_f954fd04f3_z.jpg" width="430" height="640" alt="pixels6"></a><a href="http://www.flickr.com/photos/mathatelle/6294084960/" title="pixels7 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6041/6294084960_98c3348524_z.jpg" width="430" height="640" alt="pixels7"></a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>b-04 配列を使う</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-b/04.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.276</id>

    <published>2011-10-24T05:40:00Z</published>
    <updated>2011-10-22T09:27:30Z</updated>

    <summary>配列とは 似たような複数の変数をプログラムで制御したい場合は「配列」を利用する。...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-b" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2>配列とは</h2>

<p>似たような複数の変数をプログラムで制御したい場合は「配列」を利用する。</p>

<p>例えば、</p>

<pre><code>How are you? I am fine thank you!
</code></pre>

<p>という会話中の単語を用いて何かブログラムを書こうとするとき、配列を用いない場合は</p>

<pre><code>String s0 = "How";
String s1 = "are";
String s2 = "you?";
String s3 = "I";
String s4 = "am";
String s5 = "fine";
String s6 = "thank";
String s7 = "you!";
</code></pre>

<p>と1つずつ変数に代入する必要があるが、配列を用いれば</p>

<pre><code>String[] chat = {"How","are","you?","I","am","fine","thank","you!"};
</code></pre>

<p>というように、まとめて代入ができる。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/6267843731/" title="array by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6161/6267843731_69f4215087_z.jpg" width="640" height="313" alt="array"></a></p>

<p>配列には「インデックス」と呼ばれる0から始まる番地があり、順に値が代入される（マンションの0号室, 1号室, 2号室... とイメージするとわかりやすい）。</p>

<p>配列に代入された値は、このインデックスを用いて利用する。例えば、"How"という文字を利用したければ、0番（1番ではなく、0から始まることに注意）を指定すればよい。具体的には、</p>

<pre><code>String[] chat = {"How","are","you?","I","am","fine","thank","you!"};
text(chat[0], 0, 50);
</code></pre>

<p>とすれば、画面中央左に「How」と表示される。<strong>chat[0]</strong> は「配列chatの0番の値」ということである。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/6268025187/" title="array1 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6240/6268025187_d431f44d6f_o.png" width="100" height="100" alt="array1"></a></p>

<p>そのほかの単語も画面に表示してみよう。</p>

<h3>for文を用いてすべての単語をランダムな位置に表示する</h3>

<p>インデックスは0から始まる整数の連番なので、for文を用いた処理と相性が良い。例えば、配列のすべての値を表示したい場合は、以下のように書くことができる。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/6268037713/" title="array1 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6119/6268037713_882abcf0b1_o.png" width="100" height="100" alt="array1"></a></p>

<pre><code>String[] chat = {"How","are","you?","I","am","fine","thank","you!"};
for (int i = 0; i &lt; chat.length; i++) {
  text(chat[i], random(width), random(height));
}
</code></pre>

<p>ポイントはfor文の繰り返しの範囲を <strong>chat.length</strong> で表しているところ。こうすると「配列 chat の長さ」（この場合は8）が適用される。</p>

<p>※このプログラムでは、文字が画面からはみ出てしまうことがあるので、textAlignの指定を追加したりrandomの指定を調整すると良い。</p>

<h3>単語を順に表示する</h3>

<iframe width="128" height="180" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=43495&width=100&height=100&border=true"></iframe>

<pre><code>String[] chat = {"How","are","you?","I","am","fine","thank","you!"};
int count = 0;

void setup() {
  size(100, 100);
  frameRate(3);
}

void draw() {
  background(204);
  fill(0);
  textAlign(CENTER);
  text(chat[count], width/2, height/2);
  count++;
  if(count &gt;= chat.length) count = 0;
}
</code></pre>

<p>ポイントは2つ。</p>

<ul>
<li>setupでフレームレート（1秒間に再生するフレーム数）の設定をしている。<strong>frameRate(3)</strong> は「1秒間に3フレーム再生する」ということ。</li>
<li>1回再生するごとにカウンター（変数countでカウント）を1増やし、countの値が配列の長さ以上になったらカウンターをリセット（countの値を0）している。こうすることで、繰り返し単語が順に表示される。</li>
</ul>

<h2>練習「おみくじ」を作る</h2>

<ul>
<li>大吉、中吉、小吉、吉の4つとする</li>
<li>ウィンドウサイズは自由とする</li>
</ul>

<h3>制作の進め方で気を付けたいこと</h3>

<ul>
<li>基本的な機能が動作するシンプルな「プロトタイプ」を作る</li>
<li>プロトタイプが出来てから、細部を作り込んでいく</li>
</ul>

<h3>作り方のヒント</h3>

<ul>
<li>どのタイミングでおみじくを表示するか？
<ul>
<li>ユーザーがアクションを起こしたとき</li>
</ul></li>
<li>どうやってユーザーにアクションを起こしてもらうか？
<ul>
<li>マウスやキーボードからの入力</li>
</ul></li>
<li>おみくじデータの用意方法は？
<ul>
<li>配列を利用する</li>
</ul></li>
<li>おみくじをランダムに選ぶには？
<ul>
<li>random関数を利用する</li>
</ul></li>
<li>大吉が出にくく、吉が出やすくするには？
<ul>
<li>「100本のくじのうち、大吉は10本、中吉は20本、小吉は30本、吉は40本」と考える</li>
<li>if(...){...}else if(...){...}else if(...){...}else{}</li>
</ul></li>
</ul>

<h2>配列を使ったプログラムの例</h2>

<h3>形の描画を効率化する</h3>

<iframe width="628" height="380" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=43496&width=600&height=300&border=true"></iframe>

<pre><code>void setup() {
  size(600, 300);
}

void draw() {
  //画面のリセット
  fill(204, 10);
  noStroke();
  rect(0, 0, width, height);
  //ランダムな位置・傾き・サイズで☆が描画されるように座標変換する
  translate(random(width), random(height));
  rotate(random(PI));
  scale(random(0.1, 0.5));
  //配列の定義
  int[] x = {50, 29, 83, 17, 71}; //点A,B,C,D,Eのx座標
  int[] y = {18, 82, 43, 43, 82}; //点A,B,C,D,Eのy座標
  // 5つの点A,B,C,D,Eを順に直線で結び☆を描く
  translate(-50, -50); //☆を原点の位置に座標変換する
  fill(255);
  stroke(0);
  beginShape();
  for (int i = 0; i &lt; x.length; i++) {
    vertex(x[i] + random(-5, 5), y[i] + random(-5, 5));
  }
  endShape(CLOSE);
}
</code></pre>

<h3>カーソルの位置を記憶させる</h3>

<iframe width="628" height="380" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=43499&width=600&height=300&border=true"></iframe>

<pre><code>int num = 50; //円の個数
int[] x = new int[num]; //x座標を記録する配列
int[] y = new int[num]; //y座標を記録する配列

void setup() {
  size(600, 300);
}

void draw() {
   background(204); //画面をリセット
  //配列を参照して円を描画する
  for(int i = 0 ; i &lt; num ; i++) {
    fill(i * 3);
    ellipse(x[i], y[i], i, i);
  }
}

//マウスが動いたときの処理：マウスの座標を記録する
void mouseMoved() {
  //配列の値をひとつ後ろへ移動する
  for(int i = num - 1 ; i &gt; 0 ; i--) {
    x[i] = x[i-1];
    y[i] = y[i-1];
  }
  x[0] = mouseX;
  y[0] = mouseY;
}
</code></pre>

<h3>画像を読み込んでアニメーションにする</h3>

<iframe width="348" height="320" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=43500&width=320&height=240&border=true"></iframe>

<pre><code>int numFrames = 60; //アニメーションのフレーム数
PImage[] images = new PImage[numFrames]; //アニメーション画像の配列

void setup() {
  size(320, 240);
  frameRate(30);
  // 画像の読み込み
  for (int i = 0; i &lt; images.length; i++) {
    images[i] = loadImage("http://dl.dropbox.com/u/446018/sq_iinaiina/animation-" + nf(i, 3) + ".jpg");
  }
}

void draw() {
  int frame = frameCount % numFrames; //現在のフレームをアニメーションのフレーム数で割った余りを代入
  image(images[frame], 0, 0); //画像を表示
}
</code></pre>
]]>
        

    </content>
</entry>

<entry>
    <title>b-03 文字を使う</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-b/03.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.275</id>

    <published>2011-10-17T05:40:00Z</published>
    <updated>2011-10-15T11:51:15Z</updated>

    <summary>text() 文字を描く関数 text(&quot;あいうえお愛&quot;, 10, 35); /...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-b" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2><strong>text()</strong> 文字を描く関数</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/5046239405/" title="text1 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4104/5046239405_33954b0b00_o.png" width="100" height="100" alt="text1" /></a></p>

<pre><code>text("あいうえお愛", 10, 35); // 表示するテキスト, x座標, y座標
</code></pre>

<p><a href="http://www.flickr.com/photos/mathatelle/5046861652/" title="text2 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4146/5046861652_6fe5509796_o.png" width="100" height="100" alt="text2" /></a></p>

<pre><code>text("あいうえお愛", 10, 35, 40, 40); // 表示するテキスト, x座標, y座標, 表示領域の幅, 表示領域の高さ
</code></pre>

<p><a href="http://www.flickr.com/photos/mathatelle/5046259457/" title="text3 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4110/5046259457_17aa94672e_o.png" width="100" height="100" alt="text3" /></a></p>

<pre><code>fill(0); //塗色を設定する
text("あいうえお愛", 10, 35, 40, 40);
</code></pre>

<h2><strong>textSize()</strong> 文字サイズを指定する</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/5046270205/" title="textSize by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4129/5046270205_9f56968616_o.png" width="100" height="100" alt="textSize" /></a></p>

<pre><code>fill(0);
textSize(16);
text("あいうえお愛", 10, 35);
</code></pre>

<h2><strong>textAlign()</strong> 文字揃えを指定する</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/5046282471/" title="textAlign by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4129/5046282471_8c3e812be4_o.png" width="100" height="100" alt="textAlign" /></a></p>

<pre><code>fill(0);
textAlign(CENTER);
text("あいうえお愛", 50, 35);
</code></pre>

<h2><strong>String</strong> 文字列のデータ型</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/5046239405/" title="text1 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4104/5046239405_33954b0b00_o.png" width="100" height="100" alt="text1" /></a></p>

<p>文字列を変数で扱う場合は String 型を用いる。</p>

<pre><code>String s = "あいうえお愛";
text(s, 10, 35);
</code></pre>

<h2>ランダムに表示する</h2>

<h3>ランダムな位置に、ランダムな数字を表示する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/6245735261/" title="text1 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6051/6245735261_a7047ef1f0_o.png" width="200" height="200" alt="text1"></a></p>

<pre><code>void setup() {
  size(200, 200);
}

void draw() {
  fill(random(256));
  textSize(random(12, 36));
  textAlign(CENTER);
  text(int(random(10)), random(width), random(height));
}
</code></pre>

<h3>キーボードを押すと、その文字をランダムな位置に表示する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/6245735301/" title="text2 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6180/6245735301_1d6f5089d7_o.png" width="200" height="200" alt="text2"></a></p>

<pre><code>void setup() {
  size(200, 200);
}

void draw() {
}

void keyPressed() {
  fill(random(256), random(102, 256));
  textSize(random(36, 64));
  textAlign(CENTER);
  text(key, random(width), random(height));
}
</code></pre>

<h2>指定したフォントで文字を描く</h2>

<h3>準備</h3>

<p>以下のようにフォントデータを生成しておく</p>

<p><a href="http://www.flickr.com/photos/mathatelle/2558170291/" title="08-12 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3274/2558170291_2a0039d586_m.jpg" width="218" height="137" alt="08-12" /></a> <a href="http://www.flickr.com/photos/mathatelle/2558170417/" title="08-13 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3011/2558170417_9e2b16756a.jpg" width="424" height="500" alt="08-13" /></a></p>

<h3><strong>PFont</strong> 変数でフォントデータを扱う場合のデータ型 , <strong>textFont</strong> 使用するフォントを指定</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/2558995788/" title="08-14 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3256/2558995788_d1300a1455.jpg" width="500" height="200" alt="08-14" /></a></p>

<pre><code>size(500, 200);

PFont myFont = loadFont("HelveticaNeue-Bold-24.vlw");
textFont(myFont);

text("I Love Processing!", 0, 100);
</code></pre>
]]>
        

    </content>
</entry>

<entry>
    <title>b-02 反応させる（マウス、キーボードからの入力に）</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-b/02.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.274</id>

    <published>2011-10-10T05:40:00Z</published>
    <updated>2011-10-08T02:34:09Z</updated>

    <summary>mouseX, mouseY マウスポインタの位置（座標） 現在のマウスポインタ...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-b" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2><strong>mouseX</strong>, <strong>mouseY</strong> マウスポインタの位置（座標）</h2>

<p>現在のマウスポインタの位置に円が描かれる。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/4042847176/" title="ib_4_0 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3519/4042847176_ff5fb23651_o.png" width="400" height="400" alt="ib_4_0" /></a></p>

<pre><code>void setup() {
  size(400, 400);
}

void draw() {
  ellipse(mouseX, mouseY, 60, 60);
}
</code></pre>

<h2><strong>pmouseX</strong>, <strong>pmouseY</strong> 前フレームのマウスポインタの位置（座標）</h2>

<p>前フレームのマウスポインタの位置から現フレームのマウスポインタの位置に線が描かれる。（マウスを動かすと、線が描かれるように見える）</p>

<p><a href="http://www.flickr.com/photos/mathatelle/4042811440/" title="1b_4_1 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2788/4042811440_9166433d9e_o.png" width="400" height="400" alt="1b_4_1" /></a></p>

<pre><code>void setup() {
  size(400, 400);
}

void draw() {
  line(mouseX, mouseY, pmouseX, pmouseY);
}
</code></pre>

<h2><strong>mousePressed</strong> マウスボタンが押されている（== true）、押されていない（== false）</h2>

<p>マウスボタンを押している間、線が描かれる。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/4042066879/" title="1b_4_2 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3535/4042066879_1f8a45c85a_o.png" width="400" height="400" alt="1b_4_2" /></a></p>

<pre><code>void setup() {
  size(400, 400);
  strokeWeight(10);
}

void draw() {
  if (mousePressed == true){
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}
</code></pre>

<h2><strong>mousePressed() {...}</strong> マウスボタンが押されたときに1回だけ {...} の中を実行する</h2>

<p>マウスボタンを押すと、円が描かれる。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/4042811566/" title="1b_4_3 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2488/4042811566_d4db1bb85e_o.png" width="400" height="400" alt="1b_4_3" /></a></p>

<pre><code>void setup() {
  size(400, 400);
}

void draw() {
}

void mousePressed() {
  ellipse(mouseX, mouseY, 60, 60);
}
</code></pre>

<h2><strong>mouseReleased() {...}</strong> マウスボタンが離されたときに1回だけ {...} の中を実行する</h2>

<p>マウスボタンを押している間、線が描かれる。ボタンが離されると線が消える。</p>

<pre><code>void setup() {
  size(400, 400);
  strokeWeight(10);
}

void draw() {
  if (mousePressed == true){
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

void mouseReleased() {
  background(204); //マウスボタンが離されると画面がリセットされる
}
</code></pre>

<!--
<a href="http://www.flickr.com/photos/mathatelle/3751895792/" title="1b-04-3 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2667/3751895792_ce7a4d6b77_o.png" width="400" height="400" alt="1b-04-3" /></a>

    int r = 10;

    void setup() {
      size(400, 400);
      frameRate(30);
    }

    void draw() {
      ellipse(mouseX, mouseY, r, r);
    }

    void mousePressed(){
      if (mouseButton==LEFT){
        r = 60;
      }
    }

     void mouseReleased(){
      if (mouseButton==LEFT){
        r = 10;
      }
    }
-->

<h2>練習：次のような動作をするプログラムを書く</h2>

<p>マウスポインタの位置に赤い円が描かれる。マウスボタンを押すと、円の塗り色が変わる。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/4042847224/" title="ib_4_5 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3511/4042847224_3db1e9d009_o.png" width="400" height="400" alt="ib_4_5" /></a></p>

<!--
    int h=0;

    void setup() {
      size(400, 400);
      colorMode(HSB,100);
      background(99);
      noStroke();
    }

    void draw() {
      fill(h,99,99);
      ellipse(mouseX, mouseY, 60, 60);
    }

    void mousePressed(){
      h+=5;
      h%=100;
    }
-->

<p>マウスボタンを押すと、前回マウスボタンを押した位置からの折れ線が描ける。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/4042811620/" title="ib_4_4 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2729/4042811620_d4e3f9b399_o.png" width="400" height="400" alt="ib_4_4" /></a></p>

<!--
    float pX, pY;

    void setup() {
      size(400, 400);
      strokeWeight(10);
    }

    void draw() {
    }

    void mousePressed() {  
      line(pX, pY, mouseX, mouseY);
    }

    void mouseReleased() {
      pX = mouseX; //マウスボタンが離されたときのx座標を記憶する
      pY = mouseY; //マウスボタンが離されたときのy座標を記憶する
    }
-->

<h2><strong>keyPressed</strong> キーが押されている（== true）、押されていない（== false）</h2>

<p>キーが押されているとき、円が左から右にすすむ</p>

<p><a href="http://www.flickr.com/photos/mathatelle/4064133130/" title="1b_05_1 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2627/4064133130_204065a7cd_o.png" width="400" height="400" alt="1b_05_1" /></a></p>

<pre><code>float x = 0.0;
float speed = 1.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(204);
  if (keyPressed == true) {
    x += speed;
    //println(key);
  }
  ellipse(x, height/2, 60, 60);
}
</code></pre>

<h2><strong>key</strong> 押されたキーの文字や記号を納める変数</h2>

<p>キーのa（小文字のエー）が押されているとき、円が左から右にすすむ</p>

<pre><code>float x = 0.0;
float speed = 1.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(204);
  if ((keyPressed == true) &amp;&amp; (key == 'a')) {
    x += speed;
  }
  ellipse(x, height/2, 60, 60);
}
</code></pre>

<p>※大文字小文字を問わないようにするためには、次のように「aまたはAが押されているとき」で条件を設定する</p>

<pre><code>float x = 0.0;
float speed = 1.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(204);
  if ((keyPressed == true) &amp;&amp; ((key == 'a') ||  (key == 'A'))) {
    x += speed;
  }
  ellipse(x, height/2, 60, 60);
}
</code></pre>

<h2><strong>keyPressed() {...}</strong> キーが押されたときに1回だけ {...} の中を実行する</h2>

<p>※キーを押しっぱなしにして一定時間経つと、キーの連続入力状態になり、そのスピードに合わせ連続して実行される。</p>

<p>キーが押されると、円が1ピクセルだけ左から右にすすむ</p>

<pre><code>float x = 0.0;
float speed = 1.0;

void setup() {
  size(400, 400);
}

void draw() {
}

void keyPressed() {
  background(204);
  x += speed;
  ellipse(x, height/2, 60, 60);
  //println(key);
}
</code></pre>

<h2><strong>keyReleased() {...}</strong> キーが離されたときに1回だけ {...} の中を実行する</h2>

<p>キーが離されると、円が止まる</p>

<pre><code>float x = 0.0;
float speed = 1.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(204);
  x += speed;
  ellipse(x, height/2, 60, 60);
}

void keyReleased() {
  speed = 0.0;
}
</code></pre>
]]>
        

    </content>
</entry>

<entry>
    <title>b-01 動かす</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-b/01.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.273</id>

    <published>2011-10-03T05:40:00Z</published>
    <updated>2011-10-01T06:49:11Z</updated>

    <summary>正方形を横に動かす step.1 静止した正方形を描く //最初に1回だけ実行す...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-b" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2>正方形を横に動かす</h2>

<h3>step.1 静止した正方形を描く</h3>

<pre><code>//最初に1回だけ実行する
void setup() {
  size(200, 200);
}

//毎フレーム繰り返し実行する
void draw() {
  rect(0, height/2, 10, 10); //画面中央左に一辺が10pxの正方形を描く
}
</code></pre>

<p>rectのx座標がじょじょに大きくなれば、正方形は数のように左に移動し、動いているように見える。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/3751895598/" title="1b-02-1-26 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3456/3751895598_f87be1b1c6_o.png" width="200" height="200" alt="1b-02-1-26" /></a> <a href="http://www.flickr.com/photos/mathatelle/3751105739/" title="1b-02-1-52 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2638/3751105739_52e6f74327_o.png" width="200" height="200" alt="1b-02-1-52" /></a> <a href="http://www.flickr.com/photos/mathatelle/3751895668/" title="1b-02-1-79 by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2542/3751895668_b8e7122029_o.png" width="200" height="200" alt="1b-02-1-79" /></a></p>

<h3>step.2 正方形のx座標を変数で置き換え、変数の値がじょじょに大きくなるようにする</h3>

<pre><code>float x; //小数型の変数xを宣言
void setup() {
  size(200, 200);
  x = 0; //xの初期値を0とする
}

void draw() {
  x += 1; //毎フレームで正方形のx座標を1ずつ増やす
  rect(x, height/2, 10, 10);
}
</code></pre>

<p><a href="http://www.flickr.com/photos/mathatelle/6180897812/" title="motion-linear01 by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6166/6180897812_46fe62a2b8_o.png" width="200" height="200" alt="motion-linear01"></a></p>

<p>正方形が動くようになったが、黒い帯が残る。これは、正方形が描き重ねられているからである。毎フレームで画面をクリアした後に正方形を描けば、黒い帯は残らないようになる。</p>

<h3>step. 3 画面をクリアしてから正方形を描画する</h3>

<pre><code>float x;
void setup() {
  size(200, 200);
  x = 0;
}

void draw() {
  background(204); //背景色を設定することで画面をクリアする
  x += 1;
  rect(x, height/2, 10, 10);
}
</code></pre>

<p>正方形が画面右に消える（正方形のx座標が200を超える）と、画面に変化がなくなってしまい退屈である。次に、右に消えたら再び左から現れるようにしよう。</p>

<h3>step. 4 ループ移動させる</h3>

<pre><code>float x;
void setup() {
  size(200, 200);
  x = 0;
}

void draw() {
  background(204);
  x += 1;
  if (x &gt; width) x = -10; //正方形が画面からはみ出たら、正方形を画面の左外に戻す
  rect(x, height/2, 10, 10);
}
</code></pre>

<h3>step. 5 正方形の出現位置をランダムに設定する</h3>

<p>if文を実行する際、正方形のy座標をランダムに設定するし、さらに変化を付ける。</p>

<pre><code>float x, y; //変数にyを追加
void setup() {
  size(200, 200);
  x = 0;
  y = height/2; //yの初期値を画面の中央にする
}

void draw() {
  background(204);
  x += 1;
  if (x &gt; width) { 
    x = -10;
    y = random(width - 10); //正方形が画面内に収まる範囲で、yの値をランダムに設定
  }
  rect(x, y, 10, 10);
}
</code></pre>

<iframe width="228" height="280" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=40062&width=200&height=200&border=true"></iframe>

<h3>練習 - 上記のプログラムを改変してみる</h3>

<ol>
<li>正方形の幅を変数wで表し、任意の大きさの正方形がループ移動するプログラムに書きかえる</li>
<li>正方形の移動するスピードを速くする、または遅くする</li>
<li>正方形の移動するスピードを変数speedで表し、任意のスピードで正方形が移動するプログラムに書きかえる</li>
<li>正方形を右から左に動かす（ヒント：元のプログラムを書きかえる際、if文はコメントアウトしておき、移動の部分を書きかえてから、if文でのループ移動の条件を書きかえる）</li>
<li>正方形を上から下に動かす</li>
<li>円を動かす</li>
</ol>

<h2>座標を移動する</h2>

<p>座標を移動することで、正方形が動いているように見せることができる。このやり方の方が汎用性がある。</p>

<pre><code>float x, y;
float speed;
int w;
void setup() {
  size(200, 200);
  x = 0.0;
  y = height/2.0;
  speed = 1.0;
  w = 10;
}

void draw() {
  background(204);
  x += speed;
  if (x &gt; width) {
    x = -w;
    y = random(width - w);
  }
  translate(x, y); //座標を移動する
  rect(0, 0, w, w); //座標を移動するので、正方形は固定の位置に描画する
}
</code></pre>

<h3>応用例：バスを動かす</h3>

<iframe width="228" height="280" scrolling="no" frameborder="0" src="http://www.openprocessing.org/visuals/iframe.php?visualID=40066&width=200&height=200&border=true"></iframe>

<pre><code>float x, y;
float speed;
void setup() {
  size(200, 200);
  x = 0.0;
  y = height/2.0;
  speed = 1.0;
}

void draw() {
  background(204);
  x += speed;
  if (x &gt; width+60) {
    x = -60;
    y = random(30, width-45);
  }
  translate(x, y);
  //draw Bus
  rectMode(CENTER);
  rect(0,0,120,60);
  ellipse(-35,30,30,30);
  ellipse(35,30,30,30);
  ellipse(-35,30,20,20);
  ellipse(35,30,20,20);
  rectMode(CORNER);
  rect(45,-20,15,20);
  rect(-5,-20,30,20);
  rect(-50,-20,30,20);
}
</code></pre>
]]>
        

    </content>
</entry>

<entry>
    <title>a-10 期末課題について</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-a/10.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.175</id>

    <published>2011-06-13T05:40:00Z</published>
    <updated>2011-06-25T16:06:53Z</updated>

    <summary>期末課題テーマ 群れ   （むれ）とは、同一種の生物の個体多数からなる集団である...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-a" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2>期末課題テーマ</h2>

<p style="font-size:500%;margin:0;text-align:center;">群れ</p>

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

<p><a href="http://ja.wikipedia.org/wiki/群れ">http://ja.wikipedia.org/wiki/群れ</a></p>

<h2>課題概要</h2>

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

<h2>スケジュール</h2>

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

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

<h2>制作条件</h2>

<ul>
<li>作品サイズは<strong>幅1024ピクセル・高さ768ピクセル</strong>。</li>
<li><strong>静止画</strong>とする。</li>
<li>PhotoshopやIllustratorで作成したグラフィックや写真をProcessingに読み込んで利用しても良い。 → <a href="http://www.d-improvement.jp/learning/processing/2010-a/11.html">画像の作成方法</a></li>
<li>Processingで作成したグラフィックをPhotoshopやIllustratorで後処理することは禁止とする。</li>
<li>ネット上の画像など、著作物を無断利用することは禁止とする。</li>
<li>「プログラミングによるビジュアル表現」「あなたらしい表現」になっていること。</li>
</ul>

<h2>課題の提出窓口</h2>

<ul>
<li>提出ファイルの作成方法は<a href="http://www.d-improvement.jp/learning/processing/2010-a/14.html">このページを参照してください</a>。</li>
<li>→ <a href="https://docs.google.com/a/go.jindai.ac.jp/">提出窓口へ（まずはログインしてください）</a></li>
<li>Googleドキュメントでの共有設定は以下を参照してください。</li>
</ul>

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

<p><a href="http://www.flickr.com/photos/mathatelle/5869398839/" title="Google Docs by mathatelle, on Flickr"><img src="http://farm6.static.flickr.com/5061/5869398839_8bf49f2822_o.png" width="572" height="282" alt="Google Docs"></a></p>

<h3>アップロードする</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/5869956978/" title="Google Docs by mathatelle, on Flickr"><img src="http://farm6.static.flickr.com/5318/5869956978_d29e05c9a1_o.png" width="529" height="299" alt="Google Docs"></a></p>

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

<p><a href="http://www.flickr.com/photos/mathatelle/5869399023/" title="Google Docs by mathatelle, on Flickr"><img src="http://farm7.static.flickr.com/6046/5869399023_84415d564e_o.png" width="496" height="247" alt="Google Docs"></a></p>

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

<p><a href="http://www.flickr.com/photos/mathatelle/5869957790/" title="Google Docs by mathatelle, on Flickr"><img src="http://farm6.static.flickr.com/5196/5869957790_8ee07e3d39_o.png" width="623" height="684" alt="Google Docs"></a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>a-09 関数を使う</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-a/09.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.174</id>

    <published>2011-06-06T05:40:00Z</published>
    <updated>2011-06-06T05:22:10Z</updated>

    <summary>draw() 連続して実行する void draw() {   ellipse(...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-a" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2><strong>draw()</strong> 連続して実行する</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/4692765098/" title="draw by mathatelle, on Flickr"><img src="http://farm2.static.flickr.com/1293/4692765098_ccd28dbc3b_o.png" width="100" height="100" alt="draw" /></a></p>

<pre><code>void draw() {
  ellipse(random(width), random(height), 30, 30);
}
</code></pre>

<h2><strong>setup()</strong> 最初に1回だけ実行する</h2>

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

<p><a href="http://www.flickr.com/photos/mathatelle/4692132253/" title="setup-draw by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4007/4692132253_eeccfbdbd5_o.png" width="500" height="100" alt="setup-draw" /></a></p>

<pre><code>void setup() {
  size(500, 100);
}

void draw() {
  ellipse(random(width), random(height), 30, 30);
}
</code></pre>

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

<p><a href="http://www.flickr.com/photos/mathatelle/4692783680/" title="noloop-setup-draw by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4069/4692783680_8cdb024d83_o.png" width="500" height="100" alt="noloop-setup-draw" /></a></p>

<pre><code>void setup() {
  size(500, 100);
  noLoop();
}

void draw() {
  ellipse(random(width), random(height), 30, 30);
}
</code></pre>

<h2>関数をつくる</h2>

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

<h3>星を描く（関数を使わずに）</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4692216301/" title="function-star1 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4067/4692216301_cf2390b629_o.png" width="100" height="100" alt="function-star1" /></a></p>

<pre><code>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);
}
</code></pre>

<h3>星を2つ描く（関数を使わずに）</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4692848980/" title="function-star2 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4036/4692848980_019284e2da_o.png" width="100" height="100" alt="function-star2" /></a></p>

<pre><code>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);
}
</code></pre>

<h3>星を2つ描く（関数を使って）</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4692848980/" title="function-star2 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4036/4692848980_019284e2da_o.png" width="100" height="100" alt="function-star2" /></a></p>

<h4>プログラムの書き方1</h4>

<pre><code>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);
}
</code></pre>

<h4>プログラムの書き方2</h4>

<pre><code>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();
}
</code></pre>

<h3>練習</h3>

<ul>
<li>ウィンドウサイズを幅200px高さ200pxとして画面中央に星を3つ並べる</li>
<li>drawStar関数の引数を追加し、drawStar関数で任意の色を指定できるようにする</li>
<li>笑顔を描く関数drawSmileを定義し、画面を笑顔で満たす　※<a href="http://processing.org/reference/arc_.html">arc()</a>関数を使うと円弧を描くことができる</li>
</ul>
]]>
        

    </content>
</entry>

<entry>
    <title>a-08 変換する（移動, 回転, 拡大縮小）</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-a/08.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.173</id>

    <published>2011-05-30T05:40:00Z</published>
    <updated>2011-05-30T15:45:07Z</updated>

    <summary>translate() 座標を移動する rect(0, 0, 30, 20); ...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-a" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2><strong>translate()</strong> 座標を移動する</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/4670763995/" title="translate by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4025/4670763995_aa1a0d2d1c_o.png" width="100" height="100" alt="translate" /></a></p>

<pre><code>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);
</code></pre>

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

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

<p><a href="http://www.flickr.com/photos/mathatelle/4670764019/" title="pushMatrix-popMatrix by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4021/4670764019_285f40a229_o.png" width="100" height="100" alt="pushMatrix-popMatrix" /></a></p>

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

<p><a href="http://www.flickr.com/photos/mathatelle/4671388856/" title="pushMatrix2-popMatrix2 by mathatelle, on Flickr"><img src="http://farm2.static.flickr.com/1289/4671388856_26f232b47b_o.png" width="100" height="100" alt="pushMatrix2-popMatrix2" /></a></p>

<pre><code>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); //左の正方形
</code></pre>

<h2><strong>rotate()</strong> 座標を回転する, <strong>PI</strong> π</h2>

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

<p><a href="http://www.flickr.com/photos/mathatelle/4670797789/" title="rotate by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4054/4670797789_5b633e404c_o.png" width="100" height="100" alt="rotate" /></a></p>

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

<h2><strong>scale()</strong> 座標を拡大・縮小する</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/4670980165/" title="scale by mathatelle, on Flickr"><img src="http://farm2.static.flickr.com/1282/4670980165_0621732fae_o.png" width="100" height="100" alt="scale" /></a></p>

<pre><code>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);
</code></pre>

<p><a href="http://www.flickr.com/photos/mathatelle/4670980189/" title="scale2 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4040/4670980189_eb1d720f4f_o.png" width="100" height="100" alt="scale2" /></a></p>

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

<h2>変換を組み合わせる</h2>

<h3>translate と rotate を組み合わせる</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4670797763/" title="translate-rotate by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4046/4670797763_1699799beb_o.png" width="100" height="100" alt="translate-rotate" /></a></p>

<pre><code>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);
</code></pre>

<h2>練習</h2>

<p>translate, rotate, scale を使って模様をつくる</p>

<h3>例1</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4671677294/" title="translate-rotate-scale2 by mathatelle, on Flickr"><img src="http://farm2.static.flickr.com/1291/4671677294_65f127b4b5_o.png" width="500" height="500" alt="translate-rotate-scale2" /></a></p>

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

for (int i = 0; i &lt; 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();
}
</code></pre>

<h3>例2</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4671677216/" title="translate-rotate-scale1 by mathatelle, on Flickr"><img src="http://farm2.static.flickr.com/1305/4671677216_ef139c8c13_o.png" width="500" height="500" alt="translate-rotate-scale1" /></a></p>

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

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

    </content>
</entry>

<entry>
    <title>a-07 画像を使う</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-a/07.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.172</id>

    <published>2011-05-23T05:40:00Z</published>
    <updated>2011-05-21T05:13:59Z</updated>

    <summary>PImage 変数で画像を扱う場合のデータ型, image() 画像を表示するた...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-a" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2><strong>PImage</strong> 変数で画像を扱う場合のデータ型, <strong>image()</strong> 画像を表示するための関数</h2>

<h3>ウェブ上の画像を表示する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4652533818/" title="logo by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4022/4652533818_1bdbd46230_o.png" width="300" height="100" alt="logo" /></a></p>

<pre><code>size(300, 100);

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

// 画像を表示
image(logo, 0, 0);
</code></pre>

<h3>画像を表示する</h3>

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

<p><img alt="dandelion.jpg" src="http://www.d-improvement.jp/learning/processing/uploads/dandelion.jpg" class="mt-image-none" style="" /></p>

<h4>手順</h4>

<ol>
<li>sketch（プログラム）を書く</li>
<li>メニューの「File &gt; Save As」で「書類 &gt;  Processing」にsketchを保存</li>
<li>Processingのエディタに画像ファイルをドラッグ</li>
</ol>

<p><a href="http://www.flickr.com/photos/mathatelle/2559019376/" title="08-17 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3079/2559019376_4567c9830c.jpg" width="500" height="500" alt="08-17" /></a></p>

<pre><code>size(500, 500);

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

// 画像を表示
image(photo, 0, 0);
</code></pre>

<h3>表示位置を調整する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/2558168863/" title="08-05 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3143/2558168863_2cf25789f2.jpg" width="500" height="500" alt="08-05" /></a></p>

<pre><code>size(500, 500);

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

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

<h3>表示サイズを調整する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/2558994296/" title="08-06 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3074/2558994296_513ca33c53.jpg" width="500" height="500" alt="08-06" /></a></p>

<pre><code>size(500, 500);

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

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

<h3>色を調整する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4652558390/" title="tint by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4009/4652558390_21d2c47c57_o.jpg" width="500" height="500" alt="tint" /></a></p>

<pre><code>size(500, 500);

colorMode(HSB);

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

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

image(photo, 0, 0);
</code></pre>

<h3>複数の画像を配置する</h3>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="bus.png" src="http://www.d-improvement.jp/learning/processing/uploads/bus.png" width="120" height="120" class="mt-image-none" style="" /></span></p>

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

<p><a href="http://www.flickr.com/photos/mathatelle/4652586908/" title="tint by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4020/4652586908_af4ed20250_o.jpg" width="500" height="500" alt="tint" /></a></p>

<pre><code>size(500, 500);
background(255);

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

image(photo1, 0, 0);
image(photo2, 350, 250);
</code></pre>

<h3>画像を画面の中央に配置する</h3>

<p><a href="http://www.flickr.com/photos/mathatelle/4652607672/" title="width-height by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4034/4652607672_1885c5efce_o.jpg" width="500" height="500" alt="width-height" /></a></p>

<pre><code>size(500, 500);
background(255);

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

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

<h2>練習</h2>

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

<p><a href="http://www.flickr.com/photos/mathatelle/2558995162/" title="08-09 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3135/2558995162_b7a9f7a2bb.jpg" width="500" height="500" alt="08-09" /></a></p>

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

<p><a href="http://www.flickr.com/photos/mathatelle/2558995328/" title="08-10 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3020/2558995328_dec88627fc.jpg" width="500" height="500" alt="08-10" /></a></p>

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

<p><a href="http://www.flickr.com/photos/mathatelle/2558995554/" title="08-11 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3179/2558995554_ba34f1bf8f.jpg" width="500" height="500" alt="08-11" /></a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>a-06 図形を描く, 色を使う（その2）</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/learning/processing/2011-a/06.html" />
    <id>tag:www.d-improvement.jp,2011:/learning/processing//2.171</id>

    <published>2011-05-16T05:40:00Z</published>
    <updated>2011-05-15T03:38:36Z</updated>

    <summary>triangle() 三角形を描く 「3点(100,20),(180,180),...</summary>
    <author>
        <name>Di</name>
	
    </author>
	
    <category term="2011-a" scheme="http://www.sixapart.com/ns/types#category" />
	
	
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/learning/processing/">
        <![CDATA[<h2><strong>triangle()</strong> 三角形を描く</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/3601991645/" title="1a-08-triangle by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3374/3601991645_aa2a1729b2_o.png" width="200" height="200" alt="1a-08-triangle" /></a></p>

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

<pre><code>size(200, 200);
triangle(100, 20, 180, 180, 20, 180);
</code></pre>

<h2><strong>quad()</strong> 四角形を描く</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/3602804248/" title="1a-08-quad by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2445/3602804248_77508a5616_o.png" width="200" height="200" alt="1a-08-quad" /></a></p>

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

<pre><code>size(200, 200);
quad(20, 0, 200, 100, 180, 200, 0, 160);
</code></pre>

<h2><strong>beginShape(), endShape(), vertex()</strong> 繋がった線分を描く（多角形を描く）</h2>

<p><a href="http://www.flickr.com/photos/mathatelle/3601991689/" title="1a-08-vertex by mathatelle, on Flickr"><img src="http://farm3.static.flickr.com/2462/3601991689_92d828fc13_o.png" width="200" height="200" alt="1a-08-vertex" /></a></p>

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

<pre><code>size(200, 200);
beginShape();
  vertex(100, 0);
  vertex(200, 80);
  vertex(120, 200);
  vertex(40, 180);
  vertex(0, 60);
endShape(CLOSE);
</code></pre>

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

<ul>
<li>beginShape ... POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP</li>
<li>endShape ... CLOSE</li>
</ul>

<p><a href="http://www.flickr.com/photos/mathatelle/4627707015/" title="TRIANGLE_FAN by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4058/4627707015_192990fbc2_o.png" width="200" height="200" alt="TRIANGLE_FAN" /></a></p>

<pre><code>size(200, 200);
beginShape(TRIANGLE_FAN);
  vertex(100, 0);
  vertex(200, 80);
  vertex(120, 200);
  vertex(40, 180);
  vertex(0, 60);
endShape(CLOSE);
</code></pre>

<h2>色の設定（おさらい）</h2>

<p>パラメータの数が</p>

<ul>
<li>1つ ... gray</li>
<li>2つ ... gray, alpha</li>
<li>3つ ... R, G, B または H, S, B</li>
<li>4つ ... R, G, B, alpha  または H, S, B, alpha</li>
</ul>

<p><a href="http://www.flickr.com/photos/mathatelle/4627810361/" title="color1 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3300/4627810361_30e85e8170_o.png" width="100" height="100" alt="color1" /></a></p>

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

<p><a href="http://www.flickr.com/photos/mathatelle/4628413210/" title="color2 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4031/4628413210_42f5326630_o.png" width="100" height="100" alt="color2" /></a></p>

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

<p><a href="http://www.flickr.com/photos/mathatelle/4627810403/" title="color3 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4014/4627810403_cb95b06863_o.png" width="100" height="100" alt="color3" /></a></p>

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

<p><a href="http://www.flickr.com/photos/mathatelle/4627810439/" title="color4 by mathatelle, on Flickr"><img src="http://farm5.static.flickr.com/4040/4627810439_d22ce1ec17_o.png" width="100" height="100" alt="color4" /></a></p>

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

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

<p><a href="http://www.flickr.com/photos/mathatelle/4628444244/" title="color5 by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3396/4628444244_e9332c0f4a_o.png" width="100" height="100" alt="color5" /></a></p>

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

<h2>練習課題「太陽をかこう」　<strong>※要提出</strong></h2>

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

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

<p>→ <strong><a href="https://spreadsheets.google.com/a/go.jindai.ac.jp/spreadsheet/viewform?formkey=dG9lMWRnN0lGUVdtZS10TmxJbkpJLVE6MQ">ここから提出</a></strong></p>

<p><a href="http://farm4.static.flickr.com/3312/3602850076_9cb602360d_b.jpg" title="太陽をかこう by mathatelle, on Flickr"><img src="http://farm4.static.flickr.com/3312/3602850076_9cb602360d.jpg" width="354" height="500" alt="太陽をかこう" /></a></p>
]]>
        

    </content>
</entry>

</feed>

