Skip to content

Instantly share code, notes, and snippets.

@Ctrlmonster
Ctrlmonster / getPointerPosition.ts
Last active May 21, 2024 11:36
Get the pointer position with the smallest amount of input lag using `getCoalescedEvents` and `getPredictedEvents`. This is useful when syncing elements to cursor position (i.e. in a drag event)
const getPointerPosition = (() => {
const testEvent = new PointerEvent("pointermove");
// check for the existence of getCoalescedEvents and getPredictedEvents (Safari currently has both in tech preview)
const _pos = {x: 0, y: 0};
if (testEvent.getCoalescedEvents && testEvent.getCoalescedEvents) {
return (evt: PointerEvent, pos: {x: number, y: number} = _pos) => {
evt.stopPropagation();
// using the first prediction (the latest seems too chaotic when the cursor comes to a halt)
const latestPrediction = evt.getPredictedEvents().shift();
@Ctrlmonster
Ctrlmonster / SparseSet.ts
Last active May 29, 2024 11:20
Data structure for (Key, Value) pairs that keeps keys and values available in contiguous arrays
/**
* A class to store key value pairs while keeping
* both available in contiguous arrays. Basically
* always prefer a Map over this, unless you regularly
* need to create arrays from the values or keys
* (i.e. inside an update loop). Is strict about
* duplicate or non-existing keys.
*
* - Does not keep insertion order!
* - Throws error when using .set() with existing keys (use .mutate() instead)
@Ctrlmonster
Ctrlmonster / WeakCollection.ts
Last active July 13, 2023 16:43
Collection of Weakrefs that can be iterated
class WeakCollection<T extends object> {
#registry = new FinalizationRegistry((heldValue: WeakRef<T>) => {
this.delete(heldValue);
});
#refs: WeakRef<T>[] = [];
#values: T[] = [];
#clean() {
let index = 0;
@Ctrlmonster
Ctrlmonster / extract-root-motion.ts
Last active January 17, 2024 08:55
extract the root motion from a three.js AnimationClip
// Adapted from https://github.com/donmccurdy/three.js/blob/feat/extract-root-motion/examples/jsm/utils/SkeletonUtils.js#L606
import {AnimationClip, Bone, BufferAttribute, Object3D, Quaternion, Vector3, Vector4} from "three";
function getRootBone(rootNode: Object3D) {
const rootBones: Bone[] = [];
rootNode.traverse(function (object) {
// @ts-ignore
@Ctrlmonster
Ctrlmonster / makeContinuable.ts
Created January 6, 2023 18:45
small helper function to promisify via callbacks
export type Work = (...args: any[]) => any;
// Pass a function that provides a callback as single argument and returns another function F that calls that
// callback at some point. The result of makeContinuable will be a function that returns a promise that will
// resolve to the return value of F, once the callback is called.
export function makeContinuable<F extends Work>(wrapperFn: (cb: () => void) => F) {
return async (...args: Parameters<F>) => {
const outerPromise = new Promise<ReturnType<F>>(async (resolve1) => {
let res = null as ReturnType<F>;
// create another promise in whose executioner we'll call the passed function