adamnew123456/eqnmix.html

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

		f(x): <input id="func1" type="text" value="Math.sin(x)"> </input>
		g(x): <input id="func2" type="text" value="Math.cos(x)"> </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/>

        	Iterations: <input id="iters" type="text" value="50"> </input> <br/>
        	Speed: <input id="speed" type="text" value="0.05"> </input> <br/>

		<input type="button" onclick="$.do_start_stop();" value="Start/Stop"> </input>
        	<input type="button" onclick="$.do_pause();" value="Pause/Play"> </input>
<script>
$ = {};

(function(){
	var runner_token = null;
    var ratio = 0;

    var canvas = document.getElementById("grid");
    var canvas_width = canvas.width;
    var canvas_height = canvas.height;

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

    var eq_1 = null;
    var eq_2 = null;
    var speed = null;
    var iters = null;

    var x_min = null;
    var x_max = null;

    var y_min = null;
    var y_max = null;

    var x_ratio = null;
    var y_ratio = null;
    var x_incr = null;

    function transform_x(x)
    {
        return (x - x_min) * x_ratio;
    }

    function transform_y(y)
    {
        return canvas_height - (y - y_min) * y_ratio;
    }

    function draw_y_axis(context)
    {
        context.beginPath();
        context.setLineDash([5]);
        context.moveTo(transform_x(x_min), transform_y(0));
        context.lineTo(transform_x(x_max), transform_y(0));
        context.stroke();
	    context.setLineDash([]);
    }

    function draw_x_axis(context)
    {
        context.beginPath();
        context.setLineDash([5]);
        context.moveTo(transform_x(0), transform_y(y_min));
        context.lineTo(transform_x(0), transform_y(y_max));
        context.stroke();
        context.setLineDash([]);
    }

	function draw_frame()
	{
        var context = canvas.getContext("2d");
        context.clearRect(0, 0, canvas_width, canvas_height);

        if (0 > x_min && 0 < x_max)
            draw_x_axis(context);

        if (0 > y_min && 0 < y_max)
            draw_y_axis(context);

        context.beginPath();

        var drawn_first_point = false;
        for (var x = x_min; x < x_max; x += x_incr)
        {
            var y = ratio * eq_1(x) + (1 - ratio) * eq_2(x);
            if (!isNaN(y) && !drawn_first_point)
            {
                drawn_first_point = true;
                context.moveTo(transform_x(x), transform_y(y));
            }
            else
                context.lineTo(transform_x(x), transform_y(y));
        }
        context.stroke();

        if (ratio < 0 || ratio > 1)
        {
            speed *= -1;
            ratio += speed;
        }
        else
            ratio += speed;
	}

	$.do_start_stop = function()
	{
		if (runner_token == null)
        {
            console.log("[Page] Started");
            eq_1 = evaluate_text_cell("func1", "(function(x){ return ", ";})");
            eq_2 = evaluate_text_cell("func2", "(function(x){ return ", ";})");
            iters = evaluate_text_cell("iters");
            speed = evaluate_text_cell("speed");

            x_min = evaluate_text_cell("xmin");
            x_max = evaluate_text_cell("xmax");

            y_min = evaluate_text_cell("ymin");
            y_max = evaluate_text_cell("ymax");

            x_ratio = canvas_width / (x_max - x_min);
            y_ratio = canvas_height / (y_max - y_min);

            x_incr = (x_max - x_min) / iters;

			runner_token = setInterval(draw_frame, 125);
        }
		else
		{
            console.log("[Page] Stopped");
			clearInterval(runner_token);
			runner_token = null;
            ratio = 0;
		}
	}

    $.do_pause = function()
    {
        if (runner_token)
        {
            clearInterval(runner_token);
            runner_token = null;
        }
        else
            runner_token = setInterval(draw_frame, 125);
    }
})();
</script>
	</body>
