How come my lines aren't matching up?

Question

EDIT: So apparently, PI is finite in JavaScript (which makes sense). But that leaves me with a major problem. What's the next best way to calculate the angles I need?

Alright, first, my code: http://jsfiddle.net/joshlalonde/vtfyj/34/

I'm drawing cubes that open up to a 120 degree angle. So the coordinates are calculated based on (h)eight and theta (120).

On line 46, I have a for loop that contains a nested for loop used for creating rows/columns.

It's somewhat subtle, but I noticed that the lines aren't matching up exactly. The code for figuring out each cubes position is on line 49. One of the things in the first parameter (my x value) for the origin of the cube is off. Can anyone help figure out what it is?

var cube = new Cube(
            origin.x + (j * -w * (Math.PI)) +
            (i * w * (Math.PI))
            , origin.y + j * (h / 2) +
            i * (h / 2) +
            (-k*h), h);

Sorry if that's confusing. I,j, and k refer to the variable being incremented by the for loops. So basically, a three dimensional for loop.

I think the problem lies with Math.PI. The width isn't the problem, or so I believe. I originally used 3.2 (which I somehow guessed and it seemed to line up pretty good. But I have no clue what the magical number is). I'm guessing it has to do with the angle being converted to Radians, but I don't understand why Math.PI/180 isn't the solution. I tried multiple things. 60 (in degrees) * Math.PI/180 doesn't work. What is it for?

EDIT: It might just be a JavaScript related math problem. The math is theoretically correct but can't be calculated correctly. I'll accept the imperfection to spare myself from re-writing code in unorthodox manners. I can tell it would take a lot to circumvent using trig math.

Answer 1

Alright I found the solution! It's really simple - I was using degrees instead of radians.

function Cube(x, y, h) {
this.x = x
this.y = y
this.h = h;
this.theta = 120*Math.PI/180;

this.getWidth = function () {
    return (this.h * Math.sin(this.theta / 2));
};
this.width = this.getWidth();

this.getCorner = function () {
    return  (this.h / 2);
};
this.corner = this.getCorner();

}

So apparently Javascript trig functions use Radians, so that's one problem. Next fix I made was to the offset of each point in the cube. It doesn't need one! (o.O idk why. But whatever it works. I left the old code just in case I discover why later on).

 function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw a black canvas

var h = 32;

var width = Math.sin(60*Math.PI/180);
var w = h*width;

var row = 9; // column and row will always be same (to make cube)

var column = row;
var area = row * column;
var height = 1;

row--;
column--;
height--;

var origin = {
    x: canvas.width / 2,
    y: (canvas.height / 2) - (h * column/2) + height*h
};

var offset = Math.sqrt(3)/2;
offset = 1;

for (var i = 0; i <= row; i++) {
    for (var j = 0; j <= column; j++) {
        for (var k = 0; k <= height; k++) {

        var cube = new Cube(
            origin.x + (j * -w * offset) +
            (i * w * offset)
            , origin.y + (j * (h / 2) * offset) +
            (i * (h / 2) * offset) +
            (-k*h*offset), h);
            var cubes = {};  
        cubes[i+j+k] = cube; // Store to array

        if (j == column) {
            drawCube(2, cube);
        }

        if (i == row) {
            drawCube(1, cube);
        }

        if (k == height) {
        drawCube(0,cube);
        }

        }
    }
}

}

See the full Jsfiddle here: http://jsfiddle.net/joshlalonde/vtfyj/41/

Answer 2

There are 2 problems...

1. Change line 35 to var w=h*Math.sin(30);. The 30 here matches the this.theta / 4 in the Cube getWidthmethod since this.theta equals 120.

2. Use the following code to generate the position of your new cube. You don't need Math.Pi. You needed to use both the cube width and height in your calculation.

   var cube = new Cube(
       origin.x+ -j*w - i*h,
       origin.y + -j*w/2 + i*h/2,
       h);