スケーラブルアート論

2024年4月27日 (土) 07:10時点における最新版

[編集] 概要

前提スキル

一年生の時にメディアプログラミング演習Iを履修し、基本的なProcessingのプログラミングができること。
- 不安な人は、以下の野口先生のメディアプログラミング演習Iのサイトで復習してください。https://r-dimension.xsrv.jp/classes_j/category/processing/
個人のPC（Windows、MacOSのどちらでもよい）に自分でProcessingの環境を構築できることが望ましい。

授業概要

インタラクティブアートは芸術を基盤として科学や工学を統合する新しい領域で、プログラミングなどのIT技術によって実現されます。プログラミングによって制作プロセスをアルゴリズム化した作品は、拡張性が高く（スケーラブル）、多様性を持たせることが容易です。これが、スケーラブルアートです。
この授業では、その中でも、生物に見られる生成的（ジェネラティブ）な特徴をアートに応用したジェネラティブアートに関連する分野を扱います。その中には、人工生命、フラクタル、オートマトン、遺伝的アルゴリズム、ニューラルネットワークなどといったものが含まれます。
プログラミングを使用して、スケーラブルな特徴を持つ作品を作成します。

使用ソフト

Processingを使用します。https://processing.org/

到達目標

スケーラブルアートについて理解し、応用例を作成できる。
生物の特徴と生物的なシステムについて理解する。
Processingを使ってジェネラティブアートのプログラミングができる。

成績評価

確認テスト、課題、まとめテストで、100点満点で評価します。

参考資料

「数学から創るジェネラティブアート ―Processingで学ぶかたちのデザイン」(Generative Art with Math)
「The Nature of Code: Simulating Natural Systems with Processing」
- 英語PDF版は無料でダウンロードできます。https://wtf.tw/ref/shiffman.pdf
- 日本語PDF版を右のサイトで購入できます。https://wgn-obs.shop-pro.jp/?pid=144269527
- ソースコードがGithubで公開されています。https://github.com/nature-of-code/
Processingのチュートリアル Processing Tutorial

[編集] 開発環境

開発環境については、以下を参照してください。

https://processing.org/
p5.js http://p5js.org
- ドットインストールp5.js入門 http://dotinstall.com/lessons/basic_p5js
- Generative Design with p5.js http://www.generative-gestaltung.de/
Generative Art with Math https://www.openprocessing.org/user/57914
- https://gihyo.jp/book/2019/978-4-297-10463-4/support/

Generative Design
- https://github.com/generative-design/Code-Package-Processing-3.x

Reference https://processing.org/reference

[編集] 生物と情報とアート

生物とは? 生物の特徴とは？
- 例：小石と貝殻
- 「生物と無生物の違いは何か？」説明してみよう。
ゲノムのDNAマップ NCBI Genome Map Viewer
ヒト一人を再生するのに必要な情報量は？

自然界の興味深いパターン

自己相似性、フラクタル
- 雪の結晶(0:25)
- 樹木(1:17)
- オウム貝(1:30)
らせん、渦巻き状パターン
黄金角とフィボナッチ数列(3:00)

ジェネラティブアート: 自律性; 予測不可能性; パラメータ変形; 偶発性; 自己相似性; 再帰性; 対称性; 周期性; 双対性; 抽象化と具体化

[編集] 数学と力学の基礎

Nature of Code Chapter 1 Vector Git Processing

[編集] ベクトル

「Nature of Code」第1章の「1.1-1.6」pdf

ベクトルを復習するための動画：高校数学Bベクトルの定義・成分

[編集] 位置・速度・加速度

「Nature of Code」第1章の「1.7-1.10」pdf

動くボールの位置、速度、加速度はベクトルとして表すことができます。
速度は、位置の変化の割合、すなわち「次の位置＝現在位置＋速度」
- 秒速10m/sのボールの1秒後の位置＝現在位置＋10
加速度は、速度の変化の割合、すなわち「次の速度＝現在速度＋加速度」
- 自然落下運動の加速度は、重力加速度といい、9.8m/s2（秒の2乗）
- したがって、自然落下するボールの1秒後の速度＝現在速度＋9.8

重力加速度　国土地理院「重力を知る」https://www.gsi.go.jp/buturisokuchi/grageo_gravity.html

[編集] トポロジー

パックマン型2次元世界は、3次元ではトーラス（ドーナツ型）: https://wakara.co.jp/mathlog/20200204

[編集] 数学アート

[編集] 矩形分割

[編集] フィボナッチ数列

[編集] らせん

[編集] 整数の合同

[編集] コラッツ予想

[編集] 人工生命(ALife)

[編集] セルオートマトン

[編集] ラングトンのアリ

[編集] レイノルズのボイド

[編集] 反応拡散系

[編集] フラクタル

[編集] 人工知能(AI)

[編集] Genetic Algorithm

[編集] Neural Networks

[編集] Processing Samples

[編集] 音に反応する円

minimライブラリーをインストールする。

/**
* Circles responding Sound Level
*/

import ddf.minim.spi.*;
import ddf.minim.signals.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.ugens.*;
import ddf.minim.effects.*;

Minim minim;
AudioInput in;

void setup(){
  size(500, 500);
  minim = new Minim(this);
  in = minim.getLineIn(Minim.STEREO, 512); 
  background(0);
}

void draw(){
  colorMode(RGB, 255);
  fill(0, 150);
  rect(-1, -1, width, height);
  colorMode(HSB, 360, 100, 100);
  float brightness = 50 + map(in.mix.level(), 0, 0.5, 0, 50);
  float hue = map(in.mix.level(), 0, 0.7, 0, 360);
  fill(hue, 100, brightness);
  float radious = 50 + map(in.mix.level(), 0, 0.5, 0, 100);
  int x = 250;
  int y = 250;
  ellipse( x, y, radious *2, radious * 2);
}
void stop(){
  in.close();
  minim.stop();
  super.stop();
}

[編集] カメラ入力

Video|GStreamer-based video library for Processingライブラリをインストール。

使用可能なカメラのリスト出力

import processing.video.*;

void setup(){
  size(320, 240);
  
  String[] cameras = Capture.list();
  
  for(int i=0; i<cameras.length; i++){
    println("[" + i + "] " + cameras[i]);
  }

}

カメラ画像の出力

import processing.video.*;
Capture cam;

void setup(){
  size(640, 480);
  
  String[] cameras = Capture.list();
  for(int i=0; i<cameras.length; i++){
    println("[" + i + "] " + cameras[i]);
  }
  
  cam = new Capture(this, cameras[1]);
  cam.start();  
}

void draw(){
  if(cam.available() == true){
    cam.read();
  }
  
  image(cam, 0, 0);
}

差分から動きを検出

import processing.video.*;
 
int numPixels;
int[] previousFrame;
int noiseFilter = 50;
Capture video;
 
void setup() {
  size(640, 480);
 
  video = new Capture(this, width, height, 30);
  video.start();
 
  numPixels = video.width * video.height;
  previousFrame = new int[numPixels];
  loadPixels();
}

void draw() {
  if (video.available()) {
    video.read();
    video.loadPixels();
 
    int movementSum = 0;
    for (int i = 0; i < numPixels; i++) {
      color currColor = video.pixels[i];
      color prevColor = previousFrame[i];
 
      //R, G, B
      int currR = (currColor >> 16) & 0xFF;
      int currG = (currColor >> 8) & 0xFF;
      int currB = currColor & 0xFF;
 
      //
      int prevR = (prevColor >> 16) & 0xFF;
      int prevG = (prevColor >> 8) & 0xFF;
      int prevB = prevColor & 0xFF;
 
      //
      int diffR = abs(currR - prevR);
      int diffG = abs(currG - prevG);
      int diffB = abs(currB - prevB);
 
      //noiseFilter
      if (diffR + diffG + diffB > noiseFilter) {
        movementSum ++;
        pixels[i] = color(currR, currG, currB);
        //
        //pixels[i] = 0xFF000000 | (currR << 16) | (currG << 8) | currB;
      } else {
        pixels[i] = color(0);
      }
 
      //
      previousFrame[i] = currColor;
    }
 
    updatePixels();    //
    println(movementSum);    //
  }
}

[編集] 引力と加速度

「Nature of Code」第1章の「1.10 Interactivity with Acceleration」(p57)より。（一部改変）pdf

粒子はマウスポインタに引力で引き付けられれ、軌跡を残しながらマウスに近づく。
引力は、距離が近いほど、強くなる（反比例）。
速度には上限(topspeed)があり、引力と粒子の運動量（速度）が釣り合うと、マウスのまわりを回る惑星のような動きになる。
Moverクラスの作成
- ベクトルPVectorを使い、location（位置）、velocity（速度）、acceleration（加速度）定義し、力学運動を記述している。
- 速度は、現在速度に加速度を加算　velocity.add(acceleration);
- 位置は、現在位置に速を加算　location.add(velocity);

Mover[] movers = new Mover[1000];//An array of objects
void setup() {
  size(1000, 1000);
  smooth();
  background(0);
  for (int i = 0; i < movers.length; i++) {
    movers[i] = new Mover();// Initialize each object in the array.
  }
}
void draw() {
//  background(0);
  fill(0,40);
  rect(0,0,width,height);
  for (int i = 0; i < movers.length; i++) {
    //Calling functions on all the objects in the array
    movers[i].update();
    movers[i].checkEdges();
    movers[i].display();
  }
}
class Mover {
  PVector location;
  PVector velocity;
  PVector acceleration;
  float topspeed;
  Mover() {
    location = new PVector(random(width), random(height));
    velocity = new PVector(0, 0);
    topspeed = 4.5;
  }
  void update() {
    //Our algorithm for calculating acceleration:
    //Find the vector pointing towards the mouse.
    PVector mouse = new PVector(mouseX, mouseY);
    PVector dir = PVector.sub(mouse, location);
    float magn = dir.mag();
    dir.normalize();// Normalize.
    dir.mult(13 / magn );
//    dir.mult(0.5);// Scale.
    acceleration = dir;// Set to acceleration.
    //Motion 101! Velocity changes by acceleration. Location changes by velocity.
    velocity.add(acceleration);
    velocity.limit(topspeed);
    location.add(velocity);
  }

