Instructions
  1. 📍 Mouse Position Tracking:
    • As you move the mouse pointer over the canvas, the Mouse Position is displayed in real time at the top of the canvas.
    • The coordinates are shown as X and Y, helping you position vertices or adjust points precisely.
  2. 🖼️ Drawing the Polygon:
    • Click on the canvas to place vertices and form a polygon.
    • To close the polygon, connect the last vertex to the first vertex by clicking near the starting vertex.
    • The coordinates of each vertex will be displayed in the Vertex Coordinates section on the left.
  3. ✏️ Editing the Vertices:
    • To adjust the position of a vertex, hold the left mouse button on the vertex and drag it to the desired location on the canvas.
    • The Vertex Coordinates section will automatically update to reflect the new position of the moved vertex.
    • You can also click on the x and y coordinates in the Vertex Coordinates section to edit the values directly and reposition the vertex.
  4. 🖌️ Starting the Fill Process:
    • Once the polygon is complete, click the Start Fill button to begin the scan-line fill simulation.
    • The algorithm will calculate intersection points for each scan line.
  5. 🚀 Iteration Controls:

    Use the following controls to navigate through the scan-line fill simulation:

    • 🔼 Next Step: Move to the next step of the simulation.
      Tip: Hold the Next Step button to speed up the simulation and iterate through steps faster.
    • 🔄 Clear Canvas: Reset the canvas to its initial state and start over.
  6. ❓ Question and Answer Modal:
    • During the simulation, a question will appear in a modal window.
    • You must answer the question correctly to proceed further in the simulation.
    • If your answer is incorrect, you cannot close the modal. Click the cross (X) icon to reset the simulation to a neutral state and try again.
    • Once you answer the question correctly, you can close the modal by clicking the cross (X) icon in top-right corner.
  7. 🔍 Tracking Progress:
    • The Algorithm Progress section on the right will update with details about the current step of the simulation.
    • Track the intersection points and the active edges for each scan line in real-time.

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


Mouse Pos =( X: 0, Y: 0 )

Algorithm Progress

Click on the canvas to draw a polygon. Once done, click "Start Fill" to begin the scan-line process.