Clark Kent

Я вам написал на почту. Для дальнейшего обсуждения

AlfHack, Можно еще попробовать haxe движки такие как babylonhx, heaps, armory3d и away3d

AlfHack, Ну тут надо выбирать - либо быстро и дешево сделать игру то движки юзать. Но они тащат кучу всего и медленные. Либо писать свое уникальное решение на openGL но это долго и дорого.

Можно привести еще более простую аналогию.
Есть русский язык - это инструмент.
А есть области науки и знаний - математика, физика, биология и др - это API.

Может там где индекс берется для рендера сделать так ?
state.cols.indexOf(item);
Вообще на сколько я знаю можно перезадать массив заново и тогда обновится вся таблица.

Еще есть способ. Локализация отрезков. Виртуально разбиваем все поле на квадраты. Бежим по всем отрезкам полигона и вычисляем их bounds box. Смотрим в какие квадраты попал тот или иной отрезок и записываем отрезок в ячейку. И так по всем отрезкам. Далее бежим уже по всем использованным виртуальным клеткам. И если там более двух отрезков - проверяем их пересечение. Реальных проверок должно получится намного меньше.

И потом еще сам метод проверки:

function cross(p0x, p0y, p1x, p1y,
	      p2x, p2y, p3x, p3y)
	{
		const d = ((p3y - p2y) * (p1x - p0x)) - ((p3x - p2x) * (p1y - p0y));
		
		if (d === 0)
		{
			return null;
		}
		
		const d02x = p0x - p2x;
		const d02y = p0y - p2y;
		
		let n1 = ((p3x - p2x) * d02y) - ((p3y - p2y) * d02x);
		let n2 = ((p1x - p0x) * d02y) - ((p1y - p0y) * d02x);
		
		const v01 = n1 / d;
		const v23 = n2 / d;
		
		if (v01 < 0 || v01 > 1)
		{
			return null;
		}
		
		if (v23 < 0 || v23 > 1)
		{
			return null;
		}
		
		const x = p0x + (v01 * (p1x - p0x));
		const y = p0y + (v01 * (p1y - p0y));
		
		return {x, y};
	}

var maxDistanceSquared = circle0.radius + circle1.radius;
maxDistanceSquared *= maxDistanceSquared;

Это просто расстояние между кругами. Но возведенное в квадрат. Возведение в квадрат нужно для ускорения расчетов - что бы не извлекать корень(это долгая операция). То есть алгоритм разрешения столкновения между двумя кругами сводится к тому что мы знаем расстояние между центрами кругов. И знаем эту сумму радиусов. И если расстояние ниже - то надо разруливать столкновение. И тут нам приходится уже извлекать корень, что бы вычислить на сколько два шара проникли друг в друга.

var insideDistance = maxDistance - currentDistance;

И тут есть много вариантов. Самый простой - это сдвинуть круги друг от друга на половину insideDistance каждый. По вектору между их центрами.

@daniil14056

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

Ну можно просчитать шагом в радиус круга - тот который быстро летит. Еще можно виртуально построить фигуру состоящую из 2 кругов (начальный и конечный) и одного прямоугольника - который соединяет эти два круга. И все эти три фигуры рассматриваются как один объект. Например если расстояние между начальным и конечным менее двух радиусов то не используем прямоугольник - иначе используем.

Можно вместо прямоугольников - те же круги использовать.

А иногда вообще успевает залесть внутрь, там отрабатывается коллизия, а на следующем шагу он не успевает выйти из шара, в результате 3-10 шагов они колеблется

Тут можно сделать несколько проходов - до тех пор пока не будет кругов друг в друге - но часто бывают ситуации что до бесконечности они будут немного проникать друг в друга. По этому можно к примеру установить допустимую погрешность проникновения кругов друг в друга.

Ну вообще
yvelyprimeY = y * cosA - x*sinA
Это похоже на поворот вектора (x, y) на угол A

x1=x*cos(angle)-y*sin(angle); 
y1=y*cos(angle)+x*sin(angle);

Даниил, А реальной физики тут и нет ) Тут просто обработка столкновений, которую надо еще будет доработать. Если нужна реальная физика - лучше заюзать box2d. Но есть под все платформы.

Illialkv, Как вариант разбить один svg на три иконки svg.
Еще можно загрузить этот svg как xml и сделать из него три копии svg удалив в каждой лишние иконки. Тем самым получим три svg.

Даниил, Может лучше заюзаешь физический движок?

Столкновение кругов

Но можно сделать просто. Ищешь столкновение кругов. У каждого из них есть вектор скорости.
Далее (в продолжение моего кода):

// вычисляем дистанции
var currentDistance = Math.sqrt(currentDistanceSquared);
var maxDistance = Math.sqrt(maxDistanceSquared);

// вычисляем степень проникновения двух кругов друг в друга
var collideDistance =  currentDistance - maxDistance;

// вычисляем скейл для масштабирования вектора
// получаем вектор приникновения
var scale = collideDistance / currentDistance
dx *= scale;
dy *= scale;

// для одного круга прибавляем(или вычитаем?)
circle0.x += dx * 0.5;
circle0.y += dy * 0.5;

// для второго вычитаем (или прибавляем?)
circle1.x -= dx * 0.5;
circle1.y -= dy * 0.5;

Но это только растолкнет круги. Но можно заюзать этот вектор для изменения скорости. Например:

//вычисляем старую скорость (это можно запомнить)
var oldSpeed = Math.sqrt(circle0.speed.x * circle0.speed.x + circle0.speed.y + circle0.speed.y); 

// прибавляем новый вектор скорости
circle0.speed.x += dx * 0.5;
circle0.speed.y += dy * 0.5;

// вычисляем текущую скорость
var currentSpeed = Math.sqrt(circle0.speed.x * circle0.speed.x + circle0.speed.y + circle0.speed.y);

// корректируем вектор скорости  
circle0.speed.x *= currentSpeed / oldSpeed;
circle0.speed.y *= currentSpeed / oldSpeed;

Вопрос не про поля, а про перенос изображение на новую страницу если превышена ширина страницы.