  void display() {// Display the Mover
//    stroke(0);
    noStroke();
    fill(250,255,100);
    ellipse(location.x, location.y, 10, 10);
  }
  void checkEdges() {// What to do at the edges
    if (location.x > width) {
      location.x = 0;
    } else if (location.x < 0) {
      location.x = width;
    }
    if (location.y > height) {
      location.y = 0;
    } else if (location.y < 0) {
      location.y = height;
    }
  }
}

[編集] 画像ファイルの結合

imagesフォルダにある画像_i000.pngから_i007.png(640*480)を縦2列、横4行に並べて結合する。

000	004
001	005
002	006
003	007

String folderName = "images";
String filePrefix = "_i";

int imageWidth = 640;
int imageHeight = 480;

int margin = 0;

int imageNumX = 2;
int imageNumY = 4;
int imageNum = imageNumX * imageNumY;
// X*Y

int canvasWidth = imageNumX * imageWidth;
int canvasHeight = imageNumY * imageHeight;

PImage images[] = new PImage[imageNum];

void setup() {
  for (int i = 0; i < imageNum; i++) {
    images[i] = loadImage(folderName + "/" + filePrefix + nf(i, 3) + ".png");
  }
  surface.setSize(canvasWidth, canvasHeight);
  noLoop();
}

void draw() {
  background(255);

  for (int i = 0; i < imageNumX; i++) {
    for(int j = 0; j < imageNumY; j++){
      image(images[i*imageNumY + j], imageWidth * i, imageHeight * j, imageWidth, imageHeight);
    }
  }
  save(folderName + "_combine.png");
  exit();
}

[編集] 配列のシャッフル

int[] nN = {0,1,2,3,4,5,6}; 

for(int i=(nN.length - 1); i>0; --i) {
  int j = (int)random(i+1);
  int tmp = nN[i];
  nN[i] = nN[j];
  nN[j] = tmp;
}

[編集] クラスオブジェクトのソート

バブルソート

rectsをメンバlevelの値の小さい順にソートする。

Kurasu[] rects = new kurasu[100];

for(int j=0; j < rects.length - 1; j++){
  for(int i=0; i < rects.length - 1; i++){
    if(rects[i].level > rects[i+1].level){
      Kurasu tmp = rects[i+1];
      rects[i+1] = rects[i];
      rects[i] = tmp;
    }
  }
}

class Kurasu{
  int index;
  int level;
}

[編集] 3D回転

X軸を中心にフェルマーらせんを回転

