スケーラブルアート論

概要

前提スキル

一年生の時にメディアプログラミング演習Iを履修したのと同等のプログラミングスキルがあるものとして、授業を進めます。もし、プログラミングに不安があるなら、上記テキストを使って、自分で予習や自習をしてください。 openFrameworksはProcessingと似ているため、Processingを知っていると、理解が早いです。

成績評価

出席：学生証scan。3限PC演習室と4限5303教室で2度タッチすること。
課題：セルオートマトン課題、再帰呼び出し図形課題、複素平面フラクタル課題
小テスト：ハイスコア

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

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

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

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

開発環境

開発環境として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
- ドットインストール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

予定

2019年度

9/13(金) ガイダンス, 生物と情報とアート，openFrameworksプログラミング体験
9/20(金) 生物と情報とアート，XCodeを使用したopenFrameworksプログラミング実習
9/27(金) 幾何学図形の描画
- （oF実習）
  - 教科書 1章読み物として読む。
  - 教科書 2章実際にプログラムを作ってみる。
  - 　２－４「数値の記憶と計算」までをやり終えて、自作プログラムの実行ファイルを提出。
  - 幾何学図形の描画、色の設定、変数
  - 　プロジェクトフォルダーのbinフォルダーの中にあります。
    - ファイル名　番号_名前のローマ字例 1724000_suzukiichiro
- 講義：ディープラーニングによる色の芸術的表現1
  - 完全情報確定ゼロサムゲーム、アルゴリズムとヒューリスティック、エキスパートシステム
10/4(金) 幾何学図形の描画
- （oF実習）
  - 　２－８「条件分岐」までを学習し、自作プログラム実行ファイルを提出。
  - 繰り返し、配列、図形の移動、条件分岐
- 講義：ディープラーニングによる色の芸術的表現2
  - ディープラーニング
10/11(金)
- （oF実習）
- 　２－１１「より高度な表現」までを学習し、自作プログラムの実行ファイルを提出。
- マウスアクション、摩擦、重力、奇跡のフェード
- この日の授業までに2章を終えてください。2章までに学んで、制作したプログラムを提出してもらいます。
- 講義：最大公約数と矩形分割
10/18(金)
- （P5実習）
- 　Generative Art with MathのCh1, Ch2を学ぶ。
- （oF実習）
- 　３－１，２，３を学習する。
  - ３－１は、読んで理解してください。プログラム例は作らなくてもよいです。
  - ３－２は、３－２－７「画像ファイルを扱う」だけでもよい。余裕がれば、他の単元を勉強してもよいです。、
  - ３－３は、実際に新たにクラスを作成し、プログラムを作りながら、学習を進めてください。
- 　３－４「アドオンの利用」以降は学習しなくてもよい。関心に応じて学習してください。
- 講義：
10/25(金) クラスオブジェクトの使用、ランダムウォーク
- （実習）
- 講義：
11/8(金)1次元セルオートマトン
- （実習）
- 講義：
11/15(金) ライフゲーム
- （実習）
- 講義：
11/22(金) ラングトンのアリ
- （実習）
- 講義：
11/29(金) Boid、物理エンジン Box2D
- （実習）
- 講義：
12/6(金)フラクタルと自己相似形と再帰呼び出し
- （実習）
- 講義：
12/13(金) ニューラルネットワーク、遺伝的アルゴリズム
- （実習）
- 講義：
12/20(金) 小テスト
- 授業で扱った内容すべてが含まれます。
1/10(金) 予備日（出席は取りません）

第1課題 2章までの練習プログラム
- 提出締切日 10/16
第2課題「創発ジェネラティブアートのプログラム」
- 提出締切日 1/7(月)　
- 「ライフゲーム、Boid、アリ、Box2D、フラクタル」の中から、1つ以上を選び、自分のオリジナリティを加えたプログラムを提出してください。
- ソースプログラムも採点の対象としますので、プロジェクトのフォルダー全体を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フォルイダー内のprojectGeneratorフォルダー内のprojectGeneratorを実行する。
Project Path:にoFのあるフォルダーを指定する。
Project Name:に、プロジェクトの名前を入れる。
Addons:に、使用する追加機能（アドオン）を入れる。通常は、なしでよい。
Generateをクリックする。
Apps内のMyAppsにマイプロジェクトが作成されている。
Open IDEをクリックした場合
- XCodeが立ち上がることを確認する。
Closeをクリックした場合
- Apps内のMyAppsに作成したプロジェクトフォルダーを開く。
- プロジェクト名.xcodeprojファイルをクリックして、XCodeを起動する。
作成したプロジェクトを起動し、srcを見てみる。
- ofApp.cppのメソッドの中身が空っぽ。
- ここにプログラムを書いていく。

クラスの作成

新しくクラスを作るには、「プロジェクト＞新しい項目の追加...」 を開き，「C++ファイル」と「ヘッダーファイル」を一つずつ作る。
- 名前をそれぞれXxx.cpp，Xxx.hとし、場所はともに ..\src とする
- （注）「クラスの追加」や「クラスウィザード」は使えない。
マウスカーソルをソリューションエクスプローラー上のsrcに置き、ハイライトさせる。
ソリューションエクスプローラー上のsrcの中にXxx.cpp と Xxx.h が新規作成される。

ヘッダファイル Xxx.h は，

#pragma once
#include "ofMain.h"

class Xxx {
private:
	ofPoint pos;
	float radius;

public:
	Xxx();
	void hogehoge();
};

などと、記述する。

ofMain.h をインクルードし、クラスの定義の最後にセミコロンがつくことに注意する。
#pragma once は，このヘッダファイルを複数回読み込まないようにするためのもの。
括弧で囲まれた部分 {...} には，変数の宣言やメソッド（関数）の宣言を書く
private: に続く部分には，クラス内部のみで利用する変数、メソッドを宣言する。
public: に続く部分には，クラス外部からアクセスできる変数、メソッドを宣言する。
Xxx(): はコンストラクターといい、クラスと同じ名前のメソッドである。クラスのインスタンスを生成するときの初期化処理などを記述する。

C++ファイル Xxx.cpp は，

#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);
}

などと、メソッドの本体を記述する。

メソッドの定義の最後にセミコロンがつかないことに注意する。

もとのcppファイルodApp.cppのヘッダーファイルofApp.hに、Xxx.hをincludeする。例えば、ofApp.hは、以下のとおり。

#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;
};

publicの領域にXxxクラスのインスタンスmyObjを宣言している。

生物と情報とアート

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

http://abandonedart.org/

論理回路

https://wwws.kobe-c.ac.jp/deguchi/sc180/logic/gate.html

最大公約数と矩形分割

現代アート作家　モンドリアンの代表作品、Composition

最大公約数

ユークリッドの互除法

自然数x0,x1の最大公約数の求め方（x0 > x1）
1. x0をx1で割り、余りをx2とする。
2. x1をx2で割り、余りをx3とする。
  - 割り切れるまで、この操作を繰り返す。
3. xNで割り切れたら、xNが最大公約数である。

//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);  //最大公約数を表示

長方形の分割

ユークリッドの互除法を可視化してみる。

自然数x0,x1を2辺とする長方形を正方形で分割する。
- 最も小さい正方形の1辺が最大公約数

DivRect

//横縦比が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;            //幅を更新
  }
}

正方形に色を付けてみる

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;
  }
}

正方形の分割

自然数x0とx1の縦横比x0:x1を使って、長方形を正方形に変形すると、正方形を長方形に分割することになる。

x0×x1の横長の長方形を x1/x0 に横方向に圧縮して正方形にする。

DivSquare

//縦横比が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;
  }
}