Settings: Add depth to Joysticks on Pro Controller preview (#5894)

* Add some depth to ProJoysticks

* address comments

* clang

* address nits

* fix wrong inner_offset when offset.x was 0

src/yuzu/configuration/configure_input_player_widget.cpp

@@ -699,9 +699,9 @@ void PlayerControlPreview::DrawProController(QPainter& p, const QPointF center)
     {
         // Draw joysticks
         using namespace Settings::NativeAnalog;
-        DrawProJoystick(p, center + QPointF(-111, -55) + (axis_values[LStick].value * 11),
+        DrawProJoystick(p, center + QPointF(-111, -55), axis_values[LStick].value, 11,
                         button_values[Settings::NativeButton::LStick]);
-        DrawProJoystick(p, center + QPointF(51, 0) + (axis_values[RStick].value * 11),
+        DrawProJoystick(p, center + QPointF(51, 0), axis_values[RStick].value, 11,
                         button_values[Settings::NativeButton::RStick]);
         DrawRawJoystick(p, center + QPointF(-50, 105), axis_values[LStick].raw_value,
                         axis_values[LStick].properties);
@@ -2273,15 +2273,39 @@ void PlayerControlPreview::DrawJoystickSideview(QPainter& p, const QPointF cente
     p.drawLine(p2.at(32), p2.at(71));
 }
 
-void PlayerControlPreview::DrawProJoystick(QPainter& p, const QPointF center, bool pressed) {
+void PlayerControlPreview::DrawProJoystick(QPainter& p, const QPointF center, const QPointF offset,
+                                           float offset_scalar, bool pressed) {
+    const float radius1 = 24.0f;
+    const float radius2 = 17.0f;
+
+    const QPointF offset_center = center + offset * offset_scalar;
+
+    const auto amplitude = static_cast<float>(
+        1.0 - std::sqrt((offset.x() * offset.x()) + (offset.y() * offset.y())) * 0.1f);
+
+    const float rotation =
+        ((offset.x() == 0) ? atan(1) * 2 : atan(offset.y() / offset.x())) * (180 / (atan(1) * 4));
+
+    p.save();
+    p.translate(offset_center);
+    p.rotate(rotation);
+
     // Outer circle
     p.setPen(colors.outline);
     p.setBrush(pressed ? colors.highlight : colors.button);
-    DrawCircle(p, center, 24.0f);
+    p.drawEllipse(QPointF(0, 0), radius1 * amplitude, radius1);
 
     // Inner circle
     p.setBrush(pressed ? colors.highlight2 : colors.button2);
-    DrawCircle(p, center, 17.0f);
+
+    const float inner_offset =
+        (radius1 - radius2) * 0.4f * ((offset.x() == 0 && offset.y() < 0) ? -1.0f : 1.0f);
+    const float offset_factor = (1.0f - amplitude) / 0.1f;
+
+    p.drawEllipse(QPointF((offset.x() < 0) ? -inner_offset : inner_offset, 0) * offset_factor,
+                  radius2 * amplitude, radius2);
+
+    p.restore();
 }
 
 void PlayerControlPreview::DrawGCJoystick(QPainter& p, const QPointF center, bool pressed) {

src/yuzu/configuration/configure_input_player_widget.h

@@ -140,7 +140,7 @@ private:
     void DrawJoystickSideview(QPainter& p, QPointF center, float angle, float size, bool pressed);
     void DrawRawJoystick(QPainter& p, QPointF center, const QPointF value,
                          const Input::AnalogProperties properties);
-    void DrawProJoystick(QPainter& p, QPointF center, bool pressed);
+    void DrawProJoystick(QPainter& p, QPointF center, QPointF offset, float scalar, bool pressed);
     void DrawGCJoystick(QPainter& p, QPointF center, bool pressed);
 
     // Draw button functions