Digital Storytelling

Learning Objectives Define key principles of digital design, including color theory, composition, and the difference between vector and raster graphics. Explain how a data structure like a 2D array can store the visual information for a pixel-based sprite. Use functions in a simple graphics library to set colors using the RGB model and draw basic shapes at specific (x, y) coordinates. Analyze a digital image to identify its core design elements like line, shape, and color. Design a simple character sprite using pixel art techniques on a grid. Apply the 'Rule of Thirds' to plan a more dynamic visual scene for a digital story. Ever wonder how video game worlds feel so alive or how animated movies draw you in? 🎨 It all starts with a single pixel and a great design!...

TermDefinitionExample Raster GraphicsImages made up of a grid of tiny squares called pixels. They are resolution-dependent and lose quality when scaled up.A digital photograph (.JPG) or a detailed painting made in an app like Procreate (.PNG). If you zoom in too much, you see the individual pixel squares. Vector GraphicsImages created using mathematical equations to define points, lines, and curves. They are resolution-independent and can be scaled to any size without losing quality.A company logo (.SVG) or a character illustration made in Adobe Illustrator. You can make it as big as a billboard and it will still be perfectly sharp. RGB Color ModelAn additive color model where red, green, and blue light are added together in various ways to reproduce a broad array of colors. In computers,...

The RGB Color Function color(R, G, B) Used in many programming environments to set the fill or stroke color for shapes. R, G, and B are integer values from 0-255 representing the intensity of Red, Green, and Blue. The 2D Coordinate System (x, y) Used to position elements on a digital canvas. In most computer graphics, the origin (0, 0) is at the top-left corner. The x-value increases to the right, and the y-value increases downwards. Color Palette Array let palette = [color1, color2, color3]; A data structure (an array or list) used to store a collection of pre-selected colors. This helps maintain a consistent visual theme and makes it easy to reference colors programmatically. Each 'color' element would be an RGB value itself, like (255, 0, 0).