The Neon Globe

Objective Complete - Mini Debriefing

For our first task of this mission, we created the 3D mesh of a sphere. In steps 1 to 5, we created a method named makeSphere(), which uses two for loops to generate points on a spherical surface in polar coordinates. We then converted the points to Cartesian coordinates and generated quad strips to form our mesh. We used a PShape object to store our mesh data, as the mesh data won't change at runtime and Processing needs to transfer the vertex data to the graphics card's memory only once, when the mesh is created, and not in every frame.

In our draw() method, we used the PShape object; we tilted it 30 degrees on the x axis and made it rotate around the y axis by limiting the frame rate to 25 frames per second and adding a small amount to the rotation angle in every frame.

Let there be light

The second task of our current mission is to turn the mesh we created in the first task into a solid sphere with a smooth surface. We will use different light sources to illuminate our sphere and define so-called normal vectors for each vertex to make our sphere's surface look smooth without the need for a very dense mesh.

Engage Thrusters

Let's turn on some lights:

1.Open the sketch we created for the last task.

2.Our mesh is currently hollow, and we can see the front-facing lines as well as the back of the sphere. To change this, we can define a fill color for the faces.

PShape makeSphere( int r, int step) {

PShape s = createShape();

s.beginShape(QUAD_STRIP); s.fill(200); s.stroke(255); s.strokeWeight(2);

for( int i = 0; i < 180; i+=step ) { float sini = sin( radians( i )); float cosi = cos( radians( i ));

float sinip = sin( radians( i + step )); float cosip = cos( radians( i + step ));

for( int j = 0; j <= 360; j+=step ) { float sinj = sin( radians( j ));

168

Project 7

float cosj = cos( radians( j ));

s.vertex( r * cosj * sini, r * -cosi, r * sinj * sini); s.vertex( r * cosj * sinip, r * -cosip, r * sinj * sinip);

}

}

s.endShape(); return s;

}

3. Run your sketch. The sphere should look like the one in the following screenshot:

4. We will now remove the lines on our mesh by calling the noStroke() function.

PShape makeSphere( int R, int step) { PShape s = createShape();

s.beginShape(QUAD_STRIP); s.fill(255); s.noStroke();

for( int i = 0; i < 180; i+=step ) { float sini = sin( radians( i )); float cosi = cos( radians( i ));

169

The Neon Globe

5.Now our sphere has no grid lines anymore; it is rendered completely flat and looks like a white circle (because, by default, only the ambient light is allowed to remain active in Processing). To fix this, we need to add a light source. The first light source we are going to add is a point source. We need to define the color of our light source in the first three parameters, followed by the x, y, and z coordinates of its position. The point light source acts like a very small, but very bright, light bulb. Add the following line to the draw() method:

void draw() { background(0);

translate( width/2, height/2 ); pointLight(255,255,255,-250,-250,500); pushMatrix();

rotateX( radians(-30)); rotateY( a );

a+= 0.01; shape(sphere); popMatrix();

}

6.Run your sketch. The sphere gets shaded now, but it doesn't look as smooth as we'd like it to be. As you can see in the following screenshot, the quad strips we define run as rings around our sphere; there are visible sharp bends where they touch each other:

170

Project 7

7.To fix this, we need to define normal vectors for each vertex, pointing away from the sphere's surface, as shown in this figure:

8.We have already calculated the sine and cosine values we need for the normal vectors. We will now add the normal vectors to our mesh using the normal() method. Each normal vector has to be defined before the vertex() method in our makeSphere() method.

PShape makeSphere( int r, int step) {

PShape s = createShape();

s.beginShape(QUAD_STRIP); s.fill(255); s.noStroke();

for( int i = 0; i < 180; i+=step ) { float sini = sin( radians( i )); float cosi = cos( radians( i ));

float sinip = sin( radians( i + step )); float cosip = cos( radians( i + step ));

for( int j = 0; j <= 360; j+=step ) { float sinj = sin( radians( j )); float cosj = cos( radians( j ));

s.normal( cosj * sini, -cosi, sinj * sini);

s.vertex( r * cosj * sini, r * -cosi, r * sinj * sini);

s.normal( cosj * sinip,-cosip, sinj * sinip);

s.vertex( r * cosj * sinip, r * -cosip, r * sinj * sinip);

}

}

s.endShape(); return s;

}

171

The Neon Globe

9. Run your sketch. The sphere should look smooth, like in the following screenshot:

10.Currently, half of our sphere has a dark shadow, so we need a method to make the lighting more even. Fortunately, Processing has a shortcut method named lights(), which sets up a light source pointing from the camera to the origin. So, we will now change our draw() method and replace the point light source with a call to the lights() method.

void draw() { background(0);

translate( width/2, height/2 ); lights();

pushMatrix();

rotateX( radians(-30)); rotateY( a );

a+= 0.01; shape(sphere);

popMatrix();

}

11. Run your sketch. The sphere should look like this:

172