Loading animation: if the static image doesn't go away almost immediately then you're probably using an ancient browser such as Internet Explorer, on which it doesn't work.
If you draw a white line on a black background then you'd think that each point would be either black, or white. Indeed, this is often the way things work. But when you draw a diagonal line this way it forms "staircases" -- points stick out (or tuck in), ruining the illusion of a straight line.
The solution is to use shades of gray. Instead of coloring each point either black or white the computer, internally, draws the line of a grid that is finer than the monitor's display. It then colors the pixel on the monitor with a brightness that depends on the number of points, on the finer grid, that were black or white.
It turns out that it can help to include points, from the fine grid, that you'd think would be associated with adjacent pixels. That is, the radius of the sampling is greater than a single pixel. In the interactive demo, below, you can play with both the radius, and the number of points to sample (i.e. how much finer the fine grid is than the pixel grid) to see how this effects the brightness of individual pixels.
Finally, you can play with the function that is used to draw the image. The default is "x*x + y*y < 100" which is the equation of a circle. You might also try "y<3 * x" which draws a straight edge, or "y < 5 * x && y > 5 * x - 4" to draw narrow line.
Loading animation: if the static image doesn't go away almost immediately then you're probably using an ancient browser such as Internet Explorer, on which it doesn't work.
| Created June 2012 by
Dave Whipp
(index) (home) |
Comments |