adamnew123456/parametric.html

## parametric.html
<html>
    <title> Equation Mixer </title>
    <body>
        <canvas id="grid" width="600" height="600"> </canvas> <br/>

        x(t): <input id="func_x" type="text" value="Math.sin(t)"> </input>
        y(t): <input id="func_y" type="text" value="Math.cos(t)"> </input> <br/>

        X Min: <input id="xmin" type="text" value="-1"> </input>
        X Max: <input id="xmax" type="text" value="1"> </input> <br/>

        Y Min: <input id="ymin" type="text" value="-1"> </input>
        Y Max: <input id="ymax" type="text" value="1"> </input> <br/>

        T Min: <input id="tmin" type="text" value="-1"> </input>
        T Max: <input id="tmax" type="text" value="1"> </input>
        T Increment: <input id="tincr" type="text" value="0.05"> </input> <br/>
        <input type="button" onclick="$.do_plot();" value="Plot"> </input>
<script>
$ = {};

(function(){
    function evaluate_text_cell(id, prefix, suffix)
    {
        var cell = document.getElementById(id);
        return eval((prefix || "") + cell.value + (suffix || ""));
    }

    function in_range(val, min, max)
    {
        return val >= min && val <= max;
    }

    function Plot(canvas_id)
    {
        var canvas = document.getElementById(canvas_id);
        var width = canvas.width;
        var height = canvas.height;

        var x_min = null;
        var x_max = null;
        var y_min = null;
        var y_max = null;
        var x_ratio = null;
        var y_ratio = null;

        this.set_bounds = (function(_x_min, _x_max, _y_min, _y_max)
        {
            x_min = _x_min;
            x_max = _x_max;
            y_min = _y_min;
            y_max = _y_max;

            x_ratio = width / (x_max - x_min)
            y_ratio = height / (y_max - y_min);
        });

        this.get_plot_context = (function() {
            var self = this;

            return {
                plotted_last_point: false,
                context: self.get_context(),
                plot: (function(point) {
                    if (!this.plotted_last_point && point != null)
                    {
                        this.plotted_last_point = true;
                        var perspective = self.transform(point);
                        this.context.moveTo(perspective.x, perspective.y);
                    }
                    else if (point != null) // We've done the last point, though
                    {
                        var perspective = self.transform(point);
                        this.context.lineTo(perspective.x, perspective.y);
                    }
                    else // The current point is dead, so we didn't draw it
                    {
                        this.plotted_last_point = null;
                    }
                }),
                start: (function() {
                    this.context.clearRect(0, 0, width, height);
                    this.context.beginPath();
                }),
                stop: (function() {
                    this.context.stroke();
                })
            };
        });

        this.get_context = (function()
        {
            return canvas.getContext("2d");
        });

        this.transform = (function(point)
        {
            var new_x = (point.x - x_min) * x_ratio;
            var new_y = height - (point.y - y_min) * y_ratio;
            return new Point(new_x, new_y);
        });

        this.draw_axes = (function()
        {
             var context = this.get_context();
             if (in_range(0, x_min, x_max))
             {
                 // Draw the Y axis
                 context.beginPath();
                 context.setLineDash([5]);

                 var top = this.transform(new Point(0, y_min));
                 var bottom = this.transform(new Point(0, y_max));
                 context.moveTo(top.x, top.y);
                 context.lineTo(bottom.x, bottom.y);

                 context.stroke();
                 context.setLineDash([]);
             }
             if (in_range(0, y_min, y_max))
             {
                 // Draw the X axis
                 context.beginPath();
                 context.setLineDash([5]);

                 var left = this.transform(new Point(x_min, 0));
                 var right = this.transform(new Point(x_max, 0));
                 context.moveTo(left.x, left.y);
                 context.lineTo(right.x, right.y);

                 context.stroke();
                 context.setLineDash([]);
             }
        });
    }

    function Point(x, y)
    {
        this.x = x;
        this.y = y;
    }

    function ParametricCurve(x_func, y_func)
    {
        this.get = (function(t)
        {
            var x_value = x_func(t);
            var y_value = y_func(t);

            if (isNaN(x_value) || isNaN(y_value))
                return null;
            else
                return new Point(x_value, y_value);
        });
    }

    function draw_frame(canvas, curve, t_min, t_max, t_incr)
    {
        var plot_obj = canvas.get_plot_context();
        plot_obj.start();
        for (var t = t_min; t < t_max; t += t_incr)
            plot_obj.plot(curve.get(t));
        plot_obj.stop();

        canvas.draw_axes();
    }

    $.do_plot = function()
    {
        var canvas = new Plot("grid");

        var x_eq = evaluate_text_cell("func_x", "(function(t){ return ", ";})");
        var y_eq = evaluate_text_cell("func_y", "(function(t){ return ", ";})");
        var curve = new ParametricCurve(x_eq, y_eq);

        var x_min = evaluate_text_cell("xmin");
        var x_max = evaluate_text_cell("xmax");
        var y_min = evaluate_text_cell("ymin");
        var y_max = evaluate_text_cell("ymax");
        canvas.set_bounds(x_min, x_max, y_min, y_max);

        var t_min = evaluate_text_cell("tmin");
        var t_max = evaluate_text_cell("tmax");
        var t_incr = evaluate_text_cell("tincr");
        draw_frame(canvas, curve, t_min, t_max, t_incr);
    }
})();
</script>
    </body>
