Assignment 2: WEBGL 3D Art

Concept:

Initially, my concept for the assignment was fairly simple, I wanted to create a mandala by drawing ellipses and lines using the sin and cos function. However, when I got into the process of learning how to use the sin and cos function, I found number of tutorials where these functions were being used to draw 3d shapes. I started with the basic drawings in the webGL renderer and then moved on to making 3d spheres using sin and cos function combined with the beginShape and endShape functions. Once I was able to make a sphere, I tried rotating the accidentally discovered that by keeping the rotation at a certain degree I was able to draw a mandala on the canvas. Hence, I kept the code and added some interactivity to my sketch.

Code and Interactivity:

The code draws two spheres in 3D  using WebGL. In the setup() function , iI changed the canvas with a WEBGL renderer and sets the frame rate to 10.

User can control the camera angle of viewing this shape by simultaneously pressing mouse and moving around in the canvas which is controlled using the orbitControl function. Then I run a loop that generates a random stroke color for each iteration. I rotated the canvas along the X, Y, and Z axes by 90 degrees to achieve the mandala.

Furthermore, I run nested for loops that generates the spheres using the sphere_draw function. This function calculates the position of a vertex on the sphere using spherical coordinates, and adds the vertex to the shape. The spheres are drawn by connecting these vertices. The radius of the second sphere depends on the mouse X position, to create an interactive effect.

This code creates an interactive 3D visualization of two spheres, with the user able to control the camera and view the spheres from different angles and of different radius. Here’s the final sketch:

Future Improvements:

For the sake of more visualisation and Interactivity, I hope to add user controls on the side for adding more spheres, changing color of each sphere and resizing. Moreover, I discovered that I could create mandala using two spheres accidentally which is why I want to work with other 3d shapes to end up in similar accidents.

 

Leave a Reply