Anatomical “fugitive sheets” are illustrations of the body designed to display internal organs and structures using paper flaps. Their name arose from the frequency with which the accompanying sheets were torn or misplaced. This site reimagines the fugitive sheet as a misplaced code-snippet, framed within a randomly generated cut-out.
import * as PIXI from "pixi.js"; import { Viewport } from "pixi-viewport"; // Height/width of the block images. const blockDimensions = [3840, 1896]; const heightScale = blockDimensions[0] / blockDimensions[1]; class Canvas { private inst: Readonly<{ app: PIXI.Application; viewport: Viewport; }>; constructor(elem: HTMLDivElement) { this.handleResize = this.handleResize.bind(this); this.initInst(elem); this.initHandlers(); } addChild(child: PIXI.DisplayObject): void { this.getContainer().addChild(child); } removeChild(child: PIXI.DisplayObject): void { this.getContainer().removeChild(child); } resetZoom(): void { this.inst.viewport.fitWorld(); } getContainer(): PIXI.Container { return this.inst.viewport; } initInst(elem: HTMLDivElement): void { const [app, viewport] = this.createApp(); this.inst = { app, viewport }; elem.appendChild(this.inst.app.view); } createApp(): [PIXI.Application, Viewport] { const app = new PIXI.Application({ backgroundColor: 0x1099bb, autoDensity: true, resolution: window.devicePixelRatio || 1, }); const viewport = this.createViewport(app); app.stage.addChild(viewport); return [app, viewport]; } createViewport(app: PIXI.Application): Viewport { return new Viewport({ screenWidth: window.innerWidth, screenHeight: window.innerWidth / heightScale, worldWidth: blockDimensions[0], worldHeight: blockDimensions[1], interaction: app.renderer.plugins.interaction, }) .drag() .pinch() .wheel() .decelerate() .fitWorld() .clampZoom({ maxWidth: blockDimensions[0], maxHeight: blockDimensions[1], }) .clamp({ left: true, right: true, top: true, bottom: true, }); } initHandlers(): void { this.handleResize(); window.addEventListener("resize", this.handleResize); } handleResize(): void { this.inst.app.renderer.resize( window.innerWidth, window.innerWidth / heightScale ); this.inst.viewport.resize( window.innerWidth, window.innerWidth / heightScale ); this.inst.viewport.fitWorld(); } } export default Canvas;
import * as PIXI from "pixi.js"; import { Viewport } from "pixi-viewport"; // Height/width of the block images. const blockDimensions = [3840, 1896]; const heightScale = blockDimensions[0] / blockDimensions[1]; class Canvas { private inst: Readonly<{ app: PIXI.Application; viewport: Viewport; }>; constructor(elem: HTMLDivElement) { this.handleResize = this.handleResize.bind(this); this.initInst(elem); this.initHandlers(); } addChild(child: PIXI.DisplayObject): void { this.getContainer().addChild(child); } removeChild(child: PIXI.DisplayObject): void { this.getContainer().removeChild(child); } resetZoom(): void { this.inst.viewport.fitWorld(); } getContainer(): PIXI.Container { return this.inst.viewport; } initInst(elem: HTMLDivElement): void { const [app, viewport] = this.createApp(); this.inst = { app, viewport }; elem.appendChild(this.inst.app.view); } createApp(): [PIXI.Application, Viewport] { const app = new PIXI.Application({ backgroundColor: 0x1099bb, autoDensity: true, resolution: window.devicePixelRatio || 1, }); const viewport = this.createViewport(app); app.stage.addChild(viewport); return [app, viewport]; } createViewport(app: PIXI.Application): Viewport { return new Viewport({ screenWidth: window.innerWidth, screenHeight: window.innerWidth / heightScale, worldWidth: blockDimensions[0], worldHeight: blockDimensions[1], interaction: app.renderer.plugins.interaction, }) .drag() .pinch() .wheel() .decelerate() .fitWorld() .clampZoom({ maxWidth: blockDimensions[0], maxHeight: blockDimensions[1], }) .clamp({ left: true, right: true, top: true, bottom: true, }); } initHandlers(): void { this.handleResize(); window.addEventListener("resize", this.handleResize); } handleResize(): void { this.inst.app.renderer.resize( window.innerWidth, window.innerWidth / heightScale ); this.inst.viewport.resize( window.innerWidth, window.innerWidth / heightScale ); this.inst.viewport.fitWorld(); } } export default Canvas;