Hamana Sunset with Miku – Day 5

Following the rules of the contest, this post will be kept private until after the submission period.

Adding more activities you can do with Miku, you can now draw in a sketchbook. It took I think about 10 minutes with Gemini’s help… It’s crazy how fast it can put together a functional prototype.

• New feature, add a sketchpad button next to the camera, clicking on it makes a panel slide from below, the panel contains a sketchbook page in the background (see
  assets/sketchpad.png), and the user can use the mouse to do simple drawings on top of it. The player can select from 8 different colors, and there is a fixed marker width, and a reset
  button which clears the canvas. Clicking back on the sketchpad icon makes it slide back under the screen. This should all be handled outside the three.js canvas, as a separate logic
  on top of it.
• Add a button to be able to drag the sketchpad, and by default make it slide into the left (instead of center)
• Add an “eraser” tool, the cursor becomes a circle, you can use to erase your drawing.

Another aspect I had been thinking a lot, and I think this was a big failure on previous year’s entries, was to better integrate the music and the lyrics into the interactive experience; For my 2024’s entry, Miku would “dance” to the music, but the player didn’t really have any interaction with it or with the lyrics themselves; 2025 music it was completely irrelevant for the player besides serving as a counter to the game over… other than that it was just cosmetic (cool, but just cosmetic).

So I thought this year I had to improve that aspect, but at the same time I didn’t want something to complete with the chill, sunset-observation aspect.

In the end, I’m going for this: You can drag words from the song into your sketchbook- so they become part of your memory. Because that’s what this entry is all about, being able to make synthetic memories.

I had to prepare the ground to make things easier for the AI tool, with my knowledge of the TextAlive API, I put up the code needed to group individual letters in words.

• LyricsRenderer.addText now has a “word” parameter which links the character to be added, with a given word. Here’s what we need: The user should be able to drag a complete word (that
  is, all the characters belonging to the same word) into the sketchpad. By dragging any of the letters that belong to the word, all the other sibling letters should move along the
  dragged word. When dropped in the sketchpad, the words are “stamped” on it, as if the player had drawn them, in the same color as the selected marker color.
• When being dragged, the letters are shown under the sketchpad.
• When dropping the word into the sketchpad, retain the jitter each individual letter had, and don’t stamp it using the middle of the word as an anchor, instead should retain the position from which the entire word was dragged. Also keep my change: const wordWidth = str.length * charWidth + 20;

We’ll see how this evolves… but I figured out that, in order for it to work, I needed to make the lyrics on screen more persistent, to give the players a chance to fall in love with them, and drag them before they disappeared.

• Right now, the lyricsrenderer displays a single line before disappearing all of its the letters. I need it to display three lines at a time so that, when a new line comes, it will push the previous one upward (all the letters belonging to that line tween up a bit EXCEPT the ones being dragged). This means the player will be in less of a hurry to capture the words.

And then that’s when Gemini failed to me and I had to code that aspect manually (never stop coding!); as it happens sometimes, it tried to something more complex than needed, and it didn’t work in the end. So it seems humans are still needed.

In addition to being able to stamp the letters, you can also put them on top of the scene itself which I believe is also a good use of them (you are completing the lanscape using the lyrics). This may need some work so that they blend better into it.

I think I’m getting close to the point where this will stabilize technically and I can almost hand it over to Alcaraz for a full 3D art pass. We’ll need animated models for Miku, the car, the vending machine, and maybe the world itself.

Next up:

• Make current music always visible
• Prompt for music on start and only start scene and timer if a music was selected.
• Multiple scrapbook/sketchbook pages
• Dragging photos into the sketchbook?
• Allow removing letters added to the scene?
• Adding frames to photos, including the lyrics of the song the moment the photo was taken?
• Send signals to the Miku’s animated model to sing and react to music beats.

Backlog from previous days

• Add some more elements to the scene like ships, birds, cars (train?) in the bridge
• Make Miku move to different locations (sit on top of the car, grabbing soda in a vending machine, staring at the sun).
• Add a “gameboy” interaction where you can play a simple rhythm minigame (maybe I’ll do the pixel art for that one, and will use the design that Gaby is coming up with.)