Skip to content

Instantly share code, notes, and snippets.

@kerryrodden
Created February 10, 2019 02:51
Show Gist options
  • Save kerryrodden/6eb0998a8aadf9cc63b1445dd1897aab to your computer and use it in GitHub Desktop.
Save kerryrodden/6eb0998a8aadf9cc63b1445dd1897aab to your computer and use it in GitHub Desktop.
p5.js sketch that uses clmtrackr to capture eye position and draw trails representing that over time

p5.js sketch that finds eye positions from the webcam and draws a representation of their movement, with random colors for the irises.

Click on the canvas to save an image; press a key to clear the canvas.

This sketch was very helpful in getting started with clmtrackr 🙏

<html>
<head>
<meta charset="UTF-8">
<title>Eye trails</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="https://www.auduno.com/clmtrackr/build/clmtrackr.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
let capture = null;
let tracker = null;
let positions = null;
let w = 0, h = 0;
function setup() {
w = windowWidth;
h = windowHeight;
capture = createCapture(VIDEO);
createCanvas(w, h);
capture.size(w, h);
capture.hide();
frameRate(10);
colorMode(HSB);
background(0);
tracker = new clm.tracker();
tracker.init();
tracker.start(capture.elt);
}
function draw() {
// Flip the canvas so that we get a mirror image
translate(w, 0);
scale(-1.0, 1.0);
// Uncomment the line below to see the webcam image (and no trail)
//image(capture, 0, 0, w, h);
positions = tracker.getCurrentPosition();
if (positions.length > 0) {
// Eye points from clmtrackr:
// https://www.auduno.com/clmtrackr/docs/reference.html
const eye1 = {
outline: [23, 63, 24, 64, 25, 65, 26, 66].map(getPoint),
center: getPoint(27),
top: getPoint(24),
bottom: getPoint(26)
};
const eye2 = {
outline: [28, 67, 29, 68, 30, 69, 31, 70].map(getPoint),
center: getPoint(32),
top: getPoint(29),
bottom: getPoint(31)
}
const irisColor = color(random(360), 80, 80, 0.4);
drawEye(eye1, irisColor);
drawEye(eye2, irisColor);
}
}
function getPoint(index) {
return createVector(positions[index][0], positions[index][1]);
}
function drawEye(eye, irisColor) {
noFill();
stroke(255, 0.4);
drawEyeOutline(eye);
const irisRadius = min(eye.center.dist(eye.top), eye.center.dist(eye.bottom));
const irisSize = irisRadius * 2;
noStroke();
fill(irisColor);
ellipse(eye.center.x, eye.center.y, irisSize, irisSize);
const pupilSize = irisSize / 3;
fill(0, 0.6);
ellipse(eye.center.x, eye.center.y, pupilSize, pupilSize);
}
function drawEyeOutline(eye) {
beginShape();
const firstPoint = eye.outline[0];
eye.outline.forEach((p, i) => {
curveVertex(p.x, p.y);
if (i === 0) {
// Duplicate the initial point (see curveVertex documentation)
curveVertex(firstPoint.x, firstPoint.y);
}
if (i === eye.outline.length - 1) {
// Close the curve and duplicate the closing point
curveVertex(firstPoint.x, firstPoint.y);
curveVertex(firstPoint.x, firstPoint.y);
}
});
endShape();
}
function keyPressed() {
// Clear background
background(0);
}
function mouseClicked() {
const timestamp = timestampString();
saveCanvas("eyeTrail-" + timestamp, "png");
}
function timestampString() {
return year() + nf(month(), 2) + nf(day(), 2) + "-" + nf(hour(), 2) + nf(minute(), 2) + nf(second(), 2);
}
function windowResized() {
w = windowWidth;
h = windowHeight;
resizeCanvas(w, h);
background(0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment