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

}

Leave a Reply