Skip to content

Instantly share code, notes, and snippets.

@lynn lynn/shy-sort.html
Last active Apr 26, 2019

Embed
What would you like to do?
<!doctype html>
<!-- This is just a very slightly modified tracking.js demo: https://trackingjs.com/examples/face_camera.html -->
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/tracking-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/data/face-min.js"></script>
<style>
video, canvas {
margin-left: 100px;
margin-top: 120px;
position: absolute;
}
</style>
</head>
<body>
<div class="demo-frame">
<div class="demo-container">
<video id="video" width="320" height="240" preload autoplay loop muted></video>
<canvas id="canvas" width="320" height="240"></canvas>
</div>
</div>
<script>
looking = false;
function sort(arr) {
// Keep or flip to taste ↴
return arr.concat().sort((a, b) => !looking ? a - b : 0.5 - Math.random());
// Hey! Since people are going to look at this, I should mention:
// sorting by 0.5 - Math.random() is a *lousy* way to shuffle an array,
// in the sense that the distribution of outcomes is very uneven. For my
// purpose, it doesn't matter (I'm intentionally trying to botch the
// outcome anyway), but you shouldn't ever seriously use this trick.
}
window.onload = function() {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, { camera: true });
tracker.on('track', function(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
looking = false;
event.data.forEach(function(rect) {
looking = true;
context.strokeStyle = '#a64ceb';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.font = '11px Helvetica';
context.fillStyle = "#fff";
context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
});
});
};
</script>
</body>
</html>
@ghost

This comment has been minimized.

Copy link

commented Jun 10, 2018

Awesome! :D

@dahliahadfury

This comment has been minimized.

Copy link

commented Jun 10, 2018

your tweet appear in my timeline and this is so cool! xD

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.