📗 Why are you here?
➭ A: Cannot get into another class.
➭ B: Randomly picked a CS5xx course.
➭ C: Want to learn computer graphics: programming.
➭ D: Want to learn computer graphics: math.
➭ E: Wrong room.
📗 Computer Graphics is the study of how computers create things we see.
📗 CS559 is about how to program computers to make pictures.
➭ It is NOT about what pictures to make, how to use tools to make pictures, or any specific application of computer graphics.
📗 The solutions will be posted around 1 week before the due date.
📗 You are allowed to use code from the solutions, written by another student, from Internet, or generated by large language models (GPT), but you must: (i) give attribution, and (ii) add sufficient documentation to show you understand what the code is doing.
📗 Please ignore the due dates on the Workbooks, they are for the Campus section.
📗 Past projects: Galleries
📗 The train project but in 3D: Demo train
📗 You can work on an additional research project, please submit a project proposal before you start (email me or a TA or talk to me after a lecture).
📗 Project ideas:
➭ Create a game.
➭ Create a data visualization tool.
➭ Create a physics demo.
➭ Maybe create a 3D animated model of the Epic campus?
📗 Are you planning to take the exam or work on a project?
➭ A: Exam.
➭ B: Project.
➭ C: Undecided.
📗 We will use the last lecture for either the exam or project presentation depending on the number of students taking the exam.
📗 In either case, the exam will be online and open book with an in-person paper exam option.
📗 Images can be represented by pixel arrays (sampled or raster), or represented by a list of shapes specified by parameters (geometric, primitives).
📗 Images are usually displayed as pixel arrays (screen, projector, printer ...)
📗 Rasterization is process of converting primitives to pixels. See Wikipedia.
📗 Web browser graphics APIs and libraries will take care of the rasterization.
📗 In this course, we will use HTML Canvas for 2D (Doc) and Three.js for 3D (Doc). We will briefly talk about SVG (scalable vector graphics) and WebGL.
📗 Here is a simple HTML Canvas: Demo canvas
➭ HTML: (right-click and "view page source" or "inspect" to see the code).
➭ JavaScript: .
📗 Note: let canvas = document.getElementByID("canvas") is an (DOM) element, and let context = canvas.getContext("2d") is the API.
📗 context.beginPath(); context.moveTo(a, b); context.lineTo(c, d); produces a line from (a, b) to (c, d) (Doc).
➭ The origin (0, 0) is at the top left corner of the HTML Canvas.
➭ (a, b) is the point a HTML pixels going right and b HTML pixels going down from the original.
➭ (c, d) is the point c HTML pixels going right and d HTML pixels going down from the original.
📗 context.stroke(); is needed to draw the line (Doc).
📗 context.fillRect(x, y, w, h); fills the rectangle with top left corner at (x, y) with width w and height h (Doc).
➭ Width is measured going right in HTML pixels.
➭ Height is measured going down in the HTML pixels.
📗 context.strokeRect(x, y, w, h); draws the outline of the rectangle but does not fill the inside. Demo canvas
📗 context.arc(x, y, r, a, b); produces an arc (curve that is part of a circle) centered at (x, y) with radius r starting from angle a and ends at angle b, clockwise by default (Doc).
➭ Angles are measured in radians (0 to \(2 \pi\)) starting from the positive x-axis direction (or 3 o'clock direction).
📗 context.arc(x, y, r, 0, 2 * Math.PI) produces a fill circle.
📗 context.stroke() to draw the outline of the circle and context.fill() to fill the inside of the circle.
📗 context.ellipse(x, y, rx, ry, r, a, b) produces a part of the ellipse centered at (x, y) with radii (rx, ry) rotated r (default is clockwise rotation) from angle a to angle b (Doc).
📗 Styles are stored in the context.
➭ context.fillStyle is the fill color.
➭ context.strokeStyle is the stroke color.
➭ context.lineWidth is the stroke thickness.
📗 Note: colors can be set using string color names such as "red", "green", "blue" (the list of names can be found on Link), or specified by the amount of red, green, and blue in the color (three integers between 0 and 255, for example red is "rgb(255, 0, 0)", Color picker).
📗 Transparency can be set with alpha (0 is fully transparent and 1 is fully opaque. See Wikipedia), for example, the color red that is half-transparent is "rgba(255, 0, 0, 0.5)". Demo ellipse
📗 context.strokeText(text, x, y) and context.fillText(text, x, y) strokes or fills text at (x, y): the default is textAlign = "start" and textBaseline = "alphabetic", but they can be changed by setting context.textAlgin and context.textBaseline (Doc).
📗 context.font sets the font size and family etc too (Doc).
📗 To draw a polygon, context.beginPath()context.moveTo(x0, y0), then context.lineTo(x1, y1), context.lineTo(x2, y2), ...
📗 To close a polyline (and make it a polygon), use context.closePath() (Doc).
📗 Polygons can be filled using either the even-odd rule or the non-zero winding rule.
➭ Even-odd: draw a ray from a point and count the number of intersections with the edges of the polygon: "inside" if odd and "outside" if even. See Wikipedia.
➭ Non-zero (winding) rule: draw a ray from a point and add up the intersections with the (directed) edges of the polygon (+1 if clockwise, -1 if counterclockwise): "inside" if non-zero and "outside" if zero. See Wikipedia.
📗 Fill rule can be specified as context.fill("evenodd") or context.fill("nonzero") (default) (Doc).
📗 A polygon is a simple polygon if it does not intersect itself and has no holes. See Wikipedia.
📗 A simple polygon is a convex polygon if it is convex (if two points are inside the polygon, then the line segment connecting the two points lies entirely in the polygon). See Wikipedia.
📗 A simple polygon that is not convex is called a concave polygon.
📗 For simple polygons, even-odd rule and non-zero rule would fill the polygons the same way.
📗 HTML Canvas is an immediate mode API: it does not store the primitives.
📗 SVG and Three.js are retained mode: they store the primitives.
📗 This will be useful for animation: next lecture.
📗 Sampled (raster) vs Geometric (primitives).
📗 Rasterization.
📗 HTML Canvas (initial) coordinate system.
📗 Drawing basic shapes.
📗 Canvas context styles.
📗 Drawing polygons and filling rules.
📗 Immediate mode vs Retained mode.
📗 Notes and code adapted from the course taught by Professor Michael Gleicher.
📗 Please use Ctrl+F5 or Shift+F5 or Shift+Command+R or Incognito mode or Private Browsing to refresh the cached JavaScript: Code.
📗 You can print the notes: .
📗 Anonymous feedback can be submitted to: Form.