saifuddin778/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A fractal inspired by the idea of having child circles surround the parent circle in each quadrant of the square.
This design follows given equation to determine the depth you want to achieve:

 where n is the factor of depth.

  
## index.html
<!DOCTYPE HTML>
<meta charset="utf-8">
<style>
	body {
		text-align: center;
		font-family: monospace !important;
	}

	#plot {
		background: rgba(255, 255, 131, 0.6);
		padding: 10px;
	}

	circle {
		fill: rgba(0, 128, 0, 0.3);
		stroke: green;
		stroke-width: 0.6;
	}

	polygon {
		fill: none;
		stroke: rgba(0, 128, 0, 0.3);
		stroke-width: 0;
	}
</style>

<body>
	<div id="plot"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
		var width = 500;
		var height = 480;

		function append_circle(p) {
			var min_w = p[0][0];
			var max_w = p[3][0];

			var min_h = p[1][1];
			var max_h = p[0][1];

			var del_w = max_w - min_w;
			var del_h = max_h - min_h;

			var m_w = del_w / 3;
			var m_h = del_h / 3;

			//the children
			var children = [
				[
					[min_w, max_h],
					[min_w, max_h - m_h],
					[min_w + m_w, max_h - m_h],
					[min_w + m_w, max_h],
				],

				[
					[min_w + 2 * m_w, max_h],
					[min_w + 2 * m_w, max_h - m_h],
					[min_w + 3 * m_w, max_h - m_h],
					[min_w + 3 * m_w, max_h],

				],
				[
					[min_w, max_h - 2 * m_h],
					[min_w, max_h - 3 * m_h],
					[min_w + m_w, max_h - 3 * m_h],
					[min_w + m_w, max_h - 2 * m_h],
				],
				[
					[min_w + 2 * m_w, max_h - 2 * m_h],
					[min_w + 2 * m_w, max_h - 3 * m_h],
					[min_w + 3 * m_w, max_h - 3 * m_h],
					[min_w + 3 * m_w, max_h - 2 * m_h],

				],
			];

			//add that sweet circle
			space.append("circle")
				.attr("cx", (min_w + max_w) / 2)
				.attr("cy", (min_h + max_h) / 2)
				.attr("r", m_w / 1.5);

			return children;
		}

		var space = d3.select("#plot")
			.append("svg")
			.attr("width", width)
			.attr("height", height)
			.append("g");

		var spaces = [
			[
				[0, height],
				[0, 0],
				[width, 0],
				[width, height]
			]
		];

		for (var i = 0; i < spaces.length; i++) {
			children = append_circle(spaces[i]);
			for (var j = 0; j < children.length; j++) {
				spaces.push(children[j]);
			}

			//4, 16+4, 64+16+4, 256+64+16+4,
			if (i == 256 + 64 + 16 + 4) {
				break;
			}
		}
	</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE HTML>
	<meta charset="utf-8">
	<style>
	body {
	text-align: center;
	font-family: monospace !important;
	}

	#plot {
	background: rgba(255, 255, 131, 0.6);
	padding: 10px;
	}

	circle {
	fill: rgba(0, 128, 0, 0.3);
	stroke: green;
	stroke-width: 0.6;
	}

	polygon {
	fill: none;
	stroke: rgba(0, 128, 0, 0.3);
	stroke-width: 0;
	}
	</style>

	<body>
	<div id="plot"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
	var width = 500;
	var height = 480;

	function append_circle(p) {
	var min_w = p[0][0];
	var max_w = p[3][0];

	var min_h = p[1][1];
	var max_h = p[0][1];

	var del_w = max_w - min_w;
	var del_h = max_h - min_h;

	var m_w = del_w / 3;
	var m_h = del_h / 3;

	//the children
	var children = [
	[
	[min_w, max_h],
	[min_w, max_h - m_h],
	[min_w + m_w, max_h - m_h],
	[min_w + m_w, max_h],
	],

	[
	[min_w + 2 * m_w, max_h],
	[min_w + 2 * m_w, max_h - m_h],
	[min_w + 3 * m_w, max_h - m_h],
	[min_w + 3 * m_w, max_h],

	],
	[
	[min_w, max_h - 2 * m_h],
	[min_w, max_h - 3 * m_h],
	[min_w + m_w, max_h - 3 * m_h],
	[min_w + m_w, max_h - 2 * m_h],
	],
	[
	[min_w + 2 * m_w, max_h - 2 * m_h],
	[min_w + 2 * m_w, max_h - 3 * m_h],
	[min_w + 3 * m_w, max_h - 3 * m_h],
	[min_w + 3 * m_w, max_h - 2 * m_h],

	],
	];

	//add that sweet circle
	space.append("circle")
	.attr("cx", (min_w + max_w) / 2)
	.attr("cy", (min_h + max_h) / 2)
	.attr("r", m_w / 1.5);

	return children;
	}

	var space = d3.select("#plot")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g");

	var spaces = [
	[
	[0, height],
	[0, 0],
	[width, 0],
	[width, height]
	]
	];

	for (var i = 0; i < spaces.length; i++) {
	children = append_circle(spaces[i]);
	for (var j = 0; j < children.length; j++) {
	spaces.push(children[j]);
	}

	//4, 16+4, 64+16+4, 256+64+16+4,
	if (i == 256 + 64 + 16 + 4) {
	break;
	}
	}
	</script>
	</body>