Skip to content

Instantly share code, notes, and snippets.

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

What would you like to do?
<!doctype html>
<!-- This is just a very slightly modified tracking.js demo: -->
<meta charset="utf-8">
<script src=""></script>
<script src=""></script>
video, canvas {
margin-left: 100px;
margin-top: 120px;
position: absolute;
<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>
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');
tracking.track('#video', tracker, { camera: true });
tracker.on('track', function(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
looking = false; {
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);

This comment has been minimized.

Copy link

ghost commented Jun 10, 2018

Awesome! :D


This comment has been minimized.

Copy link

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
You can’t perform that action at this time.