日常の進捗

主に自分のための,行為とその習慣化の記録

#Codevember day04: Sky

「コーディングチャレンジ的なものを続けるコツ」は,軽くてもいいので1日のうちで早い時間にアップするのがいい.

早くアップできると気分が軽くなるし,あとで手も入れやすい.たとえば明日のCodevemberのお題は「Music」だけど,早めに取り組んであげられていると,p5.jsでサウンドの読み込みどうするんだっけとか,音楽っぽいグラフィック,五線譜ぽいパターンとか・・・みたいなことを前の日のうちに予めイメージしておきやすい.基本的なところで見通しがたっていると作業を進めるのが精神的にも楽になる.

mp3の再生はp5.jsでも簡単そうだから,94がProcessingでやっていたものを参考にして書いてみるのも良いかもしれない.

【Processing】minimを使ってみる(3) - マイナンバー忘れました

//敷き詰めた四角で雲を表現
//変数sで設定している値が
//1. 彩度0明度100のとき白
//2. 彩度100明度100のとき青
//なのでその範囲でノイズで値を変化させると雲ぽい表現になる

let grid = 5;

let font;

function preload() {
    font = loadFont("Lato-Italic.ttf");
}

function setup() {
    createCanvas(960, 540);
    colorMode(HSB, 360, 100, 100, 100);
    noCursor();
}

function draw() {
    //background(220, 80, 80);
    let f = frameCount;
    let n2 = noise(f / 100);
    let sSlide = map(mouseX,0,width,0,80); //雲の量(四角の彩度)をマウスでコントロールする値

    for (let y = 0; y < height; y += grid) {
        for (let x = 0; x < width; x += grid) {

            //ノイズを発生(0〜1の範囲)
            let n = noise((x + f*3) / 100, (f + y) / 100, f / 100);
            //ノイズの値を(0〜1)から(0〜80)へ+50
            let s = map(n, 0, 1, 0, 80) + sSlide;
            
            s = min(s, 100); //100より大きい場合は100に
    
            let c = color(220, s, 80, 50); //色の彩度に割り当てる
            fill(c);
            noStroke();
            rect(x, y, grid, grid);
        }
    }
    textSize(30);
    fill(0, 0, 100);
    noStroke();
    text("Codevember #day04\nSky", 20, 40);
}