let easing = 0.05;

let tgt;

let hw, hh;

let gfx;

​

// let framerate = 30;

// var capturer = new CCapture({ format: 'webm', framerate, name: 'test', quality: 100, });

​

// let vaporwave = [

//     "#ff71ce",

//     "#01cdfe",

//     "#05ffa1",

//     "#b967ff",

//     "#fffb96",

// ];

// let vaporwave = [//monochrome = [

//   "#eeeeee",

//   "#666666",

//   "#333333",

//   "#404040",

//   "#cccccc",

//   "#202020",

// ];

let vaporwave = [//moody_sunset = [

    "#003f5c", "#58508d", "#bc5090", "#ff6361", "#ffa600"];

// let vaporwave = [//heppy = [

//     "#f5fe31", "#ff2ae1", "#b3fe3e", "#ed4e04", "#95fef8"];

​

let cidx = 0;

let loopContinue = false;

​

function getPixelID(x, y, g) {

    const density = g.pixelDensity();

    return 4 * density * (int(y) * density * width + int(x));

}

​

function setup() {

    createCanvas(2000, 2000);

    // createCanvas(2000,2000);

    // createCanvas(windowWidth, windowHeight);

    pixelDensity(1);

    background(20);

​

    gfx = createGraphics(width, height);

    gfx.pixelDensity(1);

    // gfx.background(20);

​

    hw = width / 2;

    hh = height / 2;

​

    // particles = [];

    // for (let i = 0; i < 1000; i++) {

    //     particles.push({

    //         x: 0,

    //         y: height / 2,

    //         a: map(i, 0, 1000, 1, width-1),

    //     })

    // }

​

    /*

    loadPixels();

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

        let num = random(0.1, 0.5) * width;

        for (let _x = 0; _x < num; _x++) {

            let x = random(width - 1);

            let idx = getPixelID(x,y);

            pixels[idx] = 220;

            pixels[idx+1] = 220;

            pixels[idx+2] = 220;

            pixels[idx+3] = int(random(20,220));

        }

    }

    updatePixels();

    */

​

    // let dx = targetx - x;

    // x += dx * easing;

    particles = [];

    let locs = [

        { x: 0, y: 0 },

        { x: width - 1, y: 0 },

        { x: width - 1, y: height - 1 },

        { x: 0, y: height - 1 }

    ]

​

    let b = int(width * 0.1);

    // for (let _ = 0; _ < 2; _++) {

    for (let y = b; y < height - b; y++) {

        for (let x = b; x < width - b; x++) {

            if (x == b || y == b || x == width - b - 1 || y == height - b - 1) {

                particles.push({

                    // x: x, y: y,

                    x: hw + random(-20, 20), y: hh + random(-20, 20),//loc.x, y: loc.y,

                    easing: random(0.001, 0.5),

                    c: color(80,80,80,1),//color(220, 220, 220, 1),

                })

            }

        }

    }

    // }

​

​

​

    // for (let _ = 0; _ < 5000; _++) {

    //     particles.push({

    //         x: random(width), y: random(height),

    //         // x: hw + random(-20, 20), y: hh + random(-20, 20),//loc.x, y: loc.y,

    //         easing: random(0.001, 0.5),

    //         c: color(220, 220, 220, 1),

    //     })

​

    // }

    // for (let _ = 0; _ < 1000; _++) {

    //     let loc = random(locs);

    //     particles.push({

    //         x: loc.x, y: loc.y,

    //         // x: hw + random(-20, 20), y: hh + random(-20, 20),//loc.x, y: loc.y,

    //         easing: random(0.001, 0.5),

    //         c: color(220, 220, 220, 1),

    //     })

    // }

​

    // for (let x = 0; x < width; x++) {

    //     particles.push({

    //         x: x, y: -1,

    //         // x: hw + random(-20, 20), y: hh + random(-20, 20),//loc.x, y: loc.y,

    //         easing: random(0.001, 0.5),

    //         c: color(220, 220, 220, 1),

    //     })

    //     particles.push({

    //         x: x, y: height,

    //         // x: hw + random(-20, 20), y: hh + random(-20, 20),//loc.x, y: loc.y,

    //         easing: random(0.001, 0.5),

    //         c: color(220, 220, 220, 1),

    //     })

    // }

    // for (let y = 0; y < height; y++) {

    //     particles.push({

    //         x: -1, y: y,

    //         // x: hw + random(-20, 20), y: hh + random(-20, 20),//loc.x, y: loc.y,

    //         easing: random(0.001, 0.5),

    //         c: color(220, 220, 220, 1),

    //     })

    //     particles.push({

    //         x: width, y: y,

    //         // x: hw + random(-20, 20), y: hh + random(-20, 20),//loc.x, y: loc.y,

    //         easing: random(0.001, 0.5),

    //         c: color(220, 220, 220, 1),

    //     })

    // }

​

    tgt = {

        r: width * 0.1,

        t: 0,

        s: PI / 64,

        c: color(255, 0, 255, 250),

        d: true,

        x: hw,

        y: hh,

        rd: true,

    };

​

}

