Skip to content

Instantly share code, notes, and snippets.

@TheMcMurder

TheMcMurder/index.html

Last active December 23, 2015 22:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TheMcMurder/6706013 to your computer and use it in GitHub Desktop.
Save TheMcMurder/6706013 to your computer and use it in GitHub Desktop.
Download ZIP
Reception Rotation Minimalist
Raw
readme.md

This is something I created just for fun using d3js. It serves no actual purpose.

Raw
index.html
<!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