How to not make div stack?

Question

I am using this code to make the images and text move around the screen. My problem is that sometimes the images and text land on eachother and stack up, how do i make it so its not possible to land on eachother?

$(document).ready(function() {
  animateDiv('.a');
  animateDiv('.b');
  animateDiv('.c');
  animateDiv('.d');
  animateDiv('.e');
  animateDiv('.f');
  animateDiv('.g');
  animateDiv('.h');
  animateDiv('.i');
});

function makeNewPosition() {
  var h = $(window).height() - 60;
  var w = $(window).width() - 60;
  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);
  return [nh, nw];
}

function animateDiv(myclass) {
  var newq = makeNewPosition();
  $(myclass).animate({
    top: newq[0],
    left: newq[1]
  }, 2000, function() {
    animateDiv(myclass);
  });

};

div.a {
  width: 50px;
  height: 50px;
  position: fixed;
  color: Navy;
}

div.b {
  width: 50px;
  height: 50px;
  position: fixed;
  color: red;
}

div.c {
  width: 50px;
  height: 50px;
  position: fixed;
  color: Fuchsia;
}

div.d {
  width: 50px;
  height: 50px;
  position: fixed;
  color: SpringGreen;
}

div.e {
  position: fixed;
}

div.f {
  position: fixed;
}

div.g {
  position: fixed;
}

div.h {
  position: fixed;
}

div.i {
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'>MOCKO</div>
<div class='b'>MOCKO</div>
<div class='c'>MOCKO</div>
<div class='d'>MOCKO</div>
<div class='e'><img src="image/image1.png"></div>
<div class='f'><img src="image/image2.png"></div>
<div class='g'><img src="image/image3.png"></div>
<div class='h'><img src="image/image4.png"></div>
<div class='i'><img src="image/image5.png"></div>

Thanks beforehand, if you can help me, please do! My name is Lukas and I am not so good at coding.

i should probably remove the div around img, thanks rob, i thinks it just takes up space in css file — Mocko, May 14 '19 at 16:46
This could get quite involved if the elements should *never* overlap. You will need to know, per animation frame, the location of each element, the space the element occupies, and then determine if any are occupying the same space. Essentially you'll need to do *collision detection* for each element for every frame and then do _"something"_ when they do occupy the same space. How should elements be prevented from overlapping? What happens when two elements approach each other? Bounce off one another? Should elements have paths that will never overlap? Lots to consider here. — hungerstar, May 14 '19 at 16:51

William H. · Answer 1 · 2019-05-14T17:03:47.933

So you are effectively randomly placing fixed elements on the screen, that's why they overlap occasionally.

There are several different ways to prevent that, but it just depends on what your end goal is.

If you really want the random placement approach without overlaps, you will have to run a check in makeNewPosition against all existing locations to determine if their coordinates are overlapping, and if so then regenerate coordinates. You would need to determine the edges of both the new placement and the old placement then compare them.

Personally, I think that will be a fragile and overly complicated way to do things. I would encourage you to look at other possible solutions other than the random generation, perhaps a different layout.

Also @hungerstar has a great comment. This is essentially collision detection. It can get heavily involved to do this well and answer your particular problems.

Here is a helpful SO link that explains a basic approach: jQuery/JavaScript collision detection

And here is a working example on jsfiddle: https://jsfiddle.net/ryanoc/TG2M7/

I can dive into a specific use case if you'd like. Not sure what all to post since I'm not sure what your end goal is.

While I agree with everything you mentioned, this is more of a comment than an answer. Upvoting so you can add proper comments. Thanks for your contributions to SO. — hungerstar, May 14 '19 at 16:57
Appreciate the input above, I'll add more details to actually help him get his solution. — William H., May 14 '19 at 16:58
Thanks for taking the time to set up an example of collision detection for the OP. When possible create a Stack Snippet so users do not need to leave the site. This improves the user experience in multiple ways and protects against a third party site going offline someday and making the link useless. — hungerstar, May 15 '19 at 14:45

How to not make div stack?

1 Answers1