# Examples

Animated GIF previews of every example. Recorded with a capture CLI that is not publicly released, so `bb record` is maintainer-only - every GIF here is committed.

## core — window, input, cameras, files

### input-keys

Steer a ball with the arrow keys

![input-keys](input-keys.gif)

### input-mouse

A ball follows the mouse; click to recolor

![input-mouse](input-mouse.gif)

### input-mouse-wheel

Scroll a box with the mouse wheel

![input-mouse-wheel](input-mouse-wheel.gif)

### random-values

A new random value every two seconds

![random-values](random-values.gif)

### camera-2d

A free 2D camera over a skyline

![camera-2d](camera-2d.gif)

### basic-window

The minimal raylib window + text

![basic-window](basic-window.gif)

### scissor-test

A scissor rectangle reveals text

![scissor-test](scissor-test.gif)

### window-should-close

Confirm-before-exit on window close

![window-should-close](window-should-close.gif)

### delta-time

Delta-time vs per-frame movement

![delta-time](delta-time.gif)

### basic-screen-manager

A LOGO/TITLE/GAMEPLAY/ENDING flow

![basic-screen-manager](basic-screen-manager.gif)

### camera-2d-platformer

A platformer with 5 camera-follow modes

![camera-2d-platformer](camera-2d-platformer.gif)

### input-gestures

Log detected mouse/touch gestures

![input-gestures](input-gestures.gif)

### camera-2d-split-screen

Two players, two cameras, split screen

![camera-2d-split-screen](camera-2d-split-screen.gif)

### smooth-pixelperfect

Sub-pixel smoothing of upscaled pixel art

![smooth-pixelperfect](smooth-pixelperfect.gif)

### camera-2d-mouse-zoom

Pan + zoom-to-cursor a 2D camera

![camera-2d-mouse-zoom](camera-2d-mouse-zoom.gif)

### world-screen

A 2D label tracking a 3D cube (GetWorldToScreen)

![world-screen](world-screen.gif)

### camera-3d

A red cube on a grid through a fixed 3D camera

![camera-3d](camera-3d.gif)

### picking-3d

Click a 3D box to pick it with a world-space ray

![picking-3d](picking-3d.gif)

### input-multitouch

A ball at every active touch/mouse point

![input-multitouch](input-multitouch.gif)

### input-virtual-controls

An on-screen D-pad moving a player circle

![input-virtual-controls](input-virtual-controls.gif)

### render-texture

A ball bouncing inside a rotated off-screen render texture

![render-texture](render-texture.gif)

### monitor-detector

A scaled map of every attached monitor with its specs

![monitor-detector](monitor-detector.gif)

### input-actions

Remappable abstract actions (WASD/arrows) via a keyset map

![input-actions](input-actions.gif)

### highdpi-demo

Logical-points vs physical-pixels grids with live DPI scale

![highdpi-demo](highdpi-demo.gif)

### highdpi-testbed

A HighDPI diagnostic overlay: grid, monitor/DPI info, crosshair

![highdpi-testbed](highdpi-testbed.gif)

### random-sequence

Colored bars in a random no-repeat permutation (LoadRandomSequence)

![random-sequence](random-sequence.gif)

### clipboard-text

Type + cut/copy/paste with the system clipboard

![clipboard-text](clipboard-text.gif)

### undo-redo

A grid player with a 26-slot undo/redo ring buffer

![undo-redo](undo-redo.gif)

### directory-files

A keyboard file browser over the working directory

![directory-files](directory-files.gif)

### custom-logging

A custom trace-log callback timestamps + tags every raylib log line

![custom-logging](custom-logging.gif)

### drop-files

Drag files onto the window to list their paths

![drop-files](drop-files.gif)

### text-file-loading

Load + word-wrap a text file, scroll it

![text-file-loading](text-file-loading.gif)

### compute-hash

CRC32/MD5/SHA1/SHA256 + Base64 of typed text

![compute-hash](compute-hash.gif)

### storage-values

Save/load a score pair to a binary storage file

![storage-values](storage-values.gif)

### keyboard-testbed

An on-screen ENG-US keyboard highlighting held keys

![keyboard-testbed](keyboard-testbed.gif)

### input-gestures-testbed

A gesture dashboard with log, indicators and protractor

![input-gestures-testbed](input-gestures-testbed.gif)

### viewport-scaling

A fixed game resolution scaled into a resizable window

![viewport-scaling](viewport-scaling.gif)

### camera-3d-free

A free-look 3D camera around a cube

![camera-3d-free](camera-3d-free.gif)

### camera-3d-first-person

Walk a yard of random columns in first person

![camera-3d-first-person](camera-3d-first-person.gif)

### camera-3d-split-screen

Two players, two 3D cameras, split screen

![camera-3d-split-screen](camera-3d-split-screen.gif)

### camera-3d-fps

A physics FPS controller with head-bob, lean and strafe-accel

![camera-3d-fps](camera-3d-fps.gif)

### vr-simulator

A 3D scene in stereo through a simulated Oculus Rift + lens-distortion shader

![vr-simulator](vr-simulator.gif)

### automation-events

A 2D platformer with input record/replay via AutomationEventList

![automation-events](automation-events.gif)

### input-gamepad

A live controller diagram: buttons/sticks/triggers light up (Xbox/PS/generic)

![input-gamepad](input-gamepad.gif)

## shapes — 2D drawing, easing, rlgl

### bouncing-ball

A ball bouncing with optional gravity

![bouncing-ball](bouncing-ball.gif)

### colors-palette

Every named raylib color in a grid

![colors-palette](colors-palette.gif)

### starfield

A perspective starfield flying at you

![starfield](starfield.gif)

### mouse-trail

A fading trail follows the cursor

![mouse-trail](mouse-trail.gif)

### logo-anim

The raylib logo assembling itself

![logo-anim](logo-anim.gif)

### double-pendulum

Chaotic double-pendulum motion + trail

![double-pendulum](double-pendulum.gif)

### particles

Water / smoke / fire particle effects

![particles](particles.gif)

### collision-area

AABB collision between a bouncing + mouse box

![collision-area](collision-area.gif)

### ball-physics

Grab and throw balls under gravity

![ball-physics](ball-physics.gif)

### easings-rectangles

A grid shrinks and spins via easing fns

![easings-rectangles](easings-rectangles.gif)

### following-eyes

Two eyes track the mouse cursor

![following-eyes](following-eyes.gif)

### lines-bezier

Drag endpoints to reshape a Bezier curve

![lines-bezier](lines-bezier.gif)

### rectangle-scaling

Resize a rectangle by its corner

![rectangle-scaling](rectangle-scaling.gif)

### dashed-line

A dashed line follows the mouse

![dashed-line](dashed-line.gif)

### basic-shapes

A gallery of raylib's basic shapes

![basic-shapes](basic-shapes.gif)

### logo-raylib

The raylib logo from rectangles + text

![logo-raylib](logo-raylib.gif)

### easings-ball

A ball animated through easing stages

![easings-ball](easings-ball.gif)

### easings-box

A box animated through five easing stages

![easings-box](easings-box.gif)

### math-angle-rotation

Fixed-angle lines + a spinning line

![math-angle-rotation](math-angle-rotation.gif)

### ellipse-collision

Overlap test between two ellipses

![ellipse-collision](ellipse-collision.gif)

### vector-angle

Two ways to measure an angle

![vector-angle](vector-angle.gif)

### penrose-tile

A Penrose tiling grown with an L-system

![penrose-tile](penrose-tile.gif)

### digital-clock

A live clock (digital + analogue modes)

![digital-clock](digital-clock.gif)

### clock-of-clocks

Digits drawn from grids of little clocks

![clock-of-clocks](clock-of-clocks.gif)

### lines-drawing

A paint canvas (RenderTexture)

![lines-drawing](lines-drawing.gif)

### easings-testbed

An interactive testbed for all 28 easings

![easings-testbed](easings-testbed.gif)

### bullet-hell

A magic circle spraying bullet spirals

![bullet-hell](bullet-hell.gif)

### ring-drawing

A ring/annulus with adjustable angles

![ring-drawing](ring-drawing.gif)

### circle-sector-drawing

A circle sector with adjustable angles

![circle-sector-drawing](circle-sector-drawing.gif)

### rounded-rectangle

A rounded rectangle, size/roundness knobs

![rounded-rectangle](rounded-rectangle.gif)

### recursive-tree

A binary fractal tree with live knobs

![recursive-tree](recursive-tree.gif)

### triangle-strip

A rainbow triangle-strip fan

![triangle-strip](triangle-strip.gif)

### math-sine-cosine

A live unit-circle trig visualization

![math-sine-cosine](math-sine-cosine.gif)

### hilbert-curve

A rainbow Hilbert space-filling curve

![hilbert-curve](hilbert-curve.gif)

### pie-chart

An interactive pie chart with hover pop

![pie-chart](pie-chart.gif)

### kaleidoscope

Draw strokes mirrored with 6-fold symmetry

![kaleidoscope](kaleidoscope.gif)

### splines-drawing

Draggable spline points, 4 spline types

![splines-drawing](splines-drawing.gif)

### rlgl-triangle

A rainbow triangle via rlgl immediate mode

![rlgl-triangle](rlgl-triangle.gif)

### rlgl-color-wheel

An HSV color picker wheel via rlgl

![rlgl-color-wheel](rlgl-color-wheel.gif)

### top-down-lights

2D lights casting shadow volumes off boxes

![top-down-lights](top-down-lights.gif)

### rectangle-advanced

Rounded gradient rectangles via rlgl

![rectangle-advanced](rectangle-advanced.gif)

## text — fonts, unicode, layout

### format-text

Zero-padded score/time text readouts

![format-text](format-text.gif)

### writing-anim

A message types itself out

![writing-anim](writing-anim.gif)

### input-box

A hover-to-type text input box

![input-box](input-box.gif)

### words-alignment

Align a word inside a rectangle

![words-alignment](words-alignment.gif)

### font-loading

Load a BMFont and a TTF font (DrawTextEx)

![font-loading](font-loading.gif)

### font-filters

Scale a TTF word, switch texture filters

![font-filters](font-filters.gif)

### font-spritefont

Three colored sprite fonts from PNG atlases

![font-spritefont](font-spritefont.gif)

### sprite-fonts

A gallery of raylib's eight bundled sprite fonts

![sprite-fonts](sprite-fonts.gif)

### rectangle-bounds

Word-wrapped text in a mouse-resizable container

![rectangle-bounds](rectangle-bounds.gif)

### codepoints-loading

Japanese text rasterized to a minimal TTF font atlas

![codepoints-loading](codepoints-loading.gif)

### unicode-ranges

Grow a multilingual font atlas by unicode range

![unicode-ranges](unicode-ranges.gif)

### inline-styling

Text with inline color style tags

![inline-styling](inline-styling.gif)

### unicode-emojis

Click emojis for multilingual speech bubbles

![unicode-emojis](unicode-emojis.gif)

### text-3d-drawing

A bitmap font drawn as textured quads in 3D, waving the `~~World~~`-marked span

![text-3d-drawing](text-3d-drawing.gif)

### strings-management

Drag/slice/shatter/glue text particles; 1-6 run raylib's TextTo* fns

![strings-management](strings-management.gif)

### font-sdf

Bitmap vs SDF font scaling, the SDF drawn through a shader

![font-sdf](font-sdf.gif)

## textures — images, sprites, render textures

### image-generation

Nine procedural textures (gradients/noise)

![image-generation](image-generation.gif)

### logo-texture

The raylib logo loaded from a PNG file

![logo-texture](logo-texture.gif)

### sprite-animation

Scarfy runs: 6-frame spritesheet animation

![sprite-animation](sprite-animation.gif)

### srcrec-dstrec

Rotate + scale a sprite frame (DrawTexturePro)

![srcrec-dstrec](srcrec-dstrec.gif)

### background-scrolling

Parallax-scrolling cyberpunk street layers

![background-scrolling](background-scrolling.gif)

### image-loading

LoadImage (RAM) then LoadTextureFromImage (VRAM)

![image-loading](image-loading.gif)

### blend-modes

Four 2D blend modes over the cyberpunk street

![blend-modes](blend-modes.gif)

### particles-blending

Spark particles trail the mouse (alpha/additive)

![particles-blending](particles-blending.gif)

### mouse-painting

A paint program on a RenderTexture canvas

![mouse-painting](mouse-painting.gif)

### sprite-button

A 3-state sprite button with a click sound

![sprite-button](sprite-button.gif)

### bunnymark

The classic bunny-spawning batching benchmark

![bunnymark](bunnymark.gif)

### fog-of-war

A tile map hidden by smooth fog of war

![fog-of-war](fog-of-war.gif)

### tiled-drawing

Tile a texture pattern with scale/rotation/color

![tiled-drawing](tiled-drawing.gif)

### sprite-explosion

Click to play a 5x5 explosion spritesheet + sound

![sprite-explosion](sprite-explosion.gif)

### sprite-stacking

A voxel booth from 122 stacked rotated slices

![sprite-stacking](sprite-stacking.gif)

### npatch-drawing

Stretchable 9-patch / 3-patch UI panels

![npatch-drawing](npatch-drawing.gif)

### image-processing

Nine CPU image filters via pointer-taking Image* APIs

![image-processing](image-processing.gif)

### image-drawing

One texture composed from several CPU images

![image-drawing](image-drawing.gif)

### image-text

Text baked into an image with a TTF font

![image-text](image-text.gif)

### image-rotate

The logo rotated +45/+90/-90 in CPU memory

![image-rotate](image-rotate.gif)

### image-channel

RGBA channels split + alpha-masked

![image-channel](image-channel.gif)

### image-kernel

Sharpen/sobel/gaussian convolution kernels

![image-kernel](image-kernel.gif)

### cellular-automata

Wolfram rule cellular automaton, editable rule

![cellular-automata](cellular-automata.gif)

### magnifying-glass

A circular magnifier revealing hidden bunnies

![magnifying-glass](magnifying-glass.gif)

### to-image

Round-trip an image VRAM<->RAM (LoadImageFromTexture)

![to-image](to-image.gif)

### polygon-drawing

A cat texture mapped onto a spinning polygon

![polygon-drawing](polygon-drawing.gif)

### raw-data

A .raw pixel dump + a code-generated checkerboard

![raw-data](raw-data.gif)

### textured-curve

A road texture swept along a draggable Bezier

![textured-curve](textured-curve.gif)

### gif-player

An animated GIF streamed frame-by-frame to a texture

![gif-player](gif-player.gif)

### framebuffer-rendering

An observer camera watching a subject camera + frustum

![framebuffer-rendering](framebuffer-rendering.gif)

### screen-buffer

The classic DOS fire effect in a palette-indexed buffer

![screen-buffer](screen-buffer.gif)

## models — meshes, 3D, OBJ/GLB

### geometric-shapes

3D cubes/spheres/cylinders/capsules on a grid

![geometric-shapes](geometric-shapes.gif)

### box-collisions

A player cube colliding with 3D obstacles

![box-collisions](box-collisions.gif)

### billboard-rendering

Camera-facing billboards + an orbiting camera

![billboard-rendering](billboard-rendering.gif)

### orthographic-projection

Toggle perspective vs orthographic camera

![orthographic-projection](orthographic-projection.gif)

### tesseract-view

A rotating 4D hypercube projected to 3D

![tesseract-view](tesseract-view.gif)

### rlgl-solar-system

Sun/Earth/Moon via the rlgl matrix stack

![rlgl-solar-system](rlgl-solar-system.gif)

### textured-cube

Two rlgl textured 3D cubes from a shared atlas

![textured-cube](textured-cube.gif)

### directional-billboard

A sprite-sheet billboard that turns as the camera orbits

![directional-billboard](directional-billboard.gif)

### basic-voxel

An 8x8x8 beige voxel grid; click to ray-pick and remove cubes

![basic-voxel](basic-voxel.gif)

### rotating-cube

A textured cube spinning on a tilted axis (rlgl matrix stack)

![rotating-cube](rotating-cube.gif)

### model-loading

The castle OBJ model loaded from disk, ray-pick selection

![model-loading](model-loading.gif)

### heightmap-rendering

Terrain generated from a grayscale heightmap image

![heightmap-rendering](heightmap-rendering.gif)

### cubicmap-rendering

A cube maze generated from a tiny black-and-white image

![cubicmap-rendering](cubicmap-rendering.gif)

### mesh-generation

All nine procedural mesh generators, checked-textured

![mesh-generation](mesh-generation.gif)

### first-person-maze

Walk the cubicmap maze in first person, wall collision + radar

![first-person-maze](first-person-maze.gif)

### loading-gltf

The animated glTF robot, switchable animations

![loading-gltf](loading-gltf.gif)

### yaw-pitch-roll

Fly a WWI plane through pitch/yaw/roll, easing back to level

![yaw-pitch-roll](yaw-pitch-roll.gif)

### mesh-picking

A mouse ray picks the closest quad/triangle/sphere/box/mesh hit

![mesh-picking](mesh-picking.gif)

### loading-iqm

The classic IQM guy walking on loop

![loading-iqm](loading-iqm.gif)

### loading-m3d

The Cesium Man in Model3D format, skeleton view on SPACE

![loading-m3d](loading-m3d.gif)

### loading-vox

Four MagicaVoxel models under a fly camera + voxel lighting

![loading-vox](loading-vox.gif)

### animation-timing

The robot with a playback timeline + adjustable speed

![animation-timing](animation-timing.gif)

### bone-socket

A hat, sword and shield riding the greenman's skeleton bones

![bone-socket](bone-socket.gif)

### point-rendering

Up to 10 million points: GPU point mode vs per-point draws

![point-rendering](point-rendering.gif)

### skybox-rendering

A cubemap skybox drawn from inside a unit cube

![skybox-rendering](skybox-rendering.gif)

### animation-blending

SPACE cross-fades the robot between two animations

![animation-blending](animation-blending.gif)

### animation-blend-custom

Per-bone blending: walking legs + attacking upper body

![animation-blend-custom](animation-blend-custom.gif)

### decals

Click to splat logo decals clipped onto a character's surface

![decals](decals.gif)

## shaders — GLSL, uniforms, postprocess, lighting

### shapes-textures-shader

A grayscale fragment shader over shapes + a sprite

![shapes-textures-shader](shapes-textures-shader.gif)

### texture-outline

A shader-drawn outline around a sprite

![texture-outline](texture-outline.gif)

### texture-waves

A space texture rippled by an animated wave shader

![texture-waves](texture-waves.gif)

### julia-set

A Julia set fractal computed in a fragment shader

![julia-set](julia-set.gif)

### eratosthenes-sieve

The Sieve of Eratosthenes per-pixel in a shader

![eratosthenes-sieve](eratosthenes-sieve.gif)

### mandelbrot-set

The Mandelbrot set in a shader, deep-zoom presets

![mandelbrot-set](mandelbrot-set.gif)

### rounded-rectangle-shader

SDF rounded rectangles (fill/shadow/border) in a fragment shader

![rounded-rectangle-shader](rounded-rectangle-shader.gif)

### raymarching

A raymarched SDF scene in a fragment shader, first-person fly-cam

![raymarching](raymarching.gif)

### color-correction

A post-process shader tuning contrast/saturation/brightness of a picture

![color-correction](color-correction.gif)

### custom-uniform

A mouse-steered swirl post-process over a render-textured 3D scene

![custom-uniform](custom-uniform.gif)

### ascii-rendering

A post-process shader re-rendering the scene as ASCII glyphs

![ascii-rendering](ascii-rendering.gif)

### postprocessing

Twelve full-screen post-process shaders cycled over a 3D scene

![postprocessing](postprocessing.gif)

### texture-rendering

A blank texture painted and animated entirely by a fragment shader

![texture-rendering](texture-rendering.gif)

### multi-sample2d

Two textures blended in a shader via a second sampler2D

![multi-sample2d](multi-sample2d.gif)

### palette-switch

Palette-indexed bands recolored by an ivec3-array shader uniform

![palette-switch](palette-switch.gif)

### hot-reloading

Hot-swap the reload.fs fragment shader while it runs

![hot-reloading](hot-reloading.gif)

### spotlight-rendering

Three spotlights alpha-masked over a star field + sprite swarm

![spotlight-rendering](spotlight-rendering.gif)

### depth-writing

Inverted gl_FragDepth into a custom depth-texture framebuffer

![depth-writing](depth-writing.gif)

### depth-rendering

The scene's depth buffer visualized through a shader

![depth-rendering](depth-rendering.gif)

### hybrid-rendering

Raymarched spheres + rasterized cubes in one depth-tested scene

![hybrid-rendering](hybrid-rendering.gif)

### texture-tiling

A generated cube model with its texture tiled 3x3 by a shader

![texture-tiling](texture-tiling.gif)

### model-shader

The watermill OBJ drawn grayscale via a material-bound shader

![model-shader](model-shader.gif)

### basic-lighting

A plane + cube lit by four toggleable colored point lights

![basic-lighting](basic-lighting.gif)

### fog-rendering

Torus/cube/sphere models fading into exponential fog

![fog-rendering](fog-rendering.gif)

### cel-shading

A GLB car toon-shaded with quantized bands + outline

![cel-shading](cel-shading.gif)

### normalmap-rendering

A spinning plane lit through a tangent-space normal map

![normalmap-rendering](normalmap-rendering.gif)

### simple-mask

An animated mask texture eats holes in two models' plasma skin

![simple-mask](simple-mask.gif)

### vertex-displacement

A plane mesh riding Perlin-noise waves in the vertex shader

![vertex-displacement](vertex-displacement.gif)

### mesh-instancing

Ten thousand lit cubes in one draw call (DrawMeshInstanced)

![mesh-instancing](mesh-instancing.gif)

### lightmap-rendering

A plane lit by a baked lightmap through a second UV channel

![lightmap-rendering](lightmap-rendering.gif)

### shadowmap-rendering

Real shadows: an animated robot under the shadowmapping algorithm

![shadowmap-rendering](shadowmap-rendering.gif)

### basic-pbr

The rusty car under physically-based rendering (PBR maps)

![basic-pbr](basic-pbr.gif)

### deferred-rendering

A three-target G-buffer + full-screen deferred lighting pass

![deferred-rendering](deferred-rendering.gif)

### game-of-life

Conway's Life on a 2048x2048 world: pan/zoom, presets, draw mode

![game-of-life](game-of-life.gif)

## audio — sounds, music streams

### sound-loading

Play a WAV and an OGG sound

![sound-loading](sound-loading.gif)

### music-stream

Stream an MP3 with pan/volume/progress controls

![music-stream](music-stream.gif)

### module-playing

A chiptune XM module + pulsing circle waves

![module-playing](module-playing.gif)

### sound-multi

Overlapping sound playback via sound aliases

![sound-multi](sound-multi.gif)

### sound-positioning

Spatial audio around an orbiting 3D sphere

![sound-positioning](sound-positioning.gif)

### raw-stream

A sine wave generated sample-by-sample into a raw audio stream

![raw-stream](raw-stream.gif)

### mixed-processor

A DSP distortion callback on the whole audio mix

![mixed-processor](mixed-processor.gif)

### stream-effects

Stackable lowpass + delay effects on one music stream

![stream-effects](stream-effects.gif)

### stream-callback

A pull-model synth: sine/square/triangle/sawtooth on demand

![stream-callback](stream-callback.gif)

### amp-envelope

An ADSR amplitude envelope on a tone, with a live shape graph

![amp-envelope](amp-envelope.gif)

### spectrum-visualizer

A live FFT spectrum of the music through a shader

![spectrum-visualizer](spectrum-visualizer.gif)