A buildless, browser-based mathematical powerhouse — scientific calculator, graphing engine, matrix/vector toolkit, and symbolic CAS — wrapped in a CRT-glitchwave-neon aesthetic that boots like an old Linux terminal, works offline, and deploys to GitHub Pages.
Live site: https://john-paul-ruf.github.io/calc-me/
Owner: John RUf
Created: 2026-07-31
Created with: New Foundry — an AI-assisted software development pipeline
calc-me is a single-page web app with zero build step, zero dependencies, zero framework. A pre-boot screen asks for a click (to satisfy browser audio autoplay policies), then a boot sequence plays — scanlines flicker on, a POST-style memory check types out character-by-character, Linux-style kernel messages scroll by, and the calculator UI fades in with a phosphor warm-up glow and a short startup jingle. The boot is skippable — click or tap anywhere.
The calculator is a full scientific instrument with four domains, all accessible from one unified expression input — no mode switching, no tabs:
- Scientific — trig, log/ln/exp, powers/roots, factorial, nPr/nCr, statistics, constants (π, e, φ, γ)
- Graphing —
plot(sin(x)), multi-function overlays, Cartesian/parametric/polar, zoom/pan/trace - Matrix/Vector —
[[1,2],[3,4]]syntax, determinant, inverse, transpose, dot/cross product - Symbolic CAS —
diff(x^2+3x, x),int(x^2, x),simplify(...),expand(...),factor(...)
The parser detects which domain you mean from the expression syntax alone.
The aesthetic is the product. The screen is never visually still — it breathes, drifts, and twitches like a piece of haunted hardware. Per-character glitch timers fire independently. Glow pulses drift with recomputing frequencies. Scanlines and flicker run underneath everything. Results are sacred — rock-solid, exempt from all glitching. All audio is synthesized at runtime via the Web Audio API — no audio files, just oscillators and noise.
This project was created using The New Foundry, an AI-assisted software development app that orchestrates a pipeline of specialized agents. Each phase produces a specific artifact that feeds the next phase. The entire pipeline ran from idea to deployable code with human approval gates between phases.
The pipeline executed the following confirmed phases (from pipeline-state.json):
| # | Phase | Agent | Artifact | What Happened |
|---|---|---|---|---|
| 1 | idea | Spec | specs/idea.md |
The concept was articulated: a buildless CRT-aesthetic calculator with scientific, graphing, matrix, and CAS capabilities. Target users, guiding principles, key features, non-goals, and open questions were defined. |
| 2 | requirements | Spec | specs/requirements.md |
19 functional requirements (FR-1 through FR-19) were written with acceptance criteria. Non-functional requirements (performance, security, accessibility, platform), constraints (buildless, zero deps, vanilla JS), dependencies, and assumptions were specified. |
| 3 | design | Designer | specs/design.md + mocks/*.html |
The visual language was defined: six-color neon palette on black, monospace typography, spacing system, glow levels, CRT ambient layers. Component inventory, screen inventory, button pad layout, user flows, interaction details, sound design, responsive breakpoints, and accessibility strategy were all specified. Five interactive HTML mocks were produced (boot.html, calculator.html, graph.html, matrix.html, cas.html) plus a prototype index. |
| 4 | architecture | Architect | specs/architecture.md |
Stack decisions were made: ES6 modules (no bundler), no framework, recursive-descent parser, cache-first service worker, custom browser-based test runner. The full module structure was defined with contracts, data flow diagrams, dependency graphs, API design, keyboard input maps, security posture, and deployment architecture. |
| 5 | database | DB | specs/database.md |
The localStorage schema was designed: keys, shapes, sanitization rules, history entry structure, 500-entry cap, quota handling. Since this is a buildless client-side app, "database" means the localStorage wrapper module. |
| 6 | prototype | Coder | src/ + tests/ |
The full application was implemented in 9 build sessions, each producing a self-contained layer in dependency order. |
The Coder agent executed the prototype phase as 9 sequential sessions, each producing compilable, wired code:
| Session | Layer | Files Produced | Purpose |
|---|---|---|---|
| 1 | Foundation | styles/main.css, styles/glow.css, scripts/storage.js, scripts/state.js |
CSS layout/typography/CRT effects, localStorage wrapper with sanitization, central state with pub/sub |
| 2 | Parser Core | scripts/parser/tokenizer.js, scripts/parser/intent.js, scripts/parser/parser.js |
Lexer, intent detection (scientific/graphing/matrix/CAS), recursive-descent parser with AST |
| 3 | Math Engines | scripts/parser/matrix.js, scripts/parser/statistics.js, scripts/parser/cas.js |
Matrix/Vector classes with LU decomposition, statistics functions, symbolic algebra (diff/int/simplify/expand/factor) |
| 4 | Evaluator + Formatting | scripts/parser/evaluator.js, scripts/ui/formatting.js |
AST evaluator dispatching to all four domains, result formatting (scientific notation, matrix brackets, CAS superscripts/fractions/radicals) |
| 5 | Graphing | scripts/graph/plotter.js, scripts/graph/graph-interaction.js |
Canvas rendering with neon grid/curves/scanlines, zoom/pan/trace with mouse/touch/pinch |
| 6 | Effects + Audio | scripts/crt.js, scripts/glitch.js, scripts/pulse.js, scripts/audio.js |
CRT overlay manager, per-character glitch system, drifting glow pulse, Web Audio synthesis |
| 7 | UI Layer | scripts/ui/display.js, scripts/ui/buttons.js, scripts/ui/history.js, scripts/ui/topbar.js |
Display area with live preview/scanline roll, button pad with 2nd-page toggle, history panel, top bar with DEG/RAD/mute/memory |
| 8 | Entry Point | scripts/boot.js, scripts/main.js, scripts/sw.js, index.html |
Boot sequence (pre-boot click screen, POST/kernel log/character typing/transition jingle), app initialization/wiring, cache-first service worker, single HTML entry point |
| 9 | Test Suite | tests/runner.html, tests/test-utils.js, 15 test files |
Browser-based test harness with ~645 tests covering parser, evaluator, evaluator edge cases, matrix, CAS, statistics, graph, storage, state, formatting, graph-interaction, buttons, integration, effects (pulse/glitch), and audio |
After all 9 sessions, a project integrity check was performed: every file was read in full and verified for broken imports, mismatched CSS classes, invalid DOM IDs, unused imports, and missing function definitions. 19 issues were found and fixed.
The New Foundry pipeline follows a strict separation of concerns:
- Spec owns the "what" — requirements, user stories, acceptance criteria
- Designer owns the "how it looks" — visual language, mocks, interaction patterns
- Architect owns the "how it's structured" — module boundaries, stack decisions, data flow
- DB owns the "where data lives" — schema, storage strategy, sanitization
- Coder owns the "how it's built" — implementation from specs, mocks, and architecture
- Tester owns the "does it work" — test coverage and verification
- Reviewer owns the "is it good" — code review and audit
Each phase produces an artifact that the next phase consumes. No phase overwrites another phase's spec files. Human approval gates exist between phases. The pipeline state (pipeline-state.json) tracks which phases are confirmed.
calc-me/
├── src/
│ ├── index.html — Single entry point
│ ├── styles/
│ │ ├── main.css — Layout, typography, CRT ambient, responsive
│ │ └── glow.css — Glow classes, animations, glitch effects
│ ├── scripts/
│ │ ├── main.js — Entry point, module wiring, initialization
│ │ ├── boot.js — Boot sequence (pre-boot click, POST, kernel log, typing, transition jingle)
│ │ ├── audio.js — Web Audio synthesis (CRT hum, keypress, equals, boot, glitch, error)
│ │ ├── glitch.js — Per-character glitch system (independent timers)
│ │ ├── pulse.js — Drifting glow pulse system (recomputing frequencies)
│ │ ├── crt.js — Ambient CRT layer (scanlines, flicker, vignette)
│ │ ├── state.js — Central app state with pub/sub
│ │ ├── storage.js — localStorage wrapper with sanitization
│ │ ├── sw.js — Cache-first service worker for offline
│ │ ├── parser/
│ │ │ ├── tokenizer.js — Lexer: expression string → tokens
│ │ │ ├── intent.js — Intent detection: scientific/graphing/matrix/CAS
│ │ │ ├── parser.js — Recursive-descent parser: tokens → AST
│ │ │ ├── evaluator.js — AST evaluator dispatching to all four domains
│ │ │ ├── matrix.js — Matrix/Vector classes with linear algebra
│ │ │ ├── statistics.js — mean, median, std, variance, sum, product
│ │ │ └── cas.js — Symbolic algebra (diff, int, simplify, expand, factor)
│ │ ├── graph/
│ │ │ ├── plotter.js — Canvas rendering: neon grid, curves, scanlines
│ │ │ └── graph-interaction.js — Zoom, pan, trace mode (mouse/touch/pinch)
│ │ └── ui/
│ │ ├── display.js — Display area: expression, preview, result, errors
│ │ ├── buttons.js — Button pad: layout, 2nd-page, press feedback
│ │ ├── history.js — History panel: render, reuse, delete, clear
│ │ ├── topbar.js — Top bar: DEG/RAD, M badge, mute toggle
│ │ └── formatting.js — Result formatting: matrix, vector, CAS, scientific
│ └── (dist/ and docs/ created by later pipeline phases)
├── tests/
│ ├── runner.html — Browser-based test harness
│ ├── test-utils.js — Assert library and test runner
│ ├── parser.test.js — Tokenizer, intent, parser tests
│ ├── evaluator.test.js — Scientific evaluation tests
│ ├── evaluator-edge.test.js — Evaluator edge cases: errors, vectors, matrices, constants, plot
│ ├── matrix.test.js — Matrix/vector operation tests
│ ├── cas.test.js — CAS engine tests
│ ├── statistics.test.js — Statistics function tests
│ ├── graph.test.js — Graphing coordinate/render tests
│ ├── storage.test.js — Storage round-trip and sanitization tests
│ ├── state.test.js — Central state pub/sub tests
│ ├── formatting.test.js — Result formatting (scientific, matrix, vector, CAS) tests
│ ├── graph-interaction.test.js — Graph zoom/pan/trace controller tests
│ ├── buttons.test.js — Button pad config structure tests
│ ├── integration.test.js — End-to-end pipeline (parse→evaluate→format) tests
│ ├── effects.test.js — Pulse and glitch lifecycle tests
│ └── audio.test.js — Audio mute state and no-throw safety tests
├── mocks/
│ ├── index.html — Prototype navigation
│ ├── boot.html — Boot sequence mock
│ ├── calculator.html — Scientific calculator mock
│ ├── graph.html — Graphing mock
│ ├── matrix.html — Matrix display mock
│ └── cas.html — CAS display mock
├── specs/
│ ├── idea.md — Project concept (Spec phase)
│ ├── requirements.md — 19 functional requirements (Spec phase)
│ ├── design.md — Visual language + mocks (Designer phase)
│ ├── architecture.md — Module structure + stack (Architect phase)
│ └── database.md — localStorage schema (DB phase)
├── package.json — Project metadata (no dependencies)
├── pipeline-state.json — Pipeline phase tracking
├── project.json — Project metadata
└── README.md — This file
- A modern browser (Chrome, Firefox, Safari, Edge — latest two major versions)
- A local HTTP server (required because ES6 modules don't work over
file://)
# Using npm (serves from src/)
npm start
# Or using Python directly
python3 -m http.server 8000 --bind 127.0.0.1 --directory srcThen open http://localhost:8000 in your browser. The server runs from the src/ directory, so the app is at the root URL.
npm testThis starts a server at http://localhost:8001. Open http://localhost:8001/tests/runner.html in your browser. All ~645 tests run automatically and display pass/fail counts with timing.
Note: The test server runs from the project root (not
src/) because test files import source modules via relative paths (../src/scripts/...).
This is a buildless project — source files are deployment files:
- Push to your repository
- Enable GitHub Pages (Settings → Pages → Source: main branch / root)
- Your calculator is live at https://john-paul-ruf.github.io/calc-me/
No build step, no CI, no configuration. All paths in the codebase are relative.
2 + 2 → 4
sin(pi/2) → 1 (in radian mode)
log(1000) → 3
5! → 120
10 nPr 3 → 720
gcd(12, 18) → 6
mean(1, 2, 3, 4, 5) → 3
plot(sin(x)) → sine curve, auto-range
plot([sin(x), cos(x)]) → two overlaid curves
plot(x^2, x=-5..5) → parabola with custom range
[[1,2],[3,4]] * [[5,6],[7,8]] → [[19,22],[43,50]]
det([[1,2],[3,4]]) → -2
[1,0,0] * [0,1,0] → 0 (dot product)
[1,0,0] ^ [0,1,0] → [0,0,1] (cross product)
diff(x^2 + 3x, x) → 2x + 3
int(x^2, x) → x³/3 + C
expand((x+1)(x-1)) → x² − 1
factor(x^2 - 1) → (x + 1)(x − 1)
simplify((x^2 + 2x + 1) / (x + 1)) → x + 1
| Key | Action |
|---|---|
0–9, ., operators |
Build expression |
Enter / = |
Evaluate |
Backspace |
Delete last character |
Escape |
Clear expression |
` (backtick) |
Toggle mute |
prefers-reduced-motion— all animations disabled, colors and glow preserved- Keyboard navigation — Tab through all elements, visible neon focus rings
- Screen reader — ARIA live regions for expression and result, semantic HTML
- Photosensitive safety — flicker below 3Hz (WCAG 2.3.1), glitch bursts too brief/infrequent to pose risk
| Layer | Technology |
|---|---|
| Language | JavaScript ES6+ (ES modules) |
| Framework | None — plain DOM manipulation |
| UI | Hand-written CSS, no preprocessor |
| State | Plain JS module with pub/sub |
| Database | localStorage with JSON sanitization |
| Parser | Hand-written recursive-descent (no eval()) |
| Audio | Web Audio API (all sounds synthesized at runtime) |
| Graphing | Canvas API with devicePixelRatio scaling |
| Offline | Service Worker (cache-first strategy) |
| Tests | Custom browser-based runner (no npm deps) |
| Build | None — source files are deployed files |
| Dependencies | Zero |
This project was created with New Foundry. See project.json for ownership details.
Built entirely through The New Foundry pipeline — from idea to implementation, each phase produced an artifact (specs, mocks, architecture, schema, code, tests) that fed the next phase. The pipeline demonstrates that structured AI-assisted development, with proper phase separation and human approval gates, can produce a complete, buildless, zero-dependency web application with serious mathematical capabilities and a distinctive aesthetic identity.