Drawing with Computers

Learning Objectives Explain the difference between raster and vector graphics. Describe how a Cartesian coordinate system is used to position objects on a digital canvas. Use RGB color codes to define and apply colors to shapes. Write code to draw primitive shapes like rectangles, circles, and lines at specific coordinates. Combine multiple primitive shapes to create a more complex drawing, such as a simple house or character. Debug common errors in their drawing code, such as incorrect coordinates or color settings. Ever wondered how video game characters are drawn or how your favorite animated movies are made? 🎨 It all starts with telling a computer exactly where to put every single dot and line! In this lesson, you'll learn the fundamental computer science concepts...

TermDefinitionExample PixelThe smallest single point of color on a digital screen. Your entire screen is a giant grid of these tiny dots.A screen with a resolution of 1920x1080 has 1,920 pixels horizontally and 1,080 pixels vertically, for a total of over 2 million pixels. Coordinate SystemA grid system used to define the position of any point on the screen. In most computer graphics, the point (0, 0) is at the top-left corner.To place a dot in the exact center of a 400x400 pixel canvas, you would use the coordinates (200, 200). RGB Color ModelA method for creating colors by mixing different amounts of Red, Green, and Blue light. Each color component has a value, typically from 0 (none) to 255 (maximum).RGB(255, 0, 0) is pure red. RGB(0, 255, 0) is pure green. RGB(255, 255, 0) is yellow....

Drawing a Rectangle drawRectangle(x, y, width, height) Use this command to draw a rectangle. 'x' and 'y' are the coordinates of the top-left corner. 'width' and 'height' define its size in pixels. Drawing a Circle drawCircle(centerX, centerY, radius) Use this command to draw a circle. 'centerX' and 'centerY' are the coordinates of the circle's center. 'radius' is the distance from the center to the edge. Setting Fill Color setFillColor(r, g, b) Use this command *before* drawing a shape to set the color it will be filled with. 'r', 'g', and 'b' are the red, green, and blue values (0-255).