Instantly share code, notes, and snippets.

@lynn /shy-sort.html
Last active Jun 29, 2018

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.

Show comment
Hide comment
@ghost

ghost Jun 10, 2018

Awesome! :D

ghost commented Jun 10, 2018

Awesome! :D

@dahliahadfury

This comment has been minimized.

Show comment
Hide comment
@dahliahadfury

dahliahadfury Jun 10, 2018

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

dahliahadfury 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