rfdrake/ifs.html

## ifs.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<html>
 <body bgcolor="#000000">
     <center>
     <canvas id="canvas" width="800" height="600"/>
     </center>
 </body>
</html>
<script>
// we want y to be in the bottom left so we're translating it.
function tr_y(y) { return canvas.height-y; }
function tr_x(x) { return x; }

window.onload = function(e){
    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle="#000000";
    ctx.fillRect(0,0,canvas.width,canvas.height);

    var id = ctx.createImageData(1,1);
    var d  = id.data;
    d[0]   = 86;
    d[1]   = 255;
    d[2]   = 32;
    d[3]   = 255;

    var loopuntildone=1;
    var x = 1;
    var y = 1;
    var x0=x;

    // This handles translation from -/+ coordinates.
    var xa = -5.5
    var xb = 6.5
    var ya = -0.5
    var yb = 10.5
    var jx = 0;
    var jy = 0;

    while(loopuntildone< 50000) {
        ctx.putImageData( id, tr_x(jx), tr_y(jy) );
        var i=Math.floor((Math.random()*100)+1);

        if (i==1) {
            x0=0;
            y=0.16*y;
        } else if (i>1 && i<86) {
            x0=0.85*x + 0.04*y;
            y=x*(-0.04) + 0.85*y + 1.6;
        } else if (i>85 && i<93) {
            x0=0.2*x - 0.26*y;
            y=0.23*x + 0.22*y + 1.6;
        } else { // i>=93
            x0=x*(-0.15) + 0.28*y;
            y=0.26*x + 0.24*y + 0.44;
        }
        x=x0;
        // the canvas.width part scales things to our image size
        jx = parseInt((x - xa) / (xb - xa) * (canvas.width - 1))
        jy = parseInt((y - ya) / (yb - ya) * (canvas.height - 1))
        loopuntildone++;
    }
}

</script>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	</head>
	<html>
	<body bgcolor="#000000">
	<center>
	<canvas id="canvas" width="800" height="600"/>
	</center>
	</body>
	</html>
	<script>
	// we want y to be in the bottom left so we're translating it.
	function tr_y(y) { return canvas.height-y; }
	function tr_x(x) { return x; }

	window.onload = function(e){
	var canvas=document.getElementById('canvas');
	var ctx=canvas.getContext('2d');
	ctx.fillStyle="#000000";
	ctx.fillRect(0,0,canvas.width,canvas.height);

	var id = ctx.createImageData(1,1);
	var d = id.data;
	d[0] = 86;
	d[1] = 255;
	d[2] = 32;
	d[3] = 255;

	var loopuntildone=1;
	var x = 1;
	var y = 1;
	var x0=x;

	// This handles translation from -/+ coordinates.
	var xa = -5.5
	var xb = 6.5
	var ya = -0.5
	var yb = 10.5
	var jx = 0;
	var jy = 0;

	while(loopuntildone< 50000) {
	ctx.putImageData( id, tr_x(jx), tr_y(jy) );
	var i=Math.floor((Math.random()*100)+1);

	if (i==1) {
	x0=0;
	y=0.16*y;
	} else if (i>1 && i<86) {
	x0=0.85x + 0.04y;
	y=x(-0.04) + 0.85y + 1.6;
	} else if (i>85 && i<93) {
	x0=0.2x - 0.26y;
	y=0.23x + 0.22y + 1.6;
	} else { // i>=93
	x0=x(-0.15) + 0.28y;
	y=0.26x + 0.24y + 0.44;
	}
	x=x0;
	// the canvas.width part scales things to our image size
	jx = parseInt((x - xa) / (xb - xa) * (canvas.width - 1))
	jy = parseInt((y - ya) / (yb - ya) * (canvas.height - 1))
	loopuntildone++;
	}
	}

	</script>