【週刊p5js】work18

let max = 400;
let scale = 0.001;
let cd;

let xmin, xmax;
let ymin, ymax;
let cx, cy;

let size;

function setup() {
    createCanvas(900, 900);
    colorMode(HSB, 360, 100, 100, 100);

    smooth();
    noStroke();
    noLoop();

    background("#FAFAFA");
    cd = color("#222222");
    rectMode(CENTER);
}

function grain() {
    fill("#E6E8EC");
    noStroke();
    for(let i = 0; i < 20000; i++) {
        ellipse(random(width), random(height), 2, 2);
    }
}

function draw() {
    xmin = random(0.1, 0.4);
    xmax = 1.0 - xmin;
    ymin = random(0.1, 0.4);
    ymax = 1.0 - ymin;
    cx = random(20.05, 30.05);
    cy = random(10.05, 40.05);

    size = 30;

    grain();

    for(let x = xmin; x <= xmax; x += 0.03) {
        for(let y = ymin; y <= ymax; y += 0.03) {
            let xp = x;
            let yp = y;
            for(let cnt = 0; cnt < max; ++cnt) {
                xp += scale * cos(TWO_PI * noise(xp, yp) * cx);
                yp += scale * sin(TWO_PI * noise(yp, xp) * cy);


                let ratio = map(cnt, 0, max, 0.0, 1.0);
                strokeWeight(sin(PI * ratio) * 10);
                let hue = map(ratio, 0.0, 1.0, 180, 360);
                let cd = color(hue, 40, 90);
                cd.setAlpha(cos(PI * ratio * noise(ratio)) * 10);
                stroke(cd);
                point(xp * width, yp * height);
            }
        }
    }

    noFill();
    strokeWeight(2);
    stroke("#222222");
    rect(width / 2 , height / 2, width * 0.8, height *0.8);
    fill("#222222");
    rect(width * 0.1, height * 0.1, size, size);
    rect(width * 0.9, height * 0.1, size, size);
    rect(width * 0.9, height * 0.9, size, size);
    rect(width * 0.1, height * 0.9, size, size);
}

今週の作品メモ

📌 今週は、@deconbatch先生のnoteを参考にVector Fieldの扱いを勉強しました。
note.com 📌 英語だけど@deconbatchさんの過去作品とその解説が書かれているブログも最高です。（私が特に好きなやつ）
www.deconbatch.com

今週の雑談

📌 Citrus in the rain の6月の新曲リリックビデオを制作しました。
www.youtube.com 📌 Blenderでちまちまと制作していたミニチュアの部屋を舞台に女の子の思い出の部屋、そこからの旅立ちを表現しています。
📌 ひさしぶりにTouchDesignerをいじりました。

今日の #touchdesigner

🐤✨✨✨ pic.twitter.com/elOQlDdcxb

— ayato (@dn0t_) 2020年6月26日

📌 少し目を話していた好きにまた面白そうなTutorialが増えていやがる…（TDSWのも含めて。）

今週のラジオ

📌 赤い公園のTHE PARKと、波よ聞いてくれの最終回と、漫画「ダブル」と、野木亜紀子と、「SUNNY 強い気持ち・強い愛」の三浦春馬が好きという話をしました！！

【週刊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();
}

今週の作品メモ

結構フラットデザインからニューモフィズムに切り替わって来てる。
こうやって時代は終わるのか。 pic.twitter.com/TxfSrLNYl4

— 虎太郎🐈bird and insect (@kotaronya) 2020年6月13日

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

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

今週の雑談

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

ま、my new gear.... pic.twitter.com/W2hNxnDZqY

— ayato. (@dn0t_) 2020年6月13日

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

---

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

"be my escape" #dotnote pic.twitter.com/Hm3uBwtWR0

— ayato. (@dn0t_) 2020年6月13日

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

LOVE バナナマン🍌
#dotnote pic.twitter.com/yRcBtwTSz5

— ayato. (@dn0t_) 2020年6月5日

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

今週のラジオ

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