gistfile1.js

        var deg2rad = Math.PI / 180;


        var angle = prompt("What angle") * deg2rad;
        var velocity = prompt('What velocity');
        var gravity = prompt('What gravity');
        var yNul = prompt('Interception with the y axis');

        var equation;
        var a;
        var b;
        var c;

        a = (-gravity / (2 * (velocity * Math.cos(angle) * velocity * Math.cos(angle))));
        b = ((velocity * Math.sin(angle)) / (velocity * Math.cos(angle)));
        c = yNul;
        
        var x1 = (- b - Math.sqrt((b*b) - 4 * a * c)) / (2 * a);
        var x2 = (- b + Math.sqrt((b * b) - 4 * a * c)) / (2 * a);
        var y1 = (((-b * -b) + 4 * a * c) / (4 * a))

 
       function Graph(con) {
          
            // user defined properties
            this.canvas = document.getElementById(con.canvasId);
            this.minX = con.minX;
            this.minY = con.minY;
            this.maxX = con.maxX;
            this.maxY = con.maxY;
            this.unitsPerTick = con.unitsPerTick;

 

            // constants
            this.axisColor = "#aaa";
            this.font = "8pt Calibri";
            this.tickSize = 20;

 

            // relationships
            this.context = this.canvas.getContext("2d");
            this.rangeX = this.maxX - this.minX;
            this.rangeY = this.maxY - this.minY;
            this.unitX = this.canvas.width / this.rangeX;
            this.unitY = this.canvas.height / this.rangeY;
            this.centerY = Math.round(Math.abs(this.minY / this.rangeY) * this.canvas.height);
            this.centerX = Math.round(Math.abs(this.minX / this.rangeX) * this.canvas.width);
            this.iteration = (this.maxX - this.minX) / 1000;
            this.scaleX = this.canvas.width / this.rangeX;
            this.scaleY = this.canvas.height / this.rangeY;

 

            // draw x and y axis
            this.drawXAxis();
            this.drawYAxis();

        }

 

        Graph.prototype.drawXAxis = function () {

            var context = this.context;
            context.save();
            context.beginPath();
            context.moveTo(0, this.centerY);
            context.lineTo(this.canvas.width, this.centerY);
            context.strokeStyle = this.axisColor;
            context.lineWidth = 2;
            context.stroke();
 
            // draw tick marks
            var xPosIncrement = this.unitsPerTick * this.unitX;
            var xPos, unit;
            context.font = this.font;
            context.textAlign = "center";
            context.textBaseline = "top";

 
            // draw left tick marks
            xPos = this.centerX - xPosIncrement;
            unit = -1 * this.unitsPerTick;
            while (xPos > 0) {

                context.moveTo(xPos, this.centerY - this.tickSize / 2);
                context.lineTo(xPos, this.centerY + this.tickSize / 2);
                context.stroke();
                context.fillText(unit, xPos, this.centerY + this.tickSize / 2 + 3);
                unit -= this.unitsPerTick;
                xPos = Math.round(xPos - xPosIncrement);
            }

 

            // draw right tick marks
            xPos = this.centerX + xPosIncrement;
            unit = this.unitsPerTick;

            while (xPos < this.canvas.width) {

                context.moveTo(xPos, this.centerY - this.tickSize / 2);
                context.lineTo(xPos, this.centerY + this.tickSize / 2);
                context.stroke();
                context.fillText(unit, xPos, this.centerY + this.tickSize / 2 + 3);
                unit += this.unitsPerTick;
                xPos = Math.round(xPos + xPosIncrement);
            }

            context.restore();
        };

 

        Graph.prototype.drawYAxis = function () {

            var context = this.context;
            context.save();
            context.beginPath();
            context.moveTo(this.centerX, 0);
            context.lineTo(this.centerX, this.canvas.height);
            context.strokeStyle = this.axisColor;
            context.lineWidth = 2;
            context.stroke();

 

            // draw tick marks 
            var yPosIncrement = this.unitsPerTick * this.unitY;
            var yPos, unit;
            context.font = this.font;
            context.textAlign = "right";
            context.textBaseline = "middle";

 

            // draw top tick marks
            yPos = this.centerY - yPosIncrement;
            unit = this.unitsPerTick;

            while (yPos > 0) {

                context.moveTo(this.centerX - this.tickSize / 2, yPos);
                context.lineTo(this.centerX + this.tickSize / 2, yPos);
                context.stroke();
                context.fillText(unit, this.centerX - this.tickSize / 2 - 3, yPos);
                unit += this.unitsPerTick;
                yPos = Math.round(yPos - yPosIncrement);

            }

 

            // draw bottom tick marks
            yPos = this.centerY + yPosIncrement;
            unit = -1 * this.unitsPerTick;
            while (yPos < this.canvas.height) {

                context.moveTo(this.centerX - this.tickSize / 2, yPos);
                context.lineTo(this.centerX + this.tickSize / 2, yPos);
                context.stroke();
                context.fillText(unit, this.centerX - this.tickSize / 2 - 3, yPos);
                unit -= this.unitsPerTick;
                yPos = Math.round(yPos + yPosIncrement);
            }

            context.restore();

        };

 

        Graph.prototype.drawEquation = function (equation, color, thickness) {

            var context = this.context;
            context.save();
            context.save();
            this.transformContext();


            context.beginPath();
            context.moveTo(this.minX, equation(this.minX));

 

            for (var x = this.minX + this.iteration; x <= this.maxX; x += this.iteration) {
                context.lineTo(x, equation(x));

            }

 

            context.restore();
            context.lineJoin = "round";
            context.lineWidth = thickness;
            context.strokeStyle = color;
            context.stroke();
            context.restore();

        };

 

        Graph.prototype.transformContext = function () {

            var context = this.context;
 

            // move context to center of canvas
            this.context.translate(this.centerX, this.centerY);
 
            context.scale(this.scaleX, -this.scaleY);

        };

 

        window.onload = function () {

            var myGraph = new Graph({
                canvasId: "theCanvas",
                minX: x2,
                minY: (-1 * Math.abs(y1)),
                maxX: x1,
                maxY: Math.abs(y1),
                unitsPerTick: 1

            });

 

            myGraph.drawEquation(function(x) {
                equation = a * (x * x) + b * x + c;
                return equation;
            }, "green", 3);
        };