Game Engine Post

CompareDefinitions.js

// Old
// Define a data object for each circle
var nodes = d3.range(size).map(function() {
    return {
        radius: 8 + Math.floor(Math.random() * 10),
        x: Math.random() * w * .8 + w * .1,
        y: Math.random() * h * .8 + h * .1,
        v: speed,
        r: Math.random() * 2 * Math.PI
    };
});

// New
var nodes = d3.range(params.ballNum).map(function() {
    // Initialize variables
    var r;
    var rad;
    var o = Math.random();
    // If an initial radius was given use it, otherwise assign a random starting radius
    if (params.r) {
        r = params.r(o);
        rad = params.r;
    } else {
        r = params.avgSize + Math.floor(2 * params.sizeVar * Math.random()) - params.sizeVar;
        rad = r;
    }
    // Assign internal data for each circle, some of which might be functions to be evaluated in the engine
    return {
        // Radius size (may be a function)
        radius: rad,
        // Starting positions
        x: Math.random() * (gameW - 2 * r) + r,
        y: Math.random() * (gameH - 2 * r) + r,
        // Momentum (may be a function)
        m: params.momentum,
        // Starting angle (evaluate if it is a function)
        r: params.angle ? ($.isFunction(params.angle) ? params.angle(o) : params.angle) : Math.random() * 2 * Math.PI,
        // Random angle interval time
        int: (params.randAngleInt ? params.randAngleInt : 0),
        // Random angle interval counter
        lastChange: (params.randAngleInt ? new Date().getTime() : 0),
        // Random double
        o: o,
        // Physics
        physics: params.physics
    };
});

CompareEngine.js

// Old
// Define a redraw function which will be executed every 10 ms
function redraw() {
    nodes.forEach(function(d) {
        // Check if the circle is hitting the top or bottom border
        if (d.y >= h - d.r - buffer || d.y <= d.r + buffer) {
            // Reflect the trajectory angle accordingly
            d.r = 2 * Math.PI - d.r;
        }
        // Check if the circle is hitting the left or right border
        if (d.x >= w - d.r - buffer || d.x <= d.r + buffer) {
            // Reflect the trajectory angle accordingly
            d.r = (Math.PI - d.r) % (2 * Math.PI);
        }
        // Update the x and y positions based on the static velocity
        d.x += d.v * Math.cos(d.r);
        d.y += d.v * Math.sin(d.r);
    });
    // Update the position of each SVG circle
    circles.attr("transform", function(d) { return 'translate(' + d.x + ', ' + d.y + ')'; });
}

// New
// Define a redraw function which will be executed every 10 ms
function redraw() {
    nodes.forEach(function(d) {
        // Evaluate current radius
        var r = ($.isFunction(d.radius) ? d.radius(d.o) : d.radius);
        // Evaluate current momentum
        var m = ($.isFunction(d.m) ? d.m(d.o) : d.m);
        // Evaluate physics
        var physics = d.physics ? d.physics : defaultPhysics;
        // Check if the circle is hitting the top or bottom border
        if (d.y >= gameH - physics.dy(d, r) || d.y <= physics.dy(d, r)) {
            // Adjust the current position and angle based on the current physics
            d.y = physics.y(d, gameW, gameH);
            d.r = physics.ry(d, gameW, gameH);
        }
        // Check if the circle is hitting the left or right border
        if (d.x >= gameW - physics.dx(d, r) || d.x <= physics.dx(d, r)) {
            // Adjust the current position and angle based on the current physics
            d.x = physics.x(d, gameW, gameH);
            d.r = physics.rx(d, gameW, gameH);
        }
        // Update the x and y positions based on the current physics
        d.x += physics.xx(d, m, r);
        d.y += physics.yy(d, m, r);
        // Check if it is time to randomly change the trajectory angle
        if (d.int && new Date().getTime() > d.lastChange + d.int) {
            d.r = 2 * Math.random() * Math.PI;
            d.lastChange = new Date().getTime();
        }
    });
    // Update the position and size of each SVG circle
    circles.attr("r", function(d) { return ($.isFunction(d.radius) ? d.radius(d.o) : d.radius); });
    circles.attr("transform", function(d) { return 'translate(' + d.x + ', ' + d.y + ')'; });
}

Engine.js

var nodes = d3.range(params.ballNum).map(function() {
    // Initialize variables
    var r;
    var rad;
    var o = Math.random();
    // If an initial radius was given use it, otherwise assign a random starting radius
    if (params.r) {
        r = params.r(o);
        rad = params.r;
    } else {
        r = params.avgSize + Math.floor(2 * params.sizeVar * Math.random()) - params.sizeVar;
        rad = r;
    }
    // Assign internal data for each circle, some of which might be functions to be evaluated in the engine
    return {
        // Radius size (may be a function)
        radius: rad,
        // Starting positions
        x: Math.random() * (gameW - 2 * r) + r,
        y: Math.random() * (gameH - 2 * r) + r,
        // Momentum (may be a function)
        m: params.momentum,
        // Starting angle (evaluate if it is a function)
        r: params.angle ? ($.isFunction(params.angle) ? params.angle(o) : params.angle) : Math.random() * 2 * Math.PI,
        // Random angle interval time
        int: (params.randAngleInt ? params.randAngleInt : 0),
        // Random angle interval counter
        lastChange: (params.randAngleInt ? new Date().getTime() : 0),
        // Random double
        o: o,
        // Physics
        physics: params.physics
    };
});

