Week 8 – Bump Map Butterfly

screen-shot-2021-04-01-at-4-00-40-pm-minscreen-shot-2021-04-01-at-4-01-33-pm-minscreen-shot-2021-04-01-at-4-01-53-pm-minscreen-shot-2021-04-01-at-4-02-14-pm-min


let myCamera;
let webCam;
let videoMesh;
let myShader;
let drawStoke = false;
let displaceAmt;

function preload() {

//load a 3d model
videoMesh = loadModel('butterfly.obj');

// load our shader
// note that shader names don't have to be the same
// this is useful when multiple shaders use the same .vert or .frag file
// you don't need to write code multiple times
myShader = loadShader('displace.vert', 'default.frag');

capture = createCapture(VIDEO);
capture.size(640, 480);
capture.hide(); // hide it
}

function keyPressed(){

// press spacebar to enable/disable drawing strokes

if( keyCode == 32){

drawStoke= !drawStoke;
}
}

function setup() {

// 640 x 480 canvas
createCanvas(windowWidth-50, windowHeight-50, WEBGL);
myCamera = createCamera();

displaceAmt = createSlider(0.0, 3.0, 1.0, 0);
displaceAmt.position(10, height + 5);
displaceAmt.style('width', '200px');

}

function draw() {

background(250);

// elapsed time in seconds
let elapsedSeconds = millis()/1000;
let rotationAngle = TWO_PI*elapsedSeconds*0.025;

// set the camera position
// we're rotating in a circular orbit around the center
myCamera.setPosition(sin(rotationAngle)*300, rotationAngle, cos( rotationAngle) * 300);

// always look at the center
myCamera.lookAt(0, 0, 0);

// set the camera perspective
myCamera.perspective(radians(50), width / height, 0.1, 500);

noStroke();

push();

// rotate and scale mesh
// we scale it 50x to bring it to the dimensions of our 3D world
// model/object space => world space

// scale(50 * 4/3, 50, 50);
scale(250, 250, 250);
rotateX(2);

// begin the shader
// send uniform data
shader(myShader);
myShader.setUniform("uTime", elapsedSeconds);
myShader.setUniform("uTexture0", capture);
myShader.setUniform("uDisplacementAmt", displaceAmt.value());

// turn off the shader & enable stroke() to see the 3D model
//stroke(255, 0, 0);

if( drawStoke ) {
stroke(255, 0, 0);
} else {
noStroke();
}

// draw the 3D model
model(videoMesh);
//rect(0, 0, 640, 480);

pop();

}

Week 8 – 3D Manipulation

screen-shot-2021-04-01-at-3-57-13-pmscreen-shot-2021-04-01-at-3-57-01-pm


let myCamera;
let mesh;
let myShader;
let myTexture;
let displayMode = 0;

function preload() {

//load a 3d model
mesh = loadModel('shiba.obj');

// load our shader
myShader = loadShader('shader.vert', 'shader.frag');

// load a cat pic
myTexture = loadImage('doge.jpeg');
}

function setup() {

// 640 x 480 canvas
createCanvas(640, 640, WEBGL);

myCamera = createCamera();
}

function keyPressed(){

//print( keyCode );

switch(keyCode ){
case 49:
// press '1'
// display fill color
print("Displaying fill");
displayMode = 0;
break;
case 50:
// press '2'
// display model position
// this is the vertex/position from the model
print("Displaying model position (normalized)");
displayMode = 1;
break;
case 51:
// press '3'
// display clip position
// goes from -1 => +1 in all axes
print("Displaying clip position");
displayMode = 2;
break;
case 52:
// press '4'
// display normalized screen position (XY)
print("Displaying 2D screen position");
displayMode = 3;
break;
case 53:
// press '5'
// use normalized screen position (XY) as texture coordinates
print("Displaying 2D screen position as texture");
displayMode = 4;
break;
case 54:
// press '6'
// display normals
print("Displaying normals");
displayMode = 5;
break;
}
}

function draw() {

background(220);

// elapsed time in seconds
let elapsedSeconds = millis()/1000;
let rotationAngle = TWO_PI*elapsedSeconds*0.15;


// set the camera position
// we're rotating in a circular orbit around the center
myCamera.setPosition(sin(rotationAngle)*50, 0, cos( rotationAngle) * 50);

// always look at the center
myCamera.lookAt(0, 0, 0);

// set the camera perspective
myCamera.perspective(PI / 3.0, width / height, 0.1, 500);

noStroke();

// Animation
// It doesn't loop perfectly I can't figure it out
push();
displayMode = 1;
for (let i = 1; i < 6; i++) {
print(displayMode);
if (displayMode < 6){
// displayMode = 1;
background(displayMode);
displayMode = displayMode + elapsedSeconds * 0.1;
} else if (displayMode > 6){
displayMode = 1;
}
}
pop();

push();

// rotate and scale mesh
// we scale it 50x to bring it to the dimensions of our 3D world
// model/object space => world space

translate(0, 9, 0);
rotateZ(3.1);
scale(3, 3, 3);

// begin the shader
// send uniform data
shader(myShader);
myShader.setUniform("uDisplayMode", displayMode);
myShader.setUniform("uTexture0", myTexture);

// turn off the shader & enable stroke() to see the 3D model
// stroke(255, 127, 0);

// draw the 3D model
model(mesh);
// displayMode = 5;
//box(0.5);

pop();
}

Week 8 Shader Explorations

minisolarsystem2 minisolarsystem4minisolarsystem10minisolarsystem9

For this week 8’s 3D shader explorations I created a mini solar system. I tried to fit as many of the prompts as I could from the assignment brief into it. I loaded in a planet model and sphere model for the sun (with higher vertex count for smoother displacement) I created in blender and then animated their rotation to mimic a solar system. The camera angles and movement are also animated using sin(), and it creates a simple zoom and tilt effect from a side view to a 2/3 overhead view of the solar system.

For the sun’s shader and texture, in the frag and vert shaders, I animated and distorted a texture (of the surface of the sun) using simplex noise to create a dynamic molten swirling effect with sunspots. To add a bit more interest to the colour of the texture, although not realistic, I blended in a grey variation of the texture based on the vertex model position from the vertex shader. After watching the Bumpmapping tutorial from class, I also displaced the vertices of the sun model based on the brightness of the texture.

Finally, I created a smoothstep() gradient to mimic how sunlight lights up each planet by using the planet’s vertex model position.

p5.js link: https://editor.p5js.org/mzyr18/sketches/G-yABangZ