Lecture 11: 2D Graphics

# Creación de Videojuegos

### 2D Graphics

---

# Rendering Pipeline

## Or: How do we actually get something onto the screen

---

# Rendering

* Model coordinates need to be translated to world coordinates (where is the mesh)
  
  * World coordinates are then translated to Camera coordinates (where in the field of view of the camera is the mesh?)
  
  * The Camera coordinates need to be projected onto a Viewport (objects that are further away become smaller)
  
  * The Viewport is then mapped onto a window on the screen
  
  * We will discuss the math behind this next week
  
---

# Camera

---

# Clipping and Culling

* Many triangles do not need to be rendered
  
  * Anything outside the frustum or not facing the camera can be discarded (Frustum culling and backface culling)
  
  * Triangles that are behind other triangles can also be culled (Occlusion culling)
  
  * Triangles that are partially inside the frustum have to be clipped (cut into pieces)
  
---

# Backface culling

* How do we recognize what is facing away from the camera?
  
  * Remember the dot product
  
$$ \vec{a} \cdot \vec{b} = \cos(\alpha) \cdot |a| \cdot |b| $$

* The cosine is negative iff the vectors point in opposite directions

* Discard any triangle where the face normal points in the same direction as the vector pointing from the camera to the triangle
  
---

# Painter's algorithm

* How do we avoid showing triangles that are occluded?

* When you paint, whatever you draw last is visible on the canvas 
  
  * Let's use the same idea with triangles!
  
  * Draw triangles starting with the one furthest from the camera 
  
  * The closer a triangle is to the viewer, the later it is drawn
  
  * If a triangle is partially occluded, you will still see the rest
  
---

# Which order?

<img src="/CI-2700/assets/img/painters.png" width="50%"/>
  
---

# z-Buffer

* Instead of deciding per triangle, decide per pixel 
  
  * Store z-coordinate (depth) in a special buffer
  
  * When something would be drawn on a pixel:
       
       - If the z-coordinate of the new object is greater than the buffer, don't draw
       - Otherwise draw, and update the buffer 
       
  * The z-Buffer usually exists in hardware
  
---

# Occlusion culling

* Both of these approaches still attempt to draw everything
  
  * In large scenes this can be very expensive
  
  * Specialized algorithms exist to determine objects that are occluded
  
  * Such objects can be culled entirely
  
  * Unity has an Occlusion culling algorithm, but it requires some setup
  
---

# Shaders

---

# Lines

---

# Lines
  
  * A *vertex* (plural: vertices) is a point in (2D or 3D) space
  
  * A *line* connects two vertices
  
  * Lines are the basic building blocks of 2D vector graphics
  
  * You can assemble lines into polygons
   
  * Later, we will also see how to use predrawn images

---

# Rasterization of Lines

* How do we draw a line on the screen?
  
  * Pixels!
  
  * Rasterization: Take a line and map it to pixels
  
  * But pixels are arranged in a rectangular grid
  
  * How do we draw diagonal lines?
  
  * Idea: Draw ideal line, and for each column of pixels make the pixel black that is closest to the line!
  
  * Bresenham's algorithm!
  
---
  
# Bresenham's algorithm

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="700px"
   height="448px"
   viewBox="0 0 832 448"
   id="Illustration of Bresenham's line algorithm">
  <path fill="#999999" stroke="none" d="M 64,64   h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 128,64  h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 192,128 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 256,128 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 320,192 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 384,192 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 448,192 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 512,256 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 576,256 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 640,320 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 704,320 h +64 v +64 h -64 Z" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,0   h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,64  h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,128 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,192 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,256 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,320 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,384 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,448 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,0   v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 64,0  v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 128,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 192,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 256,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 320,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 384,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 448,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 512,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 576,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 640,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 704,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 768,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 832,0 v +448" />
  <path fill="none" stroke="#000000" stroke-width="4" d="M 96,96 L 736,352" />
</svg>

---
  
# Bresenham's algorithm: result

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="700px"
   height="448px"
   viewBox="0 0 832 448"
   id="Illustration of Bresenham's line algorithm">
  <path fill="#000000" stroke="none" d="M 64,64   h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 128,64  h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 192,128 h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 256,128 h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 320,192 h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 384,192 h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 448,192 h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 512,256 h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 576,256 h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 640,320 h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 704,320 h +64 v +64 h -64 Z" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,0   h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,64  h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,128 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,192 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,256 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,320 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,384 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,448 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,0   v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 64,0  v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 128,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 192,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 256,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 320,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 384,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 448,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 512,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 576,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 640,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 704,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 768,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 832,0 v +448" />
</svg>

---

# Aliasing

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="700px"
   height="448px"
   viewBox="0 0 832 448"
   id="Illustration of Bresenham's line algorithm">
  <path fill="#999999" stroke="none" d="M 64,64   h +64 v +64 h -64 Z" />
  <path fill="#00cc00" stroke="none" d="M 128,64  h +64 v +64 h -64 Z" />
  <path fill="#cc0000" stroke="none" d="M 128,128  h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 192,128 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 256,128 h +64 v +64 h -64 Z" />
  <path fill="#cc0000" stroke="none" d="M 320,128 h +64 v +64 h -64 Z" />
  <path fill="#00cc00" stroke="none" d="M 320,192 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 384,192 h +64 v +64 h -64 Z" />
  <path fill="#00cc00" stroke="none" d="M 448,192 h +64 v +64 h -64 Z" />
  <path fill="#cc0000" stroke="none" d="M 448,256 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 512,256 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 576,256 h +64 v +64 h -64 Z" />
  <path fill="#cc0000" stroke="none" d="M 640,256 h +64 v +64 h -64 Z" />
  <path fill="#00cc00" stroke="none" d="M 640,320 h +64 v +64 h -64 Z" />
  <path fill="#999999" stroke="none" d="M 704,320 h +64 v +64 h -64 Z" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,0   h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,64  h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,128 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,192 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,256 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,320 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,384 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,448 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,0   v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 64,0  v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 128,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 192,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 256,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 320,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 384,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 448,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 512,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 576,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 640,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 704,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 768,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 832,0 v +448" />
  <path fill="none" stroke="#000000" stroke-width="4" d="M 96,96 L 736,352" />
</svg>

---

# Anti-Aliasing

* What if we use other pixels that are touched by the line, too?
  
  * Maybe not to show them in black, but some sort of gray?
  
  * How do we determine "how gray" a pixel should be?
  
  * Supersampling! 
  
  * Calculate more pixels than necessary, and take the average value

---

# Supersampling

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="700px"
   height="448px"
   viewBox="0 0 832 448"
   id="Illustration of Bresenham's line algorithm">
  <path fill="#999999" stroke="none" d="M 64,64   h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 64,96   h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 96,64   h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 96,96   h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 128,96  h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 128,128  h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 160,96   h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 160,128   h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 192,96 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 192,128 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 224,128 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 224,160 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 256,128 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 256,160 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 288,160 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 288,192 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 320,160 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 320,192 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 352,160 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 352,192 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 384,192 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 384,224 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 416,192 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 416,224 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 448,224 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 448,256 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 480,224 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 480,256 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 512,224 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 512,256 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 544,256 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 544,288 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 576,256 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 576,288 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 608,288 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 608,320 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 640,288 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 640,320 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 672,288 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 672,320 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 704,320 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 704,352 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 736,320 h +32 v +32 h -32 Z" />
  <path fill="#999999" stroke="none" d="M 736,352 h +32 v +32 h -32 Z" />
  
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 0,32   h +832" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 0,96  h +832" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 0,160 h +832" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 0,224 h +832" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 0,288 h +832" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 0,352 h +832" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 0,416 h +832" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 32,0   v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 96,0  v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 160,0 v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 224,0 v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 288,0 v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 352,0 v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 416,0 v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 480,0 v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 544,0 v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 608,0 v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 672,0 v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 736,0 v +448" />
  <path fill="none" stroke="#EEEEEE" stroke-width="4" d="M 800,0 v +448" />
  
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,0   h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,64  h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,128 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,192 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,256 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,320 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,384 h +832" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,448 h +832" />
  
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 0,0   v +448" /> 
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 64,0  v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 128,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 192,0 v +448" /> 
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 256,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 320,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 384,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 448,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 512,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 576,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 640,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 704,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 768,0 v +448" />
  <path fill="none" stroke="#CCCCCC" stroke-width="4" d="M 832,0 v +448" />
  <path fill="none" stroke="#000000" stroke-width="4" d="M 96,96 L 736,352" />
