Continue(s)

Twitter:@dn0t_ GitHub:@ogrew

【週刊p5js】work20

p5js processing

2月から個人的に始めた#週刊p5js が今作で20回目ということで、今週は平日に毎朝作品を投稿しました。すごいねー、よくやったねー。そもそもこの企画、途中、普通にさぼってる週とかあって全然”週刊”ではなかったけどねー。（まあ、昨今の雑誌だって、そんなものよねー。）

「今週は毎日投稿しました」と書いたんですが、実際のところ、このあと紹介するアルゴリズムを使用してジェネった作品を載せていただけです。

ということで、最初は僕の一番のお気に入りから。

f:id:taiga006:20200711202524p:plainf:id:taiga006:20200711202503p:plain

（はてなブログに掲載できる画像が10MBまでだったので涙の圧縮…😢）

基本的に作品はループ処理で複数枚生成→ストックさせておいて、後で見て「おお、これいいじゃん」ってものを世に出しています。上の2枚はフォルダを開いた瞬間に「これだよ、これ！！！」と興奮して声が出てしまいました。

いわゆるカオスを扱ったジェネの作品の面白いところは、ほとんどコードを変えずにこんな作品も作れるところです。

f:id:taiga006:20200711203142p:plainf:id:taiga006:20200711203149p:plain

全体的に〇が不思議な軌跡を描いているのが面白いですね。

f:id:taiga006:20200711204058p:plainf:id:taiga006:20200711203904p:plain

たぶん一番反響が大きかったのはこれでした。インスタグラムに投稿したらスペインの学生から「どうやって作ったのか教えてほしい」なんてDMまでいただきました。 「左上のパラメータはなんのパラメータなんだい？」なんていう至極まっとうな質問をされたりもしました。

ということで、どんなことを中でやってるのかって話なんですが、特別なことは特にしていません。

出発点は、いわゆるカオスアトラクタ？と呼ばれるものを自分で作ってみたくて走り出したのですが、なんだかその過程で発見したカオスな作品がどれもピンポイントで自分の性癖に刺さってしまった、という感じです。

やったことは、まあ、漸化式を立てたにすぎません。

そもそもカオス？アトラクタ？って何よ、って人は英語版のWikiとかこのpdfとか「カオス　アトラクタ」とかで検索するといっぱい情報が出てきます。まあ僕も門外漢ですので、ここで話していることが数学的に正しいかどうか責任は持てません。

www.youtube.com

HoudiniですがHorikawaさんの動画もありました！（最後までしっかり見てないですが良さそうです。）

で、肝心の漸化式見せろよ、って？

ははーん、残念だったな、それがちゃんと残ってないんだわ（え

特にログをとらずにちまちまと同じ式をあーでもないこーでもないといじっていたせいで

上に作った作品たちがどの段階で生まれた作品なのかわかりません！！（どん

f:id:taiga006:20200711204858p:plain

唯一、上で紹介した「海と噴火」（今名付けた）作品のときのはTeXでメモっていたのがあるので載せておきます。

書いてないですけど、これを

f(x) = sin(x+c)
g(x) = cos(x-c)

としてプロットしています。

ついでに、ここまで読んでくれた奇特な読者に最高のサイトを教えてあげましょう。

有名なフラクタル、カオス、自己相似性に関するアルゴリズムの紹介がされているサイトです。

細かく式まで載っているものもあれば作品紹介だけのものもありますが、見ているだけでも十分楽しいサイトです。

僕はここでみたClifford Attractorsの記事やThorn Fractalの記事にめちゃめちゃ衝撃を受けました。

てな感じです。

勝手に作品紹介のコーナー！（怒られたら消す。）

「アトラクタ #processing」でTwitter検索したら、われらがデコさんの作品をTwitterで見つけました。

De Jong アトラクタというものらしいです。知らなかったので、あとで調べてみよう。

この方はTwitterフォローしていないのですが、RTでよく回ってくるのでついいいね！をしてしまいます。

調べてみるとこの方も漸化式をご自身でたてられて作品を製作しているようです。

どの作品も最高にクールですね。

それをベースにFALさんが30行でアトラクタを実装する様子をまとめた動画が最近バズっていました。

TEXTREMEはずるい。

