スケーラブルアート論

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点満点で評価します。
-# 生物の特徴と生物的なシステムについて理解する。
+;参考資料
-# 複雑系システムについて理解し、応用例を作成できる。
+*「[http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=178 数学から創るジェネラティブアート ―Processingで学ぶかたちのデザイン]」([https://www.openprocessing.org/user/57914 Generative Art with Math])
-# openFrameworksを使って作品のプログラミングができる。
+*「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/18(金) ガイダンス, 生物と情報とアート，openFrameworksプログラミング体験
-# 9/25(金) 生物と情報とアート，XCodeを使用したopenFrameworksプログラミング実習
-# 10/2(金) 幾何学図形の描画
-# 10/9(金) 幾何学図形の描画
-# 10/16(金)
-# 10/23(金)
-# 10/30(金)
-# 11/13(金)
-# 11/20(金)
-# 11/27(金)
-# 12/4(金)
-# 12/11(金)
-# 12/18(金)
-# 1/8(金)  小テスト ，課題講評
-# 1/22(金) 予備日（出席は取りません）
-;2019年度
+* Reference https://processing.org/reference
-# 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(金)
-#*（実習）[[1次元セルオートマトン]]
-#* 講義：2次元セルオートマトン、ライフゲーム
-# 11/22(金)
-#*（実習）2次元セルオートマトン、ライフゲーム
-#* 講義：ラングトンのアリ
-# 11/29(金)
-#*（実習）ラングトンのアリ
-#* 講義：Boid，Gray-Scott反応拡散系モデル
-# 12/6(金)
-#*（実習）
-#* 講義：物理エンジン Box2D，フラクタルと自己相似形と再帰呼び出し
-# 12/13(金)
-#*（実習）Box2D，自己相似形と再帰呼び出し
-#* 講義：ニューラルネットワーク、遺伝的アルゴリズム
-# 12/20(金) 小テスト ，課題講評
-#* 授業で扱った内容すべてが含まれます。
-# 1/10(金) 予備日（出席は取りません）
-* 課題「創発ジェネラティブアートのプログラム」
-** 提出締切日 12/19(木)
-** 授業で扱ったプログラムを土台として、自分のオリジナリティを加えた創発的なプログラムを提出してください。
-** 言語は、ProcessingかopenFrameworksのいずれかです。
-** ソースプログラムも採点の対象としますので、プロジェクトのフォルダー全体をzip圧縮して、提出して下さい。
-;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
-#
-#
-#
-== 資料 ==
-* oF 0.9.x 1からの変更点　https://qiita.com/2bbb/items/13f2e20760ec61e3ec89
-* new　⇐　	old
-** ofDrawLine　⇐　ofLine
-** ofDrawCurve　⇐　	ofCurve
-** ofDrawBezier　⇐　	ofBezier
-** ofDrawCircle　⇐　	ofCircle
-** ofDrawEllipse　⇐　	ofEllipse
-** ofDrawTriangle　⇐　	ofTriangle
-** ofDrawRectangle　⇐　	ofRect
-** ofDrawRectRounded　⇐　	ofRectRounded
-** ofDrawSphere　⇐　	ofSphere
-** ofDrawCone　⇐　	ofCone
-** ofBox　⇐　	ofDrawBox
-== oF新規プロジェクトの作成 ==
-# oFフォルイダー内のprojectGeneratorフォルダー内のprojectGeneratorを実行する。
-# Project Path:にoFのあるフォルダーを指定する。
-# Project Name:に、プロジェクトの名前を入れる。
-# Addons:に、使用する追加機能（アドオン）を入れる。通常は、なしでよい。
-# Generateをクリックする。
-# Apps内のMyAppsにマイプロジェクトが作成されている。
-# Open IDEをクリックした場合
-#* XCodeが立ち上がることを確認する。
-# Closeをクリックした場合
-#* Apps内のMyAppsに作成したプロジェクトフォルダーを開く。
-#* プロジェクト名.xcodeprojファイルをクリックして、XCodeを起動する。
-# 作成したプロジェクトを起動し、srcを見てみる。
-#* ofApp.cppのメソッドの中身が空っぽ。
-#* ここにプログラムを書いていく。
-== oFクラスの作成 ==
-=== XCode ===
-# 新しくクラスを作るには、'''「Fileメニュー > New > File」''' を開く。
-# '''「macOS」'''タブの'''「Source」'''から、'''「C++ File」'''を選び、'''「Next」'''ボタンを押す。
-# 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(){
-	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{
-public:
-	bool mouse_pressed;
-public:
-	void setup();
-	void update();
-	void draw();
-	void keyPressed(int key);
-	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;
-};
-</pre>
-'''public'''の領域に'''Xxxクラス'''のインスタンス'''myObj'''を宣言している。
 == 生物と情報とアート ==
@@ 289行： / 53行： @@
 * [http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=5 ヒト一人を再生するのに必要な情報量は？]
-http://abandonedart.org/
+;[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)
-== 論理回路 ==
+;ジェネラティブアート
+:自律性
+:予測不可能性
+:パラメータ変形
+:偶発性
+:自己相似性
+:再帰性
+:対称性
+:周期性
+:双対性
+:抽象化と具体化
-https://wwws.kobe-c.ac.jp/deguchi/sc180/logic/gate.html
+== 数学と力学の基礎 ==
+[https://github.com/nature-of-code/noc-examples-processing/tree/master/chp01_vectors Nature of Code Chapter 1 Vector Git Processing]
-== 最大公約数と矩形分割 ==
+=== ベクトル ===
+「Nature of Code」第1章の「1.1-1.6」[https://wtf.tw/ref/shiffman.pdf pdf]
-;現代アート作家　モンドリアンの代表作品、Composition
+*ベクトルを復習するための動画：[https://www.youtube.com/playlist?list=PLiRy47VSZM635-b9NzlvebaOzI6m9zzvG 高校数学Bベクトルの定義・成分]
-=== 最大公約数 ===
+=== 位置・速度・加速度 ===
+「Nature of Code」第1章の「1.7-1.10」[https://wtf.tw/ref/shiffman.pdf pdf]
-;ユークリッドの互除法
+* 動くボールの位置、速度、加速度はベクトルとして表すことができます。
-* 自然数x0,x1の最大公約数の求め方（x0 > x1）
+* 速度は、位置の変化の割合、すなわち「次の位置＝現在位置＋速度」
-*# x0をx1で割り、余りをx2とする。
+**秒速10m/sのボールの1秒後の位置＝現在位置＋10
-*# x1をx2で割り、余りをx3とする。
+*加速度は、速度の変化の割合、すなわち「次の速度＝現在速度＋加速度」
-*#* 割り切れるまで、この操作を繰り返す。
+**自然落下運動の加速度は、重力加速度といい、9.8m/s2（秒の2乗）
-*# xNで割り切れたら、xNが最大公約数である。
+**したがって、自然落下するボールの1秒後の速度＝現在速度＋9.8
-<pre>
+;重力加速度　国土地理院 「重力を知る」https://www.gsi.go.jp/buturisokuchi/grageo_gravity.html
-//aとbに対してユークリッド互除法を行う
-int a = 10;
-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>
-=== 長方形の分割 ===
+=== トポロジー ===
-;ユークリッドの互除法を可視化してみる。
+;パックマン型2次元世界は、3次元ではトーラス（ドーナツ型）
+: https://wakara.co.jp/mathlog/20200204
-* 自然数x0,x1を2辺とする長方形を正方形で分割する。
+== 数学アート ==
-** 最も小さい正方形の1辺が最大公約数
-;DivRect
+=== [[矩形分割]] ===
-<pre>
-//横縦比がnumA:numBの長方形を正方形によって分割
-int numA = 10;
-int numB = 6;
-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>
-;正方形に色を付けてみる
+=== [[フィボナッチ数列]] ===
-<pre>
+=== [[らせん]] ===
-int numA = 10;
-int numB = 6;
-int scalar = 50;
-numA *= scalar;
-numB *= scalar;
-int wd = numB;
-int xPos = 0;
-int yPos = 0;
-int itr = 0;
-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>
-=== 正方形の分割 ===
+=== [[整数の合同]] ===
-自然数x0とx1の縦横比x0:x1を使って、長方形を正方形に変形すると、正方形を長方形に分割することになる。
+=== [[コラッツ予想]] ===
-* x0×x1の横長の長方形を x1/x0 に横方向に圧縮して正方形にする。
-;DivSquare
+== 人工生命(ALife) ==
-<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の長方形を逆の比の長方形によって分割
-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の長方形で分割する
-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>
+=== [[反応拡散系]] ===
+=== [[フラクタル]] ===
-* 正方形を長方形に分割し、その長方形を正方形に分割し、その正方形を長方形に分割し、・・・
+== 人工知能(AI) ==
-* 再帰的に関数を呼び出す。
-** 再帰呼び出しを止めるしきい値（Threshold）を設定する。
-<pre>
-int numA = 10;
-int numB = 6;
-float ratio = (float) numB / numA;
-float thr = 160;  //しきい値
-void setup(){
-  size(500, 500);
-  colorMode(HSB, 1);
-  divSquare(0, 0, width); //正方形の分割
-}
-</pre>
-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(){
-  numA = int(random(1, 20));  //1以上20以下のランダムな整数を代入
-  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);
-  colorMode(HSB, 1);
-  colorRect(0, 0, width, width);
-  divSquare(0, 0, width);
-}
-</pre>
-モンドリアン風に配色を決める
-<pre>
-void colorRect(float xPos, float yPos, float wd, float ht){
-  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);  //長方形の枠線の太さ
-  rect(xPos, yPos, wd, ht);
-}
-</pre>
-矩形分割
-<pre>
-void divRect(float xPos, float yPos, float wd){  //長方形を分割する関数
-  int itr = 0;
-  float xEndPos = xPos + wd;  //長方形の横の長さ
-  float yEndPos = yPos + wd / ratio;   //長方形の縦の長さ
-  while (wd > thr){   //wdがしきい値以上の場合に処理を行う
-    itr++;
-    if (itr % 2 == 0){
-      while (xPos + wd < xEndPos + 0.1){
-        colorRect(xPos, yPos, wd, wd);  //正方形を描く
-        if (random(1) < thr2){
-          divSquare(xPos, yPos, wd);  //正方形を分割する関数の呼び出し
-        }
-        xPos += wd;
-      }
-      wd = xEndPos - xPos;
-    } else {
-      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){  //正方形を分割する関数
-  int itr = 0;
-  float xEndPos = wd + xPos;  //正方形の横の長さ
-  float yEndPos = wd + yPos;  //正方形の縦の長さ
-  while (wd > thr){  //正方形の幅がしきい値以上の場合に実行
-    itr++;
-    if (itr % 2 ==1){
-      while (xPos + wd * ratio < xEndPos + 0.1){
-        colorRect(xPos, yPos, wd * ratio, wd);  //長方形を描く
-        if (random(1) < thr2){  //thr2の確率で再分割
-          divRect(xPos, yPos, wd * ratio);  //長方形を分割する関数の呼び出し
-        }
-        xPos += wd * ratio;
-      }
-      wd = xEndPos - xPos;
-    } else {
-      while (yPos + wd / ratio < yEndPos + 0.1){
-        colorRect(xPos, yPos, wd, wd / ratio);  //長方形を描く
-        if (random(1) < thr2){  //thr2の確率で再分割
-          divRect(xPos, yPos, wd);  //長方形を分割する関数の呼び出し
-        }
-        yPos += wd / ratio;
-      }
-      wd = yEndPos - yPos;
-    }
-  }
-}
-</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>
-=== フィボナッチ数列の可視化 ===
-フィボナッチ数を1辺とする正方形を敷き詰めて、長方形を描く。
-<pre>
-int[] fibo = {0,1,1};
-int[] SGN = {-1, 1, 1, -1};  //敷き詰める方向を決める符号
-void setup(){
-  size(500, 500);
-  colorMode(HSB, 1);
-  drawSpiral();
-}
-</pre>
-<pre>
-void drawSpiral(){
-  float xPos = 0;
-  float yPos = 0;
-  float scalar = (float) width / (2 * fibo[fibo.length - 1]);  //拡大・縮小比率
-  background(0, 0, 1);
-  translate(width / 2 ,height / 2); //描画ウィンドウ中央に移動
-  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>
-<pre>
-void mouseClicked() {
-  int nextFibo = fibo[fibo.length-2] + fibo[fibo.length-1];
-  fibo = append(fibo, nextFibo);
-  drawSpiral();
-  println(nextFibo);
-}
-void draw(){}
-</pre>
-フィボナッチらせんを描く関数
-<pre>
-void drawSpiral(){
-  float xPos = 0;
-  float yPos = 0;
-  float scalar = (float) width / (2 * fibo[fibo.length-1]);  //拡大・縮小比率
-  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]);
-    }
-  }
-}
-</pre>
-== らせん ==
-* 極座標表示
-* 三角関数
-;3種のらせん
-:アルキメデスらせん
-:フェルマーらせん
-:対数らせん
-らせんの描画
-<pre>
-float theta = 0;
-float STEP = 2 * PI * 0.01; //曲線の精度
-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>
-自己相似な対数らせん
-<pre>
-float STEP = 2 * PI * 0.01; //曲線の精度
-void setup(){
-  size(500, 500);
-  colorMode(HSB, 1);
-}
-void draw(){
-  background(1,0,1);
-  drawLogSpiral();  //対数らせんを描画
-}
-</pre>
-<pre>
-void drawLogSpiral(){
-  float theta = 0;
-  float scalar = pow(10, (float) mouseX / width) * height / 2;
-  //マウスの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>
-=== 再帰的な描画と対数らせん ===
-* ベクトル操作
-** PVector https://processing.org/reference/PVector.html
-正方形の中に正方形を再帰的に描く
-<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座標の値を取りだし，線分を描く
-  }
-}
-</pre>
-<pre>
-PVector[] getVector(PVector[] vec){
-  PVector[] nextVec = new PVector[4];
-  for(int i = 0; i < 4; i++){
-    PVector dir = PVector.sub(vec[(i + 1) % 4], vec[i]);  //2頂点間の方向ベクトル
-    dir.mult(gap);  //ずれの分を方向ベクトルにかける
-    nextVec[i] = PVector.add(vec[i], dir); //元の頂点の位置ベクトルをずらして新たなベクトルを作る
-  }
-  return(nextVec);
-}
-</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型の配列を宣言
-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>
-void drawPolygon(PVector[] v){
-  for(int i = 0; i < gon; i++){
-    line(v[i].x, v[i].y, v[(i + 1) % gon].x, v[(i + 1) % gon].y);
-  }
-}
-</pre>
-<pre>
-PVector[] getVector(PVector[] v){
-  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>
-void mouseClicked(){
-  gap = random(1) / 2;
-  gon = int(random(4, 16));
-  background(255);
-  vec = new PVector[gon];
-  for(int i = 0; i < gon; i++){ //正多角形の頂点の位置ベクトル
-    vec[i] = PVector.fromAngle(2 * i * PI / gon);
-    vec[i].mult(width / 2);
-  }
-}
-</pre>
-=== フェルマーらせん ===
-;離散的らせん
-*回転角
-** 有理数
-*** 17/55
-*** 1/2,1/3,1/5,1/10,1/20,1/40
-*** /61
-*** / 72
-*** / 17
-*** / 305
-*** / 109
-*** / 360
-** 無理数
-*** sqrt(5)
-*** 黄金比
-*** 円周率
-<pre>
-int itr = 0;  //描画の繰り返し回数
-float scalar = 5; //拡大倍率
-float rotation;
-void setup() {
-  size(500, 500);
-  background(255);  //背景を白くする
-  rotation = 17.0 / 55;
-//  rotation = sqrt(5);
-//  rotation = (1 + sqrt(5)) / 2;
-}
-void draw() {
-  translate(width / 2, height / 2);  //描画ウィンドウの中心に移動
-  fill(0);  //点を黒く塗る
-  drawFermatSpiral(rotation);  //引数を回転角とするフェルマーらせんの描画
-  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); //点を描画
-}
-</pre>
-分母が共通の複数の離散的らせん
-<pre>
-int itr = 0;  //描画の繰り返し回数
-float scalar = 5; //拡大倍率
-void setup() {
-  size(500, 500);
-  background(255);
-}
-void draw() {
-  translate(width / 2, height / 2);  //描画ウィンドウの中心に移動
-  noStroke();
-//  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); //点を描画
-}
-</pre>
-== セルオートマトン ==
-=== パスカルの三角形 ===
-;数字を書くプログラム
-<pre>
-int num = 8; //計算する世代数の上限
-int[] state = {1};  //初期状態
-int gen = 0;  //世代
-void setup(){
-  size(500, 500);
-}
-void draw(){
-  if(gen < num){
-    drawNumber(gen);  //数字を書く
-    updateState();  //状態を更新する
-  }
-}
-void drawNumber(float y){
-  float scalar = (float) width / num; // 数字の大きさ
-  float x = (width - state.length * scalar) * 0.5; // 数字を書く位置のx座標
-  y *= scalar;
-  fill(0);
-  for (int i = 0; i < state.length; i++){
-    textSize(scalar * 0.5);
-    text(state[i], x + scalar * 0.5, y + scalar * 0.5);
-    x += scalar; // 数字を書く位置をx座標方向にずらす
-  }
-}
-void updateState(){
-  int[] BOUNDARY = {0};
-  int[] nextState = new int[state.length + 1]; // 次の世代の状態
-  state = splice(state, BOUNDARY, 0);  // 配列の最初に境界値を加える
-  state = splice(state, BOUNDARY, state.length); // 配列の最後に境界値を加える
-  for (int i = 0; i < state.length - 1; i++){
-    nextState[i] = transition(i);  // 次世代の状態の計算
-  }
-  state = nextState; // 状態を更新
-  gen++;  //世代を1つ増やす
-}
-int transition(int i){
-  int nextC = state[i + 1] + state[i];  //パスカルの法則に従った計算
-  return nextC;
-}
-</pre>
-;数値をmodで標記
-* mod 割り算のあまり。
-<pre>
-int num = 250;
-int mod = 2;
-int[] state = {1};
-int gen = 0;
-void setup(){
-  size(500, 500);
-  colorMode(HSB, 1);
-  background(0, 0, 1);
-}
-void draw(){
-  if (gen < num){
-    drawCell(gen);
-    updateState();
-  }
-}
-void drawCell(float y){
-  float scalar = (float) width / num; // セルの大きさ
-  float x = (width - state.length * scalar) * 0.5; // セルのx座標
-  y *= scalar;
-  noStroke();
-  for (int i = 0; i < state.length; i++){
-    fill(state[i] * 1.0 / mod, state[i] * 1.0 / mod, 1); //色相にセルの状態を割り当て
-    rect(x, y, scalar, scalar); // セルの描画
-    x += scalar; // x座標方向にセルをずらす
-  }
-}
-void updateState(){
-  int[] BOUNDARY = {0};
-  int[] nextState = new int[state.length + 1]; // 次の行の配列
-  state = splice(state, BOUNDARY, 0);  // 配列stateの最初に{0,0}を加える
-  state = splice(state, BOUNDARY, state.length); // 配列stateの最後に{0,0}を加える
-  for (int i = 0; i < state.length - 1; i++){
-    nextState[i] = transition(i);  // 次世代のセルの状態の計算
-  }
-  state = nextState; // セルの状態を更新
-  gen++;
-}
-int transition(int i){
-  int nextC = (state[i + 1] + state[i]) % mod;  // 遷移規則
-  return nextC;
-}
-</pre>
-;セルピンスキーのギャスケット
-*0,1のパスカルの三角形の遷移ルール
-*隣接する2つのセルで次の状態が決まる。
-** 00 -> 0 or 1
-** 01 -> 0 or 1
-** 10 -> 0 or 1
-** 11 -> 0 or 1
-=== 基本セルオートマトン ===
-*隣接する3つのセルで次の状態が決まる。
-*セルの状態は、0,1
-** 000 -> 0 or 1
-** 001 -> 0 or 1
-** 010 -> 0 or 1
-** 011 -> 0 or 1
-** 100 -> 0 or 1
-** 101 -> 0 or 1
-** 110 -> 0 or 1
-** 111 -> 0 or 1
-; c(t+1,i) = c(t,i-1) + c(t,i) + c(t,i+1) の例
-<pre>
-int num = 250;  //表示する世代数
-int mod = 2;  //法とする数
-int[] state = {1};  //初期状態
-int gen = 0;
-void setup(){
-  size(1000, 500);
-  colorMode(HSB, 1);
-  background(0, 0, 1);
-}
-void draw(){
-  if (gen < num){
-    drawCell(gen);
-    updateState();
-  }
-}
-void mouseClicked(){
-  gen = 0;
-  state = new int[]{1};  //初期状態
-  mod = int(random(2, 20));
-  println(mod);
-  background(0, 0, 1);
-}
-void drawCell(float y){
-  float scalar = width * 0.5 / num; // セルの大きさ
-  float x = (width - state.length * scalar) * 0.5; // セルのx座標
-  y *= scalar;
-  noStroke();
-  for (int i = 0; i < state.length; i++){
-    fill(state[i] * 1.0 / mod, state[i] * 1.0 / mod, 1); //色相にセルの状態を割り当て
-    rect(x, y, scalar, scalar); // セルの描画
-    x += scalar; // x座標方向にセルをずらす
-  }
-}
-void updateState(){
-  int[] BOUNDARY = {0, 0};
-  int[] nextState = new int[state.length + 2]; // 次の世代の状態
-  state = splice(state, BOUNDARY, 0);  // 配列の最初に境界値を加える
-  state = splice(state, BOUNDARY, state.length); // 配列の最後に境界値を加える
-  for (int i = 1; i < state.length - 1; i++){
-    nextState[i-1] = transition(state[i - 1], state[i], state[i + 1]);  // 次世代のセルの状態の計算
-  }
-  state = nextState; // セルの状態を更新
-  gen++;  //世代を1つ増やす
-}
-int transition(int a, int b, int c){
-  int d = a + b + c;  //遷移ルールに従って計算
-  d = d % mod;
-  return d;
-}
-</pre>
-;遷移ルールに確率的要素を入れる
-<pre>
-int transition(int a, int b, int c){
-  int d;
-  if (random(1) < 0.999){
-    d = a + b + c;  //99.9%の確率でこのルールを選択
-  } else {
-    d = a + c;  //0.1%の確率でこのルールを選択
-  }
-  d = d % mod;
-  return d;
-}
-</pre>
-;マウスクリックするたびに、遷移ルールを変えて描画
-<pre>
-int num = 250;  //表示する世代数
-int mod = 2;  //法とする数
-int[] state = {1};  //初期状態
-int[]  rule = {0, 0, 0, 1, 1, 1, 1, 0}; // rule 30 (0011110)
-float gen = 0;
-void setup(){
-  size(1000, 500);
-  colorMode(HSB, 1);
-}
-void draw(){
-  if (gen < num){
-    drawCell(gen);
-    updateState();
-  }
-}
-void mouseClicked(){
-  gen = 0;
-  state = new int[]{1};  //初期状態
-  rule = new int[8];
-  int ruleInt = 0;
-  for (int i = 0; i < 8; i++){
-    rule[i] = int(random(2));
-    ruleInt += rule[i] * int(pow(2, 7 - i));
-  }
-  println(ruleInt);
-  background(0, 0, 1);
-}
-void drawCell(float y){
-  float scalar = width * 0.5 / num; // セルの大きさ
-  float x = (width - state.length * scalar) * 0.5; // セルのx座標
-  y *= scalar;
-  noStroke();
-  for (int i = 0; i < state.length; i++){
-    fill(0, 0, 1 - state[i]); //色相にセルの状態を割り当て
-    rect(x, y, scalar, scalar); // セルの描画
-    x += scalar; // x座標方向にセルをずらす
-  }
-}
-//8個の01要素からなる配列ruleに対して，遷移ルールを決定する
-int transition(int a, int b, int c){
-  int d;
-  //abcを10進数に置き換える
-  int ruleInt = int(a * pow(2, 2) + b * pow(2, 1) + c * pow(2, 0));
-  d = rule[7 - ruleInt];
-  return d;
-}
-void updateState(){
-  int[] BOUNDARY = {0, 0};
-  int[] nextState = new int[state.length + 2]; // 次の行の配列
-  state = splice(state, BOUNDARY, 0);  // 配列stateの最初に{0,0}を加える
-  state = splice(state, BOUNDARY, state.length); // 配列stateの最後に{0,0}を加える
-  for (int i = 1; i < state.length - 1; i++){
-    nextState[i-1] = transition(state[i - 1], state[i], state[i + 1]);  // 次世代のセルの状態の計算
-  }
-  state = nextState; // セルの状態を更新
-  gen++;
-}
-</pre>
-=== 2次元セルオートマトン ===
-;正方格子
-;遷移ルールの例
-*　　a
-*　b c d
-*　　e
-a+b+c+d+e mod n
-<pre>
-int num = 250;  // 行と列の長さ
-int mod = 4;  // 法とする数
-int[][] state = new int[num][num];  // セルの状態を表す行列
-void setup(){
-  size(500, 500);
-  colorMode(HSB, 1);
-  initialize();  // 初期化する
-  frameRate(2);  // 0.5秒ごとに遷移
-}
-void draw(){
-  drawCell();
-  updateState();
-}
-void initialize(){
-  for (int i = 0; i < num; i++){
-    for (int j = 0; j < num; j++){
-      if (i == num / 2 && j == num / 2){
-        state[i][j] = 1;  // 真ん中の成分のみ1
-      } else {
-        state[i][j] = 0;
-      }
-    }
-  }
-}
-void updateState(){
-  int[][] nextState = new int[num][num]; // 次世代の状態
-  for (int i = 0; i < num; i++){
-    for (int j = 0; j < num; j++){
-      nextState[i][j] = transition(i, j); // 遷移
-    }
-  }
-  state = nextState;  //更新
-}
-int transition(int i, int j){
-  int nextC;
-    nextC = state[(i - 1 + num) % num][j] //上のセル
-      + state[i][(j - 1 + num) % num]  //左のセル
-      + state[i][j] //中央のセル
-      + state[i][(j + 1) % num] //右のセル
-      + state[(i + 1) % num][j];  //下のセル
-  nextC = nextC % mod;
-  return nextC;
-}
-void drawCell(){
-  float scalar = (float) height / num; // セルのサイズ
-  float y = 0;  // セルのy座標
-  float x;
-  for (int i = 0; i < num; i++){
-    x = 0;  // セルのx座標
-    for (int j = 0; j < num; j++){
-      noStroke();
-      fill(state[i][j] * 1.0 / mod, state[i][j] * 1.0 / mod, 1);  // セルの色
-      rect(x, y, scalar, scalar);
-      x += scalar;
-    }
-    y += scalar;
-  }
-}
-</pre>
-=== ライフゲーム ===
-;遷移ルール
-* セルの状態は、生(1)か死(0)か
-* セルが1の場合
-** 自分の周りに1が2個か3個の場合、1
-** それ以外の場合、0
-* セルが0の場合
-** 自分の周りに1が3個の場合、1
-** それ以外の場合、0
-;初期化
-ランダムに生と死を配置
-<pre>
-void initialize(){
-  float r;
-  for (int i = 0; i < num; i++){
-    for (int j = 0; j < num; j++){
-      r = random(100);
-      if ( r > 85 ){
-        state[i][j] = 1;
-      } else {
-        state[i][j] = 0;
-      }
-    }
-  }
-}
-</pre>
-;遷移ルール
-<pre>
-int transition(int i, int j){
-  int aroundC;
-  int nextC = 0;
-    aroundC =
-        state[(i - 1 + num) % num][j] //上のセル
-      +  state[(i - 1 + num) % num][(j - 1 + num) % num] //上のセル
-      +  state[(i - 1 + num) % num][(j + 1) % num] //上のセル
-      + state[i][(j - 1 + num) % num]  //左のセル
-      + state[i][(j + 1) % num] //右のセル
-      + state[(i + 1) % num][(j - 1 + num) % num]  //下のセル
-      + state[(i + 1) % num][j]  //下のセル
-      + state[(i + 1) % num][(j + 1) % num];  //下のセル
-  if(state[i][j] == 1){
-    if(aroundC == 2 || aroundC == 3) {
-      nextC = 1;
-    }
-    else{
-      nextC = 0;
-    }
-  }
-  if(state[i][j] == 0){
-    if(aroundC == 3) {
-      nextC = 1;
-    }
-    else{
-      nextC = 0;
-    }
-  }
-  return nextC;
-}
-</pre>
-<pre>
-void drawCell(){
-  float scalar = (float) height / num; // セルのサイズ
-  float y = 0;  // セルのy座標
-  float x;
-  for (int i = 0; i < num; i++){
-    x = 0;  // セルのx座標
-    for (int j = 0; j < num; j++){
-      noStroke();
-      fill(state[i][j] * 1.0, state[i][j] * 1.0, 1);  // セルの色
-      rect(x, y, scalar, scalar);
-      x += scalar;
-    }
-    y += scalar;
-  }
-}
-</pre>
-=== 正六角形セルオートマトン ===
-;六角格子
-<pre>
-PVector[][] lattice;
-PShape tile;
-PVector[] base = new PVector[2];  //格子を張るベクトル
-int num = 200;
-float scalar;
-int[][] state = new int[num][num];  //セルの状態を表す行列
-int mod = 10; //法とする数
-void setup(){
-  size(693, 800);
-  colorMode(HSB, 1);
-  scalar = height * 1.0 / num;
-  initialize();  // 初期状態
-  makeHexVector(); //六角格子を張るベクトルの生成
-  makeLattice();  //格子点ベクトルを生成
-  makeHex();  //正六角形タイルを生成
-  drawTiling(); //タイリングを描画
-}
-void draw(){
-  background(0, 0, 1);
-  int[][] nextState = new int[num][num]; //次世代の行列
-  for (int i = 0; i < num; i++){
-    for (int j = 0; j < num; j++){
-      nextState[i][j] = transition(i, j); //遷移
-    }
-  }
-  state = nextState;  //状態を更新
-  drawTiling();
-}
-void initialize(){
-  for (int i = 0; i < num; i++){
-    for (int j = 0; j < num; j++){
-      if (i == num / 2 && j == num / 2){
-        state[i][j] = 1;  // 中央の成分のみ1
-      } else {
-        state[i][j] = 0;
-      }
-    }
-  }
-}
-void makeHexVector(){
-  base[0] = PVector.fromAngle(PI / 2);
-  base[1] = PVector.fromAngle(PI / 6);
-}
-void makeLattice(){
-  lattice = new PVector[num][num];
-  for (int i = 0; i < num; i++){
-    for (int j = 0; j < num; j++){
-      PVector v = PVector.mult(base[0], i * scalar);
-      v.add(PVector.mult(base[1], j * scalar));
-      lattice[i][j] = new PVector(v.x, v.y % height);
-    }
-  }
-}
-void makeHex(){
-  tile = createShape();
-  tile.beginShape();
-  tile.noStroke();
-  for (int i = 0; i < 6; i++){
-    PVector v = PVector.fromAngle(2 * PI * i / 6);
-    v.mult(scalar / sqrt(3));
-    tile.vertex(v.x, v.y);
-  }
-  tile.endShape(CLOSE);
-}
-void drawTiling(){
-  for (int i = 0; i < num; i++){
-    for (int j = 0; j < num; j++){
-      tile.resetMatrix();
-      tile.translate(lattice[i][j].x, lattice[i][j].y);  //タイルの位置を指定
-      setTileColor(tile, i, j);
-      shape(tile);  //タイルを描画
-    }
-  }
-}
-void setTileColor(PShape t, int i, int j){
-  t.setFill(color(state[i][j] * 1.0 / mod, state[i][j] * 1.0 / mod, 1));
-}
-int transition(int i, int j){
-  int d;
-  d = state[i][j] //中央のセル
-    + state[(i - 1 + num) % num][j] //上のセル
-    + state[(i - 1 + num) % num][(j + 1) % num]  //右上のセル
-    + state[i][(j + 1) % num] //右下のセル
-    + state[(i + 1) % num][j] //下のセル
-    + state[(i + 1) % num][(j - 1 + num) % num] //左下のセル
-    + state[i][(j - 1 + num) % num]; //左上のセル
-  d = d % mod;
-  return d;
-}
-</pre>
-=== セルオートマトン資料 ===
-*[https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B2%E3%83%BC%E3%83%A0 ライフゲーム]
-*[http://www.kuhalabo.net/~kuha/tutorial0/bioart/Lifegame.exe ライフゲームのWindowsソフト] /
-*[http://www.mirekw.com/ca/index.html Cellular Automata explorer]
-*[http://mathworld.wolfram.com/GameofLife.html Wolfram Math World Game of Life]
-* http://golly.sourceforge.net/
-;セルオートマトン音楽
-[http://tones.wolfram.com/generate/ WolframTones]/
-[http://www.kuhalabo.net/~kuha/nime/lifegorch/ Life Game Orchestra] /
-;参考
-[http://ja.wikipedia.org/wiki/%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%AF%E3%83%BC%E3%83%AB%E3%83%89 ワイヤワールド] /
-== 人工生命 ==
-=== ラングトンのアリ ===
-[http://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%B3%E3%82%B0%E3%83%88%E3%83%B3%E3%81%AE%E3%82%A2%E3%83%AA ラングトンのアリ] /
-[http://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%B3%E3%82%B0%E3%83%88%E3%83%B3%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%97 ラングトンのループ] /
-[https://gist.github.com/tado/6603347  tado Langton's ant] /
-=== レイノルズのボイド ===
-[https://ja.wikipedia.org/wiki/%E3%83%9C%E3%82%A4%E3%83%89_(%E4%BA%BA%E5%B7%A5%E7%94%9F%E5%91%BD) ボイド wiki] /
-[http://www.red3d.com/cwr/boids/ Reynolds Boids] /
-[http://processing.org/examples/flocking.html Birds Algorhythm Craig Reynolds] /
-[http://www.local-guru.net/blog/2010/8/19/openframeworks-boid-demo oF boid demo]
-=== Gray-Scott Reaction-Diffusion（反応拡散系）モデル ===
-* https://mrob.com/pub/comp/xmorphia/ogl/index.html
-* http://pmneila.github.io/jsexp/grayscott/
-* https://github.com/MStrandh/gray_scott_reaction_diffusion
-<pre>
-int M = 640;
-int N = 480;
-//System parameters
-double diffU;
-double diffV;
-double paramF;
-double paramK;
-boolean rndInitCondition;
-double[][] U = new double[M][N];
-double[][] V = new double[M][N];
-double[][] dU = new double[M][N];
-double[][] dV = new double[M][N];
-//int[][] offset = new int[N][2];
-void settings() {
-  size(M,N);
-}
-void generateInitialState() {
-    for (int i = 0; i < M; i++) {
-      for (int j = 0; j < N; j++) {
-        U[i][j] = 1.0;
-        V[i][j] = 0.0;
-      }
-    }
-    if (rndInitCondition) {
-        for (int i = M/3; i < 2*M/3; i++) {
-            for (int j = N/3; j < 2*N/3; j++) {
-               U[i][j] = 0.5*(1 + random(-1, 1));
-               V[i][j] = 0.25*( 1 + random(-1, 1));
-          }
-        }
-    } else {
-      for (int i = M/3; i < 2*M/3; i++) {
-            for (int j = N/3; j < 2*N/3; j++) {
-               U[i][j] = 0.5;
-               V[i][j] = 0.25;
-          }
-        }
-    }
-}
-void setup() {
-   frameRate(48);
-   smooth();
-   colorMode(HSB,1.0);
-   //Set default parameters;
-   diffU = 0.16;
-   diffV = 0.08;
-   paramF = 0.035;
-   paramK = 0.06;
-   rndInitCondition = true;
-   //Populate U and V with initial data
-   generateInitialState();
-}
-void timestep(double F, double K, double diffU, double diffV) {
-      for (int i = 0; i < M; i++) {
-        for (int j = 0; j < N; j++) {
-          int p = i + j*N;
-          double u = U[i][j];
-          double v = V[i][j];
-          double uvv = u*v*v;
-          int left = (i-1+M) % M;
-          int right = (i+1) % M;
-          int up = (j-1+N) % N;
-          int down = (j+1) % N;
-          double lapU = (U[left][j] + U[right][j] + U[i][up] + U[i][down] - 4*u);
-          double lapV = (V[left][j] + V[right][j] + V[i][up] + V[i][down] - 4*v);
-          dU[i][j] = diffU*lapU  - uvv + F*(1 - u);
-          dV[i][j] = diffV*lapV + uvv - (K+F)*v;
-        }
-      }
-    for (int i= 0; i < M; i++) {
-      for (int j = 0; j < N; j++){
-          U[i][j] += dU[i][j];
-          V[i][j] += dV[i][j];
-      }
-    }
-}
-void draw(){
-    for (int k = 0; k < 10; k++) {
-       timestep(paramF, paramK, diffU, diffV);
-    }
-    // Draw points
-    for (int i = 0; i < M; i++) {
-      for (int j = 0; j < N; j++) {
-        set(i, j, color((float)(1-U[i][j]),0.9, 0.5 ));
-//        set(i, j, color(0.74, 0.87, (float)(1-U[i][j])));
-//        set(i, j, color(0.5, 0.6, (float)(V[i][j])));
-      }
-    }
-}
-void keyPressed() {
-  switch (key) {
-    case '1':
-          diffU = 0.16;
-          diffV = 0.08;
-          paramF = 0.035;
-          paramK = 0.06;
-          generateInitialState();
-          break;
-    case '2':
-          diffU = 0.16;
-          diffV = 0.08;
-          paramF = 0.042;
-          paramK = 0.065;
-          generateInitialState();
-          break;
-    case '3':
-          diffU = 0.18;
-          diffV = 0.13;
-          paramF = 0.025;
-          paramK = 0.056;
-          generateInitialState();
-          break;
-    case '4':
-          diffU = 0.18;
-          diffV = 0.09;
-          paramF = 0.02;
-          paramK = 0.056;
-          generateInitialState();
-          break;
-    case '5':
-          diffU = 0.14;
-          diffV = 0.06;
-          paramF = 0.035;
-          paramK = 0.065;
-          generateInitialState();
-          break;
-    case '6':
-          diffU = 0.19;
-          diffV = 0.09;
-          paramF = 0.062;
-          paramK = 0.062;
-          generateInitialState();
-          break;
-     case '7':
-          diffU = 0.16;
-          diffV = 0.08;
-          paramF = 0.05;
-          paramK = 0.065;
-          generateInitialState();
-          break;
-    case 'r':
-          rndInitCondition = true;
-          generateInitialState();
-          break;
-    case 'n':
-          rndInitCondition = false;
-          generateInitialState();
-  }
-}
-</pre>
-== Neural Networks ==
-*神経回路モデル（PPT）
-*神経細胞の写真，構成図[ 1 | 2 | 3 ]
-**[http://www.kuhalabo.net/~kuha/tutorial0/bioart/synapse1.jpg シナプスの構成図]，[http://www.kuhalabo.net/~kuha/tutorial0/bioart/synapse2.jpg 接合部の詳細]
-*[http://mars.elcom.nitech.ac.jp/java-cai/neuro/menu.html ニューラルネットワーク入門]
-*Perceptron,
-*Back Propagation
-*Hopfield Network
-*自己組織化ネットワーク
-*脳の潜在能力
-**天文学者カール・セーガン「人間の脳はおよそ2,000万冊，すなわち世界最大の図書館に収められているのと同じ数の本を満たすほどの情報を収納することができる」
-**神経科学者「人は平均寿命の間に脳の潜在能力の0.01％（0.0001）しか使っていない」
-=== Neural Networkのしくみを知る ===
-#学習データの準備
-#*お手本となる数百件〜数十万件のデータを人間が集めて準備しておく
-#Neural Networkのモデルの学習
-#*学習データに含まれるパターンを抽出する
-#モデルの利用
-#*学習済みのモデルを分類や予測に利用する
-;例 身長、体重を元に大人か子供か判別する
-* 今までは、判別の計算式を人間がやっていた
-* Neural Networkではコンピュータが重み付けを行う
-* 間違いが少なくなるように重み付けを変えていく
-*[http://playground.tensorflow.org/#activation=sigmoid&regularization=L2&batchSize=10&dataset=gauss&regDataset=reg-plane&learningRate=0.0001&regularizationRate=0&noise=0&networkShape=&seed=0.55381&showTestData=false&discretize=false&percTrainData=50&x=true&y=true&xTimesY=false&xSquared=false&ySquared=false&cosX=false&sinX=false&cosY=false&sinY=false&collectStats=false&problem=classification&initZero=false&hideText=false&showTestData_hide=true&learningRate_hide=true&regularizationRate_hide=true&percTrainData_hide=true&numHiddenLayers_hide=true&discretize_hide=true&activation_hide=true&problem_hide=true&noise_hide=true&regularization_hide=true&dataset_hide=true&batchSize_hide=true&playButton_hide=false Tensorflow Playgroundのデモ]
-;例　経度と緯度から街の内側か外側かを分類する
-* 線を引いて判別できない
-* ニューラルネットワークの階層化（隠れ層の追加）が必要
-* [http://playground.tensorflow.org/#activation=sigmoid&regularization=L2&batchSize=10&dataset=circle&regDataset=reg-plane&learningRate=0.03&regularizationRate=0&noise=0&networkShape=5&seed=0.84062&showTestData=false&discretize=false&percTrainData=50&x=true&y=true&xTimesY=false&xSquared=false&ySquared=false&cosX=false&sinX=false&cosY=false&sinY=false&collectStats=false&problem=classification&initZero=false&hideText=false&showTestData_hide=true&learningRate_hide=true&regularizationRate_hide=true&percTrainData_hide=true&numHiddenLayers_hide=true&discretize_hide=true&activation_hide=true&problem_hide=true&noise_hide=true&regularization_hide=true&dataset_hide=true&batchSize_hide=true&playButton_hide=false Tensorflow Playgroundのデモ]
-;例　縦位置と横位置で並んだ子供を分類する
-* ニューロンの数を増やしたり階層を深くすることで賢くなる
-* 3段以上の深い階層を持つニューラルネットワークをディープラーニングと言う
-* [http://playground.tensorflow.org/#activation=relu&batchSize=10&dataset=spiral&regDataset=reg-plane&learningRate=0.03&regularizationRate=0&noise=0&networkShape=8,8,5&seed=0.53586&showTestData=false&discretize=false&percTrainData=50&x=true&y=true&xTimesY=false&xSquared=false&ySquared=false&cosX=false&sinX=false&cosY=false&sinY=false&collectStats=false&problem=classification&initZero=false&hideText=false&showTestData_hide=true&activation_hide=true&problem_hide=true&noise_hide=true&discretize_hide=true&regularization_hide=true&dataset_hide=true&batchSize_hide=true&learningRate_hide=true&regularizationRate_hide=true&percTrainData_hide=true&numHiddenLayers_hide=true Tensorflow Playgroundのデモ]
-[[ファイル:DL02.jpg|1000px]]
-== Genetic Algorithm ==
-*カール・セーガン「コスモス」エピソードII第3話「平家物語と蟹のなぞ」
-**[http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=121&cid=2 瀬戸内海の蟹の甲羅は武士の顔に似ているのはなぜか？　]
-*geno typeとpheno type
-*GAの概念と応用例
-**[http://www.kuhalabo.net/~kuha/tutorial0/bioart/papperedmoss.gif ペパードモスの絵]
-***[https://www.gao.ne.jp/~tgs1698/spx-js/spx-js.htm ペパードモス・ゲーム]
-***http://www.kuhalabo.net/~kuha/tutorial0/bioart/pmoss/SPXW_MAN/SPX-W.HTM
-**[http://prisonersdilemma.groenefee.nl/ The Prisoner's Dilemma]
-**[http://www.kuhalabo.net/~kuha/tutorial0/bioart/art/LGPCforArt.htm LGPC for ART]
-**[http://www.intlab.soka.ac.jp/~unemi/sbart/index-j.html SBART]
-**[http://www.youtube.com/watch?v=8vzTCC-jbwM&feature=youtube_gdata_player GAでブランコこぎを学習]
-== oFサンプル集 ==
-=== [[ランダムウォーク]] ===
-=== [[1次元セルオートマトン]] ===
-=== [[ライフゲーム]] ===
-=== [[ラングトンのアリ]] ===
-=== [[Boid]] ===
-=== [[物理エンジン Box2D]] ===
+=== [[Genetic Algorithm]] ===
-=== [[自己相似形]] ===
+=== [[Neural Networks]] ===
-== P5サンプル集 ==
+== Processing Samples ==
 ===音に反応する円===
@@ 1,912行： / 174行： @@
 }
 </pre>
 === カメラ入力 ===
@@ 1,957行： / 220行： @@
 }
 </pre>
 ;差分から動きを検出
@@ 2,022行： / 284行： @@
      println(movementSum);    //
    }
+}
+</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);
+<pre>
+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;
+    }
+  }
+}
+</pre>
+=== 画像ファイルの結合 ===
+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>
+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();
+}
+</pre>
+===配列のシャッフル===
+<pre>
+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;
+}
+</pre>
+===クラスオブジェクトのソート===
+;バブルソート
+rectsをメンバlevelの値の小さい順にソートする。
+<pre>
+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;
+}</pre>
+===3D回転===
+;X軸を中心にフェルマーらせんを回転
+* '''rotateX()'''を使う (https://processing.org/reference/rotateX_.html)
+* '''size()'''に'''P3D'''を指定
+<pre>
+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;
+}
+</pre>
+;Y軸を中心にフェルマーらせんを回転
+* '''rotateY()'''を使う (https://processing.org/reference/rotateY_.html)
+* '''size()'''に'''P3D'''を指定
+<pre>
+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;
+}
+</pre>
+===文字列を画面中央に表示===
+;ウィンドウ画面の中央にテキストを配置する方法
+文字の表示について、CENTERやwidth/2を使って、横方法は中央に配置することができます。
+しかし、縦方向については、英語のアルファベットの場合、文字によって、高さや縦の位置が異なるので、
+CENTERやheight/2では、うまくいきません。
+フォントはベースラインを基準に作成されています。ベースラインから上の長さはAscent、ベースラインから下の長さはDescentと言います。
+例えば、小文字のj,p などはベースラインから下にはみ出ていますし、小文字のk,lなどは縦に長く、iは短めです。
+テキストの高さは、Ascent+Descentになります。
+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で静止画をつなげて動画にします。
+基本的には、draw()関数の最後にsaveFrame()関数を記述してプログラムを実行した後に、
+Processingのツールメニューから、ムービーメーカーを使って、書き出せばよいです。
+その際、コマ送りの静止画の数が多くなりすぎないように、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>
@@ 2,031行： / 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:授業]]