</svg>

---

# Supersampling: Result

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="700px"
   height="448px"
   viewBox="0 0 832 448"
   id="Illustration of Bresenham's line algorithm">
  <path fill="#000000" stroke="none" d="M 64,64   h +64 v +64 h -64 Z" />
  <path fill="#888888" stroke="none" d="M 128,64  h +64 v +64 h -64 Z" />
  <path fill="#888888" stroke="none" d="M 128,128  h +64 v +64 h -64 Z" />
  <path fill="#cccccc" stroke="none" d="M 192,64  h +64 v +64 h -64 Z" />
  <path fill="#444444" stroke="none" d="M 192,128  h +64 v +64 h -64 Z" />
  <path fill="#444444" stroke="none" d="M 256,128  h +64 v +64 h -64 Z" />
  <path fill="#cccccc" stroke="none" d="M 256,192  h +64 v +64 h -64 Z" />
  <path fill="#888888" stroke="none" d="M 320,128  h +64 v +64 h -64 Z" />
  <path fill="#888888" stroke="none" d="M 320,192  h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 384,192   h +64 v +64 h -64 Z" />
  <path fill="#888888" stroke="none" d="M 448,192  h +64 v +64 h -64 Z" />
  <path fill="#888888" stroke="none" d="M 448,256  h +64 v +64 h -64 Z" />
  <path fill="#cccccc" stroke="none" d="M 512,192  h +64 v +64 h -64 Z" />
  <path fill="#444444" stroke="none" d="M 512,256  h +64 v +64 h -64 Z" />
  <path fill="#444444" stroke="none" d="M 576,256  h +64 v +64 h -64 Z" />
  <path fill="#cccccc" stroke="none" d="M 576,320  h +64 v +64 h -64 Z" />
  <path fill="#888888" stroke="none" d="M 640,256  h +64 v +64 h -64 Z" />
  <path fill="#888888" stroke="none" d="M 640,320  h +64 v +64 h -64 Z" />
  <path fill="#000000" stroke="none" d="M 704,320   h +64 v +64 h -64 Z" />

---

# Anti-Aliasing

---

# Polygons
 
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewBox="0 0 510 120"
   width="800"
   height="280"
   preserveAspectRatio="xMinYMin meet"
   xml:space="preserve"
   id="svg2"
   version="1.1"
   sodipodi:docname="Assorted_polygons.svg"><metadata
     id="metadata18"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     id="namedview14"
     showgrid="false"
      /><g
     id="g3606">
    
    <path
       style="fill:none;stroke:#000000;stroke-width:1.875;"
       id="path4"
       d="M 10.114787,10 27.078676,104.38709 109.07079,84.858729 10.114787,10" />
    <path
       d="m 145.42856,11 -18,87 58,12 18,-87 z"
       id="path8"
       style="fill:none;stroke:#000000;stroke-width:1.875;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
       
    <path
       d="m 234,91 63,18 26,-44 -9,-43 -73,-13 -16,46 28,-18 47,13 -16,33 -20,-6 6,-16 h -26 z"
       id="path10"
       style="fill:none;stroke:#000000;stroke-width:1.875;" />
       
    <path
       d="M 467.16363,8.9826508 444.96255,108.01735 378.35932,20.986857 499.01735,108.01735 477.78154,37.992815 332.02664,108.01735 z"
       id="path12" style="fill:none;stroke:#000000;stroke-width:1.875;"/></g></svg>
       
  * Can be convex or not
  
  * Can self-overlap
  
  * *Simple* polygons: No self-intersections
  
---

# (Simple) Polygons: Flood Fill

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewBox="200 0 250 60"
   width="200"
   height="100"
   preserveAspectRatio="xMinYMin meet"
   xml:space="preserve"
   id="svg2"
   version="1.1"
   sodipodi:docname="Assorted_polygons.svg"><metadata
     id="metadata18"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     id="namedview14"
     showgrid="false"
      /><g
     id="g3606">
       
    <path
       d="m 234,91 63,18 26,-44 -9,-43 -73,-13 -16,46 28,-18 47,13 -16,33 -20,-6 6,-16 h -26 z"
       id="path10"
       style="fill:#0000ff;stroke:#000000;stroke-width:1.875;" />
       
    </g></svg>
       
  * Start at any pixel inside the polygon
  
  * If current pixel already has the target color, or the border color: return 
  
  * Otherwise, color current pixel with target color and recursively call Flood Fill for all four neighboring pixels

