INSPIRATION
I did my case study on a game called Journey, which came out about 10 years ago. Although I didn’t play the game myself (I watched game plays), this game left a lasting impression on me and I still reference it when it comes to visual inspiration. So for this project, I wanted to explore natural elements such as flowers, clouds, and mountains.
WORK PROCESS
Experiment 1: Flower
For my first experiment with light and shadow, I decided to focus on one shape and play around with the lighting. While playing around with the torus knot, I noticed that when you change the p and q (which are the times the geometry winds) it looks kind of like a flower. I begin this experiment with using the example code from last class. My goal for this one was to understand the basics first, then add more elements in terms of lighting and structure.
The image above is the outcome after including lighting and the minimal structure. After being able to see what I created, I started to incorporate the other elements I wanted to play with, such as fog, ambient light, and changing the structure.
Firstly, I added ambient light and played around with the color. I also changed the color of the background by adding scene.background = new THREE.Color() into the script-three.js file. The color I chose was a light blue, whereas the ambient light was a baby pink color. The actual material color is still white, but the flower appears pink.
I also added all the GUI parameters, which made experimenting with the structure and lighting way more interesting. I struggled a bit at first because I was unsure how to add it, but after realizing that the “name” has to match the variable exactly I was able to incorporate these parameters. It’s a bit confusing though that everything is x, y, and z for the flower. After playing around for a bit, I got this:
While this is super minimal, I’m quite satisfied that everything works, unlike with the structure building assignment.
Experiment 2: MOUNTAINS
Originally, I wanted my next experiment to be creating clouds, but after looking at code references it seemed outside of my scope (they used “merge” which we haven’t done so I tried group but it didn’t work). So I decided to do a mountain range, and again I followed the example code. Instead of using cubes, I used cylinders to recreate the mountain shape.
I tried to use noise() instead of random(), but the cones end up always looking the same with noise even after mapping, so I decide to just keep it random. Additionally, I added fog to the scene, which changed the vibe of the scene.
I feel like after adding the fog, it’s getting closer to the feel of Journey, but of course it’s still no where near the visuals. I also like how the light looks kind of like a sun even though it’s a spotlight, so I decided to alter that a little by changing the color and making it bigger.
Experiment 3: Combining the two
Building on the previous two experiments, I decided to mimic the reference image of Journey. I also added a plane and changed the number of mountains in the scene. I then added a TorusKnot because the structure in the background of that image is similar. Also, since I had created that structure in my previous experiment, it was easier to combine it together. From there I just played around with the colors, lighting intensity, and fog distance until I was satisfied.
REFLECTION
Overall, while it looks like a really low quality mimic of Journey, I quite like how it turned out. It was a lot of trial and error and experimentation. The GUI is definitely super helpful and great for the experimenting process. I hope in the future I can be more comfortable writing the code without constantly referencing the examples provided though.