Words

The words the tools are built from.

The words the lab tools teach: 108 foundations every tool leans on, then twenty words for each tool.

108 of 1068 words have a page. The rest are listed and get their page soon.

Race: watch Jev cross the map

Foundations

Colour

• RGBScreen colour made by mixing red, green and blue light, each from 0 to 255.
• HSLColour described as hue, saturation and lightness, close to how people talk about colour.
• HueWhere a colour sits on the colour wheel: red, yellow, green, blue, violet, and round again.
• SaturationHow strong a colour is, from plain grey at zero to its fullest.
• ChromaHow colourful something looks next to a grey of the same lightness.
• ValueHow light or dark a colour is, with the colour itself set aside.
• LuminanceThe brightness a colour gives off, weighted as eyes see it: green counts most, blue least.
• ContrastThe gap between the lightest and darkest parts, which makes shapes easy or hard to read.
• GammaA curve that bends the middle tones lighter or darker while black and white stay put.
• AlphaA fourth channel beside red, green and blue that says how see-through a pixel is.
• Hex colourA colour written as six digits like #10B981: two each for red, green and blue.
• Colour spaceThe agreed rules that turn colour numbers into real colours on a screen, such as sRGB.
• GamutThe full range of colours a screen, a file or a printer can actually show.
• HDRHigh dynamic range: highlights brighter than a normal screen white, with detail kept in the dark.
• Gain mapA hidden greyscale picture inside a photo telling HDR screens how much brighter each part may glow.
• Blend modeThe rule for mixing a top layer with the one beneath it, such as multiply, screen or overlay.
• ThresholdA cut-off: brightness above it becomes one thing, and below it another.

Light

• Ambient lightSoft, even light from everywhere, so no side of a shape falls fully into black.
• Directional lightLight arriving in parallel rays from one direction, like sunlight, equally strong everywhere.
• Point lightLight spreading out from one spot in every direction and fading with distance, like a bulb.
• ShadowThe dark shape left where an object blocks light from reaching a surface.
• Diffuse reflectionLight scattering evenly off a rough surface, so it looks the same from any angle.
• Specular highlightThe small bright spot where light bounces straight off a shiny surface into your eye.
• RefractionLight bending as it passes from one material into another, like a straw that looks broken in water.
• Fresnel effectSurfaces reflect more light when you look at them from a low, grazing angle.
• ExposureHow much light a picture gathers: too much washes it white, too little sinks it in black.
• Tone mappingSqueezing a wide range of brightness into what a screen can show without losing the highlights.
• VignetteThe edges of a picture darkened toward the corners, drawing the eye to the middle.

Geometry

• VectorAn arrow with a length and a direction, stored as numbers such as x and y.
• MatrixA grid of numbers that moves, turns or scales every point in one step.
• CoordinatesNumbers that say where a point is, such as x across and y down from a corner.
• Polar coordinatesA point described by its distance from a centre and its angle around it.
• TransformMoving, turning or scaling a shape without changing the shape itself.
• VertexA corner point of a shape; 3D surfaces are built from many of them joined into triangles.
• MeshA 3D surface built from many small triangles that share their corners.
• Surface normalAn arrow pointing straight out of a surface, used to work out how light falls on it.
• UV mappingPinning a flat picture onto a 3D surface by giving each corner a spot on the image.
• Bézier curveA smooth curve steered by control points that pull on it without touching it.
• SymmetryA shape that matches itself after a mirror, a turn or a slide.
• FractalA shape whose small parts repeat the whole, again and again at every zoom.

Noise

• NoiseRandom-looking variation that makes surfaces, motion and texture feel natural.
• SeedThe starting number for a random generator; the same seed always gives the same result.
• Pseudo-randomNumbers from a fixed recipe that look random but repeat exactly from the same seed.
• White noiseEvery value picked on its own at random, like the static on an old television.
• Blue noiseRandom dots kept evenly apart with no clumps, so patterns look smooth.
• Simplex noiseA smooth noise built on a triangle grid, quicker than Perlin noise and free of its grid lines.
• Worley noiseNoise made from the distance to the nearest scattered point, drawing cells like pebbles or foam.
• Fractal Brownian motionLayers of noise stacked from large and soft to small and fine, for clouds, rock and hills.
• OctaveOne layer of noise at a finer scale; each octave adds smaller detail on top.
• TurbulenceNoise folded back on itself so it swirls with sharp creases, like smoke or fire.
• Film grainFine random speckle laid over a picture, like the grain of photographic film.
• Seamless tileA texture whose edges match, so copies placed side by side show no join.

Motion and easing

• EasingHow a movement speeds up and slows down between its start and its end.
• KeyframeA saved moment in an animation; the frames between keyframes are filled in for you.
• InterpolationWorking out the values between two known ones, such as the colour halfway between two colours.
• Frame rateHow many pictures a moving image shows each second, such as 30 or 60.
• Time stepThe small slice of time a simulation moves forward in each update.
• VelocitySpeed with a direction: how far and which way something moves each moment.
• AccelerationHow fast velocity changes: speeding up, slowing down or turning.
• GravityA steady pull in one direction that bends every moving thing toward it.
• DampingA drag that drains a little energy each step, so bounces and waves settle down.
• SpringA pull back toward a resting place that grows stronger the further something is pushed.
• LoopMotion that ends exactly where it began, so it can repeat without a visible jump.
• StaggerStarting the same motion on many things one after another instead of all at once.

Sound

• FrequencyHow many times something repeats each second; in sound, a higher frequency is a higher pitch.
• AmplitudeHow far a wave swings from its middle line; in sound, how loud it is.
• WaveformA picture of sound over time, a line swinging up and down as air pressure changes.
• Sine waveThe smoothest wave there is: the shape of a swing, a ripple or a pure tone.
• PhaseWhere a wave is in its cycle at a given moment, measured as an angle.
• Sample rateHow many times each second a sound is measured to store it, often 44,100 or 48,000.
• DecibelA loudness scale where every 10 steps up means ten times the sound power.
• SpectrumA sound split into its frequencies, showing how loud each one is at that moment.
• Frequency bandA slice of the spectrum, such as bass, mids or highs, read as one level.
• BeatThe steady pulse in music, found by watching for sudden jumps in low-frequency energy.

Typography

• GlyphOne drawn shape in a font: a letter, a number, a mark or a symbol.
• TypefaceA family of letters drawn to one design, such as Georgia or JetBrains Mono.
• SerifA small finishing stroke at the ends of letters, as in Georgia or Times.
• Sans-serifLetters without finishing strokes at their ends, as in Helvetica or Arial.
• MonospaceA typeface where every glyph takes the same width, so columns line up.
• Font weightHow thick a typeface is drawn, from thin at 100 to black at 900.
• Font sizeHow large type is set, measured in pixels across the full height of the letter box.
• BaselineThe invisible line letters sit on; tails such as g and p hang below it.
• Line heightThe distance from one line of text down to the next, baseline to baseline.
• Letter spacingExtra space added evenly between every pair of letters in a line.

Image formats and export

• PixelOne tiny square of colour; a picture on a screen is a grid of them.
• ResolutionHow many pixels wide and tall a picture is, such as 1920 by 1080.
• Aspect ratioThe shape of a frame given as width to height, such as 16:9 or 1:1.
• PNGAn image file that keeps every pixel exactly and can hold see-through areas.
• JPEGA photo file that throws away detail the eye misses, so the file stays small.
• WebPA web image file that can squeeze like JPEG or keep every pixel like PNG.
• SVGA picture stored as shapes and lines instead of pixels, so it stays sharp at any size.
• CompressionMaking a file smaller, either keeping every detail or throwing some of it away.
• Bit depthHow many steps each colour channel has: 8 bits give 256, 10 bits give 1,024.
• WebMAn open video file for the web that browsers can record straight from a canvas.
• MP4The most widely played video file, opened by phones, editors and social apps.
• ClipboardThe place a computer holds what you copied, ready to paste somewhere else.

The machine

• CPUThe computer's general-purpose chip, fast at one careful step after another.
• GPUA chip with thousands of small cores that work on many pixels at the same time.
• CanvasThe web page's drawing surface, where a tool paints pixels with code.
• WebGLThe browser's way of handing drawing work to the GPU.
• WebGPUThe newer browser path to the GPU: faster, and able to run general computing too.
• ShaderA small program that runs on the GPU for every corner or every pixel at once.
• GLSLThe language WebGL shaders are written in, close to C with vectors built in.
• UniformA value handed to a shader that stays the same for every pixel in a frame, like time.
• TextureAn image the GPU keeps in memory and reads from while it draws.
• KernelA small grid of weights slid over an image to blur it, sharpen it or find its edges.
• Render loopCode that draws a frame, then asks the browser for the next one, about 60 times a second.
• PresetA saved set of settings with a name, one click back to a known look.

Tool words