logistic.js

/**
 * Discretization of the logistic equation
 * by Kazuki Maeda
 * Last-Modified: May 26, 2013
 */

var WIDTH=1020, HEIGHT=320;
var marginX=20, marginY=120;
var w=WIDTH-marginX, h=HEIGHT-marginY;
var interval = 20;

var rootSVG;
var graph;
var iv, delta;
var thread;
var u, up, un;
var animateX, animatePoints;

window.onload = function(){
    init();
}

function init(){
    document.getElementById("iv").addEventListener("keypress", enter, true);
    document.getElementById("delta").addEventListener("keypress", enter, true);
    document.getElementById("draw").addEventListener("click", draw, true);

    document.getElementById("canvas").removeChild(document.getElementById("canvas").firstChild);
    rootSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    rootSVG.setAttribute("width", WIDTH);
    rootSVG.setAttribute("height", HEIGHT);
    document.getElementById("canvas").appendChild(rootSVG);

    // draw axes
    var xAxis = document.createElementNS("http://www.w3.org/2000/svg", "line");
    xAxis.setAttribute("x1", ""+marginX);
    xAxis.setAttribute("y1", ""+h);
    xAxis.setAttribute("x2", ""+WIDTH);
    xAxis.setAttribute("y2", ""+h);
    xAxis.setAttribute("stroke", "#D3D7CF");
    xAxis.setAttribute("stroke-width", "2");
    rootSVG.appendChild(xAxis);

    var yAxis = document.createElementNS("http://www.w3.org/2000/svg", "line");
    yAxis.setAttribute("x1", ""+marginX);
    yAxis.setAttribute("y1", ""+(h+interval*5));
    yAxis.setAttribute("x2", ""+marginX);
    yAxis.setAttribute("y2", ""+0);
    yAxis.setAttribute("stroke", "#D3D7CF");
    yAxis.setAttribute("stroke-width", "2");
    rootSVG.appendChild(yAxis);

    var i = 0;
    for(var x = marginX; x <= WIDTH; x += interval){
	var xTick = document.createElementNS("http://www.w3.org/2000/svg", "line");
	xTick.setAttribute("x1", ""+x)
	xTick.setAttribute("x2", ""+x)
	xTick.setAttribute("y1", ""+h)
	xTick.setAttribute("y2", ""+(h-interval/5))
	xTick.setAttribute("stroke", "#D3D7CF");
	xTick.setAttribute("stroke-width", "1");
	rootSVG.appendChild(xTick);

	if(!(i%5)){
	    xTick.setAttribute("y2", ""+(HEIGHT-marginY-interval/5*2))

	    var xLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
	    xLabel.setAttribute("x", ""+x-(8/72*96));
	    xLabel.setAttribute("y", ""+(HEIGHT-marginY+(8/72*96)));
	    xLabel.setAttribute("font-size", "8pt");
	    xLabel.setAttribute("fill", "#D3D7CF");
	    xLabel.textContent = ""+i;
	    rootSVG.appendChild(xLabel);
	}
	++i;
    }

    i = 10;
    for(var y = 0; y <= h+interval*5; y += interval){
	var yTick = document.createElementNS("http://www.w3.org/2000/svg", "line");
	yTick.setAttribute("x1", ""+marginX)
	yTick.setAttribute("x2", ""+(marginX+interval/5))
	yTick.setAttribute("y1", ""+y)
	yTick.setAttribute("y2", ""+y)
	yTick.setAttribute("stroke", "#D3D7CF");
	yTick.setAttribute("stroke-width", "1");
	rootSVG.appendChild(yTick);

	if(!(i%5) && i!=0){
	    yTick.setAttribute("x2", ""+(marginX+interval/5*2));

	    var yLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
	    yLabel.setAttribute("x", ""+(marginX-8/72*96));
	    yLabel.setAttribute("y", ""+(y+8/72*96));
	    yLabel.setAttribute("font-size", "8pt");
	    yLabel.setAttribute("fill", "#D3D7CF");
	    yLabel.textContent = ""+(i/5);
	    rootSVG.appendChild(yLabel);
	}
	--i;
    }

    graph = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
    graph.setAttribute("stroke", "#7FFF00");
    graph.setAttribute("stroke-width", "2");
    graph.setAttribute("fill", "none");
    rootSVG.appendChild(graph);

    draw();
}

function draw(){
    clearInterval(thread);
    iv = parseFloat(document.getElementById("iv").value);
    if(iv < 0){
	iv = 0;
	document.getElementById("iv").value=0;
    } else if(iv > 2){
	iv = 2;
	document.getElementById("iv").value=2;
    }

    delta = parseFloat(document.getElementById("delta").value);
    if(delta < 0.01){
	delta = 0.01;
	document.getElementById("delta").value=0.01;
    }

    up = iv;
    un = iv;
    if(document.getElementById("type1").checked)
	u = u1;
    else if(document.getElementById("type2").checked)
	u = u2;
    else
	u = u3;

    var points = "" + marginX + "," + (h-iv*interval*5);
    if(document.getElementById("effect").checked){
	animatePoints = points;
	animateX = interval*delta;
	thread = setInterval("animate();", 1000/60);
    } else {
	for(var x=interval*delta; x<w+delta*interval; x+=delta*interval){
	    var unn = u(up, un);
	    var tmp = unn;
	    if(unn > 10)
		unn = 10;
	    else if(unn < -10)
		unn = -10;

	    points += " " + (marginX+x) + "," + (h-unn*interval*5);
	    up = un;
	    un = tmp;
	}

	graph.setAttribute("points", points);
    }
}

function animate() {
    var endX = animateX + interval;
    var x = animateX;
    while(x < endX){
	if(x>=w+delta*interval){
	    clearInterval(thread);
	    graph.setAttribute("points", animatePoints);
	    return;
	}

	var unn = u(up, un);
	var tmp = unn;
	if(unn > 10)
	    unn = 10;
	else if(unn < -10)
	    unn = -10;

	animatePoints += " " + (marginX+x) + "," + (h-unn*interval*5);
	up = un;
	un = tmp;
	x += delta*interval;
    }
    graph.setAttribute("points", animatePoints);
    animateX = x;
}

function u1(up, un){
    return (1.0+delta)*un-delta*un*un;
}

function u2(up, un){
    return 2*delta*un*(1.0-un)+up;
}

function u3(up, un){
    return (1.0+delta)*un/(1.0+delta*un);
}

function enter(e){
    if(e.keyCode == 13)
	draw();
}