#Codevember day02 : Time

時計ぽいプログラムを書こうかなと思って絵文字などを配列に突っ込んでいたらどうも行き詰まったので，以前書いたヴィンテージのコンピュータグラフィックスをp5.jsにポーティングした．意外と楽だったけど質感が面白くできないかとおもって，線の透明度を変えながら繰り返し描画することで発光表現ぽいものをやってみた．

//porting https://archive.org/details/experimentsinmotiongraphics#

let r = 200;
let t = 0;
let font;

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

function setup() {
    createCanvas(windowWidth, windowHeight);
    colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
    background((90 + frameCount) % 360, 80, 35);

    textSize(30);
    fill(0, 0, 100);
    noStroke(); 
    text("Codevember #day02\nTime", 20, 40);

    translate(width / 2, height / 2);
    for (let i = 0; i < 8; i += .5) {
        //発光表現（透明度と線の太さを変えながら同じ位置に線を描画）
        for (let j = 0; j < 10; j++) {
            let transparent = map(j, 0, 10, 0, 30);
            let thickness = map(j, 0, 10, 30, 3);
            strokeWeight(thickness);
            stroke((frameCount + i * 3) % 360, 50, 100, transparent);
            line(x1(t + i), y1(t - i), x2(t + i), y2(t - i));
        }
        strokeWeight(3);
        stroke((frameCount + i * 3) % 360, 50, 100, 100);
        line(x1(t + i), y1(t - i), x2(t + i), y2(t - i));
    }
    let m = map(mouseX, 0, width, 0.03, 0.1);
    t += m;
}

function x1(t) {
    return sin(t / 7) * r * sin(t / 5) * 2.55;
}

function y1(t) {
    return cos(t / 3) * r * cos(t / 7) * 2.2;
}

function x2(t) {
    return sin(t / 11) * r * sin(t / 7) * 2.55;
}

function y2(t) {
    return cos(t / 5) * r * cos(t / 11) * 2.2;
}