szledan/fractal.html

## fractal.html
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
/* LICENSE: BSD 2
 * Copyright 2017 @szledan, @dbatyai
 */

function Point(x, y) {
	return {"x" : x, "y" : y};
}

function copyPoint(p) {
	return {"x" : p.x, "y" : p.y};
}

function plotPoint(p)
{
	ctx.beginPath();
	ctx.arc(p.x, p.y, 1, 0, 2 * Math.PI);
	ctx.fill();
}

function movePoint(p, baseP, range)
{
  	p.x += (baseP.x - p.x) / range;
   	p.y += (baseP.y - p.y) / range;
    return p;
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var N = 3;
var C = 100000;
var R = 240;
var RANGE = 2.0;

var basePoints = [];
var scale = 2 * Math.PI / N;
for (var i = 0; i < N; ++i) {
	var alpha = i * scale;
    basePoints[i] = Point(R * Math.cos(alpha) + 250, R * Math.sin(alpha) + 250);
    plotPoint(basePoints[i]);
}


p = copyPoint(basePoints[0]);
for (var i = 0; i < C; ++i) {
	var r = Math.floor(Math.random() * N);
    p = movePoint(p, basePoints[r], RANGE);
    plotPoint(p);
}

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
	Your browser does not support the HTML5 canvas tag.</canvas>

	<script>
	/* LICENSE: BSD 2
	* Copyright 2017 @szledan, @dbatyai
	*/

	function Point(x, y) {
	return {"x" : x, "y" : y};
	}

	function copyPoint(p) {
	return {"x" : p.x, "y" : p.y};
	}

	function plotPoint(p)
	{
	ctx.beginPath();
	ctx.arc(p.x, p.y, 1, 0, 2 * Math.PI);
	ctx.fill();
	}

	function movePoint(p, baseP, range)
	{
	p.x += (baseP.x - p.x) / range;
	p.y += (baseP.y - p.y) / range;
	return p;
	}

	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");

	var N = 3;
	var C = 100000;
	var R = 240;
	var RANGE = 2.0;

	var basePoints = [];
	var scale = 2 * Math.PI / N;
	for (var i = 0; i < N; ++i) {
	var alpha = i * scale;
	basePoints[i] = Point(R * Math.cos(alpha) + 250, R * Math.sin(alpha) + 250);
	plotPoint(basePoints[i]);
	}


	p = copyPoint(basePoints[0]);
	for (var i = 0; i < C; ++i) {
	var r = Math.floor(Math.random() * N);
	p = movePoint(p, basePoints[r], RANGE);
	plotPoint(p);
	}

	</script>

	</body>
	</html>