---

# Corner cutting

---

# Corner cutting

* We don't need to cut each line segment in half 
  
  * We can use cuts of 1/3 to 2/3, or any other fraction
  
  * This allows us to control the rounding

# Corner cutting with ration 1/3 to 2/3

# Subdivision Surfaces

* You can basically do the same thing in 3D!

<svg xmlns="http://www.w3.org/2000/svg" xmlns:odm="http://product.corel.com/CGS/11/cddns/" xml:space="preserve" width="432px" height="625px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd"
     viewBox="0 0 432 626">
 <g id="Layer 1">
  <defs>
   <radialGradient id="id0" gradientUnits="userSpaceOnUse" cx="325" cy="309" r="47" fx="325" fy="309">
    <stop offset="0" stop-color="#FFFFFF"/>
    <stop offset="0.611765" stop-color="#90A4BD"/>
    <stop offset="1" stop-color="#3F4857"/>
   </radialGradient>
   <radialGradient id="id1" gradientUnits="userSpaceOnUse" cx="224" cy="517" r="39" fx="224" fy="517">
    <stop offset="0" stop-color="#FFFFFF"/>
    <stop offset="0.568627" stop-color="#97AFCC"/>
    <stop offset="1" stop-color="#353D47"/>
   </radialGradient>
  </defs>
  <circle fill="url(#id0)" stroke="#000000" stroke-linejoin="bevel" cx="323" cy="311" r="47"/>
  <path fill="#E3FFFF" d="M313 300l7 3 -2 7 -8 -2c1,-3 2,-6 3,-8z"/>
  <path fill="#E8FFFF" d="M331 310l2 8 -8 1 0 -7 6 -2z"/>
  <path fill="#FFFFFF" d="M324 298c-1,2 -3,3 -4,5 -1,2 -2,5 -3,7l-1 9 9 0 0 -7 7 -2c-1,-3 -2,-5 -2,-7 -2,-2 -4,-3 -6,-5z"/>
  <path fill="#637486" stroke="#000000" stroke-linejoin="bevel" d="M31 59l74 -33 81 29 -74 40 -81 -36z"/>
  <path fill="#6D7F93" stroke="#000000" stroke-linejoin="bevel" d="M180 147l-69 46 1 -98 74 -40 -6 92z"/>
  <path fill="#768AA0" stroke="#000000" stroke-linejoin="bevel" d="M35 151l-4 -92 81 36 -1 98 -76 -42z"/>
  <path fill="#697B8E" stroke="#000000" stroke-linejoin="bevel" d="M276 77l18 7 -9 41 -18 -18 9 -30z"/>
  <path fill="#9EB6D3" stroke="#000000" stroke-linejoin="bevel" d="M325 99l29 -16 -31 -25 -29 26 31 15z"/>
  <path fill="#697A8D" stroke="#000000" stroke-linejoin="bevel" d="M325 157l27 -4 12 -31 -38 13 -1 22z"/>
  <path fill="#6F8195" stroke="#000000" stroke-linejoin="bevel" d="M285 125l11 29 29 3 1 -22 -41 -10z"/>
  <path fill="#A2BDDB" stroke="#000000" stroke-linejoin="bevel" d="M354 83l10 40 -38 12 -1 -36 29 -16z"/>
  <path fill="#5E6D7E" stroke="#000000" stroke-linejoin="bevel" d="M369 75l10 30 -15 17 -10 -39 15 -8z"/>
  <path fill="#586677" stroke="#000000" stroke-linejoin="bevel" d="M350 57l-27 1 31 25 15 -8 -19 -18z"/>
  <path fill="#5D6D7E" stroke="#000000" stroke-linejoin="bevel" d="M277 77l17 -19 29 0 -29 26 -17 -7z"/>
  <path fill="#1A1D22" stroke="#000000" stroke-linejoin="bevel" d="M350 57l-27 -1 -29 2 29 0 27 -1z"/>
  <path fill="#252A30" stroke="#000000" stroke-linejoin="bevel" d="M379 105l-13 28 -14 19 12 -29 15 -18z"/>
  <path fill="#313740" stroke="#000000" stroke-linejoin="bevel" d="M267 107l18 18 11 29 -18 -21 -11 -26z"/>
  <path fill="#A9C4E3" stroke="#000000" stroke-linejoin="bevel" d="M294 84l-9 41 41 10 -1 -36 -31 -15z"/>
  <path fill="none" stroke="#000000" stroke-linejoin="bevel" d="M335 357c8,-7 10,-34 4,-50 -8,-24 -43,-34 -48,-30"/>
  <path fill="none" stroke="#000000" stroke-linejoin="bevel" d="M342 354c8,-7 11,-34 4,-49 -6,-22 -33,-37 -49,-33"/>
  <path fill="none" stroke="#000000" stroke-linejoin="bevel" d="M350 350c10,-11 10,-34 3,-49 -6,-20 -33,-39 -50,-33"/>
  <path fill="none" stroke="#000000" stroke-linejoin="bevel" d="M357 344c8,-12 8,-29 2,-45 -6,-19 -29,-36 -44,-34"/>
  <path fill="none" stroke="#000000" stroke-linejoin="bevel" d="M366 331c3,-10 -1,-30 -2,-33 -5,-18 -23,-31 -35,-34"/>
  <path fill="none" stroke="#000000" stroke-linejoin="bevel" d="M315 358c-11,-7 -10,-37 -4,-53 7,-21 36,-33 43,-30"/>
  <path fill="none" stroke="#000000" stroke-linejoin="bevel" d="M309 356c-13,-8 -12,-36 -7,-51 8,-25 35,-37 45,-35"/>
  <path fill="none" stroke="#000000" stroke-linejoin="bevel" d="M298 351c-9,-8 -9,-32 -4,-47 8,-25 34,-40 43,-38"/>
  <path fill="none" stroke="#000000" stroke-linejoin="bevel" d="M292 346c-9,-9 -10,-29 -5,-42 8,-25 31,-42 41,-40"/>
  <path fill="none" stroke="#000000" stroke-linejoin="bevel" d="M284 337c-4,-12 -6,-24 -2,-34 7,-25 25,-36 33,-38"/>

