Orbital Simulation

Alright, let's program up some gravity!

First we'll make two objects.  The first object ({}) is velocity which will have its own x and y variables that will be applied to the particle object's x and y variables.

Since we are creating an array of this object that will have random numbers, we loop through each item and assign it a base value.  Then loop again to assign it the random values to place particles all over the screen.

Now that we're set up, we start the timer function and apply force to each particle by calculating the force, multiplying it by the velocity, and adding it to the particle coordinate.

Our center of gravity is stationary so we didn't have to really set anything up for that but setting its coordinates as a variable means that we're doing six less calculations every time the screen refreshes.  This is a very memory intensive calculation and easily gets out of control when you increase the particleIndex so anything you can do to increase efficiency is helpful in making sure the animation is smooth and ensuring that it can be rendered with older hardware.

function drawShapes() {

var particleIndex = 1, particle = {}, velocity = {}, gravityx = w / 2, gravityy = h / 2; for (z = 0; z < particleIndex; z++) { particle[z] = { x: Math.floor(Math.random() * w), y: Math.floor(Math.random() * h), color: randomColor() }; velocity[z] = { x: Math.floor((Math.random() * 5) - 5), y: Math.floor((Math.random() * 5) - 5) }; }

setInterval(function() {


clearScreen();

for (z = 0; z < particleIndex; z++) {

var distance = Math.pow((particle[z].x - gravityx), 2) + Math.pow((particle[z].y - gravityy), 2),
f = (1 / Math.sqrt(distance));

velocity[z].x += (particle[z].x - gravityx) * f;
velocity[z].y += (particle[z].y - gravityy) * f;

particle[z].x -= velocity[z].x;
particle[z].y -= velocity[z].y;

drawCircle(gravityx, gravityy, 60, "black");
drawCircle(particle[z].x, particle[z].y, 10, particle[z].color);
}

}, 50);

}

Repeated patterns

This section will cover turning our window into a set of blocks with their own X and Y coordinates, then drawing with another set of coordinates within each block.

The new coordX and coordY will replace the x/y we're used to.

The block that we draw within will be given it's x/y coordinates with cvX and cvY.

C_C is the constant spacing we use - the height and width of each block.

What our DO loop is doing is -

• drawing a filled circle in each block
• moving to the next block to the right until we hit the width of the canvas
• moving to the next row and back to the left

The checks for a block being at the end of it's line adds the constant spacing so we don't have circles half on the screen and half off the screen.

function drawShapes() {

    var coordX = 1,
        coordY = 1;

    var cvX = 1,
        cvY = 1;
    var C_C = 25,
        R = 12.5;

    do {
        coordX = C_C * cvX;
        coordY = C_C * cvY;

        drawCircle(coordX, coordY, R);

        cvX++;

        if (coordX >= w - C_C) {
            cvX = 1;
            cvY++;
        }
    }

    while (C_C * cvY + C_C < h);
}

Intro to Template

This blog will cover designs using the JavaScript canvas - useful for web coding.

I have a template set up in an interactive environment over at FiddleSalad, the link is http://fiddlesalad.com/javascript/html-canvas-template/

A couple quick details about the template -

• The method main() is our entry into the program to keep the code clean and well-formed.
• I've added a couple of useful methods that you'll find useful such as createBorder() and randomColor() which do what the name implies.  Note that when you use drawCircle() you'll have to include the (x,y,r) dimensions.
• setInterval() is a time-based method that we'll touch on in later posts.  For now, select entire drawShapes() method and replace with the code given.

For anything else, refer to a beginner Javascript tutorial.  I recommend TheNewBoston.org (->"Tutorials" tab->JavaScript)

Here's a picture of the layout I use, there's a lot of windows that just clutter the screen - just give half of the screen to the "JavaScript" window and the other half to the "Result" window.

var c, w, h;

main();

function main() {

    c = document.getElementById('canvas').getContext('2d');
    h = canvas.height;
    w = canvas.width;

    createBorder();
    drawShapes();
}

function drawShapes() {

    setInterval(function() {

        //=========DRAW HERE=================


    }, 500);
}

function randomColor() {
    switch (Math.floor(Math.random() * 8)) {
    case 0:
        return "yellow";
    case 1:
        return "green";
    case 2:
        return "blue";
    case 3:
        return "red";
    case 4:
        return "orange";
    case 5:
        return "black";
    case 6:
        return "brown";
    case 7:
        return "purple";
    default:
        return "white";
    }
}

function drawCircle(x,y,r) {
    c.beginPath();
    c.arc(x, y, r, 0, Math.PI * 2, true);
    c.fillStyle = "black";
    c.fill();
}

function createBorder() {
    c.moveTo(0, 0);
    c.lineTo(0, h);
    c.lineTo(w, h);
    c.lineTo(w, 0);
    c.lineTo(0, 0);
    c.stroke();
}