CS 2302, Fall 2014 Graphics Concepts Color Concepts 11/17/2014 2 - - PowerPoint PPT Presentation

Graphics Concepts

CS 2302, Fall 2014

11/17/2014 2

Color Concepts

11/17/2014 3

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 4

Color Spectrum

• Color can also be taken to mean a physical characteristic
• f 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 5

Human Eye Sensitivity

11/17/2014 6

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 7

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 8

RGB Model

11/17/2014 9

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 10

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 11

RGB Model and Hardware

• The RGB model can be implemented in hardware by

covering a screen with small dots that can glow either red

• r blue or green
• By varying the intensity at which these dots glow, different

colors can be simulated

• RGB has

11/17/2014 12

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
• n different displays

11/17/2014 13

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 14

Mixing Graphical Components

• Very often in graphical images, two components will
• verlap. 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 15

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 16

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 17

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 18

US Capitol

11/17/2014 19

Using Color in Android

11/17/2014 20

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 21

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 22

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 23

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 24

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 25

Using Color Class Resources

• Set the color of one TextView using a predefined color
• Set the color of the other TextView using RGB
• Goldenrod is a standard color name with RGB equal to

(218, 165, 32)

11/17/2014 26

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 27

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 28

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 29

Drawing in Android

11/17/2014 30

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 31

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 32

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 33

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 34

Supporting Classes

• There are numerous supporting classes needed to carry
• ut 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 35

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' – Characteristics of text such as font family, font size, and

weight

11/17/2014 36

A Widget to Draw On

• Since drawing is carried out when the system calls the
• nDraw 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 37

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 38

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 39

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 40

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 41

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 42

Drawing Text

• Some terminology

– Baseline – Ascent, descent – Leading – Font family

• Drawing text

– Alignment