Baby Shark — Entry Log
TTG’s prompt • C.R.A.F.T. critique • Design decisions • Improvement examples
Entry-specific companion to the Tool Time chatlog
Entry-specific development log for Tool Time Entry #4: Ethan’s Baby Shark. Per the standing convention, entry chatlogs live in their own folder. The main Tool Time chatlog documents venue-level decisions.
This log covers: TTG’s prompt with C.R.A.F.T. critique and grade, selection rationale, design decisions, and ready-to-use C.R.A.F.T. prompt examples for students who want to improve Ethan’s sketch.
I have attached an example of a Tool Time app by Sebastian. It is featured on our Tool Time home page and serves as an exemplar for another app we’d like to feature by novice Ethan: Baby Shark. You are a co-creator of TNT, a professional web app developer and high school computer science teacher. I want to create ethanBabySharkOrig.html that uses ethanSharkOrigSketch.js. The layout should be similar to Sebastian’s app. We should be able to copy Ethan’s code and paste it into an IDE like p5js editor and have it ‘just work.’ Novices will then use AI to improve the program while keeping its original functionality. We’ll need ethanBabySharkOrigStyles.css and perhaps ethanBabySharkOrigScripts.js. There is a parent folder, EthanShark to house these files with associated sub folders for styles, scripts and sketches. Ethan is a student in the Innovations Studio. A pic for the card representation in the ToolTime home page is attached. As we had for Sebastian’s app, we also want ethanBabySharkChatlog.html to chronicle our work here, beginning with this prompt. Demonstrate how you critique prompts by grading this one too according to our CRAFT rubric, described in our home page and home chatlog. We’ll need a CSS file ethanBabySharkChatlogStyles.css for the chatlog styles.
The strongest entry build prompt in the Tool Time series. Three things push it to A and hold it just short of A+.
📚 CS Teacher lens:
💼 Hiring Manager lens:
Grade rationale: A. The three-role specification, the precise “just work” constraint, the separate chatlog CSS, and the self-referential CRAFT request are all genuine advances over previous entry prompts. The sketch behavior gap has been flagged five times. A+ is two sentences: “It draws a front-facing shark with an animated mouth. The background color pulses, bubbles rise, and a lyric floats at the top.”
Ethan’s sketch uses #4A90E2 as sharkGray (despite the name, it’s a blue!) and #FF6B8B as mouthPink. The page uses those exact values as its palette — #4A90E2 as the primary accent and #FF6B8B as the secondary accent. The color comes directly from the sketch, which is the right approach.
Per TTG’s specification: ethanBabySharkOrigStyles.css for the main page, ethanBabySharkChatlogStyles.css for this chatlog. This matches the separation-of-concerns principle established in Session 22 of the main Tool Time chatlog (CSS extraction).
Ethan’s sketch uses createCanvas(500, 500) without any .parent() call. It works in the p5.js editor immediately. No editor-compatibility patch needed — same as Sebastian’s sketch. This is the pattern we want: if a novice copies the code and pastes it into the editor, it just works.
Ethan’s comments include “learned this concept from Grayson’s presentation” for the bubble off-screen reset pattern. This is good attribution practice that deserves to be acknowledged in the intro text — students citing each other’s work is exactly the community-of-practice behavior Tool Time is designed to encourage.
Context: I have a p5.js sketch of Baby Shark (500×500). It draws a front-facing cartoon shark with an animated mouth, 15 rising bubbles, a color-pulsing ocean background, and the lyric “Baby Shark, doo doo doo!”. [paste the sketch]
Role: Act as a creative p5.js developer who teaches animation to beginners.
Action: Add a Mama Shark in the background — smaller, partially visible, with its own slower mouth animation.
Form: Show only the new drawMamaShark() function and the one-line call to it in draw(). Do not rewrite the whole sketch.
Tight constraints: Keep Baby Shark exactly as-is. Mama Shark must be visibly smaller and clearly behind Baby Shark. The bubbles and lyric must remain unchanged.
Context: I have a working p5.js Baby Shark sketch with three types of moving elements: 15 bubbles (stored as three arrays), a shark mouth (animated via scale), and a color-pulsing background. [paste the sketch]
Role: Act as a Java-style OOP teacher helping a beginner understand class design.
Action: Refactor the bubble system into a Bubble class. Create an array of 15 Bubble objects to replace the three parallel arrays.
Form: Show the complete refactored sketch. Add a comment block at the top comparing the old three-array approach to the new class approach — two sentences each.
Tight constraints: Visual output must be identical. Keep the shark drawing and lyric code unchanged. Use let consistently (not var).
Context: I have a p5.js animation of Baby Shark (500×500). It includes a color-pulsing background, 15 rising bubbles, a front-facing shark with an animated mouth, and lyric text with a drop shadow. [paste the sketch]
Role: Act as an experienced Processing developer who knows both p5.js and Python Processing syntax.
Action: Port this sketch to Python Processing. Translate all p5.js idioms (random(), sin(), map(), push()/pop()) to their Python Processing equivalents.
Form: Provide the complete Python Processing sketch. Add a comment at the top noting the three trickiest translation decisions and why.
Tight constraints: The shark must face the viewer. The mouth must still animate. The bubbles must still rise and reset. Canvas size: 500×500.
Let’s adjust the canvas size in the sketch and the copiable code to be 400 by 400 so the canvas will fit into the webpage without overlapping on the code’s scroll bar. It’s a slight but acceptable deviation from Ethan’s original code, made for cosmetic reasons. Add this to the chatlog along with your critique.
Concise, precise, and honest about the tradeoff. One gap keeps it from A.
ETHAN_CODE string (what gets copied) AND the instance-mode adapter (what runs on the page). Naming both prevents a partial fix.Why this resize is different from Sebastian’s (Session 4 in that chatlog): Sebastian’s canvas had a sun hardcoded at ellipse(500, 70, 100, 100) — reducing to 400px made the sun invisible. Ethan used width and height everywhere, so the shark, bubbles, and lyric all auto-adapt. This is better coding practice and it is worth calling out: when you use the canvas dimension variables instead of hardcoded numbers, your sketch becomes resize-friendly for free.
Every size-dependent element in Ethan’s sketch uses width or height, not hardcoded pixel values:
translate(width / 2, height / 2 + 20)— shark centers itself ✅text("...", width / 2, 60)— lyric self-centers ✅bubbleX.push(random(width))— bubbles spread to new width ✅bubbleY.push(random(height, height + 200))— bubbles start below canvas ✅bubbleY[i] = height + 10— bubbles reset below canvas ✅
The lesson: Use width and height instead of hardcoded numbers whenever you place something relative to the canvas edges or center. It costs nothing and makes your sketch resize-friendly for free.
That change did not account for the font size that required a reduction to fit into the smaller canvas. That punctuates what you just said about using variables for programmatic elements: once change ripples through entire design without breaking anything. Reduce the font size so the text will fit into the canvas. Use ‘magic numbers’ for this because I want the next stage to catch this problem (and fix it!) Add this to our chatlog as well.
A short prompt with sophisticated pedagogical intent — and a correct observation that sharpens the teaching from Session 4.
width and height. TTG noticed the exception: textSize(41) is not relative to width. Catching a wrong claim in the AI’s own analysis is the A step of S.P.A.R.K. working exactly as designed.textSize was a magic number. This is not just a bug fix — it is evidence for the principle stated in Session 4.28 is an intentional teaching device, not an oversight. Explaining WHY you want a suboptimal form is sophisticated prompting.28 (fits comfortably in 400px). A specific value (“reduce to around 28px”) would have made the output unambiguous and verifiable.Changed: textSize(41) → textSize(28) in both the displayed code and the instance adapter. A comment flags it: // magic number — try replacing this with a calculation relative to width.
Why 28 works: “Baby Shark, doo doo doo!” is 25 characters. At textSize(28) in p5.js’s default sans-serif font, the string is approximately 385px wide — comfortably under 400px.
Why it stays as a magic number: Stage 2’s challenge is to improve this sketch. One obvious improvement is replacing 28 with an expression like width * 0.07 or floor(width / 14). That fix, combined with the canvas resize, produces a sketch that scales to any size gracefully. Leaving 28 bare — visibly out of place next to all the width/height references — makes it easy to find.
The deeper lesson: One hardcoded number in an otherwise variable-driven sketch is enough to break a resize. Session 4 said “use variables and resizes are free.” Session 5 adds the corollary: “every hardcoded number is a future maintenance cost.”
Amazingly, some novices may have never heard Ethan’s inspirational song, ‘Baby Shark’ that he based his design on. As a web developer and high school computer science teacher, let’s remedy that by creating babySharkMC.html using becomingStrange.html as an exemplar. I’d like to include a brief history about the Baby Shark song and why we have it here at TNT: to showcase Ethan’s original work and obviously, we will want to cross-link Ethan’s page to babySharkMC.html and vice versa. For convenience I put a copy of the gif artwork in our images folder for TNT so you can use it as the hero artwork. On the movie_clips.html page, we can use the attached baby shark icon. That card should be listed first in our entries and also link to Ethan’s original design as well as to the movie clip. Please update the chatlog for Ethan’s page with this entry and its critique. The YouTube clip is: [embed provided]
The most asset-aware prompt in the series. TTG prepared the assets before writing the prompt — a professional workflow habit worth naming.
babySharkMC.html, movie_clips.html card, Ethan back bar link, Session 6 chatlog entry. All four inferred correctly from context — but a numbered list would have made the scope unambiguous.The asset pre-placement detail is genuinely impressive. Not many prompters think to move files before writing the instruction. That one habit reduces ambiguity, eliminates follow-up rounds, and signals professional workflow thinking. It is the kind of detail a vibe code talent recruiter would notice.