Livecoding my father's idea with him, using ES2015 and transitions whose duration is longer than the iteration loop in which the exit transition is a bit tricky with D3 3.*.
Built with blockbuilder.org
Last active
April 24, 2016 10:51
-
-
Save monfera/fb92e42ced98e8ff85a9470f95e5491e to your computer and use it in GitHub Desktop.
Supernovae
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; } | |
| svg { width:100%; height: 100% } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var svg = d3.select("body").append("svg") | |
| const width = 960 | |
| const height = 500 | |
| const starNumber = 300 | |
| svg.attr({width, height}) | |
| svg.style({ | |
| 'background-color': 'black' | |
| }) | |
| const randomStar = () => ({ | |
| key: Math.random(), | |
| x: width * Math.random(), | |
| y: height * Math.random(), | |
| existing: true | |
| }) | |
| const starData = Array.apply(null, Array(starNumber)).map(randomStar) | |
| window.setInterval(() => { | |
| const stars = svg.selectAll('.star').data(starData, d => d.key) | |
| stars.enter().append('circle').classed('star', true) | |
| stars.attr({ | |
| r: 1, | |
| fill: 'white', | |
| cx: d => d.x, | |
| cy: d => d.y, | |
| opacity: 1 | |
| }) | |
| const timing = Math.random() * 1000 + 250 | |
| const maxSize = Math.random() * 100 + 5 | |
| stars.exit() | |
| .filter(d => d.existing) | |
| .each(d => {d.existing = false}) | |
| .transition().duration(timing).ease('cubic-in') | |
| .attr({ | |
| r: maxSize, | |
| opacity: 0.5 | |
| }) | |
| .transition().duration(timing/4).ease('cubic-out') | |
| .attr({ | |
| r: 0, | |
| opacity: 0 | |
| }) | |
| .remove() | |
| starData.shift() | |
| starData.push(randomStar()) | |
| }, 250) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment