程序代写 Computer Science and Engineering  The Ohio State University

Computer Science and Engineering  The Ohio State University

Color and Images
Computer Science and Engineering  College of Engineering  The Ohio State University

Copyright By PowCoder代写 加微信 powcoder

Colors in CSS
Use: fonts, borders, backgrounds
Provides semantic signal:
Green – go, success, complete, solution Red – stop, failure, incomplete, problem Yellow – yield, warning, attention
Helps to set mood/emotion/tone: Bright – cheerful, playful, positive Dark – somber, serious, negative Warm – energetic, alert, active
Cool – calm, tranquil, peaceful
Computer Science and Engineering  The Ohio State University

Elementary Color Theory
Computer Science and Engineering  The Ohio State University
Combination of
Physics (eg wavelengths in nm)
Nonspectral colors (eg pink, brown, white) require
presence of multiple wavelengths
Biology (perception of “red” vs “yellow”)
Visible spectrum: 390-700nm

Color Perception
Human eyes have 3 types of cones Respond to different wavelengths (LMS)
Color = cone response
Computer Science and Engineering  The Ohio State University

Metamerism
Computer Science and Engineering  The Ohio State University
Different (continuous) spectra that
stimulate our eyes in identical ways
Example: white
Spectrum 1: all wavelengths equally present
Spectrum 2: three wavelengths present, stimulating LMS cones equally
Consequence: continuous spectrum can be
projected down to 3 dimensions
Consequence: Different spectra with indistinguishable (to humans) color

Color Mixing
Computer Science and Engineering  The Ohio State University
There are two ways to combine colors
1. Subtractive: Color is a filter
2. Additive: Color is a light source
Mixing = filter out both
Used for printing (& dyes, paints, gels)
Mixing = sum
Used for monitors

CMYK: Subtractive Color Mixing
Computer Science and Engineering  The Ohio State University
Filters transmit different spectra
Primary colors: cyan, magenta, yellow
Mixture transmits the product of both Mix all three primaries = black
Black (K) added for quality and cost Traditional set (RYB) popular for painting
Primary yellow (transmits R & G) (absorb B)

Colors as Filters
Computer Science and Engineering  The Ohio State University
Filters out (only) blue
Rosi et al., Euro. J. of Physics, 37(6), 2016

Additive Color Mixing: RGB Cube
Computer Science and Engineering  The Ohio State University
primary secondary
http://www.flickr.com/photos/ethanhein/3103830956/
#fff /*white*/
#000 /*black*/

HSL Color Wheel (100% Sat.)
Computer Science and Engineering  The Ohio State University
http://www.erinsowards.com/articles/2011/01/colors.php

HSL Grid for Red (ie 0,x,y)
Computer Science and Engineering  The Ohio State University
(0,75%,88%)
(0,100%,50%)
(0,0%,25%)

CSS Color Values
 Keywords: case-insensitive identifiers red, navy, firebrick, chocolate
 RGB as decimal (0-255), percentage, or hex rgb (255,0,0) /*pure red*/
rgb (100%,0%,0%)
#f00 /*expand by repeating digit*/
 HSL (Hue, Saturation, Light)
hsl (0,100%,50%) /*full bright red*/
 Alpha channel (transparency): 1 is opaque! rgba (255,0,0,0.5)
hsla (0,100%,50%,1)
Hue (0-360) is angle on color wheel: 0 is red, 120 green, 240 blue
Saturation & light are both %’s
Computer Science and Engineering  The Ohio State University

Color Keywords
Computer Science and Engineering  The Ohio State University

Color Depth
“Depth” = # of bits in representation
8 bits : 256 different colors
24 bits : 16,777,216 different colors (eg 8 bits each for r,g,b)
Alpha may be (incorrectly) included rgba is a point in 4-dimensional space
Problem: image color depth > display
color depth
Quantization: each pixel gets closest available color (leads to banding) Dithering: add noise, which looks better!
Computer Science and Engineering  The Ohio State University

Quantization of Continuous Func
Computer Science and Engineering  The Ohio State University

Quantization vs Dithering
Computer Science and Engineering  The Ohio State University

Quantization vs Dithering
Computer Science and Engineering  The Ohio State University
www.coffeecup.com/help/articles/dither-modes-in-animation-studio/

HTML Tag Attributes
Computer Science and Engineering  The Ohio State University
src: location of image file
width, height:
alt: text to show if graphic can not be displayed or seen (ie alternative) title: text to augment displayed graphic (eg tooltip)
Area in window to reserve for image Image is scaled to those dimensions These attributes affect browser flow, regardless of when/if image is displayed

Image Representation
Computer Science and Engineering  The Ohio State University
Raster vs vector graphics
Compression of raster images
Lossy: better compression, lower quality image
Lossless: largest file size, best quality
Raster: stored pixel-by-pixel Vector: mathematical description

Major Formats
Computer Science and Engineering  The Ohio State University
 Raster graphics, lossy compression (oldest)  8 bit, basic transparency (on/off)
 Frame-based animation (groan)
 Good for small file size, crisp lines, logos
 Raster, lossy compression
 24 bit, no transparency
 Good for photos, gradual gradients
 Raster, lossless (but still often good) compression  Variable depth, full alpha transparency
 Good replacement for GIF (but no animation)
 vector graphics (newest)
 Good for crisp lines, simple logos, graphs

Scaling Images
Vector graphics scale perfectly
Raster images should be pre-scaled
Width (height) attributes of image tag should match actual width (height) of image
Computer Science and Engineering  The Ohio State University

Alternative: CSS
Computer Science and Engineering  The Ohio State University
.deleteButton {
background:
-webkit-linear-gradient(top, #be6868 0%, #941b17 50%,
#880d07 50%, #be483c 100%); border: 3px solid #000; color: #fff;
cursor: pointer; font-size: 15pt;
padding: 10px 34px; text-shadow: 0 -1px 0 #000; border-radius: 13px; box-shadow: 0 1px 0 #454545;

Recall: Blocks, Inline, and Flow
Computer Science and Engineering  The Ohio State University
paragraph heading

Floating: Remove From Flow
Computer Science and Engineering  The Ohio State University

Floating: Overlays Block
Computer Science and Engineering  The Ohio State University
float: left
codepen.io/cse3901/pen/bLYdLz

Problem: Blocks Below
Computer Science and Engineering  The Ohio State University
Floating element may be taller than
containing element
May be undesirable, eg for footer that
should be below everything including

Solution: clear
Computer Science and Engineering  The Ohio State University
Styling for block element after float
#footer { clear: left; }
Requires that side to be clear of
id=”footer”

CSS: Grid Layout
Computer Science and Engineering  The Ohio State University
Display property for arranging elements
in a 2D grid
Parent element is the grid container
Direct children are the grid items
Style with CSS property (display: grid) Set number/size of rows/columns
Set gap between rows/columns
Set alignment, justification, placement
One item can be sized/placed to a grid are a (ie a rectangular subgrid)

Grid Layout: Example
Computer Science and Engineering  The Ohio State University
.wrapper {
display: grid; grid-template-columns: 1fr 2fr 2fr; grid-template-rows: repeat(4,20px); grid-gap: 20px;