Back to Interactive Shield Mystic Shield v2 Creative CT Log
S.P.A.R.K. Chat Log  •  Interactive p5.js Shield  •  09/26/2026
S.P.A.R.K. with AI — Development Dialog

Building Interactive Mystic Shield

Turning a static robot-human shield image into a mouse-reactive p5.js experience.
The goal: make the existing shield feel dynamic without replacing the image.

About This Chat Log

This log documents the first interactive extension of Mystic Shield. Unlike mysticShield2.html, which draws the whole shield from geometry, this app begins with a finished image and overlays p5.js energy geometry that responds to mouse position.

Session 1 — Static Image, Living Shield (2026-09-26)
S — Set The Goal

Create interactiveMysticShield.html and interactiveMysticShieldSketch.js. Use the robot-human shield image as the base canvas background, then make the shield appear to activate as the novice moves the mouse left/right and up/down.

klp (TTG)

Using the attached image as a background on a canvas, make an interactive app such that as a novice moves the mouse left and right and up and down, the software activates the image and makes it look as if it is responding in real time.

A — Analyze The Design Problem

The shield already exists in the image. The app should not redraw the whole scene. It should align p5.js overlays to the static shield: glowing rings, satellite sigils, sparks, tethers, and a small cursor sigil. The trick is matching position, color, and orientation closely enough that the base image appears alive.

Decision 1 — Use The Image As The First Draw Layer

The p5 sketch calls image(bgImg, 0, 0, width, height) at the top of every frame. Everything interactive is layered above it with transparent strokes, additive blending, and HSB fire colors. The base image remains intact and inspectable.

Decision 2 — Mouse Controls Feel, Not Literal Geometry

Horizontal mouse position controls hue shift, slight tilt, and spark swirl. Vertical position creates lift and energy pressure. Proximity to the shield increases intensity. The mouse never has to touch a button; the whole canvas becomes the control surface.

Decision 3 — Keep The Canvas Prominent

The live canvas is the main event and appears above the source code. The source panel sits below it so novices can first experience the interaction, then inspect and copy the implementation.

Decision 4 — Reconstruction Path For Novices

The page provides three essentials for rebuilding the sketch in the p5.js editor: a visible source listing, a copy button powered by copyRaw(), and a download link for the base image aiRobotMentoringHuman.jpg.

R — Refine Into Files

Created interactiveMysticShield.html, src/interactiveMysticShieldSketch.js, styles/interactiveMysticShieldStyles.css, scripts/interactiveMysticShieldScripts.js, and this chatlog pair.

K — Know What We Built

The app demonstrates image augmentation: using code to make a fixed artwork feel responsive. It is a natural bridge between asset-based design and procedural p5.js animation.

Session 2 — p5.js Editor Hardening (2026-09-26)
P — Prompt / Problem

When the copied sketch was pasted into the p5.js editor without the background image asset, it failed instead of showing the shield overlay. A second problem appeared because the code used hue as a local variable name, colliding with p5.js’s own hue() function.

Decision 5 — Make The Background Image Optional

The sketch now starts with bgImg = null and attempts to load images/aiRobotMentoringHuman.jpg using success and failure callbacks. If the file is unavailable, draw() uses background(0, 0, 20, 100) instead. This lets a novice paste the code into the p5.js editor and see the interactive shield geometry immediately, even before uploading the base image.

Decision 6 — Avoid p5 Function Names As Variables

The local color variable was renamed from hue to myHue. p5.js already provides a hue() function, and shadowing that name can create confusing failures in the editor. The rule going forward: avoid naming custom variables after p5 API functions.