saifuddin778/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This animation demonstrates the construction of a square spiral. The logic is to add a system of kicks: at each vertex of the 4 sided growing spiral, increment the number of nodes to be added in the following vertex.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

</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 pr_(obj) {
			var result;
			var count = 0;
			for (var prop in obj) {
				if (Math.random() < 1 / ++count) {
					result = prop;
				}
			}
			return result;
		}

		function gc(c1, c2, n_) {
			var colors_ = d3.scale.linear().interpolate(d3.interpolateHcl).domain([0, n_]).range([c1, c2]);
			return colors_;
		}

		var n_ = 901; //particle cont
		var margin = {
			top: 30,
			right: 60,
			bottom: 60,
			left: 30
		};
		var width = 1024 - margin.left - margin.right;
		var height = (550 - 10) - margin.top - margin.bottom;
		var particles = [];
		colors = gc('violet', 'lightblue', n_);

		var svg = d3.select("body")
			.append("svg")
			.attr("id", "particles_svg")
			.attr("width", width).attr("height", height)
			.append("g")
			.attr("transform", "translate(0, 0)");

		//generate particles as if they came available
		for (var i_parts = 0; i_parts <= n_; i_parts++) {
			var particle = {
				color: colors(i_parts),
				width: 9,
				height: 9,
				x: width / 2,
				y: height / 2,
				id: i_parts,
			};
			particles.push(particle);
		}

		//now move 'from' center
		var nodes = svg.selectAll(".node").data(particles)
			.enter().append("g")
			.attr("class", "node")
			.attr("transform", function(d) {
				return "translate(" + d.x + "," + d.y + ")";
			})
			.attr("x", function(d) {
				return d.x
			})
			.attr("y", function(d) {
				return d.y
			})
			.attr("group", function(d) {
				return d.group;
			});

		nodes.append("rect")
			.style("fill", function(d) {
				return d.color;
			})
			.attr("id", function(d) {
				return d.id;
			})
			.attr("width", function(d) {
				return d.width;
			})
			.attr("height", function(d) {
				return d.height;
			});

		var y_ = d3.selectAll(".node")[0];
		var n = 10;
		var positions = movement_square_spiral(width / 2, height / 2, n);
		for (var q = 0; q < y_.length; q++) {
			var position = positions[q];
			d3.select(y_[q])
				.transition()
				.attr("transform", "translate(" + position.x + "," + position.y + ")")
				.ease("linear")
				.delay(q * 40);
		}

		function movement_square_spiral(x, y, n) {
			//generate square spiral coordinates based on the system of kicks
			var kick = 1;
			var positions = [];
			var cycles = 41;
			for (var i = 0; i <= cycles; i++) {
				var cut_ = i % 4;
				if (i == 0) {
					positions.push({
						x: x,
						y: y
					});
				}
				if (cut_ == 0) {
					for (var u_ = 0; u_ < kick; u_++) {
						var x = x - n;
						var y = y;
						positions.push({
							x: x,
							y: y
						});
					}
				}
				if (cut_ == 1) {
					for (var u_ = 0; u_ < kick; u_++) {
						var x = x;
						var y = y + n;
						positions.push({
							x: x,
							y: y
						});
					}
				}
				if (cut_ == 2) {
					for (var u_ = 0; u_ < kick; u_++) {
						var x = x + n;
						var y = y;
						positions.push({
							x: x,
							y: y
						});
					}
				}
				if (cut_ == 3) {
					for (var u_ = 0; u_ < kick; u_++) {
						var x = x;
						var y = y - n;
						positions.push({
							x: x,
							y: y
						});
					}
				}
				kick += 1;
			}
			return positions;
		}
	</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	</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 pr_(obj) {
	var result;
	var count = 0;
	for (var prop in obj) {
	if (Math.random() < 1 / ++count) {
	result = prop;
	}
	}
	return result;
	}

	function gc(c1, c2, n_) {
	var colors_ = d3.scale.linear().interpolate(d3.interpolateHcl).domain([0, n_]).range([c1, c2]);
	return colors_;
	}

	var n_ = 901; //particle cont
	var margin = {
	top: 30,
	right: 60,
	bottom: 60,
	left: 30
	};
	var width = 1024 - margin.left - margin.right;
	var height = (550 - 10) - margin.top - margin.bottom;
	var particles = [];
	colors = gc('violet', 'lightblue', n_);

	var svg = d3.select("body")
	.append("svg")
	.attr("id", "particles_svg")
	.attr("width", width).attr("height", height)
	.append("g")
	.attr("transform", "translate(0, 0)");

	//generate particles as if they came available
	for (var i_parts = 0; i_parts <= n_; i_parts++) {
	var particle = {
	color: colors(i_parts),
	width: 9,
	height: 9,
	x: width / 2,
	y: height / 2,
	id: i_parts,
	};
	particles.push(particle);
	}

	//now move 'from' center
	var nodes = svg.selectAll(".node").data(particles)
	.enter().append("g")
	.attr("class", "node")
	.attr("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")";
	})
	.attr("x", function(d) {
	return d.x
	})
	.attr("y", function(d) {
	return d.y
	})
	.attr("group", function(d) {
	return d.group;
	});

	nodes.append("rect")
	.style("fill", function(d) {
	return d.color;
	})
	.attr("id", function(d) {
	return d.id;
	})
	.attr("width", function(d) {
	return d.width;
	})
	.attr("height", function(d) {
	return d.height;
	});

	var y_ = d3.selectAll(".node")[0];
	var n = 10;
	var positions = movement_square_spiral(width / 2, height / 2, n);
	for (var q = 0; q < y_.length; q++) {
	var position = positions[q];
	d3.select(y_[q])
	.transition()
	.attr("transform", "translate(" + position.x + "," + position.y + ")")
	.ease("linear")
	.delay(q * 40);
	}

	function movement_square_spiral(x, y, n) {
	//generate square spiral coordinates based on the system of kicks
	var kick = 1;
	var positions = [];
	var cycles = 41;
	for (var i = 0; i <= cycles; i++) {
	var cut_ = i % 4;
	if (i == 0) {
	positions.push({
	x: x,
	y: y
	});
	}
	if (cut_ == 0) {
	for (var u_ = 0; u_ < kick; u_++) {
	var x = x - n;
	var y = y;
	positions.push({
	x: x,
	y: y
	});
	}
	}
	if (cut_ == 1) {
	for (var u_ = 0; u_ < kick; u_++) {
	var x = x;
	var y = y + n;
	positions.push({
	x: x,
	y: y
	});
	}
	}
	if (cut_ == 2) {
	for (var u_ = 0; u_ < kick; u_++) {
	var x = x + n;
	var y = y;
	positions.push({
	x: x,
	y: y
	});
	}
	}
	if (cut_ == 3) {
	for (var u_ = 0; u_ < kick; u_++) {
	var x = x;
	var y = y - n;
	positions.push({
	x: x,
	y: y
	});
	}
	}
	kick += 1;
	}
	return positions;
	}
	</script>
	</body>