Coding for Creative Practice #1: ThreeJS:

Playing around with ThreeJSPlayground

Link:  Three.js Playground (threejsplaygnd.brangerbriz.net/)

Below are a few of my experiments:

1. Double Sphere

• JS Link :  http://threejsplaygnd.brangerbriz.net/s/?id=4549

For this experiment I tried to use two shapes at once. Once I found out how, I aligned the rotations of both shapes to start from the same point and meet up as they rotate in different directions.

Code:

I was able to get two shapes onto my canvas by coping the code for my first shape and pasting it into the function setup, and then changing the class of the shape (the mesh) to ‘meshh’ so it was different. This enabled me to have different variables/snippets on different spheres, for example in this experiment the size and rotation.

This code here was the snippet for rotating my shapes. My spheres rotated in opposite directions as I set one to positive integers and the other to  negative.

Rotating Mesh Snippet: https://gist.github.com/nbriz/90cabdeb21ea2510c5ae

2. Rainbow Cube Snake

• JS Link: http://threejsplaygnd.brangerbriz.net/s/?id=4668

For this experiment I played around with the mesh hue and oscillation. With a mesh leaving a trail.

Oscillation Snippet: https://gist.github.com/nbriz/f6187463e7c0bb9166ac
Trails Snippet: https://gist.github.com/nbriz/27eab66b01f3cc09d8c2

 

Code:

In this experiment I used the Hue oscillation snippet and the trails snippet to get the rainbow snake like pattern.

 

3.  Toruses Everywhere.

• JS Link: http://threejsplaygnd.brangerbriz.net/s/?id=4670

In this experiment I played around with the torus and the moving camera. To be completely honest I did not actually know what a torus shape was till I used it in 3JS. I was interested in the fact that you could change the camera variables through snippets to make it look like your canvas/ shapes were moving. I gave it ago and the is the result. I also used a snippet which multiplied the mesh.  Ive linked the snippets below as they weren’t sourced in the 3js file.

Multiply Mesh snippet : https://gist.github.com/nbriz/c6ebef10e97cec354350
Camera Snippet : https://gist.github.com/nbriz/41ba4223df04c3fa4abd

Code:

Above is the code for the multiplied mesh.

Above is the code for the camera movement. I experimented with a combination of Sin and Cos variables to get the achieved result.