A Quick Trip Through Chapter 1

I'm not the biggest fan of the book
- The "Top Down Approach" means we will cover topics over and over again.
- However, if I don't to it this way, you will be looking in seven different places for information.
Graphics Systems
Components (Physical)
- Input Devices
- CPU
- GPU
- Memory
  - Both CPU and GPU
- Framebuffer
- Output Device
Look at the image on page 5.
Note, this may be spread across multiple hardware platforms.
The framebuffer
- Originally a one bit per pixel store.
- More bits -> more colors
- At one point memory was a problem.
  - It was expensive and hard to purchase "large" chunks.
  - Wikipedia: Evens and Sutherland built the first commercial 512x512 pixel 8 bit gray scale framebuffer for $15,000
  - That's 2Mb. (NOT MB)
  - So much of the development of graphics was ruled by this limitation.
- Now normally R,G,B, α
  - Frequently depth buffers have 24 bits per pixel for color
    - And 8 bits for alpha.
    - $256^3 \approx 16.8$ million colors
    - My display $5040 \times 1050 \approx 5.3$ million pixels
    - I have three+ colors for every pixel
  - Modern high end systems can use 12 bits per color.
    - This is 4K gradations per color
    - And you will never reach ${2^{12}}^3 \approx 6.9\times10^{10}$ pixels.
- Depth and other stored attributes
- And two copies for double buffering
- Modern end GPU's probably don't have dedicated frame buffers.
- But the idea is still valid.
CRT or other display
- There were vector CRTs but they went away early.
  - But you still see devices like this in plotters, and laser light shows.
- Look at the pictures on 7 and 8
- I really don't care about the CRT terms (Interlaced, refresh rate, ...)

Raster vs Vector

A raster device displays an array of pixels.
- This is discrete
- You can't zoom nicely, it becomes pixelated
A vector device somehow displays based on continuous lines.
- Think pen.
Raster devices dominate for display
Vector graphics are the common form of display specification.

Vector Raster

Scale Factor:

function RedrawVector(scale) {
     // clear the screen
     VectorCTX.clearRect(0,0,VectorCanvas.width, VectorCanvas.height);

     // save the state
     VectorCTX.save()

     // change the scale
     VectorCTX.scale(scale,scale);
     VectorCTX.translate(TX, TY);

     // draw the image
     VectorCTX.beginPath();
     VectorCTX.moveTo(10,10);
     VectorCTX.lineTo(37,92);
     VectorCTX.lineTo(279, 294);
     VectorCTX.lineTo(10,10);
     VectorCTX.closePath();
     VectorCTX.stroke();

     // restore the state
     VectorCTX.restore();
     return;
}

ctx.clearRect(x,y,width, height)
- Clears the specified region of the canvas
ctx.save() saves the current state of the context on a stack
- This is a common trick.
- We will discuss transformations later, but I need them for this demo.
- The context is pushed onto a stack.
- .restore() pops the stack.
ctx.scale(a,b) scales the points.
- newx = x * width; newy = y * height
- But it also scales widths, dashes, ...
- Multiple scales are cumulative.
  - Thus the .save() and .restore()
ctx.translate(Tx,Ty) scales the points.
- Translates by Ty and Ty

function RedrawRaster(scale) {
     RasterCTX.clearRect(0,0,RasterCanvas.width, RasterCanvas.height);
     RasterCTX.save()
     RasterCTX.scale(scale,scale);
     RasterCTX.translate(TX, TY);
     RasterCTX.drawImage(RasterImage,0,0);
     RasterCTX.restore();
     return;
}

ctx.drawImage()
- Draws an image on the screen
- This is more of an image processing issue, ans somewhat outside of the context of our discussion.
Call backs for key presses
- We will be back to cover this in more detail later.
- But I wanted to introduce the concept.
- An item has focus when it is selected.
  - Pressing the tab key in the browser will change focus.
  - But the canvas does not take focus by default.
    - To turn this on, set the tabIndx property to be 0
    - ```
    var RasterCanvas = document.getElementById('rasterCanvas');
    ...
    RasterCanvas.tabIndex = 0;
```
- Now the canvas can receive focus, and interact with the user.
- We then need to add an event listener to the canvas
  - object.addEventListener(description, callback)
    - There are many different event descriptions
    - We are interested in keypress events right now.
    - ```
    RasterCanvas.tabIndex = 0;
    RasterCanvas.addEventListener("keydown", Keypress);
```
- The function is to be called when the event occurs.
  - It is passed an event object
  - This generally has information about what happened.
  - function Keypress(evnt) { switch (evnt.key) { case 'w': Up() break; case 'a': Left(); break; case 's': Down(); break; case 'd': Right(); break; } }
Converting from vector to raster is called rasterization
- We must eventually rasterize any image for a framebuffer based device.
- But we want to delay that until the "last minute"