New javascript/canvas splash page

Still working on my new splash page, i'm just not happy untill it works 100% like i want it too. You can view version two here: http://www.nemesisstar.com/sb_index_nemi2.html the first version is still in the same place, just go the the other blog entry to look at it and the code walkthrough.

Not going to go through all of this, basicly i had to get the 3 points of the triangle(s) and run them through a barycentric calculation.  If you want an explination on how that math works then visit these two sites ...

http://www.blackpawn.com/texts/pointinpoly/default.html

http://2000clicks.com/mathhelp/GeometryPointAndTriangle3.htm

Now here's the main piece of code that has been added ...

        if ((((mouseX-ckW)x)) && (((mouseY-ckW)y)))

        {

          // Calculate the points.

          px1 =  x;

          py1 =  0;

          px2 = ((spikes[i].width * angCos[mmAng]) - (38 * angSin[mmAng]))+x;

          py2 = ((38 * angCos[mmAng]) + (spikes[i].width * angSin[mmAng]));

          px3 = ((0 * angCos[mmAng]) - (77 * angSin[mmAng]))+x;

          py3 = ((77 * angCos[mmAng]) + (0 * angSin[mmAng]));

          

          // Y-Axis Scale modification

          py1 = ((py1+y)*(scaleY))+ ctxHeight*((1-scaleY)/2);

          py2 = ((py2+y)*(scaleY))+ ctxHeight*((1-scaleY)/2);

          py3 = ((py3+y)*(scaleY))+ ctxHeight*((1-scaleY)/2);

          

          // barycentric calculation

          b0 =  (px2 - px1) * (py3 - py1) - (px3 - px1) * (py2 - py1);

          b1 = ((px2 - mouseX) * (py3 - mouseY) - (px3 - mouseX) * (py2 - mouseY)) / b0;

          b2 = ((px3 - mouseX) * (py1 - mouseY) - (px1 - mouseX) * (py3 - mouseY)) / b0;

          b3 = ((px1 - mouseX) * (py2 - mouseY) - (px2 - mouseX) * (py1 - mouseY)) / b0;

          

          if (b1>0 && b2>0 && b3>0) {

           spikes[i].mouseover = true;

           } else {

           spikes[i].mouseover = false;

           }

          

        } else {

          spikes[i].mouseover = false;

        }

Not going to walk you through every line of code there but basicly it it calculated the rotation of the 3 points (without the Y axis modification). Then it adds in and scales the points according to the current scaleY. After that it simply runs through the barycentric calculation formulas and does a simple check.


If you read the last blog entry you should also notice that it doesn't draw the spikes from an image any longer, now javascript renders them to the canvas through a simple object prototype called 'Spikes' ...

    function Spikes()

    {

      this.x = 0;

      this.y = 0;

      this.rad = 0.0;

      this.width = 105;

      this.ctx = '';

      this.mouseover = false;

      this.draw = function()

      {

        this.ctx.save();

        this.ctx.strokeStyle = "rgba(255,0,0,0.5)";

        this.ctx.lineWidth = 1;

        this.ctx.translate(x,y);

        this.ctx.rotate(rad);

        this.ctx.beginPath();

        this.ctx.moveTo(0,0);

        this.ctx.bezierCurveTo(0, 15,  85, 23, this.width,  38)

        this.ctx.bezierCurveTo(85, 53, 0, 62, 0,  77)

        this.ctx.bezierCurveTo( 5, 67, 5, 10, 0,  0)

        if (this.mouseover) this.ctx.fillStyle = "rgba(255,0,0,0.5)";

        this.ctx.fill();

        this.ctx.restore();

      };

    }

    spikes = new Array();

    for (i = 0; i<=8; i++) { spikes[i] = new Spikes(); }

 

yes, draw is a function not a string ... remember EVAL is EVIL, we don't use it. If you haven't used javascript prototypes before then you definatly will have to read up on them as i progress through this, or if you want to mess with anything in the google api.

Ok, i need a break and am going to go blow something up.