Ray by Day JS
Day 5 - JS Library for Color-Based Graphing of a
Function of Two Variables
On Day 5, we introduce the BiVariantGrapher class, a significant step forward in our visualization toolkit. This grapher brings several important improvements:
- Familiar Cartesian Coordinates: The grid now follows the standard Cartesian convention: the horizontal (x) axis increases from left to right, and—crucially—the vertical (y) axis increases from bottom to top. This matches the way you've likely seen graphs in math and science, making it more intuitive to interpret.
- Origin at the Center: Unlike previous versions where the origin (0,0) was at the corner, the center of the image is now the origin. This change makes it easier to visualize functions and symmetries that are centered around (0,0).
- Flexible Scaling: We've moved away from equating a single pixel with a "unit" in our calculations. This decoupling allows for more flexible scaling and paves the way for zooming and panning features in the future.
- Custom Color Mapping: Most importantly, the grapher now accepts a function as a parameter that maps each (x, y) coordinate to a color. This means you can visualize a wide variety of mathematical functions and patterns simply by changing the color-mapping function.
Try experimenting with different color functions and see how the grapher responds. Notice how these changes make the tool more powerful and adaptable for exploring mathematical relationships.
SVG dynamically created on this page by JavaScript making
use of svgutils.js and svg-grid-grapher.js and
new library bivargrapher.js
SVG should be produced here on script load.