​

function draw() {

    gfx.loadPixels();

​

    let n = noise(frameCount * 0.002);

    let a = map(n, 0.0, 1.0, -1, 1);

​

    // scroller pos

    let cx = int((tgt.x + a * tgt.r * cos(tgt.t)))// * log(tgt.r));

    let cy = int((tgt.y + a * tgt.r * sin(tgt.t)))// * log(tgt.r));

​

    if (random() > 0.85) {

        if (tgt.d) {

            tgt.r += 0.25;

            if (tgt.r > (width / 2) - 1) tgt.d = !tgt.d;

        } else {

            tgt.r -= 0.25;

            if (tgt.r < 1) tgt.d = !tgt.d;

        }

    }

​

    for (let i = particles.length - 1; i >= 0; i--) {

        let p = particles[i];

        let pidx = getPixelID(int(p.x), int(p.y), gfx);

​

        let _c = lerpColor(p.c, color(vaporwave[cidx]), map(frameCount % 250, 0, 250, 0.0, 1.0));

​

​

        gfx.pixels[pidx] = red(_c);//p.c);

        gfx.pixels[pidx + 1] = green(_c);//p.c);

        gfx.pixels[pidx + 2] = blue(_c);//p.c);

        gfx.pixels[pidx + 3] = 255;//alpha(p.c);

​

        let dx = cx - p.x;

        p.x += dx * p.easing;

        let dy = cy - p.y;

        p.y += dy * p.easing;

​

        if (abs(dx) < 2 && abs(dy) < 2) {

            tgt.x = random(width * 0.1, width - width * 0.1);

            tgt.y = random(width * 0.1, height - width * 0.1);

            tgt.rd = !tgt.rd;

            // cidx++;

            // if (cidx > vaporwave.length - 1) cidx = 0;

            //particles.splice(i,1);

        }

​

        // let dx = targetx - x;

        // x += dx * easing;

    }

    // if (random() > 0.98) {

    if (random() > 0.98) {

        tgt.r = random(width * 0.1, width * 0.3);

    }

    if ((frameCount % 250) == 0) {

        // tgt.x = random(width - 1);

        // tgt.y = random(width - 1);

        tgt.x = random(width * 0.1, width - width * 0.1);

        tgt.y = random(width * 0.1, height - width * 0.1);

        tgt.rd = !tgt.rd;

        cidx++;

        if (cidx > vaporwave.length - 1) cidx = 0;

    }

​

​

    let idx = getPixelID(cx, cy, gfx);

    gfx.pixels[idx] = red(tgt.c);

    gfx.pixels[idx + 1] = green(tgt.c);

    gfx.pixels[idx + 2] = blue(tgt.c);

    gfx.pixels[idx + 3] = alpha(tgt.c);

​

    if (tgt.rd)

        tgt.t += tgt.s;

    else

        tgt.t -= tgt.s;

    gfx.updatePixels();

​

    image(gfx, 0, 0);

​

​

    /*

    for (let i = particles.length-1; i >= 0; i--) {

        let p = particles[i];

        point(p.x, p.y);

        // p.y = log(p.x);

        p.y = p.y + p.a * tan(p.x);

        p.x++;

​

        if (p.x < 0 || p.x > width - 1 || p.y < 0 || p > height - 1) {

            particles.splice(i,1);

        }

    }

​

    if (particles.length == 0) {

        console.log("done");

        noLoop();

    }

    */

​

    if (frameCount > (250 * vaporwave.length) && !loopContinue) {

        console.log("done");

        noLoop();

        // save("circle.png");

    }

}

​

function keyPressed() {

    if (key == " ") loopContinue = false;//saveGif("circle.gif", 10);

    if (key == "c") {

        if (!loopContinue) {

            loopContinue = true;

            loop();

        }

    }

}

​

// function windowResized() {

//     redraw(windowWidth, windowHeight);

//     hw = width / 2;

//     hh = height / 2;

// }