Коллайдинг элементов

[Perepelenok]

Привет всем! Такой вопрос - набросал такой канвас с двигающимися картинками, хочу добавить немного физики - чтобы при соприкосновении картинки отталкивались друг от друга, как это реализовать, подскажите пожалуйста! И еще один ньюанс, тоже не знаю как сделать, чтобы картинки не выходили за границы экрана, желательно чтобы тоже отталкивались от них, как на старых твишках)) Спасибо!

Сслылка на кодпен - https://codepen.io/kotya_ra/pen/xxJLLqm

[voraa]

Считать координаты. Проверять на касание и пересечение ( добавить много геометрии)

[voraa]

Анимацию надо делать через requestAnimationFrame, а не через setInterval.

$(".dragscroll div.item.move").each(async function () {

Что у вас асинхронного в этой функции?

И я бы отказался от jquery. Он способствует неэффективному коду. Каждый раз писать $(this) вроде не трудно. Но это вызов функции. Каждый раз. Которая возвращает один и тот же результат. Зачем?
Почему не вызвать один раз и запомнить в переменную?
А еще эффективнее делать на чистом js.
Неужели

$(this).css("left")

сильно проще писать, чем

this.style.left

?
А

style = { "left": left + randomw + "px" };
            $(this).css(style);
            style = { "top": top + randomh + "px" };
            $(this).css(style);

лучше, чем

this.style.left = `${left+rendomw}px`;
this.style.top = `${top+rendomh}px`;

И работает быстрее, что не маловажно при анимации, особенно, когда будете считать геометрию.

[Perepelenok]

$(".dragscroll div.item.move").each(async function () {

https://codepen.io/kotya_ra/pen/xxJLLqm

джиквери заменил, а вот как переписать setinterval на requestAnimationFrame не понимаю...

window.setInterval(function () {
        let min = -200, max = 200;
        parent.querySelectorAll('.item.move').forEach(item => {
            let randomw = Math.floor(Math.random() * (max - min + 1)) + min;
            let randomh = Math.floor(Math.random() * (max - min + 1)) + min;
            let left = parseInt(item.style.left);
            let top = parseInt(item.style.top);
            item.style.left = `${left + randomw}px`;
            item.style.top = `${top + randomh}px`;
        })
    }, 2000);

пробовал, но я никак не пойму принцип работы, как задать задержку, пока картинка дойдет до следующей точки, оно покадрово работает и высчитывает мне следующий шаг каждую миллисекунду, и получается жуть какая то(

И еще вопрос - верное ли решение использование абсолютных left right для анимации, или же может лучше использовать translate2d, к примеру, что и как лучше использовать, с учетом того что я хочу еще считать геометрию для взаимодействия между картинками и экраном? Спасибо

[voraa]

Я не вижу у вас анимации. Просто каждые 2 сек элементы случайным образом меняют свое положение.
Анимация это все-таки плавное движение из точки в точку.
Надо для каждого элемента иметь его положение X,Y, скорость движения и направление Vx, Vy. Тогда можно рассчитывать и показывать перемещение элементов с той частотой, с которой экран может это выводить (обычно 60 кадров в сек).