Copied and expanded from Nunchucks
Last active
May 25, 2016 20:00
-
-
Save DanielJWood/ea333dfbf4ac756896c313f3c640cd6b to your computer and use it in GitHub Desktop.
Spirals
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> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000; } | |
svg { width:100%; height: 100% } | |
line { | |
/*stroke: black;*/ | |
stroke-width: 5px; | |
stroke-linecap: round; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var width = 960; | |
var height = 500; | |
var scaleFactor = 0.9; | |
var svg = d3.select('body').append('svg') | |
.attr({width: width, height: height}); | |
var g = svg.append('g') | |
.attr('transform', 'translate('+(width/2)+', '+(height/2)+')') | |
.attr('id','master'); | |
function t(selection){ | |
selection.append('line') | |
.attr('x1', -100) | |
.attr('y1', 0) | |
.attr('x2', 100) | |
.attr('y2', 0); | |
} | |
var g1 = g.append('g').call(t); | |
var g2 = g1.append('g').call(t); | |
var g3 = g2.append('g').call(t); | |
var g4 = g3.append('g').call(t); | |
var g5 = g4.append('g').call(t); | |
var g6 = g5.append('g').call(t); | |
var g7 = g6.append('g').call(t); | |
var g8 = g7.append('g').call(t); | |
var g9 = g8.append('g').call(t); | |
var g10 = g9.append('g').call(t); | |
var g11 = g10.append('g').call(t); | |
var g12 = g11.append('g').call(t); | |
var g13 = g12.append('g').call(t); | |
var g14 = g13.append('g').call(t); | |
var rotation = 0; | |
var potato = 190; | |
var slowtation = 110; | |
function animate(){ | |
g1.attr('transform', 'rotate('+rotation+')'); | |
g1.selectAll('g').attr('transform', 'translate(100, 0) rotate('+rotation*2+') scale('+scaleFactor+')'); | |
g1.selectAll('line').attr('x2',(toEq(slowtation)*100)).attr('x1',(toEq(rotation)*100)).attr('stroke','hsla(' + (toEq(potato)*360) + ',100%,50%,1)'); | |
rotation += .1; | |
potato +=0.01; | |
slowtation += 0; | |
requestAnimationFrame(animate); | |
} | |
animate(); | |
function toEq (angle) { | |
return Math.sin((angle * (Math.PI / 180))); | |
}; | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment