📗 Updated information about code similarity check: Link.
📗 Allowed to use code 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.
📗 First offense: 0 for the workbook; second offense: F for the course.
📗 Optional live coding sessions: I will answer questions about Workbook 1 and go through some code examples for Workbook 1 on Sunday at 1:00 on Zoom, recorded.
📗 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).
📗 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)".
📗 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.