JSXGraph » Examples

Answer
While raster graphics are based on pixels, vector graphics are based on mathematical forumlas. When you see a gif (jiff), jpeg (jay-peg), png (ping [i think]), or bmp (bitmap), you are seeing an image which is based on pixel-by-pixel information. The difference between these formats has to do with color-depth, compression, and lossiness.

There are however, formats which are based on mathematical formulas such as svg, eps, ps (postscript), and swf (flash). Instead of representing an image in terms of groups of pixels, these represent the image in terms of groups of shapes, such as ellipsoids, polygons, and bezier curves.

The advantage that vector has over raster is that images can be zoomed to any degree of precision, which is useful in print, where raster images can take up hundreds of megs of space.

To illustrate my point, here is the image from my previous entry, zoomed to different degrees. Notice how crisp each image remains.

Zooming closer to the boy…

Still closer…

Topic: Adobe Illustrator

Question
How did Jamie draw that picture in his previous entry?

Answer
The short answer is that I traced over another image using Adobe Illustrator (a vector-based graphical tool). It’s not as easy as it sounds though. Get ready for the long answer:

Here is the original image Precious Moments.

First, I added the image to an illustrator document and changed it’s parent layer to a “template” layer, which (to my best knowledge) is used for tracing. A template layer is locked and can be dimmed so that it doesn’t interfere with the drawing of other layers.

Illustrator features an “outline” mode that lets you draw unhindered by the other layers you’ve drawn. Here is an image of the outlines of the picture.

Each seperate shape you see is composed of an individual stroke style and fill style. Each shape, each fill style, each stroke style, is stored as some mathematical combination (as described above) allowing for magnification to any degree.

Each seperate shape is also a seperate layer. There are over 100 layers/shapes in this image.

The poem that follows the outline of the couple was created by merging the shapes of the other images into one shape, and then by expanding that by about 20-40 points (i cannot recall the exact number).

Here is one of the flowers the girl is holding magnifyed.

Even a simple flower takes six shapes, five circles and a weird curvy sort of shape for the stem.