</html>
	<html>
	<title> Equation Mixer </title>
	<body>
	<canvas id="grid" width="600" height="600"> </canvas> <br/>

	x(t): <input id="func_x" type="text" value="Math.sin(t)"> </input>
	y(t): <input id="func_y" type="text" value="Math.cos(t)"> </input> <br/>

	X Min: <input id="xmin" type="text" value="-1"> </input>
	X Max: <input id="xmax" type="text" value="1"> </input> <br/>

	Y Min: <input id="ymin" type="text" value="-1"> </input>
	Y Max: <input id="ymax" type="text" value="1"> </input> <br/>

	T Min: <input id="tmin" type="text" value="-1"> </input>
	T Max: <input id="tmax" type="text" value="1"> </input>
	T Increment: <input id="tincr" type="text" value="0.05"> </input> <br/>
	<input type="button" onclick="$.do_plot();" value="Plot"> </input>
	<script>
	$ = {};

	(function(){
	function evaluate_text_cell(id, prefix, suffix)
	{
	var cell = document.getElementById(id);
	return eval((prefix \|\| "") + cell.value + (suffix \|\| ""));
	}

	function in_range(val, min, max)
	{
	return val >= min && val <= max;
	}

	function Plot(canvas_id)
	{
	var canvas = document.getElementById(canvas_id);
	var width = canvas.width;
	var height = canvas.height;

	var x_min = null;
	var x_max = null;
	var y_min = null;
	var y_max = null;
	var x_ratio = null;
	var y_ratio = null;

	this.set_bounds = (function(_x_min, _x_max, _y_min, _y_max)
	{
	x_min = _x_min;
	x_max = _x_max;
	y_min = _y_min;
	y_max = _y_max;

	x_ratio = width / (x_max - x_min)
	y_ratio = height / (y_max - y_min);
	});

	this.get_plot_context = (function() {
	var self = this;

	return {
	plotted_last_point: false,
	context: self.get_context(),
	plot: (function(point) {
	if (!this.plotted_last_point && point != null)
	{
	this.plotted_last_point = true;
	var perspective = self.transform(point);
	this.context.moveTo(perspective.x, perspective.y);
	}
	else if (point != null) // We've done the last point, though
	{
	var perspective = self.transform(point);
	this.context.lineTo(perspective.x, perspective.y);
	}
	else // The current point is dead, so we didn't draw it
	{
	this.plotted_last_point = null;
	}
	}),
	start: (function() {
	this.context.clearRect(0, 0, width, height);
	this.context.beginPath();
	}),
	stop: (function() {
	this.context.stroke();
	})
	};
	});

	this.get_context = (function()
	{
	return canvas.getContext("2d");
	});

	this.transform = (function(point)
	{
	var new_x = (point.x - x_min) * x_ratio;
	var new_y = height - (point.y - y_min) * y_ratio;
	return new Point(new_x, new_y);
	});

	this.draw_axes = (function()
	{
	var context = this.get_context();
	if (in_range(0, x_min, x_max))
	{
	// Draw the Y axis
	context.beginPath();
	context.setLineDash([5]);

	var top = this.transform(new Point(0, y_min));
	var bottom = this.transform(new Point(0, y_max));
	context.moveTo(top.x, top.y);
	context.lineTo(bottom.x, bottom.y);

	context.stroke();
	context.setLineDash([]);
	}
	if (in_range(0, y_min, y_max))
	{
	// Draw the X axis
	context.beginPath();
	context.setLineDash([5]);

	var left = this.transform(new Point(x_min, 0));
	var right = this.transform(new Point(x_max, 0));
	context.moveTo(left.x, left.y);
	context.lineTo(right.x, right.y);

	context.stroke();
	context.setLineDash([]);
	}
	});
	}

	function Point(x, y)
	{
	this.x = x;
	this.y = y;
	}

	function ParametricCurve(x_func, y_func)
	{
	this.get = (function(t)
	{
	var x_value = x_func(t);
	var y_value = y_func(t);

	if (isNaN(x_value) \|\| isNaN(y_value))
	return null;
	else
	return new Point(x_value, y_value);
	});
	}

	function draw_frame(canvas, curve, t_min, t_max, t_incr)
	{
	var plot_obj = canvas.get_plot_context();
	plot_obj.start();
	for (var t = t_min; t < t_max; t += t_incr)
	plot_obj.plot(curve.get(t));
	plot_obj.stop();

	canvas.draw_axes();
	}

	$.do_plot = function()
	{
	var canvas = new Plot("grid");

	var x_eq = evaluate_text_cell("func_x", "(function(t){ return ", ";})");
	var y_eq = evaluate_text_cell("func_y", "(function(t){ return ", ";})");
	var curve = new ParametricCurve(x_eq, y_eq);

	var x_min = evaluate_text_cell("xmin");
	var x_max = evaluate_text_cell("xmax");
	var y_min = evaluate_text_cell("ymin");
	var y_max = evaluate_text_cell("ymax");
	canvas.set_bounds(x_min, x_max, y_min, y_max);

	var t_min = evaluate_text_cell("tmin");
	var t_max = evaluate_text_cell("tmax");
	var t_incr = evaluate_text_cell("tincr");
	draw_frame(canvas, curve, t_min, t_max, t_incr);
	}
	})();
	</script>
	</body>
	</html>