Bubbles

var bubbles = [];

var total = 1000;

var r = 10;

​

function setup() {

    createCanvas(windowWidth, windowHeight);

    colorMode(HSB, 255);

    noStroke();

}

​

function draw() {

    background(0);

​

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

        var c = newBubble();

        if (c) {

            bubbles.push(c);

        }

    }

​

    for (var i of bubbles) {

        if (i.growing) {

            i.growing = !i.edges() && !i.touch()

        }

        i.show();

        i.grow();

    }

​

    if (bubbles.length > total) {

        bubbles = [];

    }

}

​

function newBubble() {

    var x = random(width);

    var y = random(height);

    var valid = true;

​

    for (var i of bubbles) {

        var d = dist(x, y, i.x, i.y);

        if (d < i.r / 2 + r / 2) {

            valid = false;

            break;

        }

    }

​

    if (valid) {

        return new Bubble(x, y);

    } else {

        return null;

    }

}

​

function Bubble(x, y) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.h = random(255);

    this.growing = true;

​

    this.grow = function() {

        if (this.growing) {

            this.r++;

        }

    }

​

    this.show = function() {

        fill(this.h, 255, 255);

        ellipse(this.x, this.y, this.r, this.r);

    }

​

    this.edges = function() {

        var left = this.x - this.r / 2;

        var right = this.x + this.r / 2;

        var up = this.y - this.r / 2;

        var down = this.y + this.r / 2;

        return (left < 1 || right > width - 1 || up < 1 || down > height - 1);

    }

​

    this.touch = function() {

        var t = false;

        for (var i of bubbles) {

            var d = dist(this.x, this.y, i.x, i.y);

            if (this != i && d < this.r / 2 + i.r / 2 + 1) {

                t = true;

                break;

            }

        }

        return t;

    }

}