-90° 90°
-180° 180°
-180° 180°

Kinematics Explained

Forward Kinematics (FK)

Given the joint angles ($\theta_1$, $\theta_2$), FK calculates the (x, y) position of the end effector. This simulator uses FK: you set the angles, and the arm's position is calculated.

$ x = L_1 \cos(\theta_1) + L_2 \cos(\theta_1 + \theta_2) $
$ y = L_1 \sin(\theta_1) + L_2 \sin(\theta_1 + \theta_2) $

Inverse Kinematics (IK)

Given a target (x, y) position, IK calculates the required joint angles ($\theta_1$, $\theta_2$). This is much more complex and often has multiple solutions (e.g., "elbow up" vs. "elbow down").

$ \cos(\theta_2) = \frac{x^2 + y^2 - L_1^2 - L_2^2}{2 L_1 L_2} $
$ \theta_2 = \pm \text{acos}(\dots) $
$ \theta_1 = \text{atan2}(y, x) - \text{atan2}(L_2 \sin(\theta_2), L_1 + L_2 \cos(\theta_2)) $

Prompt

1st. Recreate attached images. single html page. arm hand robotics. create kinematics simulator to show arm joint movement. bottom area: allow user to slide Link1, Link2, and End effector angle (relative to link 2). top area: showing correct movement by applying forward and inverse kinematics based on bottom slider.  add a box showing math (forward and inverse kinematics) behind the arm movements.

2nd. good. add feature:

1. show dynamic coordinate value near joint angles. this value should dynamically change when sliding.
2. add a line next to arm hand. with 3 random dots inside it (assume it as a plate that will be welded, that dots is the welding target).  show also the coordinate value next to each dots.

3rd. move plate to right side of arm hand (positive coordinate). the end effector should able to reach all the dots.

4th. add feature :
1. put welding plate in random positive area. put it into max coordinate that end effector can reach. so we can clearly see each joint and dots value. 
2. add a button to implement above feature
3. change animate button to green. when clicked arm should automatically move to weld the 3 dots. 
                        
prompter: gibrain. 20251118 05:05 +7