Pablo the Flamingo

Case study: The birth of a party animal

https://twitter.com/demoderapaz/status/520846578744328192
https://twitter.com/bedlogic/status/519573162669789186

Challenge 1: Making Pablo dance

gravity.y = yScale * Math.sin(20 * timestamp / (Math.PI * timing));

Challenge 2: Applying movement to visuals

var points = [
neck.bodies[9],
neck.bodies[5],
neck.bodies[1],
head.bodies[4],
];
var rotPoints = [
[neck.bodies[8], neck.bodies[9]],
[neck.bodies[4], neck.bodies[5]],
[neck.bodies[0], neck.bodies[1]],
[head.bodies[0], head.bodies[4]],
];
for (var i = 0; i < bones.length — 1; i++) {
bones[i].position.x = points[i].position.x;
bones[i].position.y = -points[i].position.y;
bones[i].rotation.z = getAngle(rotPoints[i][0], rotPoints[i][1]);
};

Challenge 3: Animating Pablo’s facial expressions

var canvasMat = document.createElement(‘canvas’);
var ctxMat = canvasMat.getContext(‘2d’);
canvasMat.width = 1024;
canvasMat.height = 1024;
var canvasTexture = new THREE.Texture(canvasMat);
var canvasMaterial = new THREE.MeshBasicMaterial({
map: canvasTexture,
skinning: true,
transparent: true,
});
var textureImages = [
‘pablo.png’, //0
‘pablo-eye_angry.png’, //1
‘pablo-eye_open.png’, //2
‘pablo-eye_cute.png’, //3
‘pablo-eye_dazed.png’, //4
‘pablo-eye_look.png’, //5
‘pablo-eye_rock.png’, //6
‘pablo-eye_shock.png’, //7
‘pablo-mouth_frown.png’, //8
‘pablo-mouth_smile.png’, //9
];
var drawCanvas = function(eye, mouth) {
ctxMat.clearRect(0, 0, 1024, 1024);
ctxMat.drawImage(loadedImgs[0], 0, 0, 1024, 1024);
ctxMat.drawImage(loadedImgs[eye], 637, 100, 100, 137);
ctxMat.drawImage(loadedImgs[mouth], 310, 100, 313, 313);
canvasTexture.needsUpdate = true;
}
drawCanvas(1, 8);

Challenge 4: Interacting with Pablo

https://gist.github.com/gordonnl/5bf38741a35e6ecce332

Fin

Web Graphics Developer and 3D Generalist

Web Graphics Developer and 3D Generalist