Ray by Day JS

Unless otherwise noted, all images shown in these pages are created dynamically by your browser at the time the page is loaded using the JavaScript code discussed in these pages. The few images for which this is not the case are explicitly annotated as a "static image."

Most of JavaScript and HTML code used to generate these images and interactive features is listed in the Resources used in this page section at the bottom of each page.

Introduction: Simulating Raster Graphics with SVG

We begin by simulating raster (pixel-based) images using SVG (Scalable Vector Graphics). While we will eventually move to a more efficient rendering techniques, starting with SVG provides a clear foundation for understanding how individual pixels can be manipulated to create images. (If you want to dive straight into ray tracing concepts and coding, you can jump ahead to Day 12. However, I think you will find it worthwhile to digest the concepts in these introductory pages first.)

External SVG File Inclusion

This first step demonstrates including a static SVG file as an external resource using the HTML <img> element. This approach treats the SVG file like any other image file (PNG, JPG, etc.), but with the advantage that the SVG content can be examined and understood as structured markup rather than binary data, which is to say that you can actually read the information describing each "pixel" from the text-based content of the SVG file.

The image below shows a 20 × 20 pixel grid where each "pixel" is actually a small SVG rectangle. This creates the illusion of a raster image while maintaining the benefits of vector graphics: scalability, readability, and ability to be easily edited - whether manually or programmatically.

Be careful of the word "vector" in this site. On this page (unlike in many of the pages that follow) it refers to a category of graphics file types rather than the mathematical sense of the word "vector". In later pages we will be making frequent use of that mathematical understanding of the word "vector" but not on this page. Check out this page from the University of Michigan Library for a good explanation of the difference between raster and vector graphics, and also see the definitions at the bottom of this page.

(Admittedly, it is perhaps ironic that we are using the SVG format, which is inherently a vector format, to illustrate techniques for the creation of raster graphics file.)

Image file day1-static.svg

static image

HTML referencing file day1-static.svg

The HTML code below shows how we reference the external SVG file using a standard <img> element. This is the simplest way to include an SVG file in a web page, treating it just like any other image file. The browser loads the SVG file and renders it as part of the page content.

Code extract failed

Excerpt of contents of file day1-static.svg

Here we can see the actual SVG markup that creates our simulated raster image. Each <rect> element represents a single virtual "pixel" in our 20 × 20 grid. The SVG uses a coordinate system where each rectangle is positioned using x and y attributes, with colors specified by the "fill" attribute.

Code extract failed

Code for generating SVG content as string

This is the JavaScript function that originally generated the static SVG file shown above. The function returns a complete SVG document as a string, which can then be saved to a file or used directly. When you click the "Generate SVG File Content" button below, this same code will execute and display the resulting SVG string in the textarea.

Key aspects of this SVG generation approach:

The function creates a proper XML header to begin the SVG document
The SVG namespace declaration in the opening <svg> tag is required for proper rendering
Each virtual pixel is formatted as a <rect> (rectangle) element with specific x, y, width, and height attributes
The color of each pixel/rectangle (its "fill" attribute) is calculated from the row and column coordinates, creating an implicit function that returns a color based on position - this coordinate-to-color mapping is a fundamental concept we'll explore further in later contexts

For now, notice how the code that defines the pixel colors based on (x,y) coordinates is entangled with the code that creates the SVG document syntax and the logical loops that iterate through all combinations of row and column values. It would be nice if we could isolate the code that defines the pixel colors from the code that creates the SVG document syntax and the logical loops that iterate through all combinations of row and column. Isolating these two distinct kinds of code would allow us to adjust the dimensions and resolution of the image without fussing with the code that defines the image and vice versa. We will do exactly that in one of the future pages.

Code extract failed

Resources used in this page

Definitions

Raster Graphics: A data representation of an image wherein the image is represented as a grid of square pixels having a specified color. Such a representation may or may not be subject a compression algorithm but, with or without compression, the image data still represents a grid of colored pixels. Some popular raster file formats are BMP, PNG, GIF, and JPEG. Raster formats are particularly suitable for representation of photographic images.

Vector Graphics: A data representation of an image wherein the image is described as a combination of geometric components such as line segments, circles, and splines; each having attributes such as color, thickness, opacity, etc. Vector formats are particularly suitable for representing of schematic information, and they generally have the advantage of not losing resolution when scaled to larger sizes (unlike raster formats). Some popular vector formats are SVG, AI (Adobe Illustrator), EPS. Some aspects of the PDF file are also vector based.

SVG: Scalable Vector Graphics, a vector-based image representation format based on XML in which the components of an image are described by XML elements having English-like namespace and attributes (e.g. "<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>" represents a circle centered at Cartesian coordinates (25,75) with a radius of 20 units with a border 5 units thick in red and otherwise transparent in the middle.). SVG format is not only supported as a recognized image file format by all modern web browsers, but is also heavily integrated into the Document Object Model (DOM) of modern web browsers. (See the SVG: Scalable Vector Graphics page of the Mozilla Developer Network for a complete description of SVG and a thorough tutorial.)

Prev Home Next

Day 1 - Static SVG File