Illogical Dream

Computational Media
p5.js / Face Filter
Fall 2021, New York.

OVERVIEW

Illogical Dream is an interactive creative coding project created with p5.js. It captures the essence of our childhood memories, where we loved playing with dolls on the carpet and daydreaming about whimsical adventures. Clicking on different objects on the carpet leads you to new interactive scenes, adding a touch of enchantment to the journey.

RESEARCH AND PROCESS

There are three scenes.

Carpet - Main Scene

In the scene, I placed a mirror, a bear doll, and some marbles on the carpet using .png images. The carpet appears to float with the help of sin(frameCount). The mouse is represented as a small marble that grows bigger when it gets closer to the mirror or teddy bear. However, I faced challenges with confirming precise mouse positioning on irregularly shaped targets, so I used dist(mouseX, mouseY, x, y) for approximate range confirmation.

I also intended to add particles to simulate dust in sunlight and incorporate music, with the mouse controlling the volume when near a target. Unfortunately, the code ran jerkily, so I had to remove these functions for smoother performance.

Magic Mirror

In this scene, the concept is to depict an infinite array of dreams. A mirror serves as the gateway to different roles, gradually enlarging as you delve deeper into its world, transforming into various characters. I've selected four characters from Alice in Wonderland: Alice, Bunny, Mad Hatter, and the Red Queen.

Initially, I experimented with face-api for face recognition, but it proved to be too slow. Instead, I turned to another tool called clmtrackr, which accurately detects facial features' positions. I attached pictures to the eyes, mouth, nose, and head, allowing the characters to come to life in the mirror's world.

Talking Bear

In this scene, there is a small bear with two heads. When you click the mouse, you can record a sound, and the bear will play it back in a different key.