Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Download the shape of a countryInput: draw points on imageCanvas equality by valueInput: Draw an arrow on an imageHello fSpyMain Colors from ImageColors palette from imageCan I Use Media Fragments?Hello Cloudinary UploadColor by numberPixel-art or Voronoi image tesselationHello pixelitInput: draw a box on imageExtended drawImagedrawImage respects canvas transparencyCSS object-fit formulasobject-fitEvery Other Pixel Is A LineFake video playerAsync image loading, and CORSPreload a list of imagesImage placeholderImage coverIdentify images with deterministic UUIDPerspective rectifier - examplePerspective rectifier
Calibrate a Three.js camera using fSpy
fSpyParameters
function createProjCamera(fSpyParameters, { near = 0.01, far = 200 }) {
// field of view (in vertical degrees)
const fov = (fSpyParameters.verticalFieldOfView * 180) / Math.PI;
// aspect ratio
const aspect = fSpyParameters.imageWidth / fSpyParameters.imageHeight;
// Create the camera
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// Position the camera
const matrix4 = new THREE.Matrix4();
matrix4.set(...fSpyParameters.cameraTransform.rows.flat());
camera.applyMatrix4(matrix4);
// camera.setFocalLength(25.049);
// fix the offset, in order the principal point to be the center of the image
camera.setViewOffset(
fSpyParameters.imageWidth,
fSpyParameters.imageHeight,
-(fSpyParameters.principalPoint.x * fSpyParameters.imageWidth) / 2,
(fSpyParameters.principalPoint.y * fSpyParameters.imageHeight) / 2,
fSpyParameters.imageWidth,
fSpyParameters.imageHeight
);
camera.updateMatrixWorld();
return camera;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
