スケーラブルアート論

提供：kuhalaboWiki
（版間での差分）
移動： 案内, 検索
(→‎Processingサンプル集)
(→‎ベクトル)
106行： 106行：
 
=== ベクトル ===
 
=== ベクトル ===
 
「Nature of Code」第1章の「1.1-1.6」[https://wtf.tw/ref/shiffman.pdf pdf]
 
「Nature of Code」第1章の「1.1-1.6」[https://wtf.tw/ref/shiffman.pdf pdf]
 +
[高校数学II ベクトルの定義  https://www.youtube.com/playlist?list=PLiRy47VSZM635-b9NzlvebaOzI6m9zzvG]
  
 
=== 位置・速度・加速度 ===
 
=== 位置・速度・加速度 ===

2021年11月4日 (木) 21:14時点における版

目次

概要

前提スキル

メディアプログラミング演習Iを履修したのと同等のプログラミングスキルがあるものとして、授業を進めます。

成績評価

確認テスト、課題で評価します。

授業概要及び到達目標
インタラクティブアートは芸術を基盤として科学や工学を統合する新しい領域である。生物科学に関連した分野として、人工生命、ライフゲーム、フラクタル、オートマトン、遺伝的アルゴリズム、ニューラルネットワークなど応用範囲の広いものが数多く存在する。

そういった生物に見られる特徴をアートに応用したジェネラティブアートの作品をC++のプログラミングを使用して、実際に作成してみる。

本講義の目標は以下の通り。

  1. 生物の特徴と生物的なシステムについて理解する。
  2. 複雑系システムについて理解し、応用例を作成できる。
  3. openFrameworksを使って作品のプログラミングができる。
参考書
Web

開発環境

開発環境としてopenFrameworks/MacOS XCode, Processing, p5.jsを使用します。

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

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

生物と情報とアート

自然界の興味深いパターン
  • 自己相似性、フラクタル
    • 雪の結晶(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 [高校数学II ベクトルの定義 https://www.youtube.com/playlist?list=PLiRy47VSZM635-b9NzlvebaOzI6m9zzvG]

位置・速度・加速度

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

リンク

http://gushwell.ifdef.jp/

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

「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=2844」から取得
個人用ツール
名前空間

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