Lecture 02: Position and Color

COSC 225: Algorithms and Visualization

Spring, 2023

Announcements

Git Help
Mozilla Web Docs (MDN)
Assignment 01 Due Friday

Outline

Discussion: ChatGPT, or Existential Dread
Drawing Boxes
- box drawing activity
Color

Existential Dread

(Web) Programming and ChatGPT Discussion Questions

Does the existence of ChatGPT affect your outlook and/or motivation for studying web development? If so, how?
Does ChatGPT affect what and how you want to learn about web development?
What is a sensible course policy for the use of ChatGPT?

Question 1

Does the existence of ChatGPT affect your outlook and/or motivation for studying web development? If so, how?

Question 2

Does ChatGPT affect what and how you want to learn about web development?

Question 3

What is a sensible course policy for the use of ChatGPT?

My Take & Advice

Trope. Most of a SWE’s work is done by searching StackOverflow.

ChatGPT already “knows” the accumulated knowledge of StackOverflow.

Prediction. Any work that can be accomplished solely by searching StackOverflow will have essentially no market value in the near-term future.

Advice

focus on understanding the fundamental principles of a system
embrace the process of learning/building a system

Back to HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a(n almost) minimal HTML file.</p>
  </body>
</html>

Last Time

element: logical part of a document
- e.g., headings, paragraphs, emphasized text, etc.
- document structure is a tree with html element as root
tag: syntax to demarcate an element
- e.g., <p>some text in a paragraph.</p>
- nesting elements defines parent/child relationship
attribute: specify features of an element
- e.g., <html lang="en">...</html>

Today

Drawing Boxes with divs!

Mondrian Composition II in Red, Blue, and Yellow source: Wikipedia

HTML Tags

HTML specifies many tags with specific semantics

h1, h2,… for headings
p for paragraphs
ol for ordered lists
complete list on MDN

The tag div is a generic content division element

specifies logical divisions of a document
default display is uninteresting

Example

boring-divs.html

From `div` to Boxes

By default, div elements resize to fit their content

We can modify div display style with style attribute:

background-color
width
height

Example:

<div style="background-color: black; width: 300px; 
height: 300px;"></div>

Little Boxes Demo

boxes.html

`div` Positioning

By default, the positioning of (div) elements is static:

position is fixed according to “standard flow”
each div occupies its own horizontal block

We can set a location with top and left style attributes

must also specify how to interprate values of top, left with the position style attribute
- position: static; default position (top and left don’t affect position)
- position: relative; moves div relative to its default (static) position
- position: absolute; places div relative to its parent’s position

Pair Activity: Draw This!

overlapping-boxes.html

Style Attributes

background-color
width
height
position:
- position: absolute;
- position: relative;
top
left

More Colors?

HTML/CSS have some predefined colors, but how can we represent more colors?

Interlude

Color and Perception

What is Color?

Color, Three Ways:

subjective perception of color
physical production of color
formal representation of color

Content Warning: Massive oversimplifications coming up!!!

Color and Light

Physics $\implies$ Perception

Color perception begins with light
- light enters the eye
- light stimulates receptors in the retina
- retinal stimulation results in perception (somehow)
“Pure” light has two attributes
- wavelength: hue (e.g., blue, green, red)
- intensity: brightness

image source: Wikipedia

Perception of Pure Light

“Trichromatic” humans have three types of color receptors (cones) in their retina
each receptor has characteristic sensitivity to different wavelengths

image source: Feynman Lectures on Physics

Natural Light

“Natural” light comprised of different wavelengths in different proportions

image source: Wikipedia

Perception of Color

Perception of color determined by the amount each color receptor is stimulated

many different light power spectra correspond indistinguishable colors
$\implies$ it is possible represent many colors by “mixing” a fixed set of colors

Generation of Color

Question. How do color monitors/projectors create so many colors?

Display is a 2d grid of pixels
Each pixel contains multiple (3?) light producing elements
- red
- green
- blue
Intensities of each element can be controlled independently

Different Types of Displays

Engineering $\implies$ Perception

So far:

can generate light with different characterstics:
- vary intensity (brightness) of three different pixel elements
- red, green, blue
light emitted by pixels stimulates retina
- red pixel light stimulates red cones more
- …
relative stimulation of different cones in retna $\implies$ perception of different colors

Formal Representation of Color

A color that can be represented on a computer screen is represented by three values:

intensity of red sub-pixel
intensity of green sub-pixel
intensity of blue sub-pixel

Color is a three-dimensional object!

In HTML: rgb(red, green, blue)

red, green, blue are integers from 0 to 255.
$256^3 \approx 1.7$ million colors!

Color Picker Demo

Observation

Manipulation of r, g, b color values is not intuitive

red, green, blue have natural physical interpretations

combinations of red, green, blue do not have natural perceptual interpretations (at least to me)

Question. What are the RGB values of the color above?

Next Time

Quiz 01 (paper)
- printout of a simple website
- you identify:
  1. all elements
  2. type (i.e., tags)
  3. tree structure of document
More on color
- different color representations
- accessible color palettes
Styling with CSS