Instructions
  1. 🖱️Mouse Controls:
    • Left Click: Translate (shift) the simulation by left-clicking and dragging the cursor.
    • Right Click: Rotate the simulation by right-clicking and dragging the cursor.
    • Scroll Wheel: Zoom in and out of the simulation by scrolling.
  2. 📱Mobile Touch Controls:
    • Pan (Translate): Use two fingers on the screen to move the simulation.
    • Rotate: Drag finger on the screen to change the orientation of the simulation.
    • Zoom: Pinch two fingers together or spread them apart on the screen to zoom in or out of the simulation.
  3. 🔒Lock Options:
    • Lock Graph: Prevents translation (shifting) of the simulation when enabled.
    • Lock Zoom: Disables zoom functionality, effectively disabling the middle mouse button.
    • Lock Rotate: Disables the rotation of the simulation, disabling the right mouse button.
  4. ➕ Shape Controls:
    • Add Shape: Click the Add button to open a modal where you can select a shape type and specify its coordinates.
      • ⚠️ Note: Avoid creating two shapes with the same coordinates.
    • Select Shape: Click the Select button to highlight a shape with a spherical outline for easy identification.
      • ⛔ Note: Please ensure that the shapes are in their initial positions before using the Select button.
    • Edit Shape: After selecting a shape, click the Edit button to modify its properties or position.
    • Delete Shape: After selecting a shape, click the Delete button to remove it from the scene.
  5. 📏Scaling Controls:
    • Set Scaling Factors: Adjust the scaling factors for X, Y, and Z axes using the input fields below.
    • Apply Scaling: Click to apply the specified scaling factors to the current shapes. (First set your values using the sliders, then click this button to apply the transformation)
  6. 🔄Rotation Controls:
    • Select Rotation Axis: Choose X, Y, or Z from the dropdown to define the axis of rotation.
    • Theta (θ): Defines the rotation angle. Enter a value in degrees (e.g., 90°, 180°) to rotate the shape.
    • Apply Rotation: Click the Change Axis button to set the selected axis for rotation.
  7. 🛠️Translation Vector: Defines how much to move the shape along the X, Y, and Z axes in 3D space.
    • Apply Translation: Click to apply the specified translation factors to the current shapes. (First set your values using the sliders, then click this button to apply the transformation)
  8. 📊 Grid Options:
    • Use the checkboxes to toggle the display of the XY-grid, YZ-grid, and XZ-grid.
    • Check a box to display the corresponding grid, or uncheck it to remove it from view.
  9. 🎚️Slider Control:
    • Use the sliders to set your desired values for scaling, rotation, or translation along the X, Y, and Z axes.
    • After setting the values with the sliders, click the corresponding "Apply" button to apply the transformation.
    • You can adjust the values multiple times using the sliders before applying the transformation.
  10. ↺ Reset All: Click the "Reset All" button to revert all controls and settings to their default values.

  11. NOTE: Make sure the slider is at zero before making any changes to for accurate adjustments.

    12. Note: This experiment simulation is optimized for desktop screens. While basic functionality is available on mobile devices, for the best experience, use a desktop or PC monitor.

Scaling Controls
Translation Vector
Rotation Controls
Transformation Matrix