psych.hanover.edu

Download Report

Transcript psych.hanover.edu 

Introduction to Media for Webbased Research
John H. Krantz
Hanover College
Workshop on Web Research
Centre for Affective Sciences, May 2008
Outline
•
•
•
•
Background
Graphics and Images
Video
Color and Lighting
The General Beast
CRT
LCD (Flat Panel)
Background
• Screen formats are changing
– Original: 4 x 3 (Width is 4 to Height's 3)
– New (driven by HDTV) is 16 x 9
Screen Formats
Screen
Formats
Graphics vs. Images
• Some definitions: mine for clarity here:
– Graphics Def: computer generated or drawn by
you.
– Image: scanned, captured, take photograph or an
graphic file not generated by you.
– Difference:
• In a graphic, you can directly manipulate the elements
because you drew them – Sprites
• In an image, you can manipulate pixels but not directly
the elements. This has a great impact.
Images or Graphics on the Screen
• Pixels: smallest picture element
– Pixels are not screen dots!!!
– Several dots (at least three, one of each color) make up
each pixel)
• Bitmat: An array of information that contains the
information for the image.
–
–
–
–
It is a 3 dimensional array
Width x Height x 24 (8 for each color)
So can be huge
(.bmp and .tif or .tiff are most common bitmaps)
Graphic and Image Formats
– Bitmap (bmp, PCT, Tiff) – big, not good for web
– Graphic Interchange Format (Gif) can animate
• 8 bits of color – palette or lookup table or LUT – no loss
of spatial information
• Can be some legal issues – make sure the generator
legally can generate GIF’s
• Generally best compression for simple graphics – bad
for photos
• Can generate transparent regions
• Can Animate
Graphics and Image Formats
– JPG
• Generally better for images and photos
• Spatial not color compression, can distort image
spatially and more loss with each save
• Now can animate as well.
Bitmapped vs. JPEG File Sizes
Both images are the same relative size.
900kb
.JPEG High Quality ~700kb
ImageJ
• Free at: http://rsb.info.nih.gov/ij/index.html
• Overview
– Java program
– Interface a bit awkward because it is free
– Expandable via plug-ins
• Covers all basic editing and many advanced - very
advanced
• Scientific quality image editor
• Used in many technical applications
• Plugins!
Gimp
• Freeware photo editor that rivals Photoshop
• Works with Layers, allows reediting
• Download: http://gimpwin.sourceforge.net/stable.html
Dynamic Media
• Slideshows
– Why
– Presenting Using Redirects
• Video
– Background
– Delivering in a Webpage
Why Slideshows
•
•
•
•
•
Example 1; Example 2
Indicate sequence of events
Carries sense of change
Sense of momentum in photo
Original Loftus Eye Witness testimony was done this
way
• How?
– One easy way – use redirects
Code for redirect
<html>
<head>
<title>Image Sequence</title>
<META HTTP-EQUIV="refresh" CONTENT="3; URL=page01.html">
• Number is number of seconds before redirect
</head>
<body>
<p>
This will change in 3 seconds, about</p>
<p align = "center">
<img border="0" src="Bobby0000.jpg" width="512"
height="384"></p>
</body>
</html>
Video
• YouTube has changed internet video
• Flash video (FLV) has become the default
standard.
• Example 1; Example 2
Flash Video
•
•
•
•
•
The format has evolved over time
It is getting better and files are getting smaller
Moving to an open source compression
But later videos formats have less reach
Create and Edit with Adobe Flash
(http://www.adobe.com/products/flash/)
Motion Reproduction
• Frame rates of monitors far exceed what is
needed for movement update
– NTSC video: 30 updates per second
– Movies: 24 updates per second
– Most web video 10 to 15 but can be up to 30
frames/sec (and variable)
Computer Video
• Effect of update rate
10 fps
15 fps
24 fps
Probably not enough for speech and subtle facial
expressions.
Flicker
• Critical threshold of flicker rates is about
60 Hz in the fovea
– But gets higher for larger stimuli
• Recommended flicker rates between 66
Hz and 120 Hz (Bridgeman, 1998)
• Most monitors are adequate in this value
• Notice difference between flicker and
frame update rate.
• Wagon wheel effect.
Pixel Duration
• Pixels are not on continuously during a
frame
– In part this is necessary for clean motion
– Typical CRT phosphors last about 4 msec.
(Bridgeman, 1998)
– On LCD and other technologies, persistence
is longer
• Makes motion less clean but flicker less
noticeable
Differences in Persistence
Fast motion will be less clean on an LCD screen
Questions to Ask Yourself
• Is video the only way to do this study?
• How does lighting interact with the stimulus?
• How do the variations in the human visual
system interact with the stimulus?
• If the video is interrupted how is the video
degraded?
• Does the increase in sample generality offset
the loss of control?
General Video Issues
• Image size
– Keep it small
– 320 x 240 is not uncommon
• Image color depth
– Normally full color
• Video Length
– The shorter the better
– People may not stay
– Network more likely to cause problems
Techniques
• Option 1
– Buy Adobe Flash
• Option 2
– Use .AVI, .MOV, .WMV, and .MPG format,
whichever is convenient, and upload to YouTube
or other service
• Use other format and editors
– Note reduced reach and, thus, loss of participants
Editing: with QuickTime Pro
• Inexpensive addition QuickTime Player
• Basics
– Opens MOV, mpg, avi, mp3, etc.
– Get Movie Information on Movie Menu (ctrl-j in
Windows)
– Tracks: separate slices of information: played at
same time as other tracks
• Look under the Edit menu
How to deliver
Progressive Download
• Will play when enough has
been downloaded
• Okay for small
• Or not large number of
videos
Streaming
• Only stream is sent, it is
never whole file
• Better for longer
• Also for security
Saving for Web
• Format:
– You must compress
• Uncompressed files will be very large
• Lead very slow download
• Recent algorithm
– Duration
• For same reason, keep videos short
Chromatic Issues
The Trichromatic Theory
Color Opponent Theory
Color Picker
The Color Gamut
Glare
Color Blindness
The CIE Color System
– A set of Equations that
allow predictions of
matching.
– Used in photo printing,
TV and film.
– Wyszecki & Stiles
(1967)
– The Color Gamut
• The range of colors
reproducible by any system
The Effect of Illuminance on Gamut
In Dark
With Lights on
With Lights on
and 30%
Luminance
Level
Illuminance: Example: Dark
CRT
LCD
Illuminance: Direct Room Light
CRT
LCD
Color
w
llo
w
G
re
en
G
re
en
Ye
llo
w
Ye
O
ra
ng
e
ng
e
e
ed
ra
ng
R
in
k
ot
P
O
ra
ig
ht
llo
Br
Ye
nk
ch
ia
Pi
le
rp
le
in
kl
e
Pu
rp
O
ig
ht
w
ed
ue
Bl
ue
Fu
s
H
e
ue
Bl
Bl
Pu
riw
nk
y
llo
Br
Ye
R
Pi
m
lu
tB
ua
en
en
Aq
G
re
ar
k
Pe
D
ed
iu
M
a
Li
gh
Se
G
re
Perceived Color Temp
One Color Study
200.00
180.00
160.00
140.00
120.00
100.00
80.00
60.00
40.00
20.00
0.00
Another Color Study
1
Mean Plesantness Rating
Laboratory
Online
Laugwitz, 2001
0
-1
-2
0
1
2
3
4
Hue Difference
5
6
Illuminance
• Agostini & Bruno (1996)
– Accuracy of the perceived stimulus is affected by
the amount of illuminance.
• D. F. Neri (1990)
– Combination of light and gamut changed
chromaticity
• Request close windows and turn off
unnecessary light
• Do not use subtle color differences
Color Blindness
Description
Color Blindness
Color Blindness
Color Blindness
How to handle
• Screening questions?
• Large sample and random assignment
• Pre-test on color blind