// amount of particles per row

var pPerRow = 80;

var cIndex = 0;

var noiseScale = 300;

let img;

let rows, cols;

let alphaMatrix = [];

let canvas;

let colors, colorPalettle;

​

let zoff = 0;

​

function preload() {

    img = loadImage('2.png');

}

​

function windowResized() {

    resizeCanvas(windowWidth, windowHeight);

    resetEnvironment();

}

​

function resetEnvironment() {

    particles = [];

    seedParticles();

    background(0);

}

​

function setup() {

    colors = [

        //green-blueish

        [color(0, 160, 250),

        color(0, 150, 250),

        color(60, 250, 255),

        color(20, 150, 255),

        // color(255, 150, 0),

        // color(200, 190, 0),

        color(250, 190, 0)],

​

        //red-yellow

        [color(0, 48, 73),

        color(214, 40, 40),

        color(247, 127, 0),

        color(45, 106, 79),

        // color(234, 226, 183),

        // color(82, 183, 136),

        color(177, 116, 15)],

​

        //purple-blue

        [color(0, 255, 255),

        color(0, 191, 255),

        color(0, 64, 255),

        // color(64, 0, 255),

        // color(128, 0, 255),

        color(255, 0, 255),

        // color(255, 255, 0),

        color(255, 255, 0)]

    ];

​

    colorPalettle = Math.floor(random(3));

​

    createCanvas(windowWidth, windowHeight);

​

    background(0);

    imgAlphaChannel(img);

​

    seedParticles();

}

​

function draw() {

    // blendMode(OVERLAY);

    particles.forEach(function (particle) {

        particle.move();

        particle.render();

    });

​

}

​

function imgAlphaChannel(img) {

​

    img.loadPixels();

    cols = img.width, rows = img.height;

​

    for (var i = 0; i < cols; i++) {

        alphaMatrix[i] = [];

        for (var j = 0; j < rows; j++) {

            var loc = ((cols - i - 1) + j * cols) * 4;

​

            var a = img.pixels[loc + 3];

            if (a == 255) {

                alphaMatrix[i][j] = 1;

            } else {

                alphaMatrix[i][j] = 0;

            }

        }

    }

}

​

function seedParticles() {

    var wInterval = Math.floor(img.width / pPerRow);

    var hInterval = Math.floor(img.height / pPerRow);

    var paddingW = Math.floor(img.width / 10);

    var paddingH = Math.floor(img.height / 10);

​

    for (var i = paddingW; i <= img.width - paddingW; i += wInterval) {

        for (var j = paddingH; j <= img.height - paddingH; j += hInterval) {

​

            var c = Math.round(cIndex % colors[colorPalettle].length);

​

            cIndex++;

            var particle = new Particle(

                i + randomGaussian(-50, 50),

                j + randomGaussian(-50, 50),

                c

            );

            particles.push(particle);

        }

    }

}

​

function Particle(x, y, colorIndex) {

    this.position = createVector(Math.floor(x), Math.floor(y));

    this.prevPos = this.position.copy();

    this.color = colorIndex;

    this.c = colors[colorPalettle][this.color];

    // this.a = 30;

​

    this.move = function () {

        var angleNoise = noise(this.position.x / noiseScale, this.position.y / noiseScale) * TWO_PI * 4;

        var density = 1.5;

​

        this.position.x += cos(cos(angleNoise) * (1.5 + noise(frameCount))) * density;

        this.position.y += sin(sin(angleNoise) * (1.5 + noise(frameCount))) * density;

    }

​

    this.render = function () {

​

        if (this.position.x > 0 && this.position.x < img.width && this.position.y > 0 && this.position.y < img.height) {

            let xoff = img.width - 1 - Math.floor(this.position.x);

            let yoff = Math.floor(this.position.y);

            let a = alphaMatrix[xoff][yoff];

​

            if (a == 1) {

                this.c = colors[colorPalettle][this.color];

                noStroke();

                push();

                this.c.setAlpha(150);

                stroke(this.c);

                strokeWeight(1.5);

                translate((windowWidth - img.width) / 2, (windowHeight - img.height) / 2);

                line(this.prevPos.x, this.prevPos.y, this.position.x, this.position.y);

                // circle(this.position.x, this.position.y, 2);

                pop();

            }

            else {

                noStroke();

                this.alpha = map(pow(this.position.x - img.width / 2, 2) + pow(this.position.y - img.height / 2, 2),

                    0, pow(img.width / 2, 2) + pow(img.height / 2, 2), 20, 0);

​

                push();

                this.c.setAlpha(this.alpha);

                stroke(this.c);

                strokeWeight(1.5);

                translate((windowWidth - img.width) / 2, (windowHeight - img.height) / 2);

                line(this.prevPos.x, this.prevPos.y, this.position.x, this.position.y);

                // circle(this.position.x,

                //     this.position.y, 2);

                pop();

​

            }

        } else {

            noStroke();

            this.alpha = map(pow(this.position.x - img.width / 2, 2) + pow(this.position.y - img.height / 2, 2),

                0, pow(img.width / 2, 2) + pow(img.height / 2, 2), 20, 0);

            push();

            this.c.setAlpha(this.alpha);

            stroke(this.c);

            strokeWeight(1.5);

            translate((windowWidth - img.width) / 2, (windowHeight - img.height) / 2);

            line(this.prevPos.x, this.prevPos.y, this.position.x, this.position.y);

            // circle(this.position.x,

            //     this.position.y, 2);

            pop();

​

        }

      this.prevPos = this.position.copy();

​

    }

​

​

}