index.html

---
layout: default
---

<div class="headshot">
    <video class="headshot_vid" width="200" height="200">
        <source src="/images/headshot.webm" type="video/webm">
        <source src="/images/headshot.mp4" type="video/mp4">
    </video>
    <img class="headshot_img" src="/images/headshot.png">
    <canvas class="headshot_canvas"></canvas>
</div>

<script>
    var vid = document.querySelector('.headshot_vid');
    var img = document.querySelector('.headshot_img');
    var canvas = document.querySelector('.headshot_canvas');
    var ctx = canvas.getContext('2d');
    var steps = 20;
    var cursor = {x: 0, y: 0};
    var frames = [];
    
    // This should be done in CSS but oh well
    vid.style.display = 'none';
    img.style.display = 'block';
    img.style.margin = 'auto';
    img.style.borderRadius = '10px';
    canvas.width = vid.width;
    canvas.height = vid.height;    
    canvas.style.display = 'none';
    canvas.style.margin = 'auto';
    canvas.style.borderRadius = '10px';
    
    // Keep track of the cursor position
    document.addEventListener('mousemove', function(e) {
        cursor.x = e.clientX;
        cursor.y = e.clientY;        
    }, false);
    
    // Loads images of the video into memory for quick canvas playback
    vid.addEventListener('loadedmetadata', function() {
        vid.addEventListener('seeked', seeked, false);
        
        function seeked() {
            // Draw image to canvas once video has seeked
            ctx.drawImage(vid, 0, 0, vid.width, vid.height);
            
            // Save image once it has been drawn
            requestAnimationFrame(function() {
                var image = ctx.getImageData(0, 0, vid.width, vid.height);
                frames.push(image);
                saveNextFrame();
            });
        }
        
        function saveNextFrame() {
            vid.currentTime += (vid.duration / steps);
            if (vid.currentTime >= vid.duration) {
                vid.removeEventListener('seeked', seeked, false);
                followCursor();
            }
        }
        saveNextFrame();
    });
    
    
    function followCursor() {
        canvas.style.display = 'block';
        img.style.display = 'none';
        
        function draw() {
            var bounds = canvas.getBoundingClientRect();
            var centerX = bounds.left + bounds.width / 2;
            var centerY = bounds.top + bounds.height / 2;
            
            // Find x and y relative to the center of the pic
            var x = cursor.x - centerX;
            var y = cursor.y - centerY;
            
            // Convert to radians to get 360 deg angle
            var r = Math.sqrt(x * x + y * y);
            var theta = Math.atan2(y, x);
            
            // Convert to a percentage to get a video frame
            var percent = (theta + Math.PI) / (Math.PI * 2);
            var step = Math.floor(percent * frames.length);
            var img = frames[step];
            if (img) {
                ctx.putImageData(img, 0, 0);
            }
            requestAnimationFrame(draw);
        }
        
        // Initiate draw loop
        requestAnimationFrame(draw);
    }
</script>


<p>
    Chris is a maker of <a href="/projects">web apps</a> that are fun and easy to use. 
    He lives and works in Vancouver, BC.
</p>

<p>
    Currently, he's bootstrapping 
    <a href="https://www.cozycal.com/?ref=csytan">CozyCal</a> 
    with his wife and co-founder Kat.
</p>

<p>
    Previously, he's worked at...
</p>

<p>
    <a href="https://www.theverge.com/2014/7/8/5880371/electric-objects-digital-picture-frame">Electric Objects</a>, 
    building interfaces that power the digital art experience on the 
    <a href="https://www.kickstarter.com/projects/electricobjects/electric-objects-a-computer-made-for-art">EO1</a> and 
    <a href="https://www.theverge.com/circuitbreaker/2016/11/16/13555294/electric-objects-eo2-art-display-review-release">EO2</a>.
</p>

<p>
    <a href="http://sel.columbia.edu">The Sustainable Engineering Lab</a>, 
    developing software for solar powered 
    <a href="https://www.youtube.com/watch?v=8IPM2oH8IAo">mini-grids</a> and 
    <a href="https://www.youtube.com/watch?v=Yjz8ox40YZM">irrigation systems</a>
    in Africa.
</p>

<p>
    <a href="https://en.wikipedia.org/wiki/IsoHunt">IsoHunt</a> 
    (before <a href="https://torrentfreak.com/isohunt-shuts-down-after-110-million-settlement-with-the-mpaa-131017/">its demise</a>), 
    and the <a href="http://www.canada.ca/en/">Government of Canada</a> 🇨🇦.
</p>