ElemarJR/snowflake.htm

## snowflake.htm
<!DOCTYPE html>
<html>
<head>
    <title>Snowflake</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <style>
        *
        {
            font-family: Sans-Serif;
        }

        #workbench
        {
            width: 495px;
            height 490px;
            margin: 10px auto;
            border: 1 solid #000;
        }

        canvas
        {
            display: block;
            margin-right: 0;
            border: 1px solid #ccc;
            float: left;

        }

        #centerXSlider
        {
            width: 476px;
            margin: 0;
        }

        #centerYSlider
        {
            margin: 0 0 0 auto;
            height: 480px;
        }

        .sliders
        {
            margin: 10px auto;
            width: 480px;
            display: block;
        }
    </style>
</head>
<body>
    <div id="workbench">
        <canvas id='myCanvas' height="480" width="480">
        </canvas>
        <div id="centerYSlider">
        </div>
        <div id="centerXSlider">
        </div>

        <button id="kochButton">Koch</button>
        <button id="antikochButton">Anti Koch</button>
        <button id="gosperButton">Gosper</button>
    </div>
    <label class="sliders" for="depthSlider">
        Depth</label>
    <div class="sliders" id="depthSlider">
    </div>
    <label class="sliders" for="sizeSlider">
        Size</label>
    <div class="sliders" id="sizeSlider">
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // -----------------------------------------------------
            function KochSnowflake() {
                this.generator = {
                    scaleFactor: 1 / 3,
                    dTheta: [
                            0,
                            Math.PI / 3,
                            -2 * Math.PI / 3,
                            Math.PI / 3
                        ]
                };

                this.initiator = {
                    x: [],
                    y: []
                }

                this.update = function (size) {

                    h = Math.tan(DTR(60)) * (size / 2);
                    this.initiator.x[0] = -size / 2;
                    this.initiator.x[1] = 0;
                    this.initiator.x[2] = +size / 2;

                    this.initiator.y[0] = -h / 2;
                    this.initiator.y[1] = +h / 2;
                    this.initiator.y[2] = -h / 2;
                }
            }

            // -----------------------------------------------------
            function AntiKochSnowflake() {
                this.generator = {
                    scaleFactor: 1 / 3,
                    dTheta: [
                            0,
                            -Math.PI / 3,
                            2 * Math.PI / 3,
                            -Math.PI / 3
                        ]
                };

                this.initiator = {
                    x: [],
                    y: []
                }

                this.update = function (size) {

                    h = Math.tan(DTR(60)) * (size / 2);
                    this.initiator.x[0] = -size / 2;
                    this.initiator.x[1] = 0;
                    this.initiator.x[2] = +size / 2;

                    this.initiator.y[0] = -h / 2;
                    this.initiator.y[1] = +h / 2;
                    this.initiator.y[2] = -h / 2;
                }
            }

            // -----------------------------------------------------
            function GosperSnowflake() {
                this.generator = {
                    scaleFactor: 0.4472136,
                    dTheta: [
                            DTR(26.565051),
                            -Math.PI / 2,
                            Math.PI / 2
                        ]
                };

                this.initiator = {
                    x: [],
                    y: []
                }

                this.update = function (size) {
                    size /= 2;
                    angle = 0;
                    for (var i = 0; i < 6; i++) {
                        this.initiator.y[i] = size * Math.sin(angle);
                        this.initiator.x[i] = size * Math.cos(angle);
                        angle += DTR(60);
                    }
                }
            }

            // -----------------------------------------------------

            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');

            var canvasWidth = 480;
            var canvasHeight = 480;
            var currentSnowflake = new KochSnowflake();

            // -----------------------------------------------------
            $("#kochButton").click(function () {
                currentSnowflake = new KochSnowflake();
                update();
            });

            $("#antikochButton").click(function () {
                currentSnowflake = new AntiKochSnowflake();
                update();
            });

            $("#gosperButton").click(function () {
                currentSnowflake = new GosperSnowflake();
                update();
            });

            // -----------------------------------------------------
            $("#depthSlider").slider(
            {
                min: 0, max: 5, value: 0, animate: true,
                change: function (e, ui) { update(); }
            });


            $("#sizeSlider").slider(
            {
                min: 5, max: 600, step: 0.01, value: 300, animate: true,
                change: function (e, ui) { update(); }
            });

            $("#centerXSlider").slider(
            {
                min: 0, max: 480, value: 240, animate: true,
                change: function (e, ui) { update(); }
            });

            $("#centerYSlider").slider(
            {
                min: 0, max: 480, value: 240, animate: true, orientation: "vertical",
                change: function (e, ui) { update(); }
            });

            // -----------------------------------------------------

            function getDepth() {
                return $("#depthSlider").slider("value");
            }

            function getSize() {
                return $("#sizeSlider").slider("value");
            }


            function getCenterX() {
                return $("#centerXSlider").slider("value");
            }

            function getCenterY() {
                return $("#centerYSlider").slider("value"); ;
            }

            // -----------------------------------------------------

            function drawLine(x1, y1, x2, y2) {
                with (context) {
                    beginPath();
                    moveTo(getCenterX() + x1, canvasHeight - (getCenterY() + y1));
                    lineTo(getCenterX() + x2, canvasHeight - (getCenterY() + y2));
                    closePath();
                    stroke();
                }
            }

            function drawFlakeEdge(depth, x, y, theta, dist) {
                if (depth <= 0) {
                    x2 = x + dist * Math.cos(theta);
                    y2 = y + dist * Math.sin(theta);
                    drawLine(x, y, x2, y2);
                }
                else {
                    with (currentSnowflake.generator) {
                        dist = dist * scaleFactor;
                        for (var i = 0; i < dTheta.length; i++) {
                            theta = theta + dTheta[i];
                            x2 = x + dist * Math.cos(theta);
                            y2 = y + dist * Math.sin(theta);
                            drawFlakeEdge(depth - 1, x, y, theta, dist);
                            x = x2;
                            y = y2;
                        }
                    }
                }
            }

            function drawSnowFlake() {
                with (currentSnowflake.initiator) {
                    for (var i = 0; i < x.length; i++) {
                        var x1 = x[i];
                        var y1 = y[i];

                        var x2 = x[(i + 1) % x.length];
                        var y2 = y[(i + 1) % x.length];

                        var dx = x2 - x1;
                        var dy = y2 - y1;
                        var theta = Math.atan2(dy, dx);

                        length = Math.sqrt(dx * dx + dy * dy);

                        drawFlakeEdge(getDepth(), x1, y1, theta, length);
                    }
                }
            }

            function drawZero() {
                drawLine(-10, 0, 10, 0);
                drawLine(0, -10, 0, 10);
            }

            function DTR(x) {
                return x * Math.PI / 180;
            }

            function update() {
                context.clearRect(0, 0, canvasWidth, canvasHeight);
                currentSnowflake.update(getSize());
                drawZero();
                drawSnowFlake();
            }

            update();
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Snowflake</title>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />
	<style>
	*
	{
	font-family: Sans-Serif;
	}

	#workbench
	{
	width: 495px;
	height 490px;
	margin: 10px auto;
	border: 1 solid #000;
	}

	canvas
	{
	display: block;
	margin-right: 0;
	border: 1px solid #ccc;
	float: left;

	}

	#centerXSlider
	{
	width: 476px;
	margin: 0;
	}

	#centerYSlider
	{
	margin: 0 0 0 auto;
	height: 480px;
	}

	.sliders
	{
	margin: 10px auto;
	width: 480px;
	display: block;
	}
	</style>
	</head>
	<body>
	<div id="workbench">
	<canvas id='myCanvas' height="480" width="480">
	</canvas>
	<div id="centerYSlider">
	</div>
	<div id="centerXSlider">
	</div>

	<button id="kochButton">Koch</button>
	<button id="antikochButton">Anti Koch</button>
	<button id="gosperButton">Gosper</button>
	</div>
	<label class="sliders" for="depthSlider">
	Depth</label>
	<div class="sliders" id="depthSlider">
	</div>
	<label class="sliders" for="sizeSlider">
	Size</label>
	<div class="sliders" id="sizeSlider">
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"
	type="text/javascript"></script>
	<script type="text/javascript">
	$(function () {
	// -----------------------------------------------------
	function KochSnowflake() {
	this.generator = {
	scaleFactor: 1 / 3,
	dTheta: [
	0,
	Math.PI / 3,
	-2 * Math.PI / 3,
	Math.PI / 3
	]
	};

	this.initiator = {
	x: [],
	y: []
	}

	this.update = function (size) {

	h = Math.tan(DTR(60)) * (size / 2);
	this.initiator.x[0] = -size / 2;
	this.initiator.x[1] = 0;
	this.initiator.x[2] = +size / 2;

	this.initiator.y[0] = -h / 2;
	this.initiator.y[1] = +h / 2;
	this.initiator.y[2] = -h / 2;
	}
	}

	// -----------------------------------------------------
	function AntiKochSnowflake() {
	this.generator = {
	scaleFactor: 1 / 3,
	dTheta: [
	0,
	-Math.PI / 3,
	2 * Math.PI / 3,
	-Math.PI / 3
	]
	};

	this.initiator = {
	x: [],
	y: []
	}

	this.update = function (size) {

	h = Math.tan(DTR(60)) * (size / 2);
	this.initiator.x[0] = -size / 2;
	this.initiator.x[1] = 0;
	this.initiator.x[2] = +size / 2;

	this.initiator.y[0] = -h / 2;
	this.initiator.y[1] = +h / 2;
	this.initiator.y[2] = -h / 2;
	}
	}

	// -----------------------------------------------------
	function GosperSnowflake() {
	this.generator = {
	scaleFactor: 0.4472136,
	dTheta: [
	DTR(26.565051),
	-Math.PI / 2,
	Math.PI / 2
	]
	};

	this.initiator = {
	x: [],
	y: []
	}

	this.update = function (size) {
	size /= 2;
	angle = 0;
	for (var i = 0; i < 6; i++) {
	this.initiator.y[i] = size * Math.sin(angle);
	this.initiator.x[i] = size * Math.cos(angle);
	angle += DTR(60);
	}
	}
	}

	// -----------------------------------------------------

	var canvas = document.getElementById('myCanvas');
	var context = canvas.getContext('2d');

	var canvasWidth = 480;
	var canvasHeight = 480;
	var currentSnowflake = new KochSnowflake();

	// -----------------------------------------------------
	$("#kochButton").click(function () {
	currentSnowflake = new KochSnowflake();
	update();
	});

	$("#antikochButton").click(function () {
	currentSnowflake = new AntiKochSnowflake();
	update();
	});

	$("#gosperButton").click(function () {
	currentSnowflake = new GosperSnowflake();
	update();
	});

	// -----------------------------------------------------
	$("#depthSlider").slider(
	{
	min: 0, max: 5, value: 0, animate: true,
	change: function (e, ui) { update(); }
	});


	$("#sizeSlider").slider(
	{
	min: 5, max: 600, step: 0.01, value: 300, animate: true,
	change: function (e, ui) { update(); }
	});

	$("#centerXSlider").slider(
	{
	min: 0, max: 480, value: 240, animate: true,
	change: function (e, ui) { update(); }
	});

	$("#centerYSlider").slider(
	{
	min: 0, max: 480, value: 240, animate: true, orientation: "vertical",
	change: function (e, ui) { update(); }
	});

	// -----------------------------------------------------

	function getDepth() {
	return $("#depthSlider").slider("value");
	}

	function getSize() {
	return $("#sizeSlider").slider("value");
	}


	function getCenterX() {
	return $("#centerXSlider").slider("value");
	}

	function getCenterY() {
	return $("#centerYSlider").slider("value"); ;
	}

	// -----------------------------------------------------

	function drawLine(x1, y1, x2, y2) {
	with (context) {
	beginPath();
	moveTo(getCenterX() + x1, canvasHeight - (getCenterY() + y1));
	lineTo(getCenterX() + x2, canvasHeight - (getCenterY() + y2));
	closePath();
	stroke();
	}
	}

	function drawFlakeEdge(depth, x, y, theta, dist) {
	if (depth <= 0) {
	x2 = x + dist * Math.cos(theta);
	y2 = y + dist * Math.sin(theta);
	drawLine(x, y, x2, y2);
	}
	else {
	with (currentSnowflake.generator) {
	dist = dist * scaleFactor;
	for (var i = 0; i < dTheta.length; i++) {
	theta = theta + dTheta[i];
	x2 = x + dist * Math.cos(theta);
	y2 = y + dist * Math.sin(theta);
	drawFlakeEdge(depth - 1, x, y, theta, dist);
	x = x2;
	y = y2;
	}
	}
	}
	}

	function drawSnowFlake() {
	with (currentSnowflake.initiator) {
	for (var i = 0; i < x.length; i++) {
	var x1 = x[i];
	var y1 = y[i];

	var x2 = x[(i + 1) % x.length];
	var y2 = y[(i + 1) % x.length];

	var dx = x2 - x1;
	var dy = y2 - y1;
	var theta = Math.atan2(dy, dx);

	length = Math.sqrt(dx * dx + dy * dy);

	drawFlakeEdge(getDepth(), x1, y1, theta, length);
	}
	}
	}

	function drawZero() {
	drawLine(-10, 0, 10, 0);
	drawLine(0, -10, 0, 10);
	}

	function DTR(x) {
	return x * Math.PI / 180;
	}

	function update() {
	context.clearRect(0, 0, canvasWidth, canvasHeight);
	currentSnowflake.update(getSize());
	drawZero();
	drawSnowFlake();
	}

	update();
	});
	</script>
	</body>
	</html>