BFOIT - Introduction to Computer Programming

Pixel Paint Applet

If this applet is broken and you are using Chrome, click here.

What Is This?

The purpose of this program is to demonstrate low-level graphics algorithms, like those underlying how things get drawn in TG's graphics canvas.  Back in the first lesson (What Is Computer Programming?), there was a section describing pixels and how they are used to display everything you see on all digital stuff.  The description included hand drawn pictures of how pixels are painted for a circle and a couple of straight lines.  This applet lets you explore

  • how lines are drawn
  • how ellipses are drawn
  • how all pixels inside a bounded area can be painted (flood fill)

How to use this program

The program contains three objects:

  • A grid that represents a small subset of pixels from a computer-driven display supporting raster graphics. Each cell of the grid represents one pixel.  Clicking on cells invokes some tool-dependent operation
  • A tool menu on the right side. Clicking on a tool makes the selection the current tool.
  • A color selection menu stripe along the bottom. Click on a color to select it.

Tools

Clear Tool - When selected, all of the cells (pixels) in the grid are painted white. Mouse clicks in the grid are ignored.
Point Tool - When selected, clicking on cells (pixels) in the grid results in the cell taking on the current color selection.
Line Tool - When selected, clicking on two cells (pixels) in the grid results in a line drawn between them in the current color selection.
Ellipse Tool - When selected, clicking on two cells (pixels) in the grid results an ellipse drawn within the bounds of the cells. Think of the two cells as two corner points for a rectangle inscribing the ellipse.
Fill Tool - When selected, clicking on a cell (pixel) results in the cell and its similar neighbors taking on the current color. Neighbors are cells above, below, left, and right of the clicked on cell. Neighbors are similar when they contain the same color. The process is repeated for each of the matching neighbor cells, and their matching neighbors, ...

Algorithms

All of the algorithms simulated by this program were taken from the book Computer Graphics: Principles and Practice, Foley, van Dam, Feiner, Hughes, Addison-Wesley, 1992.

The line tool simulation is based on Bresenham's line algorithm. The ellipse tool simulation is based on Da Silva's mid-point ellipse algorithm. For details see Dilip Da Silva's Master's Project Report.

The fill tool simulation is based on the flood fill algorithm.