Week 8 – Wolf Evolution & Alien Tech Orbit

For Week 8 I attempted to play with 2 of the sketch prompts.  My first sketch explored the push pop matrix orbits and different variations of scale, rotate, transform, as well as a little bit of sin() based animation.  I feel as if I could continue expanding on this idea but it would require a lot of hours to fine tune and get the math right.  I was inspired by sci fi alien technology that floats, expands and rotates.

For the second sketch, I decided to turn a low poly wolf model that I made into a sort of Pokemon or Digimon where their colours and geometry would change from white to coloured over time and back again, to represent the underlying structure of the wolf going through a supernatural change, (similar to evolution or digivolution as shown in the popular kids series).  This one was a really fun experiment that I enjoyed thoroughly.

 

Torus Orbit

https://editor.p5js.org/ryanmackboyd/sketches/vGIgYZocR

to to2 to3

Wolf Transformation

https://editor.p5js.org/ryanmackboyd/sketches/JYoFwUbKV

wolf1 wolf2 wolf3 wolf4

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