アートプログラミングをやってみたいブログ: 11月 2015

2015年11月12日木曜日

ジャックオーランタン

1/fゆらぎでせっかく炎のゆらぎを再現したので、それを使ってジャックオーランタンを実際に作ってみます。ハロウィンはとっくの昔に終わったけど、そんな事は気にしません。

材料は以下の通り。

紙コップ
ノートPC

これだけ。

さすがにカボチャを買ってきてくり抜くというのは、金銭的にも作業量的にも出来ないので、紙コップを使います。

ノートPCにフルスクリーンでこの間作った1/fのあれをちょっとカスタマイズして表示します。
ノートPCのモニタ側を下にして倒して、その上に紙コップを置きます。

クッソ雑だけど、図にするとこんな感じ。

これの動画を撮ると、

こんな感じ。

なかなか良い感じじゃないですかね！？

そんなわけで今日のところはここまで。
ハッピーハロウィン♪(もう終わったけど 2回目)

2015年11月7日土曜日

スマートイルミネーションみどり -なかやま幻影横丁- に行ってきました

横浜市で2011年頃から毎年開催されているスマートイルミネーションというイベントに行ってきました。

メインのみなとみらい(象の鼻パーク)で行われるスマートイルミネーション横浜2015は、10月30日～11月03日までと既に開催期間は終わっているのですが、その後に横浜市の「緑区(11月06～07)」「泉区(12月05日)」「金沢区(2月)」でそれぞれの区の特色を生かしたイベントが順次開催されている模様です。

詳細はスマートイルミネーション横浜2015公式Webサイトをどうぞ。

と、いうわけで今回は緑区の「スマートイルミネーションみどり」に参加してきました。

なんといってもイルミネーションはアートプログラミングの刺激になりそうですからね！

まずはパンフレット。

お店の壁に逆立ちをしている人たちが。

世界観やばいです。怪しい世界観丸出しです。

会場周辺は、今回のイベントで大量の提灯によって怪しく彩られた飲み屋街。
あのパンフレットの怪しい世界観が見事に現実のものになっていました。

そしてメイン会場の駐車場に着くと「スタンプラリー｣なるものが。

どうやらこの会場周辺を徘徊しているさかさま世界の住人に話しかけて、何かをするとスタンプが貰えるらしい。俺みたいにおっさん一人だと、こういった参加型のイベントはきついので、他の人がやっているのを見ながら周辺を散策。

会場周辺では色々なものがさかさまに！

自転車がさかさま！

スナックの看板がさかさま！

お店のメニューもさかさま！

のれんと提灯がさかさま！

商店街の看板までさかさま！

このほかにも有料でゴスペルライブなんかもやってたみたいです。

外からちょっと聞いたのですが、すごくパワフルな歌声で知ってたらちゃんとお金払って中で聞きたかったなぁ。(下の写真はわかりにくいですが、ゴスペルライブの様子です)

ゴスペルライブ！

そんなこんなで商店街の一角が怪しい光に包まれていて、ちょっと不思議で楽しい空間でした。

おっさん一人だとスタンプラリーは厳しかったケド(スタンプを貰うためには歌わなければならないとかあったから)、十分に楽しめるイベントでした！

いつかは自分の作品が置けるようになるといいなぁ。

2015年11月6日金曜日

ランダムウォーク

アートプログラミングと聞いて最初に思い浮かべるものは？

と聞いた時に返ってくる答えランキング1位といえば「ランダム」(俺調べ調査人数1人)。

ランダムな要素を取り入れると人の意志とは無関係に、予想もつかない変化を見せてくれるので単純におもしろい。数学的にはきっと値に偏りがないだとか、再現性がないようにとか、そういった色々考慮すべき点はあるとは思いますが、今回は単純にProcessingのrandom()が返してくれる数値で遊んでみます。(そういえばrandom()の中のアルゴリズムって何だろ？？)

今回作るのはランダムに発生する数値を可視化するランダムウォークです。

ウォークと名がついているから、とりあえず今回は移動だけにランダムな値を適用して見ていこうかと思いますが、移動だけでなく色、形、大きさ、加速度、色々なパラメータに適用する事でもっとおもしろい動きになるらしいです。

二次元平面のランダムウォーク

まずは二次元平面上を上下左右の4方向にそれぞれランダムに移動させてみます。

ソースコード

int gX;
int gY;

void setup() {
  size(200, 200);
  background(255);
  
  gX = width / 2;
  gY = height / 2;
}

void draw() {
  int value = (int)(random(4));
  if(value == 0)      { gX += 1; }
  else if(value == 1) { gX -= 1; }
  else if(value == 2) { gY += 1; }
  else                { gY -= 1; }
  
  stroke(0);
  point(gX, gY);
}

実行結果

これだけでランダムに移動する軌跡を描くことができました。
ちょ、ちょっと地味っすね。

重要なのは、draw()関数の最初の部分。
random()で生成した0.0～3.9までの値を元に、上下左右それぞれの方向へ1ピクセル分移動させるように計算しています。

