1225

Twitter:@dn0t_ GitHub:@ogrew

【週刊p5js】work16

let size = 60;
let gridW = 0, gridH = 0;

function setup() {
    createCanvas(2100, 2100);
    gridW = int(width / size);
    gridH = int(height / size);

    grid = [];
    list = [];

    // -------------------------------- //
    // 一定確率で壁の突起を設定する.
    // -------------------------------- //
    for (let i = 0; i < gridW; i++) {
        grid[i] = [];
        for (let j = 0; j < gridH; j++) {
            if (random() < 0.6) {
                grid[i].push(7);
            } else if (i == 0 || i == gridW - 1 || i == gridW - 2
                || j == 0 || j == 1 || j == gridH - 1) {
                // 外周は突起にはしない
                grid[i].push(7);
            } else {
                grid[i].push(1);
                list.push([i, j, false]);
            }
        }
    }

    background(250);
    strokeWeight(1);

    // -------------------------------- //
    // 白マスを1つずつ走査していって周辺のマスを決める.
    // -------------------------------- //
    list.forEach(e => {
        let x = e[0];
        let y = e[1];

        if (x < gridW - 1) {
            // 右マスが白でない
            if (grid[x + 1][y] != 1) {
                // ここは右端 => 右マスを影と奥の壁(4)で仮決定
                grid[x + 1][y] = 4;

                if (y < gridH - 1) {
                    // 下マスも白 => 全面が影(6)に変更
                    if (grid[x][y + 1] == 1) grid[x + 1][y] = 6;
                    // 右下マスも白 => 影と上面(8)に変更
                    if (grid[x + 1][y + 1] == 1) grid[x + 1][y] = 8;
                }
            }
        }

        if (y > 0) {
            // 上マスが白ではない
            if (grid[x][y - 1] != 1) {
                // 奥の壁と上面(2)で仮決定
                grid[x][y - 1] = 2

                if (x > 0) {
                    // 左マスも白 => 上マスは上面(5)に変更
                    if (grid[x - 1][y] == 1) grid[x][y - 1] = 5;
                    // 左上マスも白 => 影と上面の(8)に変更
                    if (grid[x - 1][y - 1] == 1) grid[x][y - 1] = 8;
                }
                if (x < gridW - 1) {
                    // 右マスが白ではない & 右上マスが白ではない => 右上は上面 + 影(3)
                    if (grid[x + 1][y] != 1 && grid[x + 1][y - 1] != 1) {
                        grid[x + 1][y - 1] = 3;
                    }
                }
            }
        }

    });

    // -------------------------------- //
    // パターンに応じて各マスを描画.
    // -------------------------------- //   
    for (let x = 0; x < gridW; x++) {
        for (let y = 0; y < gridH; y++) {
            let pattern = grid[x][y];
            let colorFlg = false;
            if (x > 1 && y > 1 && x < gridW - 1 && y < gridH - 1
                && grid[x - 1][y] != 1 && grid[x + 1][y] != 1
                && grid[x][y - 1] != 1 && grid[x][y + 1] != 1) {
                if (random() < .5) {
                    colorFlg = true;
                }
            }
            drawPattern(x, y, pattern, colorFlg);
        }
    }

    // -------------------------------- //
    // 白マスの境界線を必要に応じて描画.
    // -------------------------------- //
    stroke(0);
    list.forEach(e => {
        let x = e[0];
        let y = e[1];

        let p = x * size;
        let q = y * size;

        // 上マスが白ではない
        if (y > 0 && grid[x][y - 1] != 1) {
            line(p, q, p + size, q);
        }
        // 下マスが白ではない
        if (y < gridH - 1 && grid[x][y + 1] != 1) {
            line(p, q + size, p + size, q + size);
        }
        // 左マスが白ではない
        if (x > 0 && grid[x - 1][y] != 1) {
            line(p, q, p, q + size);
        }
        // 右マスが白 or 全面影ではない
        if (x < gridW - 1 && grid[x + 1][y] != 1 && grid[x + 1][y] != 6) {
            line(p + size, q, p + size, q + size);
        }
    });
}

