dot-shrink.js

var colors = [0x96cb79, 0x94ca7b, 0x92ca7d, 0x90c97e, 0x8ec980, 0x8cc882, 0x8ac884, 0x88c785, 0x86c787, 0x84c689, 0x82c58a, 0x80c58c, 0x7ec48e, 0x7bc48f, 0x79c391, 0x76c393, 0x74c294, 0x71c296, 0x6fc198, 0x6cc099, 0x69c09b, 0x66bf9d, 0x63bf9e, 0x60bea0, 0x5dbea2, 0x5abda3, 0x56bda5, 0x53bca6, 0x4fbca8, 0x4abbaa, 0x46bbab, 0x41baad, 0x3cbaae, 0x36b9b0, 0x43baad, 0x4ebbaa, 0x57bda7, 0x5fbea4, 0x67bfa1, 0x6ec09e, 0x74c19b, 0x7ac398, 0x80c495, 0x86c592, 0x8bc68f, 0x90c78c, 0x95c989, 0x9aca86, 0x9fcb83, 0xa3cc7f, 0xa8cd7c, 0xaccf79, 0xb0d075, 0xb4d172, 0xb8d26e, 0xbcd36b, 0xc0d567, 0xc4d663, 0xc8d75f, 0xccd85b, 0xd0da57, 0xd3db53, 0xd7dc4f, 0xdadd4a, 0xdedf45, 0xe2e040, 0xe5e13a, 0xe5de3a, 0xe4db3a, 0xe4d83a, 0xe3d53a, 0xe3d23a, 0xe2cf3a, 0xe2cd3a, 0xe2ca39, 0xe1c739, 0xe0c439, 0xe0c139, 0xdfbe39, 0xdfbb39, 0xdeb839, 0xdeb539, 0xddb238, 0xddaf38, 0xdcac38, 0xdbaa38, 0xdba738, 0xdaa438, 0xd9a137, 0xd99e37, 0xd89b37, 0xd79837, 0xd69537, 0xd69236, 0xd58f36, 0xd48c36, 0xd38936, 0xd38635, 0xd28335, 0xd18035];

const MODE = 1;

function Dot(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    var initialR = r;
    var util = new Util();
    this.t = 0;

    this.a = util.noise(this.x * 0.001, this.y * 0.001);
    this.c = colors[Math.floor(util.map(this.a, 0, 1, 0, 100))];

    this.render = function(graphics) {
        graphics.beginFill(this.c, 1);
        graphics.drawCircle(this.x, this.y, this.r);
        graphics.endFill();
    };

    this.update = function(mouseX, mouseY) {
        this.t += 0.008;
        this.a = util.noise(this.x * 0.001, this.y * 0.001, this.t);
        this.c = colors[Math.floor(util.map(this.a, 0, 1, 0, 100))];
        var dist;
        switch (MODE) {
            case 1:
                if (mouseX > 0 && mouseY > 0) {
                    dist = util.dist(mouseX, mouseY, this.x, this.y);
                    if (dist < 75) {
                        this.r = this.r > 2 ? this.r - 2 : this.r;
                    }
                }
                if (this.r < 50 / 2) {
                    this.r += 0.025;
                }
                break;

            case 2:
                if (mouseX > 0 && mouseY > 0) {
                    dist = util.dist(mouseX, mouseY, this.x, this.y);
                    if (dist < 150) {
                        this.r = this.r < 50 ? this.r + 2 : this.r;
                    }
                }
                if (this.r > 50 / 2) {
                    this.r -= 0.01;
                }
                break;
        }

    };
}

function Attract() {
    const WIDTH = window.innerWidth;
    const HEIGHT = window.innerHeight;
    const GRID_WIDTH = 50;
    const GRID_HEIGHT = 50;

    var mouseX, mouseY;
    var util = new Util();

    var renderer = PIXI.autoDetectRenderer(WIDTH, HEIGHT, {
        antialias: true,
        transparent: true
    }, false);

    renderer.backgroundColor = 0x00FFFFFF;

    var stage = new PIXI.Container();
    var graphics = new PIXI.Graphics();
    stage.addChild(graphics);
    graphics.interactive = true;
    document.body.appendChild(renderer.view);
    var dots = [];

    graphics.on('touchmove', function(evt) {
        mouseX = evt.data.global.x;
        mouseY = evt.data.global.y;
    });

    graphics.on('touchstart', function(evt) {
        mouseX = evt.data.global.x;
        mouseY = evt.data.global.y;
    });

    graphics.on('touchend', function(evt) {
        mouseX = null;
        mouseY = null;
    });

    for (var ix = 0; ix < WIDTH; ix += GRID_WIDTH) {
        for (var iy = 0; iy < HEIGHT; iy += GRID_HEIGHT) {
            dots.push(new Dot(ix, iy, GRID_WIDTH / 2));
        }
    }

    requestAnimationFrame(animate);

    function animate() {
        graphics.clear();
        graphics.beginFill(0xFFFFFF, 0);
        graphics.drawRect(0, 0, WIDTH, HEIGHT);
        for (var i = 0; i < dots.length; i++) {
            dots[i].update(mouseX, mouseY);
            dots[i].render(graphics);
        }
        renderer.render(stage);
        requestAnimationFrame(animate);
    }
}

var attract = new Attract();