Firefly
We used to see world with our body size. What is the view of mini creatures, like a firefly? In this app, a firefly accidentally runs into a kitchen. With a dim spot light created by itself, it explores giant foods, cookwares, and so on in the kitchen. Players control the firefly by tilting their phones.
Inspiration
I get my inspiration from a Japanese artist. Tanaka Tatsuya’s miniature
1. Create Models in Maya
As time is limited, most of my basic models are from archive3d.net. These files are in .3ds format. I install a plug-in called Maya Bonus Tools, so that 3ds Max files can be edited in Maya. In addition, I find another plug-in called OBJexporter. This allows me to finally load the models in three.js. (Actually, I also tried Maya to Three.js exporter, but the .json file doesn’t work. Still trying to figuring out why.)
2. Load Models and Create Texture with Three.js
I find some texture image and use CrazyBump to generate normal map or bump map for the models, so that the models will look more realistic.
3. Use Cordova to Create an App
I follow the documentation from Apache Cordova and create my first app. By changing the config.xml file, I am able the replace the logo and splash screen.
4. Create the firefly
After creating the app, I put our main.js code under the folder www/js of Cordova project. In order to simulate the light of a firefly, I create a point light first.
To make it look more lively, I add some bouncing effect.
5. Import P5.js and Use Rotation Data of Phone
The interaction is that by rotating the phone, users can control the movement of the firefly. Currently, the easiest way for me to do that is to use rotationX and rotationY in P5 library.
Here is the function to map the rotation data to moving speed.
In three.js animate() function, I write this.
The camera is following the firefly.
6. Create Background Music
At first I tried to load music with P5 library in Cordova, but it didn’t work. Therefore, I switch to cordova-plugin-media.
Next Steps
This is an ongoing project. I got a lot of good feedback from my classmates. There will be more interaction adding between the firefly and objects in the kitchen. I am now doing research on Physi.js, which can add physics simulation to the scene. Hopefully, this will be developed into a game which has more stories and scenes for this little firefly who accidentally runs into giant human world.
Project Code URL : https://github.com/linyangworld/firefly