CM2030 Graphics Programming
3D Sine Games: Generative Artwork
The Brief
The aim of this project was to explore the creation of simple 3D animations. Using lighting, materials, textures and camera positions, it was possible to create the illusion that an animation was three dimensional in nature. By implementing the shadow effects cast by directional light, and the responses of different reflective properties of materials, begins to create the illusion of 3D. However, it was not until including the ever-changing visual perspective of a camera rotating around the object, that the illusion is complete. This project can be seen as an example of generative artwork, as it was created entirely with code. This mini project was one of four which comprised the capstone submission for "CM2030 Graphics Programming".
The experience
When a user navigates to this animation, they are greeted by a pulsating 3D structure, that resembles the ripples on a pond caused by throwing a stone. A user can interact and change the animation slightly by moving sliders. These sliders affect the frequency or speed of the wave effect, the amplitude or size of the wave, and the number of cubes or detail of the effect. In this way a user can visualise in real-time, the role each of these components play in creating the effect.
Building Blocks
The animation was created utilizing the p5.js JavaScript library, which provided several 3D shape primitives and basic rendering elements. To create the grid of rechtangles, a series of cubes were created by running a nested for loop.
//generates the grid of boxes based off the boxstep (width of the box) and the number of
//boxes that can fit within the givin gridwidth
function generateGrid()
{
for(var i = -gridSize/2; i < gridSize/2; i++)
{
for(var j = -gridSize/2; j < gridSize/2; j++)
{
//moves the position at which the box is drawn
translate(i*boxStep,0,j*boxStep);
//p5.js 3d square primitive
box(boxSize,boxSize,boxSize);
}
}
}
To get the boxes to appear as a wave, a sine function was applied to the height variable of the "box()" primitive. This works because the sine value will always fluctuate between the two extremes of -1 and 1. To make the effect more noticable and exciting, the sine function was mapped to the values of 100 and 300. However, this alone was not enough to create the pulsating effect. It was also required to change the sine value with a variable that changes over time. To do this, the "frameCount()" function from the p5.js library was applied. This function returns a new integer value starting at zero and increasing every time the draw cycle completes. This begins incrementing from the point at which the application starts running. The ever increasing value causes the sine function to fluctuate over time.
To achieve the material reflextive properties, a normal material was applied to the cubes as a texture. This was to instruct the render in how their appearance was to respond to the direction of the light in the scene. This resulted in the following grid function.
//generates the grid of boxes based off the boxstep (width of the box) and the number of
//boxes that can fit within the givin gridwidth
function generateGrid()
{
for(var i = -gridSize/2; i < gridSize/2; i++)
{
for(var j = -gridSize/2; j < gridSize/2; j++)
{
//variable that changes with time
var distance = int(dist(i*boxStep,j*boxStep,0,0))+frameCount;
//maps the sin function to the values of 100 and 300
length = map(sin(distance),-1,1,100,300);
push();
normalMaterial();
stroke(0);
strokeWeight(2);
//moves the position at which the box is drawn
translate(i*boxStep,0,j*boxStep);
//p5.js 3d square primitive
box(boxSize,boxSize+length,boxSize);
pop();
}
}
}
To finalise the animation, the camera was then rotated about the object, to further enforce the illusion that the object existed in 3D space.
Tech Stack
- JavaScript
-
Core programming language used in desiging this application.
- p5.js
-
JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else.
- WebGL
-
a JavaScript library for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins
- HTML 5
-
HTML 5 is the standard markup language for documents designed to be displayed in a web browser.
- CSS 3
-
Style sheet language for describing the presentation of documents written in HTML.
User Interaction
Sliders were chosen as the best option for interacting with this animation, as it allowed most users to instinctively understand how to interact with it. However, the nature of the animation requires good computing power as it is constantly be redrawn. This can cause problems with older and/or less powerful computers. Especially, as the complexity of the animation increases with denser grids of rectangles. This increased complexity can cause the machine to slow down or hang, ruining the animations effects. For this reason, sliders may be ineffective, as it is very easy to transition to the more complicated variations of the animation.
Conclusion
This project clearly produced a very interesting animation effect by utilising the illusion of perspective, and the expected visual responses to light. These effects easily created an impression of a 3D structure. It also shows the power of generative art to create amazing 3D effects even when the animation can be considered relatively simple. This project was the first of four worked on as the final submission for the manditory course Graphics Programming