Facial Blend Shapes

p5.disableFriendlyErrors = true;

/*

Facial blend shapes

​

Ray character rig by CGTarian Online School (from Maya)

​

jasonlabbe3d.com

twitter.com/russetPotato

*/

​

var exaggerate = 0.8;

var drawEdges = false;

var acc = 20; // reaction time

var canvas;

var gid = 'custom';

var myFont;

​

var blendMesh;

var normalMesh;

var hairMesh;

var browsMesh;

var eyesMesh;

var pupilsMesh;

var leftMesh;

var rightMesh;

var upMesh;

var downMesh;

var posX;

var posY;

​

function preload() {

  myFont = loadFont('Roboto-Black.ttf');

  blendMesh = loadModel('normal.obj');

  normalMesh = loadModel('normal.obj');

  hairMesh = loadModel('hair.obj');

  browsMesh = loadModel('brows.obj');

  eyesMesh = loadModel('eyes.obj');

  pupilsMesh = loadModel('pupils.obj');

  leftMesh = loadModel('left.obj');

  rightMesh = loadModel('right.obj');

  upMesh = loadModel('up.obj');

  downMesh = loadModel('down.obj');

}

​

function setup() {

  canvas = createCanvas(windowWidth, windowHeight, WEBGL);

  background(50);

  textFont(myFont);

  posX = random(width);

  posY = random(height)

}

​

function draw() {

  background(160, 200, 255);

  push();

  translate(0,600,-100)

  fill(100, 50, 50);

  ellipsoid(400, 400, 100)

  translate(0,-400,-100)

  ellipsoid(80,200, 20)

  pop();

  if (frameCount%40 == 0){

    posX = random(0,width);

    posY = random(0,height)

  }

  if (mouseX > posX) mouseX-=acc;

  if (mouseX < posX) mouseX+=acc;

  if (mouseY > posY) mouseY-=acc;

  if (mouseY < posY) mouseY+=acc;

  rotateY(-1+mouseX/1000)

  scale(1.6);

  if (drawEdges) {

    stroke(0);

  } else {

    noStroke();

  }

  lights();

  ambientLight(20);

  fill(255);

  textAlign(CENTER);

  text("Move your mouse around\nPress space to toggle edges", 0, height / 2 - 50);

  push();

  ambientMaterial(220, 100, 100); // skin tone

  translate(13,95,5)

  rotateY(.2);

  //cylinder(30,2);

  ellipsoid(28, 3, 60)

  pop();

  scale(100);

  rotateX(radians(180));

  rotateY(radians(160));

  blendMeshToTargets();

  refreshMeshes();

  displayMeshes();

}

​

// Native p5.js doesn't support vertices to update in the draw loop, so this is a workaround to force an update.

function refreshMeshes() {

  blendMesh._edgesToVertices();

  canvas.createBuffers(gid, blendMesh);

  canvas.drawBuffers(gid);

  blendMesh.dirtyFlags['vertexNormals'] = true;

  blendMesh.dirtyFlags['lineVertices'] = true;

  blendMesh.dirtyFlags['vertices'] = true;

}

​

function displayMeshes() {

  ambientMaterial(255, 150, 130); // skin tone

  model(blendMesh);

  ambientMaterial(120, 100, 90);

  model(hairMesh);

  model(browsMesh);

  ambientMaterial(255, 255, 255);

  model(eyesMesh);

  ambientMaterial(0, 0, 0);

  model(pupilsMesh);

}

​

// Get deltas from its mapped values and add onto blend mesh.

function addDelta(otherMesh, blendValue, vertIndex) {

  let deltaX = otherMesh.vertices[vertIndex].x - normalMesh.vertices[vertIndex].x;

  let deltaY = otherMesh.vertices[vertIndex].y - normalMesh.vertices[vertIndex].y;

  let deltaZ = otherMesh.vertices[vertIndex].z - normalMesh.vertices[vertIndex].z;

​

  blendMesh.vertices[vertIndex].x += deltaX * blendValue;

  blendMesh.vertices[vertIndex].y += deltaY * blendValue;

  blendMesh.vertices[vertIndex].z += deltaZ * blendValue;

}

​

// Maps the mouse to determine which target meshes to use and by how much.

function blendMeshToTargets() {

  let yawTargetMesh = null;

  let yawBlendVal = 0;

  if (mouseX < width / 2) {

    yawTargetMesh = rightMesh;

    yawBlendVal = map(mouseX, 0, width / 2, exaggerate, 0);

  } else {

    yawTargetMesh = leftMesh;

    yawBlendVal = map(mouseX, width / 2, width, 0, exaggerate);

  }

  let pitchTargetMesh = null;

  let pitchBlendVal = 0;

  if (mouseY < height / 2) {

    pitchTargetMesh = upMesh;

    pitchBlendVal = map(mouseY, 0, height / 2, exaggerate, 0);

  } else {

    pitchTargetMesh = downMesh;

    pitchBlendVal = map(mouseY, height / 2, height, 0, exaggerate);

  }

  for (let i = 0; i < blendMesh.vertices.length; i++) {

    // Reset vert to default pose.

    blendMesh.vertices[i].x = normalMesh.vertices[i].x;

    blendMesh.vertices[i].y = normalMesh.vertices[i].y;

    blendMesh.vertices[i].z = normalMesh.vertices[i].z;

    addDelta(yawTargetMesh, yawBlendVal, i);

    addDelta(pitchTargetMesh, pitchBlendVal, i);

  }

}

​

function keyPressed() {

  if (key == ' ') {

    drawEdges = !drawEdges;

  }

  if (key == 's') {

    save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() +      ".jpg");

  }

}