# Wayback Machine
## Microsim
### Live player
<div class="microsim-player">
<iframe src="https://editor.p5js.org/sciencenibber/full/ZBxM-wEIe" width="100%" height="620" frameborder="0" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<div class="microsim-fallback">
<img src="Microsims/thumbs/Wayback_Machine.png" alt="Wayback_Machine 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/ZBxM-wEIe">open sketch in the p5.js editor</a></em></p>
</div>
**Editor URL:** https://editor.p5js.org/sciencenibber/sketches/ZBxM-wEIe
**Description (100 words):**
This microsim models the core mechanic of the Wayback Machine: a web archive holds only the discrete snapshots its crawler captured, never a continuous record. Drag the **t_req** slider to pick a date along the 1996-2026 timeline; the sketch serves the most recent capture at or before that moment (the red "snap-back"), exactly as the real archive does, and reports the staleness **gap** between what you asked for and what you got. A mock browser window re-renders in the visual style of the served era. The **rate** slider changes crawl [[Density|density]], letting you watch denser crawling shrink the gap toward zero.
```js
// =====================================================================
// Article : Wayback Machine
// Slug : Wayback_Machine
// Wikitube : en.wikitube.io/wiki/Wayback_Machine
// Room : Telecommunications
//
// Idea : The Wayback Machine never has a copy of a page for every
// instant — it only holds the discrete snapshots its crawler
// captured. When you ask for a URL "as of" some date, the
// archive serves you the most recent capture at or before
// that moment, and the difference between what you asked for
// and what you got is the "staleness gap". This sketch lets
// you slide a requested date along a 1996..2026 timeline and
// watch which archived snapshot is actually served, while a
// mock browser window above re-renders in the visual style of
// the served era. A second slider changes the crawl rate so
// you can feel how denser crawling shrinks the gap.
//
// Equation : served(t) = max{ c_i in C : c_i <= t } (nearest
// capture at or before t); gap = t - served(t).
// Rendered in ASCII inside the text() footer below.
// =====================================================================
// Rule 3 — single source of truth for title line + save name + URL line.
const ARTICLE = "Wayback_Machine";
// Rule 4 — disable the Friendly Error System for ship.
p5.disableFriendlyErrors = true;
// ---------- domain constants ----------
const Y0 = 1996; // archive birth year (timeline left edge)
const Y1 = 2026; // timeline right edge ("now")
// ---------- controls ----------
let reqSlider; // requested date t_req (stored *100 for sub-year step)
let rateSlider; // base crawls per year
// ---------- derived state ----------
let captures = []; // sorted array of capture times (fractional years)
let lastRate = -1; // memo: only rebuild captures when the rate changes
// ---------- layout (computed in setup from width/height) ----------
let TL, TR, TY; // timeline left x, right x, baseline y
let winX, winY, winW, winH; // mock browser window rectangle
function setup() {
// Rule 5 — canvas inside setup, standard size, 2x density.
createCanvas(720, 520);
pixelDensity(2);
// Timeline lives in a band near the bottom; the mock browser sits above it.
TL = 60;
TR = width - 40;
TY = height - 96;
// Mock browser window region (above the timeline, below the HUD title).
winX = 60;
winY = 70;
winW = width - 120;
winH = TY - winY - 34;
// Rule 6 — controls in setup, positioned explicitly, labelled in draw().
// t_req: range is the whole archive life. Step of 1 == 0.01 yr (~3.6 days).
reqSlider = createSlider(Y0 * 100, Y1 * 100, 2008 * 100, 1);
reqSlider.position(150, height - 50);
reqSlider.style("width", "230px");
// rate: base crawls/year. 1 (sparse early web) .. 24 (twice a month).
rateSlider = createSlider(1, 24, 5, 1);
rateSlider.position(150, height - 26);
rateSlider.style("width", "230px");
}
function draw() {
background(248);
// ---------- read controls ----------
const tReq = reqSlider.value() / 100; // requested date, fractional year
const crawlRate = rateSlider.value(); // base crawls per year ("rate" is a p5 reserved name)
// ---------- math: rebuild the capture set only when the rate changes ----------
if (crawlRate !== lastRate) {
captures = buildCaptures(crawlRate);
lastRate = crawlRate;
}
const sIdx = servedIndex(tReq); // index of served snapshot
const served = sIdx >= 0 ? captures[sIdx] : null;
const gap = served !== null ? tReq - served : null;
// ---------- layer 1+2: mock archived browser window ----------
drawBrowserWindow(served);
// ---------- layer 1: timeline axis (neutral grey) ----------
stroke(150);
strokeWeight(1);
line(TL, TY, TR, TY);
// decade gridlines + year labels
noStroke();
fill(140);
textAlign(CENTER, TOP);
textSize(10);
for (let y = Y0; y <= Y1; y += 5) {
const x = yearToX(y);
stroke(225);
line(x, TY - 26, x, TY + 6);
noStroke();
fill(140);
text(y, x, TY + 10);
}
// ---------- layer 2: capture ticks (the discrete snapshots) ----------
for (let i = 0; i < captures.length; i++) {
const x = yearToX(captures[i]);
stroke(40, 90, 200, 150); // blue = an archived snapshot exists
strokeWeight(1);
line(x, TY - 14, x, TY);
}
// ---------- layer 2: served snapshot + request marker ----------
const xReq = yearToX(tReq);
// requested date: orange vertical marker
stroke(220, 130, 40);
strokeWeight(2);
line(xReq, TY - 30, xReq, TY + 2);
noStroke();
fill(220, 130, 40);
triangle(xReq - 5, TY - 30, xReq + 5, TY - 30, xReq, TY - 22);
if (served !== null) {
const xS = yearToX(served);
// "snap back" connector from request to the served capture
stroke(220, 60, 60);
strokeWeight(1);
drawingContext.setLineDash([4, 3]);
line(xReq, TY - 18, xS, TY - 18);
drawingContext.setLineDash([]);
// served snapshot: red emphasised tick + dot
stroke(220, 60, 60);
strokeWeight(3);
line(xS, TY - 16, xS, TY);
noStroke();
fill(220, 60, 60);
circle(xS, TY - 16, 8);
}
// ---------- HUD watermark (rule 2) ----------
noStroke();
textFont("system-ui");
// 2a — top-left title block.
fill(20);
textSize(20);
textAlign(LEFT, TOP);
text("Wayback Machine", 16, 14);
textSize(12);
fill(110);
text("Wikitube microsim - en.wikitube.io/wiki/" + ARTICLE, 16, 40);
// 2b — top-right control hints.
textAlign(RIGHT, TOP);
textSize(11);
fill(110);
text("slider: t_req (requested date on the archive timeline)", width - 16, 14);
text("slider: rate (base crawls per year -> snapshot density)", width - 16, 30);
// 2c — bottom-left live readouts in canonical symbols.
// Slider labels (rule 7) — to the LEFT of each slider, right-aligned.
textAlign(RIGHT, CENTER);
textSize(12);
fill(60);
text("t_req", 142, height - 50 + 8);
text("rate", 142, height - 26 + 8);
// Numeric readouts sit to the RIGHT of the slider strip so the slider
// thumb never crosses them (see pitfalls 2026-04-30, slider/readout band).
textAlign(LEFT, TOP);
textSize(13);
fill(220, 130, 40);
text("t_req = " + fmtDate(tReq), 410, height - 52);
if (served !== null) {
fill(220, 60, 60);
text("served = " + fmtDate(served), 410, height - 34);
fill(60);
textSize(12);
text("gap = " + nf(gap, 1, 3) + " yr (" + round(gap * 365) + " d) captures = " + captures.length,
410, height - 16);
} else {
fill(120);
text("served = (no capture before this date)", 410, height - 34);
}
// 2d — bottom-right equation footer (ASCII only — see pitfalls.md).
textAlign(RIGHT, BOTTOM);
textSize(11);
fill(80);
text("served(t) = max{ c_i <= t } gap = t - served(t)", width - 16, height - 6);
}
// ---------- helpers (rule 10) ----------
// Map a fractional year to an x pixel on the timeline.
function yearToX(t) {
return map(t, Y0, Y1, TL, TR);
}
// Build a deterministic capture set. Crawl rate grows across the archive's
// life (the real Wayback Machine crawls recent web far more densely than the
// 1990s web), so later years get proportionally more snapshots. A small LCG
// keeps the layout stable for a given rate instead of jittering every frame.
function buildCaptures(rateBase) {
let seed = 20010101; // launch year as a nod; any constant works
const rnd = () => {
seed = (seed * 1103515245 + 12345) & 0x7fffffff;
return seed / 0x7fffffff;
};
const arr = [];
for (let y = Y0; y < Y1; y++) {
// growth factor 1x at 1996 -> ~4x near 2026
const growth = 1 + ((y - Y0) / (Y1 - Y0)) * 3;
const n = max(1, round(rateBase * growth));
for (let k = 0; k < n; k++) {
arr.push(y + rnd()); // a capture at a random offset within the year
}
}
arr.sort((a, b) => a - b);
return arr;
}
// Binary search: index of the latest capture at or before t, or -1 if none.
function servedIndex(t) {
let lo = 0, hi = captures.length - 1, ans = -1;
while (lo <= hi) {
const mid = (lo + hi) >> 1;
if (captures[mid] <= t) { ans = mid; lo = mid + 1; }
else { hi = mid - 1; }
}
return ans;
}
// Fractional year -> "YYYY-MM" (ASCII, no Unicode in strings).
function fmtDate(t) {
const y = floor(t);
let m = floor((t - y) * 12) + 1;
if (m > 12) m = 12;
return y + "-" + nf(m, 2);
}
// Draw a stylised archived browser window whose look evolves by era. This is
// flavour, not data: it makes "what you fetched" feel like a real page from
// that moment instead of an abstract tick.
function drawBrowserWindow(served) {
// window frame
noStroke();
fill(255);
rect(winX, winY, winW, winH, 6);
stroke(210);
noFill();
rect(winX, winY, winW, winH, 6);
// title bar
noStroke();
fill(238);
rect(winX, winY, winW, 26, 6, 6, 0, 0);
// traffic-light dots
fill(220, 90, 80); circle(winX + 16, winY + 13, 8);
fill(230, 190, 70); circle(winX + 30, winY + 13, 8);
fill(120, 200, 120); circle(winX + 44, winY + 13, 8);
// URL bar text
fill(90);
textAlign(LEFT, CENTER);
textSize(11);
const urlLabel = served !== null
? "http://example.com (archived " + fmtDate(served) + ")"
: "http://example.com (no archived capture)";
text(urlLabel, winX + 64, winY + 13);
// page content area
const cx = winX + 14;
const cy = winY + 38;
const cw = winW - 28;
if (served === null) {
fill(170);
textAlign(CENTER, CENTER);
textSize(13);
text("Page not in archive yet", winX + winW / 2, winY + winH / 2);
return;
}
// era fraction 0 (1996) .. 1 (2026) drives palette + layout density
const e = constrain((served - Y0) / (Y1 - Y0), 0, 1);
// header / hero band: greys early, saturated + tall later
const hHue = lerpColor(color(120), color(40, 110, 210), e);
const heroH = lerp(20, 54, e);
noStroke();
fill(hHue);
rect(cx, cy, cw, heroH, e > 0.5 ? 4 : 0);
// a couple of "nav link" ticks in the header
fill(255, 230);
for (let i = 0; i < 4; i++) rect(cx + 10 + i * 46, cy + heroH / 2 - 3, 34, 6, 2);
// body: number of content cards grows with the era (web got busier)
const cardsY = cy + heroH + 12;
const nCards = floor(lerp(2, 6, e));
const gap = 10;
const cardW = (cw - gap * (nCards - 1)) / nCards;
const cardH = winH - (cardsY - winY) - 16;
for (let i = 0; i < nCards; i++) {
const bx = cx + i * (cardW + gap);
// early cards: flat grey blocks; modern: soft tinted cards w/ rounded corners
const cardCol = lerpColor(color(225), color(232, 238, 248), e);
fill(cardCol);
stroke(220);
strokeWeight(1);
rect(bx, cardsY, cardW, cardH, lerp(0, 8, e));
// a thumbnail strip + a couple of text lines inside each card
noStroke();
fill(lerpColor(color(200), color(150, 180, 230), e));
rect(bx + 8, cardsY + 8, cardW - 16, cardH * 0.45, lerp(0, 5, e));
fill(190);
rect(bx + 8, cardsY + cardH * 0.45 + 14, cardW - 16, 6, 2);
rect(bx + 8, cardsY + cardH * 0.45 + 26, (cardW - 16) * 0.6, 6, 2);
}
}
```
## Links (Wikipedia order)
<!-- injected from _registry/childlinks/Wayback_Machine.json (2026-07-30T02:09:12Z) -->
`501(c)(3)_organization` · `Alexa_Internet` · `Alfred_P._Sloan_Foundation` · `Alison_Macrina` · `Anna's_Archive` · `Archive.today` · `Archive_Team` · `Arctic_World_Archive` · `Ars_Technica` · `BBC` · `Bibliotheca_Alexandrina` · `Billion` · `Biodiversity_Heritage_Library` · `Breach_of_contract` · `Brewster_Kahle` · `Bruce_Gilliat` · `CSS` · `Cache_(computing)` · `CanLII` · `Censorship_in_North_Korea` · `Church_of_Scientology` · `Climate_change` · `Cloudflare` · `Common_Crawl` · `Computer_Fraud_and_Abuse_Act` · `Conservation_and_restoration_of_time-based_media_art` · `Content_delivery_network` · `Copyright` · `Copyright_infringement` · `Cryptographic_hash_function` · `Data_cap` · `Database` · `David_Rumsey` · `Declaratory_judgment` · `Democracy_Now!` · `Digital_Curation_Centre` · `Digital_Millennium_Copyright_Act` · `Digital_artifactual_value` · `Digital_curation` · `Digital_dark_age` · `Digital_forensics` · `Digital_obsolescence` · `Digital_preservation` · `Dish_Network` · `EchoStar` · `Email_archiving` · `Emulator` · `European_Patent_Office` · `Federal_Court_of_Canada` · `Federation_of_Law_Societies_of_Canada` · `GitHub` · `Gopher_(protocol)` · `GreatFire` · `HTML` · `Hachette_v._Internet_Archive` · `Hearsay` · `Heritrix` · `Igor_Girkin` · `InformationWeek` · `Information_technology` · `Institut_de_l'information_scientifique_et_technique` · `Internet_Archive` · `Internet_Archive_Scholar` · `Internet_Archive_building` · `Internet_Memory_Foundation` · `Internet_as_a_source_of_prior_art` · `Internet_censorship_in_China` · `Internet_censorship_in_Russia` · `Jason_Scott` · `JavaScript` · `Java_(programming_language)` · `Jill_Lepore` · `Keith_Scott_(voice_actor)` · `Landing_page` · `Library_Freedom_Project` · `Library_Genesis` · `Library_and_information_science` · `Library_of_Congress` · `Libre_Map_Project` · `LibriVox` · `Link_rot` · `Linux` · `List_of_digital_preservation_initiatives` · `List_of_web_archiving_initiatives` · `Live_Music_Archive` · `Long_Now_Foundation` · `Malaysia_Airlines_Flight_17` · `March_for_Science` · `Marion_Stokes` · `Mr._Peabody` · `National_Archives_and_Records_Administration` · `National_Digital_Information_Infrastructure_and_Preservation_Program` · `Open_Archival_Information_System` · `Open_Content_Alliance` · `Open_Library` · `Panorama_Ephemera` · `PetaBox` · `Prior_art` · `Public.Resource.Org` · `Python_(programming_language)` · `Recorder:_The_Marion_Stokes_Project` · `Reddit` · `Rick_Prelinger` · `Robots.txt` · `San_Francisco` · `Scientology` · `Scientology_and_the_Internet` · `Simon_Schwartzman` · `Social_science` · `St._Martin's_Press` · `Stalkerware` · `Sun_Microsystems` · `Sun_Modular_Datacenter` · `Sun_Open_Storage` · `Suzanne_Shell` · `Swahili_Wikipedia` · `TVP_Polonia` · `Telewizja_Polska` · `Terms_of_service` · `The_Adventures_of_Rocky_and_Bullwinkle_and_Friends` · `The_Atlantic` · `The_Daily_Beast` · `The_Guardian` · `The_New_York_Times` · `The_New_Yorker` · `The_Register` · `The_Verge` · `Time_capsule` · `Timeline_of_audio_formats` · `Timeline_of_digital_preservation` · `Tom's_Hardware` · `Toolbar` · `Trillion` · `URL` · `United_States_District_Court_for_the_District_of_Colorado` · `United_States_District_Court_for_the_Northern_District_of_California` · `United_States_Patent_and_Trademark_Office` · `Universal_Music_Group_v._Internet_Archive` · `University_of_California` · `University_of_California,_Berkeley` · `Usenet` · `Video_game_preservation` · `Wayback_Machine_(Peabody's_Improbable_History)` · `Web_archiving` · `Web_crawler` · `Web_page` · `Wikipedia_community` · `World` · `World_Wide_Web` · `Z-Library`
## From the Real GENERATIVE library
*Wayback Machine — placed from the Real G.E.N.E.R.A.T.I.V.E. course library (Computation and Cybersecurity room). Source: Wikimedia Commons (via Wikipedia article media). [Details & license](https://commons.wikimedia.org/wiki/File:Wayback_Machine_logo_2010.svg).*
> The Wayback Machine is a digital archive of the World Wide Web founded by the Internet Archive, an American nonprofit organization based in San Francisco, California. Created in 1996 and launched to the public in 2001, it allows users to go "back in time" to see how websites looked in the past. ([Wikipedia](https://en.wikipedia.org/wiki/Wayback_Machine))
<!-- REAL-GENERATIVE-MEDIA:END -->
<!-- LOCAL-MEDIA-PASS:START -->
## From the vault media library
!Wayback Machine thumb.png
*Wayback Machine — 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:** [[Telecommunications]] · **Status:** ✅ shipped
## Overview
The Wayback Machine is a digital archive of the World Wide Web founded by the Internet Archive, an American nonprofit organization based in San Francisco, California. Created in 1996 and launched to the public in 2001, it allows users to go "back in time" to see how websites looked in the past. Its founders, Brewster Kahle and Bruce Gilliat, developed the Wayback Machine to provide "universal access to all knowledge" by preserving archived copies of defunct web pages.2
_(Overview is shorter than 200 words; the pipeline should expand it from textbook context before publishing.)_
## See also
- Room hub: [[Telecommunications]]
- p5.js Editor conventions: P5 JS EDITOR
- Wiki root: MAIN
---
*Scaffolded by `generative-microsim` from row 5 of the Telecommunications sheet on 2026-06-03T04:58:35Z.*
<!-- 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/Wayback_Machine) : [Wikitube](https://en.wikitube.io/wiki/Wayback_Machine)
## Previous hub tags
Tree parents: [[Agent-based_model]] · [[Cellular_automaton]] · [[Complex_system]] · [[Cybernetics]] · [[Dynamical_system]] · [[Feedback]] · [[Game_theory]] · [[Graph_theory]] · [[Helium]] · [[Helium-3]] · [[Hydrogen]] · [[Information_theory]] · [[Network_theory]] · [[Operations_research]] · [[Oxygen]] · [[Reliability_engineering]] · [[Self-organization]] · [[Systems_engineering]] · [[Systems_theory]].
Legacy hubs: `GENERATIVE`.
---
*Sources: 1 legacy note. Minted wave 1, 2026-07-30 (v1.6 order).*