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.
      • Enter values greater than 0.1 for each axis
      • Values represent the scaling factor (e.g., 2 means double the size)
    • Apply Scaling: Click to apply the current scaling values to the selected shape.
      • Make sure to select a shape first
      • The transformation matrix will update to show the new scaling values
    • Animation Slider: Use the slider to smoothly animate between the original size and the target scaling.
      • Move the slider to see the scaling effect in real-time
      • The transformation matrix updates dynamically as you move the slider
  6. 🔍Transformation Matrix:
    • The 4x4 matrix represents the current scaling transformation
    • Diagonal elements (top-left to bottom-right) show the scaling factors:
      • First element (top-left): X-axis scaling
      • Second element (middle): Y-axis scaling
      • Third element (middle): Z-axis scaling
      • Last element (bottom-right): Always 1
    • Non-diagonal elements are set to 0 for pure scaling
    • The matrix updates in real-time as you:
      • Apply new scaling values
      • Move the animation slider
  7. 📊 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.
  8. 🎚️Slider Control:
    • Use the slider to smoothly animate the scaling transformation
    • The slider value (0-1000) is normalized to create a smooth transition:
      • 0: Original size
      • 1000: Target scaling values
    • The transformation matrix and shape update in real-time as you move the slider
  9. ↺ Reset All:
    • Click the "Reset All" button to:
      • Reset all shapes to their original size
      • Reset the transformation matrix to identity
      • Reset the slider to 0
      • Clear all scaling values

  10. NOTE:

    • Always select a shape before applying scaling
    • Make sure the slider is at zero before making any changes for accurate adjustments
    • The transformation matrix shows the current scaling state of the selected shape

    11. 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.

Transformation Matrix
Scaling Controls