CS 2302, Fall 2014
Graphics Concepts
Color Concepts
11/17/2014
2
Color



Color is a “visual perceptual property”
Color is something that we perceive, it is a product of our
visual system: eyes and brain
Color is just one property of what we perceive
11/17/2014
3
Color Spectrum





Color can also be taken to mean a physical characteristic
of certain electromagnetic phenomena
The image below is a picture of the spectrum. This mainly
includes those wave-lengths of electromagnetic emissions
that are seen with the human eye
The numbers are the wave-length of the light.
Nominally, this is the distance from one peak of an
electromagnetic wave to the next peak.
Shorter wavelength is higher frequency.
11/17/2014
4
Human Eye Sensitivity
11/17/2014
5
Human Eye Sensitivity




Electromagnetic waves in the visible spectrum cause cells
in the retina of the eye to react
Different cell types respond to different wavelengths of
light
Roughly speaking, different types of cone cells respond to
red, blue and green light
Rod cells are more sensitive. They are what we use to see
when light levels are low. However, rod cells do not
provide color pereception
11/17/2014
6
RGB Model




Typically what we perceive as a particular color is a
mixture of many wavelengths of 'pure color'
This complex mixture of wavelengths would be hard to
simulate
It turns out that we can 'fool' the eye by mixing red and
blue and green in various intensities
This is the RGB model of color
11/17/2014
7
RGB Model
11/17/2014
8
RGB Model



Various colors can be described as a mixture of Red and
Blue and Green in varying intensities
Let 0 be the absence of a component and 1 be the most
intense possible
Then R = 1, G = 0, B = 0 is the most intense red that can
be represented

R = 1, G = 1, B = 0 is the most intense yellow

R = 1, G = 1, B =1 is the most intense white

R = 0, G = 0, B = 0 is black

R = .5, G = .5, B = .5 is gray
11/17/2014
9
RGB Model

In usual practice, the intensity of each component is
represented by an integer in the range from 0 to 255,
inclusive

This means each component can be represented by 8 bits

A full color can be represented in 24 bits or 3 bytes

Most people cannot tell the differences in colors when
changing a single value in a mixture
11/17/2014
10
RGB Model and Hardware



The RGB model can be implemented in hardware by
covering a screen with small dots that can glow either red
or blue or green
By varying the intensity at which these dots glow, different
colors can be simulated
RGB has
11/17/2014
11
RGB Limitations


Darkening a medium orange to a dark orange requires an
unintuitive change in R and G and B
The RGB representation of a color may look quite different
on different displays
11/17/2014
12
HSL and HSV Models






There are other ways to describe colors
The Hue-Saturation-Lightness and Hue-Saturation-Value
describe colors in way less tied to hardware (both silicon
and carbon based)
Hue represents a point on the spectrum
Saturation represents how deep the color is, ranging from
gray to pastel to intensely tinted
Lightness and Value measure the overall brightness of a
color
There are algorithms for transforming between RGB, HSL
and HSV
11/17/2014
13
Mixing Graphical Components




Very often in graphical images, two components will
overlap. How are the colors of the two images mixed?
One rule is to use the ‘z axis’: the component that is
nearest to us will obscure the other
In some cases, the colors will be mixed in some way. We
perceive that as the front component being partially or fully
transparent
The alpha channel specifies complete transparency at 0
and complete opacity at some maximum value, depending
on the system
11/17/2014
14
32-bit color representation




By using the range 0 to 255 for alpha, a fourth byte can be
used to specify colors
This is called ARGB
Each channel (red, green, blue, alpha) is represented by a
value from 0 to 255. This means each channel takes one
byte or 8 bits. So, all four take up 32 bits
Using 32 bits works well with typical hardware.
11/17/2014
15
Pixels



Images are displayed on modern systems using
rectangular arrays of dots. Each dot can be independently
set to whatever colors the device is capable of displaying
Each dot is called a picture element or, for short, a pixel
The number of rows and columns in a display is called the
resolution

Resolution is typically stated as rows x columns.

Another important measure is the density of pixels
11/17/2014
16
Aspect Ratio




The ratio of the number of rows to the number of columns
is called the aspect ratio and is often quoted as a ratio
My current display is 1920 rows by 1080 columns. This is
an aspect ratio of 1920:1080 which reduces to 16:9
Aspect ratios sometimes can explain visual anomalies.
Folks will tend to be very aware if you modify the aspect
ratio of a picture
11/17/2014
17
US Capitol
11/17/2014
18
Using Color in Android
11/17/2014
19
Warning!
If you have worked with Java desktop GUI
applications (AWT or Swing) you will have used
the Color class in the regular Java library. The
Color class provided for Android is completely
different.
11/17/2014
20
Class android.graphics.Color


The Android Color class is not intended to be instantiated,
it is used only to hold several methods useful in
manipulating colors
Reference:
http://developer.android.com/reference/android/graphics/Color.html

Predefined colors

RGB methods

HSV methods

Lightening and darkening color
11/17/2014
21
A Demonstration Project

