Cissy Xie, Inside Steve’s Dream
— an interactive story
Link: https://lafoucc.github.io/IMA-CCLab/cissy-project-B/
Part 1
- Elevator Speech
The project “Inside Steve’s Dream” aims to create an interactive story that tells a story of Steve’s dream. And the user can go along the storyline using mouse scrolling and sometimes mouse moving.
2. Abstract
Sometimes in life, we often have weird dreams about falling through a deep dark hole and waking up sweating. And as I did a lot of searches online, there are explanations online about why we had this kind of feeling but there isn’t any visualization for this kind of experience or any kind of dream. And even if I had cool dreams sometimes, I often feel like words aren’t enough for documentation. It will be cool to visualize your dream. So, I tend to create a story inside which the user can have a look at Steve’s dream.
Part II
- Design and composition
(1)Design
I like the contrast between everything in black and white and my character Steve is a colorful little man who likes a Minecraft character. And my graphic is inspired by a youtube video. And all of my frames and graphics take a lot of time and are all drawn using p5js with different shapes so that part of the graphic will change based on the mouse scroll value.
And as for the creature swallowing Steve, I am also inspired by the youtube video and I create the monster also using p5js shapes and vertex which takes a lot of work. And to have a sense of storytelling, I utilize the effect of zoom-in. For example, you can first see that the monster’s hand is raising Steve, then you can see the whole body of the monster.
Also, as for the effect of falling, I create two types of falling down effects. One is falling through a straight tunnel, and the other is falling into a “rabbit hole”.
the rabbit hole is inspired by a frame inside Rick and Morty
(2) user interaction
Apart from the mouse scroll, I only have one user interaction which is using the mouse to guide Steve to explore. And originally, I used keys to scroll Steve, but later changed to mouse, because it will be more aligned with my mouse scroll and the interactivity is only mouse behaviors.
(previous design for key inputs)
2. Technical
(1) Embed multiple p5js in one HTML page
To put multiple frames inside one page, I use iframe.
Create a folder for each canvas, and have an html page and one JavaScript for each folder. So the overall structure looks like this.
And then use the iframe in the page HTML to link back to each frame (canvas).
(2) How to get the mouse scroll value.
window.addEventListener("scroll", showScroll);
(3) How to let P5js and HTML “communicate”
using “getelementbyid” to get the P5 canvas and manipulate them in HTML.
also, utilizing the localStorage to store the value so it can be used elsewhere. I used “localStorage.setItem” to get the mouse scroll value and store it, then later inside the script for each canvas, I can use “getItem” to get the value.
// in the js for the page
localStorage.setItem("scrollPos", 0);
....
// in the js for the canvas
mouseWheelPos = map(getItem("scrollPos"), 12000, 13500, 0, height, true);
And if certain values from p5 are true, the window can be scrolled down. So the same thing is done here. I store the value from one of the canvas’s js to the localStorage and later utilize it in the page js to control the window “scroll to”.
if ((getItem("display1") == false || getItem("display2") == false || getItem("display3") == false) && scr > 3000) {
window.scrollTo(0, 3000);
}
3. Reflection and future development
I mainly focused on the development of the avatars in p5js but the feedback from my friends is that they think it is too short. So, I think it is not a good idea to draw using p5js for it is very time-consuming and hard. Although I like the visual effect of my story, I think in the future I may learn from Ricci and maybe use jpg files created on iPad.
Also, I think I may add on the interactions part because the interactions make it more fun. Maybe add more mouse moves or mouse-click interactions.
And, I don’t like the sound effect I add. Because the sounds I used are actually from the free sound library by Google and it is very limited. So, in the future, I may create my sound file to add to the story.
At last, some suggestions from the instructor are: they think I should make the story a loop with slight differences with every iteration so the story may seem never-ending. I think that is also something I could improve upon.