joehonton

class Gestures {
    constructor(canvas) {
        this.canvas = canvas;
        this.fingerPointers = [];
    }
    
    // finger pointers appearing and disappearing
    addFinger(event) { ... }
    updateFinger(event) { ... }
    removeFinger(event) { ... }

joehonton

class FingerPointer {
    constructor(event) {
        this.pointerId   = event.pointerId;
        this.pointerType = event.pointerType;
        
        this.epsilonX = event.width;
        this.epsilonY = event.height;

        this.initial = {
            x: event.offsetX,

joehonton

calculateLatest(event) {
    this.latest.t = Date.now();
    this.latest.x = event.offsetX;
    this.latest.y = event.offsetY;

    // time difference
    this.deltaT = this.latest.t - this.initial.t;
    
    // distance traveled
    this.deltaX = Math.abs(this.latest.x - this.initial.x);

joehonton

// initial metrics
var initialRise = finger0.initial.y - finger1.initial.y;
var initialRun = finger0.initial.x - finger1.initial.x;
var initialTheta = Math.atan2(initialRise, initialRun);
var initialAngle = 180 - (initialTheta * 180 / Math.PI);
if (initialAngle < 0)
    initialAngle += 180;

// latest metrics
var latestRise = finger0.latest.y - finger1.latest.y;

joehonton

var initialDistance = Math.hypot(initialRise, initialRun);
var latestDistance = Math.hypot(latestRise, latestRun);
var deltaDistance = Math.abs(latestDistance - initialDistance);

joehonton

canvas.addEventListener('pointerdown', (event) => {
    gestures.addFinger(event);
    gestures.sendInitialGesture();
    event.preventDefault();
};

joehonton

canvas.addEventListener('pointerover', (e) => {e.preventDefault()});
canvas.addEventListener('pointerout',  (e) => {e.preventDefault()});
canvas.addEventListener('pointerenter',(e) => {e.preventDefault()});
canvas.addEventListener('pointerleave',(e) => {e.preventDefault()});
canvas.addEventListener('mouseover',   (e) => {e.preventDefault()});
canvas.addEventListener('mouseout',    (e) => {e.preventDefault()});
canvas.addEventListener('mouseenter',  (e) => {e.preventDefault()});
canvas.addEventListener('mouseleave',  (e) => {e.preventDefault()});

joehonton

const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting == true) {
        fetchNextArticle();
    }
}, {threshold: 0});
const bottomOfPage = document.querySelect('#bottom-of-page');
observer.observe(bottomOfPage);

joehonton

const articleUrls = [
    '/feb-28-2021.html',
    '/feb-21-2021.html',
    '/feb-14-2021.html',
    '/feb-07-2021.html'
];
const nextIndex = 0;
    
async fetchNextArticle() {    
    // fetch the article using HTTP

joehonton

function isInsidePolygon(polygon, mouseX, mouseY) {    
    const c = false;
    
    for (let i=1, j=0; i < polygon.length; i++, j++) {
        const ix = polygon[i].x;
        const iy = polygon[i].y;
        const jx = polygon[j].x;
        const jy = polygon[j].y;
        const iySide = (iy > mouseY);
        const jySide = (jy > mouseY);