Lines

The Line Project is a simple project demonstrating how to use the MC.draw.line() method. The simulation illustrates the “Earth – Venus” pentagon. In short, an earth year is 13/8ths of that of Venus. If you draw a line between the two bodies (over a number of years), the following pattern emerges.

Code

This Project utilises:

• ConBoxes and GUI for start/restart, set speed and pause
• A novel use of a pair Sprites as “calculators” for the point ends (they are not rendered)
• MC.draw.line() to draw a large series of white, 90% transparent lines.

// MaxCanvas Project
// 07-Lines.JS File (April 2019)
//
// Required to drag MC.js into Intellisense
// thanks to https://visualstudiomagazine.com/blogs/tool-tracker/2018/07/use-javascript-code.aspx (Dec 2018)
/// <reference path="MC.js" />

window.onload = (function() {

// AQUIRE HTML DOM CANVAS REFERENCE
var c=document.getElementById("canvas");

//////////////////////////
// INITIALISE MC Engine //
//////////////////////////
MC.init(c);

// Configure .game
MC.game.physicsUpdates = 1;     // Will Speed up the simulation .. this many lines added per frame
MC.canvas.setSize(600,400)

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

    // GUI Creation
    var GUI = new MC.GUI();
    // Start / Restart ConBox - calls "Start()"
    var Restart = new MC.ConBox({ width: 150,
                                height: 40,
                                text: "Restart",
                                onClick: function () { start(); } 
                             });
    // Pause ConBox - toggles MC.game.paused
    var Pause = new MC.ConBox({ width: 150,
                                height: 40,
                                text: "Pause",
                                onClick: function () {
                                    MC.game.paused = !MC.game.paused;
                                    if (MC.game.paused) { Pause.text = "Unpause" ;}
                                    else {Pause.text = "Pause";}
                                    } 
                             });
    // Speed ConBox - cycles MC.physicsUpdates & calls "Start()"
    var Speed = new MC.ConBox({ width: 150,
                                height: 40,
                                text: "Speed " + MC.game.physicsUpdates,
                                onClick: function () {
                                    var spd = 0;
                                    switch (MC.game.physicsUpdates) {
                                        case 1:
                                            spd = 5;
                                            break;
                                        case 5:
                                            spd = 10;
                                            break;
                                        case 10:
                                            spd = 15;
                                            break;
                                        case 15:
                                            spd = 20;
                                            break;
                                        case 20:
                                            spd = 1;
                                            break;
                                        default:
                                            spd = 5;
                                    }
                                    MC.game.physicsUpdates = spd;
                                    Speed.text = "Speed "+spd;
                                    start();
                                }
                             });
    GUI.push(Restart,Pause,Speed);
    MC.mouse.onClickL = function () {
        GUI.click();
    };    
    
    // Restart function
    var start = function () {
        Lines = [];
        Ends.bin[0].angle = Ends.bin[1].angle = 0;
        };
    
    
    var color = new MC.Color(255,255,255,0.1); 
    var Lines = [];
    var Ends = new MC.SpriteBin();
    
    // Going to utilise the Sprite Class
    // Using update function to emulate a body orbiting the graphic centre, with the angle and angleVel tracking an orbital radius angle
    // Don't have to render them either
    var end1 = new MC.Sprite({type: "circ", angleVel: 360/13 * 100, size2: 120 });
    end1.dev.update = function () {
                                var rad = new MC.Point(0,end1.size2);
                                rad.rotate(end1.angle);
                                rad.add(MC.canvas.midX+100, MC.canvas.midY);
                                end1.moveTo(rad);
                             };
    
    var end2 = end1.clone();
    end2.setValues ({angleVel: 360/8 * 100, size2: 180});
    end2.dev.update = function () {
                                var rad = new MC.Point(0,end2.size2);
                                rad.rotate(end2.angle);
                                rad.add(MC.canvas.midX+100, MC.canvas.midY);
                                end2.moveTo(rad);
                             };
    Ends.push(end1, end2);

//////////////////////////
// END OF declarations  //
//////////////////////////
//-----------------------------------------------------------------------------
//////////////////////////
//      GAME LOOP       //
//////////////////////////

// first call, request subsequently made within
gameLoop();

function gameLoop() {
    // ESSENTIAL MAINTAINANCE
    requestAnimationFrame(gameLoop);
    MC.game.update();                   
    
    // PHYSICS UPDATE LOOP
    for (var i = 0; i < MC.game.physicsUpdates; i++) {
        Ends.update();
        // Populate the Lines array with the position of the 2 Sprites
        if (Lines.length < 5000 && !MC.game.paused) Lines.push(Ends.bin[0].pos.clone(),Ends.bin[1].pos.clone());
    }
    
    // NON-PHYSICS UPDATES
    GUI.update();  

    // RENDER
    // Stage 1.  Clear the canvas
    MC.draw.clearCanvas("Black");

    // Stage 2.  Render Sprites
        // Draw the lines
    for (var i = 0; i < Lines.length; i = i+2) {
        MC.draw.line(Lines[i],Lines[i+1],color,1);
    }
    
    // Stage 3.  Render GUI
    GUI.render(0,0);
}

}); // EoF