This week in Creators we explored 3D and build an animation or two using it. The final one was a “General Zod” simulation where we recreated a scene from a classic movie
This scene used the following elements:
- 3D Canvas! Our canvas was set up to use WEBGL – enabling this means you can use the 3D capabilities and shapes of p5
- Shapes – just the two shapes here:
- a “Box” which is your floating “prison”
- an “ellipsoid” which represents Krypton
- We looked at the different types of lights in WebGL (ambientLights, pointLights and directionLights) and for this scene I went with a few directionLights to light things from various directions
- Positioning and moving the shapes is performed by transforms. We moved the rather large planet to the bottom with translate and made the prison rotate and vanish off into space with a few rotate statements.
- Note that with 3D stuff, we have the use of a rotateX, rotateY, rotateZ since we can rotate in lots of ways! I also added a rotation to Krypton above to make it more realistic.
- Krypton: We looked at adding textures which is an image that you paste onto the object. The sphere above is textures with an image of Mars I found – not sure what Krypton is like I but I picture it as kind of orang-ish.
- Prison: For texturing the prison we did the same thing, but with a difference! It still is using an image as the texture but it’s using the p5.dom library to control the web camera and take pictures from that every frame. This allowed us to place ourselves “live” in the scene.
It is pretty amazing the animations and effects you can create with very little code using the p5 webGL library. Happy coding!