Draggable Face Input / Mike Stringer

Mike Stringer

design+data+people nerd ❦ previously partner at IDEO, co-founded Datascope

Workspace

Public

Faces

Edited

Nov 5

Paused

Importers

1 star

Faces

Draggable Face Input

Morphing Faces Procedural Face Exploration Hello SVG Path Morph Blinking Faces

viewof faceLocations = faceInput({

size: 400,

strokeWidth: 3,

include: new Set(["leftEye", "rightEye", "nose", "mouth"])

})

faceLocations

function faceInput({

size = 250,

strokeWidth = 2,

include = new Set(["leftEye", "rightEye", "nose", "mouth"])

} = {}) {

const viewBoxSize = 250; // coordinates in SVG are hard-coded assuming a viewBoxSize of 250

let svgParts = `<svg width="${size}" height="${size}" viewBox="0 0 ${viewBoxSize} ${viewBoxSize}">

<style>

svg {

background: #f5f5f5;

border: 1px solid #ddd;

}

svg:hover {

border: 1px solid #bbb;

}

svg * {

vector-effect: non-scaling-stroke;

}

.drag {

stroke: black;

cursor: grab;

stroke-linecap: round;

stroke-linejoin: round;

stroke-width: ${strokeWidth};

filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .2));

transform-box: fill-box;

transform-origin: left;

}

.drag.active {

cursor: grabbing;

filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .4));

}

</style>`;

if (include.has("leftEye")) {

svgParts += `

</g>`;

}

if (include.has("rightEye")) {

svgParts += `

</g>`;

}

if (include.has("nose")) {

svgParts += `

</g>

</g>

</g>`;

}

if (include.has("mouth")) {

svgParts += `

</g>

</g>

</g>`;

}

if (include.has("rightEar")) {

svgParts += `

</g>`;

}

if (include.has("leftEar")) {

svgParts += `

</g>`;

}

if (include.has("leftBrow")) {

svgParts += `

<path fill="#fff" d="m 84.999934,32.359124 c 0.669003,2.69758 -0.332542,6.371495 -3.336528,7.108255 -11.404252,-0.775372 -22.205105,-6.072853 -33.77519,-5.182478 -7.968286,0.459461 -15.677388,3.65832 -21.868864,8.651709 -2.732177,0.18506 0.676445,-2.832106 1.457766,-3.627133 7.922645,-8.38892 19.29282,-13.392604 30.840384,-13.484562 7.92543,-0.275937 15.92786,0.710364 23.497902,3.086263 1.488061,0.596029 2.989589,1.742416 3.18453,3.447946 z"

id="path6902" />

</g>`;

}

if (include.has("rightBrow")) {

svgParts += `

</g>

</svg>`;

}

const root = svg`${svgParts}`;

let initialValue = {

leftEye: { x: 45, y: 70 },

rightEye: { x: 135, y: 70 },

nose: { x: 90, y: 115 },

mouth: { x: 90, y: 170 },

leftEar: { x: 0, y: 115 },

rightEar: { x: 180, y: 115 },

leftBrow: { x: 20, y: 35 },

rightBrow: { x: 120, y: 35 }

};

[...Object.entries(initialValue)].forEach(function ([key, value]) {

if (!include.has(key)) {

delete initialValue[key];

}

});

root.value = Object.assign({}, initialValue);

const draggableElements = root.querySelectorAll(".drag");

draggableElements.forEach((element) => {

const id = element.getAttribute("id");

setValue(element, id, initialValue[id].x, initialValue[id].y);

});

function setValue(element, id, x, y) {

setTransform(element, "translate", x, y);

root.value[id] = {

x: (x - initialValue[id].x) / viewBoxSize,

y: (y - initialValue[id].y) / viewBoxSize

};

root.dispatchEvent(new CustomEvent("input"));

}

function getMousePosition(evt) {

const CTM = root.getScreenCTM();

let x, y;

if (evt.touches) {

x = evt.touches[0].clientX;

y = evt.touches[0].clientY;

} else {

x = evt.clientX;

y = evt.clientY;

}

return {

x: (x - CTM.e) / CTM.a,

y: (y - CTM.f) / CTM.d

};

}

function getTransformCoordinates(element) {

const transform = element.getAttribute("transform");

if (!transform) return { x: 0, y: 0 };

const match = transform.match(/translate$([^,]+),([^)]+)$/);

if (match) {

return {

x: parseFloat(match[1]),

y: parseFloat(match[2])

};

}

return { x: 0, y: 0 };

}

function setTransform(element, type, ...values) {

const currentTransform = element.getAttribute("transform") || "";

const newTransformValue = `${type}(${values.join(",")})`;

// If no transform exists, just set the new transform

if (!currentTransform) {

element.setAttribute("transform", newTransformValue);

return;

}

// Replace existing transform of same type or append new one

const regex = new RegExp(`${type}\$[^)]*\$`);

const newTransform = regex.test(currentTransform)

? currentTransform.replace(regex, newTransformValue)

: `${currentTransform} ${newTransformValue}`;

element.setAttribute("transform", newTransform);

}

function handleDrag(element) {

let isDragging = false;

let offset = { x: 0, y: 0 };

let id = element.getAttribute("id");

function onMove(evt) {

if (!isDragging) return;

evt.preventDefault();

const mousePos = getMousePosition(evt);

const newX = mousePos.x - offset.x;

const newY = mousePos.y - offset.y;

setValue(element, id, newX, newY);

}

function onEnd() {

if (!isDragging) return;

isDragging = false;

element.classList.remove("active");

root.removeEventListener("mousemove", onMove);

root.removeEventListener("mouseup", onEnd);

root.removeEventListener("touchmove", onMove);

root.removeEventListener("touchend", onEnd);

root.removeEventListener("touchcancel", onEnd);

}

function onStart(evt) {

if (evt.type === "mousedown" && evt.button !== 0) return;

if (evt.type === "touchstart" && evt.touches.length !== 1) return;

isDragging = true;

evt.preventDefault();

element.classList.add("active");

const mousePos = getMousePosition(evt);

const currentPos = getTransformCoordinates(element);

offset.x = mousePos.x - currentPos.x;

offset.y = mousePos.y - currentPos.y;

root.addEventListener("mousemove", onMove);

root.addEventListener("mouseup", onEnd);

root.addEventListener("touchmove", onMove, { passive: false });

root.addEventListener("touchend", onEnd);

root.addEventListener("touchcancel", onEnd);

}

element.addEventListener("mousedown", onStart);

element.addEventListener("touchstart", onStart, { passive: false });

}

draggableElements.forEach(handleDrag);

return root;

}

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more