SWGrid is a SketchWaveJS class that creates a coordinate grid system for visualizing mathematical concepts.
It provides a mapping between user coordinates (mathematical/grid coordinates) and screen coordinates (pixel positions on the canvas).
The grid features customizable axes, grid lines, origin markers, and automatic scaling to fit any canvas size.
About This Demo
This demonstration shows how SWGrid handles coordinate transformations by displaying two points:
Point A uses user coordinates (3, 4), while Point B uses screen coordinates (50, 100).
As you resize the canvas, you'll see how Point A maintains its position relative to the grid (because it's drawn using grid coordinates),
while Point B maintains its pixel position (because it's drawn in screen coordinates).
How to Use This App
- Canvas Size Slider: Adjust the slider to change the canvas size from 200 to 500 pixels. Watch how the grid scales proportionally.
- Point A (User Coords): Drawn at grid position (3, 4) using
drawOnGrid() - stays at the same grid intersection regardless of canvas size.
- Point B (Screen Coords): Drawn at pixel position (50, 100) using
draw() - maintains its fixed screen position as canvas resizes.
- Grid Information: The display below the canvas shows current canvas dimensions and grid scale (x and y ranges with increments).
Key Concepts Demonstrated
- Coordinate Transformation: How SWGrid maps mathematical coordinates to screen pixels
- User vs Screen Coordinates: The difference between grid-based positioning and pixel-based positioning
- Dynamic Scaling: Grid automatically adjusts to canvas size changes while maintaining proportions
- Grid Visualization: Axes, grid lines, and numerical labels help visualize the coordinate system
- Integration with SWPoint: Points can be drawn using either coordinate system
Learn More
For complete documentation including all methods, properties, and advanced features of the SWGrid class,
see the Full SWGrid Reference Guide.