@autoaiai/aicut 0.1.7 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/MANUAL.md +94 -84
- package/package.json +1 -1
- package/product.json +2 -1
- package/skills/aicut/SKILL.md +4 -4
- package/skills/aicut/references/commands.md +15 -15
- package/skills/aicut/references/film-format.md +1 -1
- package/skills/aicut/references/recipes.md +4 -4
- package/skills/aicut/references/troubleshooting.md +2 -2
- package/skills/aicut-motion/SKILL.md +75 -9
- package/skills/aicut-motion/THIRD_PARTY_NOTICES.md +14 -0
- package/skills/aicut-motion/assets/atlas/lib/harness.js +116 -0
- package/skills/aicut-motion/assets/atlas/lib/sound.js +274 -0
- package/skills/aicut-motion/assets/atlas/styles/001-flat-vector-science/code.js +937 -0
- package/skills/aicut-motion/assets/atlas/styles/001-flat-vector-science/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/001-flat-vector-science/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/002-watercolor-wash/code.js +909 -0
- package/skills/aicut-motion/assets/atlas/styles/002-watercolor-wash/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/002-watercolor-wash/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/003-shadow-puppet-theatre/code.js +881 -0
- package/skills/aicut-motion/assets/atlas/styles/003-shadow-puppet-theatre/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/003-shadow-puppet-theatre/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/004-whiteboard-explainer/code.js +897 -0
- package/skills/aicut-motion/assets/atlas/styles/004-whiteboard-explainer/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/004-whiteboard-explainer/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/005-psychedelic-poster/code.js +814 -0
- package/skills/aicut-motion/assets/atlas/styles/005-psychedelic-poster/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/005-psychedelic-poster/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/006-tech-glow-explainer/code.js +990 -0
- package/skills/aicut-motion/assets/atlas/styles/006-tech-glow-explainer/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/006-tech-glow-explainer/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/007-papercraft-models/code.js +994 -0
- package/skills/aicut-motion/assets/atlas/styles/007-papercraft-models/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/007-papercraft-models/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/008-1940s-film-noir/code.js +792 -0
- package/skills/aicut-motion/assets/atlas/styles/008-1940s-film-noir/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/008-1940s-film-noir/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/009-manim-style-math/code.js +840 -0
- package/skills/aicut-motion/assets/atlas/styles/009-manim-style-math/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/009-manim-style-math/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/010-illuminated-manuscript/code.js +1126 -0
- package/skills/aicut-motion/assets/atlas/styles/010-illuminated-manuscript/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/010-illuminated-manuscript/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/011-editorial-essay-collage/code.js +854 -0
- package/skills/aicut-motion/assets/atlas/styles/011-editorial-essay-collage/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/011-editorial-essay-collage/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/012-bioluminescent-deep-sea/code.js +1124 -0
- package/skills/aicut-motion/assets/atlas/styles/012-bioluminescent-deep-sea/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/012-bioluminescent-deep-sea/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/013-product-launch-reveal/code.js +728 -0
- package/skills/aicut-motion/assets/atlas/styles/013-product-launch-reveal/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/013-product-launch-reveal/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/014-halftone-pop-panel/code.js +664 -0
- package/skills/aicut-motion/assets/atlas/styles/014-halftone-pop-panel/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/014-halftone-pop-panel/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/015-isometric-pastel/code.js +991 -0
- package/skills/aicut-motion/assets/atlas/styles/015-isometric-pastel/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/015-isometric-pastel/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/016-oscilloscope-vector-art/code.js +801 -0
- package/skills/aicut-motion/assets/atlas/styles/016-oscilloscope-vector-art/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/016-oscilloscope-vector-art/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/017-risograph-zine/code.js +692 -0
- package/skills/aicut-motion/assets/atlas/styles/017-risograph-zine/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/017-risograph-zine/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/018-claymation-set/code.js +756 -0
- package/skills/aicut-motion/assets/atlas/styles/018-claymation-set/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/018-claymation-set/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/019-neon-sign-at-night/code.js +922 -0
- package/skills/aicut-motion/assets/atlas/styles/019-neon-sign-at-night/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/019-neon-sign-at-night/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/020-kawaii-anime/code.js +852 -0
- package/skills/aicut-motion/assets/atlas/styles/020-kawaii-anime/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/020-kawaii-anime/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/021-ukiyo-e-woodblock/code.js +724 -0
- package/skills/aicut-motion/assets/atlas/styles/021-ukiyo-e-woodblock/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/021-ukiyo-e-woodblock/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/022-16-bit-pixel-odyssey/code.js +793 -0
- package/skills/aicut-motion/assets/atlas/styles/022-16-bit-pixel-odyssey/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/022-16-bit-pixel-odyssey/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/023-chalkboard-lesson/code.js +846 -0
- package/skills/aicut-motion/assets/atlas/styles/023-chalkboard-lesson/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/023-chalkboard-lesson/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/024-cut-paper-diorama/code.js +1008 -0
- package/skills/aicut-motion/assets/atlas/styles/024-cut-paper-diorama/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/024-cut-paper-diorama/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/025-cathedral-glass/code.js +680 -0
- package/skills/aicut-motion/assets/atlas/styles/025-cathedral-glass/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/025-cathedral-glass/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/026-editorial-chart/code.js +633 -0
- package/skills/aicut-motion/assets/atlas/styles/026-editorial-chart/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/026-editorial-chart/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/027-synthwave-outrun/code.js +757 -0
- package/skills/aicut-motion/assets/atlas/styles/027-synthwave-outrun/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/027-synthwave-outrun/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/028-origami-studio/code.js +828 -0
- package/skills/aicut-motion/assets/atlas/styles/028-origami-studio/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/028-origami-studio/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/029-linocut-relief-print/code.js +697 -0
- package/skills/aicut-motion/assets/atlas/styles/029-linocut-relief-print/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/029-linocut-relief-print/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/030-holographic-foil-card/code.js +687 -0
- package/skills/aicut-motion/assets/atlas/styles/030-holographic-foil-card/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/030-holographic-foil-card/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/031-voxel-diorama/code.js +727 -0
- package/skills/aicut-motion/assets/atlas/styles/031-voxel-diorama/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/031-voxel-diorama/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/032-sumi-e-ink-wash/code.js +903 -0
- package/skills/aicut-motion/assets/atlas/styles/032-sumi-e-ink-wash/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/032-sumi-e-ink-wash/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/033-etch-a-sketch-toy/code.js +662 -0
- package/skills/aicut-motion/assets/atlas/styles/033-etch-a-sketch-toy/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/033-etch-a-sketch-toy/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/034-cosmic-star-chart/code.js +951 -0
- package/skills/aicut-motion/assets/atlas/styles/034-cosmic-star-chart/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/034-cosmic-star-chart/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/035-punk-zine-collage/code.js +759 -0
- package/skills/aicut-motion/assets/atlas/styles/035-punk-zine-collage/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/035-punk-zine-collage/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/036-thermal-camera/code.js +738 -0
- package/skills/aicut-motion/assets/atlas/styles/036-thermal-camera/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/036-thermal-camera/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/037-engineering-blueprint/code.js +793 -0
- package/skills/aicut-motion/assets/atlas/styles/037-engineering-blueprint/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/037-engineering-blueprint/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/038-impasto-night/code.js +673 -0
- package/skills/aicut-motion/assets/atlas/styles/038-impasto-night/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/038-impasto-night/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/039-win95-desktop/code.js +907 -0
- package/skills/aicut-motion/assets/atlas/styles/039-win95-desktop/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/039-win95-desktop/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/040-low-poly-faceted/code.js +833 -0
- package/skills/aicut-motion/assets/atlas/styles/040-low-poly-faceted/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/040-low-poly-faceted/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/041-manga-page/code.js +845 -0
- package/skills/aicut-motion/assets/atlas/styles/041-manga-page/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/041-manga-page/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/042-wood-type-letterpress/code.js +496 -0
- package/skills/aicut-motion/assets/atlas/styles/042-wood-type-letterpress/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/042-wood-type-letterpress/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/043-light-painting/code.js +635 -0
- package/skills/aicut-motion/assets/atlas/styles/043-light-painting/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/043-light-painting/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/044-felt-patchwork/code.js +799 -0
- package/skills/aicut-motion/assets/atlas/styles/044-felt-patchwork/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/044-felt-patchwork/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/045-phosphor-terminal/code.js +547 -0
- package/skills/aicut-motion/assets/atlas/styles/045-phosphor-terminal/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/045-phosphor-terminal/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/046-glassmorphism-ui/code.js +592 -0
- package/skills/aicut-motion/assets/atlas/styles/046-glassmorphism-ui/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/046-glassmorphism-ui/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/047-tarot-card/code.js +768 -0
- package/skills/aicut-motion/assets/atlas/styles/047-tarot-card/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/047-tarot-card/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/048-transit-map/code.js +666 -0
- package/skills/aicut-motion/assets/atlas/styles/048-transit-map/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/048-transit-map/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/049-gouache-travel-poster/code.js +559 -0
- package/skills/aicut-motion/assets/atlas/styles/049-gouache-travel-poster/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/049-gouache-travel-poster/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/050-napkin-sketch/code.js +943 -0
- package/skills/aicut-motion/assets/atlas/styles/050-napkin-sketch/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/050-napkin-sketch/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/051-art-deco-foil/code.js +606 -0
- package/skills/aicut-motion/assets/atlas/styles/051-art-deco-foil/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/051-art-deco-foil/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/052-radiograph-on-lightbox/code.js +730 -0
- package/skills/aicut-motion/assets/atlas/styles/052-radiograph-on-lightbox/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/052-radiograph-on-lightbox/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/053-vaporwave/code.js +782 -0
- package/skills/aicut-motion/assets/atlas/styles/053-vaporwave/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/053-vaporwave/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/054-ebru-paper-marbling/code.js +504 -0
- package/skills/aicut-motion/assets/atlas/styles/054-ebru-paper-marbling/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/054-ebru-paper-marbling/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/055-isotype-pictograms/code.js +517 -0
- package/skills/aicut-motion/assets/atlas/styles/055-isotype-pictograms/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/055-isotype-pictograms/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/056-soft-3d-clay/code.js +713 -0
- package/skills/aicut-motion/assets/atlas/styles/056-soft-3d-clay/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/056-soft-3d-clay/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/057-cross-stitch-sampler/code.js +717 -0
- package/skills/aicut-motion/assets/atlas/styles/057-cross-stitch-sampler/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/057-cross-stitch-sampler/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/058-constructivist-propaganda/code.js +540 -0
- package/skills/aicut-motion/assets/atlas/styles/058-constructivist-propaganda/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/058-constructivist-propaganda/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/059-pocket-monochrome/code.js +524 -0
- package/skills/aicut-motion/assets/atlas/styles/059-pocket-monochrome/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/059-pocket-monochrome/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/060-botanical-plate/code.js +934 -0
- package/skills/aicut-motion/assets/atlas/styles/060-botanical-plate/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/060-botanical-plate/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/061-kinetic-type/code.js +690 -0
- package/skills/aicut-motion/assets/atlas/styles/061-kinetic-type/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/061-kinetic-type/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/062-byzantine-mosaic/code.js +612 -0
- package/skills/aicut-motion/assets/atlas/styles/062-byzantine-mosaic/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/062-byzantine-mosaic/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/063-y2k-liquid-chrome/code.js +666 -0
- package/skills/aicut-motion/assets/atlas/styles/063-y2k-liquid-chrome/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/063-y2k-liquid-chrome/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/064-sticky-note-wall/code.js +651 -0
- package/skills/aicut-motion/assets/atlas/styles/064-sticky-note-wall/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/064-sticky-note-wall/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/065-vintage-newsprint/code.js +656 -0
- package/skills/aicut-motion/assets/atlas/styles/065-vintage-newsprint/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/065-vintage-newsprint/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/066-hidden-line-wireframe/code.js +672 -0
- package/skills/aicut-motion/assets/atlas/styles/066-hidden-line-wireframe/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/066-hidden-line-wireframe/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/067-memphis-group/code.js +548 -0
- package/skills/aicut-motion/assets/atlas/styles/067-memphis-group/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/067-memphis-group/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/068-ballpoint-notebook/code.js +989 -0
- package/skills/aicut-motion/assets/atlas/styles/068-ballpoint-notebook/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/068-ballpoint-notebook/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/069-op-art-sphere/code.js +440 -0
- package/skills/aicut-motion/assets/atlas/styles/069-op-art-sphere/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/069-op-art-sphere/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/070-topographic-survey/code.js +895 -0
- package/skills/aicut-motion/assets/atlas/styles/070-topographic-survey/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/070-topographic-survey/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/071-pointillist-afternoon/code.js +563 -0
- package/skills/aicut-motion/assets/atlas/styles/071-pointillist-afternoon/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/071-pointillist-afternoon/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/072-vector-arcade-1980/code.js +627 -0
- package/skills/aicut-motion/assets/atlas/styles/072-vector-arcade-1980/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/072-vector-arcade-1980/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/073-patent-drawing/code.js +1096 -0
- package/skills/aicut-motion/assets/atlas/styles/073-patent-drawing/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/073-patent-drawing/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/074-bauhaus-poster/code.js +595 -0
- package/skills/aicut-motion/assets/atlas/styles/074-bauhaus-poster/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/074-bauhaus-poster/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/075-bitmap-paint-doodle/code.js +665 -0
- package/skills/aicut-motion/assets/atlas/styles/075-bitmap-paint-doodle/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/075-bitmap-paint-doodle/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/076-nail-thread-string-art/code.js +645 -0
- package/skills/aicut-motion/assets/atlas/styles/076-nail-thread-string-art/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/076-nail-thread-string-art/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/077-ridgeline/code.js +436 -0
- package/skills/aicut-motion/assets/atlas/styles/077-ridgeline/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/077-ridgeline/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/078-sketchbook-graphite/code.js +1237 -0
- package/skills/aicut-motion/assets/atlas/styles/078-sketchbook-graphite/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/078-sketchbook-graphite/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/079-teletext-page/code.js +622 -0
- package/skills/aicut-motion/assets/atlas/styles/079-teletext-page/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/079-teletext-page/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/080-silkscreen-grid/code.js +524 -0
- package/skills/aicut-motion/assets/atlas/styles/080-silkscreen-grid/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/080-silkscreen-grid/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/081-guilloch-security-print/code.js +689 -0
- package/skills/aicut-motion/assets/atlas/styles/081-guilloch-security-print/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/081-guilloch-security-print/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/082-ascii-demoscene/code.js +574 -0
- package/skills/aicut-motion/assets/atlas/styles/082-ascii-demoscene/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/082-ascii-demoscene/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/083-international-typographic-style/code.js +469 -0
- package/skills/aicut-motion/assets/atlas/styles/083-international-typographic-style/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/083-international-typographic-style/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/084-flow-field/code.js +531 -0
- package/skills/aicut-motion/assets/atlas/styles/084-flow-field/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/084-flow-field/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/085-macpaint-1984/code.js +675 -0
- package/skills/aicut-motion/assets/atlas/styles/085-macpaint-1984/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/085-macpaint-1984/style.json +13 -0
- package/skills/aicut-motion/assets/atlas/styles/086-multi-scale-truchet/code.js +609 -0
- package/skills/aicut-motion/assets/atlas/styles/086-multi-scale-truchet/poster.jpg +0 -0
- package/skills/aicut-motion/assets/atlas/styles/086-multi-scale-truchet/style.json +13 -0
- package/skills/aicut-motion/references/design-systems/README.md +1 -1
- package/skills/aicut-motion/references/motion-delivery.md +55 -0
- package/skills/aicut-motion/references/pages.md +1 -1
- package/skills/aicut-motion/references/style-index.json +690 -0
- package/skills/aicut-motion/references/style-research.md +73 -0
- package/skills/aicut-motion/references/style-selection.md +71 -0
- package/skills/aicut-motion/scripts/atlas-viewer.html +195 -0
- package/skills/aicut-motion/scripts/atlas.mjs +109 -0
- package/studio/client.mjs +3 -3
- package/studio/server/fetch-github.mjs +14 -3
- package/studio/server/server.mjs +71 -6
- package/studio/server/skill-summaries.mjs +60 -0
- package/studio/server/skills.mjs +121 -7
- package/studio/server/styles-store.mjs +235 -0
- package/studio/server/template-posters.mjs +2 -2
- package/studio/server/templates-page.mjs +93 -93
- package/studio/server/templates.mjs +32 -7
- package/studio/ui/dist/assets/ExportCenter-DasulhAv.js +1 -0
- package/studio/ui/dist/assets/SettingsModal-BZw0Hz2_.js +2 -0
- package/studio/ui/dist/assets/apple-touch-icon-ClxQ7j-O.png +0 -0
- package/studio/ui/dist/assets/es-C8XPZARI.js +1 -0
- package/studio/ui/dist/assets/favicon-Blwx8Trs.png +0 -0
- package/studio/ui/dist/assets/index-BjJVmBzB.js +1623 -0
- package/studio/ui/dist/assets/index-C3BfKZFO.css +1 -0
- package/studio/ui/dist/assets/ja-BeNkdaEj.js +1 -0
- package/studio/ui/dist/assets/ko-DcTVhdzK.js +1 -0
- package/studio/ui/dist/assets/zh-CN-Cg51ctbL.js +1 -0
- package/studio/ui/dist/index.html +4 -3
- package/studio/ui/dist/assets/ExportCenter-F-2vF-lQ.js +0 -1
- package/studio/ui/dist/assets/SettingsModal-BgVYguNu.js +0 -2
- package/studio/ui/dist/assets/es-BRUzvuoM.js +0 -1
- package/studio/ui/dist/assets/index-Bhg-9dA3.css +0 -1
- package/studio/ui/dist/assets/index-CWur1Iw9.js +0 -1625
- package/studio/ui/dist/assets/ja-Cth-uDcW.js +0 -1
- package/studio/ui/dist/assets/ko-upvw591D.js +0 -1
- package/studio/ui/dist/assets/zh-CN-BCfJFazB.js +0 -1
|
@@ -0,0 +1,828 @@
|
|
|
1
|
+
{
|
|
2
|
+
const TAU = Math.PI * 2;
|
|
3
|
+
const sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
|
|
4
|
+
const add = (a, b) => [a[0] + b[0], a[1] + b[1], a[2] + b[2]];
|
|
5
|
+
const mul = (a, s) => [a[0] * s, a[1] * s, a[2] * s];
|
|
6
|
+
const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
|
|
7
|
+
const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
|
|
8
|
+
const norm = (a) => { const l = Math.hypot(a[0], a[1], a[2]) || 1; return [a[0] / l, a[1] / l, a[2] / l]; };
|
|
9
|
+
const rotY = (p, a) => { const c = Math.cos(a), s = Math.sin(a); return [p[0] * c + p[2] * s, p[1], -p[0] * s + p[2] * c]; };
|
|
10
|
+
const rotX = (p, a) => { const c = Math.cos(a), s = Math.sin(a); return [p[0], p[1] * c - p[2] * s, p[1] * s + p[2] * c]; };
|
|
11
|
+
const rotZ = (p, a) => { const c = Math.cos(a), s = Math.sin(a); return [p[0] * c - p[1] * s, p[0] * s + p[1] * c, p[2]]; };
|
|
12
|
+
|
|
13
|
+
const icosphere = (subdiv) => {
|
|
14
|
+
const g = (1 + Math.sqrt(5)) / 2;
|
|
15
|
+
const v = [[-1, g, 0], [1, g, 0], [-1, -g, 0], [1, -g, 0], [0, -1, g], [0, 1, g], [0, -1, -g], [0, 1, -g], [g, 0, -1], [g, 0, 1], [-g, 0, -1], [-g, 0, 1]].map(norm);
|
|
16
|
+
let f = [[0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11], [1, 5, 9], [5, 11, 4], [11, 10, 2], [10, 7, 6], [7, 1, 8], [3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9], [4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1]];
|
|
17
|
+
for (let s = 0; s < subdiv; s++) {
|
|
18
|
+
const cache = {}, nf = [];
|
|
19
|
+
const mid = (a, b) => { const k = a < b ? a + '_' + b : b + '_' + a; if (cache[k] == null) { cache[k] = v.length; v.push(norm(mul(add(v[a], v[b]), 0.5))); } return cache[k]; };
|
|
20
|
+
f.forEach(([a, b, c]) => { const ab = mid(a, b), bc = mid(b, c), ca = mid(c, a); nf.push([a, ab, ca], [b, bc, ab], [c, ca, bc], [ab, bc, ca]); });
|
|
21
|
+
f = nf;
|
|
22
|
+
}
|
|
23
|
+
return { v, f };
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const makeTex = (seed) => {
|
|
27
|
+
const S = 256, cv = H.layer(S, S), x = cv.getContext('2d'), r = H.rng(seed);
|
|
28
|
+
const img = x.createImageData(S, S), d = img.data;
|
|
29
|
+
for (let i = 0; i < d.length; i += 4) { const n = r(); const w = n > 0.5; d[i] = d[i + 1] = d[i + 2] = w ? 255 : 0; d[i + 3] = Math.abs(n - 0.5) * 34; }
|
|
30
|
+
x.putImageData(img, 0, 0);
|
|
31
|
+
x.lineCap = 'round';
|
|
32
|
+
for (let n = 0; n < 260; n++) {
|
|
33
|
+
const px = r() * S, py = r() * S, len = r.range(3, 14), a = r() * TAU;
|
|
34
|
+
x.strokeStyle = r() < 0.6 ? `rgba(255,255,255,${r.range(0.06, 0.16)})` : `rgba(60,40,20,${r.range(0.04, 0.09)})`;
|
|
35
|
+
x.lineWidth = r.range(0.4, 0.9);
|
|
36
|
+
for (let oy = -1; oy <= 1; oy++) for (let ox = -1; ox <= 1; ox++) {
|
|
37
|
+
x.beginPath(); x.moveTo(px + ox * S, py + oy * S); x.lineTo(px + ox * S + Math.cos(a) * len, py + oy * S + Math.sin(a) * len); x.stroke();
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return cv;
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
// =====================================================================
|
|
44
|
+
// EXPLAINER: a long studio table the camera dollies along. Every prop is
|
|
45
|
+
// folded paper; labels are printed on tent cards / arrows that fold up.
|
|
46
|
+
// =====================================================================
|
|
47
|
+
const OXC = {};
|
|
48
|
+
const SG = (px) => `700 ${px}px "Space Grotesk"`;
|
|
49
|
+
const ORANGE = [232, 135, 76], BROWN = [176, 122, 76], CREAM = [246, 242, 233], INK = '#23242a', RED = [214, 74, 58], GREEN = [92, 170, 104], MUS = [241, 182, 68], IND = [58, 82, 150], CORAL = [240, 138, 126], TEAL = [44, 160, 150];
|
|
50
|
+
const EXPLAIN = (ctx, W, H_, t) => {
|
|
51
|
+
const seg = (a, b) => H.ease.inOut(H.clamp((t - a) / (b - a)));
|
|
52
|
+
const pop = (a, d = 0.45) => { const u = H.clamp((t - a) / d); if (u <= 0) return 0; const c1 = 1.5, c3 = c1 + 1; return 1 + c3 * Math.pow(u - 1, 3) + c1 * Math.pow(u - 1, 2); };
|
|
53
|
+
// ---- camera dolly along the table ----
|
|
54
|
+
const cx = 8 * seg(1.9, 2.9) + 3.6 * seg(5.6, 6.3) + 7.0 * seg(10.1, 10.9);
|
|
55
|
+
const zoom = seg(7.85, 8.3) * (1 - seg(9.1, 9.6)); // push in on the wrong guess
|
|
56
|
+
const E = [cx + 0.3 + zoom * 1.2, 2.35 - zoom * 0.2, 7.7 - zoom * 1.3], TG = [cx + zoom * 1.2, 0.85 + zoom * 0.35, 0];
|
|
57
|
+
const fwd = norm(sub(TG, E)), right = norm(cross(fwd, [0, 1, 0])), up = cross(right, fwd);
|
|
58
|
+
const F = 1180, PCX = 640, PCY = 372;
|
|
59
|
+
const proj = (p) => { const d = sub(p, E); const z = dot(d, fwd); return [PCX + (F * dot(d, right)) / z, PCY - (F * dot(d, up)) / z, z]; };
|
|
60
|
+
const Lkey = norm([-0.55, 1.0, 0.55]), Lfill = norm([0.9, 0.25, 0.35]), Ls = mul(Lkey, -1);
|
|
61
|
+
const faces = [];
|
|
62
|
+
const face = (pts, col, extra = {}) => faces.push({ pts, col, ...extra });
|
|
63
|
+
|
|
64
|
+
// ---- prop builders ----
|
|
65
|
+
// tent card: folds up from flat (u 0..1); front face carries printed lettering
|
|
66
|
+
const tent = (x, z, w, h, rot, u, paint, col = CREAM) => {
|
|
67
|
+
if (u <= 0) return;
|
|
68
|
+
const dz = 0.34, Lf = Math.hypot(h, dz), th = Math.atan2(h, dz) * Math.min(1, u);
|
|
69
|
+
const T = (p) => add(rotY(p, rot), [x, 0, z]);
|
|
70
|
+
const rid = [0, Lf * Math.sin(th), dz - Lf * Math.cos(th)];
|
|
71
|
+
const BLf = [-w, 0.003, dz], BRf = [w, 0.003, dz], TR = [w, rid[1], rid[2]], TL = [-w, rid[1], rid[2]];
|
|
72
|
+
const bz = rid[2] - dz * Math.min(1, u);
|
|
73
|
+
face([TL, TR, [w, 0.003, bz], [-w, 0.003, bz]].map(T), col.map((v) => v * 0.97));
|
|
74
|
+
face([BLf, BRf, TR, TL].map(T), col, { map: [T(TL), T(TR), T(BLf)], paint });
|
|
75
|
+
};
|
|
76
|
+
// flat folded arrow lying on the table (centre crease), grows with p; optional printed label
|
|
77
|
+
const arrowFlat = (x0, z0, x1, z1, p, col, label) => {
|
|
78
|
+
if (p <= 0) return;
|
|
79
|
+
const ex = H.lerp(x0, x1, p), ez = H.lerp(z0, z1, p), a = Math.atan2(ez - z0, ex - x0);
|
|
80
|
+
const len = Math.hypot(ex - x0, ez - z0), dx = Math.cos(a), dz = Math.sin(a), nx = -dz, nz2 = dx;
|
|
81
|
+
const hw = 0.22, hl = Math.min(0.55, len * 0.5), y = 0.012, cr = 0.05;
|
|
82
|
+
const P = (s, n, yy = y) => [x0 + dx * s + nx * n, yy, z0 + dz * s + nz2 * n];
|
|
83
|
+
const sEnd = len - hl;
|
|
84
|
+
const fr = nz2 > 0; // which half faces the camera carries the print
|
|
85
|
+
const lab = label ? { map: fr ? [P(0, 0, y + cr), P(sEnd, 0, y + cr), P(0, hw)] : [P(sEnd, 0, y + cr), P(0, 0, y + cr), P(sEnd, -hw)], paint: label } : {};
|
|
86
|
+
face([P(0, -hw), P(sEnd, -hw), P(sEnd, 0, y + cr), P(0, 0, y + cr)], col, fr ? {} : lab);
|
|
87
|
+
face([P(0, 0, y + cr), P(sEnd, 0, y + cr), P(sEnd, hw), P(0, hw)], col.map((v) => v * 0.98), fr ? lab : {});
|
|
88
|
+
face([P(sEnd, -hw * 2.2), P(len, 0, y + cr * 0.4), P(sEnd, 0, y + cr * 1.6)], col);
|
|
89
|
+
face([P(sEnd, 0, y + cr * 1.6), P(len, 0, y + cr * 0.4), P(sEnd, hw * 2.2)], col);
|
|
90
|
+
};
|
|
91
|
+
// origami animal head (cat: pointed ears; dog: folded-down ears), standing on the table
|
|
92
|
+
const animal = (kind, x, z, s, rot, hop = 0, extraLift = 0) => {
|
|
93
|
+
const T = (p) => add(rotY(mul(p, s), rot), [x, 0.48 * s + hop + extraLift, z]);
|
|
94
|
+
const cat = kind === 'cat', base = cat ? ORANGE : BROWN;
|
|
95
|
+
const eyes = (c, w, h) => { c.fillStyle = '#2b2033'; c.beginPath(); c.arc(w * 0.62, h * 0.38, w * 0.07, 0, TAU); c.fill(); c.fillStyle = cat ? '#e0607a' : '#2b2033'; c.beginPath(); c.ellipse(w * 0.05, h * 0.62, w * 0.09, h * 0.06, 0, 0, TAU); c.fill(); };
|
|
96
|
+
const eyesR = (c, w, h) => { c.fillStyle = '#2b2033'; c.beginPath(); c.arc(w * 0.38, h * 0.38, w * 0.07, 0, TAU); c.fill(); };
|
|
97
|
+
if (cat) {
|
|
98
|
+
face([[-0.5, 0.5, 0], [-0.12, 0.5, 0.02], [-0.44, 0.98, -0.06]].map(T), base.map((v) => v * 0.92));
|
|
99
|
+
face([[0.5, 0.5, 0], [0.12, 0.5, 0.02], [0.44, 0.98, -0.06]].map(T), base.map((v) => v * 0.92));
|
|
100
|
+
face([[-0.5, 0.5, 0], [0, 0.5, 0.12], [0, -0.48, 0.12], [-0.42, 0.1, 0]].map(T), base, { map: [T([0, 0.5, 0.12]), T([-0.5, 0.5, 0]), T([0, -0.48, 0.12])], paint: eyes });
|
|
101
|
+
face([[0, 0.5, 0.12], [0.5, 0.5, 0], [0.42, 0.1, 0], [0, -0.48, 0.12]].map(T), base.map((v) => v * 1.02), { map: [T([0, 0.5, 0.12]), T([0.5, 0.5, 0]), T([0, -0.48, 0.12])], paint: eyesR });
|
|
102
|
+
} else {
|
|
103
|
+
face([[-0.42, 0.55, 0], [0, 0.55, 0.12], [0, -0.48, 0.12], [-0.42, -0.05, 0]].map(T), base, { map: [T([0, 0.55, 0.12]), T([-0.42, 0.55, 0]), T([0, -0.48, 0.12])], paint: eyes });
|
|
104
|
+
face([[0, 0.55, 0.12], [0.42, 0.55, 0], [0.42, -0.05, 0], [0, -0.48, 0.12]].map(T), base.map((v) => v * 1.02), { map: [T([0, 0.55, 0.12]), T([0.42, 0.55, 0]), T([0, -0.48, 0.12])], paint: eyesR });
|
|
105
|
+
face([[-0.42, 0.56, 0.04], [-0.16, 0.56, 0.08], [-0.6, -0.08, 0.14]].map(T), [110, 70, 44]);
|
|
106
|
+
face([[0.42, 0.56, 0.04], [0.16, 0.56, 0.08], [0.6, -0.08, 0.14]].map(T), [110, 70, 44]);
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
const brain = (x, z, s, refold) => {
|
|
110
|
+
const ico = OXC.ico || (OXC.ico = icosphere(1));
|
|
111
|
+
const nz = OXC.nz || (OXC.nz = H.makeNoise(41));
|
|
112
|
+
[-1, 1].forEach((side) => {
|
|
113
|
+
const vs = ico.v.map((u) => {
|
|
114
|
+
const k = 1 + 0.12 * nz.n3(u[0] * 2.2 + side * 3 + refold, u[1] * 2.2, u[2] * 2.2);
|
|
115
|
+
let p = [u[0] * 0.62 * k, u[1] * 0.78 * k, u[2] * 1.1 * k];
|
|
116
|
+
if (u[0] * side < -0.15) p[0] *= 0.8;
|
|
117
|
+
p[1] = Math.max(p[1], -0.55);
|
|
118
|
+
p = rotY([p[0] + side * 0.62, p[1], p[2]], -1.18);
|
|
119
|
+
return add(mul(p, s), [x, 0.6 * s, z]);
|
|
120
|
+
});
|
|
121
|
+
ico.f.forEach(([a, b, c]) => face([vs[a], vs[b], vs[c]], CORAL));
|
|
122
|
+
});
|
|
123
|
+
};
|
|
124
|
+
const pinwheel = (x, z, s, ang, col) => {
|
|
125
|
+
face([[x - 0.02, 0, z], [x + 0.02, 0, z], [x + 0.02, 1.2 * s, z], [x - 0.02, 1.2 * s, z]], [200, 190, 170]);
|
|
126
|
+
const c = [x, 1.2 * s, z + 0.05];
|
|
127
|
+
for (let i = 0; i < 4; i++) {
|
|
128
|
+
const a = ang + (i * TAU) / 4, a2 = a + 0.9;
|
|
129
|
+
face([c, add(c, [Math.cos(a) * 0.42 * s, Math.sin(a) * 0.42 * s, 0.02]), add(c, [Math.cos(a2) * 0.3 * s, Math.sin(a2) * 0.3 * s, 0.12])], i % 2 ? col : col.map((v) => v * 0.8));
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
// standing speech bubble panel; flips about its vertical axis (phi); front/back print different words
|
|
133
|
+
const bubble = (x, z, u, phi, front, back, shake = 0) => {
|
|
134
|
+
if (u <= 0) return;
|
|
135
|
+
const w = 1.0, h = 0.66 * Math.min(1, u), y0 = 0.55;
|
|
136
|
+
const T = (p) => add(rotY(p, phi), [x + shake, 0, z]);
|
|
137
|
+
const pts = [[-w, y0 + h * 0.2], [-w * 0.8, y0 - h * 0.05], [-0.5, y0 - h * 0.15], [-0.75, 0.02], [-0.2, y0 - h * 0.18], [w * 0.8, y0 - h * 0.1], [w, y0 + h * 0.4], [w * 0.85, y0 + h * 1.2], [-w * 0.85, y0 + h * 1.25]].map(([a, b]) => T([a, b, 0]));
|
|
138
|
+
const seeBack = Math.cos(phi) < 0;
|
|
139
|
+
const TL = T([-w * 0.85, y0 + h * 1.2, 0.002]), TR = T([w * 0.85, y0 + h * 1.2, 0.002]), BL = T([-w * 0.85, y0 - h * 0.05, 0.002]);
|
|
140
|
+
const map = { map: seeBack ? [TR, TL, T([w * 0.85, y0 - h * 0.05, 0.002])] : [TL, TR, BL], paint: seeBack ? back : front };
|
|
141
|
+
// the panel carries one diagonal crease: split the outline along it into two faces, ridge pushed forward a touch
|
|
142
|
+
const P2 = [[-w, y0 + h * 0.2], [-w * 0.8, y0 - h * 0.05], [-0.5, y0 - h * 0.15], [-0.75, 0.02], [-0.2, y0 - h * 0.18], [w * 0.8, y0 - h * 0.1], [w, y0 + h * 0.4], [w * 0.85, y0 + h * 1.2], [-w * 0.85, y0 + h * 1.25]];
|
|
143
|
+
const A0 = [0.38, y0 + h * 1.4], A1 = [-0.05, y0 - h * 0.4]; // crease line (top right-of-centre to bottom)
|
|
144
|
+
const sd = (p) => (A1[0] - A0[0]) * (p[1] - A0[1]) - (A1[1] - A0[1]) * (p[0] - A0[0]);
|
|
145
|
+
const halves = [[], []];
|
|
146
|
+
P2.forEach((p, i) => {
|
|
147
|
+
const q = P2[(i + 1) % P2.length], sp = sd(p), sq = sd(q);
|
|
148
|
+
halves[sp >= 0 ? 0 : 1].push([p[0], p[1], 0]);
|
|
149
|
+
if ((sp >= 0) !== (sq >= 0)) { const k = sp / (sp - sq), m = [p[0] + (q[0] - p[0]) * k, p[1] + (q[1] - p[1]) * k, 0.045]; halves[0].push(m); halves[1].push(m); }
|
|
150
|
+
});
|
|
151
|
+
void pts;
|
|
152
|
+
halves.forEach((hp, i) => { if (hp.length >= 3) face(hp.map(T), CREAM.map((v) => v * (i ? 1.0 : 0.97)), map); });
|
|
153
|
+
};
|
|
154
|
+
const strip = (a, b, wdt, col) => { // a flat paper strip standing in the plane facing camera, slightly folded
|
|
155
|
+
const d = sub(b, a), n = norm([-d[1], d[0], 0]), m = mul(add(a, b), 0.5);
|
|
156
|
+
face([add(a, mul(n, wdt)), add(m, [n[0] * wdt, n[1] * wdt, 0.04]), add(m, [-n[0] * wdt, -n[1] * wdt, 0.04]), add(a, mul(n, -wdt))], col);
|
|
157
|
+
face([add(m, [n[0] * wdt, n[1] * wdt, 0.04]), add(b, mul(n, wdt)), add(b, mul(n, -wdt)), add(m, [-n[0] * wdt, -n[1] * wdt, 0.04])], col.map((v) => v * 0.94));
|
|
158
|
+
};
|
|
159
|
+
const column = (x, z, hgt, col) => { // accordion-pleated paper column: 12 folds alternating out (mountain) / in (valley)
|
|
160
|
+
const n = 12, r0 = 0.24;
|
|
161
|
+
const ring = (y) => Array.from({ length: n }, (_, k) => { const a = ((k + 0.5) / n) * TAU, r = k % 2 ? r0 * 0.82 : r0; return [x + Math.cos(a) * r, y, z + Math.sin(a) * r]; });
|
|
162
|
+
const A = ring(0.01), B = ring(hgt);
|
|
163
|
+
for (let k = 0; k < n; k++) { const k2 = (k + 1) % n; face([A[k], A[k2], B[k2], B[k]], k % 2 ? col.map((v) => v * 0.92) : col); }
|
|
164
|
+
// cap folded as a shallow fan with the centre raised
|
|
165
|
+
const cc = [x, hgt + 0.035, z];
|
|
166
|
+
for (let k = 0; k < n; k++) face([B[k], B[(k + 1) % n], cc], col.map((v) => Math.min(255, v * (k % 2 ? 1.0 : 1.06))));
|
|
167
|
+
};
|
|
168
|
+
const star = (x, y, z, s, spin) => {
|
|
169
|
+
const c = [x, y, z], pts = [];
|
|
170
|
+
for (let i = 0; i < 10; i++) { const a = -Math.PI / 2 + (i / 10) * TAU, rr = (i % 2 ? 0.42 : 1) * s; pts.push(add(c, rotY([Math.cos(a) * rr, -Math.sin(a) * rr, 0], spin))); }
|
|
171
|
+
const f1 = add(c, rotY([0, 0, 0.3 * s], spin)), f2 = add(c, rotY([0, 0, -0.3 * s], spin));
|
|
172
|
+
for (let i = 0; i < 10; i++) { face([pts[i], pts[(i + 1) % 10], f1], i % 2 ? MUS : MUS.map((v) => v * 0.85)); face([pts[(i + 1) % 10], pts[i], f2], MUS.map((v) => v * 0.8)); }
|
|
173
|
+
};
|
|
174
|
+
const printer = (lines, opt = {}) => (c, w, h) => {
|
|
175
|
+
c.fillStyle = opt.ink || INK; c.textAlign = 'center'; c.textBaseline = 'middle';
|
|
176
|
+
lines.forEach(([txt, fr, yy, col]) => {
|
|
177
|
+
let px = fr * h; c.font = SG(px); const mw = c.measureText(txt).width; if (mw > w * 0.9) { px *= (w * 0.9) / mw; c.font = SG(px); }
|
|
178
|
+
c.fillStyle = col || opt.ink || INK; c.fillText(txt, w / 2, h * yy);
|
|
179
|
+
});
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
// ================= scene =================
|
|
183
|
+
// BEAT 1: the question printed on a big tent card that folds up
|
|
184
|
+
tent(0, 1.2, 2.6, 1.55, 0, seg(0.1, 0.9), printer([['How does', 0.34, 0.3], ['AI learn?', 0.42, 0.7, '#e45a3e']]));
|
|
185
|
+
animal('cat', -3.6, 0.2, 0.8, 0.3, 0, 0); animal('dog', 3.6, 0.2, 0.8, -0.3, 0, 0);
|
|
186
|
+
|
|
187
|
+
// BEAT 2: labelled origami examples hop along into the paper brain
|
|
188
|
+
const BXp = 10.6;
|
|
189
|
+
brain(BXp, -0.2, 1.05, 2.4 * seg(8.85, 9.5));
|
|
190
|
+
tent(BXp - 0.6, 1.5, 0.62, 0.36, 0.1, seg(2.8, 3.2), printer([['model', 0.6, 0.55, '#e45a3e']]));
|
|
191
|
+
tent(6.0, -1.1, 2.3, 1.55, 0.05, seg(2.6, 3.0), (c, w, h) => {
|
|
192
|
+
const n = Math.round(1e6 * Math.pow(H.clamp((t - 2.9) / 2.3), 2.2)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
193
|
+
printer([[n, 0.42, 0.24], ['examples', 0.22, 0.55, '#3a8f86']])(c, w, h);
|
|
194
|
+
});
|
|
195
|
+
arrowFlat(4.4, 1.75, 9.1, 1.6, seg(2.7, 3.4), MUS);
|
|
196
|
+
{
|
|
197
|
+
const r = H.rng(55);
|
|
198
|
+
for (let k = 0; k < 10; k++) {
|
|
199
|
+
const s = 2.1 + k * 0.3, kind = r() < 0.5 ? 'cat' : 'dog';
|
|
200
|
+
const x = 3.0 + (t - s) * 3.1;
|
|
201
|
+
if (t < s || x > BXp - 0.9) continue;
|
|
202
|
+
const hop = Math.abs(Math.sin((t - s) * 7)) * 0.18;
|
|
203
|
+
const shrink = H.clamp((BXp - 0.9 - x) / 0.6);
|
|
204
|
+
animal(kind, x, 0.35, 0.5 * shrink, 0.25, hop);
|
|
205
|
+
tent(x, 0.95, 0.36, 0.24, 0.25, shrink, printer([[kind, 0.62, 0.55, kind === 'cat' ? '#e45a3e' : '#2f6f9a']]));
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
// BEAT 3: guess -> check -> adjust (a loop of folded arrows)
|
|
210
|
+
if (t > 5.5) {
|
|
211
|
+
const nc = pop(6.25);
|
|
212
|
+
if (nc > 0) { animal('cat', 8.2, 0.9, 0.62 * nc, 0.35); tent(8.2, 1.75, 0.55, 0.28, 0.3, seg(6.4, 6.7), printer([['new photo', 0.55, 0.55]])); }
|
|
213
|
+
arrowFlat(8.7, 1.1, 9.5, 0.95, seg(6.6, 6.9), MUS);
|
|
214
|
+
arrowFlat(11.8, 0.7, 13.0, 0.5, seg(6.95, 7.3), MUS);
|
|
215
|
+
tent(12.45, 0.35, 0.5, 0.3, 0, seg(7.15, 7.4), printer([['Guess', 0.62, 0.55]]));
|
|
216
|
+
// once the camera dollies on to the results, the guess bubble and its tick fold back down flat
|
|
217
|
+
// (otherwise their remains sit clipped at the left frame edge)
|
|
218
|
+
const away = 1 - seg(10.3, 10.85);
|
|
219
|
+
const bu = pop(7.3, 0.4) * away, phi = Math.PI * seg(9.45, 9.85);
|
|
220
|
+
const shake = t > 7.9 && t < 8.35 ? Math.sin(t * 55) * 0.05 * (8.35 - t) * 2.2 : 0;
|
|
221
|
+
bubble(13.9, 0.1, bu, phi, printer([['dog?', 0.5, 0.5]]), printer([['cat', 0.5, 0.5, '#2f8a5a']]), shake);
|
|
222
|
+
if (t > 7.85 && t < 9.45) { const xs = pop(7.85, 0.3); const c0 = [14.72, 1.47, 0.45]; /* crosses the bubble's corner, clear of the '?' */ strip(add(c0, [-0.3 * xs, 0.3 * xs, 0]), add(c0, [0.3 * xs, -0.3 * xs, 0]), 0.07, RED); strip(add(c0, [-0.3 * xs, -0.3 * xs, 0.03]), add(c0, [0.3 * xs, 0.3 * xs, 0.03]), 0.07, RED); }
|
|
223
|
+
tent(13.9, 1.3, 0.6, 0.34, -0.1, t < 9.45 ? seg(8.0, 8.3) : 0, printer([['Check', 0.6, 0.55, '#d4473a']]));
|
|
224
|
+
if (t < 9.45) { arrowFlat(13.2, 1.75, 11.4, 1.55, seg(8.3, 8.75), RED); tent(12.3, 1.95, 0.55, 0.3, 0, seg(8.6, 8.85), printer([['Adjust', 0.62, 0.55, '#d4473a']])); }
|
|
225
|
+
const vs = pop(9.9, 0.35) * away;
|
|
226
|
+
if (vs > 0) { const c0 = [14.55, 1.35, 0.45]; strip(add(c0, [-0.32 * vs, 0.02, 0]), add(c0, [-0.08 * vs, -0.24 * vs, 0]), 0.07, GREEN); strip(add(c0, [-0.08 * vs, -0.24 * vs, 0.02]), add(c0, [0.42 * vs, 0.36 * vs, 0.02]), 0.07, GREEN); }
|
|
227
|
+
}
|
|
228
|
+
// weights: pinwheels by the brain spin when the error comes back
|
|
229
|
+
{
|
|
230
|
+
const spin = t < 8.85 ? 0 : (t - 8.85) * 9 * (1 - seg(9.4, 9.9)) + 4.5 * seg(9.4, 9.9);
|
|
231
|
+
pinwheel(BXp + 1.1, -1.3, 1.0, 0.3 + spin, TEAL);
|
|
232
|
+
pinwheel(BXp + 1.8, -0.9, 0.8, 1.1 - spin * 1.3, MUS);
|
|
233
|
+
pinwheel(BXp + 0.3, -1.7, 0.9, 0.7 + spin * 0.8, IND);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
// BEAT 4: progress — pleated paper columns rise, accuracy counts up
|
|
237
|
+
const accs = [61, 72, 80, 86, 90, 93, 95, 97];
|
|
238
|
+
let shown = 61;
|
|
239
|
+
accs.forEach((a, i) => {
|
|
240
|
+
const st = 10.55 + i * 0.25, u = H.clamp((t - st) / 0.3);
|
|
241
|
+
if (u <= 0) return;
|
|
242
|
+
column(15.4 + i * 0.62, 0.2, (a / 100) * 2.25 * H.ease.out(u), i === 7 ? RED : i % 2 ? TEAL : MUS);
|
|
243
|
+
shown = H.lerp(i ? accs[i - 1] : 61, a, u);
|
|
244
|
+
});
|
|
245
|
+
arrowFlat(15.2, 0.85, 20.6, 0.85, seg(10.6, 12.5), CREAM);
|
|
246
|
+
tent(17.9, 1.55, 0.9, 0.26, 0, seg(10.8, 11.1), printer([['training rounds', 0.6, 0.55, '#6a6a70']]));
|
|
247
|
+
tent(20.7, 0.9, 1.35, 1.1, -0.12, seg(10.5, 10.9), (c, w, h) => printer([['Accuracy', 0.26, 0.26, '#3a8f86'], [Math.round(shown) + '%', 0.55, 0.68, t > 12.6 ? '#e45a3e' : INK]])(c, w, h));
|
|
248
|
+
const sp = pop(12.6, 0.5);
|
|
249
|
+
if (sp > 0) star(15.4 + 7 * 0.62, 2.55 + 0.12 * Math.sin(t * 3), 0.2, 0.4 * sp, (t - 12.6) * 2.5);
|
|
250
|
+
|
|
251
|
+
// BEAT 5: takeaway card folds up in front
|
|
252
|
+
tent(18.2, 3.0, 2.0, 0.62, 0, seg(13.0, 13.55), (c, w, h) => {
|
|
253
|
+
c.font = SG(100); const k = Math.min(h * 0.5, (100 * w * 0.86) / (c.measureText('More examples better guesses').width + 60));
|
|
254
|
+
c.textBaseline = 'middle'; c.font = SG(k); c.fillStyle = INK; c.textAlign = 'right'; c.fillText('More examples', w * 0.47, h * 0.5);
|
|
255
|
+
c.fillStyle = '#e45a3e'; c.beginPath(); c.moveTo(w * 0.495, h * 0.42); c.lineTo(w * 0.535, h * 0.5); c.lineTo(w * 0.495, h * 0.58); c.fill(); c.fillRect(w * 0.48, h * 0.48, w * 0.03, h * 0.04);
|
|
256
|
+
c.textAlign = 'left'; c.fillStyle = '#e45a3e'; c.fillText('better guesses', w * 0.55, h * 0.5);
|
|
257
|
+
});
|
|
258
|
+
|
|
259
|
+
// ================= render =================
|
|
260
|
+
faces.forEach((f) => {
|
|
261
|
+
const [a, b, c] = f.pts;
|
|
262
|
+
let n = norm(cross(sub(b, a), sub(c, a)));
|
|
263
|
+
const cen = mul(f.pts.reduce((s, p) => add(s, p), [0, 0, 0]), 1 / f.pts.length);
|
|
264
|
+
if (dot(n, sub(E, cen)) < 0) n = mul(n, -1);
|
|
265
|
+
const I = 0.36 + 0.7 * Math.max(0, dot(n, Lkey)) + 0.16 * Math.max(0, dot(n, Lfill)) + 0.1 * Math.max(0, -n[1]);
|
|
266
|
+
f.rgb = f.col.map((ch, i) => Math.min(255, ch * I * [1.04, 1, 0.95][i]));
|
|
267
|
+
f.I = I; f.n = n; f.cen = cen;
|
|
268
|
+
f.sp = f.pts.map(proj); f.z = f.sp.reduce((s, p) => s + p[2], 0) / f.sp.length;
|
|
269
|
+
});
|
|
270
|
+
const vis = faces.filter((f) => f.sp.every((p) => p[2] > 0.5));
|
|
271
|
+
// crease map (as in the still): shared edges between facets are valley (dark) or mountain (lit) folds
|
|
272
|
+
{
|
|
273
|
+
const ek = (p) => Math.round(p[0] * 1000) + ',' + Math.round(p[1] * 1000) + ',' + Math.round(p[2] * 1000);
|
|
274
|
+
const edges = new Map();
|
|
275
|
+
vis.forEach((f, fi) => f.pts.forEach((p, i) => {
|
|
276
|
+
const q = f.pts[(i + 1) % f.pts.length], a = ek(p), b = ek(q), k = a < b ? a + '|' + b : b + '|' + a;
|
|
277
|
+
const e = edges.get(k); if (e) e.push(fi); else edges.set(k, [fi]);
|
|
278
|
+
(f.ek || (f.ek = []))[i] = k;
|
|
279
|
+
}));
|
|
280
|
+
vis.forEach((f, fi) => {
|
|
281
|
+
f.ekind = f.ek.map((k) => {
|
|
282
|
+
const fs = edges.get(k);
|
|
283
|
+
if (!fs || fs.length !== 2) return 0;
|
|
284
|
+
const g = vis[fs[0] === fi ? fs[1] : fs[0]];
|
|
285
|
+
const d = dot(sub(g.cen, f.cen), f.n);
|
|
286
|
+
return d > 0.004 ? -1 : d < -0.004 ? 1 : 0;
|
|
287
|
+
});
|
|
288
|
+
});
|
|
289
|
+
}
|
|
290
|
+
vis.sort((a, b) => b.z - a.z);
|
|
291
|
+
// backdrop
|
|
292
|
+
ctx.drawImage(OXC.bg || (OXC.bg = (() => {
|
|
293
|
+
const C = H.layer(W, H_), c = C.getContext('2d');
|
|
294
|
+
const bg = c.createLinearGradient(0, 0, 0, H_);
|
|
295
|
+
bg.addColorStop(0, '#c9d3cf'); bg.addColorStop(0.45, '#dde3de'); bg.addColorStop(0.62, '#e6e6de'); bg.addColorStop(1, '#d8d5ca');
|
|
296
|
+
c.fillStyle = bg; c.fillRect(0, 0, W, H_);
|
|
297
|
+
const spot = c.createRadialGradient(560, 330, 40, 600, 380, 780); spot.addColorStop(0, 'rgba(255,252,240,0.6)'); spot.addColorStop(1, 'rgba(255,252,240,0)');
|
|
298
|
+
c.fillStyle = spot; c.fillRect(0, 0, W, H_);
|
|
299
|
+
c.globalAlpha = 0.6; c.fillStyle = c.createPattern(OXC.tex || (OXC.tex = makeTex(5)), 'repeat'); c.fillRect(0, 0, W, H_);
|
|
300
|
+
return C;
|
|
301
|
+
})()), 0, 0);
|
|
302
|
+
// soft table shadows + contact occlusion, rendered into reduced-resolution masks (blur scaled to match),
|
|
303
|
+
// then upscaled: the same look as full-res blur(12px) / blur(5px) at a fraction of the cost
|
|
304
|
+
const lowL = (key, sc0) => { const w = Math.ceil(W * sc0), h = Math.ceil(H_ * sc0); let L = OXC[key]; if (!L || L.width !== w) { L = OXC[key] = H.layer(w, h); } const c = L.getContext('2d'); c.setTransform(1, 0, 0, 1, 0, 0); c.clearRect(0, 0, w, h); c.setTransform(sc0, 0, 0, sc0, 0, 0); return [L, c]; };
|
|
305
|
+
{
|
|
306
|
+
const [SL, sc] = lowL('SLh', 0.5); sc.fillStyle = '#000';
|
|
307
|
+
vis.forEach((f) => { if (f.pts.every((p) => p[1] < 0.02)) return; sc.beginPath(); f.pts.forEach((p, i) => { const s = proj(add(p, mul(Ls, p[1] / -Ls[1]))); i ? sc.lineTo(s[0], s[1]) : sc.moveTo(s[0], s[1]); }); sc.closePath(); sc.fill(); });
|
|
308
|
+
// contact occlusion where paper meets the table (the still's CL pass): footprints of low facets, tight blur
|
|
309
|
+
const [CL, cc] = lowL('CLh', 0.5); cc.fillStyle = '#000';
|
|
310
|
+
vis.forEach((f) => {
|
|
311
|
+
let mn = 1e9; f.pts.forEach((p) => { if (p[1] < mn) mn = p[1]; });
|
|
312
|
+
if (mn > 0.22) return;
|
|
313
|
+
cc.beginPath(); f.pts.forEach((p, i) => { const s = proj([p[0], 0, p[2]]); i ? cc.lineTo(s[0], s[1]) : cc.moveTo(s[0], s[1]); }); cc.closePath(); cc.fill();
|
|
314
|
+
});
|
|
315
|
+
// black-over-white stacking == multiplying the two shadow layers; one multiply onto the frame
|
|
316
|
+
const w = SL.width, h = SL.height; let M = OXC.SM; if (!M || M.width !== w) M = OXC.SM = H.layer(w, h);
|
|
317
|
+
const m = M.getContext('2d'); m.globalAlpha = 1; m.filter = 'none'; m.fillStyle = '#fff'; m.fillRect(0, 0, w, h);
|
|
318
|
+
m.filter = 'blur(6px)'; m.globalAlpha = 0.38; m.drawImage(SL, 0, 0);
|
|
319
|
+
m.filter = 'blur(2.5px)'; m.globalAlpha = 0.6; m.drawImage(CL, 0, 0);
|
|
320
|
+
m.filter = 'none'; m.globalAlpha = 1;
|
|
321
|
+
ctx.save(); ctx.globalCompositeOperation = 'multiply'; ctx.drawImage(M, 0, 0, W, H_); ctx.restore();
|
|
322
|
+
}
|
|
323
|
+
// facets: per-facet light gradient, lit edge, valley/mountain creases (same finish as the still)
|
|
324
|
+
const OL = OXC.OL || (OXC.OL = H.layer(W, H_)), o = OL.getContext('2d');
|
|
325
|
+
o.clearRect(0, 0, W, H_); o.lineJoin = 'round';
|
|
326
|
+
const Lscr = [-0.6, -0.8];
|
|
327
|
+
vis.forEach((f) => {
|
|
328
|
+
const sp = f.sp;
|
|
329
|
+
let mnx = 1e9, mxx = -1e9, mny = 1e9, mxy = -1e9;
|
|
330
|
+
sp.forEach((p) => { if (p[0] < mnx) mnx = p[0]; if (p[0] > mxx) mxx = p[0]; if (p[1] < mny) mny = p[1]; if (p[1] > mxy) mxy = p[1]; });
|
|
331
|
+
if (mxx < -20 || mnx > W + 20 || mxy < -20 || mny > H_ + 20) return;
|
|
332
|
+
const gx = (mnx + mxx) / 2, gy = (mny + mxy) / 2, rr = Math.max(1, Math.max(mxx - mnx, mxy - mny) / 2);
|
|
333
|
+
const g = o.createLinearGradient(gx + Lscr[0] * rr, gy + Lscr[1] * rr, gx - Lscr[0] * rr, gy - Lscr[1] * rr);
|
|
334
|
+
g.addColorStop(0, H.rgba(f.rgb.map((v) => Math.min(255, v * 1.05)), 1)); g.addColorStop(1, H.rgba(f.rgb.map((v) => v * 0.94), 1));
|
|
335
|
+
o.beginPath(); sp.forEach((p, i) => (i ? o.lineTo(p[0], p[1]) : o.moveTo(p[0], p[1]))); o.closePath();
|
|
336
|
+
o.fillStyle = g; o.fill();
|
|
337
|
+
o.strokeStyle = H.rgba(f.rgb, 1); o.lineWidth = 0.7; o.stroke();
|
|
338
|
+
o.strokeStyle = `rgba(255,255,250,${0.05 + 0.08 * Math.min(1, f.I)})`; o.lineWidth = 0.6; o.stroke();
|
|
339
|
+
for (const kind of [-1, 1]) { // valley folds dark, mountain folds lit; one stroke per kind per facet
|
|
340
|
+
let any = false;
|
|
341
|
+
sp.forEach((p, i) => { if (f.ekind[i] !== kind) return; if (!any) { o.beginPath(); any = true; } const q = sp[(i + 1) % sp.length]; o.moveTo(p[0], p[1]); o.lineTo(q[0], q[1]); });
|
|
342
|
+
if (!any) continue;
|
|
343
|
+
if (kind < 0) { o.strokeStyle = H.rgba(f.rgb.map((v) => v * 0.55), 0.55); o.lineWidth = 0.9; }
|
|
344
|
+
else { o.strokeStyle = `rgba(255,250,242,${0.1 + 0.2 * H.clamp(f.I - 0.5)})`; o.lineWidth = 0.8; }
|
|
345
|
+
o.stroke();
|
|
346
|
+
}
|
|
347
|
+
if (f.paint) {
|
|
348
|
+
const [p0, p1, p3] = f.map.map(proj), cw = 400, ch = 400 * (Math.hypot(p3[0] - p0[0], p3[1] - p0[1]) / Math.max(1, Math.hypot(p1[0] - p0[0], p1[1] - p0[1])));
|
|
349
|
+
if (ch > 2 && ch < 4000) {
|
|
350
|
+
o.save(); o.beginPath(); sp.forEach((p, i) => (i ? o.lineTo(p[0], p[1]) : o.moveTo(p[0], p[1]))); o.closePath(); o.clip();
|
|
351
|
+
o.setTransform((p1[0] - p0[0]) / cw, (p1[1] - p0[1]) / cw, (p3[0] - p0[0]) / ch, (p3[1] - p0[1]) / ch, p0[0], p0[1]);
|
|
352
|
+
f.paint(o, cw, ch); o.restore();
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
});
|
|
356
|
+
o.save(); o.globalCompositeOperation = 'source-atop'; o.globalAlpha = 0.9; o.fillStyle = o.createPattern(OXC.tex, 'repeat'); o.fillRect(0, 0, W, H_); o.restore();
|
|
357
|
+
ctx.drawImage(OL, 0, 0);
|
|
358
|
+
// emphasis: key light flares on the moments that matter
|
|
359
|
+
const flash = Math.max(Math.exp(-Math.pow((t - 7.95) * 5, 2)), Math.exp(-Math.pow((t - 12.65) * 5, 2)));
|
|
360
|
+
if (flash > 0.01) { ctx.save(); ctx.globalCompositeOperation = 'screen'; ctx.fillStyle = `rgba(255,240,215,${flash * 0.18})`; ctx.fillRect(0, 0, W, H_); ctx.restore(); }
|
|
361
|
+
H.vignette(ctx, W, H_, 0.28, '30,40,40');
|
|
362
|
+
H.grain(ctx, W, H_, 0.022, 3 + Math.floor(t * 24));
|
|
363
|
+
};
|
|
364
|
+
|
|
365
|
+
registerStyle({
|
|
366
|
+
id: 'origami',
|
|
367
|
+
name: 'Origami Studio',
|
|
368
|
+
category: 'Paper & Craft',
|
|
369
|
+
description: 'Folded-paper models shot on a seamless studio sweep: every form is flat facets with consistent fold shading, crisp crease lines, two-tone paper and soft table shadows.',
|
|
370
|
+
motion: 'Models unfold into place crease by crease, the paper crane-drone bobs on spinning paper rotors while the key light slowly orbits the table.',
|
|
371
|
+
fonts: ['700 30px "Space Grotesk"', '400 15px "Space Mono"'],
|
|
372
|
+
frameT: 4.8,
|
|
373
|
+
duration: 5,
|
|
374
|
+
readsPixels: true,
|
|
375
|
+
explainerDuration: 15,
|
|
376
|
+
explainerNote: 'The camera dollies along one long studio table: every prop folds up from flat paper, arrows are creased paper arrows lying on the table with the label printed on them, numbers are printed on tent cards that refold, and the wrong guess gets a camera push-in and a key-light flare.',
|
|
377
|
+
explainer(ctx, W, H_, t) { EXPLAIN(ctx, W, H_, t); },
|
|
378
|
+
// Sound: paper folding on a quiet studio table. Every tent card / prop that folds up gets a soft bend of the sheet
|
|
379
|
+
// for exactly its seg() window and a crisp crease as it stands; arrows are folded sheets slid across the table;
|
|
380
|
+
// hopping animals patter; pleated columns ripple up; the brain re-folds with a real crinkle; the pinwheels flutter.
|
|
381
|
+
// Camera dollies are a barely-there low glide. Times mirror EXPLAIN() above (seg/pop windows, accs at 10.55+i*0.25).
|
|
382
|
+
explainerSound(k) {
|
|
383
|
+
const seg = (t, a, b) => H.ease.inOut(H.clamp((t - a) / (b - a)));
|
|
384
|
+
const camX = (t) => 8 * seg(t, 1.9, 2.9) + 3.6 * seg(t, 5.6, 6.3) + 7.0 * seg(t, 10.1, 10.9);
|
|
385
|
+
const pan = (x, t) => H.clamp(((x - camX(t)) * 153) / 640, -1, 1) * 0.6;
|
|
386
|
+
const POP = 1 - 1.5 / 2.5; // pop() (c1 = 1.5) first reaches full size at this fraction of its duration
|
|
387
|
+
// the sheet bending up along its crease (smooth, a few fibre crackles), then the crease pressed
|
|
388
|
+
const fold = (t0, t1, g = 1, p = 0, minor = true) => {
|
|
389
|
+
const d = t1 - t0;
|
|
390
|
+
k.noise(t0, { dur: d, color: 'pink', filter: 'bandpass', f: [[0, 520], [d, 1300]], q: 0.6, gain: 0.095 * g, a: d * 0.55, pan: p, minor: true });
|
|
391
|
+
for (let i = 1; i <= 3; i++) k.noise(t0 + d * (0.25 + i * 0.17), { dur: 0.018, filter: 'bandpass', f: 1500 + i * 250, q: 1.2, gain: 0.07 * g, a: 0.001, pan: p, minor: true });
|
|
392
|
+
crease(t1, g, p, minor);
|
|
393
|
+
};
|
|
394
|
+
const crease = (t, g = 1, p = 0, minor = true) => {
|
|
395
|
+
k.noise(t, { dur: 0.028, filter: 'bandpass', f: 1700, q: 1.1, gain: 0.55 * g, a: 0.001, pan: p, minor });
|
|
396
|
+
k.noise(t, { dur: 0.07, color: 'brown', filter: 'lowpass', f: 520, gain: 0.42 * g, a: 0.002, pan: p, minor });
|
|
397
|
+
};
|
|
398
|
+
// a folded sheet slid across the table
|
|
399
|
+
const slideSheet = (t0, t1, g = 1, p = 0) => {
|
|
400
|
+
const d = t1 - t0;
|
|
401
|
+
k.noise(t0, { dur: d, filter: 'bandpass', f: [[0, 700], [d, 1000]], q: 0.7, gain: 0.08 * g, a: d * 0.4, hold: d * 0.3, pan: p, minor: true });
|
|
402
|
+
crease(t1, 0.45 * g, p);
|
|
403
|
+
};
|
|
404
|
+
const tap = (t, g = 1, p = 0) => { // small paper foot touching the table
|
|
405
|
+
k.noise(t, { dur: 0.03, color: 'brown', filter: 'lowpass', f: 700, gain: 0.3 * g, a: 0.001, pan: p, minor: true });
|
|
406
|
+
k.noise(t, { dur: 0.015, filter: 'bandpass', f: 1300, q: 1, gain: 0.08 * g, a: 0.001, pan: p, minor: true });
|
|
407
|
+
};
|
|
408
|
+
const glide = (t, d) => k.noise(t, { dur: d, color: 'brown', filter: 'lowpass', f: [[0, 220], [d * 0.5, 420], [d, 220]], gain: 0.09, a: d * 0.5 }); // camera dolly
|
|
409
|
+
const tick = (t, g, p) => { k.noise(t, { dur: 0.02, filter: 'bandpass', f: 1500, q: 1.6, gain: 0.26 * g, a: 0.001, pan: p, minor: true }); k.tone(t, { f: 240, dur: 0.03, gain: 0.05 * g, pan: p, minor: true }); };
|
|
410
|
+
|
|
411
|
+
k.bed('room', 0, 15, { gain: 0.3 });
|
|
412
|
+
k.music('pad', 0.3, 14.8, { bpm: 64, gain: 0.24, chords: [['C3', 'G3', 'B3', 'E4'], ['A2', 'E3', 'G3', 'C4'], ['F2', 'C3', 'E3', 'A3'], ['G2', 'D3', 'G3', 'B3']] });
|
|
413
|
+
|
|
414
|
+
// BEAT 1: the question card folds up (0.1..0.9)
|
|
415
|
+
fold(0.1, 0.9, 1.4, 0, false);
|
|
416
|
+
|
|
417
|
+
// BEAT 2
|
|
418
|
+
glide(1.9, 1.0);
|
|
419
|
+
fold(2.6, 3.0, 1.1, pan(6.0, 2.9)); // counter card
|
|
420
|
+
slideSheet(2.7, 3.4, 1, pan(7.5, 3.2)); // yellow arrow slides under the parade
|
|
421
|
+
fold(2.8, 3.2, 0.7, pan(10.0, 3.1)); // 'model' card
|
|
422
|
+
{ // hopping animals: each lands every pi/7 s; patter throttled so it never gets busy
|
|
423
|
+
const lands = [];
|
|
424
|
+
for (let c = 0; c < 10; c++) {
|
|
425
|
+
const s = 2.1 + c * 0.3, gone = s + (10.6 - 0.9 - 3.0) / 3.1;
|
|
426
|
+
for (let t = s + Math.PI / 7; t < gone - 0.05; t += Math.PI / 7) { const x = 3.0 + (t - s) * 3.1; if (Math.abs(x - camX(t)) < 4.5) lands.push([t, x]); }
|
|
427
|
+
}
|
|
428
|
+
lands.sort((a, b) => a[0] - b[0]);
|
|
429
|
+
let lastT = -1;
|
|
430
|
+
for (const [t, x] of lands) if (t - lastT >= 0.26) { tap(t, 0.4, pan(x, t)); lastT = t; }
|
|
431
|
+
}
|
|
432
|
+
// counter 0 -> 1,000,000 (2.9..5.2): printed digits tick, quickening; the card settles at the end
|
|
433
|
+
for (let t = 2.96; t < 5.16;) { const s = H.clamp((t - 2.9) / 2.3); tick(t, 0.6 + 0.3 * s, pan(6.0, t)); t += 0.15 - 0.055 * s; }
|
|
434
|
+
crease(5.2, 1.2, pan(6.0, 5.2), false);
|
|
435
|
+
k.tone(5.2, { f: 'G3', type: 'triangle', dur: 0.25, gain: 0.12, filter: 'lowpass', f2: 900, pan: pan(6.0, 5.2) });
|
|
436
|
+
|
|
437
|
+
// BEAT 3: guess -> check -> adjust
|
|
438
|
+
glide(5.6, 0.7);
|
|
439
|
+
fold(6.25, 6.25 + POP * 0.45, 1.0, pan(8.2, 6.4), false); // new cat pops up out of a flat sheet
|
|
440
|
+
fold(6.4, 6.7, 0.6, pan(8.2, 6.6)); // 'new photo'
|
|
441
|
+
slideSheet(6.6, 6.9, 0.9, pan(9.1, 6.8));
|
|
442
|
+
slideSheet(6.95, 7.3, 0.9, pan(12.4, 7.1));
|
|
443
|
+
fold(7.15, 7.4, 0.6, pan(12.45, 7.3)); // 'Guess'
|
|
444
|
+
fold(7.3, 7.3 + POP * 0.4, 0.9, pan(13.9, 7.4)); // 'dog?' bubble stands up
|
|
445
|
+
// the wrong guess: red strips snap into an X, camera pushes in, key light flares, the bubble wobbles
|
|
446
|
+
const tX = 7.85 + POP * 0.3;
|
|
447
|
+
k.noise(7.85, { dur: tX - 7.85, color: 'pink', filter: 'bandpass', f: [[0, 600], [tX - 7.85, 1600]], q: 0.7, gain: 0.2, a: 0.08, pan: 0.5 });
|
|
448
|
+
k.play('slap', tX, { gain: 0.55, pan: 0.5 });
|
|
449
|
+
k.play('thud', tX, { f: 120, gain: 0.55, pan: 0.4 });
|
|
450
|
+
k.tone(tX + 0.02, { f: 'D3', type: 'triangle', dur: 0.16, gain: 0.2, filter: 'lowpass', f2: 700 });
|
|
451
|
+
k.tone(tX + 0.18, { f: 'A2', type: 'triangle', dur: 0.32, gain: 0.22, filter: 'lowpass', f2: 600 });
|
|
452
|
+
k.play('paper', 7.98, { dur: 0.35, gain: 0.3, pan: 0.4, minor: true });
|
|
453
|
+
fold(8.0, 8.3, 0.65, 0.35); // 'Check'
|
|
454
|
+
slideSheet(8.3, 8.75, 1.1, 0.0); // red arrow back toward the brain
|
|
455
|
+
fold(8.6, 8.85, 0.65, -0.1); // 'Adjust'
|
|
456
|
+
// the brain re-folds (8.85..9.5): real paper crinkle; the pinwheels flutter while they spin (8.85..9.9)
|
|
457
|
+
k.play('paper', 8.85, { dur: 0.65, gain: 0.45, pan: -0.25 });
|
|
458
|
+
{
|
|
459
|
+
let ang = 0, next = 0;
|
|
460
|
+
for (let t = 8.85; t < 9.9; t += 0.005) {
|
|
461
|
+
const w = 9 * (1 - seg(t, 9.4, 9.9)) + 0.5; ang += w * 0.005;
|
|
462
|
+
if (ang >= next) { k.noise(t, { dur: 0.035, color: 'pink', filter: 'bandpass', f: 800, q: 1, gain: 0.16 * Math.min(1, w / 6), a: 0.008, pan: -0.15, minor: true }); next += Math.PI / 4; }
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
// bubble flips round (9.45..9.85) and the green tick snaps on
|
|
466
|
+
k.noise(9.48, { dur: 0.32, color: 'pink', filter: 'bandpass', f: [[0, 420], [0.16, 900], [0.32, 420]], q: 0.7, gain: 0.18, a: 0.14, pan: 0.4 });
|
|
467
|
+
const tV = 9.9 + POP * 0.35;
|
|
468
|
+
crease(tV, 1.3, 0.5, false);
|
|
469
|
+
k.play('success', tV, { f: 'G5', gain: 0.6, pan: 0.45 });
|
|
470
|
+
|
|
471
|
+
// BEAT 4: columns ripple up pleat by pleat, % ticks, star pops
|
|
472
|
+
glide(10.1, 0.8);
|
|
473
|
+
fold(10.5, 10.9, 0.9, pan(20.7, 10.9)); // 'Accuracy' card
|
|
474
|
+
slideSheet(10.6, 12.5, 0.6, 0);
|
|
475
|
+
fold(10.8, 11.1, 0.5, pan(17.9, 11)); // 'training rounds'
|
|
476
|
+
const accs = [61, 72, 80, 86, 90, 93, 95, 97];
|
|
477
|
+
accs.forEach((a, i) => {
|
|
478
|
+
const st = 10.55 + i * 0.25, p = pan(15.4 + i * 0.62, st + 0.1);
|
|
479
|
+
for (let j = 0; j < 4; j++) k.noise(st + j * 0.045, { dur: 0.03, filter: 'bandpass', f: 1100 + j * 90, q: 1.3, gain: 0.14 * (1 - j * 0.15), a: 0.002, pan: p, minor: true }); // pleats opening
|
|
480
|
+
tap(st + 0.2, 0.5, p);
|
|
481
|
+
});
|
|
482
|
+
{
|
|
483
|
+
let last = -1, lastT = -1;
|
|
484
|
+
for (let t = 10.56; t < 12.6; t += 1 / 120) {
|
|
485
|
+
const i = Math.min(7, Math.floor((t - 10.55) / 0.25)), st = 10.55 + i * 0.25;
|
|
486
|
+
const v = Math.round(H.lerp(i ? accs[i - 1] : 61, accs[i], H.clamp((t - st) / 0.3)));
|
|
487
|
+
if (v !== last && t - lastT >= 1 / 12) { tick(t, 0.6, pan(20.7, t)); last = v; lastT = t; }
|
|
488
|
+
}
|
|
489
|
+
}
|
|
490
|
+
// 97%: the folded star springs open over the red column, key light flares (biggest hit)
|
|
491
|
+
k.play('impact', 12.6, { gain: 1.25, pan: 0.25 });
|
|
492
|
+
k.noise(12.6, { dur: 0.15, color: 'pink', filter: 'bandpass', f: [[0, 700], [0.15, 1800]], q: 0.6, gain: 0.26, a: 0.03, pan: 0.25 });
|
|
493
|
+
k.play('ding', 12.6, { f: 'E5', gain: 0.65, pan: 0.3 });
|
|
494
|
+
|
|
495
|
+
// BEAT 5: the takeaway card folds up in front and resolves
|
|
496
|
+
fold(13.0, 13.55, 1.3, 0, false);
|
|
497
|
+
['C4', 'G4', 'E5'].forEach((f, i) => k.play('ding', 13.6 + i * 0.09, { f, gain: 0.48 - i * 0.04, pan: (i - 1) * 0.25 }));
|
|
498
|
+
},
|
|
499
|
+
draw(ctx, W, H_, t) {
|
|
500
|
+
// ---------- camera ----------
|
|
501
|
+
const dolly = H.ease.inOut(H.clamp(t / 5));
|
|
502
|
+
const E = [0.5 * (1 - dolly) - 0.15, 3.25 - 0.15 * dolly, 11.9 - 0.7 * dolly], TG = [0, 1.35, 0];
|
|
503
|
+
const fwd = norm(sub(TG, E)), right = norm(cross(fwd, [0, 1, 0])), up = cross(right, fwd);
|
|
504
|
+
const F = 1180, CX = 640, CY = 372;
|
|
505
|
+
const proj = (p) => { const d = sub(p, E); const z = dot(d, fwd); return [CX + (F * dot(d, right)) / z, CY - (F * dot(d, up)) / z, z]; };
|
|
506
|
+
|
|
507
|
+
const Lkey = norm([-0.55 + 0.16 * (t - 4.8) / 4.8, 1.0, 0.55 + 0.1 * Math.sin((t - 4.8) * 0.8)]), Lfill = norm([0.9, 0.25, 0.35]);
|
|
508
|
+
const Ls = mul(Lkey, -1);
|
|
509
|
+
const faces = [];
|
|
510
|
+
const addFace = (pts, col, under, extra = {}) => faces.push({ pts, col, under, ...extra });
|
|
511
|
+
|
|
512
|
+
// ---------- geometric brain ----------
|
|
513
|
+
const nz = H.makeNoise(41);
|
|
514
|
+
const brainParts = [];
|
|
515
|
+
{
|
|
516
|
+
const ico = icosphere(2);
|
|
517
|
+
const bRot = (p) => add(rotX(rotY(p, -1.18), 0.16), [0.1, 0, 0]);
|
|
518
|
+
const jr = H.rng(43);
|
|
519
|
+
const jit = ico.v.map(() => [jr.gauss() * 0.03, jr.gauss() * 0.03, jr.gauss() * 0.03]);
|
|
520
|
+
const hemi = (side) => {
|
|
521
|
+
const vs = ico.v.map((u, vi) => {
|
|
522
|
+
const k = 1 + 0.07 * nz.n3(u[0] * 2.6 + side * 3, u[1] * 2.6, u[2] * 2.6) + 0.045 * nz.n3(u[0] * 6 + 9, u[1] * 6, u[2] * 6 + side);
|
|
523
|
+
let p = [u[0] * 0.62 * k, u[1] * 0.8 * k, u[2] * 1.12 * k];
|
|
524
|
+
if (u[0] * side < -0.15) p[0] *= 0.8; // flat medial wall -> fissure groove
|
|
525
|
+
if (u[1] < -0.05 && u[2] > -0.35 && u[2] < 0.75) { p[0] *= 1.1; p[1] -= 0.05; } // temporal lobe
|
|
526
|
+
p[1] = Math.max(p[1], -0.62 + Math.max(0, -u[2] - 0.1) * 0.6);
|
|
527
|
+
p = add([p[0] + side * 0.63, p[1], p[2]], jit[vi]);
|
|
528
|
+
return bRot(mul(p, 1.42));
|
|
529
|
+
});
|
|
530
|
+
ico.f.forEach(([a, b, c]) => addFace([vs[a], vs[b], vs[c]], [240, 138, 126], null, { obj: 'brain' }));
|
|
531
|
+
vs.forEach((p) => brainParts.push(p));
|
|
532
|
+
};
|
|
533
|
+
hemi(-1); hemi(1);
|
|
534
|
+
const ico1 = icosphere(1);
|
|
535
|
+
const cv = ico1.v.map((u) => bRot(mul([u[0] * 1.0, u[1] * 0.3 - 0.5, u[2] * 0.42 - 0.88], 1.42)));
|
|
536
|
+
ico1.f.forEach(([a, b, c]) => addFace([cv[a], cv[b], cv[c]], [205, 88, 92], null, { obj: 'brain' }));
|
|
537
|
+
cv.forEach((p) => brainParts.push(p));
|
|
538
|
+
// brain stem: a folded pentagonal tube
|
|
539
|
+
{
|
|
540
|
+
const n = 5, top = [], bot = [];
|
|
541
|
+
for (let k = 0; k < n; k++) { const a = (k / n) * TAU; top.push(bRot(mul([Math.cos(a) * 0.17, -0.38, Math.sin(a) * 0.15 - 0.42], 1.42))); bot.push(bRot(mul([Math.cos(a) * 0.12, -0.78, Math.sin(a) * 0.1 - 0.58], 1.42))); }
|
|
542
|
+
for (let k = 0; k < n; k++) { const k2 = (k + 1) % n; addFace([top[k], top[k2], bot[k2], bot[k]], [222, 112, 100], null, { obj: 'brain' }); }
|
|
543
|
+
bot.forEach((p) => brainParts.push(p));
|
|
544
|
+
}
|
|
545
|
+
// drop so it rests on the table
|
|
546
|
+
const minY = Math.min(...brainParts.map((p) => p[1]));
|
|
547
|
+
const lift = 0.02 - minY;
|
|
548
|
+
faces.forEach((f) => { if (f.obj === 'brain') f.pts = f.pts.map((p) => [p[0], p[1] + lift, p[2]]); });
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
// ---------- paper rocket ----------
|
|
552
|
+
{
|
|
553
|
+
const wob = Math.sin(t * 2.2) * 0.02;
|
|
554
|
+
const tr = (p) => add(rotZ(rotY(p, 0.28 + t * 0.05), wob), [3.75, 0, 0.7]);
|
|
555
|
+
const n = 6, r0 = 0.44;
|
|
556
|
+
const ring = (y, r, off = 0) => Array.from({ length: n }, (_, k) => { const a = ((k + 0.5) / n) * TAU + off; return [Math.cos(a) * r, y, Math.sin(a) * r]; });
|
|
557
|
+
const pleat = (y, r) => Array.from({ length: n }, (_, k) => { const a = ((k + 1) / n) * TAU; return [Math.cos(a) * r * 1.0, y, Math.sin(a) * r * 1.0]; });
|
|
558
|
+
const IND = [58, 82, 150], MUS = [241, 182, 68], RED = [222, 84, 62], WHITE = [244, 240, 230];
|
|
559
|
+
const band = (y0, y1, col) => {
|
|
560
|
+
const A = ring(y0, r0), B = ring(y1, r0), PA = pleat(y0, r0 * 0.93), PB = pleat(y1, r0 * 0.93);
|
|
561
|
+
for (let k = 0; k < n; k++) {
|
|
562
|
+
const k2 = (k + 1) % n;
|
|
563
|
+
addFace([A[k], PA[k], PB[k], B[k]].map(tr), col, null, { obj: 'rocket' });
|
|
564
|
+
addFace([PA[k], A[k2], B[k2], PB[k]].map(tr), col, null, { obj: 'rocket' });
|
|
565
|
+
}
|
|
566
|
+
};
|
|
567
|
+
band(0.42, 1.55, IND);
|
|
568
|
+
band(1.55, 1.82, MUS);
|
|
569
|
+
band(1.82, 2.25, IND);
|
|
570
|
+
// nose
|
|
571
|
+
const top = ring(2.25, r0), tip = [0, 3.2, 0], nb = ring(2.62, r0 * 0.62);
|
|
572
|
+
for (let k = 0; k < n; k++) {
|
|
573
|
+
const k2 = (k + 1) % n;
|
|
574
|
+
addFace([top[k], top[k2], nb[k2], nb[k]].map(tr), RED, null, { obj: 'rocket' });
|
|
575
|
+
addFace([nb[k], nb[k2], tip].map(tr), RED, null, { obj: 'rocket' });
|
|
576
|
+
}
|
|
577
|
+
// nozzle
|
|
578
|
+
const z0 = ring(0.42, r0 * 0.78), z1 = ring(0.18, r0 * 0.6);
|
|
579
|
+
for (let k = 0; k < n; k++) { const k2 = (k + 1) % n; addFace([z0[k], z0[k2], z1[k2], z1[k]].map(tr), [70, 70, 82], null, { obj: 'rocket' }); }
|
|
580
|
+
// fins (two-tone: mustard outside, white inside)
|
|
581
|
+
[0.5, 0.5 + TAU / 3, 0.5 + (2 * TAU) / 3].forEach((a) => {
|
|
582
|
+
const P = (rr, y) => [Math.cos(a) * rr, y, Math.sin(a) * rr];
|
|
583
|
+
const pts = [P(r0 * 0.95, 1.35), P(r0 + 0.62, 0.48), P(r0 + 0.7, 0.0), P(r0 * 0.95, 0.42)].map(tr);
|
|
584
|
+
// slight fold crease along the fin
|
|
585
|
+
const m1 = P(r0 + 0.3, 0.9), m2 = P(r0 + 0.32, 0.22);
|
|
586
|
+
const off = [Math.cos(a + 1.57) * 0.05, 0, Math.sin(a + 1.57) * 0.05];
|
|
587
|
+
addFace([pts[0], pts[1], tr(add(m1, off))], MUS, null, { obj: 'rocket' });
|
|
588
|
+
addFace([tr(add(m1, off)), pts[1], pts[2], tr(add(m2, off)), pts[3]], MUS, null, { obj: 'rocket' });
|
|
589
|
+
addFace([pts[0], tr(add(m1, off)), pts[3]], MUS, null, { obj: 'rocket' });
|
|
590
|
+
});
|
|
591
|
+
// round porthole flap
|
|
592
|
+
const wp = Array.from({ length: 8 }, (_, k) => { const a = (k / 8) * TAU; return tr([Math.cos(0.75) * (r0 + 0.012) + Math.sin(0.75) * Math.cos(a) * 0.17 * 0, 1.15 + Math.sin(a) * 0.17, 0]); });
|
|
593
|
+
void wp;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
// ---------- crane drone (hovering) ----------
|
|
597
|
+
const rotorDiscs = [];
|
|
598
|
+
{
|
|
599
|
+
const bob = Math.sin(t * 2.4) * 0.09;
|
|
600
|
+
const tr = (p) => add(rotX(rotY(rotZ(mul(p, 1.35), 0.04 + Math.sin(t * 1.3) * 0.03), 0.62), 0.32), [-3.5, 2.5 + bob, 0.3]);
|
|
601
|
+
const TEAL = [44, 160, 150], WH = null;
|
|
602
|
+
const C0 = [0, 0.1, 0], Bb = [0, -0.42, 0], BL = [0, -0.05, -0.2], BR = [0, -0.05, 0.2];
|
|
603
|
+
const Nb = [0.42, -0.08, 0], Tb = [-0.42, -0.08, 0];
|
|
604
|
+
const N = [1.0, 0.78, 0], Hd = [1.2, 0.62, 0];
|
|
605
|
+
const T = [-1.08, 0.74, 0];
|
|
606
|
+
const NL = [0.3, -0.16, -0.04], NR = [0.3, -0.16, 0.04], TL = [-0.3, -0.16, -0.04], TR = [-0.3, -0.16, 0.04];
|
|
607
|
+
const flap = Math.sin(t * 3.1) * 0.06;
|
|
608
|
+
const WL = [-0.3, 0.42 + flap, -1.35], WR = [-0.3, 0.42 + flap, 1.35];
|
|
609
|
+
const WfL = [0.42, -0.04, -0.06], WbL = [-0.42, -0.04, -0.06], WfR = [0.42, -0.04, 0.06], WbR = [-0.42, -0.04, 0.06];
|
|
610
|
+
const MlL = [-0.1, 0.32, -0.62], MlR = [-0.1, 0.32, 0.62];
|
|
611
|
+
const F = (pts, c, b) => addFace(pts.map(tr), c, b, { obj: 'crane' });
|
|
612
|
+
F([Nb, BL, Bb], TEAL, WH); F([Tb, Bb, BL], TEAL, WH); F([Nb, Bb, BR], TEAL, WH); F([Tb, BR, Bb], TEAL, WH);
|
|
613
|
+
F([Nb, C0, BL], TEAL, WH); F([Tb, BL, C0], TEAL, WH); F([Nb, BR, C0], TEAL, WH); F([Tb, C0, BR], TEAL, WH);
|
|
614
|
+
F([Nb, NL, N], TEAL, WH); F([Nb, N, NR], TEAL, WH); F([NL, NR, N], [240, 236, 226], null);
|
|
615
|
+
F([N, Hd, [1.0, 0.7, -0.03]], TEAL, WH); F([N, [1.0, 0.7, 0.03], Hd], TEAL, WH);
|
|
616
|
+
F([Tb, TL, T], TEAL, WH); F([Tb, T, TR], TEAL, WH); F([TL, TR, T], [240, 236, 226], null);
|
|
617
|
+
// wings: folded along a crease to the tip (two-tone underside)
|
|
618
|
+
F([C0, WfL, MlL], TEAL, WH); F([WfL, WL, MlL], TEAL, WH); F([C0, MlL, WbL], TEAL, WH); F([MlL, WL, WbL], TEAL, WH);
|
|
619
|
+
F([C0, MlR, WfR], TEAL, WH); F([WfR, MlR, WR], TEAL, WH); F([C0, WbR, MlR], TEAL, WH); F([MlR, WbR, WR], TEAL, WH);
|
|
620
|
+
// rotor posts + paper blades at wingtips
|
|
621
|
+
[WL, WR].forEach((wt, i) => {
|
|
622
|
+
const base = add(wt, [0.05, -0.02, i ? -0.08 : 0.08]);
|
|
623
|
+
const top = add(base, [0, 0.2, 0]);
|
|
624
|
+
F([add(base, [-0.025, 0, 0]), add(base, [0.025, 0, 0]), add(top, [0.025, 0, 0]), add(top, [-0.025, 0, 0])], [240, 182, 68], null);
|
|
625
|
+
const a = t * 22 + i * 1.1;
|
|
626
|
+
for (let b = 0; b < 2; b++) {
|
|
627
|
+
const aa = a + b * Math.PI, d = [Math.cos(aa), 0, Math.sin(aa)], pp = [-Math.sin(aa), 0, Math.cos(aa)];
|
|
628
|
+
const L = 0.4, w = 0.06;
|
|
629
|
+
F([add(top, mul(pp, -w * 0.4)), add(add(top, mul(d, L)), add(mul(pp, -w), [0, 0.03, 0])), add(add(top, mul(d, L)), add(mul(pp, w), [0, -0.03, 0])), add(top, mul(pp, w * 0.4))], [246, 242, 234], null);
|
|
630
|
+
}
|
|
631
|
+
rotorDiscs.push(Array.from({ length: 28 }, (_, k) => { const a2 = (k / 28) * TAU; return tr(add(top, [Math.cos(a2) * 0.42, 0.005, Math.sin(a2) * 0.42])); }));
|
|
632
|
+
});
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
// ---------- pre-creased square sheet lying on the table ----------
|
|
636
|
+
{
|
|
637
|
+
const tr = (p) => add(rotY(p, 0.5), [1.75, 0, 2.55]);
|
|
638
|
+
const s0 = 0.78, Y = (v) => 0.004 + v;
|
|
639
|
+
const C = [0, Y(0.05), 0];
|
|
640
|
+
const P = [[-s0, Y(0), -s0], [0, Y(0.018), -s0], [s0, Y(0), -s0], [s0, Y(0.018), 0], [s0, Y(0), s0], [0, Y(0.018), s0], [-s0, Y(0), s0], [-s0, Y(0.018), 0]];
|
|
641
|
+
const IN = [[-s0 / 2, Y(0.03), -s0 / 2], [s0 / 2, Y(0.03), -s0 / 2], [s0 / 2, Y(0.03), s0 / 2], [-s0 / 2, Y(0.03), s0 / 2]];
|
|
642
|
+
const PAP = [244, 214, 120];
|
|
643
|
+
for (let k = 0; k < 4; k++) {
|
|
644
|
+
const c0 = P[k * 2], m = P[k * 2 + 1], c1 = P[(k * 2 + 2) % 8], i0 = IN[k], i1 = IN[(k + 1) % 4], mprev = P[(k * 2 + 7) % 8];
|
|
645
|
+
addFace([c0, m, i0].map(tr), PAP, null, { obj: 'sheet' });
|
|
646
|
+
addFace([m, i1, i0].map(tr), PAP, null, { obj: 'sheet' });
|
|
647
|
+
addFace([m, c1, i1].map(tr), PAP, null, { obj: 'sheet' });
|
|
648
|
+
addFace([i0, i1, C].map(tr), PAP, null, { obj: 'sheet' });
|
|
649
|
+
addFace([mprev, c0, i0].map(tr), PAP, null, { obj: 'sheet' });
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
// ---------- tent card (title) ----------
|
|
654
|
+
let cardFront;
|
|
655
|
+
{
|
|
656
|
+
const tr = (p) => add(rotY(p, 0.2), [-2.7, 0, 2.7]);
|
|
657
|
+
const w = 1.3, h = 0.86, dz = 0.36;
|
|
658
|
+
const BLf = [-w, 0, dz], BRf = [w, 0, dz], TRr = [w, h, 0], TLr = [-w, h, 0], BLb = [-w, 0, -dz], BRb = [w, 0, -dz];
|
|
659
|
+
addFace([TLr, TRr, BRb, BLb].map(tr), [236, 231, 220], null, { obj: 'card' });
|
|
660
|
+
addFace([BLf, BRf, TRr, TLr].map(tr), [248, 245, 238], null, { obj: 'card', card: true });
|
|
661
|
+
cardFront = [TLr, TRr, BLf].map(tr);
|
|
662
|
+
faces[faces.length - 1].cardIdx = true;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
// ---------- fold-up build: every model starts as a flat sheet on the table and folds up crease by crease ----------
|
|
666
|
+
{
|
|
667
|
+
const AN = { sheet: [0.0, 0.45], card: [0.1, 0.8], brain: [0.3, 1.6], rocket: [0.8, 1.4], crane: [1.4, 1.6] };
|
|
668
|
+
const bounds = {};
|
|
669
|
+
faces.forEach((f) => f.pts.forEach((p) => {
|
|
670
|
+
const b = bounds[f.obj] || (bounds[f.obj] = { minY: 1e9, maxY: -1e9, sx: 0, sz: 0, n: 0 });
|
|
671
|
+
b.minY = Math.min(b.minY, p[1]); b.maxY = Math.max(b.maxY, p[1]); b.sx += p[0]; b.sz += p[2]; b.n++;
|
|
672
|
+
}));
|
|
673
|
+
const backOut = (u) => { const c1 = 1.4, c3 = c1 + 1; return 1 + c3 * Math.pow(u - 1, 3) + c1 * Math.pow(u - 1, 2); };
|
|
674
|
+
const cache = new Map();
|
|
675
|
+
const animV = (p, obj) => {
|
|
676
|
+
const key = obj + p[0] + ',' + p[1] + ',' + p[2];
|
|
677
|
+
if (cache.has(key)) return cache.get(key);
|
|
678
|
+
const [st, du] = AN[obj], b = bounds[obj], cx = b.sx / b.n, cz = b.sz / b.n;
|
|
679
|
+
let out;
|
|
680
|
+
if (obj === 'sheet') {
|
|
681
|
+
const u = H.clamp((t - st) / du), e = H.ease.out(u);
|
|
682
|
+
out = [p[0] - (1 - e) * 0.6, p[1] + (1 - e) * 2.2, p[2] + (1 - e) * 0.4];
|
|
683
|
+
} else {
|
|
684
|
+
const dx = p[0] - cx, dz = p[2] - cz, hd = Math.hypot(dx, dz) || 1;
|
|
685
|
+
const hn = obj === 'crane' ? H.clamp(hd / 1.8) : (p[1] - b.minY) / (b.maxY - b.minY + 1e-6);
|
|
686
|
+
const u = H.clamp((t - st - du * 0.45 * hn) / (du * 0.55));
|
|
687
|
+
const e = backOut(u);
|
|
688
|
+
const spread = (p[1] - b.minY) * 0.55;
|
|
689
|
+
const flat = [cx + dx * 1.05 + (dx / hd) * spread, 0.006 + hn * 0.004, cz + dz * 1.05 + (dz / hd) * spread];
|
|
690
|
+
out = [H.lerp(flat[0], p[0], e), H.lerp(flat[1], p[1], e), H.lerp(flat[2], p[2], e)];
|
|
691
|
+
}
|
|
692
|
+
cache.set(key, out);
|
|
693
|
+
return out;
|
|
694
|
+
};
|
|
695
|
+
faces.forEach((f) => { if (f.obj && AN[f.obj]) f.pts = f.pts.map((p) => animV(p, f.obj)); });
|
|
696
|
+
// card lettering follows the folding card
|
|
697
|
+
const cf = faces.find((f) => f.cardIdx);
|
|
698
|
+
if (cf) cardFront = [cf.pts[3], cf.pts[2], cf.pts[0]];
|
|
699
|
+
// rotor blur only once the crane is airborne
|
|
700
|
+
if (t < AN.crane[0] + AN.crane[1]) rotorDiscs.length = 0;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
// ---------- crease map: valley vs mountain folds ----------
|
|
704
|
+
const ek = (p) => p[0].toFixed(3) + ',' + p[1].toFixed(3) + ',' + p[2].toFixed(3);
|
|
705
|
+
const edges = new Map();
|
|
706
|
+
faces.forEach((f, fi) => f.pts.forEach((p, i) => {
|
|
707
|
+
const q = f.pts[(i + 1) % f.pts.length], k = [ek(p), ek(q)].sort().join('|');
|
|
708
|
+
if (!edges.has(k)) edges.set(k, []);
|
|
709
|
+
edges.get(k).push(fi);
|
|
710
|
+
}));
|
|
711
|
+
// ---------- shade + sort faces ----------
|
|
712
|
+
faces.forEach((f) => {
|
|
713
|
+
const [a, b, c] = f.pts;
|
|
714
|
+
let n = norm(cross(sub(b, a), sub(c, a)));
|
|
715
|
+
const cen = mul(f.pts.reduce((s, p) => add(s, p), [0, 0, 0]), 1 / f.pts.length);
|
|
716
|
+
const v = norm(sub(E, cen));
|
|
717
|
+
let side = 0;
|
|
718
|
+
if (dot(n, v) < 0) { n = mul(n, -1); side = 1; }
|
|
719
|
+
const base = f.under && n[1] < -0.08 ? f.under : f.col;
|
|
720
|
+
const diff = Math.max(0, dot(n, Lkey)), fill = Math.max(0, dot(n, Lfill)), bounce = Math.max(0, -n[1]);
|
|
721
|
+
const I = 0.36 + 0.7 * diff + 0.16 * fill + 0.1 * bounce;
|
|
722
|
+
const warm = [1.04, 1.0, 0.95];
|
|
723
|
+
f.rgb = base.map((ch, i) => Math.min(255, ch * I * warm[i]));
|
|
724
|
+
f.I = I; f.n = n;
|
|
725
|
+
f.sp = f.pts.map(proj);
|
|
726
|
+
f.z = f.sp.reduce((s, p) => s + p[2], 0) / f.sp.length;
|
|
727
|
+
});
|
|
728
|
+
faces.forEach((f, fi) => {
|
|
729
|
+
const cen = mul(f.pts.reduce((s2, p) => add(s2, p), [0, 0, 0]), 1 / f.pts.length);
|
|
730
|
+
f.cen = cen;
|
|
731
|
+
});
|
|
732
|
+
faces.forEach((f, fi) => {
|
|
733
|
+
f.ekind = f.pts.map((p, i) => {
|
|
734
|
+
const q = f.pts[(i + 1) % f.pts.length], k = [ek(p), ek(q)].sort().join('|');
|
|
735
|
+
const fs = edges.get(k);
|
|
736
|
+
if (!fs || fs.length < 2) return 0;
|
|
737
|
+
const g = faces[fs[0] === fi ? fs[1] : fs[0]];
|
|
738
|
+
const d = dot(sub(g.cen, f.cen), f.n);
|
|
739
|
+
return d > 0.004 ? -1 : d < -0.004 ? 1 : 0; // -1 valley, 1 mountain
|
|
740
|
+
});
|
|
741
|
+
});
|
|
742
|
+
faces.sort((a, b) => b.z - a.z);
|
|
743
|
+
|
|
744
|
+
// ---------- backdrop: seamless paper sweep ----------
|
|
745
|
+
const tex = makeTex(5);
|
|
746
|
+
const pat = ctx.createPattern(tex, 'repeat');
|
|
747
|
+
const bg = ctx.createLinearGradient(0, 0, 0, H_);
|
|
748
|
+
bg.addColorStop(0, '#c9d3cf'); bg.addColorStop(0.45, '#dde3de'); bg.addColorStop(0.62, '#e6e6de'); bg.addColorStop(1, '#d8d5ca');
|
|
749
|
+
ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H_);
|
|
750
|
+
const spot = ctx.createRadialGradient(520, 330, 40, 560, 380, 760);
|
|
751
|
+
spot.addColorStop(0, 'rgba(255,252,240,0.65)'); spot.addColorStop(1, 'rgba(255,252,240,0)');
|
|
752
|
+
ctx.fillStyle = spot; ctx.fillRect(0, 0, W, H_);
|
|
753
|
+
ctx.save(); ctx.globalAlpha = 0.6; ctx.fillStyle = pat; ctx.fillRect(0, 0, W, H_); ctx.restore();
|
|
754
|
+
|
|
755
|
+
// ---------- shadows on the table ----------
|
|
756
|
+
const shadowPt = (p) => proj(add(p, mul(Ls, p[1] / -Ls[1])));
|
|
757
|
+
const SL = H.layer(W, H_), sc = SL.getContext('2d');
|
|
758
|
+
sc.fillStyle = '#000';
|
|
759
|
+
faces.forEach((f) => { sc.beginPath(); f.pts.forEach((p, i) => { const s = shadowPt(p); i ? sc.lineTo(s[0], s[1]) : sc.moveTo(s[0], s[1]); }); sc.closePath(); sc.fill(); });
|
|
760
|
+
ctx.save(); ctx.globalCompositeOperation = 'multiply'; ctx.filter = 'blur(16px)'; ctx.globalAlpha = 0.42; ctx.drawImage(SL, 0, 0); ctx.restore();
|
|
761
|
+
// contact shadow (occlusion) where paper meets table
|
|
762
|
+
const CL = H.layer(W, H_), cc = CL.getContext('2d');
|
|
763
|
+
cc.fillStyle = '#000';
|
|
764
|
+
faces.forEach((f) => {
|
|
765
|
+
if (f.obj === 'crane' || !f.obj) return;
|
|
766
|
+
if (Math.min(...f.pts.map((p) => p[1])) > 0.22) return;
|
|
767
|
+
cc.beginPath(); f.pts.forEach((p, i) => { const s = proj([p[0], 0, p[2]]); i ? cc.lineTo(s[0], s[1]) : cc.moveTo(s[0], s[1]); }); cc.closePath(); cc.fill();
|
|
768
|
+
});
|
|
769
|
+
ctx.save(); ctx.globalCompositeOperation = 'multiply'; ctx.filter = 'blur(5px)'; ctx.globalAlpha = 0.6; ctx.drawImage(CL, 0, 0); ctx.restore();
|
|
770
|
+
|
|
771
|
+
// ---------- draw paper facets ----------
|
|
772
|
+
const OL = H.layer(W, H_), o = OL.getContext('2d');
|
|
773
|
+
o.lineJoin = 'round';
|
|
774
|
+
const Lscr = [-0.6, -0.8];
|
|
775
|
+
faces.forEach((f) => {
|
|
776
|
+
const sp = f.sp;
|
|
777
|
+
const path = () => { o.beginPath(); sp.forEach((p, i) => (i ? o.lineTo(p[0], p[1]) : o.moveTo(p[0], p[1]))); o.closePath(); };
|
|
778
|
+
let mnx = 1e9, mxx = -1e9, mny = 1e9, mxy = -1e9;
|
|
779
|
+
sp.forEach((p) => { mnx = Math.min(mnx, p[0]); mxx = Math.max(mxx, p[0]); mny = Math.min(mny, p[1]); mxy = Math.max(mxy, p[1]); });
|
|
780
|
+
const cx = (mnx + mxx) / 2, cy = (mny + mxy) / 2, rr = Math.max(mxx - mnx, mxy - mny) / 2;
|
|
781
|
+
const g = o.createLinearGradient(cx + Lscr[0] * rr, cy + Lscr[1] * rr, cx - Lscr[0] * rr, cy - Lscr[1] * rr);
|
|
782
|
+
const c1 = f.rgb.map((v) => Math.min(255, v * 1.05)), c2 = f.rgb.map((v) => v * 0.94);
|
|
783
|
+
g.addColorStop(0, H.rgba(c1, 1)); g.addColorStop(1, H.rgba(c2, 1));
|
|
784
|
+
path(); o.fillStyle = g; o.fill();
|
|
785
|
+
o.strokeStyle = H.rgba(f.rgb, 1); o.lineWidth = 0.7; o.stroke();
|
|
786
|
+
// crisp crease: lit edge highlight + faint dark fold line
|
|
787
|
+
o.strokeStyle = `rgba(255,255,250,${0.05 + 0.08 * Math.min(1, f.I)})`; o.lineWidth = 0.6; o.stroke();
|
|
788
|
+
// crisp creases: dark valley folds, lit mountain folds
|
|
789
|
+
sp.forEach((p, i) => {
|
|
790
|
+
const k = f.ekind[i]; if (!k) return;
|
|
791
|
+
const q = sp[(i + 1) % sp.length];
|
|
792
|
+
o.beginPath(); o.moveTo(p[0], p[1]); o.lineTo(q[0], q[1]);
|
|
793
|
+
if (k < 0) { o.strokeStyle = H.rgba(f.rgb.map((v) => v * 0.55), 0.55); o.lineWidth = 0.9; }
|
|
794
|
+
else { o.strokeStyle = `rgba(255,250,242,${0.1 + 0.2 * H.clamp(f.I - 0.5)})`; o.lineWidth = 0.8; }
|
|
795
|
+
o.stroke();
|
|
796
|
+
});
|
|
797
|
+
});
|
|
798
|
+
// printed lettering on the tent card front (affine-mapped)
|
|
799
|
+
{
|
|
800
|
+
const [p0, p1, p3] = cardFront.map(proj);
|
|
801
|
+
const cw = 400, ch = 130;
|
|
802
|
+
o.save();
|
|
803
|
+
o.setTransform((p1[0] - p0[0]) / cw, (p1[1] - p0[1]) / cw, (p3[0] - p0[0]) / ch, (p3[1] - p0[1]) / ch, p0[0], p0[1]);
|
|
804
|
+
o.fillStyle = '#23242a'; o.font = '700 46px "Space Grotesk"'; o.textAlign = 'center'; o.textBaseline = 'middle';
|
|
805
|
+
o.fillText('THINK IN FOLDS', cw / 2, ch * 0.44);
|
|
806
|
+
o.fillStyle = '#e45a3e'; o.fillRect(cw / 2 - 30, ch * 0.72, 60, 5);
|
|
807
|
+
o.font = '400 17px "Space Mono"'; o.fillStyle = '#6a6a70';
|
|
808
|
+
o.fillText('AI · EP. 07', cw / 2, ch * 0.86);
|
|
809
|
+
o.restore();
|
|
810
|
+
}
|
|
811
|
+
// paper fibre texture on all folded paper
|
|
812
|
+
o.save(); o.globalCompositeOperation = 'source-atop'; o.globalAlpha = 0.9; o.fillStyle = pat; o.fillRect(0, 0, W, H_); o.restore();
|
|
813
|
+
ctx.drawImage(OL, 0, 0);
|
|
814
|
+
|
|
815
|
+
// rotor motion blur discs
|
|
816
|
+
rotorDiscs.forEach((ring) => {
|
|
817
|
+
const sp = ring.map(proj);
|
|
818
|
+
ctx.save(); ctx.beginPath(); sp.forEach((p, i) => (i ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1]))); ctx.closePath();
|
|
819
|
+
ctx.fillStyle = 'rgba(255,255,250,0.16)'; ctx.fill();
|
|
820
|
+
ctx.strokeStyle = 'rgba(255,255,250,0.28)'; ctx.lineWidth = 1; ctx.stroke(); ctx.restore();
|
|
821
|
+
});
|
|
822
|
+
|
|
823
|
+
// ---------- studio finish ----------
|
|
824
|
+
H.vignette(ctx, W, H_, 0.28, '30,40,40');
|
|
825
|
+
H.grain(ctx, W, H_, 0.025, 3 + Math.floor(t * 24));
|
|
826
|
+
},
|
|
827
|
+
});
|
|
828
|
+
}
|