nikcorg/plot.html

## plot.html
<!doctype html>
<html>
    <head>
        <title>Plot</title>
        <script type="text/javascript">
            // Looking at this formula, just for fun
            // http://en.wikipedia.org/wiki/Logistic_map

            var R = Math.PI / 2;
            var Rmax = 4;
            var Rinc = 0.05;
            var ymul = 400;
            var xstep = 10;

            var canvas = {};
            var data = { P: 0.001, Pn: undefined };
            var plot = { x: 0, y: 0 };

            var metaCanvas = document.createElement("canvas");
            var plotCanvas = document.createElement("canvas");

            metaCanvas.width = plotCanvas.width = 640;
            metaCanvas.height = plotCanvas.height = 480;

            metaCanvas.ctx = metaCanvas.getContext("2d");
            plotCanvas.ctx = plotCanvas.getContext("2d");

            plotCanvas.ctx.strokeStyle = "#000";

            metaCanvas.ctx.fillStyle = "#000";
            metaCanvas.ctx.font = "16px sans-serif";

            var generationCycles;

            function init() {
                canvas.cnv = document.querySelector("canvas");
                canvas.ctx = canvas.cnv.getContext("2d");

                generationReset();
                draw();
            }

            function generationReset() {
                // data.P = 0.01;
                // plot.y = 0;
                R = Math.min(Rmax, R + Rinc);

                generationCycles = Math.floor(canvas.cnv.width / xstep)

                metaCanvas.ctx.clearRect(0, 0, 640, 480);
                metaCanvas.ctx.fillText("Y=Pn, Pn=RP(1-P), R="+String(R), 30, 30);
                metaCanvas.pixels = metaCanvas.ctx.getImageData(25, 10, 350, 30);
            }

            function draw() {
                if (plot.x >= plotCanvas.width) {
                    var px = plotCanvas.ctx.getImageData(xstep, 0, plotCanvas.width - xstep, plotCanvas.height);

                    plotCanvas.ctx.clearRect(0, 0, plotCanvas.width, plotCanvas.height);
                    plotCanvas.ctx.putImageData(px, 0, 0);
                    plot.x -= xstep;
                }

                if (generationCycles-- === 0) {
                    generationReset();
                }

                data.Pn = R * data.P * (1 - data.P);

                plotCanvas.ctx.beginPath();
                plotCanvas.ctx.moveTo(plot.x, plotCanvas.height - plot.y);

                plot.x += xstep;
                plot.y = Math.round(data.Pn * ymul);

                plotCanvas.ctx.lineTo(plot.x, plotCanvas.height - plot.y);
                plotCanvas.ctx.stroke();

                data.P = data.Pn;

                canvas.ctx.putImageData(plotCanvas.ctx.getImageData(0, 0, 640, 480), 0, 0);
                canvas.ctx.putImageData(metaCanvas.pixels, 0, 0);

                requestAnimationFrame(draw);
            }

            document.addEventListener("DOMContentLoaded", init, false);
        </script>
    </head>
    <body>
        <canvas width="640" height="480"></canvas>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Plot</title>
	<script type="text/javascript">
	// Looking at this formula, just for fun
	// http://en.wikipedia.org/wiki/Logistic_map

	var R = Math.PI / 2;
	var Rmax = 4;
	var Rinc = 0.05;
	var ymul = 400;
	var xstep = 10;

	var canvas = {};
	var data = { P: 0.001, Pn: undefined };
	var plot = { x: 0, y: 0 };

	var metaCanvas = document.createElement("canvas");
	var plotCanvas = document.createElement("canvas");

	metaCanvas.width = plotCanvas.width = 640;
	metaCanvas.height = plotCanvas.height = 480;

	metaCanvas.ctx = metaCanvas.getContext("2d");
	plotCanvas.ctx = plotCanvas.getContext("2d");

	plotCanvas.ctx.strokeStyle = "#000";

	metaCanvas.ctx.fillStyle = "#000";
	metaCanvas.ctx.font = "16px sans-serif";

	var generationCycles;

	function init() {
	canvas.cnv = document.querySelector("canvas");
	canvas.ctx = canvas.cnv.getContext("2d");

	generationReset();
	draw();
	}

	function generationReset() {
	// data.P = 0.01;
	// plot.y = 0;
	R = Math.min(Rmax, R + Rinc);

	generationCycles = Math.floor(canvas.cnv.width / xstep)

	metaCanvas.ctx.clearRect(0, 0, 640, 480);
	metaCanvas.ctx.fillText("Y=Pn, Pn=RP(1-P), R="+String(R), 30, 30);
	metaCanvas.pixels = metaCanvas.ctx.getImageData(25, 10, 350, 30);
	}

	function draw() {
	if (plot.x >= plotCanvas.width) {
	var px = plotCanvas.ctx.getImageData(xstep, 0, plotCanvas.width - xstep, plotCanvas.height);

	plotCanvas.ctx.clearRect(0, 0, plotCanvas.width, plotCanvas.height);
	plotCanvas.ctx.putImageData(px, 0, 0);
	plot.x -= xstep;
	}

	if (generationCycles-- === 0) {
	generationReset();
	}

	data.Pn = R * data.P * (1 - data.P);

	plotCanvas.ctx.beginPath();
	plotCanvas.ctx.moveTo(plot.x, plotCanvas.height - plot.y);

	plot.x += xstep;
	plot.y = Math.round(data.Pn * ymul);

	plotCanvas.ctx.lineTo(plot.x, plotCanvas.height - plot.y);
	plotCanvas.ctx.stroke();

	data.P = data.Pn;

	canvas.ctx.putImageData(plotCanvas.ctx.getImageData(0, 0, 640, 480), 0, 0);
	canvas.ctx.putImageData(metaCanvas.pixels, 0, 0);

	requestAnimationFrame(draw);
	}

	document.addEventListener("DOMContentLoaded", init, false);
	</script>
	</head>
	<body>
	<canvas width="640" height="480"></canvas>
	</body>
	</html>