んーしかし、やっぱりこれだけではちょっと物足りないような・・・？

大量の二次元平面ランダムウォーク

という事で、以下のようにちょっと拡張してみたいと思います。

ランダムウォークする軌跡を大量にする(100個くらい？)
それぞれの軌跡に個別の色を設定する
それぞれの軌跡が混じり過ぎないように過去の線は薄くする

ソースコード

public class Walker {
  int mX;
  int mY;
  color mColor;
  
  public Walker(color col) {
    mX = width / 2;
    mY = height / 2;
    mColor = col;
  }
  
  public void update() {
    int value = (int)(random(4));
    if(value == 0)      { mX += 1; }
    else if(value == 1) { mX -= 1; }
    else if(value == 2) { mY += 1; }
    else                { mY -= 1; }
  }
  
  public void onDraw() {
    stroke(mColor);
    point(mX, mY);
  }
}

ArrayList<Walker> gWalkerList;

void setup() {
  size(200, 200);
  background(0);
  
  gWalkerList = new ArrayList();
  
  for(int i=0; i<100; ++i) {
    gWalkerList.add(new Walker(color((int)random(255), (int)random(255), (int)random(255))));
  }
}

void draw() {
  fill(0, 10);
  rect(0, 0, width, height);
  
  for(Walker walker : gWalkerList) {
    walker.update();
    walker.onDraw();
  }
}

実行結果

複数の軌跡を描くために、軌跡描画処理をクラス化しましたが、基本的な処理は前述のものと変わりありません。

なんだか微生物が動いているみたいでキモかわいい！
でもさすがに100個は多すぎたかな？

2015年11月1日日曜日

はい、つづきました。

前回、前々回は以下を参照ください。

1/fゆらぎその1：http://tryoutartprogramming.blogspot.jp/2015/10/1f-1.html
1/fゆらぎその2：http://tryoutartprogramming.blogspot.jp/2015/10/1f-2.html

と、いうワケでようやく作っていこうかと思います。
その1の最後にも書きましたが、とりあえずJavaに慣れているから、今回は手っ取り早くProcessing(2.1.1)を使ってみます。

1. 素直に実装してみる

まずは前回の数式を素直に実装してみようかと思います。

ソースコード

float x = 0.1f;

void setup() {
  size(200, 200);
  background(0, 0, 0);
 
  frameRate(20);
}

void draw() {
  fill(0, 0, 0);
  rect(0,0,width, height);
 
  if(x < 0.5f) {
    x = x+2.0f*x*x;
  }
  else if(x >= 0.5f) {
    x = x-2.0f*(1.0f-x)*(1.0f-x);
  }
 
  fill(255, 36, 0, (255*x));
  rect(0,0,width, height);
}

実行結果

おぉっ。
これだけでも何かそれっぽい。

でもどこかで見たけれど、確かに上端と下端に貼りつきやすい気がする。
この実行結果の例の場合は黒(下端)にちょっとより過ぎているような。。。
と、いう事でどこかのパクりではありますが、解決策を入れてみようかと思います。

2. 改良版

対策としては単純に上端および下端に近い値になった時、乱数で適当な値に変更してしまいます。
あと、炎を再現するとなると、真っ暗になるのもあれなので、ちょっとゲタ履かせます。

ソースコード

float x = 0.1f;

void setup() {
  size(200, 200);
  background(0, 0, 0, 255);
  frameRate(20);
}

void draw() {
  fill(20, 10, 0);
  rect(0, 0, width, height);
 
  if(x < 0.5f) {
    x = x+2.0f*x*x;
  }
  else if(x >= 0.5f) {
    x = x-2.0f*(1.0f-x)*(1.0f-x);
  }
  
  if((x < 0.005) || (x > 0.995)) {
    x = random(1.0);
  }
  
  x = x * 0.7 + 0.3f;
 
  fill(255, 36, 0, (255*x));
  rect(0, 0, width, height);
}

実行結果

おぉっいいね。いい感じ。
形はまったく炎っぽくないけど、色の変化のゆらゆら感はなかなかではないだろうか。

と、いうわけで、3回に渡って1/fゆらぎの実装をしてみましたが、丸や四角なんかよりも、もっと地味な結果になりました。3回にも渡ってやるほどのものか？と言われちゃいそうですが、なんとなくそれっぽい感じのモノがとりあえず出来たので、個人的には満足です。最初だし。

これをスマホで表示して、かぼちゃの中に放り込めばジャックオーランタンが出来上がるかも？

2015年11月12日木曜日

ジャックオーランタン

2015年11月7日土曜日

スマートイルミネーションみどり -なかやま幻影横丁- に行ってきました

2015年11月6日金曜日

ランダムウォーク

二次元平面のランダムウォーク

ソースコード

実行結果

大量の二次元平面ランダムウォーク

ソースコード

実行結果

2015年11月1日日曜日

1/fゆらぎ (その3)

1. 素直に実装してみる

ソースコード

実行結果

2. 改良版

ソースコード

実行結果