JnBrymn-EB/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Pythag</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script charset="utf-8">
/**
 * four points of a quad and the depth the line from point 0 to point 3 is considered the base, the
 * line from 1 to 2 is considered the top. (currently this only works with squares. TODO fix)
 */
QuadShape = function(x0, y0, x1, y1, x2, y2, x3, y3, depth) {
    this.x0 = x0;
    this.y0 = y0;
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
    this.x3 = x3;
    this.y3 = y3;
    if(depth==undefined) {
        this.depth = 0;
    } else {
        this.depth = depth;
    }
};


QuadShape.prototype.points_string = function() {
    return this.x0 +','+ this.y0 +' '+ this.x1 +','+ this.y1 +' '+ this.x2 +','+ this.y2 +' '+ this.x3 +','+ this.y3;
};

/**
 * Returns fractal with associated angle and depth. The fractal is an array of QuadShapes. Depth of
 * 0 will return an array with only this QuadShape. Angle in degrees.
 */
QuadShape.prototype.make_fractal = function(angle, depth) {
    var quad_shapes = [this];

    if(this.depth == depth) {
        return quad_shapes
    }

    var sub_quads = this.make_sub_quad_shapes(angle);
    quad_shapes = quad_shapes.concat(sub_quads[0].make_fractal(angle, depth));
    quad_shapes = quad_shapes.concat(sub_quads[1].make_fractal(angle, depth));
    return quad_shapes
}

QuadShape.prototype.make_sub_quad_shapes = function(angle) {
    var left_angle = angle*Math.PI/180.0;

    var del_x01 = this.x1-this.x0;
    var del_y01 = this.y1-this.y0;
    var del_x12 = this.x2-this.x1;
    var del_y12 = this.y2-this.y1;
    var del_x23 = this.x3-this.x2;
    var del_y23 = this.y3-this.y2;

    left_scale = Math.cos(left_angle);
    right_scale = Math.sin(left_angle);
    right_angle = left_angle - Math.PI/2.0;

    var left_quad = new QuadShape();
    left_quad.depth = this.depth + 1;
    left_quad.x0 = this.x1;
    left_quad.y0 = this.y1;
    left_quad.x1 = left_quad.x0+left_scale*(del_x01*Math.cos(left_angle)-del_y01*Math.sin(left_angle));
    left_quad.y1 = left_quad.y0+left_scale*(del_x01*Math.sin(left_angle)+del_y01*Math.cos(left_angle));
    left_quad.x2 = left_quad.x1+left_scale*(del_x12*Math.cos(left_angle)-del_y12*Math.sin(left_angle));
    left_quad.y2 = left_quad.y1+left_scale*(del_x12*Math.sin(left_angle)+del_y12*Math.cos(left_angle));
    left_quad.x3 = left_quad.x2+left_scale*(del_x23*Math.cos(left_angle)-del_y23*Math.sin(left_angle));
    left_quad.y3 = left_quad.y2+left_scale*(del_x23*Math.sin(left_angle)+del_y23*Math.cos(left_angle));

    var right_quad = new QuadShape();
    right_quad.depth = this.depth + 1;
    right_quad.x3 = this.x2;
    right_quad.y3 = this.y2;
    right_quad.x2 = right_quad.x3-right_scale*(del_x23*Math.cos(right_angle)-del_y23*Math.sin(right_angle));
    right_quad.y2 = right_quad.y3-right_scale*(del_x23*Math.sin(right_angle)+del_y23*Math.cos(right_angle));
    right_quad.x1 = right_quad.x2-right_scale*(del_x12*Math.cos(right_angle)-del_y12*Math.sin(right_angle));
    right_quad.y1 = right_quad.y2-right_scale*(del_x12*Math.sin(right_angle)+del_y12*Math.cos(right_angle));
    right_quad.x0 = right_quad.x1-right_scale*(del_x01*Math.cos(right_angle)-del_y01*Math.sin(right_angle));
    right_quad.y0 = right_quad.y1-right_scale*(del_x01*Math.sin(right_angle)+del_y01*Math.cos(right_angle));

    return [left_quad, right_quad]

}

function draw(vis, data) {
    quad_sel = vis.selectAll('polygon.quad-shape')
        .data(data);

    quad_sel.enter()
        .append('polygon')
            .attr('class', 'quad-shape');

    quad_sel.attr('points', function(d) {return d.points_string()});

}


function main() {
	var width = 1000;
	var height = 600;

	var vis = d3.select('div')
	    .append('svg:svg')
	    .attr('width', width)
	    .attr('height', height);

    var quad_shape = new QuadShape(310,10,310,100,400,100,400,10);

    var intervalID = setInterval(
        function(){
            var d = new Date();
            var n = d.getTime();
            angle = n/100%90.0;
            draw(vis, quad_shape.make_fractal(angle,11));
        }, 16);

}

</script>
</head>