function drawPattern(x, y, pattern, colorFlg) {
    let p = x * size;
    let q = y * size;

    // (1) 白壁
    if (pattern == 1) {
        if (colorFlg == true) {
            let rnd = random();
            if(rnd < 0.25) {
                fill(88,112,88);
            } else if (rnd < 0.5) {
                fill(255,216,0);
            } else if (rnd < 0.75) {
                fill(88,116,152);
            } else {
                fill(232,104,80);
            }
        } else {
            fill(250);
        }
        noStroke();
        rect(p, q, size, size);
    }
    // (2) 奥の壁 + 上面
    else if (pattern == 2) {
        drawTOP(p, q);

        fill(250);
        stroke(250);
        triangle(p, q, p + size, q, p, q + size);

        stroke(30);

        point(p, q);
        line(p, q + size / 2, p + size / 2, q);
        line(p, q + size, p + size, q);
    }
    // (3) 上面 + 影
    else if (pattern == 3) {
        drawTOP(p, q);
        fill(0);
        triangle(p, q + size, p + size, q, p + size, q + size);
    }
    // (4) 影 + 奥の壁
    else if (pattern == 4) {
        drawWall(p, q);
        fill(0);
        stroke(0);
        triangle(p, q, p + size, q, p, q + size);
    }
    // (5) 上面
    else if (pattern == 5) {
        drawTOP(p, q);
    }
    // (6) 影
    else if (pattern == 6) {
        fill(0);
        stroke(0);
        rect(p, q, size, size);
    }
    // (7) 奥の壁
    else if (pattern == 7) {
        drawWall(p, q);
    }
    // (8) 影 + 上面
    else if (pattern == 8) {
        drawTOP(p, q);
        fill(0);
        triangle(p, q, p + size, q, p, q + size);
    }
    // エラー処理
    else {
        print("ERROR: unknown pattern!!");
    }
}

function drawTOP(p, q) {
    stroke(0);
    let num = 12;
    delta = size / num;
    for (let i = 0; i < num; i++) {
        line(p+1, q+1 + i * delta, p + size, q+1 + i * delta);
    }
}

function drawWall(p, q) {
    stroke(0);
    line(p, q + size / 2, p + size / 2, q);
    line(p, q + size, p + size, q);
    line(p + size / 2, q + size, p + size, q + size / 2);
}

f:id:taiga006:20200523215104j:plain

今週の作品メモ

📌 今週は、プライベートで毎週放送しているPodcastのラジオ番組がわけあってお休みということもあって前からやってみたかった、メディアアートの過去の大作を自分で再実装してみるというチャレンジです。
📌 選んだのは コードアートのパイオニアの一人と言われている Edward Zajecの1971年発表の作品 “Il Cubo” です。
📌 元の論文が公開されています。イタリア語です。
📌 一見、3D表現にも見える、凹凸のブロックとそれが生む影によって構成される作品はアルゴリズムに従って8つの基底パターンから1つを選びブロックごとに描画されます。まさにジェネラティブな作品です。
📌 ネットで検索しても先行実装例?はあまりありませんでした。その中で参考にした2つのコードへのリンクを載せておきます。

turtletoy.net github.com

📌 コメントをたくさん残しておいたので、詳しくは説明しません。たくさんケースごとに分岐させてます。元の論文はもうちょっと賢い方法っぽい(?)
📌 調べながらメモった8つの基底パターン。たぶんソースコードと対応する、はず。
f:id:taiga006:20200523230727j:plain

今週の雑談

📌 先週は #週刊p5js お休みしました。理由はこれに参加してたからです。

📌 今週はインプット習慣ということで、普段聞かないラジオとかテレビとか結構まとめて見た。
📌 特に自分的にインパクトがあったのは、GERAラジオでやってる「ラランドの声溜めラジオ」。それとYoutubede「太田伯山」を見た流れで、感化されて見た神田松之丞真打昇進襲名披露興行でやった「中村仲蔵」。

www.youtube.com

📌 個人的に、母親が大の伯山ファンなので意識的にあんまり伯山の講談は見ないようにしてきたのだけれど、悔しいことにこれが面白かった。
📌 はは~、深夜のラジオでひねくれた悪口ばっか言ってるイメージだったが、先にこっちを見ておくべきだったな、当たり前だけど。
📌 あとはこれはそこまで超絶面白かったってわけではないけど、さくっと楽しめるコンテンツという意味でAmazon Prime Video オリジナルドラマ「UPLOAD」が良かった。

📌 内容はツイートの通り。「近未来の設定の割にVRHMDがでかくね!?」みたいなことがずっと引っかかった。貧困層向けの「2G(ギガ)」ってVR空間があるのは面白かった。
📌 シーズン2はまだだけど、まあまた時間ができたら見ようかな。
📌 なんでかわからないけど、くだんのSNS誹謗中傷で人が自殺した件について3人とLINEでその話題になったけど、恋愛リアリティーショーってパッケージ自体が悲しいくらい人生の浪費だと思うのでまず見るべきではないし、何よりみんな1つの出来事からそれを一般化して教訓めいたものを見出したり意見したがったりしすぎだと思う。
📌 「占いなんて 怠け者の運命」って90年代にSMAPが歌ってたけど、そんな感じ。「くだらないことを話して笑いあって 分かり合うほうがなんか深い気がする」
📌 事務所を通す必要がないことで中間マージンや保証が必要ないという意味で、素人を扱う番組がどんどん増えているけど基本全部見ることはない。局にお金が集まらなくなった結果、どんどんテレビ制作のウーバーイーツ化が進むね。
📌 音楽はMura Masaが個人的にプチブーム!R.Y.C.もすばらしいけど1stのMura Masaもリズム感、音作り、ともに最高傑作だと思う。
📌 あと何よりジャケット!よくないですか!?調べたところこういうデザインコンセプト含めてMura Masa本人がプロデュースしているみたいですが、天は二物どころじゃないものを与えていませんか…。ここまでジャケットにぐっと来たのは久しぶりでした…。

