CM Freezing Field Simulator

by alexb

HTML

<canvas></canvas>

JavaScript

var freezingField = (function($p) {

    var DURATION = 10;
    var EXPLOSIONS_PER_SECOND = 10;
    var EXPLOSION_RADIUS = 300;
    var MIN_RADIUS = 195;
    var MAX_RADIUS = 785;
    var EXPLOSION_LIMIT = DURATION * EXPLOSIONS_PER_SECOND;
    var SCALE = 0.33;

    var tick = 0;
    var explosions = $p.createJavaArray('float', [EXPLOSION_LIMIT * 2]);

    function setup() {
        var size = $p.parseInt((MAX_RADIUS + EXPLOSION_RADIUS) * 2 * SCALE);
        $p.size(size, size);
        $p.frameRate(EXPLOSIONS_PER_SECOND);
    }
    $p.setup = setup;
    setup = setup.bind($p);

    function draw() {
        $p.background(51, 51, 51);
        $p.translate($p.width / 2, $p.height / 2);
        $p.scale(SCALE);

        if (tick < EXPLOSION_LIMIT) {
            var quadrant = (tick + 2) % 4;
            var angle = quadrant * $p.HALF_PI + $p.random($p.HALF_PI);
            var radius = $p.random(MIN_RADIUS, MAX_RADIUS);

            explosions[tick * 2] = angle;
            explosions[tick * 2 + 1] = radius;

            tick++;
        }

        $p.noFill();
        $p.stroke(255, 255, 255);
        $p.strokeWeight(1);
        $p.ellipse(0, 0, MIN_RADIUS * 2, MIN_RADIUS * 2);
        $p.ellipse(0, 0, MAX_RADIUS * 2, MAX_RADIUS * 2);

        for (var i = 0; i < tick; i++) {
            var angle = explosions[i * 2];
            var radius = explosions[i * 2 + 1];
            var x = $p.cos(angle) * radius;
            var y = $p.sin(angle) * radius;

            $p.fill(255, 102);
            $p.noStroke();
            $p.ellipse(x, y, EXPLOSION_RADIUS, EXPLOSION_RADIUS);
        }
    }
    $p.draw = draw;
    draw = draw.bind($p);
});

var canvas = document.querySelector("canvas");
var processingInstance = new Processing(canvas, freezingField);