ElemarJR/sierpinski_chaos.htm

## sierpinski_chaos.htm
<!DOCTYPE html>
<html>
<head>
    <title>Sierpinksi Chaos</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <style>
        *
        {
            margin: 0;
            padding: 0;
        }
        html, body
        {
            height: 100%;
            width: 100%;
        }
        canvas
        {
            display:block;
            float:left;
        }
    </style>
</head>
<body>
    <canvas id='target' height="480" width="480">
    </canvas>
    <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 () {
            var points = [
                { x: 240, y: 450 },
                { x: 40, y: 40 },
                { x: 440, y: 40 }
            ];

            // -----------------------------------------------------
            var canvas = $('#target');
            var context = canvas.get(0).getContext('2d');
            context.fillStyle = "#ccc";

            var moving = 0;


            var canvasWidth = canvas.width;
            var canvasHeight = canvas.height;

            $(window).resize(resizeCanvas);

            function resizeCanvas() {
                canvas.attr("width", $(window).get(0).innerWidth);
                canvas.attr("height", $(window).get(0).innerHeight);
                canvasWidth = canvas.width();
                canvasHeight = canvas.height();

                points[0].x = canvasWidth / 2;
                points[0].y = canvasHeight - 40;

                points[1].x = 40;
                points[1].y = 40;

                points[2].x = canvasWidth - 40;
                points[2].y = 40;
                update();
            };

            resizeCanvas();

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

            $("#target").click(function (e) {
                var nx = e.pageX;
                var ny = canvasHeight - e.pageY;

                var current = 10;

                for (var i = 0; i < points.length; i++) {
                    var d = Math.sqrt(
                           Math.pow((nx - points[i].x), 2) +
                           Math.pow((ny - points[i].y), 2)
                           );

                    if (d < current) {
                        current = d;
                        moving = i;
                    }
                }

                if (current == 10) {
                    points[moving].x = nx;
                    points[moving].y = ny;
                    update();
                }
            });
            // -----------------------------------------------------

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

            function drawMarker(x, y) {
                drawLine(x - 10, y, x + 10, y);
                drawLine(x, y - 10, x, y + 10);
            }

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

            var currentX = 0;
            var currentY = 0;
            function update() {
                context.clearRect(0, 0, canvasWidth, canvasHeight);
                currentX = Math.random() * canvasWidth;
                currentY = Math.random() * canvasHeight;
                playGame();
            }
            update();

            function playGame() {

                context.strokeStyle = "#ccc";
                for (i = 0; i < 100; i++) {
                    var anchor = Math.floor(points.length * Math.abs(Math.random()));
                    currentX = (currentX + points[anchor].x) / 2;
                    currentY = (currentY + points[anchor].y) / 2;
                    drawLine(currentX, currentY, currentX + 1, currentY);
                }

                for (var i = 0; i < points.length; i++) {
                    context.strokeStyle = i == moving ? "#f00" : "#000";
                    drawMarker(points[i].x, points[i].y);
                }
                setTimeout(playGame, 33);
            }
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sierpinksi Chaos</title>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />
	<style>
	*
	{
	margin: 0;
	padding: 0;
	}
	html, body
	{
	height: 100%;
	width: 100%;
	}
	canvas
	{
	display:block;
	float:left;
	}
	</style>
	</head>
	<body>
	<canvas id='target' height="480" width="480">
	</canvas>
	<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 () {
	var points = [
	{ x: 240, y: 450 },
	{ x: 40, y: 40 },
	{ x: 440, y: 40 }
	];

	// -----------------------------------------------------
	var canvas = $('#target');
	var context = canvas.get(0).getContext('2d');
	context.fillStyle = "#ccc";

	var moving = 0;


	var canvasWidth = canvas.width;
	var canvasHeight = canvas.height;

	$(window).resize(resizeCanvas);

	function resizeCanvas() {
	canvas.attr("width", $(window).get(0).innerWidth);
	canvas.attr("height", $(window).get(0).innerHeight);
	canvasWidth = canvas.width();
	canvasHeight = canvas.height();

	points[0].x = canvasWidth / 2;
	points[0].y = canvasHeight - 40;

	points[1].x = 40;
	points[1].y = 40;

	points[2].x = canvasWidth - 40;
	points[2].y = 40;
	update();
	};

	resizeCanvas();

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

	$("#target").click(function (e) {
	var nx = e.pageX;
	var ny = canvasHeight - e.pageY;

	var current = 10;

	for (var i = 0; i < points.length; i++) {
	var d = Math.sqrt(
	Math.pow((nx - points[i].x), 2) +
	Math.pow((ny - points[i].y), 2)
	);

	if (d < current) {
	current = d;
	moving = i;
	}
	}

	if (current == 10) {
	points[moving].x = nx;
	points[moving].y = ny;
	update();
	}
	});
	// -----------------------------------------------------

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

	function drawMarker(x, y) {
	drawLine(x - 10, y, x + 10, y);
	drawLine(x, y - 10, x, y + 10);
	}

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

	var currentX = 0;
	var currentY = 0;
	function update() {
	context.clearRect(0, 0, canvasWidth, canvasHeight);
	currentX = Math.random() * canvasWidth;
	currentY = Math.random() * canvasHeight;
	playGame();
	}
	update();

	function playGame() {

	context.strokeStyle = "#ccc";
	for (i = 0; i < 100; i++) {
	var anchor = Math.floor(points.length * Math.abs(Math.random()));
	currentX = (currentX + points[anchor].x) / 2;
	currentY = (currentY + points[anchor].y) / 2;
	drawLine(currentX, currentY, currentX + 1, currentY);
	}

	for (var i = 0; i < points.length; i++) {
	context.strokeStyle = i == moving ? "#f00" : "#000";
	drawMarker(points[i].x, points[i].y);
	}
	setTimeout(playGame, 33);
	}
	});
	</script>
	</body>
	</html>