Georg/ai.interactive.fiction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Checkpoint book shape task 2

Browse Source
This commit is contained in:
Georg Tomitsch
2026-06-05 14:37:22 +02:00
parent 139086917e
commit a92822bc44
2 changed files with 79 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/webgl-book-shape-lab.js
+78 -13
View File
@@ -17,6 +17,8 @@ const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.setClearColor(0x202124, 1);
const GRID_Y = -0.12;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(34, 1, 0.1, 30);
if (urlParams.get('view') === 'profile') {
@@ -38,7 +40,7 @@ const book = new THREE.Group();
scene.add(book);
const guide = new THREE.GridHelper(5.6, 16, 0x4c4c4c, 0x343434);
guide.position.y = -0.12;
guide.position.y = GRID_Y;
scene.add(guide);
const materials = {
@@ -60,6 +62,8 @@ const BOOK_PROFILE = {
singlePageCoverGap: 0.006,
bundleSpacing: 0.014
};
book.position.y = GRID_Y - BOOK_PROFILE.tableY;
const NORMAL_FLIP_DURATION = 1800;
const FAST_FLIP_DURATION = 900;
const FAST_FLIP_COUNT = 10;
@@ -74,7 +78,6 @@ const PAGE_DEPTH = 2.24;
const COVER_DEPTH = 2.30;
const COVER_OVERHANG = (COVER_DEPTH - PAGE_DEPTH) * 0.5;
const COVER_SUPPORT_OVERHANG = COVER_OVERHANG;
const HINGE_INSET = 0.07;
const SUPPORT_ANGLE_STEPS = 720;
const SUPPORT_ANGLE_CANDIDATES = Array.from({ length: SUPPORT_ANGLE_STEPS }, (_, sample) => {
const angle = sample / SUPPORT_ANGLE_STEPS * Math.PI * 2;
@@ -93,6 +96,7 @@ let lastLengthError = 0;
let lastSpacingError = 0;
let lastBookModel = null;
let activeSpineHalf = 0.08;
let activeCoverOuterX = activeSpineHalf + PAGE_WIDTH + COVER_OVERHANG;
let activeFlips = [];
let pendingPageFlips = 0;
pageCountInput.max = String(maximumPageCount);
@@ -144,6 +148,25 @@ window.BookShapeLab = {
get lastSpacingError() {
return lastSpacingError;
},
get pageMetrics() {
return visiblePageMetrics();
},
get frameMetrics() {
if (!lastBookModel) return null;
return {
spineHalf: spineArcHalf(lastBookModel.spineWidth),
hingeWidth: hingeInset(),
hingeHeight: BOOK_PROFILE.raisedHingeY - BOOK_PROFILE.coverThickness,
pageWidth: lastBookModel.pageWidth,
pageDepth: lastBookModel.pageDepth,
coverDepth: lastBookModel.coverDepth,
coverOuterX: lastBookModel.coverOuterX,
solvedStackOuterX: solvedStackOuterX(lastBookModel.lines),
coverWidthOverhang: COVER_OVERHANG,
actualCoverWidthOverhang: lastBookModel.coverOuterX - solvedStackOuterX(lastBookModel.lines),
coverDepthOverhang: (lastBookModel.coverDepth - lastBookModel.pageDepth) * 0.5
};
},
setReadingProgress(value) {
setReadingProgress(value);
return readingProgress;
@@ -166,6 +189,29 @@ window.BookShapeLab = {
}
};
function visiblePageMetrics() {
if (!lastBookModel) return null;
const result = {};
[-1, 1].forEach((side) => {
const line = topVisibleLine(side);
if (!line) return;
let pathLength = 0;
for (let index = 0; index < line.points.length - 1; index += 1) {
pathLength += Math.hypot(line.points[index + 1].x - line.points[index].x, line.points[index + 1].y - line.points[index].y);
}
result[side < 0 ? 'left' : 'right'] = {
anchorX: line.anchor.x,
anchorY: line.anchor.y,
endpointX: line.endpoint.x,
endpointY: line.endpoint.y,
xSpan: Math.abs(line.endpoint.x - line.anchor.x),
ySpan: Math.abs(line.endpoint.y - line.anchor.y),
pathLength
};
});
return result;
}
function readInitialProgress() {
const parsed = Number.parseFloat(urlParams.get('progress') ?? '0.25');
return Number.isFinite(parsed) ? THREE.MathUtils.clamp(parsed, 0, 1) : 0.25;
@@ -216,16 +262,19 @@ function rebuildBook() {
const spineWidth = calculateSpineWidth(bundleCount);
const leftCount = calculateLeftBundleCount(bundleCount);
const spineHalf = spineArcHalf(spineWidth);
const hingeX = spineHalf + HINGE_INSET;
const hingeX = spineHalf + hingeInset();
const foreEdgeX = spineHalf + pageWidth;
const bundleSpacing = calculateBundleSpacing(bundleCount, spineWidth, leftCount);
activeSpineHalf = spineHalf;
activeCoverOuterX = spineHalf + pageWidth + COVER_OVERHANG;
const lines = simulatePageLines(bundleCount, pageWidth, pageSplineLength, spineWidth, foreEdgeX, bundleSpacing, leftCount);
const coverOuterX = solvedStackOuterX(lines) + COVER_OVERHANG;
activeCoverOuterX = coverOuterX;
lastLengthError = measureLineLengthError(lines, pageSplineLength);
lastSpacingError = measureStackSpacingError(lines, bundleSpacing);
lastBookModel = { coverDepth, pageWidth, pageSplineLength, pageDepth, bundleCount, spineWidth, hingeX, foreEdgeX, bundleSpacing, lines };
lastBookModel = { coverDepth, pageWidth, pageSplineLength, pageDepth, bundleCount, spineWidth, hingeX, foreEdgeX, coverOuterX, bundleSpacing, lines };
addCoverAssembly(pageWidth, coverDepth, coverThickness, spineWidth);
addCoverAssembly(pageWidth, coverDepth, coverThickness, spineWidth, coverOuterX);
addClothSpine(pageDepth, spineWidth);
addSimulatedStackBodies(lines, pageDepth);
updateFlipControls();
@@ -241,15 +290,15 @@ function clearGroup(group) {
}
}
function addCoverAssembly(pageWidth, depth, thickness, spineWidth) {
const cover = new THREE.Mesh(createCoverAssemblyGeometry(pageWidth, depth, thickness, spineWidth), materials.cover);
function addCoverAssembly(pageWidth, depth, thickness, spineWidth, coverOuterX) {
const cover = new THREE.Mesh(createCoverAssemblyGeometry(pageWidth, depth, thickness, spineWidth, coverOuterX), materials.cover);
book.add(cover);
}
function createCoverAssemblyGeometry(pageWidth, depth, thickness, spineWidth) {
function createCoverAssemblyGeometry(pageWidth, depth, thickness, spineWidth, coverOuterX) {
const spineHalf = spineArcHalf(spineWidth);
const hingeX = spineHalf + HINGE_INSET;
const outerX = spineHalf + pageWidth + COVER_OVERHANG;
const hingeX = spineHalf + hingeInset();
const outerX = coverOuterX ?? spineHalf + pageWidth + COVER_OVERHANG;
const outerTopY = BOOK_PROFILE.tableY + thickness;
const connectionTopY = BOOK_PROFILE.raisedHingeY;
const spineTopY = BOOK_PROFILE.tableY + thickness;
@@ -356,6 +405,10 @@ function spineArcHalf(spineWidth) {
return spineWidth * 0.42;
}
function hingeInset() {
return Math.max(0.001, BOOK_PROFILE.raisedHingeY - BOOK_PROFILE.coverThickness);
}
function calculateSpineWidth(bundleCount) {
const minimumWidth = 0.16;
if (bundleCount <= 1) return minimumWidth;
@@ -421,6 +474,12 @@ function calculateLeftBundleCount(bundleCount) {
return THREE.MathUtils.clamp(Math.round(bundleCount * readingProgress), 0, bundleCount);
}
function solvedStackOuterX(lines) {
return lines.reduce((outer, line) => {
return line.points.reduce((lineOuter, point) => Math.max(lineOuter, Math.abs(point.x)), outer);
}, 0);
}
function simulatePageLines(bundleCount, pageWidth, pageSplineLength, spineWidth, foreEdgeX, bundleSpacing, leftCount) {
const lines = [];
const segments = PAGE_LINE_SEGMENTS;
@@ -836,8 +895,8 @@ function upwardNormalAt(points, index) {
function coverTopYAtX(x) {
const ax = Math.abs(x);
const spineHalf = currentSpineHalf();
const hingeX = spineHalf + HINGE_INSET;
const outerX = spineHalf + PAGE_WIDTH + COVER_SUPPORT_OVERHANG;
const hingeX = spineHalf + hingeInset();
const outerX = activeCoverOuterX;
if (ax <= spineHalf) return BOOK_PROFILE.coverThickness;
if (ax <= hingeX) {
const t = (ax - spineHalf) / (hingeX - spineHalf);
@@ -969,6 +1028,11 @@ function createLoftedLineBody(lines, depth) {
indices.push(frontA, frontB, backA);
indices.push(frontB, backB, backA);
}
const bottomStart = indices.length;
for (let col = 0; col < smoothLines[0].length - 1; col += 1) {
indices.push(front[0][col], front[0][col + 1], back[0][col]);
indices.push(front[0][col + 1], back[0][col + 1], back[0][col]);
}
const topStart = indices.length;
for (let col = 0; col < smoothLines[0].length - 1; col += 1) {
const topRow = smoothLines.length - 1;
@@ -981,7 +1045,8 @@ function createLoftedLineBody(lines, depth) {
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
geometry.clearGroups();
geometry.addGroup(0, sideStart, 0);
geometry.addGroup(sideStart, topStart - sideStart, 1);
geometry.addGroup(sideStart, bottomStart - sideStart, 1);
geometry.addGroup(bottomStart, topStart - bottomStart, 2);
geometry.addGroup(topStart, indices.length - topStart, 2);
geometry.computeVertexNormals();
return geometry;
public/webgl-book-shape-lab.html
+1 -1
View File
@@ -74,6 +74,6 @@
<button id="fast_forward" type="button">Fast Forward</button>
<output id="flip_count">0 / 10</output>
</div>
<script type="module" src="/js/webgl-book-shape-lab.js?v=cover-overhang-1"></script>
<script type="module" src="/js/webgl-book-shape-lab.js?v=task2-grid-aligned-1"></script>
</body>
</html>