今週の雑談

  • 今週も公私ともにいろいろありましたが、昨日の乃木坂46一期生の中田花奈の卒業発表にすべて持っていかれました。

  • とは言いつつ、すでに去年頭くらいから別仕事の関係で収録を休みがちでファンの間では「中田の次アシスタントどうするんだよ」って話のほうが盛り上がっていました。

  • CAPSULE のサブスク解禁されたね！

  • この動画いったい今まで何回見たことか……
www.youtube.com

  • ゆるく転職活動をしています。コロナ禍でいろいろどうなんだって時期ですが、いくつか楽しそうな会社さんに声をかけてもらったり、こっちから声をかけたり、ってことをしています。まあまずは業界勉強ですな。

今週のラジオ

  • 後半パートで話した話、いつかどこかで文に書くなりしておかないとなあと思っていた話なので、結構自分にとって大事なエピソードになりました。

  • でもやっぱり、コンビニでサンドイッチ買ったら大人だよね！？！？！？

【週刊p5js】work19

p5js processing

f:id:taiga006:20200705000011j:plain

function setup() {
    createCanvas(900, 900, WEBGL);    
    noLoop();
    smooth();
    pixelDensity(3);
    ortho();
    background(35);
}

function draw() {
    let rx = random(0, 45);
    let ry = random(0, 45);
    let rz = random(0, 45);
    
    let c1 = random(100, 200);
    let c2 = random(100, 200);
    let c3 = random(150, 250);
    
    ambientLight(100);  

    let margin = 0;
    let rangeX = width - margin * 2;
    let rangeY = height - margin * 2;

    let size = 30;

    let cntX = floor(rangeX/size);
    let cntY = floor(rangeY/size);

    for(let i = 0; i <= cntX; i++) {
        x = -rangeX/2 + i * size;
        for(let j = 0; j <= cntY; j++) {   
            y = -rangeY/2 + j * size;   
                        
            push();
            translate(x, y, 0);

            let p = 0;
            let r = random();
            if(r < 0.25) {
                p += size;
            } else if(r < 0.5) {
                p -= size;
            } else {
                p = 0;
            }

            let c = random();
            let flag = false;
            if(c < 0.025) {
                noStroke();

                directionalLight(c1, c2, c3,   0.25,   0.25, 0); // left
                directionalLight(c2, c3, c1,   -0.55,   0.35, 0);
                directionalLight(c3, c1, c2,   -0.45,  -0.15, -0.3);

                flag = true;
            
                // ambientMaterial("#FF2E63");
                // ambientMaterial("#b8d00a");
                // ambientMaterial("#2BDE73");
                ambientMaterial("#FF9933");
            } else if (c < 0.05) {
                noStroke();

                directionalLight(c2, c3, c1,   0.25,   0.25, 0); // left
                directionalLight(c3, c1, c2,   -0.55,   0.35, 0);
                directionalLight(c1, c2, c3,   -0.45,  -0.15, -0.3);

                flag = true;
            
                // ambientMaterial("#08D9D6");
                // ambientMaterial("#f67504");
                // ambientMaterial("#00A0FF");
                ambientMaterial("#333366");
            } else {
                stroke(175);
                noFill();
            }

            rotateX(rx);
            rotateY(ry);
            rotateZ(rz);

            if(random() < 0.6 || i == 0 || j == 0 || i == cntX || j == cntY) {
                if(random() < 0.8) {
                    box(size);
                } else {
                    let v = ceil(random(1,12));
                    if(random() < 0.5 && flag == true) {
                        sphere(size * 0.8);
                    } else {
                        box(size, size * v, size);                        
                    }
                }
            }
            pop();
        }
    }
}

今週の作品メモ

📌 p5jsのWEBGLモードでOrthographic projection（正投影図）できたんですね！！！！！という感動で作りました。
p5js.org 📌 サクッと作った作品ですが、結局配色に悩んで1時間位消費しました…。沼だ…。
📌 このwireframeが折り重なることで幾何学模様ができる感じ面白いことを見つけました。

今週の雑談

📌 全国の劇場で期間限定でジブリ作品が上映しているとのことで、上映4作品の内、見たことがなかった「ゲド戦記」を見てきたんですがとても良かったです。

📌 ドングルを購入したので、いよいよNotchをはじめました。わからないことだらけですが、楽しいです。

📌 永井一正さんの作るポスターが好きで購入しました。非常に満足しています。これをp5jsなどでカバーできたらいいなあ。

今週のラジオ