Creating Pictures

Learning Objectives Explain how digital images are represented using pixels and a coordinate system. Define the RGB color model and apply specific color values to shapes. Write code to draw primitive shapes like rectangles, ellipses, and lines on a digital canvas. Control the position and size of shapes using coordinate parameters. Combine multiple shapes in the correct order to create a composite picture (e.g., a simple character or scene). Use variables to manage properties like position, size, and color, making their code more readable and easier to modify. Ever wondered how video game characters or app icons are drawn by a computer? 👾 Let's learn how to command the pixels and create art with code! In this lesson, you'll learn the fundamental principles of cre...

TermDefinitionExample PixelThe smallest controllable element of a picture on a screen. Think of it as a single, tiny square of color that makes up a larger image.A 1920x1080 screen is a grid made of 1,920 columns and 1,080 rows of these tiny pixel dots. CanvasThe digital drawing area or screen where you create your picture. It has a specific width and height measured in pixels.Creating a `createCanvas(400, 400)` gives you a square area that is 400 pixels wide and 400 pixels tall to draw in. Coordinate SystemA grid system used to specify locations on the canvas. In most computer graphics, the point (0, 0) is at the top-left corner, with X increasing to the right and Y increasing downwards.The point `(50, 100)` is 50 pixels from the left edge and 100 pixels down from the top edge. RGB Color...

Shape Drawing Syntax shapeName(x, y, width, height); To draw a shape, you call its function with arguments that define its position and size. The `x` and `y` coordinates typically define the top-left corner (for a rectangle) or the center (for an ellipse). Color Setting Syntax fill(r, g, b); stroke(r, g, b); Before drawing a shape, you must call color functions to set its properties. `fill()` sets the interior color, and `stroke()` sets the outline color. These settings apply to all subsequent shapes drawn until they are changed again. The Painter's Algorithm Shapes are drawn in the order they appear in the code. Just like painting on a canvas, shapes drawn later will appear on top of shapes drawn earlier. To create layers, you must draw the background elements...