スケーラブルアート論

提供：kuhalaboWiki
（版間での差分）
移動： 案内, 検索
(→‎予定)
(→‎文字列を画面中央に表示)
 
（1人の利用者による、間の562版が非表示）
1行： 1行：
 
== 概要 ==
 
== 概要 ==
 
;前提スキル
 
;前提スキル
−
一年生の時にメディアプログラミング演習Iを履修したのと同等のプログラミングスキルがあるものとして、授業を進めます。
+
*一年生の時にメディアプログラミング演習Iを履修し、基本的なProcessingのプログラミングができること。
−
もし、プログラミングに不安があるなら、上記テキストを使って、自分で予習や自習をしてください。
+
** 不安な人は、以下の野口先生のメディアプログラミング演習Iのサイトで復習してください。https://r-dimension.xsrv.jp/classes_j/category/processing/
−
openFrameworksはProcessingと似ているため、Processingを知っていると、理解が早いです。
+
*個人のPC（Windows、MacOSのどちらでもよい）に自分でProcessingの環境を構築できることが望ましい。
  
−
;成績評価
+
;授業概要
−
*出席：学生証scan+[http://www.kuhalabo.net/~web/examination/mpaper/min_paper.php?subj_id=3&grade=2 Minutes paper]
+
* インタラクティブアートは芸術を基盤として科学や工学を統合する新しい領域で、プログラミングなどの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]
  
 
== 開発環境 ==
 
== 開発環境 ==
  
−
開発環境としてXCodeを使用します。
 
  
−
テキストや開発環境については、以下を参照してください。
+
開発環境については、以下を参照してください。
−
* http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=141
+
  