f:id:taiga006:20200524125159j:plain

今週のラジオ

📌 ということで今週は以上です。ラジオがない分、話が長くなってしまいましたね。

【週刊p5js】work15

let countW = 20;
let marginW = 80;

let countH = 16;
let marginH = 120;

function setup() {
    createCanvas(900, 900, WEBGL);
    smooth();
    frameRate(1);
}

function draw() {
    pointLight(255, 255, 255, 10,-100, 500);
    pointLight(255, 255, 255,-10, 100, 500);

    background(30);

    noStroke();
    for(let n = 0; n < 2000; n++) {
        ambientMaterial(150);
        push();
        translate(random(-width/2, width/2), random(-height/2, height/2), -40);
        sphere(1, 3, 3);
        pop();
    }

    let intervalX = (width - marginW*2) / countW;
    let intervalY = (height - marginH*2) / countH;

    for(let i = 0; i <= countW; i++) {
        let xPos = (-width/2 + marginW) + i * intervalX;
        for(let j = 0; j <= countH; j++) {
            let yPos = (-height/2 + marginH) + j * intervalY;

            let l = map(i + j, 0, countW + countH, 10, 250);
            let size = random(10, 30);

            push();
            translate(xPos, yPos, 0);
            let rnd = random();
            if(rnd < 0.02) {
                ambientMaterial(120);
                box(size, size, l);
            } else if (rnd < 0.05) {
                ambientMaterial(160);
                rotateX(80);
                cylinder(size/2,size * 2);
            } else if (rnd < 0.8) {
                rotateX(i);
                rotateY(j);
                if(random() < 0.025) {
                    ambientMaterial(240, 50, 20); 
                } else {
                    ambientMaterial(240); 
                }
                box(size);
            } else {

            }
            pop();    
    
        }
    }
    
}

f:id:taiga006:20200510005516j:plain

今週の作品メモ

📌 疲れているので手抜き。p5.jsでWEBGLをとりあえずいじってみようか、というテンション。
📌 Daniel Shiffman先生の動画を久しぶりに見た。

youtu.be

今週の雑談

📌 ayato.meドメインを購入しました。400円💸
📌 GW中は伊坂幸太郎の「逆ソクラテス」とアガサ・クリスティの「そして誰もいなくなった」を読みました。今は、アガサ・クリスティの「スタイルズ荘の怪事件」を読んでいます📚

📌 僕は所謂クリエイターと言われる人たちが今のタイミングになって #検察庁法改正案に抗議します ってツイートしているのがちょっと悲しくなります。
📌 「クリエイターが政治のことを語るなんて…」ということではなくて、こんな自体になってなお、意見の根拠が結局SNSで拾った知識で、それで反政府のスタンスをとっている姿が悲しいんですよ、勝手な、一方的なものですが。それから子供向けのまとめサイトTwitterで拾った画像じゃなくてちゃんと一次資料、公的なサイトを当たってくれ~~~。(今はそこさえも怪しい、という気持ちも少しありますが。)とはいえ、みんな「困ったら公式ドキュメントを読む」ことの大事さはよくわかっていますよね???
📌 それでもできることはあります。関心を持ってアクションを取る姿は大事です。僕も今回は偶然少し早く関心を持つことができただけです。【要請】東京高検・検事長黒川弘務氏の違法な定年延長に抗議し、辞職を求めます - Change.org 署名も賛同いただける方はよければ。(もうすぐ目標の20万ですね。)
📌 ここまでなめられた法改正とか見ると、食べ物と一緒で放っておけば腐っていくんですね政治も、という気持ちになります。
📌 さて、自粛期間が長引く中で、今更ながら巴山竜来さんの「数学から創るジェネラティブアート」 を購入したので、今後の #週末p5.js の活動に生かしていきたいと思っています。
📌 takawo 先生の作ったツールでこれまで作ってきた14の #週末p5js の作品をまとめたらちょっとエモくなってしまった。

今週のラジオ

📌 今週のはすごい、自分のパーソナリティを話すことができた、結構、大事な回だったと思います。(賛同者が果たしてどれくらいいるかわからないけど。)
📌 こんなふうに改めて文章に起こすのは恥ずかしいし、うまくまとめられる自信ねーや、みたいな話を残しておけるというのがPodcastの醍醐味かも知れないですね。
📌 この企画、相方と関係なくすごい好き。その話もできてよかったです。

📌 350can.beerドメインを購入しました。3200円💸