Trying to limit the drawing of Kinetic polygons based on distance from center of stage

Vote count:

0

I am trying to draw a grid of polygons in a circle programmatically. Im trying to do this by using the coordinates on the canvas element in the Pythagorean theorem:

        function createTri(x, y) { //This function works correctly without the if statement.

            var tri = new Kinetic.Rect({
                x: x,
                y: y,
                width: 11,
                height: 11,
                fillRed: 17,
                fillGreen: 17,
                fillBlue: 17,
                closed: true,
                shadowColor: '#5febff',
                shadowBlur: 3,
                shadowOpacity: 0.18
            });

            if ((Math.abs(Math.pow(x,2)) + Math.abs(Math.pow(y,2))) < Math.pow(radius,2)) //This causes the squares not to be drawn.
                layer.add(tri);
            };
        }

How the function SHOULD work is the squares should only be drawn if their coordinates are less than the radius, however no triangles are drawn at all.

If I take out the if statement, the rest of my code draws the squares correctly in a grid covering the page as it should.

My complete code for the population of the squares is this:

        var xt = stage.width()/2;

        var yt = stage.height()/2;

        var radius = 300;

        var pax = [];

        //Pushes the coordinates to the 3D Array (This works correctly)
        for (var i = 0; i < stage.height()/12; i++){
            pax[i] = [];
            for (var j = 0; j < stage.width()/12; j++){
                pax[i][j] = [];
                pax[i][j].push(j*12-(stage.width()/2)+xt,i*-12+(stage.height()/2)+yt);
            };
        }

        function createTri(x, y) { //This function works correctly without the if statement.

            var tri = new Kinetic.Rect({
                x: x,
                y: y,
                width: 11,
                height: 11,
                fillRed: 17,
                fillGreen: 17,
                fillBlue: 17,
                closed: true,
                shadowColor: '#5febff',
                shadowBlur: 3,
                shadowOpacity: 0.18
            });

            if ((Math.abs(Math.pow(x,2)) + Math.abs(Math.pow(y,2))) < Math.pow(radius,2)) //This causes the triangles not to be drawn.
                layer.add(tri);
            };
        }


        //drawing triangles to correct grid coordinates (This works properly)
        for (var i = 0; i < pax.length; i++){
            for (var j = 0; j < pax[i].length; j++){
                createTri(pax[i][j][0],pax[i][j][1]);
            };
        }    

Everything looks correct, so Im not sure where Im going wrong with the if statement.

asked 30 secs ago

JSArrakis

79