• The part of the electromagnetic spectrum with wavelengths ranging from about 380 to 740 nanometers
• A source of an electromagnetic wave creates electric and magnetic fields, perpendicular to each other, that travel away from the source
• The energy of an EM wave is stored in the electric and magnetic fields
• EM waves can travel through a vacuum

An EM Wave

• A spectral color is light of a single wavelength in the visible spectrum.
• The visible spectrum is commonly divided into seven bands named red, orange, yellow, green, blue, indigo and violet (listed in decreasing wavelength).
• It is very difficult to reproduce spectral colors using conventional techniques.

• Light from common objects (whether they are sources of light or objects that reflect light) consists of a range of different wavelengths.
• Hence, light is often characterized using a spectral power distribution that provides the power of the light at each wavelength in the visible spectrum.

The Eye

• Light enters through the cornea
• Is focused by the lens
• Stimulates sensors in the retina

• Visible Light:
  • 400 to 700 nanometers
• Rods:
  • Stimulated by short wavelengths
  • Respond quickly
• Cones:
  • \(\beta\) sensors are sensitive to wavelengths between 400 and 550 nm, but are most sensitive to a wavelength of 450 nm (what we call blue)
  • \(\gamma\) sensors are sensitive to wavelengths between 420 and 660 nm, but are most sensitive to a wavelength of 540 nm (what we call green)
  • \(\rho\) sensors are sensitive to wavelengths between 400 and 700 nm, but are most sensitive to a wavelength of 580 nm (what we call red)

• Processing the Output from Rods:
  • Impacts our perception of luminance or brightness
  • Perceived brightness is approximately logarithmic
• Processing the Output from Cones:
  • Results in our perception of color
  • The data processed by the brain is just the total levels of activity in the three types of cones

• Depth and Distance Cues:
  • Retinal disparity (between the two eyes)
  • Size
  • Shadows
• Motion Cues:
  • "On" and "Off" photoreceptors
  • Head and eye movements

• Defined:
  • A machine that is capable of presenting visual information transmitted from a computer (i.e., making information stored in a computer perceivable by the human eye)
• Types:
  • Continuous Display Space (vector devices)
  • Discrete Display Space (raster devices)

• Coordinates:
  • Quantities that designate the position of a point in relation to a given reference frame
• The Quantities:
  • Can be linear and/or angular

• Cartesian Coordinates:
  • The origin is at the center
  • The basis consists of the horizontal and vertical axes
  • Positive values in the "north east" quadrant
• An Illustration:
  • 

• Another Common Rectangular Coordinate System:
  • The origin is at the upper-left
  • The basis consists of the horizontal and vertical axes
  • Positive values in the "south east" quadrant
• An Illustration:
  • 

The (Linear) Color Cube

• The RGB Model:
  • Begin with black then add red, green, and or blue
  • An additive model
  • Often used for displays/monitors
• The CMYK Model:
  • Begin with white then remove cyan, magenta, and/or yellow
  • A subtractive model
  • Often used for printing

• Defined:
  • The process of taking an internal representation of visual content and presenting it on a visual output device
• Rendering Engines in Java:
  • Graphics
  • Graphics2D

• The "Black Box" Parts of the Process:
  • Conversion of the color space
  • Conversion of coordinate systems
  • Rasterization or vectorization of the internal representation
• Parts of the Process of Concern:
  • Clipping
  • Composition

A Translation of (25,25)

A Rotation of \(- \pi / 6\) Radians

A Scaling of (1.5, 1.5)

A Reflection About the Horizontal Axis

• Clipping Defined:
  • Limiting the portion of the object that will be "drawn" by the rendering engine
• Clipping in Java:
  • Methods in the Graphics2D class

• Composition Defined:
  • Combining the points being drawn (the source points) with the points on the background (the destination points)
• Composition Using Alpha Blending:
  • Four channels -- one each for red, green and blue and one for alpha (a weighting factor)

• The Source Over Destination Rule:
  • \(R_d = R_s + R_d (1 - \alpha_s)\)
  • \(G_d = G_s + G_d (1 - \alpha_s)\)
  • \(B_d = B_s + B_d (1 - \alpha_s)\)
  • \(\alpha_d = \alpha_s + \alpha_d (1 - \alpha_s)\)
• Alpha Blending in Java:
  • The AlphaComposite class

• The JComponent Class:
  • An part of a GUI
  • When it needs to be rendered its paint(java.awt.Graphics) method is called and is passed a rendering engine
• Rendering:
  • Write a class that extends JComponent
  • Override its paint() method

An Example

javaexamples/visual/BoringComponent.java

• What About the Output Device?
  • We'll start by using the display/monitor
• Remember Content Panes:
  • The specialization of JComponent can be added to the content pane of a MultimediaApplication or MultimediaApplet

• Requirements:
  • Add and remove content
  • Control the \(z\)-order of content
  • Render all of the content
  • Support multiple different presentations of the same content
  • Support the transformation of visual content
  • Be thread safe
• Alternative Designs:
  • We'll consider several

A Common Design

A Design with a Problem

A Better Design

A Design that Satisfies Almost All of the Requirements

"Enhancing" the View with Specialization

A Good Design

The SimpleContent Interface

javaexamples/visual/statik/SimpleContent.java

The Visualization Class

Skeleton:

javaexamples/visual/Visualization.java (Fragment: 1)

Content Management:

javaexamples/visual/Visualization.java (Fragment: content) javaexamples/visual/Visualization.java (Fragment: move)

View Management:

javaexamples/visual/Visualization.java (Fragment: views)

Forcing Rendering:

javaexamples/visual/Visualization.java (Fragment: repaint)

The VisualizationView Class

Skeleton:

javaexamples/visual/VisualizationView.java (Fragment: skeleton)

Rendering:

javaexamples/visual/VisualizationView.java (Fragment: render)

The PlainVisualizationRenderer Class

javaexamples/visual/PlainVisualizationRenderer.java (Fragment: render)

The ScaledVisualizationRenderer Class

Skeleton:

javaexamples/visual/ScaledVisualizationRenderer.java (Fragment: skeleton)

Before Rendering:

javaexamples/visual/ScaledVisualizationRenderer.java (Fragment: preRendering)

After Rendering:

javaexamples/visual/ScaledVisualizationRenderer.java (Fragment: postRendering)

The PartialVisualizationRenderer Class

Skeleton:

javaexamples/visual/PartialVisualizationRenderer.java (Fragment: skeleton)

Before Rendering:

javaexamples/visual/PartialVisualizationRenderer.java (Fragment: preRendering)

After Rendering:

javaexamples/visual/PartialVisualizationRenderer.java (Fragment: postRendering)

• An Additional Requirement:
  • The ability to transform content
• Alternative Designs:
  • Add a Transformation class that contains the necessary attributes and behaviors
  • Add the necessary attributes and behaviors to implementations of SimpleContent

Adding Transformations using a Helper

Adding Transformations using Stand-Alone Interfaces

Adding Transformations using Individual Interfaces

The Best Way to Add Transformations

The AbstractTransformableContent Class

javaexamples/visual/statik/AbstractTransformableContent.java