Bug in Circle calculation or Unity logic?

Questions & Answers
1

Hi, for my programm im programming a “clock like” behaviour. Meaning i

  • order some pictures in a circle (works)
  • if i click and drag on any item all items should rotate with the mouse (works)

But i get a weird bug. The first time i click and hold the mouse my images “jump” to different positions. if i hold the mouse down i can rotate my clock ust fine.
When i MouseUp and start dragin from the same image it works well. if i go to another image i get this “Jump” again.

If i increase the number of images in my clock the jumped items decrease.
For example. if i have 8 items in my clock the dragged image jumps 3 images(for example the number 5 would jump to number 2, and all images jump acordingly)
If i have 30 items and i drag the number 12, it jumps to number 11 and all other images accordingly.

So the clock itself keeps it numbers in the right position, it just has jump in all numbers when i start dragin a new number compared to last drag.

I checked alot of issues, the math, sine cosine … added some degrees changed some other values. It is not working.

Best idea on how to find the bug is by the different behaviours when i re-drag the same item or another one.

Lets say i have 8 images.
1-2-3-4-5-6-7-8
if i start draging number 3 my clock changes immediately to
6-7-8-1-2-3-4-5
Than i can drag it without problem. If i MouseUp and redrag on the 3 everything works as i want.
If i than drag on the number 2, all images jump 1 so the clock looks like
7-8-1-2-3-4-5-6

The more images i ahve in my clock the “smaller” this gap gets.

Well i think most understood the problem now. Here is the code where i think the problem is:

#############

public void SetLayoutHorizontal ()
{
	Debug.Log ("LAYOUT");

	for (var i =0; i < Rect.childCount; i++)
	{
		var PanelPrefab = Rect.GetChild (i) as RectTransform;

		Transform ImageObject = PanelPrefab.GetComponentInChildren<Transform>().Find("Image");

		if (PanelPrefab == null)
			continue;
		
		PanelPrefab.sizeDelta = CellSize;
        PanelPrefab.anchoredPosition = new Vector2(radius * Mathf.Sin( CalculateCircleAngle(i) - deltaRadian),radius * Mathf.Cos(CalculateCircleAngle(i) - deltaRadian));

	}
	
}

private float CalculateCircleAngle(int parts)
{
	//parts == Number of parts the whole circle is to be cut into
	return parts * (360/Rect.childCount) * (Mathf.PI/180);
}

public void OnDrag (PointerEventData eventData)
{
    var diffX = eventData.position.x - _rect.rect.width/2;
    var diffY = eventData.position.y - _rect.rect.height/2;
	deltaRadian = Mathf.Atan2(diffY,diffX);

    SetDirty();

}
2

It sounds like you have a common issue with dragging that you have not accounted for start position or drag offset. What you are seeing is two issues together, which is why it is hard to tell what’s wrong at a first glance.

When you drag relative, the typical “formula” is newPosition = oldPosition + (dragEndPosition - dragStartPosition)

When you drag absolute, like you are doing, the formula is newPosition = oldPosition + calculatedPosition

What you have as far as I can see is more like newPosition = calculatedPosition

This is why you always see a “jump” – you don’t record the starting position and so it gets lost.
In other words, your clock starts with an offset - wherever you placed the 1 is not where it goes according to your formula. First time you drag it, it snaps to the where your formula says. And this loses whatever original extra angle there was.

The second part is that you don’t account for the starting position of your drag, so the formula you have does not care if you clicked on 1 or 3 or 8 or whatever number. No matter where you clicked, it will always calculate the angle from 0. This is why it always rotates to the same location regardless where you started dragging.

You need to record both the original angle and the starting drag angle when the drag starts. Then you can update it via the first formula above.