This is something I created just for fun using d3js. It serves no actual purpose.
Last active
December 23, 2015 22:49
-
-
Save TheMcMurder/6706013 to your computer and use it in GitHub Desktop.
Reception Rotation Minimalist
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> | |
<meta charset="utf-8"> | |
<head> | |
<!--link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'--> | |
<!--link href='http://fonts.googleapis.com/css?family=Calligraffitti' type='text/css'--> | |
</head> | |
<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 graphic_config = { | |
arc_width: 2.5, | |
max: 90, | |
inner_radius: 60, | |
best: "min", | |
title_font_size: 27, | |
color_scheme: ["#E6600D","#F2A310","#768534"], | |
transition_duration: 3500, | |
fade_delay: 200, | |
start: Date.now(), | |
speed: .005, | |
font_size: 32, | |
arc_gap: 15, | |
timer_interval: 3500, | |
background_color: "#FFFFFF", | |
svg_width: 500, | |
svg_height: 500 | |
} | |
// wedding colors | |
// color_scheme: ["#E6600D","#F2A310","#768534"] | |
var window_width = $(window).width(); | |
var window_height = $(window).height(); | |
graphic_config.svg_width = window_width; | |
graphic_config.svg_height = window_height; | |
var width = graphic_config.svg_width | |
var height = graphic_config.svg_height | |
var τ = 2 * Math.PI; // http://tauday.com/tau-manifesto | |
var tau = τ; | |
var data = [ [.5], [.10], [.5], [.1], [.7], [.10], [.5], [.1], [.7] ]; | |
var fill = graphic_config.color_scheme | |
console.log (fill) | |
var arc = d3.svg.arc() | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
d3.select("svg").style("background-color", graphic_config.background_color); | |
var mastergroup =svg.append("g") | |
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") | |
var arcGroup = mastergroup.append("g") | |
// .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") | |
var centergroup = mastergroup.append("g") | |
// .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") | |
var image = centergroup.append("svg:image") | |
.attr("xlink:href", "https://dl.dropboxusercontent.com/u/38799820/G%2BJ.svg") | |
// .attr("xlink:href", "https://s3.amazonaws.com/d3js/svNumImages/dulingo.jpeg") | |
.attr("width", 90) | |
.attr("height", 90) | |
var image_height = image.attr("height") | |
var image_width = image.attr("width") | |
image.attr("transform", "translate(" + -(image_width/2) + "," + -(image_height/2) + ")") | |
.style("fill", "#5E2605") | |
// var lovey_text = centergroup.append("text") | |
// .text("G+J") | |
// .attr("font-size", graphic_config.font_size) | |
// .attr("id", "maintext") | |
// .style("fill", "#5E2605") | |
// // .attr("font-face", "Parisienne, cursive;") | |
// // .style("font-weight", 100) | |
// var lovey_text_width = lovey_text.node().getBBox().width | |
// var lovey_text_height = lovey_text.node().getBBox().height | |
// lovey_text.attr("transform", "translate(" + ((width / 2) - lovey_text_width/2) + "," + ((height / 2) + lovey_text_height/5) + ")") | |
var modified_inner = graphic_config.inner_radius | |
for (var i = 0; i < data.length; i++){ | |
data[i].innerRadius = modified_inner | |
data[i].outerRadius = modified_inner + graphic_config.arc_width | |
modified_inner += graphic_config.arc_width + graphic_config.arc_gap | |
// data[i].startAngle = (0 * tau) | |
// data[i].endAngle = (100 * tau) | |
data[i].startAngle = (Math.random() * tau) | |
data[i].endAngle = (Math.random() * tau) | |
} | |
console.log(data) | |
var drawnArcs = arcGroup.selectAll("path") | |
.data(data) | |
.enter().append("path") | |
.style("fill", function(d, i){ | |
return fill[i%fill.length] | |
}) | |
.each(function (d){ | |
console.log(d) | |
}) | |
.attr("d", arc) | |
.attr("class", function(d,i){return "arc" + i}) | |
var arc0 = arcGroup.select(".arc0") | |
var arc1 = arcGroup.select(".arc1") | |
var arc2 = arcGroup.select(".arc2") | |
var arc3 = arcGroup.select(".arc3") | |
var arc4 = arcGroup.select(".arc4") | |
var arc5 = arcGroup.select(".arc5") | |
var arc6 = arcGroup.select(".arc6") | |
var arc7 = arcGroup.select(".arc7") | |
var arc8 = arcGroup.select(".arc8") | |
var counter = 1; | |
var scalevar = 2.4 | |
mastergroup.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")" + "scale(" + scalevar + ")") | |
//start a arctween every tiner_interval | |
setInterval(function() { | |
if(counter == 0){ | |
arc0.transition() | |
.duration(graphic_config.transition_duration) | |
.delay(graphic_config.transition_duration/2) | |
.call(arcTween, Math.random() * τ, Math.random() * τ); | |
}else{ | |
arc0.transition() | |
.duration(graphic_config.transition_duration) | |
.delay(graphic_config.transition_duration/2) | |
.call(arcTween, 1 * τ, 0 * τ); | |
} | |
arc1.transition() | |
.duration(graphic_config.transition_duration) | |
.delay(graphic_config.transition_duration * .8) | |
.call(arcTween, Math.random() * τ, Math.random() * τ); | |
arc2.transition() | |
.duration(graphic_config.transition_duration) | |
.call(arcTween, Math.random() * τ, Math.random() * τ); | |
arc3.transition() | |
.duration(graphic_config.transition_duration) | |
.delay(graphic_config.transition_duration/2) | |
.call(arcTween, Math.random() * τ, Math.random() * τ); | |
arc4.transition() | |
.duration(graphic_config.transition_duration) | |
.delay(graphic_config.transition_duration * .8) | |
.call(arcTween, Math.random() * τ, Math.random() * τ); | |
arc5.transition() | |
.duration(graphic_config.transition_duration) | |
.call(arcTween, Math.random() * τ, Math.random() * τ); | |
arc6.transition() | |
.duration(graphic_config.transition_duration) | |
.delay(graphic_config.transition_duration/2) | |
.call(arcTween, Math.random() * τ, Math.random() * τ); | |
arc7.transition() | |
.duration(graphic_config.transition_duration) | |
.delay(graphic_config.transition_duration * .8) | |
.call(arcTween, Math.random() * τ, Math.random() * τ); | |
arc8.transition() | |
.duration(graphic_config.transition_duration) | |
.call(arcTween, Math.random() * τ, Math.random() * τ); | |
counter += 1; | |
if (counter > 4){ | |
counter = 0; | |
} | |
}, graphic_config.timer_interval); | |
// Creates a tween on the specified transition's "d" attribute, transitioning | |
// any selected arcs from their current angle to the specified new angle. | |
function arcTween(transition, newAngle, newAngle2) { | |
transition.attrTween("d", function(d) { | |
var interpolate = d3.interpolate(d.endAngle, newAngle); | |
var interpolate2 = d3.interpolate(d.startAngle, newAngle2) | |
return function(t) { | |
d.endAngle = interpolate(t); | |
d.startAngle = interpolate2(t) | |
return arc(d); | |
}; | |
}); | |
} | |
//rotates the group. Allows for constant circling | |
// d3.timer(function() { | |
// var angle = (Date.now() - graphic_config.start) * graphic_config.speed, | |
// transform = function(d) { return "rotate(" + angle + ")"; }; | |
// arcGroup.selectAll("path").attr("transform", transform); | |
// arcGroup.attr("transform", transform); // frame of reference | |
// }); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment