Last active
August 25, 2017 05:57
-
-
Save mojaie/a3d0887900032507f304daf53721347b to your computer and use it in GitHub Desktop.
d3-force as a physics engine
This file contains hidden or 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
| license: mit |
This file contains hidden or 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> | |
| <title>Buffer overflow</title> | |
| <meta charset="utf-8"/> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <input type="button" id="start" value="Start"/> | |
| <div class="container-fluid"> | |
| <svg id="flame" width="500" height="500" preserveAspectRatio="xMidYMid meet" pointer-events="all" viewBox="0 0 300 300"> | |
| <path stroke="#e5e5e5" id="svg_4" d="m19.81535,151.90297c49.03433,25.7502 30.86076,65.92051 56.57807,84.46065c25.7173,18.54014 126.52913,17.51014 151.21774,0c24.68861,-17.51014 -5.14346,-50.47039 48.34853,-83.43064c10.28692,-38.11029 21.60253,-92.70072 16.45907,-140.08108c-44.91955,19.57015 -215.59672,29.87023 -284.69055,-5.66504c-11.48707,32.44525 6.60077,112.78587 12.08713,144.71612z" stroke-width="5" fill="#e2ffff"/> | |
| <g id="field"></g> | |
| </svg> | |
| </div> | |
| <script src="main.js"></script> |
This file contains hidden or 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
| const data = []; | |
| const simulation = d3.forceSimulation(data) | |
| .force('collide',d3.forceCollide().radius(10)) | |
| .force('x', d3.forceX(150).strength(0.01)) | |
| .force('y', d3.forceY(200).strength(0.1)) | |
| .alphaTarget(0.1) | |
| .on('tick', tick); | |
| function updateObjects() { | |
| const nodes = d3.select('#field').selectAll('.object') | |
| .data(data); | |
| nodes.exit().remove(); | |
| const entered = nodes.enter().append('g') | |
| .attr('class', 'object') | |
| .on("click", () => {}); | |
| entered.append('text') | |
| .attr('class', 'symbol') | |
| .attr('x', 0) | |
| .attr('y', 0) | |
| .attr('font-size', 20) | |
| .attr('text-anchor', 'middle') | |
| .text('💩'); | |
| simulation.nodes(data); | |
| } | |
| function tick() { | |
| d3.select('#field').selectAll('.object') | |
| .attr('transform', d => `translate(${d.x}, ${d.y})`); | |
| } | |
| d3.select("#start").on("click", function() { | |
| d3.select(this).attr('disabled','disabled'); | |
| const interval = d3.interval(() => { | |
| const x = 150 + ((Math.random() - 0.5) * 50); | |
| data.push({vx: 0, vy: 0, x: x, y: 100}); | |
| updateObjects(); | |
| if (data.length > 100) interval.stop(); | |
| }, 200); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment