Falling into a Puppy’s Dream
Process: Design and Composition
Since this project needed to link with a physical object, I remembered that I picked up a baby tooth that looks like a mountain from my shepherd dog. He is a naughty boy and I guess he wants to herd sheep in the grassland once. So it became meaningful to the future because I want to show them there is a puppy exists in 2024. And I hope my future self can bring my puppy to the mountain on a trip one day. So I set the storyline from I fall into his dream and realize what he wants, and then make his dream come true.
For the visual appearance, inspired by Ricci’s project, I wanted to make it like a picture book. In the first scene, I wanted the user to click the tooth to shake it, and the tooth fall off. To avoid being misunderstood that we pulled the tooth off, I canceled this interaction. Fortunately, with Leon’s help, I can associate the scrolling div and the sketch. That became the coolest part of my project. While the user scrolls down, the tooth will fall and rotate with the scrolling. To make the instruction of the interaction more obvious, I separated the title in the div to lead the user to scroll down and drew the floor to represent the end of the scrolling interaction.
I decided to zoom in on the tooth to represent I fell into his dream, so the vision changed from the tooth to the mountain. Then I set the main interaction part in the sheep chasing part. At first, the three rules were 1) sheep can’t overlap with each other. 2)dog can’t overlap with sheep. 3) When the dog is close to the sheep, the sheep speed up.
However, when the sheep on the top is stopped, the sheep behind will be stuck as well. So I added another rule that when the dog bark, all the sheep in the same line with the dog will speed up together.
After more than 10 sheep get out of the canvas, a voice comes out the wake the puppy up and he finds himself on the trip to the mountain.
If I can do this project better, I would like to add more information about my puppy to link this story with reality. Besides, I think I need to find another way to instruct the user to interact with my project, but with an “instruction”.
Process: Technical
- scrolling
Get the scrolling height from the div height in the HTML, and calculate the percentage to control the rotation.
2. sheep not overlapping with each other when generated.
First, we check the distance between the new position and the position of every “old sheep”. Only if the new position does not overlap with any of the old sheep, the x and y will be pushed into the array.
3. sheep not overlapping each other.
With Carrot’s help, I pushed a new variable “other” to the “others” array to represent the other sheep except the “i” in this frame. Then checked the distance between this and other. If it is not overlapped, then we draw the sheep to the next position.
4. sheep not overlapping with the dog
I checked the distance between every sheep and the dog. Once the distance is smaller than 100, I need to break the if condition from the for loop to avoid keeping the “overlap” trigger true.
The general logic is that every time checking the “overlap”, I always need to use the distance to check the relationship between the “next position” of every object. And decided whether to move the object to its next position or not according to the result of the distance check.
Reflection and Future Development
In the whole process of making this project, I think the paper prototype is quite complete and helped me a lot in the following steps. I could quickly build up every scene according to the paper prototype but I still spent a lot of time hesitating the transition between each scene. I think next time conceive a project like a picture book, I need to think about the transition more.
I put all of my js code in one sketch this time. It became hard to find the line that I was trying to change. So if I can separate the code into different sketches according to the scene, it might be easier to organize.
For the plots, I think I’ve told a good story but I still need to consider more about the user’s feelings as someone who knows nothing about the story. I think adding more information about my puppy at the end will be helpful.
Credits & References
Thanks to Ruiqi’s project for inspiration. https://ricci-liu.github.io/CCLab/ProjectB/
Sound from: https://pixabay.com/sound-effects/search/dog-panting/