ProjectB - Prototype

project Link

(Un)faced

Brief Description and Concept

(Un)Faced is a scrolling-telling web-based narrative art. It describes a future where all human beings put on masks and never show their true selves. Currently, only the first half of the first chapter has been completed in this demo due to a time limit. This demo describes the overall artistic expression with a first-person perspective, with a core "time" design based on the user's scrolling process.

Demo/Visual Documentation

In the future, everyone is required to wear masks and refrain from expressing themselves to others. Everyone tends to share the same brain without any selfhood. The story starts with "I" accidentally found my mask falling down on a really normal day. Then I accidentally found a red-colored button on the door in this black-and-white world. This is the first time I have found my own thoughts being stirred by myself, and I pressed the button. The door opens, and there is only a mirror in the room. I entered, only to find nothing on my face.

This is what happens in the first chapter and story before pressing the button is completed.

Coding

You can find my code here: SuQichen777/CCLab/blob/main/UnFaced/sketch.js

My project utilizes a timeline-based architecture where user interaction (scrolling) drives the interpolation of drawing parameters across different "scenes", which are defined in a single "Scene" class.

The code on the left shows how I use the internal function of p5.js mouseWheel to control a global variable named currentScrollingPosition.

Originally, a scene is only defined by start time, end time, with a corresponding function named render. Later, I realized that I needed to use the scene properties in other class functions and refined them to make a single class. All the scenes are currently stored in an array. Then, in the main drawing function, the "contains" method is called to see the current position of currentScrollingPosition, and then calls the render.

The main artistic style is defined by a class named Line.

It does not use the line in p5.js; instead, it takes a start point and an end point to draw N circles with some randomness to create a sense of "hand-drawn" style.

Then I defined a Rectangle class using Lines as its components, as shown below. Further details about display and update can be found in the GitHub repo.

prompt

Feedback: My current design applies a black and white hand-drawn style. However, it might be challenging to get the storytelling and what each element stands for with only a neat shape. The interaction is also a little bit shallow, with only mouse scrolling. Considering the difficulty of drawing with p5.js with some complex elements, I plan to use some hand-drawn PNG images. For example, I plan to use the hand-drawn mirror created in Procreate in the next scene as an alternative to hundreds of lines of code. I also plan to add more interactives, such as clicking and mouse moving as decorations of the core "scrolling" movement.

Other future development: Despite the fact that (Un)Faced is a first-person storytelling web page, there is still a necessity to view others and see "myself" in the mirror. I would like to first complete the design of human beings as a class in p5.js, and then write the script of the following chapters (3-4 chapters in total), with corresponding interaction designs.

“Future”: The combination of scrolling-telling and a subjective view suggests a future where interfaces are more immersive and narrative-driven rather than only a computer screen.

Page updated

Report abuse