Completing our progression from external files (Day 1) to inline content (Day 2), Day 3 demonstrates a more interesting, compact, and useful approach: programmatically generating SVG content entirely through JavaScript, specifically by manipulating the SVG elements like any other element of the Document Object Model (DOM).
Instead of pre-defining SVG elements in HTML or loading them from external files, we now create the entire image structure dynamically. Each "pixel" (SVG rectangle) is generated by JavaScript code, allowing for entirely algorithmic image creation, and real-time content generation based on user input or computational results.
This approach provides the maximum flexibility for graphics programming. We can implement algorithms that generate images based on mathematical functions, user interactions, or any other programmatic logic. The same techniques we develop here will later be applied to more sophisticated rendering systems, including the ray tracing.
The image below is generated entirely by JavaScript when the page loads, and, as before, the controls allow you to interact with individual elements of the image. View the source of this page to see for yourself that there is no longer any static SVG content. Compare that to the Day 1 and Day 2 content wherein the SVG content took up an enormous amount of space either in the page itself (Day 2) or in the external resource the page referred to (Day 1).
When this page loads, the createSvgElementAt() JavaScript function is executed. This function
creates an <SVG> DOM element and then appends a sequence of <rect>
DOM elements, each of those being one of the square "pixels" of the dynamically generated image.
Each of those pixels is given an id= attribute with a value in the form "r99c99" where the numbers after "r" and "c"
are the row and column of the pixel, thus each will have a unique ID (e.g. the pixel at row 5
and column 11 will have
id="r5c11).
SVG should be produced here on script load.
Select an element ID from the dropdown list. These IDs correspond to
the id="..." attributes of the various dynamically generated SVG
"pixels" (<rect> (rectangle) elements).
Note this one important line below from the
createRectangleAt() function above. This line alone is responsible for
determining the color of the pixel based only on its coordinates (in this case,
c and r). In essence, this line alone determines the most
fundamental aspect of what image is generated. It alone defines the relationship between
the Cartesian position on the image and the color at that position. All of the rest of
the code deals with other aspects of the image such as its size, aspect ratio, and the
size of the virtual pixel.
In later pages, as we dive further into the details of image creation, it will become increasingly important and convenient to separate the other peripheral aspects of image creation from this one core important function - a function that maps coordinates (x, y) to a color. In this case, that it is a relatively simple function, but will definitely not be the case going forward.
The function setDropDown() below is executed when the page loads. Initially,
prior to this function being called, the dropdown has no options. (You can see this
in the HTML code.). This function finds each pixel element (<svg><rect/>)
in the page, gets its id= value, creates an <option> in the dropdown
for that id, and adds a listener for that value option which will set the "fill" attribute for that
id to "red" when the option is selected.
An API that represents and interacts with any HTML or XML-based markup language document. The DOM is a document model loaded in the browser and representing the document as a node tree, or DOM tree, where each node represents part of the document (e.g., an element, text string, or comment). (credit: Mozilla Developer Network).