saifuddin778/README.md

## README.md

      
    Raw
  

              README.md
            
          
    breathing triangles..

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

	.rect {
		stroke-width: 2;
		stroke: rgba(242, 120, 75, 0.4);
		fill: white;
	}
</style>
<body>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
		function get_middle_point(p1, p2) {
			return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
		}

		function get_triangles(points) {
			var ab = get_middle_point(points[0], points[1]);
			var bc = get_middle_point(points[1], points[2]);
			var ac = get_middle_point(points[0], points[2]);
			return [
				[ab, bc, ac]
			]
		}

		function get_polygon_points(points) {
			var pts = "";
			for (var i = 0; i < points.length; i++) {
				for (var j = 0; j < points[i].length; j++) {
					if (i < points.length - 1) {
						pts += points[i][j] + ",";
					} else {
						pts += points[i][j] + " ";
					}
				}
				pts += " "
			}
			return pts;
		}

		var width = 500;
		var height = 500;
		var svg = d3.select("body")
			.append("svg")
			.attr("id", "particles_svg")
			.attr("width", width).attr("height", height);

		var spoints = [
			[
				[width * 0.1, height * 0.9],
				[width * 0.5, height * 0.1],
				[width * 0.9, height * 0.9]
			]
		];

		for (var i = 0; i < spoints.length; i++) {
			append_(spoints[i]);
			var triangles = get_triangles(spoints[i]);
			for (j = 0; j < triangles.length; j++) {
				append_(triangles[j]);
				spoints.push(triangles[j]);
			}
			if (i == 50) {
				break;
			}
		}

		var n = 0;
		setInterval(function() {
			if (n % 2 == 0) {
				d3.selectAll('.rect').transition().duration(2000).style('stroke-width', 50);
			} else {
				d3.selectAll('.rect').transition().duration(1000).style('stroke-width', 1);
			}
			n += 1;
		}, 1000);

		function append_(ppoints) {
			var pts_ = get_polygon_points(ppoints);
			svg.append("polygon").attr("class", "rect").attr("points", pts_);
			return;
		}
	</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	text-align: center;
	}

	.rect {
	stroke-width: 2;
	stroke: rgba(242, 120, 75, 0.4);
	fill: white;
	}
	</style>
	<body>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
	function get_middle_point(p1, p2) {
	return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
	}

	function get_triangles(points) {
	var ab = get_middle_point(points[0], points[1]);
	var bc = get_middle_point(points[1], points[2]);
	var ac = get_middle_point(points[0], points[2]);
	return [
	[ab, bc, ac]
	]
	}

	function get_polygon_points(points) {
	var pts = "";
	for (var i = 0; i < points.length; i++) {
	for (var j = 0; j < points[i].length; j++) {
	if (i < points.length - 1) {
	pts += points[i][j] + ",";
	} else {
	pts += points[i][j] + " ";
	}
	}
	pts += " "
	}
	return pts;
	}

	var width = 500;
	var height = 500;
	var svg = d3.select("body")
	.append("svg")
	.attr("id", "particles_svg")
	.attr("width", width).attr("height", height);

	var spoints = [
	[
	[width * 0.1, height * 0.9],
	[width * 0.5, height * 0.1],
	[width * 0.9, height * 0.9]
	]
	];

	for (var i = 0; i < spoints.length; i++) {
	append_(spoints[i]);
	var triangles = get_triangles(spoints[i]);
	for (j = 0; j < triangles.length; j++) {
	append_(triangles[j]);
	spoints.push(triangles[j]);
	}
	if (i == 50) {
	break;
	}
	}

	var n = 0;
	setInterval(function() {
	if (n % 2 == 0) {
	d3.selectAll('.rect').transition().duration(2000).style('stroke-width', 50);
	} else {
	d3.selectAll('.rect').transition().duration(1000).style('stroke-width', 1);
	}
	n += 1;
	}, 1000);

	function append_(ppoints) {
	var pts_ = get_polygon_points(ppoints);
	svg.append("polygon").attr("class", "rect").attr("points", pts_);
	return;
	}
	</script>
	</body>