javascript - Attract one set of bodies to another set of bodies, but not to other bodies in the same set -


i'm looking implement planet-like system, whereby have large, mostly-fixed objects have lots of smaller objects around them. idea smaller objects orbit around larger objects, change of larger objects they're orbiting around. i'm attempting use newtonian behaviour type on smaller objects, it's making smaller objects try orbit around everything, rather large objects. there way define behaviour on set of objects (i have them in array) , have them only attracted objects in set of objects?

to give visual idea, how looks (https://i.imgur.com/dqizsfo.png):

i want orange objects orbit blue objects, don't want orange or blue objects attracted other orange or blue objects respectively. possible physicsjs?

here current progress. view script in action, view on codepen):

var magnets = [] var particles = []  function rand (from, to) {   return math.floor(math.random() * to) + }  function generatemagnet (world, renderer) {   var magnet = physics.body('circle', {     x: rand(0, renderer.width),     y: rand(0, renderer.height),     radius: 50,     mass: 2,     vx: 0.001,     vy: 0.001,     treatment: 'static',     styles: {       fillstyle: '#6c71c4'     }   })    magnets.push(magnet)   world.add(magnet) }  function generateparticle (world, renderer) {   var particle = physics.body('circle', {     x: rand(0, renderer.width),     y: rand(0, renderer.height),     vx: rand(-100, 100) / 1000,     vy: rand(-100, 100) / 1000,     mass: 1,     radius: 5,     styles: {       fillstyle: '#cb4b16'     }   })    particles.push(particle)   world.add(particle) }  physics(function (world) {   // bounds of window   var el = document.getelementbyid('mattercontainer')    var viewportbounds = physics.aabb(0, 0, el.scrollwidth, el.scrollheight)   var edgebounce   var renderer    // create renderer   renderer = physics.renderer('canvas', {     'el': el   })   el.childnodes[0].style.left = 0    // add renderer   world.add(renderer)   // render on each step   world.on('step', function () {     world.render()   })    // varrain objects these bounds   edgebounce = physics.behavior('edge-collision-detection', {     aabb: viewportbounds,     restitution: 0.99,     cof: 0.8   })    // resize events   window.addeventlistener('resize', function () {     // of 0.7.0 renderer auto resize... take values renderer     viewportbounds = physics.aabb(0, 0, renderer.width, renderer.height)     // update boundaries     edgebounce.setaabb(viewportbounds)   }, true)    (var = 0; < 5; i++) generatemagnet(world, renderer)   (var = 0; < 100; i++) generateparticle(world, renderer)    // add things world   var newton = physics.behavior('newtonian', { strength: 0.05 })   // newton.applyto(particles)    var attractor = physics.behavior('attractor', {     order: 0,     strength: 0.1   }).applyto(magnets);    world.add([     physics.behavior('body-impulse-response'),     newton,     edgebounce     ])    // subscribe ticker advance simulation   physics.util.ticker.on(function (time) {     world.step(time)   }) }) 
<script src="http://wellcaffeinated.net/physicsjs/assets/scripts/vendor/physicsjs-current/physicsjs-full.min.js"></script> <section id="mattercontainer" class="sct-homepagehero pt-0 pb-0"></section>  <style> .sct-homepagehero.pt-0.pb-0 {   min-height: 600px;   padding-top: 0;   padding-bottom: 0; } </style> 


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -