# Augmented reality
## Microsim
### Live player
<div class="microsim-player">
<iframe src="https://editor.p5js.org/sciencenibber/full/D74_AaJE3" width="100%" height="620" frameborder="0" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<div class="microsim-fallback">
<img src="Microsims/thumbs/Augmented_reality.png" alt="Augmented_reality microsim poster" style="width:100%;border:1px solid #4445;border-radius:6px;">
<p><em>Live microsim (desktop) · <a href="https://editor.p5js.org/sciencenibber/sketches/D74_AaJE3">open sketch in the p5.js editor</a></em></p>
</div>
**Editor URL:** https://editor.p5js.org/sciencenibber/sketches/D74_AaJE3
**Description (100 words):**
This microsim shows the core trick behind augmented reality: **registration**. A virtual wireframe cube is drawn through the *same* pinhole camera that produces the view of the "real" scene — here a receding floor grid — so the cube stays glued to its orange floor marker no matter how you move. The slider `f` sets the camera's focal length (field of view / zoom), `Z` sets the object's distance, and `theta` spins the cube. Because both real and virtual share one projection `x = f*X/Z + cx`, the overlay never slips. Apparent size scales as `f/Z`, exactly as a real camera behaves.
```js
/*
======================================================================
Augmented reality — Wikitube microsim
Article : Augmented reality
Slug : Augmented_reality
URL : en.wikitube.io/wiki/Augmented_reality
----------------------------------------------------------------------
IDEA
Augmented reality overlays computer-generated 3D content onto a view of
the real world so the two appear locked together. The thing that makes
the virtual object look "really there" is REGISTRATION: the virtual
content is rendered through the SAME camera model that produced the real
image. This sketch shows that explicitly. A receding floor grid stands
in for the camera's view of the real scene; a virtual wireframe cube is
anchored to a marker on that floor. Both the grid and the cube pass
through one pinhole camera, so the cube stays glued to its marker as you
change the camera's focal length f, the object's depth Z, and its spin.
----------------------------------------------------------------------
PINHOLE PROJECTION (the camera model AR shares between real & virtual)
x = f * X / Z + cx
y = f * Y / Z + cy
A world point (X, Y, Z) in front of the camera (Z > 0) lands at pixel
(x, y). f is the focal length in pixels, (cx, cy) the principal point
(image centre). Larger f = narrower field of view = more "zoom".
Objects further away (larger Z) project smaller: apparent size ~ f/Z.
----------------------------------------------------------------------
NOTES
- All canvas-side strings are ASCII only (editor wrapper mangles
non-ASCII inside string/text() arguments — see standards pitfalls).
- Single ARTICLE constant is the source of truth for the URL line.
======================================================================
*/
const ARTICLE = "Augmented_reality";
// Friendly Error System spams the console in a finished sketch; off for ship.
p5.disableFriendlyErrors = true;
// ---- interactive controls (built in setup) -----------------------------
let fSlider; // focal length f, in pixels (field-of-view / zoom)
let zSlider; // object depth Z, world units (distance from camera)
let thetaSlider; // virtual cube spin about its vertical axis, degrees
// ---- layout constants (computed from canvas size in setup) -------------
let CX, CY; // principal point (image centre), the camera's (cx, cy)
const CAM_H = 1.4; // camera height above the floor, world units
const GRID_HALF = 6; // floor grid spans X in [-6, 6]
const GRID_FAR = 18;// floor grid spans Z in [1, 18]
const CUBE_S = 1.2; // virtual cube side length, world units
function setup() {
// Canvas + controls. createCanvas MUST live in setup, never at top level.
createCanvas(720, 520);
pixelDensity(2); // crisp text/edges on retina displays
CX = width / 2; // principal point x: image centre
CY = height / 2 + 30; // nudged down so horizon sits high, floor fills view
// Slider ranges are chosen to be MEANINGFUL, not generic:
// f from wide-angle (300) to telephoto (1400); default ~ a normal lens.
fSlider = createSlider(300, 1400, 650, 10);
fSlider.position(150, height - 86);
fSlider.style("width", "200px");
// Z: object distance from 2 (close) to 14 (far down the corridor).
zSlider = createSlider(2, 14, 6, 0.1);
zSlider.position(150, height - 58);
zSlider.style("width", "200px");
// theta: virtual object spin, full turn.
thetaSlider = createSlider(0, 360, 35, 1);
thetaSlider.position(150, height - 30);
thetaSlider.style("width", "200px");
}
// Pinhole projection of a world point. Returns {x, y, ok}.
// ok=false when the point is at/behind the image plane (Z <= small) and
// must not be drawn (it would project to a wild off-screen coordinate).
function project(X, Y, Z, f) {
if (Z <= 0.05) return { x: 0, y: 0, ok: false };
// y is negated: world +Y is up, screen +y is down.
return { x: CX + (f * X) / Z, y: CY - (f * Y) / Z, ok: true };
}
function draw() {
background(238); // light "viewfinder" backdrop
const f = fSlider.value(); // focal length, pixels
const Zobj = zSlider.value(); // object depth, world units
const theta = radians(thetaSlider.value()); // spin angle, radians
// ---- 1. REAL SCENE: receding floor grid through the pinhole camera ----
// Floor is the world plane Y = -CAM_H (camera is CAM_H above it).
// Drawn first, in neutral grey: this is the "reference geometry" layer.
stroke(170);
strokeWeight(1);
// lines running away from the camera (constant X, varying Z)
for (let gx = -GRID_HALF; gx <= GRID_HALF; gx++) {
const a = project(gx, -CAM_H, 1, f);
const b = project(gx, -CAM_H, GRID_FAR, f);
if (a.ok && b.ok) line(a.x, a.y, b.x, b.y);
}
// lines running across (constant Z, varying X)
for (let gz = 1; gz <= GRID_FAR; gz++) {
const a = project(-GRID_HALF, -CAM_H, gz, f);
const b = project(GRID_HALF, -CAM_H, gz, f);
if (a.ok && b.ok) line(a.x, a.y, b.x, b.y);
}
// ---- 2. THE MARKER: where the virtual content is anchored on the floor -
// A small orange square on the floor at depth Zobj, the tracked fiducial.
const m = CUBE_S * 0.5;
const marker = [
project(-m, -CAM_H, Zobj - m, f),
project( m, -CAM_H, Zobj - m, f),
project( m, -CAM_H, Zobj + m, f),
project(-m, -CAM_H, Zobj + m, f),
];
if (marker.every((p) => p.ok)) {
noFill();
stroke(220, 130, 40); // orange accent: the anchor
strokeWeight(2);
beginShape();
for (const p of marker) vertex(p.x, p.y);
endShape(CLOSE);
}
// ---- 3. VIRTUAL CONTENT: a wireframe cube registered to the marker -----
// Cube sits on the floor at (0, -CAM_H, Zobj), spun by theta about its
// vertical axis. SAME project() as the floor => stays locked in place.
const verts = cubeVertices(0, -CAM_H, Zobj, CUBE_S, theta, f);
// 12 edges of a cube, indices into the 8-vertex list.
const edges = [
[0, 1], [1, 2], [2, 3], [3, 0], // bottom face
[4, 5], [5, 6], [6, 7], [7, 4], // top face
[0, 4], [1, 5], [2, 6], [3, 7], // vertical pillars
];
stroke(40, 90, 200); // blue accent: the virtual object
strokeWeight(2);
for (const e of edges) {
const A = verts[e[0]], B = verts[e[1]];
if (A.ok && B.ok) line(A.x, A.y, B.x, B.y);
}
// apparent (projected) edge length of the front-bottom edge, for readout
const apx = dist(verts[0].x, verts[0].y, verts[1].x, verts[1].y);
// ---- 4. HUD watermark (drawn last; noStroke first) --------------------
drawHUD(f, Zobj, thetaSlider.value(), apx);
// slider labels, drawn over the canvas next to each slider
noStroke();
fill(60);
textAlign(RIGHT, CENTER);
textSize(12);
text("f (focal length, px)", 142, height - 80);
text("Z (object depth)", 142, height - 52);
text("theta (spin, deg)", 142, height - 24);
}
// Build the 8 projected vertices of a cube standing on the floor.
// base centre (bx, by, bz); side s; spun by ang about vertical axis.
function cubeVertices(bx, by, bz, s, ang, f) {
const h = s; // cube height equals its side
const c = cos(ang), sn = sin(ang);
// local square corners (before rotation), on the XZ plane
const half = s * 0.5;
const base = [
[-half, -half], [half, -half], [half, half], [-half, half],
];
const out = [];
// bottom ring (y = by) then top ring (y = by + h)
for (const yy of [by, by + h]) {
for (const corner of base) {
// rotate the (x, z) corner about the vertical axis by ang
const lx = corner[0], lz = corner[1];
const rx = lx * c - lz * sn;
const rz = lx * sn + lz * c;
out.push(project(bx + rx, yy, bz + rz, f));
}
}
return out;
}
// The four-part Wikitube HUD: title block, control hints, readouts, equation.
function drawHUD(f, Zobj, thetaDeg, apx) {
noStroke();
// 2a. top-left title block
textAlign(LEFT, TOP);
fill(20);
textSize(20);
text("Augmented reality", 16, 14);
fill(110);
textSize(12);
text("Wikitube microsim - en.wikitube.io/wiki/" + ARTICLE, 16, 40);
// 2b. top-right control hints
textAlign(RIGHT, TOP);
fill(110);
textSize(11);
text("sliders: f, Z, theta (camera & virtual object)", width - 14, 14);
text("virtual cube stays registered to the floor marker", width - 14, 30);
// 2c. bottom-left live readouts (canonical parameter symbols)
textAlign(LEFT, BOTTOM);
textSize(13);
fill(40, 90, 200);
text("f = " + nf(f, 0, 0) + " px", 16, height - 116);
fill(20);
text("Z = " + nf(Zobj, 0, 1) + " units", 120, height - 116);
fill(80);
textSize(11);
text("apparent edge ~ f/Z = " + nf(apx, 0, 0) + " px", 250, height - 118);
// 2d. bottom-right equation footer (ASCII only, single line)
textAlign(RIGHT, BOTTOM);
fill(80);
textSize(11);
text("x = f*X/Z + cx, y = f*Y/Z + cy (pinhole projection)",
width - 14, height - 8);
}
```
## Links (Wikipedia order)
<!-- injected from _registry/childlinks/Augmented_reality.json (2026-07-30T02:09:12Z) -->
`360-degree_video` · `3D_audio_effect` · `3D_computer_graphics` · `3D_human–computer_interaction` · `A-Frame_(software)` · `ARCore` · `ARKit` · `ARTag` · `ARToolKit` · `Adobe_Flash` · `AltspaceVR` · `Ammunition` · `Android_(operating_system)` · `Android_XR` · `AntVR` · `Apple_Inc.` · `Apple_Vision_Pro` · `Application_framework` · `Application_software` · `Armstrong_Laboratory` · `Asynchronous_reprojection` · `Augment_(app)` · `Augmented_Reality_Markup_Language` · `Augmented_reality-based_testing` · `Automotive_head-up_display` · `Automotive_navigation_system` · `Avatar_(computing)` · `Bigscreen_Beyond` · `Bionic_contact_lens` · `Blair_MacIntyre` · `Boeing` · `Brain–computer_interface` · `Brilliant_Labs` · `ByteDance` · `CastAR` · `Cinematic_virtual_reality` · `Circular_review_system` · `Collabora` · `Commercial_off-the-shelf` · `Communications_of_the_ACM` · `Computer-mediated_reality` · `Confocal_microscopy` · `Cyberith_Virtualizer` · `Dieter_Schmalstieg` · `Digital_twin` · `Endoscope` · `Extended_reality` · `EyeTap` · `Eye_tracking` · `FaceTime` · `Facial_motion_capture` · `Fetus` · `Fiducial_marker` · `Filter_(social_media)` · `Finger_tracking` · `Foveated_rendering` · `Free_viewpoint_television` · `Gesture_recognition` · `Godot_(game_engine)` · `Golden-i` · `Google` · `Google_Cardboard` · `Google_Daydream` · `Google_Glass` · `Google_Maps` · `HTC` · `HTC_Vive` · `Haptic_perception` · `Haptic_suit` · `Haptic_technology` · `Harvard_University` · `Head-mounted_display` · `Head-up_display` · `Hearing` · `HoloLens_2` · `Holography` · `Horizon_Worlds` · `Houzz` · `Human_Factors_(journal)` · `Human–computer_interaction` · `IBM_Technical_Disclosure_Bulletin` · `IKEA` · `IOS` · `Image-based_modeling_and_rendering` · `Image_registration` · `Immersion_(virtual_reality)` · `Improbable_(company)` · `Industrial_augmented_reality` · `Interactive_art` · `Ivan_Sutherland` · `Jetpack_Compose` · `Khronos_Group` · `L._Frank_Baum` · `Laparoscopy` · `Leap_Motion` · `Liquid_Image` · `List_of_HTC_Vive_games` · `List_of_Meta_Quest_games` · `List_of_Oculus_Rift_games` · `List_of_PlayStation_VR2_games` · `List_of_PlayStation_VR_games` · `List_of_software_related_to_augmented_reality` · `List_of_virtual_reality_headsets` · `Location-based_service` · `Louis_B._Rosenberg` · `Lowe's` · `Magic_Leap` · `Mashable` · `Meta_(augmented_reality_company)` · `Meta_Horizon_OS` · `Meta_Horizon_OS_version_history` · `Meta_Platforms` · `Meta_Quest_3` · `Meta_Quest_3S` · `Meta_Quest_Pro` · `Metaverse` · `Microsoft` · `Microsoft_HoloLens` · `Mixed_reality_game` · `Mockup` · `Modality_(human–computer_interaction)` · `Mountain_Equipment_Co-op` · `Multimodal_interaction` · `Munich` · `NASA_X-38` · `NeosVR` · `Neurosurgery` · `Niantic,_Inc.` · `Niantic_Spatial` · `Object_permanence` · `Oculus_Go` · `Oculus_Quest` · `Oculus_Rift` · `Oculus_Rift_CV1` · `Oculus_Rift_S` · `Oculus_Touch` · `Omnidirectional_camera` · `Omnidirectional_treadmill` · `OpenVR` · `OpenXR` · `Open_Source_Virtual_Reality` · `Optical_see-through_head-mounted_display` · `PICO_4` · `Pancake_lens` · `Personal_protective_equipment` · `Pervasive_game` · `Pimax` · `PlayStation_Move` · `PlayStation_VR` · `PlayStation_VR2` · `Pokémon_Go` · `Project_Iris` · `Projection_augmented_model` · `Projection_mapping` · `Purdue_University` · `Quantified_self` · `Quest_2` · `Razer_Hydra` · `Reality_Labs` · `Reality–virtuality_continuum` · `Rec_Room_(video_game)` · `Resonite` · `Robot` · `Rockwell_Collins` · `Rockwell_International` · `Rokoko_(company)` · `Ronald_Azuma` · `Room-scale` · `S&box` · `Samsung_Electronics` · `Samsung_Galaxy_XR` · `Samsung_Gear_VR` · `Sansar_(video_game)` · `Screen-door_effect` · `Sega_VR` · `Sensorama` · `Sensorium_Corporation` · `Shopify` · `Simulated_reality` · `Simulation_hypothesis` · `Simultaneous_localization_and_mapping` · `Sinespace` · `Six_degrees_of_freedom` · `SixthSense` · `Smartglasses` · `Smartphone` · `Snapchat` · `Somatosensory_system` · `Source_2` · `Spatial_computing` · `Springer_Publishing` · `SteamOS` · `Steam_Frame` · `Steve_Mann_(inventor)` · `Steven_K._Feiner` · `Stryker` · `Telepresence` · `The_Master_Key_(Baum_novel)` · `Time_(magazine)` · `Tomography` · `Transhumanism` · `Ultrasound` · [[United_States_Air_Force]] · `United_States_Army` · `Unity_(game_engine)` · `Universal_Scene_Description` · `Unreal_Engine` · `VFX1_Headgear` · `VPL_Research` · `VR-1` · `VRChat` · `VR_photography` · `VTime_XR` · `VTuber` · `Valve_Corporation` · `Valve_Index` · `Varjo` · `Videoplace` · `Virtual_Boy` · `Virtual_fixture` · `Virtual_graffiti` · [[Virtual_reality]] · `Virtual_reality_applications` · `Virtual_reality_game` · `Virtual_reality_headset` · `Virtual_reality_sickness` · `Virtual_retinal_display` · `Virtual_world` · `Virtuality_(product)` · `Virtuix_Omni` · `VisionOS` · `Visual_odometry` · `Vuzix` · `WallaMe` · [[Wayback_Machine]] · `Wayfair` · `Wayfinding` · `Wearable_computer` · `WebAR` · `WebXR` · `Windows_Mixed_Reality` · `Wired_(magazine)` · `Wired_glove` · `Wizdish_ROVR` · `Word_Lens` · `Wright-Patterson_Air_Force_Base` · `X-ray` · `Yuma_Proving_Ground`
## From the Real GENERATIVE library
*Augmented reality — placed from the Real G.E.N.E.R.A.T.I.V.E. course library (Visualization room). Source: Wikimedia Commons (via Wikipedia article media). [Details & license](https://commons.wikimedia.org/wiki/File:Virtual-Fixtures-USAF-AR.jpg).*
> Augmented reality (AR) is an interactive experience that combines the real world and computer-generated 3D content. The content can span multiple sensory modalities, including visual, auditory, haptic, somatosensory and olfactory.[1] AR can be defined as a system that incorporates three basic features: a combination of real and virtual worlds, real-time inte ([Wikipedia](https://en.wikipedia.org/wiki/Augmented_reality))
<!-- REAL-GENERATIVE-MEDIA:END -->
<!-- LOCAL-MEDIA-PASS:START -->
## From the vault media library
!Augmented reality thumb.png
*Augmented Reality — from the vault's own media holdings, placed 2026-07-09. MTN / Wikitube.io original · CC BY-SA 4.0.*
<!-- LOCAL-MEDIA-PASS:END -->
> **Room:** Visualization · **Status:** ✅ shipped
## Overview
Augmented reality (AR) is an interactive [[Experience|experience]] that combines the real world and computer-generated 3D content. The content can span multiple sensory modalities, including visual, auditory, haptic, somatosensory and olfactory.1 AR can be defined as a [[System|system]] that incorporates three basic features: a combination of real and virtual worlds, real-time interaction, and accurate 3D registration of virtual and real objects.2 The overlaid sensory [[Information|information]] can be constructive (i.e. additive to the natural environment), or destructive (i.e. masking of the natural environment).3 As such, it is one of the key technologies in the reality-virtuality continuum.4
_(Overview is shorter than 200 words; the pipeline should expand it from textbook context before publishing.)_
## See also
- Room hub: Visualization
- p5.js Editor conventions: P5 JS EDITOR
- Wiki root: MAIN
---
*Scaffolded by `generative-microsim` from row 15 of the Visualization sheet on 2026-06-04T14:49:07Z.*
<!-- REAL-GENERATIVE-MEDIA:START -->
<!-- CRAFT-LINK:START g12 -->
*Built to the [[WT!P5_js_Microsim_Master_Class|p5.js Master Class]].*
<!-- CRAFT-LINK:END -->
## Wikipedia : Wikitube
**Strict pair:** [Wikipedia](https://en.wikipedia.org/wiki/Augmented_reality) : [Wikitube](https://en.wikitube.io/wiki/Augmented_reality)
## Previous hub tags
Tree parents: [[Complex_system]] · [[Graph_theory]] · [[Information_theory]].
Legacy hubs: `GENERATIVE`.
---
*Sources: 1 legacy note. Minted wave 1, 2026-07-30 (v1.6 order).*