Building the Magic 8 Ball SPARK Edition

After reading all files, here is what the app contains and what the upgrade involves:

What the scripts do (zero changes needed):

• magic8BallSketch.js — a sophisticated p5.js sketch featuring a 50-layer gradient sphere, randomised shine-spot geometry, angle-clamped text rotation, and a fade-in animation.
• m8ballResponses.js — four probability-weighted response arrays (positive 35%, negative 35%, vague 20%, snarky 10%) with a clean cumulative-range selection algorithm.

What the HTML/CSS need (new shell only):

• Full TNT 2026 navbar and footer
• Hero section with the firefly background image
• <details>/<summary> About section
• New magic8BallSparkStyles.css (deep purple-black palette)
• The “Behind the Scenes” debug panel redesigned as a student-facing “Math Behind the Ball” educational panel
• p5.js bumped from 1.6.0 to 1.9.0
• linkGuard.js added

Uniform vs diverse: Uniformity should live at the ecosystem level (navbar, footer, hero structure, CSS custom properties). Diversity should live at the app level. The sphere interaction — click, no sliders, full-canvas — is genuinely different from the Slot Machine. That difference is worth preserving and showing side-by-side.

Confirmed. Three new files only; all original files untouched:

• magicEightBallSparkIndex.html — new TNT shell, same two scripts
• styles/magic8BallSparkStyles.css — deep purple-black palette
• magicEightBallChatlog.html — this page

The scripts m8ballResponses.js and magic8BallSketch.js are loaded unchanged by both the original and the SPARK version — same principle as Reel.js in the Slot Machine refactor.

The sphere is drawn in draw8Ball() with a loop that runs exactly 50 times. Here is what each iteration does:

for(var i = 1; i <= numLayers; i++){
    xc   = map(i, 1, numLayers, 0, xs);
    yc   = map(i, 1, numLayers, 0, ys);
    myDiam = map(i, 1, numLayers, ballDiam, shineDiam);
    // colour interpolates black → medium-gray
    fill(color(myH, myS, myB));
    circle(xc, yc, myDiam);
}

Three things are happening simultaneously on each step:

1. The centre moves. It starts at (0,0) — the ball’s centre — and shifts toward (xs, ys), the randomised shine spot position. map() does this proportionally.
2. The diameter shrinks. It starts at ballDiam (the full ball) and ends at shineDiam (half the ball). Smaller circle, closer to the highlight.
3. The colour brightens. HSB colour mode lets the code interpolate hue, saturation, and brightness independently from black to medium gray — the visual signature of a light source.

The result: 50 concentric circles, each one slightly smaller, shifted, and lighter. Because each circle completely covers those behind it except at the edges, what you see is a smooth gradient that your visual system interprets as a curved 3D surface. No 3D engine. No normals or vectors. Just map().

The response system in chooseMessageType() is a textbook implementation of weighted random selection. The logic is:

var cutoff1 = probPos;                    // 0.35
var cutoff2 = cutoff1 + probNeg;          // 0.70
var cutoff3 = cutoff2 + probVague;        // 0.90
// snarky: the remaining range 0.90 → 1.00

if      (rn <= cutoff1) { targetArray = positiveMsgs; }
else if (rn <= cutoff2) { targetArray = negativeMsgs; }
else if (rn <= cutoff3) { targetArray = vagueMsgs; }
else                    { targetArray = snarkyMsgs; }

A single Math.random() call produces a uniform value in [0, 1]. The code partitions that range into four segments sized proportionally to the desired probability. Land in [0–0.35] and you get a positive response. Land in [0.35–0.70] and you get negative. And so on.

This technique has a formal name: inverse transform sampling, or CDF (Cumulative Distribution Function) sampling. The “cumulative” part is exactly what the cutoff variables represent — each cutoff is the sum of all probabilities up to that point.

The original resultsDiv panel shows values like:

ballRadius = 180
shineRadius = 94.3
shineAngle (deg) = 137.2
viewPort Locn: (−67.4, 72.1)
viewPortRadius = 50
myRotnDeg = −42.8
messageType = snarky
numChars = 22
fontSize = 18.4

This was written as a developer debug output. In the SPARK Edition it becomes The Math Behind the Ball — exactly the same data, but framed as insight into the algorithm rather than a debug dump. No code change required. Only a CSS treatment and a new label.

Two subtle dependencies in magic8BallSketch.js shaped the SPARK HTML structure.

1. DOM references at global scope. The very first lines of the script (outside any function) are:

var contentDiv  = document.getElementById("primaryContent");
var loadingPara = document.getElementById("loadingPara");
var resultsPara = document.getElementById("resultsPara");
var resultsDiv  = document.getElementById("resultsDiv");
var askPara     = document.getElementById("askPara");

These run the moment the script file loads. All five element IDs must exist in the HTML before the script tag is reached. This is why all app scripts are at the bottom of <body>, not in <head>.

2. The Henny Penny font. setup() calls textFont("Henny Penny"). p5.js draws text using the browser’s font rendering — it looks up the font name in the CSS font registry. If “Henny Penny” is not loaded in the HTML via a <link> to Google Fonts, the canvas falls back silently to a default serif font. The font is not used anywhere in the HTML; it exists solely for the canvas. The Google Fonts import must stay even though no HTML element references it.

Font Awesome 6.5 free has no 8-ball icon. The closest free options are fa-bowling-ball (a plain dark sphere with no “8”) and fa-circle — which is exactly what you already have. Any meaningful billiard/pool icon requires the Pro tier.

The noun-project file noun-8-ball-6262.png is already in the app’s images/ folder. It is the same image used as the navbar icon in the original magicEightBallIndex.html. Using it in the hero creates visual continuity between the two versions and is far more distinctive than any generic circle.

Implementation: replace the <i> with an <img> sized at height:0.85em so it scales with the hero heading text.

The original app already solved this problem for the navbar icon. The CSS was background-color: white; border-radius: 50%; padding: 1px. The same three properties applied inline to the hero <img>:

style="height:0.85em; width:auto; vertical-align:middle;
       background-color:white; border-radius:50%; padding:2px;"

The border-radius:50% clips the white rectangle to a circle so no white corners bleed out at the corners of the image. The padding:2px gives a hairline white halo that separates the black ball edge from the dark hero background — the same visual effect as the original navbar icon.

Three files updated; all links now point to the SPARK Edition:

• explore.html — S.P.A.R.K. card: Magic 8 Ball SPARK added to the featured list. Simulations card and Processing card: links updated from original to SPARK Edition. S.P.A.R.K. offcanvas, Processing offcanvas, and Simulations offcanvas: each gains a SPARK Edition entry and a Chat Log entry.
• processing_apps.html — The Magic 8 Ball figure href updated from magicEightBallIndex.html to magicEightBallSparkIndex.html; figcaption updated from “p5.js simulation” to “SPARK Edition”.
• magicEightBallChatlog.html — This entry.

The original magicEightBallIndex.html remains accessible from the SPARK Edition’s “Original Version” link. The ecosystem pages surface the best version; the comparison path is one click away.