This is something I created just for fun using d3js. It serves no actual purpose.
Last active
December 30, 2015 16:09
-
-
Save TheMcMurder/7853122 to your computer and use it in GitHub Desktop.
Moving Circles - Just for fun
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
<script> | |
var width = $(window).width(); | |
var height = $(window).height(); | |
var radius = 45 | |
var num_of_colors = 20 | |
var in_each_row = (Math.floor(width/(radius*2))) | |
var num_of_rows = (Math.floor(height/(radius*2))) | |
var num_of_circles = in_each_row * num_of_rows | |
// console.log( "there are " + in_each_row + " in each row") | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
var color = d3.scale.category20(); | |
var dataset = [] | |
for (var i =0; i < num_of_circles; i++){ | |
dataset.push(15) | |
} | |
var all_circles = svg.selectAll("circle") | |
.data(dataset) | |
all_circles.enter() | |
.append("circle") | |
.attr("cx", function(d, i){ | |
return (i%in_each_row+.5)*(radius *2) | |
}) | |
.attr("cy", function(d, i){ | |
return (Math.floor(i/in_each_row) + .5)*(radius *2) | |
}) | |
.attr("id", function(d, i){ | |
return "circle_" + i; | |
}) | |
.attr("r", radius) | |
.attr("opacity", ".5") | |
.attr("fill", function(d, i){ | |
return color(i%num_of_colors) | |
}) | |
var interval = setInterval(selectRandom, 500) | |
function selectRandom(){ | |
var random_number = Math.floor(Math.random()*num_of_circles); | |
var options = Math.round(Math.random()*3) | |
var selection = svg.select("#circle_" + random_number) | |
var selection_2 | |
var selection_temp; | |
var movements = false; | |
// selection.transition().duration(100).attr("fill", "white") | |
// .transition().duration(1400).attr("fill", "black") | |
if (random_number%in_each_row == 0){ | |
//left edge | |
if (options == 0 && random_number > in_each_row){//top | |
selection_2 = svg.select("#circle_" + (random_number - in_each_row)) | |
// .transition().duration(500).delay(1500).attr("fill", "white") | |
movements = true; | |
}else if (options == 1){//right | |
selection_2 = svg.select("#circle_" + (random_number + 1)) | |
movements = true; | |
}else if (options == 2 && (Math.ceil(random_number/in_each_row) < num_of_rows)){//bottom | |
selection_2 = svg.select("#circle_" + (random_number + in_each_row)) | |
movements = true; | |
} | |
}else if((random_number +1)%(in_each_row) == 0){ | |
//right edge | |
if (options == 0 && random_number > in_each_row){//top | |
selection_2 = svg.select("#circle_" + (random_number - in_each_row)) | |
// .transition().duration(500).delay(1500).attr("fill", "white") | |
movements = true; | |
}else if (options == 1){//left | |
selection_2 = svg.select("#circle_" + (random_number - 1)) | |
movements = true; | |
}else if (options == 2 && (Math.ceil(random_number/in_each_row) < num_of_rows)){//bottom | |
selection_2 = svg.select("#circle_" + (random_number + in_each_row)) | |
movements = true; | |
} | |
}else{ | |
//middle | |
options = Math.round(Math.random()*4) | |
if (options == 0 && random_number > in_each_row){//top | |
selection_2 = svg.select("#circle_" + (random_number - in_each_row)) | |
// .transition().duration(500).delay(1500).attr("fill", "white") | |
movements = true; | |
}else if (options == 1){//left | |
selection_2 = svg.select("#circle_" + (random_number - 1)) | |
movements = true; | |
}else if (options == 2){//right | |
selection_2 = svg.select("#circle_" + (random_number + 1)) | |
movements = true; | |
}else if (options == 3 && (Math.ceil(random_number/in_each_row) < num_of_rows)){//bottom | |
selection_2 = svg.select("#circle_" + (random_number + in_each_row)) | |
movements = true; | |
} | |
} | |
if(movements){ | |
//movements | |
if (selection != null && selection_2 != null){ | |
var TRANS = svg.transition().duration(250) | |
selection_temp = selection; | |
TRANS.select("#" + selection.attr("id")) | |
.attr("cx", selection_2.attr("cx")) | |
.attr("cy", selection_2.attr("cy")) | |
.attr("id", selection_2.attr("id")) | |
TRANS.select("#" + selection_2.attr("id")) | |
.attr("cx", selection_temp.attr("cx")) | |
.attr("cy", selection_temp.attr("cy")) | |
.attr("id", selection_temp.attr("id")) | |
} | |
} | |
} | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment