Lecture 02: Position and Color

COSC 225: Algorithms and Visualization

Spring, 2023


  1. Git Help
  2. Mozilla Web Docs (MDN)
  3. Assignment 01 Due Friday


  1. Discussion: ChatGPT, or Existential Dread
  2. Drawing Boxes
    • box drawing activity
  3. 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.


  • 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">
    <meta charset="utf-8">
    <title>Hello, World!</title>
    <h1>Hello, World!</h1>
    <p>This is a(n almost) minimal HTML file.</p>

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>


Drawing Boxes with divs!

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


HTML specifies many tags with specific semantics

The tag div is a generic content division element

  • specifies logical divisions of a document
  • default display is uninteresting



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


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

Little Boxes Demo


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!


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?


Color and Perception

What is Color?

Color, Three Ways:

  1. subjective perception of color
  2. physical production of color
  3. 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:

  1. intensity of red sub-pixel
  2. intensity of green sub-pixel
  3. 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


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

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