−
== 予定 ==
+
* https://processing.org/
−
;Contents
+
* 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マップ [https://www.ncbi.nlm.nih.gov/genome/gdv/ NCBI Genome Map Viewer]
 +
* [http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=5 ヒト一人を再生するのに必要な情報量は？]
 +
 
 +
;[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://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]
 +
 
 +
*ベクトルを復習するための動画：[https://www.youtube.com/playlist?list=PLiRy47VSZM635-b9NzlvebaOzI6m9zzvG 高校数学Bベクトルの定義・成分]
 +
 
 +
=== 位置・速度・加速度 ===
 +
「Nature of Code」第1章の「1.7-1.10」[https://wtf.tw/ref/shiffman.pdf 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ライブラリーをインストールする。
 +
 
 +
<pre>
 +
/**
 +
* 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();
 +
}
 +
</pre>
 +
 
 +
 
 +
=== カメラ入力 ===
 +
Video|GStreamer-based video library for Processingライブラリをインストール。
 +
 
 +
;使用可能なカメラのリスト出力
 +
<pre>
 +
import processing.video.*;
 +
 
 +
void setup(){
 +
  size(320, 240);
 +
 
 +
  String[] cameras = Capture.list();
 +
 
 +
  for(int i=0; i<cameras.length; i++){
 +
    println("[" + i + "] " + cameras[i]);
 +
  }
 +
 
 +
}
 +
</pre>
 +
 
 +
;カメラ画像の出力
 +
<pre>
 +
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);
 +
}
 +
</pre>
 +
 
 +
;差分から動きを検出
 +
 
 +
<pre>
 +
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);    //
 +
  }
 +
}
 +
</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>
 +
 
 +
== リンク ==
 +
 
 +
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
 
# Scalable art, Generative art, Mathematical art, Artificial Intelligence, Artificial Life, Complext sysytem
 
# openFrameworks C++ / Xcode MacOSX
 
# openFrameworks C++ / Xcode MacOSX
 
# Logic circuit
 
# Logic circuit
 +
# 完全情報ゲーム：チェッカー、オセロ、チェス、将棋、囲碁
 
# Cell auttomaton
 
# Cell auttomaton
 
# Conway's game of life
 
# Conway's game of life
52行： 606行：
 
# Fourier transform, spectrum
 
# Fourier transform, spectrum
 
# Fibonacci number
 
# 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
−
 
+
−
== 4桁以下の素数一覧 ==
+
−
 
+
−
番号. 素数
+
−
# 2
+
−
# 3
+
−
# 5
+
−
# 7
+
−
# 11
+
−
# 13
+
−
# 17
+
−
# 19
+
−
# 23
+
−
# 29
+
−
# 31
+
−
# 37
+
−
# 41
+
−
# 43
+
−
# 47
+
−
# 53
+
−
# 59
+
−
# 61
+
−
# 67
+
−
# 71
+
−
# 73
+
−
# 79
+
−
# 83
+
−
# 89
+
−
# 97
+
−
# 101
+
−
# 103
+
−
# 107
+
−
# 109
+
−
# 113
+
−
# 127
+
−
# 131
+
−
# 137
+
−
# 139
+
−
# 149
+
−
# 151
+
−
# 157
+
−
# 163
+
−
# 167
+
−
# 173
+
−
# 179
+
−
# 181
+
−
# 191
+
−
# 193
+
−
# 197
+
−
# 199
+
−
# 211
+
−
# 223
+
−
# 227
+
−
# 229
+
−
# 233
+
−
# 239
+
−
# 241
+
−
# 251
+
−
# 257
+
−
# 263
+
−
# 269
+
−
# 271
+
−
# 277
+
−
# 281
+
−
# 283
+
−
# 293
+
−
# 307
+
−
# 311
+
−
# 313
+
−
# 317
+
−
# 331
+
−
# 337
+
−
# 347
+
−
# 349
+
−
# 353
+
−
# 359
+
−
# 367
+
−
# 373
+
−
# 379
+
−
# 383
+
−
# 389
+
−
# 397
+
−
# 401
+
−
# 409
+
−
# 419
+
−
# 421
+
−
# 431
+
−
# 433
+
−
# 439
+
−
# 443
+
−
# 449
+
−
# 457
+
−
# 461
+
−
# 463
+
−
# 467
+
−
# 479
+
−
# 487
+
−
# 491
+
−
# 499
+
−
# 503
+
−
# 509
+
−
# 521
+
−
# 523
+
−
# 541
+
−
# 547
+
−
# 557
+
−
# 563
+
−
# 569
+
−
# 571
+
−
# 577
+
−
# 587
+
−
# 593
+
−
# 599
+
−
# 601
+
−
# 607
+
−
# 613
+
−
# 617
+
−
# 619
+
−
# 631
+
−
# 641
+
−
# 643
+
−
# 647
+
−
# 653
+
−
# 659
+
−
# 661
+
−
# 673
+
−
# 677
+
−
# 683
+
−
# 691
+
−
# 701
+
−
# 709
+
−
# 719
+
−
# 727
+
−
# 733
+
−
# 739
+
−
# 743
+
−
# 751
+
−
# 757
+
−
# 761
+
−
# 769
+
−
# 773
+
−
# 787
+
−
# 797
+
−
# 809
+
−
# 811
+
−
# 821
+
−
# 823
+
−
# 827
+
−
# 829
+
−
# 839
+
−
# 853
+
−
# 857
+
−
# 859
+
−
# 863
+
−
# 877
+
−
# 881
+
−
# 883
+
−
# 887
+
−
# 907
+
−
# 911
+
−
# 919
+
−
# 929
+
−
# 937
+
−
# 941
+
−
# 947
+
−
# 953
+
−
# 967
+
−
# 971
+
−
# 977
+
−
# 983
+
−
# 991
+
−
# 997
+
−
# 1009
+
−
# 1013
+
−
# 1019
+
−
# 1021
+
−
# 1031
+
−
# 1033
+
−
# 1039
+
−
# 1049
+
−
# 1051
+
−
# 1061
+
−
# 1063
+
−
# 1069
+
−
# 1087
+
−
# 1091
+
−
# 1093
+
−
# 1097
+
−
# 1103
+
−
# 1109
+
−
# 1117
+
−
# 1123
+
−
# 1129
+
−
# 1151
+
−
# 1153
+
−
# 1163
+
−
# 1171
+
−
# 1181
+
−
# 1187
+
−
# 1193
+
−
# 1201
+
−
# 1213
+
−
# 1217
+
−
# 1223
+
−
# 1229
+
−
# 1231
+
−
# 1237
+
−
# 1249
+
−
# 1259
+
−
# 1277
+
−
# 1279
+
−
# 1283
+
−
# 1289
+
−
# 1291
+
−
# 1297
+
−
# 1301
+
−
# 1303
+
−
# 1307
+
−
# 1319
+
−
# 1321
+
−
# 1327
+
−
# 1361
+
−
# 1367
+
−
# 1373
+
−
# 1381
+
−
# 1399
+
−
# 1409
+
−
# 1423
+
−
# 1427
+
−
# 1429
+
−
# 1433
+
−
# 1439
+
−
# 1447
+
−
# 1451
+
−
# 1453
+
−
# 1459
+
−
# 1471
+
−
# 1481
+
−
# 1483
+
−
# 1487
+
−
# 1489
+
−
# 1493
+
−
# 1499
+
−
# 1511
+
−
# 1523
+
−
# 1531
+
−
# 1543
+
−
# 1549
+
−
# 1553
+
−
# 1559
+
−
# 1567
+
−
# 1571
+
−
# 1579
+
−
# 1583
+
−
# 1597
+
−
# 1601
+
−
# 1607
+
−
# 1609
+
−
# 1613
+
−
# 1619
+
−
# 1621
+
−
# 1627
+
−
# 1637
+
−
# 1657
+
−
# 1663
+
−
# 1667
+
−
# 1669
+
−
# 1693
+
−
# 1697
+
−
# 1699
+
−
# 1709
+
−
# 1721
+
−
# 1723
+
−
# 1733
+
−
# 1741
+
−
# 1747
+
−
# 1753
+
−
# 1759
+
−
# 1777
+
−
# 1783
+
−
# 1787
+
−
# 1789
+
−
# 1801
+
−
# 1811
+
−
# 1823
+
−
# 1831
+
−
# 1847
+
−
# 1861
+
−
# 1867
+
−
# 1871
+
−
# 1873
+
−
# 1877
+
−
# 1879
+
−
# 1889
+
−
# 1901
+
−
# 1907
+
−
# 1913
+
−
# 1931
+
−
# 1933
+
−
# 1949
+
−
# 1951
+
−
# 1973
+
−
# 1979
+
−
# 1987
+
−
# 1993
+
−
# 1997
+
−
# 1999
+
−
# 2003
+
−
# 2011
+
−
# 2017
+
−
# 2027
+
−
# 2029
+
−
# 2039
+
−
# 2053
+
−
# 2063
+
−
# 2069
+
−
# 2081
+
−
# 2083
+
−
# 2087
+
−
# 2089
+
−
# 2099
+
−
# 2111
+
−
# 2113
+
−
# 2129
+
−
# 2131
+
−
# 2137
+
−
# 2141
+
−
# 2143
+
−
# 2153
+
−
# 2161
+
−
# 2179
+
−
# 2203
+
−
# 2207
+
−
# 2213
+
−
# 2221
+
−
# 2237
+
−
# 2239
+
−
# 2243
+
−
# 2251
+
−
# 2267
+
−
# 2269
+
−
# 2273
+
−
# 2281
+
−
# 2287
+
−
# 2293
+
−
# 2297
+
−
# 2309
+
−
# 2311
+
−
# 2333
+
−
# 2339
+
−
# 2341
+
−
# 2347
+
−
# 2351
+
−
# 2357
+
−
# 2371
+
−
# 2377
+
−
# 2381
+
−
# 2383
+
−
# 2389
+
−
# 2393
+
−
# 2399
+
−
# 2411
+
−
# 2417
+
−
# 2423
+
−
# 2437
+
−
# 2441
+
−
# 2447
+
−
# 2459
+
−
# 2467
+
−
# 2473
+
−
# 2477
+
−
# 2503
+
−
# 2521
+
−
# 2531
+
−
# 2539
+
−
# 2543
+
−
# 2549
+
−
# 2551
+
−
# 2557
+
−
# 2579
+
−
# 2591
+
−
# 2593
+
−
# 2609
+
−
# 2617
+
−
# 2621
+
−
# 2633
+
−
# 2647
+
−
# 2657
+
−
# 2659
+
−
# 2663
+
−
# 2671
+
−
# 2677
+
−
# 2683
+
−
# 2687
+
−
# 2689
+
−
# 2693
+
−
# 2699
+
−
# 2707
+
−
# 2711
+
−
# 2713
+
−
# 2719
+
−
# 2729
+
−
# 2731
+
−
# 2741
+
−
# 2749
+
−
# 2753
+
−
# 2767
+
−
# 2777
+
−
# 2789
+
−
# 2791
+
−
# 2797
+
−
# 2801
+
−
# 2803
+
−
# 2819
+
−
# 2833
+
−
# 2837
+
−
# 2843
+
−
# 2851
+
−
# 2857
+
−
# 2861
+
−
# 2879
+
−
# 2887
+
−
# 2897
+
−
# 2903
+
−
# 2909
+
−
# 2917
+
−
# 2927
+
−
# 2939
+
−
# 2953
+
−
# 2957
+
−
# 2963
+
−
# 2969
+
−
# 2971
+
−
# 2999
+
−
# 3001
+
−
# 3011
+
−
# 3019
+
−
# 3023
+
−
# 3037
+
−
# 3041
+
−
# 3049
+
−
# 3061
+
−
# 3067
+
−
# 3079
+
−
# 3083
+
−
# 3089
+
−
# 3109
+
−
# 3119
+
−
# 3121
+
−
# 3137
+
−
# 3163
+
−
# 3167
+
−
# 3169
+
−
# 3181
+
−
# 3187
+
−
# 3191
+
−
# 3203
+
−
# 3209
+
−
# 3217
+
−
# 3221
+
−
# 3229
+
−
# 3251
+
−
# 3253
+
−
# 3257
+
−
# 3259
+
−
# 3271
+
−
# 3299
+
−
# 3301
+
−
# 3307
+
−
# 3313
+
−
# 3319
+
−
# 3323
+
−
# 3329
+
−
# 3331
+
−
# 3343
+
−
# 3347
+
−
# 3359
+
−
# 3361
+
−
# 3371
+
−
# 3373
+
−
# 3389
+
−
# 3391
+
−
# 3407
+
−
# 3413
+
−
# 3433
+
−
# 3449
+
−
# 3457
+
−
# 3461
+
−
# 3463
+
−
# 3467
+
−
# 3469
+
−
# 3491
+
−
# 3499
+
−
# 3511
+
−
# 3517
+
−
# 3527
+
−
# 3529
+
−
# 3533
+
−
# 3539
+
−
# 3541
+
−
# 3547
+
−
# 3557
+
−
# 3559
+
−
# 3571
+
−
# 3581
+
−
# 3583
+
−
# 3593
+
−
# 3607
+
−
# 3613
+
−
# 3617
+
−
# 3623
+
−
# 3631
+
−
# 3637
+
−
# 3643
+
−
# 3659
+
−
# 3671
+
−
# 3673
+
−
# 3677
+
−
# 3691
+
−
# 3697
+
−
# 3701
+
−
# 3709
+
−
# 3719
+
−
# 3727
+
−
# 3733
+
−
# 3739
+
−
# 3761
+
−
# 3767
+
−
# 3769
+
−
# 3779
+
−
# 3793
+
−
# 3797
+
−
# 3803
+
−
# 3821
+
−
# 3823
+
−
# 3833
+
−
# 3847
+
−
# 3851
+
−
# 3853
+
−
# 3863
+
−
# 3877
+
−
# 3881
+
−
# 3889
+
−
# 3907
+
−
# 3911
+
−
# 3917
+
−
# 3919
+
−
# 3923
+
−
# 3929
+
−
# 3931
+
−
# 3943
+
−
# 3947
+
−
# 3967
+
−
# 3989
+
−
# 4001
+
−
# 4003
+
−
# 4007
+
−
# 4013
+
−
# 4019
+
−
# 4021
+
−
# 4027
+
−
# 4049
+
−
# 4051
+
−
# 4057
+
−
# 4073
+
−
# 4079
+
−
# 4091
+
−
# 4093
+
−
# 4099
+
−
# 4111
+
−
# 4127
+
−
# 4129
+
−
# 4133
+
−
# 4139
+
−
# 4153
+
−
# 4157
+
−
# 4159
+
−
# 4177
+
−
# 4201
+
−
# 4211
+
−
# 4217
+
−
# 4219
+
−
# 4229
+
−
# 4231
+
−
# 4241
+
−
# 4243
+
−
# 4253
+
−
# 4259
+
−
# 4261
+
−
# 4271
+
−
# 4273
+
−
# 4283
+
−
# 4289
+
−
# 4297
+
−
# 4327
+
−
# 4337
+
−
# 4339
+
−
# 4349
+
−
# 4357
+
−
# 4363
+
−
# 4373
+
−
# 4391
+
−
# 4397
+
−
# 4409
+
−
# 4421
+
−
# 4423
+
−
# 4441
+
−
# 4447
+
−
# 4451
+
−
# 4457
+
−
# 4463
+
−
# 4481
+
−
# 4483
+
−
# 4493
+
−
# 4507
+
−
# 4513
+
−
# 4517
+
−
# 4519
+
−
# 4523
+
−
# 4547
+
−
# 4549
+
−
# 4561
+
−
# 4567
+
−
# 4583
+
−
# 4591
+
−
# 4597
+
−
# 4603
+
−
# 4621
+
−
# 4637
+
−
# 4639
+
−
# 4643
+
−
# 4649
+
−
# 4651
+
−
# 4657
+
−
# 4663
+
−
# 4673
+
−
# 4679
+
−
# 4691
+
−
# 4703
+
−
# 4721
+
−
# 4723
+
−
# 4729
+
−
# 4733
+
−
# 4751
+
−
# 4759
+
−
# 4783
+
−
# 4787
+
−
# 4789
+
−
# 4793
+
−
# 4799
+
−
# 4801
+
−
# 4813
+
−
# 4817
+
−
# 4831
+
−
# 4861
+
−
# 4871
+
−
# 4877
+
−
# 4889
+
−
# 4903
+
−
# 4909
+
−
# 4919
+
−
# 4931
+
−
# 4933
+
−
# 4937
+
−
# 4943
+
−
# 4951
+
−
# 4957
+
−
# 4967
+
−
# 4969
+
−
# 4973
+
−
# 4987
+
−
# 4993
+
−
# 4999
+
−
# 5003
+
−
# 5009
+
−
# 5011
+
−
# 5021
+
−
# 5023
+
−
# 5039
+
−
# 5051
+
−
# 5059
+
−
# 5077
+
−
# 5081
+
−
# 5087
+
−
# 5099
+
−
# 5101
+
−
# 5107
+
−
# 5113
+
−
# 5119
+
−
# 5147
+
−
# 5153
+
−
# 5167
+
−
# 5171
+
−
# 5179
+
−
# 5189
+
−
# 5197
+
−
# 5209
+
−
# 5227
+
−
# 5231
+
−
# 5233
+
−
# 5237
+
−
# 5261
+
−
# 5273
+
−
# 5279
+
−
# 5281
+
−
# 5297
+
−
# 5303
+
−
# 5309
+
−
# 5323
+
−
# 5333
+
−
# 5347
+
−
# 5351
+
−
# 5381
+
−
# 5387
+
−
# 5393
+
−
# 5399
+
−
# 5407
+
−
# 5413
+
−
# 5417
+
−
# 5419
+
−
# 5431
+
−
# 5437
+
−
# 5441
+
−
# 5443
+
−
# 5449
+
−
# 5471
+
−
# 5477
+
−
# 5479
+
−
# 5483
+
−
# 5501
+
−
# 5503
+
−
# 5507
+
−
# 5519
+
−
# 5521
+
−
# 5527
+
−
# 5531
+
−
# 5557
+
−
# 5563
+
−
# 5569
+
−
# 5573
+
−
# 5581
+
−
# 5591
+
−
# 5623
+
−
# 5639
+
−
# 5641
+
−
# 5647
+
−
# 5651
+
−
# 5653
+
−
# 5657
+
−
# 5659
+
−
# 5669
+
−
# 5683
+
−
# 5689
+
−
# 5693
+
−
# 5701
+
−
# 5711
+
−
# 5717
+
−
# 5737
+
−
# 5741
+
−
# 5743
+
−
# 5749
+
−
# 5779
+
−
# 5783
+
−
# 5791
+
−
# 5801
+
−
# 5807
+
−
# 5813
+
−
# 5821
+
−
# 5827
+
−
# 5839
+
−
# 5843
+
−
# 5849
+
−
# 5851
+
−
# 5857
+
−
# 5861
+
−
# 5867
+
−
# 5869
+
−
# 5879
+
−
# 5881
+
−
# 5897
+
−
# 5903
+
−
# 5923
+
−
# 5927
+
−
# 5939
+
−
# 5953
+
−
# 5981
+
−
# 5987
+
−
# 6007
+
−
# 6011
+
−
# 6029
+
−
# 6037
+
−
# 6043
+
−
# 6047
+
−
# 6053
+
−
# 6067
+
−
# 6073
+
−
# 6079
+
−
# 6089
+
−
# 6091
+
−
# 6101
+
−
# 6113
+
−
# 6121
+
−
# 6131
+
−
# 6133
+
−
# 6143
+
−
# 6151
+
−
# 6163
+
−
# 6173
+
−
# 6197
+
−
# 6199
+
−
# 6203
+
−
# 6211
+
−
# 6217
+
−
# 6221
+
−
# 6229
+
−
# 6247
+
−
# 6257
+
−
# 6263
+
−
# 6269
+
−
# 6271
+
−
# 6277
+
−
# 6287
+
−
# 6299
+
−
# 6301
+
−
# 6311
+
−
# 6317
+
−
# 6323
+
−
# 6329
+
−
# 6337
+
−
# 6343
+
−
# 6353
+
−
# 6359
+
−
# 6361
+
−
# 6367
+
−
# 6373
+
−
# 6379
+
−
# 6389
+
−
# 6397
+
−
# 6421
+
−
# 6427
+
−
# 6449
+
−
# 6451
+
−
# 6469
+
−
# 6473
+
−
# 6481
+
−
# 6491
+
−
# 6521
+
−
# 6529
+
−
# 6547
+
−
# 6551
+
−
# 6553
+
−
# 6563
+
−
# 6569
+
−
# 6571
+
−
# 6577
+
−
# 6581
+
−
# 6599
+
−
# 6607
+
−
# 6619
+
−
# 6637
+
−
# 6653
+
−
# 6659
+
−
# 6661
+
−
# 6673
+
−
# 6679
+
−
# 6689
+
−
# 6691
+
−
# 6701
+
−
# 6703
+
−
# 6709
+
−
# 6719
+
−
# 6733
+
−
# 6737
+
−
# 6761
+
−
# 6763
+
−
# 6779
+
−
# 6781
+
−
# 6791
+
−
# 6793
+
−
# 6803
+
−
# 6823
+
−
# 6827
+
−
# 6829
+
−
# 6833
+
−
# 6841
+
−
# 6857
+
−
# 6863
+
−
# 6869
+
−
# 6871
+
−
# 6883
+
−
# 6899
+
−
# 6907
+
−
# 6911
+
−
# 6917
+
−
# 6947
+
−
# 6949
+
−
# 6959
+
−
# 6961
+
−
# 6967
+
−
# 6971
+
−
# 6977
+
−
# 6983
+
−
# 6991
+
−
# 6997
+
−
# 7001
+
−
# 7013
+
−
# 7019
+
−
# 7027
+
−
# 7039
+
−
# 7043
+
−
# 7057
+
−
# 7069
+
−
# 7079
+
−
# 7103
+
−
# 7109
+
−
# 7121
+
−
# 7127
+
−
# 7129
+
−
# 7151
+
−
# 7159
+
−
# 7177
+
−
# 7187
+
−
# 7193
+
−
# 7207
+
−
# 7211
+
−
# 7213
+
−
# 7219
+
−
# 7229
+
−
# 7237
+
−
# 7243
+
−
# 7247
+
−
# 7253
+
−
# 7283
+
−
# 7297
+
−
# 7307
+
−
# 7309
+
−
# 7321
+
−
# 7331
+
−
# 7333
+
−
# 7349
+
−
# 7351
+
−
# 7369
+
−
# 7393
+
−
# 7411
+
−
# 7417
+
−
# 7433
+
−
# 7451
+
−
# 7457
+
−
# 7459
+
−
# 7477
+
−
# 7481
+
−
# 7487
+
−
# 7489
+
−
# 7499
+
−
# 7507
+
−
# 7517
+
−
# 7523
+
−
# 7529
+
−
# 7537
+
−
# 7541
+
−
# 7547
+
−
# 7549
+
−
# 7559
+
−
# 7561
+
−
# 7573
+
−
# 7577
+
−
# 7583
+
−
# 7589
+
−
# 7591
+
−
# 7603
+
−
# 7607
+
−
# 7621
+
−
# 7639
+
−
# 7643
+
−
# 7649
+
−
# 7669
+
−
# 7673
+
−
# 7681
+
−
# 7687
+
−
# 7691
+
−
# 7699
+
−
# 7703
+
−
# 7717
+
−
# 7723
+
−
# 7727
+
−
# 7741
+
−
# 7753
+
−
# 7757
+
−
# 7759
+
−
# 7789
+
−
# 7793
+
−
# 7817
+
−
# 7823
+
−
# 7829
+
−
# 7841
+
−
# 7853
+
−
# 7867
+
−
# 7873
+
−
# 7877
+
−
# 7879
+
−
# 7883
+
−
# 7901
+
−
# 7907
+
−
# 7919
+
−
# 7927
+
−
# 7933
+
−
# 7937
+
−
# 7949
+
−
# 7951
+
−
# 7963
+
−
# 7993
+
−
# 8009
+
−
# 8011
+
−
# 8017
+
−
# 8039
+
−
# 8053
+
−
# 8059
+
−
# 8069
+
−
# 8081
+
−
# 8087
+
−
# 8089
+
−
# 8093
+
−
# 8101
+
−
# 8111
+
−
# 8117
+
−
# 8123
+
−
# 8147
+
−
# 8161
+
−
# 8167
+
−
# 8171
+
−
# 8179
+
−
# 8191
+
−
# 8209
+
−
# 8219
+
−
# 8221
+
−
# 8231
+
−
# 8233
+
−
# 8237
+
−
# 8243
+
−
# 8263
+
−
# 8269
+
−
# 8273
+
−
# 8287
+
−
# 8291
+
−
# 8293
+
−
# 8297
+
−
# 8311
+
−
# 8317
+
−
# 8329
+
−
# 8353
+
−
# 8363
+
−
# 8369
+
−
# 8377
+
−
# 8387
+
−
# 8389
+
−
# 8419
+
−
# 8423
+
−
# 8429
+
−
# 8431
+
−
# 8443
+
−
# 8447
+
−
# 8461
+
−
# 8467
+
−
# 8501
+
−
# 8513
+
−
# 8521
+
−
# 8527
+
−
# 8537
+
−
# 8539
+
−
# 8543
+
−
# 8563
+
−
# 8573
+
−
# 8581
+
−
# 8597
+
−
# 8599
+
−
# 8609
+
−
# 8623
+
−
# 8627
+
−
# 8629
+
−
# 8641
+
−
# 8647
+
−
# 8663
+
−
# 8669
+
−
# 8677
+
−
# 8681
+
−
# 8689
+
−
# 8693
+
−
# 8699
+
−
# 8707
+
−
# 8713
+
−
# 8719
+
−
# 8731
+
−
# 8737
+
−
# 8741
+
−
# 8747
+
−
# 8753
+
−
# 8761
+
−
# 8779
+
−
# 8783
+
−
# 8803
+
−
# 8807
+
−
# 8819
+
−
# 8821
+
−
# 8831
+
−
# 8837
+
−
# 8839
+
−
# 8849
+
−
# 8861
+
−
# 8863
+
−
# 8867
+
−
# 8887
+
−
# 8893
+
−
# 8923
+
−
# 8929
+
−
# 8933
+
−
# 8941
+
−
# 8951
+
−
# 8963
+
−
# 8969
+
−
# 8971
+
−
# 8999
+
−
# 9001
+
−
# 9007
+
−
# 9011
+
−
# 9013
+
−
# 9029
+
−
# 9041
+
−
# 9043
+
−
# 9049
+
−
# 9059
+
−
# 9067
+
−
# 9091
+
−
# 9103
+
−
# 9109
+
−
# 9127
+
−
# 9133
+
−
# 9137
+
−
# 9151
+
−
# 9157
+
−
# 9161
+
−
# 9173
+
−
# 9181
+
−
# 9187
+
−
# 9199
+
−
# 9203
+
−
# 9209
+
−
# 9221
+
−
# 9227
+
−
# 9239
+
−
# 9241
+
−
# 9257
+
−
# 9277
+
−
# 9281
+
−
# 9283
+
−
# 9293
+
−
# 9311
+
−
# 9319
+
−
# 9323
+
−
# 9337
+
−
# 9341
+
−
# 9343
+
−
# 9349
+
−
# 9371
+
−
# 9377
+
−
# 9391
+
−
# 9397
+
−
# 9403
+
−
# 9413
+
−
# 9419
+
−
# 9421
+
−
# 9431
+
−
# 9433
+
−
# 9437
+
−
# 9439
+
−
# 9461
+
−
# 9463
+
−
# 9467
+
−
# 9473
+
−
# 9479
+
−
# 9491
+
−
# 9497
+
−
# 9511
+
−
# 9521
+
−
# 9533
+
−
# 9539
+
−
# 9547
+
−
# 9551
+
−
# 9587
+
−
# 9601
+
−
# 9613
+
−
# 9619
+
−
# 9623
+
−
# 9629
+
−
# 9631
+
−
# 9643
+
−
# 9649
+
−
# 9661
+
−
# 9677
+
−
# 9679
+
−
# 9689
+
−
# 9697
+
−
# 9719
+
−
# 9721
+
−
# 9733
+
−
# 9739
+
−
# 9743
+
−
# 9749
+
−
# 9767
+
−
# 9769
+
−
# 9781
+
−
# 9787
+
−
# 9791
+
−
# 9803
+
−
# 9811
+
−
# 9817
+
−
# 9829
+
−
# 9833
+
−
# 9839
+
−
# 9851
+
−
# 9857
+
−
# 9859
+
−
# 9871
+
−
# 9883
+
−
# 9887
+
−
# 9901
+
−
# 9907
+
−
# 9923
+
−
# 9929
+
−
# 9931
+
−
# 9941
+
−
# 9949
+
−
# 9967
+
−
# 9973
+
  
  
 
[[Category:授業]]
 
[[Category:授業]]

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

目次

[編集] 概要

前提スキル
  • 一年生の時にメディアプログラミング演習Iを履修し、基本的なProcessingのプログラミングができること。
  • 個人のPC（Windows、MacOSのどちらでもよい）に自分でProcessingの環境を構築できることが望ましい。
授業概要
  • インタラクティブアートは芸術を基盤として科学や工学を統合する新しい領域で、プログラミングなどのIT技術によって実現されます。プログラミングによって制作プロセスをアルゴリズム化した作品は、拡張性が高く（スケーラブル）、多様性を持たせることが容易です。これが、スケーラブルアートです。
  • この授業では、その中でも、生物に見られる生成的（ジェネラティブ）な特徴をアートに応用したジェネラティブアートに関連する分野を扱います。その中には、人工生命、フラクタル、オートマトン、遺伝的アルゴリズム、ニューラルネットワークなどといったものが含まれます。
  • プログラミングを使用して、スケーラブルな特徴を持つ作品を作成します。
使用ソフト
到達目標
  • スケーラブルアートについて理解し、応用例を作成できる。
  • 生物の特徴と生物的なシステムについて理解する。
  • Processingを使ってジェネラティブアートのプログラミングができる。
成績評価
  • 確認テスト、課題、まとめテストで、100点満点で評価します。
参考資料

[編集] 開発環境

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

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

自然界の興味深いパターン
  • 自己相似性、フラクタル
    • 雪の結晶(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

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

「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行に並べて結合する。

000004
001005
002006
003007
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軸を中心にフェルマーらせんを回転 

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軸を中心にフェルマーらせんを回転 

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

  1. Scalable art, Generative art, Mathematical art, Artificial Intelligence, Artificial Life, Complext sysytem
  2. openFrameworks C++ / Xcode MacOSX
  3. Logic circuit
  4. 完全情報ゲーム：チェッカー、オセロ、チェス、将棋、囲碁
  5. Cell auttomaton
  6. Conway's game of life
  7. Wire world
  8. Random walk
  9. Langton's ant
  10. Boid
  11. Box2D
  12. Fractal, Self-similar
  13. Recursive call
  14. Complex square
  15. Mandelbrot
  16. Neural network
  17. Genetic algorithm
  18. Code, Chyper, Encript
  19. Space X
  20. Robotics
  21. Expert system
  22. Fourier transform, spectrum
  23. Fibonacci number
  24. Belousov-Zhabotinsky reaction
  25. Gray-Scott model
  26. Turing pattern
「http://w3.kuhalabo.net/wiki/index.php?title=%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%A9%E3%83%96%E3%83%AB%E3%82%A2%E3%83%BC%E3%83%88%E8%AB%96&oldid=3069」から取得
個人用ツール
名前空間

変種
操作
案内
ツールボックス