I got my idea for this week’s artwork when my friend and I were talking about common childhood toys, and she mentioned the Magic 8 Ball. This got me thinking about other fortune-telling knick-knacks, when I remembered fortune cookies. 
I thought it would be really fun to make a digital version of a fortune cookie and populate it with interesting fortunes for users to come across. Just having a cookie on the canvas seemed a little aesthetically boring, though, so I found an image of anime-style food on a table on Pinterest, and chose to draw the fortune cookie as part of that setting and match the same style (to the best of my abilities).
Before I started coding, it took me a long time to decide on how I would draw the cookie. I looked at a lot of pictures online for cartoon fortune cookie, and the final look of it that I decided upon is really a mix of a bunch of photos, and more importantly, a realistic structure through which I though I could animate the effect of the cookie breaking open. Overall though, I am happy with how I mirrored the aesthetics of the background for my own cookie and plate. The fortune texts are a collection of messages I found online as fortune cookie messages and thought were funny.
In this sketch, the program is organized into four main functions: preload() loads the external assets like the background image and the cookie snap sound before anything else runs, setup() initializes the canvas, text settings, and starting positions of the cookie and fortune paper, draw() continuously updates the scene by displaying the image, plate, cookie halves, shading, and animating the cracking motion and sliding fortune paper, while mousePressed() handles the interaction by toggling the cookie state. I particularly like this part of the code:
// fortune paper
if (isOpen) {
fill("#ebd4b4");
stroke("#4e1408");
// keep it where cookie is
rect(xPaper*0.9, height * 0.61, 320, 40, 5);
// fortune text
noStroke();
fill("#4e1408");
textFont('Gloria Hallelujah');
textSize(14);
text(fortune, xPaper*0.9, height * 0.61);
// paper sliding effect
xPaper = lerp(xPaper, xTarget, 0.1);
}
// animate cookie parts cracking apart
angleL = lerp(angleL, leftTarget, 0.05);
angleR = lerp(angleR, rightTarget, 0.05);
}
function mousePressed() {
if (!isOpen) {
isOpen = true;
fortune = random(fortunes); // Pick a random fortune
// Rotate left half outward slightly
leftTarget = -QUARTER_PI / 2;
// Rotate right half outward slightly
rightTarget = QUARTER_PI / 2;
// Slide fortune paper out to the right
xTarget = width / 2 + 150;
// cookie opening sound
if (snapSound.isLoaded()) {
snapSound.play();
}
} else {
// reset cookie to closed state when clicked again
isOpen = false;
leftTarget = 0; // Return left half to original position
rightTarget = 0; // Return right half to original position
xTarget = width / 2; // Hide fortune paper
}
}
I think what’s interesting here is the lerp() function. It is what makes the cookie and paper feel smooth instead of jerky. Without it, the halves and the fortune paper would instantly jump to their final positions. Basically what it does is it tells p5.js to move the current value a little closer to the target value on every frame. This creates a gradual transition so that the cookie halves slowly rotate outward like they’re cracking, and the fortune paper slides out as if being pulled, instead of teleporting into place. I also really like the cookie breaking sound I included when it opens and think that it increases the interactive feel in this sketch.
The biggest challenge I faced with this artwork was drawing the cookie and its shadow. It involved translations and well as the arc() function which was completely new to me, and I had to carefully go through its documentation of the p5js site to understand how the different arguments it takes work. The shadow took some trial and error, but I achieved it by first drawing a darker arc on the upper-right edge of the cookie, then cutting it down with a lighter arc. The second arc overlaps most of the first one and leaves only a slim crescent of shadow visible.
Looking forward, I would like to enhance the aesthetics of the cookie so that it looks less flat, and make its shape more closely matching with real fortune cookies. On the interaction side, fortunes could be randomized with different fonts, animations, or even themed backgrounds for variety. Also, right now the paper just sort of slides into the canvas from nowhere, I would like to make it so that it clearly pops out from the cookie, or maybe change the design completely so that it’s like a little slip that users can pull out from the cookie by dragging their cursor. Maybe, I could also add the sound of crinkling paper!