// Define a redraw function which will be executed every 10 ms
function redraw() {
    nodes.forEach(function(d) {
        // Evaluate current radius
        var r = ($.isFunction(d.radius) ? d.radius(d.o) : d.radius);
        // Evaluate current momentum
        var m = ($.isFunction(d.m) ? d.m(d.o) : d.m);
        // Evaluate physics
        var physics = d.physics ? d.physics : defaultPhysics;
        // Check if the circle is hitting the top or bottom border
        if (d.y >= gameH - physics.dy(d, r) || d.y <= physics.dy(d, r)) {
            // Adjust the current position and angle based on the current physics
            d.y = physics.y(d, gameW, gameH);
            d.r = physics.ry(d, gameW, gameH);
        }
        // Check if the circle is hitting the left or right border
        if (d.x >= gameW - physics.dx(d, r) || d.x <= physics.dx(d, r)) {
            // Adjust the current position and angle based on the current physics
            d.x = physics.x(d, gameW, gameH);
            d.r = physics.rx(d, gameW, gameH);
        }
        // Update the x and y positions based on the current physics
        d.x += physics.xx(d, m, r);
        d.y += physics.yy(d, m, r);
        // Check if it is time to randomly change the trajectory angle
        if (d.int && new Date().getTime() > d.lastChange + d.int) {
            d.r = 2 * Math.random() * Math.PI;
            d.lastChange = new Date().getTime();
        }
    });
    // Update the position and size of each SVG circle
    circles.attr("r", function(d) { return ($.isFunction(d.radius) ? d.radius(d.o) : d.radius); });
    circles.attr("transform", function(d) { return 'translate(' + d.x + ', ' + d.y + ')'; });
}

GroovyExample.groovy

def squaresSum = [1, 2, 3, 4].collect { n -> n * n }.sum(); // 30

HardCoded.js

// Define a data object for each circle
var nodes = d3.range(size).map(function() {
    return {
        radius: 8 + Math.floor(Math.random() * 10),
        x: Math.random() * w * .8 + w * .1,
        y: Math.random() * h * .8 + h * .1,
        v: speed,
        r: Math.random() * 2 * Math.PI
    };
});

// Define a redraw function which will be executed every 10 ms
function redraw() {
    nodes.forEach(function(d) {
        // Check if the circle is hitting the top or bottom border
        if (d.y >= h - d.r - buffer || d.y <= d.r + buffer) {
            // Reflect the trajectory angle accordingly
            d.r = 2 * Math.PI - d.r;
        }
        // Check if the circle is hitting the left or right border
        if (d.x >= w - d.r - buffer || d.x <= d.r + buffer) {
            // Reflect the trajectory angle accordingly
            d.r = (Math.PI - d.r) % (2 * Math.PI);
        }
        // Update the x and y positions based on the static velocity
        d.x += d.v * Math.cos(d.r);
        d.y += d.v * Math.sin(d.r);
    });
    // Update the position of each SVG circle
    circles.attr("transform", function(d) { return 'translate(' + d.x + ', ' + d.y + ')'; });
}

JavaScriptExample.js

var squaresSum = [1, 2, 3, 4].map(
    function(n) {
        return n * n;
    }).reduce(
    function(a, b) {
        return a + b;
    }); // 30

LevelExample1.js

var levels = {
    // Level number as the key
    1: {
        title: 'Easy Peasy',
        avgSize: 15,
        sizeVar: 5,
        momentum: 100,
        ballNum: 10,
        expandSpeed: 1
    }
}

LevelExample2.js

...
    23: {
        title: 'Woah There',
        avgSize: 20,
        sizeVar: 5,
        momentum: 350,
        ballNum: 15,
        expandSpeed: function(d) {
            return 1 + Math.cos(2 * Math.PI * (new Date() / 1000 + d.o));
        }
    }
...

LevelExample3.js

...
    24: {
        title: 'So Close',
        avgSize: 20,
        sizeVar: 5,
        momentum: 200,
        ballNum: 10,
        expandSpeed: function(d) {
            return d.radius > 100 ? .5 : .0075 * (105 - d.radius);
        }
    }
...

LevelExample4.js

ghostPhysics = {
    // Distance from top or bottom when the x border interaction kicks in
    dx: function(d, r) { return 0; },
    // Distance from left or right when the y border interaction kicks in
    dy: function(d, r) { return 0; },
    // New x position when the x border interaction occurs
    x: function(d, w, h) { return (d.x + w) % w; },
    // New y position when the y border interaction occurs
    y: function(d, w, h) { return (d.y + h) % h; },
    // New trajectory angle when the x border interaction occurs
    rx: function(d, w, h) { return d.r; },
    // New trajectory angle when the y border interaction occurs
    ry: function(d, w, h) { return d.r; },
    // Change in x in one iteration
    xx: function(d, m, r) { return m / (r * r) * Math.cos(d.r); },
    // Change in y in one iteration
    yy: function(d, m, r) { return m / (r * r) * Math.sin(d.r); }
}

...
    28: {
        title: 'Inchworm Ghosts',
        avgSize: 15,
        sizeVar: 5,
        momentum: function(o) {
            return 150 + 200 * Math.cos(2 * Math.PI * (new Date() / 1000 + o));
        },
        ballNum: 20,
        angle: 3 *  Math.PI / 2,
        expandSpeed: 1,
        physics: ghostPhysics
    }
...