</html>
	<html>
	<title> Equation Mixer </title>
	<body>
	<canvas id="grid" width="600" height="600"> </canvas> <br/>

	f(x): <input id="func1" type="text" value="Math.sin(x)"> </input>
	g(x): <input id="func2" type="text" value="Math.cos(x)"> </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/>

	Iterations: <input id="iters" type="text" value="50"> </input> <br/>
	Speed: <input id="speed" type="text" value="0.05"> </input> <br/>

	<input type="button" onclick="$.do_start_stop();" value="Start/Stop"> </input>
	<input type="button" onclick="$.do_pause();" value="Pause/Play"> </input>
	<script>
	$ = {};

	(function(){
	var runner_token = null;
	var ratio = 0;

	var canvas = document.getElementById("grid");
	var canvas_width = canvas.width;
	var canvas_height = canvas.height;

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

	var eq_1 = null;
	var eq_2 = null;
	var speed = null;
	var iters = null;

	var x_min = null;
	var x_max = null;

	var y_min = null;
	var y_max = null;

	var x_ratio = null;
	var y_ratio = null;
	var x_incr = null;

	function transform_x(x)
	{
	return (x - x_min) * x_ratio;
	}

	function transform_y(y)
	{
	return canvas_height - (y - y_min) * y_ratio;
	}

	function draw_y_axis(context)
	{
	context.beginPath();
	context.setLineDash([5]);
	context.moveTo(transform_x(x_min), transform_y(0));
	context.lineTo(transform_x(x_max), transform_y(0));
	context.stroke();
	context.setLineDash([]);
	}

	function draw_x_axis(context)
	{
	context.beginPath();
	context.setLineDash([5]);
	context.moveTo(transform_x(0), transform_y(y_min));
	context.lineTo(transform_x(0), transform_y(y_max));
	context.stroke();
	context.setLineDash([]);
	}

	function draw_frame()
	{
	var context = canvas.getContext("2d");
	context.clearRect(0, 0, canvas_width, canvas_height);

	if (0 > x_min && 0 < x_max)
	draw_x_axis(context);

	if (0 > y_min && 0 < y_max)
	draw_y_axis(context);

	context.beginPath();

	var drawn_first_point = false;
	for (var x = x_min; x < x_max; x += x_incr)
	{
	var y = ratio * eq_1(x) + (1 - ratio) * eq_2(x);
	if (!isNaN(y) && !drawn_first_point)
	{
	drawn_first_point = true;
	context.moveTo(transform_x(x), transform_y(y));
	}
	else
	context.lineTo(transform_x(x), transform_y(y));
	}
	context.stroke();

	if (ratio < 0 \|\| ratio > 1)
	{
	speed *= -1;
	ratio += speed;
	}
	else
	ratio += speed;
	}

	$.do_start_stop = function()
	{
	if (runner_token == null)
	{
	console.log("[Page] Started");
	eq_1 = evaluate_text_cell("func1", "(function(x){ return ", ";})");
	eq_2 = evaluate_text_cell("func2", "(function(x){ return ", ";})");
	iters = evaluate_text_cell("iters");
	speed = evaluate_text_cell("speed");

	x_min = evaluate_text_cell("xmin");
	x_max = evaluate_text_cell("xmax");

	y_min = evaluate_text_cell("ymin");
	y_max = evaluate_text_cell("ymax");

	x_ratio = canvas_width / (x_max - x_min);
	y_ratio = canvas_height / (y_max - y_min);

	x_incr = (x_max - x_min) / iters;

	runner_token = setInterval(draw_frame, 125);
	}
	else
	{
	console.log("[Page] Stopped");
	clearInterval(runner_token);
	runner_token = null;
	ratio = 0;
	}
	}

	$.do_pause = function()
	{
	if (runner_token)
	{
	clearInterval(runner_token);
	runner_token = null;
	}
	else
	runner_token = setInterval(draw_frame, 125);
	}
	})();
	</script>
	</body>
	</html>