---

# Sprites

---

# Sprites

* Sometimes we want pre-drawn art: *Sprites*
  
  * A sprite is a 2D image that is drawn into the scene 
  
  * Old consoles and arcade machine had hardware support for sprites 
  
  * Today they are very cheap to display 
  
  * Sprites can also be animated!

---

# Sprite Sheets

---

# Sprite Animations

---

# Sprite Animations

```JavaScript
context.drawImage(image,
    frameIndex * width / numberOfFrames, clip*height,
    width / numberOfFrames, height,
    0, 0,
    width / numberOfFrames, height);
```

---

# Goomba

---

# Goomba, animated

---

# Sprites in Unity

---

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">A quick guide to Lerp~✨<br><br>Lerp is used to blend between two things!<br><br>It has three inputs: ( a, b, t )<br>a = start value<br>b = end value<br>t = how far we should go from start to end, as a percentage<br><br>Here it is in action!⚡blending a value, position, color and an angle! <a href="https://t.co/LdA69fLI8N">pic.twitter.com/LdA69fLI8N</a></p>— Freya Holmér 🔜 IndieCade Europe (@FreyaHolmer) <a href="https://twitter.com/FreyaHolmer/status/1175925033002254338?ref_src=twsrc%5Etfw">September 23, 2019</a></blockquote>

---

# Guest Speakers on Friday!

On Friday we will have three guest speakers from Tayassu Games, a Costa Rican game development company

*  Juan Navarro: Metodologías en el desarrollo de juegos.

* Oscar Loría: Consejos para emprender.

* Adrian Malavasi: Comunicación efectiva con el equipo de trabajo.

All three talks will be during our regular class hours in the Auditorium of the new ECCI building!

---

# References

* Book: *Mathematics for Game Developers*, by Christopher Tremblay

* [three.js](https://threejs.org/) (JavaScript library for easy 3D rendering)
   
   * [OpenGL Render Pipeline](https://www.khronos.org/opengl/wiki/Rendering_Pipeline_Overview)
   
   * [Bresenham's algorithm](https://www.cs.helsinki.fi/group/goa/mallinnus/lines/bresenh.html)
   
   * [Linear Interpolation](https://twitter.com/FreyaHolmer/status/1175925033002254338)