rotateX()を使う (https://processing.org/reference/rotateX_.html)
size()にP3Dを指定


int itr = 0;  //描画の繰り返し回数
float scalar = 5; //拡大倍率
float rotation;
float r =0;
void setup() {
  size(500, 500, P3D); // 3D座標を指定する
  background(255);  //背景を白くする
  rotation = (1 + sqrt(5)) / 2;
}
void draw() {
  translate(width / 2, height / 2);  //描画ウィンドウの中心に移動
  rotateX(r);
  fill(0);  //点を黒く塗る

  float theta = 2 * PI * itr * rotation; //回転角
  PVector v = PVector.fromAngle(theta);
  v.mult(scalar * sqrt(itr));
  ellipse(v.x, v.y, scalar, scalar); //点を描画
   
  itr++;
  r = r + 0.01;
}

Y軸を中心にフェルマーらせんを回転

rotateY()を使う (https://processing.org/reference/rotateY_.html)
size()にP3Dを指定


int itr = 0;  //描画の繰り返し回数
float scalar = 5; //拡大倍率
float rotation;
float r =0;
void setup() {
  size(500, 500, P3D); // 3D座標を指定する
  background(255);  //背景を白くする
  rotation = (1 + sqrt(5)) / 2;
}
void draw() {
  translate(width / 2, height / 2);  //描画ウィンドウの中心に移動
  rotateY(r);
  fill(0);  //点を黒く塗る

  float theta = 2 * PI * itr * rotation; //回転角
  PVector v = PVector.fromAngle(theta);
  v.mult(scalar * sqrt(itr));
  ellipse(v.x, v.y, scalar, scalar); //点を描画
   
  itr++;
  r = r + 0.01;
}

[編集] 文字列を画面中央に表示

ウィンドウ画面の中央にテキストを配置する方法

文字の表示について、CENTERやwidth/2を使って、横方法は中央に配置することができます。しかし、縦方向については、英語のアルファベットの場合、文字によって、高さや縦の位置が異なるので、 CENTERやheight/2では、うまくいきません。

フォントはベースラインを基準に作成されています。ベースラインから上の長さはAscent、ベースラインから下の長さはDescentと言います。例えば、小文字のj,p などはベースラインから下にはみ出ていますし、小文字のk,lなどは縦に長く、iは短めです。テキストの高さは、Ascent+Descentになります。

ref: https://github.com/alexheretic/ab-glyph/issues/6

これを計算して、縦の位置を指定する必要があります。例えば、以下のようにすると、ウィンドウの中央に配置できます。

void setup() {
  size(400, 400);
  textSize(30);
  textAlign(CENTER,TOP);
  background(0);
}
void draw(){
  float ascent = textAscent();
  float descent = textDescent();
  float textHeight = ascent + descent;
  int textPosY = int(height-textHeight)/2;
  text("pijlk,hello world", width/2, textPosY);
}

[編集] プログラム出力を動画にエクスポート

Processingで実行したプログラムの出力を動画にするには、一旦、saveFrame()関数で、コマ送りの静止画を保存してその後、MovieMakerで静止画をつなげて動画にします。

基本的には、draw()関数の最後にsaveFrame()関数を記述してプログラムを実行した後に、 Processingのツールメニューから、ムービーメーカーを使って、書き出せばよいです。その際、コマ送りの静止画の数が多くなりすぎないように、frameRateを適度に設定するとよいでしょう。なお、frameRateのデフォルトは60です。

void setup(){
  size(500,500);
  frameRate(30);
}
int x = 0;
void draw(){
  if (x < 100) {
    line(x, 0, x, 100);
    x = x + 1;
  } else {
    noLoop();
  }
  // Saves each frame as line000001.png, line000002.png, etc.
  saveFrame("line######.png");
}

[編集] リンク

http://gushwell.ifdef.jp/

素数のグラフィック http://www.datapointed.net/visualizations/math/factorization/animated-diagrams/?infinity

[編集] Contents

Scalable art, Generative art, Mathematical art, Artificial Intelligence, Artificial Life, Complext sysytem
openFrameworks C++ / Xcode MacOSX
Logic circuit
完全情報ゲーム：チェッカー、オセロ、チェス、将棋、囲碁
Cell auttomaton
Conway's game of life
Wire world
Random walk
Langton's ant
Boid
Box2D
Fractal, Self-similar
Recursive call
Complex square
Mandelbrot
Neural network
Genetic algorithm
Code, Chyper, Encript
Space X
Robotics
Expert system
Fourier transform, spectrum
Fibonacci number
Belousov-Zhabotinsky reaction
Gray-Scott model
- https://mrob.com/pub/comp/xmorphia/ogl/index.html
- http://pmneila.github.io/jsexp/grayscott/
- https://github.com/MStrandh/gray_scott_reaction_diffusion
Turing pattern

@@ 1行： / 1行： @@
 == 概要 ==
 ;前提スキル
-一年生の時にメディアプログラミング演習Iを履修したのと同等のプログラミングスキルがあるものとして、授業を進めます。
+*一年生の時にメディアプログラミング演習Iを履修し、基本的なProcessingのプログラミングができること。
-もし、プログラミングに不安があるなら、上記テキストを使って、自分で予習や自習をしてください。
+** 不安な人は、以下の野口先生のメディアプログラミング演習Iのサイトで復習してください。https://r-dimension.xsrv.jp/classes_j/category/processing/
-openFrameworksはProcessingと似ているため、Processingを知っていると、理解が早いです。
+*個人のPC（Windows、MacOSのどちらでもよい）に自分でProcessingの環境を構築できることが望ましい。
-;成績評価
+;授業概要
-*出席：学生証scan。3限PC演習室と4限5303教室で2度タッチすること。
+* インタラクティブアートは芸術を基盤として科学や工学を統合する新しい領域で、プログラミングなどのIT技術によって実現されます。プログラミングによって制作プロセスをアルゴリズム化した作品は、拡張性が高く（スケーラブル）、多様性を持たせることが容易です。これが、スケーラブルアートです。
-*課題：セルオートマトン課題、再帰呼び出し図形課題、複素平面フラクタル課題
+* この授業では、その中でも、生物に見られる生成的（ジェネラティブ）な特徴をアートに応用したジェネラティブアートに関連する分野を扱います。その中には、人工生命、フラクタル、オートマトン、遺伝的アルゴリズム、ニューラルネットワークなどといったものが含まれます。
-*小テスト：[http://www.kuhalabo.net/~web/examination/result_highscore.php?subj_id=3 ハイスコア]
+*プログラミングを使用して、スケーラブルな特徴を持つ作品を作成します。
-;授業概要及び到達目標
+;使用ソフト
-:インタラクティブアートは芸術を基盤として科学や工学を統合する新しい領域である。生物科学に関連した分野として、人工生命、ライフゲーム、フラクタル、オートマトン、遺伝的アルゴリズム、ニューラルネットワークなど応用範囲の広いものが数多く存在する。
+*Processingを使用します。https://processing.org/
-そういった生物に見られる特徴をアートに応用したジェネラティブアートの作品をC++のプログラミングを使用して、実際に作成してみる。
-本講義の目標は以下の通り。
+;到達目標
+*スケーラブルアートについて理解し、応用例を作成できる。
+*生物の特徴と生物的なシステムについて理解する。
+*Processingを使ってジェネラティブアートのプログラミングができる。
-# 生物の特徴と生物的なシステムについて理解する。
+;成績評価
-# 複雑系システムについて理解し、応用例を作成できる。
+*確認テスト、課題、まとめテストで、100点満点で評価します。
-# openFrameworksを使って作品のプログラミングができる。
+;参考資料
+*「[http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=178 数学から創るジェネラティブアート ―Processingで学ぶかたちのデザイン]」([https://www.openprocessing.org/user/57914 Generative Art with Math])
+*「The Nature of Code: Simulating Natural Systems with Processing」
+**英語PDF版は無料でダウンロードできます。https://wtf.tw/ref/shiffman.pdf
+**日本語PDF版を右のサイトで購入できます。https://wgn-obs.shop-pro.jp/?pid=144269527
+**ソースコードがGithubで公開されています。https://github.com/nature-of-code/
+*Processingのチュートリアル [https://processing.org/tutorials/ Processing Tutorial]
 == 開発環境 ==
-開発環境としてopenFrameworks/MacOS XCode, Processing, p5.jsを使用します。
-テキストや開発環境については、以下を参照してください。
+開発環境については、以下を参照してください。
-* openframeworks https://openframeworks.cc/ja/
-* http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=141
 * https://processing.org/
 * p5.js http://p5js.org
@@ 35行： / 41行： @@
 ** https://gihyo.jp/book/2019/978-4-297-10463-4/support/
-== 予定 ==
+* Generative Design
-;2019年度
+**https://github.com/generative-design/Code-Package-Processing-3.x
-# 9/13(金) ガイダンス, 生物と情報とアート，openFrameworksプログラミング体験
-# 9/20(金) 生物と情報とアート，XCodeを使用したopenFrameworksプログラミング実習
-# 9/27(金) 幾何学図形の描画
-#*（oF実習）
-#** 教科書 1章 読み物として読む。
-#** 教科書 2章 実際にプログラムを作ってみる。
-#**　２－４「数値の記憶と計算」までをやり終えて、自作プログラムの実行ファイルを提出。
-#** 幾何学図形の描画、色の設定、変数
-#**　プロジェクトフォルダーのbinフォルダーの中にあります。
-#*** ファイル名　番号_名前のローマ字 例 '''1724000_suzukiichiro'''
-#* 講義： [https://prezi.com/lt7laay6cnxf/color-science-and-art/ ディープラーニングによる色の芸術的表現1]
-#** 完全情報確定ゼロサムゲーム、アルゴリズムとヒューリスティック、エキスパートシステム
-# 10/4(金) 幾何学図形の描画
-#*（oF実習）
-#**　２－８「条件分岐」までを学習し、自作プログラム実行ファイルを提出。
-#** 繰り返し、配列、図形の移動、条件分岐
-#* 講義： [https://prezi.com/lt7laay6cnxf/color-science-and-art/ ディープラーニングによる色の芸術的表現2]
-#** ディープラーニング
-# 10/11(金)
-#*（oF実習）
-#*　２－１１「より高度な表現」までを学習し、自作プログラムの実行ファイルを提出。
-#* マウスアクション、摩擦、重力、軌跡のフェード
-#* この日の授業までに2章を終えてください。2章までに学んで、制作したプログラムを提出してもらいます。
-#* 講義：最大公約数と矩形分割
-# 10/18(金)
-#*（P5実習）
-#*　[https://www.openprocessing.org/user/57914 Generative Art with Math]のCh1, Ch2を学ぶ。
-#*（oF実習）
-#*　３－１，２，３を学習する。
-#** ３－１ は、読んで理解してください。プログラム例は作らなくてもよいです。
-#** ３－２ は、３－２－７「画像ファイルを扱う」だけでもよい。余裕がれば、他の単元を勉強してもよいです。、
-#** ３－３ は、実際に新たにクラスを作成し、プログラムを作りながら、学習を進めてください。
-#*　３－４「アドオンの利用」以降は学習しなくてもよい。関心に応じて学習してください。
-#* 講義：らせん
-# 10/25(金)
-#*（実習）[[クラスの使用]]、[[ランダムウォーク]]
-#* 講義：離散的らせん
-# 11/8(金)1次元セルオートマトン
-#*（実習）
-#* 講義：
-# 11/15(金) ライフゲーム
-#*（実習）
-#* 講義：
-# 11/22(金) ラングトンのアリ
-#*（実習）
-#* 講義：
-# 11/29(金) Boid、物理エンジン Box2D
-#*（実習）
-#* 講義：
-# 12/6(金)フラクタルと自己相似形と再帰呼び出し
-#*（実習）
-#* 講義：
-# 12/13(金) ニューラルネットワーク、遺伝的アルゴリズム
-#*（実習）
-#* 講義：
-# 12/20(金) 小テスト
-#* 授業で扱った内容すべてが含まれます。
-# 1/10(金) 予備日（出席は取りません）
-* 第1課題 2章までの練習プログラム
+* Reference https://processing.org/reference
-** 提出締切日 10/16
-* 第2課題「創発ジェネラティブアートのプログラム」
-** 提出締切日 1/7(月)
-** 「ライフゲーム、Boid、アリ、Box2D、フラクタル」の中から、1つ以上を選び、自分のオリジナリティを加えたプログラムを提出してください。
-** ソースプログラムも採点の対象としますので、プロジェクトのフォルダー全体をzip圧縮して、提出して下さい。
+== 生物と情報とアート ==
+* 生物とは? 生物の特徴とは？
+** 例：小石と貝殻
+** 「生物と無生物の違いは何か？」説明してみよう。
+* ゲノムのDNAマップ [https://www.ncbi.nlm.nih.gov/genome/gdv/ NCBI Genome Map Viewer]
+* [http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=5 ヒト一人を再生するのに必要な情報量は？]
-;Contents
+;[https://www.jw.org/ja/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%83%BC/%E3%83%93%E3%83%87%E3%82%AA/%E5%89%B5%E9%80%A0%E3%81%AE%E9%A9%9A%E7%95%B0%E3%81%AF%E7%A5%9E%E3%81%AE%E6%A0%84%E5%85%89%E3%82%92%E8%A1%A8%E3%82%8F%E3%81%99/%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3/ 自然界の興味深いパターン]
+*自己相似性、フラクタル
+**雪の結晶(0:25)
+**樹木(1:17)
+**オウム貝(1:30)
+*らせん、渦巻き状パターン
+*黄金角とフィボナッチ数列(3:00)
-# Scalable art, Generative art, Mathematical art, Artificial Intelligence, Artificial Life, Complext sysytem
+;ジェネラティブアート
-# openFrameworks C++ / Xcode MacOSX
+:自律性
-# Logic circuit
+:予測不可能性
-# 完全情報ゲーム：チェッカー、オセロ、チェス、将棋、囲碁
+:パラメータ変形
-# Cell auttomaton
+:偶発性
-# Conway's game of life
+:自己相似性
-# Wire world
+:再帰性
-# Random walk
+:対称性
-# Langton's ant
+:周期性
-# Boid
+:双対性
-# Box2D
+:抽象化と具体化
-# Fractal, Self-similar
-# Recursive call
-# Complex square
-# Mandelbrot
-# Neural network
-# Genetic algorithm
-# Code, Chyper, Encript
-# Space X
-# Robotics
-# Expert system
-# Fourier transform, spectrum
-# Fibonacci number
-# Belousov-Zhabotinsky reaction
-# Gray-Scott model
-#* https://mrob.com/pub/comp/xmorphia/ogl/index.html
-#* http://pmneila.github.io/jsexp/grayscott/
-#* https://github.com/MStrandh/gray_scott_reaction_diffusion
-# Turing pattern
-#
-#
-#
-== 資料 ==
+== 数学と力学の基礎 ==
+[https://github.com/nature-of-code/noc-examples-processing/tree/master/chp01_vectors Nature of Code Chapter 1 Vector Git Processing]
-* oF 0.9.x 1からの変更点　https://qiita.com/2bbb/items/13f2e20760ec61e3ec89
+=== ベクトル ===
+「Nature of Code」第1章の「1.1-1.6」[https://wtf.tw/ref/shiffman.pdf pdf]
-* new　⇐　	old
+*ベクトルを復習するための動画：[https://www.youtube.com/playlist?list=PLiRy47VSZM635-b9NzlvebaOzI6m9zzvG 高校数学Bベクトルの定義・成分]
-** ofDrawLine　⇐　ofLine
-** ofDrawCurve　⇐　	ofCurve
-** ofDrawBezier　⇐　	ofBezier
-** ofDrawCircle　⇐　	ofCircle
-** ofDrawEllipse　⇐　	ofEllipse
-** ofDrawTriangle　⇐　	ofTriangle
-** ofDrawRectangle　⇐　	ofRect
-** ofDrawRectRounded　⇐　	ofRectRounded
-** ofDrawSphere　⇐　	ofSphere
-** ofDrawCone　⇐　	ofCone
-** ofBox　⇐　	ofDrawBox
-== oF新規プロジェクトの作成 ==
+=== 位置・速度・加速度 ===
+「Nature of Code」第1章の「1.7-1.10」[https://wtf.tw/ref/shiffman.pdf pdf]
-# oFフォルイダー内のprojectGeneratorフォルダー内のprojectGeneratorを実行する。
+* 動くボールの位置、速度、加速度はベクトルとして表すことができます。
-# Project Path:にoFのあるフォルダーを指定する。
+* 速度は、位置の変化の割合、すなわち「次の位置＝現在位置＋速度」
-# Project Name:に、プロジェクトの名前を入れる。
+**秒速10m/sのボールの1秒後の位置＝現在位置＋10
-# Addons:に、使用する追加機能（アドオン）を入れる。通常は、なしでよい。
+*加速度は、速度の変化の割合、すなわち「次の速度＝現在速度＋加速度」
-# Generateをクリックする。
+**自然落下運動の加速度は、重力加速度といい、9.8m/s2（秒の2乗）
-# Apps内のMyAppsにマイプロジェクトが作成されている。
+**したがって、自然落下するボールの1秒後の速度＝現在速度＋9.8
-# Open IDEをクリックした場合
-#* XCodeが立ち上がることを確認する。
-# Closeをクリックした場合
-#* Apps内のMyAppsに作成したプロジェクトフォルダーを開く。
-#* プロジェクト名.xcodeprojファイルをクリックして、XCodeを起動する。
-# 作成したプロジェクトを起動し、srcを見てみる。
-#* ofApp.cppのメソッドの中身が空っぽ。
-#* ここにプログラムを書いていく。
-== oFクラスの作成 ==
+;重力加速度　国土地理院 「重力を知る」https://www.gsi.go.jp/buturisokuchi/grageo_gravity.html
-=== XCode ===
+=== トポロジー ===
-# 新しくクラスを作るには、'''「Fileメニュー > New > File」''' を開く。
+;パックマン型2次元世界は、3次元ではトーラス（ドーナツ型）
-# '''「macOS」'''タブの'''「Source」'''から、'''「C++ File」'''を選び、'''「Next」'''ボタンを押す。
+: https://wakara.co.jp/mathlog/20200204
-# Nameにはクラス名を入れます。その際、'''「Also create a header file」'''のチェックを入れておきます。そして'''「Next」'''ボタンを押します。
-#* 名前を それぞれ'''Xxx.cpp'''，'''Xxx.h'''とし、場所はともに '''..\src''' とする。
-# '''src'''の中に'''Xxx.cpp''' と '''Xxx.h''' が新規作成される。
-=== Visual Studio ===
+== 数学アート ==
-# 新しくクラスを作るには、'''「プロジェクト ＞ 新しい項目の追加...」''' を開き，'''「C++ファイル」'''と'''「ヘッダーファイル」'''を一つずつ作る。
-#* 名前を それぞれ'''Xxx.cpp'''，'''Xxx.h'''とし、場所はともに '''..\src''' とする
-#* （注）「クラスの追加」や「クラスウィザード」は使えない。
-# マウスカーソルをソリューションエクスプローラー上の'''src'''に置き、ハイライトさせる。
-# ソリューションエクスプローラー上の'''src'''の中に'''Xxx.cpp''' と '''Xxx.h''' が新規作成される。
-ヘッダファイル '''Xxx.h''' は，
+=== [[矩形分割]] ===
-<pre>
-#pragma once
-#include "ofMain.h"
-class Xxx {
+=== [[フィボナッチ数列]] ===
-private:
-	ofPoint pos;
-	float radius;
-public:
+=== [[らせん]] ===
-	Xxx();
-	void hogehoge();
-};
-</pre>
-などと、記述する。
-* '''ofMain.h''' をインクルードし、クラスの定義の最後にセミコロンがつくことに注意する。
+=== [[整数の合同]] ===
-* '''#pragma once''' は，このヘッダファイルを複数回読み込まないようにするためのもの。
-* 括弧で囲まれた部分 '''{...}''' には，変数の宣言やメソッド（関数）の宣言を書く
-* '''private:''' に続く部分には，クラス内部のみで利用する変数、メソッドを宣言する。
-* '''public:''' に続く部分には，クラス外部からアクセスできる変数、メソッドを宣言する。
-* '''Xxx():''' はコンストラクターといい、クラスと同じ名前のメソッドである。クラスのインスタンスを生成するときの初期化処理などを記述する。
-C++ファイル Xxx.cpp は，
+=== [[コラッツ予想]] ===
-<pre>
-#include "Xxx.h" // クラスのヘッダーを読み込む
-Xxx::Xxx(){
+== 人工生命(ALife) ==
-	pos = ofPoint(ofGetWidth()/2, ofGetHeight()/2);
-	radius = 100.0;
-}
-void Xxx::hogehoge(){
+=== [[セルオートマトン]] ===
-	ofSetColor(31, 63, 255, 100);
-	ofCircle(pos.x, pos.y, radius);
-	ofSetColor(255, 0, 0, 200);
+=== [[ラングトンのアリ]] ===
-	ofCircle(pos.x, pos.y, radius);
-}
-</pre>
-などと、メソッドの本体を記述する。
-* メソッドの定義の最後にセミコロンが'''つかない'''ことに注意する。
+=== [[レイノルズのボイド]] ===
-もとのcppファイルodApp.cppのヘッダーファイル'''ofApp.h'''に、Xxx.hをincludeする。
+=== [[反応拡散系]] ===
-例えば、'''ofApp.h'''は、以下のとおり。
-<pre>
-#pragma once
-#include "ofMain.h"
+=== [[フラクタル]] ===
-#include "Ball.h"
-class ofApp : public ofBaseApp{
+== 人工知能(AI) ==
-public:
-	bool mouse_pressed;
-public:
+=== [[Genetic Algorithm]] ===
-	void setup();
-	void update();
-	void draw();
-	void keyPressed(int key);
+=== [[Neural Networks]] ===
-	void keyReleased(int key);
-	void mouseMoved(int x, int y );
-	void mouseDragged(int x, int y, int button);
-	void mousePressed(int x, int y, int button);
-	void mouseReleased(int x, int y, int button);
-	void windowResized(int w, int h);
-	void dragEvent(ofDragInfo dragInfo);
-	void gotMessage(ofMessage msg);
-	Xxx myCbj;
+== Processing Samples ==
-};
-</pre>
-'''public'''の領域に'''Xxxクラス'''のインスタンス'''myObj'''を宣言している。
-== 生物と情報とアート ==
+===音に反応する円===
-* 生物とは? 生物の特徴とは？
-** 例：小石と貝殻
-** 「生物と無生物の違いは何か？」説明してみよう。
-* ゲノムのDNAマップ [https://www.ncbi.nlm.nih.gov/genome/gdv/ NCBI Genome Map Viewer]
-* [http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=5 ヒト一人を再生するのに必要な情報量は？]
-http://abandonedart.org/
+minimライブラリーをインストールする。
-== 論理回路 ==
-https://wwws.kobe-c.ac.jp/deguchi/sc180/logic/gate.html
-== 最大公約数と矩形分割 ==
-;現代アート作家　モンドリアンの代表作品、Composition
-=== 最大公約数 ===
-;ユークリッドの互除法
-* 自然数x0,x1の最大公約数の求め方（x0 > x1）
-*# x0をx1で割り、余りをx2とする。
-*# x1をx2で割り、余りをx3とする。
-*#* 割り切れるまで、この操作を繰り返す。
-*# xNで割り切れたら、xNが最大公約数である。
 <pre>
-//aとbに対してユークリッド互除法を行う
+/**
-int a = 10;
+* Circles responding Sound Level
-int b = 6;
+*/
-int c;  //商のための変数
-int d = b;  //余りのための変数
-int itr = 0;  //繰り返しの回数
-//繰り返し処理
-while (d > 0){    //余りが0以上のとき以下の処理を実行
-  itr++;  //繰り返し回数を1増やす
-  c = a / b;  //cに商を代入
-  d = a % b ;  //dに余りを代入
-  println(itr, ":", a, "/", b, "=", c, "...", d);  //計算結果を表示
-  a = b;  //aにbを代入
-  b = d;  //bに余りを代入
-}
-println("GCD is", a);  //最大公約数を表示
-</pre>
-=== 長方形の分割 ===
+import ddf.minim.spi.*;
-;ユークリッドの互除法を可視化してみる。
+import ddf.minim.signals.*;
+import ddf.minim.*;
+import ddf.minim.analysis.*;
+import ddf.minim.ugens.*;
+import ddf.minim.effects.*;
-* 自然数x0,x1を2辺とする長方形を正方形で分割する。
+Minim minim;
-** 最も小さい正方形の1辺が最大公約数
+AudioInput in;
-;DivRect
+void setup(){
-<pre>
+  size(500, 500);
-//横縦比がnumA:numBの長方形を正方形によって分割
+  minim = new Minim(this);
-int numA = 10;
+   in = minim.getLineIn(Minim.STEREO, 512);
-int numB = 6;
+   background(0);
-int scalar = 50;   //長方形の拡大倍率
-numA *= scalar;       //数値の大きさを拡大
-numB *= scalar;
-//プログラム実行中に動く変数
-int wd = numB;    //分割に使う正方形の幅の大きさ(初期値numB)
-int xPos = 0;    //正方形のx位置(初期値0)
-int yPos = 0;    //正方形のy位置(初期値0)
-int itr = 0;  //分割の繰り返し回数(初期値0)
-//描画
-size(500, 500);    //描画ウィンドウサイズ
-//繰り返し処理
-while (wd > 0){ //幅が0になるまで以下を実行
-  itr++;              //繰り返し回数を1増やす
-   if (itr % 2 == 1){      //繰り返し回数が奇数のとき，x軸方向へ正方形を増やす
-    while (xPos + wd <= numA){    //幅を足したとき，長方形を超えなければ以下を実行
-      rect(xPos, yPos, wd, wd);      //(xPos,yPos)を左上の頂点とする1辺wdの正方形を描画
-      xPos += wd;                //x位置を更新
-    }
-    wd = numA - xPos;             //幅を更新
-   } else {              //繰り返し回数が偶数のとき，y軸方向へ正方形を加える
-    while (yPos + wd <= numB){    //幅を足したとき，長方形を超えなければ以下を実行
-      rect(xPos, yPos, wd, wd);      //(xPos,yPos)を左上の頂点とする1辺wdの正方形を描画
-      yPos += wd;                //y位置を更新
-    }
-    wd = numB - yPos;            //幅を更新
-  }
 }
-</pre>
-;正方形に色を付けてみる
+void draw(){
+  colorMode(RGB, 255);
-<pre>
+  fill(0, 150);
-int numA = 10;
+   rect(-1, -1, width, height);
-int numB = 6;
+  colorMode(HSB, 360, 100, 100);
-int scalar = 50;
+  float brightness = 50 + map(in.mix.level(), 0, 0.5, 0, 50);
-numA *= scalar;
+   float hue = map(in.mix.level(), 0, 0.7, 0, 360);
-numB *= scalar;
+  fill(hue, 100, brightness);
-int wd = numB;
+  float radious = 50 + map(in.mix.level(), 0, 0.5, 0, 100);
-int xPos = 0;
+  int x = 250;
-int yPos = 0;
+  int y = 250;
-int itr = 0;
+   ellipse( x, y, radious *2, radious * 2);
-color col;  //色のための変数
-//描画
-size(500, 500);
-colorMode(HSB, 1);  //01区間をパラメータとするHSB色形式を使用
-//ループ
-while (wd > 0) {
-  itr++;
-   if (itr % 2 ==1) {
-    while (xPos + wd <= numA) {
-      col = color(random(1), 1, 1);  //色相のみを01区間でランダムに変える
-      fill(col);
-      rect(xPos, yPos, wd, wd);
-      xPos += wd;
-    }
-    wd = numA - xPos;
-   } else {
-    while (yPos + wd <= numB) {
-      col = color(random(1), 1, 1);
-      fill(col);
-      rect(xPos, yPos, wd, wd);
-      yPos += wd;
-    }
-    wd = numB - yPos;
-   }
 }
-</pre>
+void stop(){
+   in.close();
-=== 正方形の分割 ===
+  minim.stop();
+   super.stop();
-自然数x0とx1の縦横比x0:x1を使って、長方形を正方形に変形すると、正方形を長方形に分割することになる。
-* x0×x1の横長の長方形を x1/x0 に横方向に圧縮して正方形にする。
-;DivSquare
-<pre>
-//縦横比がnumA:numBの長方形によって正方形の描画ウィンドウを分割
-int numA = 10;
-int numB = 6;
-float ratio = (float) numB / numA;  //比率
-float xPos = 0;
-float yPos = 0;
-int itr = 0;
-//描画
-size(500, 500);
-colorMode(HSB, 1);
-float wd = width;    //描画ウィンドウの横幅サイズを初期値とする
-//繰り返し処理
-while (wd > 0.1){   //幅が許容誤差より大きければ以下を実行
-   itr++;
-  if (itr % 2 == 1){  //縦幅がwdの長方形をx軸方向へ加える
-    while (xPos + wd * ratio < width + 0.1){
-      //幅を足したとき，横幅がウィンドウを超えなければ以下の処理を実行
-      fill(color(random(1), 1, 1));
-      rect(xPos, yPos, wd * ratio, wd);      //縦幅wd，縦横比がnumA:numBの長方形を描画
-      xPos += wd * ratio;                //x位置を更新
-    }
-    wd = width - xPos;
-   } else {  //横幅がwdの長方形をy軸方向へ加える
-    while (yPos + wd / ratio < width + 0.1){
-      //幅を足したとき，縦幅がウィンドウを超えなければ以下の処理を実行
-      fill(color(random(1), 1, 1));  //ランダムに色を指定
-      rect(xPos, yPos, wd, wd / ratio);      //横幅wd，縦横比がnumA:numBの長方形を描画
-      yPos += wd / ratio;                //y位置を更新
-    }
-    wd = width - yPos;
-  }
 }
 </pre>
-=== 矩形の再帰的分割 ===
-長方形を正方形に分割し、その正方形を長方形に分割する。
-<pre>
+=== カメラ入力 ===
-//縦横比がnumB:numAの長方形を逆の比の長方形によって分割
+Video|GStreamer-based video library for Processingライブラリをインストール。
-int numA = 10;
-int numB = 6;
-float ratio = (float) numB / numA;
-void setup(){ //最初に1度だけ実行する関数
-  size(500, 500);
-  colorMode(HSB, 1);
-  //この関数内だけのローカル変数
-  int itr = 0;
-  float xPos = 0;
-  float yPos = 0;
-  float wd = width * ratio;
-  while (wd > 0.1){
-    itr++;
-    if (itr % 2 == 1){
-      while (xPos + wd < width + 0.1){
-        divSquare(xPos, yPos, wd);  //正方形を分割する関数の呼び出し
-        xPos += wd;
-      }
-      wd = width - xPos;
-    } else {
-      while (yPos + wd < width * ratio + 0.1){
-        divSquare(xPos, yPos, wd);  //正方形を分割する関数の呼び出し
-        yPos += wd;
-      }
-      wd = width * ratio - yPos;
-    }
-  }
-}
-</pre>
-正方形を長方形に分割する関数
+;使用可能なカメラのリスト出力
 <pre>
-//位置(xPos,yPos)にある1辺がwdの正方形を縦横比がnumA:numBの長方形で分割する
+import processing.video.*;
-void divSquare(float xPos, float yPos, float wd){
-  //この関数内だけのローカル変数
-  int itr = 0;
-  float xEndPos = wd + xPos;  //正方形の右下の頂点のx座標
-  float yEndPos = wd + yPos;  //正方形の右下の頂点のy座標
-  //繰り返し処理
-  while (wd > 0.1){
-    itr++;
-    if (itr % 2 == 1){
-      while (xPos + wd * ratio < xEndPos + 0.1){  //ratioはグローバル変数
-        fill(color(random(1), 1, 1));
-        rect(xPos, yPos, wd * ratio, wd);
-        xPos += wd * ratio;
-      }
-      wd = xEndPos - xPos;
-    } else {
-      while (yPos + wd / ratio < yEndPos + 0.1){
-        fill(color(random(1), 1, 1));
-        rect(xPos, yPos, wd, wd / ratio);
-        yPos += wd / ratio;
-      }
-      wd = yEndPos - yPos;
-    }
-  }
-}
-</pre>
-* 正方形を長方形に分割し、その長方形を正方形に分割し、その正方形を長方形に分割し、・・・
-* 再帰的に関数を呼び出す。
-** 再帰呼び出しを止めるしきい値（Threshold）を設定する。
-<pre>
-int numA = 10;
-int numB = 6;
-float ratio = (float) numB / numA;
-float thr = 160;  //しきい値
 void setup(){
-   size(500, 500);
+   size(320, 240);
-   colorMode(HSB, 1);
-   divSquare(0, 0, width); //正方形の分割
+   String[] cameras = Capture.list();
-}
-</pre>
+  for(int i=0; i<cameras.length; i++){
+     println("[" + i + "] " + cameras[i]);
-divSquare
-<pre>
-//位置(xPos,yPos)にある1辺がwdの正方形を縦横比がnumA:numBの長方形で分割する
-void divSquare(float xPos, float yPos, float wd){
-  int itr = 0;
-  float xEndPos = wd + xPos;
-  float yEndPos = wd + yPos;
-  fill(color(random(1), 1, 1));
-  rect(xPos, yPos, wd, wd);
-  while (wd > thr){  //wdがしきい値以上の場合に処理を行う
-     itr++;
-    if (itr % 2 == 1){
-      while (xPos + wd * ratio < xEndPos + 0.1){
-        divRect(xPos, yPos, wd * ratio);  //長方形を分割する関数の呼び出し
-        xPos += wd * ratio;
-      }
-      wd = xEndPos - xPos;
-    } else {
-      while (yPos + wd / ratio < yEndPos + 0.1){
-        divRect(xPos, yPos, wd);  //長方形を分割する関数の呼び出し
-        yPos += wd / ratio;
-      }
-      wd = yEndPos - yPos;
-    }
    }
-}
-</pre>
-divRect
-<pre>
-//位置(xPos,yPos)にある横幅wdで縦横比がnumA:numBの長方形を正方形によって分割する
-void divRect(float xPos, float yPos, float wd){
-  int itr = 0;
-  float xEndPos = xPos + wd;
-  float yEndPos = yPos + wd / ratio;
-  fill(color(random(1), 1, 1));
-  rect(xPos, yPos, wd, wd / ratio);
-  while (wd > thr){   //長方形の幅がしきい値以上の場合に処理を行う
-    itr++;
-    if (itr % 2 == 0){
-      while (xPos + wd < xEndPos + 0.1){
-        divSquare(xPos, yPos, wd);  //正方形を分割する関数の呼び出し
-        xPos += wd;
-      }
-      wd = xEndPos - xPos;
-    } else {
-      while (yPos + wd < yEndPos + 0.1){
-        divSquare(xPos, yPos, wd);  //正方形を分割する関数の呼び出し
-        yPos += wd;
-      }
-      wd = yEndPos - yPos;
-    }
-  }
 }
 </pre>
-マウスクリックでx0,x1,thresholdをランダムに設定して描画する。
+;カメラ画像の出力
 <pre>
-void mouseClicked(){
+import processing.video.*;
-  numA = int(random(1, 20));  //1以上20以下のランダムな整数を代入
+Capture cam;
-  numB = int(random(1, 20));
-  while (numA == numB){ //numAとnumBが異なるようにする
-    numB = int(random(1, 20));
-  }
-  thr = int(random(10,300));
-  println("numA =", numA, "numB =", numB,"thr =", thr);  //numA,numB,thrの値を表示
-  ratio = (float) numA / numB;
-  background(0, 0, 1);  //背景を白で消去
-  divSquare(0, 0, width);
-}
-void draw(){} //プログラムを実行している間，繰り返し実行する関数
-</pre>
-=== 無理数比の矩形分割 ===
-* 縦横比
-** sqrt(2) 自己相似形。A4,B4サイズの用紙
-** (1 + sqrt(5) ) / 2  黄金比
-;モンドリアンの再現
-<pre>
-float ratio = (sqrt(5) + 1) / 2;  //黄金数
-float thr = 40;  //分割する大きさに関するしきい値
-float thr2 = 0.5; //確率を決定するしきい値
 void setup(){
-   size(500, 500);
+   size(640, 480);
-   colorMode(HSB, 1);
-   colorRect(0, 0, width, width);
+  String[] cameras = Capture.list();
-   divSquare(0, 0, width);
+   for(int i=0; i<cameras.length; i++){
+    println("[" + i + "] " + cameras[i]);
+   }
+  cam = new Capture(this, cameras[1]);
+  cam.start();
 }
-</pre>
-モンドリアン風に配色を決める
+void draw(){
-<pre>
+   if(cam.available() == true){
-void colorRect(float xPos, float yPos, float wd, float ht){
+     cam.read();
-  color col;
-  float val = random(1);
-   if (val < 0.15){  //15%の確率
-    col = color(0, 1, 1); //赤
-  }else if (val < 0.3){ //15%の確率
-    col = color(2.0 / 3, 1, 1); //青
-  }else if (val < 0.45){  //15%の確率
-    col = color(1.0 / 6, 1, 1); //黄
-  }else if (val < 0.5){ //5%の確率
-     col = color(0, 1, 0); //黒
-  } else if (val < 0.7){  //20%の確率
-    col = color(0, 0, 0.9); //灰
-  } else {  //30%の確率
-    col = color(0, 0, 1); //白
    }
-   fill(col);
-   strokeWeight(5);  //長方形の枠線の太さ
+   image(cam, 0, 0);
-  rect(xPos, yPos, wd, ht);
 }
 </pre>
-矩形分割
+;差分から動きを検出
 <pre>
-void divRect(float xPos, float yPos, float wd){  //長方形を分割する関数
+import processing.video.*;
-  int itr = 0;
-  float xEndPos = xPos + wd;  //長方形の横の長さ
+int numPixels;
-  float yEndPos = yPos + wd / ratio;   //長方形の縦の長さ
+int[] previousFrame;
-  while (wd > thr){   //wdがしきい値以上の場合に処理を行う
+int noiseFilter = 50;
-    itr++;
+Capture video;
-    if (itr % 2 == 0){
-      while (xPos + wd < xEndPos + 0.1){
+void setup() {
-        colorRect(xPos, yPos, wd, wd);  //正方形を描く
+  size(640, 480);
-        if (random(1) < thr2){
-          divSquare(xPos, yPos, wd);  //正方形を分割する関数の呼び出し
+  video = new Capture(this, width, height, 30);
-        }
+  video.start();
-        xPos += wd;
-      }
+  numPixels = video.width * video.height;
-      wd = xEndPos - xPos;
+  previousFrame = new int[numPixels];
-    } else {
+   loadPixels();
-      while (yPos + wd < yEndPos + 0.1){
-        colorRect(xPos, yPos, wd, wd);  //正方形を描く
-        if (random(1) < thr2){
-          divSquare(xPos, yPos, wd);  //正方形を分割する関数の呼び出し
-        }
-        yPos += wd;
-      }
-      wd = yEndPos - yPos;
-    }
-   }
 }
-void divSquare(float xPos, float yPos, float wd){  //正方形を分割する関数
+void draw() {
-   int itr = 0;
+   if (video.available()) {
-  float xEndPos = wd + xPos;  //正方形の横の長さ
+    video.read();
-  float yEndPos = wd + yPos;  //正方形の縦の長さ
+    video.loadPixels();
-  while (wd > thr){  //正方形の幅がしきい値以上の場合に実行
-    itr++;
+    int movementSum = 0;
-    if (itr % 2 ==1){
+    for (int i = 0; i < numPixels; i++) {
-      while (xPos + wd * ratio < xEndPos + 0.1){
+      color currColor = video.pixels[i];
-        colorRect(xPos, yPos, wd * ratio, wd);  //長方形を描く
+      color prevColor = previousFrame[i];
-        if (random(1) < thr2){  //thr2の確率で再分割
-          divRect(xPos, yPos, wd * ratio);  //長方形を分割する関数の呼び出し
+      //R, G, B
-        }
+      int currR = (currColor >> 16) & 0xFF;
-        xPos += wd * ratio;
+      int currG = (currColor >> 8) & 0xFF;
-       }
+      int currB = currColor & 0xFF;
-       wd = xEndPos - xPos;
-    } else {
+      //
-       while (yPos + wd / ratio < yEndPos + 0.1){
+      int prevR = (prevColor >> 16) & 0xFF;
-         colorRect(xPos, yPos, wd, wd / ratio);  //長方形を描く
+      int prevG = (prevColor >> 8) & 0xFF;
-         if (random(1) < thr2){  //thr2の確率で再分割
+      int prevB = prevColor & 0xFF;
-          divRect(xPos, yPos, wd);  //長方形を分割する関数の呼び出し
-        }
+      //
-         yPos += wd / ratio;
+      int diffR = abs(currR - prevR);
+       int diffG = abs(currG - prevG);
+       int diffB = abs(currB - prevB);
+       //noiseFilter
+      if (diffR + diffG + diffB > noiseFilter) {
+         movementSum ++;
+        pixels[i] = color(currR, currG, currB);
+        //
+         //pixels[i] = 0xFF000000 | (currR << 16) | (currG << 8) | currB;
+      } else {
+         pixels[i] = color(0);
        }
-       wd = yEndPos - yPos;
+       //
+      previousFrame[i] = currColor;
      }
+    updatePixels();    //
+    println(movementSum);    //
    }
 }
 </pre>
-マウスクリックでランダムに再構成
-<pre>
-void mouseClicked(){
-  thr = int(random(10, 50));
-  thr2 = random(0,1);
-  println("thr =", thr, "thr2 =", thr2);
-  colorRect(0, 0, width, width);
-  divSquare(0, 0, width);
-}
-void draw(){}
-</pre>
-== フィボナッチ数列 ==
+=== 引力と加速度 ===
-* f(0) = 0, f(1) = 1, f(n) = f(n-1) + f(n-2)
-* 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, …
-<pre>
-int num = 40;
-int[] fibo = {0,1}; // Initial Fibonacci
-int i = 0;
-println(i, ":", fibo[i]);
-for(i = 1; i < num; i++){
-  println(i, ":", fibo[i]);
-  fibo = append(fibo, fibo[i-1] + fibo[i]);
-}
-</pre>
-=== フィボナッチ数列の可視化 ===
+「Nature of Code」第1章の「1.10 Interactivity with Acceleration」(p57)より。（一部改変）[https://wtf.tw/ref/shiffman.pdf pdf]
+*粒子はマウスポインタに引力で引き付けられれ、軌跡を残しながらマウスに近づく。
+*引力は、距離が近いほど、強くなる（反比例）。
+*速度には上限(topspeed)があり、引力と粒子の運動量（速度）が釣り合うと、マウスのまわりを回る惑星のような動きになる。
+*Moverクラスの作成
+**ベクトルPVectorを使い、location（位置）、velocity（速度）、acceleration（加速度）定義し、力学運動を記述している。
+** 速度は、現在速度に加速度を加算　velocity.add(acceleration);
+** 位置は、現在位置に速を加算　location.add(velocity);
-フィボナッチ数を1辺とする正方形を敷き詰めて、長方形を描く。
 <pre>
-int[] fibo = {0,1,1};
+Mover[] movers = new Mover[1000];//An array of objects
-int[] SGN = {-1, 1, 1, -1};  //敷き詰める方向を決める符号
+void setup() {
-void setup(){
+   size(1000, 1000);
-   size(500, 500);
+   smooth();
-   colorMode(HSB, 1);
+   background(0);
-   drawSpiral();
+  for (int i = 0; i < movers.length; i++) {
+    movers[i] = new Mover();// Initialize each object in the array.
+  }
 }
-</pre>
+void draw() {
+//  background(0);
-<pre>
+   fill(0,40);
-void drawSpiral(){
+   rect(0,0,width,height);
-  float xPos = 0;
+   for (int i = 0; i < movers.length; i++) {
-   float yPos = 0;
+     //Calling functions on all the objects in the array
-  float scalar = (float) width / (2 * fibo[fibo.length - 1]);  //拡大・縮小比率
+     movers[i].update();
-   background(0, 0, 1);
+     movers[i].checkEdges();
-  translate(width / 2 ,height / 2); //描画ウィンドウ中央に移動
+     movers[i].display();
-   for(int i = 1; i < fibo.length - 1; i++){
-    fill((0.1 * i) % 1, 1, 1);
-     //正方形を描く方向を符号の配列に従って変える
-     rect(scalar * xPos,
-      scalar * yPos,
-      scalar * SGN[(i+1) % 4] * fibo[i],  //符号が負の場合，逆方向に正方形を描画
-      scalar * SGN[i % 4] * fibo[i]);
-     //正方形の位置を符号の配列に従って変える
-    if (i % 2 == 1){
-      xPos += SGN[i % 4] * (fibo[i] + fibo[i + 1]);
-     } else {
-      yPos += SGN[i % 4] * (fibo[i] + fibo[i + 1]);
-    }
    }
 }
-</pre>
+class Mover {
+  PVector location;
+  PVector velocity;
+  PVector acceleration;
+  float topspeed;
+  Mover() {
+    location = new PVector(random(width), random(height));
+    velocity = new PVector(0, 0);
+    topspeed = 4.5;
+  }
+  void update() {
+    //Our algorithm for calculating acceleration:
+    //Find the vector pointing towards the mouse.
+    PVector mouse = new PVector(mouseX, mouseY);
+    PVector dir = PVector.sub(mouse, location);
+    float magn = dir.mag();
+    dir.normalize();// Normalize.
+    dir.mult(13 / magn );
+//    dir.mult(0.5);// Scale.
+    acceleration = dir;// Set to acceleration.
+    //Motion 101! Velocity changes by acceleration. Location changes by velocity.
+    velocity.add(acceleration);
+    velocity.limit(topspeed);
+    location.add(velocity);
+  }
-<pre>
+   void display() {// Display the Mover
-void mouseClicked() {
+//    stroke(0);
-   int nextFibo = fibo[fibo.length-2] + fibo[fibo.length-1];
+    noStroke();
-  fibo = append(fibo, nextFibo);
+     fill(250,255,100);
-  drawSpiral();
+     ellipse(location.x, location.y, 10, 10);
-  println(nextFibo);
+  }
-}
+  void checkEdges() {// What to do at the edges
-void draw(){}
+    if (location.x > width) {
-</pre>
+       location.x = 0;
+    } else if (location.x < 0) {
-フィボナッチらせんを描く関数
+       location.x = width;
-<pre>
+    }
-void drawSpiral(){
+     if (location.y > height) {
-  float xPos = 0;
+       location.y = 0;
-  float yPos = 0;
+     } else if (location.y < 0) {
-  float scalar = (float) width / (2 * fibo[fibo.length-1]);  //拡大・縮小比率
+       location.y = height;
-  background(0, 0, 1);
-  translate(width / 2 ,height / 2); //描画ウィンドウ中央に移動
-  for(int i = 1; i < fibo.length - 1; i++){
-     stroke(0, 0, 0);
-     rect(scalar * xPos,
-      scalar * yPos,
-      scalar * SGN[(i+1) % 4] * fibo[i],
-      scalar * SGN[i % 4] * fibo[i]);
-    stroke(0, 1, 1);
-    arc(scalar * (xPos + SGN[(i+1) % 4] * fibo[i]),  //円の中心のx座標
-      scalar * (yPos + SGN[i % 4] * fibo[i]),  //円の中心のy座標
-       scalar * 2 * fibo[i],  //楕円の縦の直径
-      scalar * 2 * fibo[i],  //楕円の横の直径(正円のため縦と同じ)
-       (1 + i) * PI / 2,  //円弧の開始位置(ラジアン)
-      (2 + i) * PI / 2);  //円弧の終了位置
-     if (i % 2 == 1){
-       xPos += SGN[i % 4] * (fibo[i] + fibo[i+1]);
-     } else {
-       yPos += SGN[i % 4] * (fibo[i] + fibo[i+1]);
      }
    }
@@ 792行： / 367行： @@
 </pre>
-== らせん ==
-* 極座標表示
-* 三角関数
-;3種のらせん
+=== 画像ファイルの結合 ===
-:アルキメデスらせん
+imagesフォルダにある画像_i000.pngから_i007.png(640*480)を縦2列、横4行に並べて結合する。
-:フェルマーらせん
+<table border=1>
-:対数らせん
+<tr><td>000</td><td>004</td></tr>
+<tr><td>001</td><td>005</td></tr>
+<tr><td>002</td><td>006</td></tr>
+<tr><td>003</td><td>007</td></tr>
+</table>
-らせんの描画
 <pre>
-float theta = 0;
+String folderName = "images";
-float STEP = 2 * PI * 0.01; //曲線の精度
+String filePrefix = "_i";
-void setup(){
-  size(500, 500);
-}
-void draw(){
-  translate(width / 2, height / 2);  //描画ウィンドウの中心に移動
-  line(rad(theta) * cos(theta),
-   rad(theta) * sin(theta),
-   rad(theta + STEP) * cos(theta + STEP),
-   rad(theta + STEP) * sin(theta + STEP));
-  theta += STEP;
-}
-float rad(float t){ //動径を定める関数
-  float r = 5 * t;  //アルキメデスらせん
-  //float r = 20 * sqrt(t); //フェルマーらせん
-  // float r = pow(1.1, t); //対数らせん
-  return(r);
-}
-</pre>
-自己相似な対数らせん
+int imageWidth = 640;
-<pre>
+int imageHeight = 480;
-float STEP = 2 * PI * 0.01; //曲線の精度
-void setup(){
-  size(500, 500);
-  colorMode(HSB, 1);
-}
-void draw(){
-  background(1,0,1);
-  drawLogSpiral();  //対数らせんを描画
-}
-</pre>
+int margin = 0;
-<pre>
+int imageNumX = 2;
-void drawLogSpiral(){
+int imageNumY = 4;
-  float theta = 0;
+int imageNum = imageNumX * imageNumY;
-  float scalar = pow(10, (float) mouseX / width) * height / 2;
+// X*Y
-  //マウスのx座標によって1～10倍に拡大する
-  translate(width / 2, height / 2);  //描画ウィンドウの中心に移動
-  for(int i = 0; i < 2000; i++){
-    line(scalar * rad(theta) * cos(theta),
-      scalar * rad(theta) * sin(theta),
-      scalar * rad(theta + STEP) * cos(theta + STEP),
-      scalar * rad(theta + STEP) * sin(theta + STEP));
-    theta -= STEP;  //反時計回りに進むほど動径は減少する
-  }
-}
-float rad(float t){ //動径を定める関数
-  float r = pow(1.1, t);
-  return(r);
-}
-</pre>
+int canvasWidth = imageNumX * imageWidth;
+int canvasHeight = imageNumY * imageHeight;
-=== 再帰的な描画と対数らせん ===
+PImage images[] = new PImage[imageNum];
-* ベクトル操作
+void setup() {
-** PVector https://processing.org/reference/PVector.html
+   for (int i = 0; i < imageNum; i++) {
+     images[i] = loadImage(folderName + "/" + filePrefix + nf(i, 3) + ".png");
-正方形の中に正方形を再帰的に描く
-<pre>
-PVector[] vec;  //PVector型の配列を宣言
-float gap = 0.01;  //内接する正方形のずれ
-void setup(){
-  size(500, 500);
-  vec = new PVector[4]; //4のベクトルを生成
-  vec[0] = new PVector(0, 0); //ウィンドウ左上の角
-  vec[1] = new PVector(width, 0); //ウィンドウ右上の角
-  vec[2] = new PVector(width, height);  //ウィンドウ右下の角
-  vec[3] = new PVector(0, height);  //ウィンドウ左下の角
-}
-void draw(){
-  drawSquare(vec);  //4つのベクトルを頂点とする四角形を描画
-  vec = getVector(vec); //ベクトルをgapの分だけずらす
-}
-</pre>
-<pre>
-void drawSquare(PVector[] v){
-   for(int i = 0; i < 4; i++){
-     line(v[i].x, v[i].y, v[(i + 1) % 4].x, v[(i + 1) % 4].y);
-    //ベクトルのxy座標の値を取りだし，線分を描く
    }
+  surface.setSize(canvasWidth, canvasHeight);
+  noLoop();
 }
-</pre>
-<pre>
+void draw() {
-PVector[] getVector(PVector[] vec){
+   background(255);
-   PVector[] nextVec = new PVector[4];
-   for(int i = 0; i < 4; i++){
+   for (int i = 0; i < imageNumX; i++) {
-     PVector dir = PVector.sub(vec[(i + 1) % 4], vec[i]);  //2頂点間の方向ベクトル
+     for(int j = 0; j < imageNumY; j++){
-     dir.mult(gap);  //ずれの分を方向ベクトルにかける
+      image(images[i*imageNumY + j], imageWidth * i, imageHeight * j, imageWidth, imageHeight);
-    nextVec[i] = PVector.add(vec[i], dir); //元の頂点の位置ベクトルをずらして新たなベクトルを作る
+     }
    }
-   return(nextVec);
+   save(folderName + "_combine.png");
+  exit();
 }
 </pre>
-<pre>
-void mouseClicked(){
-  background(255);
-  gap = random(1) / 2;
-  println("gap =", gap);
-  vec[0] = new PVector(0, 0);
-  vec[1] = new PVector(width, 0);
-  vec[2] = new PVector(width, height);
-  vec[3] = new PVector(0, height);
-}
-</pre>
-多角形に拡張する。
+===配列のシャッフル===
 <pre>
-PVector[] vec;  //PVector型の配列を宣言
+int[] nN = {0,1,2,3,4,5,6};
-float gap = 0.1;  //内接する正多角形のずれ
-int gon = 8;  //正多角形の頂点の数
-void setup(){
-  size(500, 500);
-  vec = new PVector[gon];
-  for(int i = 0; i < gon; i++){ //正多角形の頂点の位置ベクトル
-    vec[i] = PVector.fromAngle(2 * i * PI / gon);
-    vec[i].mult(width / 2);
-  }
-}
-void draw(){
-  translate(width / 2, height / 2); //描画ウィンドウの中心に移動
-  drawPolygon(vec);
-  vec = getVector(vec);
-}
-</pre>
-<pre>
+for(int i=(nN.length - 1); i>0; --i) {
-void drawPolygon(PVector[] v){
+  int j = (int)random(i+1);
-  for(int i = 0; i < gon; i++){
+  int tmp = nN[i];
-    line(v[i].x, v[i].y, v[(i + 1) % gon].x, v[(i + 1) % gon].y);
+  nN[i] = nN[j];
-   }
+   nN[j] = tmp;
 }
 </pre>
+===クラスオブジェクトのソート===
+;バブルソート
+rectsをメンバlevelの値の小さい順にソートする。
 <pre>
-PVector[] getVector(PVector[] v){
+Kurasu[] rects = new kurasu[100];
-  PVector[] nextVec = new PVector[gon];
-  for(int i = 0; i < gon; i++){
-    PVector dir = PVector.sub(v[(i + 1) % gon], v[i]);
-    dir.mult(gap);
-    nextVec[i] = PVector.add(v[i], dir);
-  }
-  return nextVec;
-}
-</pre>
-<pre>
+for(int j=0; j < rects.length - 1; j++){
-void mouseClicked(){
+   for(int i=0; i < rects.length - 1; i++){
-  gap = random(1) / 2;
+     if(rects[i].level > rects[i+1].level){
-  gon = int(random(4, 16));
+      Kurasu tmp = rects[i+1];
-  background(255);
+      rects[i+1] = rects[i];
-  vec = new PVector[gon];
+      rects[i] = tmp;
-   for(int i = 0; i < gon; i++){ //正多角形の頂点の位置ベクトル
+    }
-     vec[i] = PVector.fromAngle(2 * i * PI / gon);
-    vec[i].mult(width / 2);
    }
 }
-</pre>
-=== フェルマーらせん ===
+class Kurasu{
+  int index;
+  int level;
+}</pre>
-;離散的らせん
-*回転角
+===3D回転===
-** 有理数
+;X軸を中心にフェルマーらせんを回転
-*** 17/55
+* '''rotateX()'''を使う (https://processing.org/reference/rotateX_.html)
-*** 1/2,1/3,1/5,1/10,1/20,1/40
+* '''size()'''に'''P3D'''を指定
-*** /61
+<pre>
-*** / 72
-*** / 17
-*** / 305
-*** / 109
-*** / 360
-** 無理数
-*** sqrt(5)
-*** 黄金比
-*** 円周率
-<pre>
 int itr = 0;  //描画の繰り返し回数
 float scalar = 5; //拡大倍率
 float rotation;
+float r =0;
 void setup() {
-   size(500, 500);
+   size(500, 500, P3D); // 3D座標を指定する
    background(255);  //背景を白くする
-   rotation = 17.0 / 55;
+   rotation = (1 + sqrt(5)) / 2;
-//  rotation = sqrt(5);
-//  rotation = (1 + sqrt(5)) / 2;
 }
 void draw() {
    translate(width / 2, height / 2);  //描画ウィンドウの中心に移動
+  rotateX(r);
    fill(0);  //点を黒く塗る
-  drawFermatSpiral(rotation);  //引数を回転角とするフェルマーらせんの描画
-  itr++;
+   float theta = 2 * PI * itr * rotation; //回転角
-}
-void drawFermatSpiral(float rot){
-   float theta = 2 * PI * itr * rot; //回転角
    PVector v = PVector.fromAngle(theta);
    v.mult(scalar * sqrt(itr));
    ellipse(v.x, v.y, scalar, scalar); //点を描画
+  itr++;
+  r = r + 0.01;
 }
 </pre>
+;Y軸を中心にフェルマーらせんを回転
+* '''rotateY()'''を使う (https://processing.org/reference/rotateY_.html)
+* '''size()'''に'''P3D'''を指定
+<pre>
-分母が共通の複数の離散的らせん
-<pre>
 int itr = 0;  //描画の繰り返し回数
 float scalar = 5; //拡大倍率
+float rotation;
+float r =0;
 void setup() {
-   size(500, 500);
+   size(500, 500, P3D); // 3D座標を指定する
-   background(255);
+   background(255);  //背景を白くする
+  rotation = (1 + sqrt(5)) / 2;
 }
 void draw() {
    translate(width / 2, height / 2);  //描画ウィンドウの中心に移動
+  rotateY(r);
+  fill(0);  //点を黒く塗る
-  noStroke();
+   float theta = 2 * PI * itr * rotation; //回転角
-//  fill(255, 0, 0, 127);  //点を赤く塗る
-//  drawFermatSpiral(1.0 / 3);
-  // drawFermatSpiral(4.0 / 17);
-  fill(0, 0, 255, 127);  //点を青く塗る
-  drawFermatSpiral(1.0 / 61);
-  // drawFermatSpiral(17.0 / 72);
-  fill(0, 255, 0, 127);  //点を緑に塗る
-  drawFermatSpiral(20.0 / 61);
-  // drawFermatSpiral(72.0 / 305);
-  itr++;
-}
-void drawFermatSpiral(float rot){
-   float theta = 2 * PI * itr * rot; //回転角
    PVector v = PVector.fromAngle(theta);
    v.mult(scalar * sqrt(itr));
    ellipse(v.x, v.y, scalar, scalar); //点を描画
+  itr++;
+  r = r + 0.01;
 }
 </pre>
+===文字列を画面中央に表示===
+;ウィンドウ画面の中央にテキストを配置する方法
-== サンプル集 ==
+文字の表示について、CENTERやwidth/2を使って、横方法は中央に配置することができます。
+しかし、縦方向については、英語のアルファベットの場合、文字によって、高さや縦の位置が異なるので、
+CENTERやheight/2では、うまくいきません。
-=== [[ランダムウォーク]] ===
+フォントはベースラインを基準に作成されています。ベースラインから上の長さはAscent、ベースラインから下の長さはDescentと言います。
+例えば、小文字のj,p などはベースラインから下にはみ出ていますし、小文字のk,lなどは縦に長く、iは短めです。
+テキストの高さは、Ascent+Descentになります。
-=== [[1次元セルオートマトン]] ===
+ref: https://github.com/alexheretic/ab-glyph/issues/6
-=== [[ライフゲーム]] ===
+これを計算して、縦の位置を指定する必要があります。
+例えば、以下のようにすると、ウィンドウの中央に配置できます。
+<pre>
+void setup() {
+  size(400, 400);
+  textSize(30);
+  textAlign(CENTER,TOP);
+  background(0);
+}
+void draw(){
+  float ascent = textAscent();
+  float descent = textDescent();
+  float textHeight = ascent + descent;
+  int textPosY = int(height-textHeight)/2;
+  text("pijlk,hello world", width/2, textPosY);
+}
+</pre>
-=== [[ラングトンのアリ]] ===
+===プログラム出力を動画にエクスポート===
+Processingで実行したプログラムの出力を動画にするには、
+一旦、saveFrame()関数で、コマ送りの静止画を保存して
+その後、MovieMakerで静止画をつなげて動画にします。
-=== [[Boid]] ===
+基本的には、draw()関数の最後にsaveFrame()関数を記述してプログラムを実行した後に、
+Processingのツールメニューから、ムービーメーカーを使って、書き出せばよいです。
-=== [[物理エンジン Box2D]] ===
+その際、コマ送りの静止画の数が多くなりすぎないように、frameRateを適度に設定するとよいでしょう。
+なお、frameRateのデフォルトは60です。
-=== [[自己相似形]] ===
+<pre>
+void setup(){
+  size(500,500);
+  frameRate(30);
+}
+int x = 0;
+void draw(){
+  if (x < 100) {
+    line(x, 0, x, 100);
+    x = x + 1;
+  } else {
+    noLoop();
+  }
+  // Saves each frame as line000001.png, line000002.png, etc.
+  saveFrame("line######.png");
+}
+</pre>
 == リンク ==
@@ 1,071行： / 579行： @@
 素数のグラフィック
 http://www.datapointed.net/visualizations/math/factorization/animated-diagrams/?infinity
+== Contents ==
+# Scalable art, Generative art, Mathematical art, Artificial Intelligence, Artificial Life, Complext sysytem
+# openFrameworks C++ / Xcode MacOSX
+# Logic circuit
+# 完全情報ゲーム：チェッカー、オセロ、チェス、将棋、囲碁
+# Cell auttomaton
+# Conway's game of life
+# Wire world
+# Random walk
+# Langton's ant
+# Boid
+# Box2D
+# Fractal, Self-similar
+# Recursive call
+# Complex square
+# Mandelbrot
+# Neural network
+# Genetic algorithm
+# Code, Chyper, Encript
+# Space X
+# Robotics
+# Expert system
+# Fourier transform, spectrum
+# Fibonacci number
+# Belousov-Zhabotinsky reaction
+# Gray-Scott model
+#* https://mrob.com/pub/comp/xmorphia/ogl/index.html
+#* http://pmneila.github.io/jsexp/grayscott/
+#* https://github.com/MStrandh/gray_scott_reaction_diffusion
+# Turing pattern
 [[Category:授業]]