7.6 KiB
This conversation was generated with Duck.ai (https://duck.ai) using OpenAI's GPT-4o mini Model. AI chats may display inaccurate or offensive information (see https://duckduckgo.com/duckai/privacy-terms for more info).
====================
User prompt 1 of 2 - 26/08/2025, 6:09:24 pm: Math used for UI rotation of the image is based around simple Trigonometry. In the first part when the mouse is pressed we get the distance from mouse to image corner (cyan line image 1) In second part we get desired angle from mouse horizontal location (image 2) In third part we use the angle to calculate the new position of the image corner (image 1) In forth part when mouse is released we reset image position
=== First step when mouse pressed We need to calculate the distance from mouse and image corner.
\begin{align}
mouseStart &= mouseV\\
sizeOfVectorMI &= \sqrt{(mouseV_x - imageV_x)² + (mouseV_y - imageV_y)²}\\
oldAngleOfVectorMI &= atan2(imageV_x - mouseV_x, imageV_y - mouseV_y)\\
\end{align}
sizeOfVectorMI is the (cyan line image1)
And we need to remember the starting position (green point / orange line image 1)
=== Second step while mouse is pressed First we need to calculate rotation of the image based on horizontal distance of the mouse position from the start point. We get this by
\begin{align}
dist &= mouseV_x - mouseStart_x \\
l &= \frac{dist}{screenWidth}\\
rotation &= lerp(45,-45, \frac{l + 1}{2})\\
newAngleOfVectorMI &= (\frac{rotation * \pi}{180}) + oldAngleOfVectorMI\\
\end{align}
Can now get vector from the mouse to the corner of the image
\begin{align}
vectorMI_x &= sizeOfVecorMI * cos(newAngleOfVectorMI)\\
vectorMI_y &= sizeOfVecorMI * sin(newAngleOfVectorMI)\\
\end{align}
From the vector we can get corner of the image and rotation of the image
\begin{align}
imageV_x &= vectorMI_x + mouseV_x\\
imageV_y &= vectorMI_y + mouseV_y\\
imageRotation &= 90 + rotation\\
\end{align}
With position of the corner we can draw the image from the corner with angle imageRotation
=== Third step when mouse is released We reset values
\begin{align}
imageRotation &= 90 \\
imageV &= orgImageV\\
\end{align}
REFERENCE
https://en.wikipedia.org/wiki/Atan2#Definition_and_computation
angle = atan2(y, x) =
\begin{cases}
\arctan(\frac{y}{x}) & \text{if } x > 0 \\
\arctan(\frac{y}{x}) + \pi & \text{if } y \geq 0 \text{ and } x < 0 \\
\arctan(\frac{y}{x}) - \pi & \text{if } y < 0 \text{ and } x < 0 \\
\frac{\pi}{2} & \text{if } x = 0 \text{ and } y > 0 \\
-\frac{\pi}{2} & \text{if } x = 0 \text{ and } y < 0 \\
\text{undefined} & \text{if } x = 0 \text{ and } y = 0
\end{cases}
!cordinats_show_mouse_picture.jpg
float Vector2Distance(Vector2 v1, Vector2 v2)
{
float result = sqrtf((v1.x - v2.x)*(v1.x - v2.x) + (v1.y - v2.y)*(v1.y - v2.y));
return result;
}
Vector2 mouseV = GetMousePosition();
if (IsMouseButtonPressed(MOUSE_BUTTON_LEFT))
{
mouseStart = mouseV;
sizeOfVectorMI = Vector2Distance(mouseStart, newPosition);
oldAngleOfVectorMI = std::atan2(newPosition.x - mouseStart.x, newPosition.y - mouseStart.y);
}
if (IsMouseButtonDown(MOUSE_BUTTON_LEFT))
{
float dist = mouseV.x - mouseStart.x;
float l = dist / screenWidth;
rotation = Lerp(45.0f, -45.0f, (l + 1) / 2);
float newAngleOfVectorMI = ((rotation*PI) / 180.0f) + oldAngleOfVectorMI;
Vector2 vectorMI = {
.x = sizeOfVectorMI * std::sin(newAngleOfVectorMI),
.y = sizeOfVectorMI * std::cos(newAngleOfVectorMI)
};
imageV.x = vectorMI.x + mouseV.x;
imageV.y = vectorMI.y + mouseV.y;
}
if (IsMouseButtonReleased(MOUSE_BUTTON_LEFT))
{
rotation = 0.0f;
newPosition = orgPosition;
}
can you format and rewrite to unify it.
directy output the finished text dont respond with enything else
GPT-4o mini: == UI Image Rotation Using Trigonometry
The process of rotating an image based on mouse movement involves several steps, utilizing basic trigonometric principles. Below is a unified and formatted explanation of the steps involved.
=== Step 1: Mouse Pressed
When the mouse is pressed, we calculate the distance from the mouse to the image corner.
\begin{align}
mouseStart &= mouseV\\
sizeOfVectorMI &= \sqrt{(mouseV_x - imageV_x)² + (mouseV_y - imageV_y)²}\\
oldAngleOfVectorMI &= \text{atan2}(imageV_x - mouseV_x, imageV_y - mouseV_y)\\
\end{align}
- sizeOfVectorMI represents the distance (cyan line in image 1).
- We also store the starting position (green point/orange line in image 1).
=== Step 2: While Mouse is Pressed
Next, we calculate the rotation of the image based on the horizontal distance of the mouse position from the starting point.
\begin{align}
dist &= mouseV_x - mouseStart_x \\
l &= \frac{dist}{screenWidth}\\
rotation &= \text{lerp}(45, -45, \frac{l + 1}{2})\\
newAngleOfVectorMI &= \left(\frac{rotation \cdot \pi}{180}\right) + oldAngleOfVectorMI\\
\end{align}
Now, we can derive the vector from the mouse to the corner of the image:
\begin{align}
vectorMI_x &= sizeOfVectorMI \cdot \cos(newAngleOfVectorMI)\\
vectorMI_y &= sizeOfVectorMI \cdot \sin(newAngleOfVectorMI)\\
\end{align}
Using this vector, we can determine the new position of the image corner and its rotation:
\begin{align}
imageV_x &= vectorMI_x + mouseV_x\\
imageV_y &= vectorMI_y + mouseV_y\\
imageRotation &= 90 + rotation\\
\end{align}
With the position of the corner established, we can draw the image from this corner at the angle imageRotation.
=== Step 3: Mouse Released
Upon releasing the mouse, we reset the values:
\begin{align}
imageRotation &= 90 \\
imageV &= orgImageV\\
\end{align}
=== Reference for atan2 Function
The atan2 function is defined as follows:
\text{angle} = \text{atan2}(y, x) =
\begin{cases}
\arctan\left(\frac{y}{x}\right) & \text{if } x > 0 \\
\arctan\left(\frac{y}{x}\right) + \pi & \text{if } y \geq 0 \text{ and } x < 0 \\
\arctan\left(\frac{y}{x}\right) - \pi & \text{if } y < 0 \text{ and } x < 0 \\
\frac{\pi}{2} & \text{if } x = 0 \text{ and } y > 0 \\
-\frac{\pi}{2} & \text{if } x = 0 \text{ and } y < 0 \\
\text{undefined} & \text{if } x = 0 \text{ and } y = 0
\end{cases}
=== C++ Implementation
float Vector2Distance(Vector2 v1, Vector2 v2)
{
float result = sqrtf((v1.x - v2.x)*(v1.x - v2.x) + (v1.y - v2.y)*(v1.y - v2.y));
return result;
}
Vector2 mouseV = GetMousePosition();
if (IsMouseButtonPressed(MOUSE_BUTTON_LEFT))
{
mouseStart = mouseV;
sizeOfVectorMI = Vector2Distance(mouseStart, newPosition);
oldAngleOfVectorMI = std::atan2(newPosition.x - mouseStart.x, newPosition.y - mouseStart.y);
}
if (IsMouseButtonDown(MOUSE_BUTTON_LEFT))
{
float dist = mouseV.x - mouseStart.x;
float l = dist / screenWidth;
rotation = Lerp(45.0f, -45.0f, (l + 1) / 2);
float newAngleOfVectorMI = ((rotation * PI) / 180.0f) + oldAngleOfVectorMI;
Vector2 vectorMI = {
.x = sizeOfVectorMI * std::sin(newAngleOfVectorMI),
.
--------------------
User prompt 2 of 2 - 26/08/2025, 6:17:49 pm:
continue
GPT-4o mini:
```cpp
.y = sizeOfVectorMI * std::cos(newAngleOfVectorMI)
};
imageV.x = vectorMI.x + mouseV.x;
imageV.y = vectorMI.y + mouseV.y;
}
if (IsMouseButtonReleased(MOUSE_BUTTON_LEFT))
{
rotation = 0.0f;
newPosition = orgPosition;
}
This C++ code snippet implements the logic for rotating an image based on mouse movements. It calculates the distance and angle between the mouse position and the image corner, updates the image's position and rotation while the mouse is pressed, and resets the values when the mouse is released.
By following these steps, you can achieve a smooth and intuitive image rotation effect in your UI.