<body>
<!-- This file lives in public/404.html -->
<div class="dialog"></div>
<script type="text/javascript">
main();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pythag</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script charset="utf-8">
	/**
	* four points of a quad and the depth the line from point 0 to point 3 is considered the base, the
	* line from 1 to 2 is considered the top. (currently this only works with squares. TODO fix)
	*/
	QuadShape = function(x0, y0, x1, y1, x2, y2, x3, y3, depth) {
	this.x0 = x0;
	this.y0 = y0;
	this.x1 = x1;
	this.y1 = y1;
	this.x2 = x2;
	this.y2 = y2;
	this.x3 = x3;
	this.y3 = y3;
	if(depth==undefined) {
	this.depth = 0;
	} else {
	this.depth = depth;
	}
	};


	QuadShape.prototype.points_string = function() {
	return this.x0 +','+ this.y0 +' '+ this.x1 +','+ this.y1 +' '+ this.x2 +','+ this.y2 +' '+ this.x3 +','+ this.y3;
	};

	/**
	* Returns fractal with associated angle and depth. The fractal is an array of QuadShapes. Depth of
	* 0 will return an array with only this QuadShape. Angle in degrees.
	*/
	QuadShape.prototype.make_fractal = function(angle, depth) {
	var quad_shapes = [this];

	if(this.depth == depth) {
	return quad_shapes
	}

	var sub_quads = this.make_sub_quad_shapes(angle);
	quad_shapes = quad_shapes.concat(sub_quads[0].make_fractal(angle, depth));
	quad_shapes = quad_shapes.concat(sub_quads[1].make_fractal(angle, depth));
	return quad_shapes
	}

	QuadShape.prototype.make_sub_quad_shapes = function(angle) {
	var left_angle = angle*Math.PI/180.0;

	var del_x01 = this.x1-this.x0;
	var del_y01 = this.y1-this.y0;
	var del_x12 = this.x2-this.x1;
	var del_y12 = this.y2-this.y1;
	var del_x23 = this.x3-this.x2;
	var del_y23 = this.y3-this.y2;

	left_scale = Math.cos(left_angle);
	right_scale = Math.sin(left_angle);
	right_angle = left_angle - Math.PI/2.0;

	var left_quad = new QuadShape();
	left_quad.depth = this.depth + 1;
	left_quad.x0 = this.x1;
	left_quad.y0 = this.y1;
	left_quad.x1 = left_quad.x0+left_scale(del_x01Math.cos(left_angle)-del_y01*Math.sin(left_angle));
	left_quad.y1 = left_quad.y0+left_scale(del_x01Math.sin(left_angle)+del_y01*Math.cos(left_angle));
	left_quad.x2 = left_quad.x1+left_scale(del_x12Math.cos(left_angle)-del_y12*Math.sin(left_angle));
	left_quad.y2 = left_quad.y1+left_scale(del_x12Math.sin(left_angle)+del_y12*Math.cos(left_angle));
	left_quad.x3 = left_quad.x2+left_scale(del_x23Math.cos(left_angle)-del_y23*Math.sin(left_angle));
	left_quad.y3 = left_quad.y2+left_scale(del_x23Math.sin(left_angle)+del_y23*Math.cos(left_angle));

	var right_quad = new QuadShape();
	right_quad.depth = this.depth + 1;
	right_quad.x3 = this.x2;
	right_quad.y3 = this.y2;
	right_quad.x2 = right_quad.x3-right_scale(del_x23Math.cos(right_angle)-del_y23*Math.sin(right_angle));
	right_quad.y2 = right_quad.y3-right_scale(del_x23Math.sin(right_angle)+del_y23*Math.cos(right_angle));
	right_quad.x1 = right_quad.x2-right_scale(del_x12Math.cos(right_angle)-del_y12*Math.sin(right_angle));
	right_quad.y1 = right_quad.y2-right_scale(del_x12Math.sin(right_angle)+del_y12*Math.cos(right_angle));
	right_quad.x0 = right_quad.x1-right_scale(del_x01Math.cos(right_angle)-del_y01*Math.sin(right_angle));
	right_quad.y0 = right_quad.y1-right_scale(del_x01Math.sin(right_angle)+del_y01*Math.cos(right_angle));

	return [left_quad, right_quad]

	}

	function draw(vis, data) {
	quad_sel = vis.selectAll('polygon.quad-shape')
	.data(data);

	quad_sel.enter()
	.append('polygon')
	.attr('class', 'quad-shape');

	quad_sel.attr('points', function(d) {return d.points_string()});

	}


	function main() {
	var width = 1000;
	var height = 600;

	var vis = d3.select('div')
	.append('svg:svg')
	.attr('width', width)
	.attr('height', height);

	var quad_shape = new QuadShape(310,10,310,100,400,100,400,10);

	var intervalID = setInterval(
	function(){
	var d = new Date();
	var n = d.getTime();
	angle = n/100%90.0;
	draw(vis, quad_shape.make_fractal(angle,11));
	}, 16);

	}

	</script>
	</head>

	<body>
	<!-- This file lives in public/404.html -->
	<div class="dialog"></div>
	<script type="text/javascript">
	main();
	</script>
	</body>
	</html>