Simulation of an orbitting body using the D3 force-directed physics engine.
forked from vasturiano's block: Particle Orbit
| license: mit |
Simulation of an orbitting body using the D3 force-directed physics engine.
forked from vasturiano's block: Particle Orbit
| <head> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.7.0/d3.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <svg id="canvas"> | |
| <g id="trail"></g> | |
| <circle id="center" r="20" cx="0" cy="0"></circle> | |
| <circle id="particle" r="8"></circle> | |
| </svg> | |
| <script> | |
| const attractionForce = 0.001; // Regulates orbitting velocity | |
| const width = window.innerWidth, height = window.innerHeight; | |
| d3.select('#canvas') | |
| .attr('width', width) | |
| .attr('height', height) | |
| .attr('viewBox', `${-width/2} ${-height/2} ${width} ${height}`); | |
| var particle = { domCtx: d3.select('#particle') }; | |
| d3.forceSimulation() | |
| .alphaDecay(0) | |
| .velocityDecay(0) | |
| .nodes([particle]) | |
| // Pull towards center with weak force | |
| .force("centerX", d3.forceX().strength(attractionForce)) | |
| .force("centerY", d3.forceY().strength(attractionForce)) | |
| .on("tick", () => { | |
| particle.domCtx | |
| .datum(particle) | |
| .attr('cx', d => d.x) | |
| .attr('cy', d => d.y) | |
| }); | |
| // Add orbit trail | |
| d3.timer(() => { | |
| d3.select('#trail').append('circle') | |
| .attr('r', 1.5) | |
| .attr('cx', particle.x) | |
| .attr('cy', particle.y) | |
| .transition().duration(3500) | |
| .style('opacity', 0) | |
| .remove(); | |
| }); | |
| // Spin it | |
| particle.y = -height / 3; | |
| particle.vx = 0.55 * height * Math.sqrt(attractionForce); | |
| </script> | |
| </body> |
| �PNG | |