We'll use a simple project to demonstrate using color in
Android

Start a new Android project

The layout will be two TextView's arranged vertically

The two views will be configured to take up the usable
space

The weight will be used to fill vertically but still share

Erase any text in the two views

Given the views helpful id's
11/17/2014
22
Setting Color Directly


Set the color of one view by setting the background
property directly
Create a color entry in styles.xml (in the values folder) and
use that for the other view
11/17/2014
23
Setting Color By Program



We will look at several ways that a program can alter the
color of components
Since the different ways conflict with each other, each
example will replace the previous one
The different examples will be implemented as methods
that are called by the onCreate method
11/17/2014
24
Using Color Class Resources

Set the color of one TextView using a predefined color

Set the color of the other TextView using RGB

11/17/2014
Goldenrod is a standard color name with RGB equal to
(218, 165, 32)
25
More Color Class Resources

Get the red component of the top view and use that to set
the bottom component to just the red part of the top view
11/17/2014
26
More Color Class Resources

Set the bottom view to a darkened version of the top view

This requires converting the RGB to HSV

Modify the V, lowering it

Convert HSV back to RGB

Set the color of the bottom view

If there is time: modify the saturation
11/17/2014
27
Use a Color Resource

We saw how to use a color resource in the user interface
editor

Color resources can be used from the program as well

Define a color resource named test_color

Get a Resources object using getResources

Call the getColor method on the resources object,
providing the color id as a parameter:
R.color.test_color

Use the color number returned.

Don’t use the color id itself, that will not give helpful results!
11/17/2014
28
Drawing in Android
11/17/2014
29
Android Alternatives

Android provides several ways to create graphic images

Drawable objects


Defined by program code

Defined in resource files

Can be manipulated and animated
2D Canvas


More in a moment, this is the approach we will take
3D Canvas
11/17/2014
30
Constructive Graphics



Android supports building graphic images from simple
components
This is sometimes called vector graphics, recalling very
early graphics display systems
The organization of the visible interface and underlying
code is very similar to other systems

Event driven drawing

Constructive graphics
11/17/2014
31
Drawing Surface

Any View can be used as a drawing surface
Reference
Every View has an associated Canvas object that
provides various drawing methods



Canvas reference
Even buttons and other widgets can be drawn on,
though that may conflict with the drawing done for their
basic look
View has a method onDraw() that is called by the system
when any drawing needs to be done


11/17/2014
32
Why Event Driven Drawing?



In older systems, especially before Windows and Linux,
drawing was carried out directly and immediately by
programming commands
In Android and other GUI systems, drawing is delayed until
the system asks for it by calling a method
This is because there are many situations in which the
drawing may be needed, based on external circumstances

The application is starting

The application is being uncovered

The application is being un-minimized
11/17/2014
33
Supporting Classes


There are numerous supporting classes needed to carry
out effective drawing.
We mention just a few for now (the links lead to reference
pages)

Color (already discussed)

Paint

Paint.Style

Path (will be discussed later)
11/17/2014
34
Class Paint


Paint objects are used to specify many characteristics of
drawing
Paint can be used to specify

The color used to outline and/or fill shapes

The style of drawing a shape: filled or outlined

Width of lines and curves

How lines and curves will be 'joined' and 'capped'

11/17/2014
Characteristics of text such as font family, font size, and
weight
35
A Widget to Draw On



Since drawing is carried out when the system calls the
onDraw method in View, we must create a new class that

Extends View

Overrides onDraw
The overriding method will carry out the drawing
The onDraw method takes one parameter, a Canvas that
can be used to create the graphics we wish
11/17/2014
36
Start an Application


Start a new Android application
In the same package with the main activity, create a new
class named ViewForGraphics
11/17/2014
37
View Details


View does not have a default constructor, so we must
provide at least one constructor that uses 'super'
It is convenient to use the constructor that takes two
parameters
public ViewForGraphics(Context context, AttributeSet attrs)

This will allow the new class to be used like any other
widget in the GUI editor
We won't use that constructor in code
When overriding onDraw, call the super method to make
sure any standard actions are taken


11/17/2014
38
Creating the Interface

In the GUI editor, remove the standard TextView

Find the new 'widget' at the bottom of the palette

Drag the new widget into the editing area

Set the widget to fill the space completely

Running the app at this point will show nothing
11/17/2014
39
Creating Paint

Any drawing needs paint

A default Paint object will work, but is monochrome

Define a color

Define the style for filling or not

Define the stroke width
11/17/2014
40
Drawing a Figure

Start with a Paint object

Use one of the drawing methods from Canvas


Rectangle, Circle and Oval are easy to use
The example we will do is

Draw a rectangle outline

Draw a filled oval using the same coordinates

The oval touches the sides of the rectangle

Drawing a circle uses the center and radius, so beware!
11/17/2014
41
Drawing Text


Some terminology

Baseline

Ascent, descent

Leading

Font family
Drawing text

11/17/2014
Alignment
42