How it Works

Basic Inverse Kinematics website which gives you one solution after inputting the length of 2 segments and target position on a 2D cartesian coordinate system.

Inputs

1. Input coordinates (x,y) and length of segments
2. Click update to generate graph and angles
3. Use Zoom In and Zoom Out to scale the graph
4. Click update to apply changes

Outputs

• Angle 1: Angle of Line 1 rotation based on 0 degrees (Positive Side of X Axis) -> Counterclockwise as positive
• Angle 2: Angle of Line 2 rotation based on the Angle of Line 1 -> Clockwise as positive

Math

Derivation of Formulas within code

Inspiration

Every robotics enthusiast will one day build, program, or interact with a robotic arm but may be confused about how to accurately control its movements. Recognizing this, the idea was to create an interactive platform that simplifies these complex calculations and provides an intuitive understanding of inverse kinematics. Inverse kinematics is the mathematical process of calculating the variable joint parameters needed to place a robotic arm or leg in a desired position. The goal was not only to assist robotics enthusiasts but also to provide an educational tool for students and teachers alike. By inputting the length of two segments and a target position, users can instantly get the two angles needed for positioning.

Building the Project

To understand the mathematics involved, I first created a simplified base logic code in Python, which helped me implement the logic into the main file 'app.py'. The project was built using Python for the backend logic and HTML for the frontend. The website user input is sent to the "calculate" route for processing, which 'app.py' receives and returns the length and angles. For the graph, I used the canvas element, with 2 buttons to zoom in/out to scale the graph. This was the most challenging part as this is the first time I tackled a project with interactive visuals. A result div was also added for displaying the calculated joint angles or error message. I also used Bootstrap CSS for styling, including a responsive layout and form control styles. Once the website was developed, I used Heroku to publish it and linked it to a .tech domain.

Challenges Faced

• Creating an intuitive user interface
• Zooming into the graph without shifting the frame
• Deploying the application on Heroku

What was Learnt

This was the first time I created a website meant for deployment with interactive visual elements. Most of my other projects were local, so most of the complexity resided within Java and Python because I didn't have to add furnish. This was also my first time working with the Flask Framework, and helped me become more proficient in handling HTTP requests, form data processing, and using the canvas element (for visuals).

Built With

• css
• flask
• html
• javascript
• python