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();
}

Leave a Reply