Jackson’s Iris — Entry Log
Why this sketch was chosen as Entry #1 • Design decisions • C.R.A.F.T. prompt examples
The entry-level companion to the main Tool Time chatlog
This is the entry-specific development log for Tool Time Entry #1: Jackson’s Iris. It covers the decisions made in selecting and showcasing this sketch, and provides practical C.R.A.F.T. prompt examples that any student can use to start improving the code with AI.
The main Tool Time chatlog documents the venue’s development (Sessions 1–11+). This chatlog documents this entry’s development. Starting with Entry #2, all entry chatlogs live in their own app folder — keeping each student’s work self-contained and the main chatlog focused on venue-level decisions.
You are a co-creator of TNT’s site. You have knowledge of the goals of the tool time genre with its home and chatlog pages. Our first entry is from novice Jackson. It features a p5js/JavaScript sketch inspired by the song ‘Iris’ by Pastel Ghost. Organizationally, I created a folder, JacksonIris, to house Jackson’s work. The sketches folder holds his initial work. We need a page in that root folder, jacksonIrisOriginal.html that links to that sketch. To showcase it, let’s follow the example we had for Grayson’s Twinkling Star where you can see how we showed his code adjacent to a canvas that shows the design in action. Notice how we could copy the code for use elsewhere, which is pivotal to our goals for Tool Time. The images folder in JacksonIris holds a gif we can use for the hero of the page and the linking card on the Tool Time home page.
Unlike Grayson’s page, we are not analyzing Jackson’s code. We just give a background for its existence and encourage a novice to upload the code and ‘vibe code’ it to a better state. They may even be asked to change the language to Python or Java — really, anything is possible for the redesign, so remind the novices to be creative and to use ‘CRAFT’ in a deliberate fashion. Let’s also create a chatlog for this entry: jacksonIrisChatlog.html along with jacksonIrisStyles.css and jacksonIrisScripts.js if it is necessary.
We had trouble previously getting the code to render in HTML and be directly copyable. Those issues were tended to in Grayson’s code but I’m attaching another file for guidance: noteAboutCodeDisplay.txt. I think in the future, app-specific chatlogs should be limited to each app’s own folder — I’m interested in your perspective on this as an expert web developer and usability expert. [Attached: Jackson’s sketch, Grayson’s page, SPARK docs, code display notes]
Critiqued from three perspectives: CS teacher, TNT co-author, and hiring manager for a software company. Three lenses; one grade.
📚 CS Teacher lens:
🔧 TNT Co-Author lens:
💼 Hiring Manager lens:
Jackson’s Iris sketch ticks every box for a first Tool Time entry. The code is short (79 lines) but not trivial — it uses HSB colorMode, pulsating animation via a growing flag, modulo cycling for rainbow hues, and a commented-out blinking experiment that “failed but looked cool.”
It also has four immediately visible improvement opportunities that are obvious to a novice without needing deep CS knowledge:
- The commented-out blink: it’s right there in the code. Fix it.
- The unbounded
pupSat/pupBri: they increment past 100 and stop changing. A% 100wrap or a proper clamp makes the pupil keep cycling. - The no-op
scale(scaleamount):scaleamountnever changes. Connect it to something — mouse position, frame count, audio level. - The lyric is hardcoded:
"I'm lost in your iris"as a literal string. Aconst, an animated reveal, or a different lyric entirely.
The song connection gives it an emotional hook. “Iris” by Pastel Ghost is the kind of atmospheric track that students will want to represent visually — and the original sketch captures that mood, imperfectly but genuinely.
Jackson’s Iris is Tool Time Entry #1. It is short, honest, visually appealing, musically inspired, and packed with improvement directions that are accessible at the novice level. The folder structure ToolTime/JacksonIris/ establishes the per-entry pattern for all future entries.
Jackson’s sketch has a light lavender background (HSB 266, 15, 100) and a blue iris (HSB 195, 25, 95). The page uses deep violet #8B5CF6 as its primary accent — matching the sketch’s purple spectrum while providing enough contrast on a dark background for readability.
This also differentiates clearly from the Tool Time venue’s amber palette. Each entry can have its own visual identity within the venue.
The copy button calls copyRaw(btn, JACKSON_CODE) — it copies the raw source variable directly. It does NOT read from DOM textContent, which previously caused issues with HTML entity encoding corrupting the copied code.
The syntax highlighter uses applyKW() with the lastIndexOf('<') > lastIndexOf('>') safety check, preventing keyword spans from corrupting HTML attributes inserted by a prior replacement pass. These rules are formalized in scripts/jacksonIrisScripts.js and shared between both pages in this folder.
Grayson’s original page included deep teaching notes: the twinkling formula, randomSeed() explanation, an Ask Copilot cross-reference. Jackson’s page deliberately omits this. The Tool Time model is: here is the code, here is it running, now you improve it. The analysis happens in the student’s own prompting session — not pre-provided on the page. This is the distinction between a tutorial (Grayson) and a Tool Time entry (Jackson).
Context: I have a p5.js sketch of an animated eye (400×400 canvas, HSB color mode). The pupil currently pulses in and out using a growing flag and a d2 diameter variable. There is commented-out blink code that was abandoned: a blink counter that was supposed to briefly show and hide a circle.
Role: Act as a creative p5.js coach helping a beginner understand animation timing.
Action: Restore the blinking behavior so the eye blinks approximately once every 3 seconds (at 30fps). Keep the pulsating pupil animation running independently of the blink.
Form: Show only the modified draw() function with inline comments explaining the timing logic. Do not rewrite the whole sketch.
Tight constraints: Do not change the canvas size, color mode, or the iris/sclera drawing logic. Keep Jackson’s original variable names.
Context: I have a working p5.js (JavaScript) sketch: [paste the full Jackson code here]. It draws an animated eye with a pulsating rainbow pupil.
Role: Act as an experienced Processing developer who knows both Python and JavaScript Processing syntax.
Action: Port this sketch to Python Processing (py.processing.org). Translate all p5.js idioms to their Python Processing equivalents.
Form: Provide the complete Python Processing sketch in a code block. Add a comment at the top noting any behaviors that changed in translation, and why.
Tight constraints: The eye, iris, pupil, pulsating animation, and lyric text must all be present. Preserve the visual appearance as closely as Python Processing allows.
Context: I have a p5.js animated eye sketch that runs automatically (400×400, 30fps). The iris color is fixed light blue, and the canvas is always centered.
Role: Act as an interactive web developer specializing in p5.js.
Action: Add mouse interactivity: clicking anywhere on the canvas changes the iris to a random HSB hue. Moving the mouse causes the pupil to follow the cursor position (constrained to stay inside the iris circle).
Form: Show the full modified sketch with comments marking every change you made. Summarize the new features in a numbered list below the code.
Tight constraints: The pupil must remain fully inside the iris at all times. The pulsating animation must still work while the pupil tracks the mouse. Do not use any p5.js libraries beyond the core.
- Context is your sketch, not the concept. Each prompt includes a description of what the sketch currently does before asking for anything. The AI cannot see your code unless you share it. Always paste the code or describe it precisely.
- The Action verb determines the scope. “Fix,” “Port,” and “Add” produce three completely different responses from the same codebase. Be specific about the verb.
- Tight constraints protect what you love. If you love the pulsating pupil, say “preserve the pulsating animation.” If you love the lyric, say “keep the text.” Without constraints, the AI will optimize for what it thinks is best — which may not be what you want.
In both the chatlog and the app, the information is not centered in the hero area. This surprised me because that deviation seems so stark when all other pages had centered content. Why would that be?
Two missing CSS properties on #hero: justify-content: center and text-align: center. The hero had display: flex; align-items: center — which provides only vertical centering. Here is why each property does something different:
align-items: center — in a flex row container, this centers flex children vertically (along the cross-axis). It has no effect on horizontal text alignment within those children.
text-align: center — centers inline content (text, inline elements) horizontally within their block containers. This is what was missing.
justify-content: center — centers flex children along the main axis (horizontally for a row). Less critical here since the .container child is already full-width, but good practice for completeness.
The exemplar (iRobot) never set display: flex on its hero section — it used a simpler layout and relied on .hero-content from tnt-base-styles.css for centering. This page added flex for vertical alignment, but forgot that flex doesn’t automatically center text. One property was provided (align-items), one was assumed (text-align), and the assumption was wrong.
Added to #hero in jacksonIrisStyles.css (shared by both pages):
justify-content: center; text-align: center;
Since both jacksonIrisOriginal.html and jacksonIrisChatlog.html link to the same stylesheet, the fix applies to both in a single edit.
In CSS, “centering” is actually three separate problems with three separate solutions. Confusing them is one of the most common beginner mistakes — and one that experienced developers still make when writing from memory:
| Property | What it centers | Axis |
|---|---|---|
text-align: center | Text and inline elements within a block | Horizontal |
justify-content: center | Flex/grid children within their container | Main axis (horizontal in row) |
align-items: center | Flex/grid children on the cross-axis | Cross-axis (vertical in row) |
margin: 0 auto | A block element within its parent | Horizontal |
The lesson that sticks: Always check your output against the exemplar. TTG spotted this because it looked wrong against every other TNT page. That visual comparison is the A (Analyze) step of S.P.A.R.K. working exactly as it should. “This looks different from everything else” is a valid and important observation — never dismiss it.