Color Twiddle

Color Twiddle is a simple little program which demonstrates a few fundamental MC Engine functions. Namely:

• How to Initialise the MC Engine with a canvas
• The MC.Color object
• Creation of a “Game Controller” type object
• Use of an Object Factory, to create and return …
• … MC.Sprite Objects, with customised behaviour
• Handled by a MC.SpriteBin object
• Responding to user mouse input
• Use of the Gameloop() method to update and then render items

Code

// MC Library
// Color Twiddle
// Jan 2019
// Purely an Alpha


window.onload = (function() {

// AQUIRE HTML DOM CANVAS REFERENCE
//     HTML has to have a HTML5 canvas element tagged as "canvas"
var c=document.getElementById("canvas");

//////////////////////////
// INITIALISE MC Engine //
//////////////////////////
// CHOOSE 1 // 

// CHOICE 1: Canvas Size fixed by HTML
MC.init(c);

// CHOICE 2: Full Window Option (Canvas will be resized to fit window)
//MC.init(c,"fullWindow");

///////////////////////////
// END OF Initialisation //
///////////////////////////
//-----------------------------------------------------------------------------
//////////////////////////
// VARIABLE DECLARATION //
//////////////////////////

// screenset up .. 900x700 canvas
MC.canvas.setSize(900,700);

    var CF = {
        master: new MC.utils.randomColor(),
        edge: new MC.utils.randomColor(),
        boxes: new MC.SpriteBin(),
        dr: MC.maths.randBetween(-10,10),
        dg: MC.maths.randBetween(-10,10),
        db: MC.maths.randBetween(-10,10),
        timer: 0,
        update: function() {          
            if (this.timer == 0) {
                var r = this.master.r + this.dr;
                var g = this.master.g + this.dg;
                var b = this.master.b + this.db;
                if (r <= 0 || r >= 255) {
                    this.dr *= -1;
                    r += this.dr;
                }
                if (g < 0 || g >= 255) {
                    this.dg *= -1;
                    g += this.dg;
                }
                if (b < 0 || b >= 255) {
                    this.db *= -1;
                    b += this.db;
                }
                this.master.set(r,g,b,1);
                this.timer = 1;
            }
            else {
                this.timer = MC.maths.maxOf(0,this.timer - MC.game.deltaTime);
            }

        }
    };

    
    
    function getBox(x, y) {
        var ret = new MC.Sprite({
            type: "rect",
            size1: 30,
            size2: 30,
            fillColor: CF.master.clone(),
            edgeColor: CF.edge.clone(),
            edgeWidth: 3,
            pos: new MC.Point(x,y)
        });
        ret.dev.timer = 0;
        ret.dev.maxTimer = 2;
        ret.dev.oldColor = new MC.Color();
        ret.dev.update = function () {
            if (ret.dev.timer > 0) {
                ret.dev.timer = MC.maths.maxOf(ret.dev.timer - MC.game.deltaTime, 0);
                if (ret.dev.timer == 0) {
                    ret.dev.stopTimer();
                    ret.scale = 1;
                }
            }
            if (ret.dev.timer == 0 && ret.hit(MC.game.mouse)) {
                ret.fillColor.invert();
                //ret.fillColor.set(255,0,0,1);
                ret.dev.startTimer();
            }
            if (ret.dev.timer == 0) {
                ret.fillColor.set(CF.master);
            }
            else {
                var ratio = (ret.dev.maxTimer - ret.dev.timer)/ ret.dev.maxTimer;
                ret.fillColor = MC.utils.mix(ret.dev.oldColor,CF.master, ratio);
                ret.scale = 1 + (1-ratio)*2;
            } 
            
        };
        ret.dev.startTimer = function () {
            ret.angleVel = 90 / ret.dev.maxTimer;
            ret.dev.oldColor = ret.fillColor.clone();
            ret.dev.timer = ret.dev.maxTimer;
        };
        ret.dev.stopTimer = function () {
            ret.angle = 0;
            ret.angleVel = 0;
        };

        return ret;
    }

    for (var x = 0; x < 900 / 35; x++) {
        for (var y = 0; y < 700 / 35; y++) {
            CF.boxes.push(getBox((x * 35) + 20, (y * 35) + 20));
        }
    }

//////////////////////////
// END OF declarations  //
//////////////////////////
//-----------------------------------------------------------------------------
//////////////////////////
//      GAME LOOP       //
//////////////////////////
// first call, request subsequently made within
gameLoop(); 

    function gameLoop() {

        requestAnimationFrame(gameLoop);
        // Essential to update MC.game to ensure MC.game.deltaTime is available
        MC.game.update();

        // physicsUpdate Loop
        for (var z = 0; z < MC.game.physicsUpdates; z++) {

        }
        CF.boxes.update();
        CF.update();

        // Add Render / Draw Code here
        MC.draw.clearCanvas("Black");   // All canvas to "Olive"
        CF.boxes.render();
        //console.log(CF.boxes);

    }

}); // EoF