Continue(s)

Twitter:@dn0t_ GitHub:@ogrew

【週刊p5js】work17 

let w, h;
let arr = [];

function setup() {
    createCanvas(800 ,800);
    noLoop();
    
    hw = width/2;
    hh = height/2;
    imageMode(CENTER);

    for(let i = 0; i < 6; i++) {
        arr[i] = random(100, 300);
    }
}

function draw() {
    background(225,230,236);

    drawingContext.shadowBlur = 10;

    let g = createGraphics(width, height);
    g.background(225,230,236);
    g.translate(200, 550);
    g.erase();
    let dh = 0;
    let dSizeX = 25;
    let dBuffer = 50;
    for(let i = 0; i < 6; i++) {
        let dSizeY = arr[i];
        g.rect(i * (dBuffer + dSizeX), dh, dSizeX, -dSizeY, 10);
    }
    g.noErase();
    g.noStroke();

    g.translate(200, 50);
    g.fill(225,230,236);
    g.ellipseMode(CENTER);
    g.drawingContext.shadowBlur = 10;
    g.drawingContext.shadowOffsetX = 4;
    g.drawingContext.shadowOffsetY = 4;
    g.drawingContext.shadowColor = color("#A3B1C6");
    g.ellipse(50, 0, 50);
    g.ellipse(-50, 0, 50);
    g.drawingContext.shadowOffsetX = -3;
    g.drawingContext.shadowOffsetY = -3;
    g.drawingContext.shadowColor = color("#FFFFFF");
    g.ellipse(50, 0, 50);
    g.ellipse(-50, 0, 50);

    g.textSize(20);
    g.fill(150);
    g.textAlign(CENTER, CENTER);
    g.textStyle(BOLD);
    g.text(">", 50, 0);
    g.text("<", -50, 0);

    push();
    translate(200, 550);
    noStroke();
    fill(254, 128, 26);
    for(let i = 0; i < 6; i++) {
        let dSizeY = random(arr[i] * .1,  arr[i] * .7);
        rect(i * (dBuffer + dSizeX), dh, dSizeX*0.9, -dSizeY, 10);
    }
    pop();

    push();
    translate(hw, hh);
    drawingContext.shadowOffsetX = 4;
    drawingContext.shadowOffsetY = 4;
    drawingContext.shadowColor = color("#A3B1C6");
    image(g, 0, 0);
    drawingContext.shadowOffsetX = -3;
    drawingContext.shadowOffsetY = -3;
    drawingContext.shadowColor = color("#FFFFFF");
    image(g, 0, 0);
    pop();
}
f:id:taiga006:20200614200351j:plain

今週の作品メモ

📌 最近よくSNSなどで見る、巷ではフラットデザインの次に来るとか来ないとか言われている（？）"Neumorphism"というやつを無理やりp5.jsだけでやってみました。
📌 ソースコード読める人ならわかるけどこんなの全然だめです。CSSでおとなしく頑張りましょう。
📌 まあ、そもそもこのデザイン指針自体どうなん？って言われてるみたいですが。
📌 一応詳しい日本語記事があったので載せておきます。
qiita.com

📌 ちょっと頑張ってた事案で、空回りというか周りとの温度感に自分のSAN値が削られてしまって非常に萎えていたんですが、週刊p5.jsに取り組んで少し回復しました。
📌 ありがとう、p5.js！！
📌 自分の代わりに頑張ってくれている人には声をかけていきたいし、自分の立場を考えて発言していきたいですね。
📌 況や、余計ない一言や、生産性のない発言は避けていきたい。

今週の雑談

📌 Notch始めます！実は打倒コロナで始まったNotchのキャンペーンセールに一番乗りくらいでLearnユーザ用ドングルを購入していたのですが、昨日まで届いていませんでした。

📌 何度か本社に問い合わせて、対応してもらった結果ついに手に入りました。
📌 CodeMeterを使ったアカウントのアクティベート化に少し手間がかかりましたが、なんとかSaveできるようになったことを確認しました。
📌 （ちなみにNotchは使うこと自体は無料でもできます、ただファイルの保存ができません。）
📌 （つまり、ぼくは5000円で保存機能を買った、、、ということ？）

📌 PhotoShopの勉強も始めました！
📌 こんなのとか…

📌 こんなのを作ってみました。

📌 デザイナーになるぞ、ってわけではないんですが一応少しは使えるようになっておこうと思って始めました。
📌 まあ、Notchも来たし、無理ないペースでいろんなTutorialだったりをこなしていきたいと思います。

今週のラジオ

📌 佐々木希の顔が覚えられない、という話をしています。

【週刊p5js】work16

p5js processing 
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);

    // -------------------------------- //
    // 白マスを１つずつ走査していって周辺のマスを決める.
    // -------------------------------- //
    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表現にも見える、凹凸のブロックとそれが生む影によって構成される作品はアルゴリズムに従って８つの基底パターンから1つを選びブロックごとに描画されます。まさにジェネラティブな作品です。
📌 ネットで検索しても先行実装例？はあまりありませんでした。その中で参考にした２つのコードへのリンクを載せておきます。

turtletoy.net github.com

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

今週の雑談

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

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

www.youtube.com

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

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

f:id:taiga006:20200524125159j:plain

今週のラジオ

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