[{"_1":2,"_185":-5,"_186":-5},"loaderData",{"_3":4,"_58":59,"_184":-5},"root",{"_5":6,"_19":-5,"_20":-5,"_21":22,"_39":-5,"_40":-5,"_41":-5,"_42":43,"_54":55,"_56":57},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18},"SUPABASE_URL","https://hello.websim.com","SUPABASE_KEY","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9jamVmZ2NqamlxeWt3YWR2dnJkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTE4MzI5OTMsImV4cCI6MjAyNzQwODk5M30.vsreOYwk8pKsr8NFlzpIzWAiD-vXj6ijv_Bhn1vYtHs","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","GOOGLE_OAUTH_CLIENT_ID","891181648870-i708rj1bgjol84hie20shfr4u4ecf3o7.apps.googleusercontent.com","authUser","user","snapshotData",{"_23":-5,"_24":-5,"_25":-5,"_26":-5,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5,"_33":-5,"_34":-5,"_35":-5,"_36":-5,"_37":-5,"_38":-5},"lastProjectId","sidebarTab","homepageTab","pinSidebar","settingsOpen","maximized","assetsExpanded","focusedAssetFilename","authError","authErrorCode","authErrorDescription","sidebarWidth","videoMuted","videoVolume","navigationContext","hasSeenFeedOnboarding","plan","balances","rewards","origins",{"_44":45,"_46":47,"_48":49,"_50":51,"_52":53},"origin","https://websim.com","apiOrigin","https://api.websim.com","contentOrigin","https://{PROJECT_ID}.c.websim.com","appDomainOrigin","https://{SUBDOMAIN}.on.websim.com","generationOrigin","https://generation.websim.com/rivet","isMobile",false,"theme","auto","slug",{"_60":61,"_62":63,"_123":124,"_144":145,"_179":180,"_181":-5,"_182":183},"version","1","project",{"_64":62,"_65":66,"_67":68,"_69":70,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":97,"_98":99,"_58":106,"_107":97,"_108":55,"_109":110,"_111":-5,"_112":-5,"_113":114,"_115":116,"_121":-5,"_122":55},"_type","id","3qnzce6fprvztk8n4fx5","created_at","2026-07-06T05:10:20.325Z","created_by",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":78,"_79":80,"_81":55},"63645553-4097-4542-bd80-d3add1e9e8b6","username","RaymondDukes706","2024-06-29T04:25:46.367Z","avatar_url","https://avatars.websim.ai/63645553-4097-4542-bd80-d3add1e9e8b6/fjPZFxGSJNNqXYIGg.webp","discord_username","raymonddukes7066873","discord_id","1008189550197219440","is_admin","updated_at","2026-07-06T06:38:58.119Z","title","Fold Horizon WebSim","comments_mode","open","visibility","public","current_version",1,"last_posted_version","parent_id","parent_version","deleted_at","posted",true,"stats",{"_100":101,"_102":66,"_103":91,"_104":91,"_105":91},"~type","project_stats","project_id","views","likes","comments","fold-horizon","auto_set_current","enable_chat","description","A re-implementation of “Fold horizon” by Rubén Medellín \nhttps://openprocessing.org/@chubas/2904633\nLicense Creative Commons Attribution NonCommercial ShareAlike\nhttps://creativecommons.org/licenses/by-nc-sa/3.0","generated_description","from_template","domains",[],"thumbnail",{"_117":118,"_119":120},"moderation_state","ok","url","https://project-screenshots.websim.com/019f3626-bed2-7177-8dd2-23cf182ec247","video","has_active_experiment","project_revision",{"_64":123,"_65":125,"_60":91,"_67":126,"_127":-5,"_93":-5,"_128":-5,"_129":-5,"_69":130,"_131":132,"_102":66,"_82":133,"_95":-5,"_98":134,"_137":55,"_138":139,"_140":-5,"_141":-5,"_142":143},"019f35d5-a12b-73da-a5a8-0b07bbee11fb","2026-07-06T05:10:20.715Z","visited_at","parent_revision_version","parent_revision_project_id",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":78,"_79":80,"_81":55},"meta",{"_60":61},"2026-07-06T06:38:58.204Z",{"_135":136},"multiplayer_count",0,"draft","site_id","DA8q80xSnhkBInzhj","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/019f35d6-f93a-7500-86a2-97929d066ed5","site",{"_64":144,"_65":139,"_93":-5,"_67":146,"_147":148,"_149":150,"_151":152,"_84":164,"_165":166,"_167":168,"_119":-5,"_173":174,"_175":176,"_95":-5,"_177":178},"2026-07-06T05:10:25.762Z","state","done","model","gpt-5-mini","lore",{"_60":91,"_153":154,"_155":55,"_156":55,"_157":55,"_158":97,"_159":55,"_160":55,"_161":55,"_162":55,"_163":55},"attachments",[],"enableMultiplayer_v2","enableMobilePrompt","enableDB","enableLLM2","enableComments","enableVideo","enableApi","enableTweaks","enableDB_v2_1","","owner",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":78,"_79":80,"_81":55},"prompt",{"_169":170,"_171":172},"type","plaintext","text","// \"Fold horizon\". For the #WCCChallenge «Cube» (join the discord! https://discord.gg/S8c7qcjw2b)\n\n/*\n * During the research, I came across with the concept of the cube net https://en.wikipedia.org/wiki/Net_(polyhedron)\n * There are 11 possible cube nets (accounting for rotations and reflections).\n * It is also possible to tile the plane with these, so the idea came to start with a tiled plane and then fold\n * the nets into a cube at certain point.\n * The interesting part was to piece this all together. I created a few sketches for the individual pieces, and then\n * combined them into this final sketch (all with the help of the AI). I may write a post about this process.\n * Sketch collection for the curious https://editor.p5js.org/ruben.medellin.c/collections/Jf5gKq-l_\n */\nconst CUBE_NET_TILES = [\n [[3, -1], [4, -1], [5, -1], [1, 0], [2, 0], [3, 0]],\n [[4, 0], [1, 1], [2, 1], [3, 1], [4, 1], [4, 2]],\n [[5, 0], [6, 0], [5, 1], [5, 2], [4, 3], [5, 3]],\n [[0, 1], [0, 2], [1, 2], [2, 2], [3, 2], [1, 3]],\n [[0, 3], [-1, 4], [0, 4], [1, 4], [0, 5], [0, 6]],\n [[2, 3], [2, 4], [1, 5], [2, 5], [3, 5], [3, 6]],\n [[3, 3], [3, 4], [4, 4], [4, 5], [5, 5], [5, 6]],\n [[1, 6], [2, 6], [-1, 7], [0, 7], [1, 7], [0, 8]],\n [[1, 8], [-1, 9], [0, 9], [1, 9], [2, 9], [-1, 10]],\n [[2, 7], [2, 8], [3, 8], [3, 9], [3, 10], [4, 10]],\n [[4, 6], [3, 7], [4, 7], [4, 8], [5, 8], [4, 9]],\n];\n\nlet TILE_SIZE;\nconst ISO_ATAN = Math.atan(1 / Math.sqrt(2));\nconst SQRT6 = Math.sqrt(6);\nconst ORTHO_VIEW_ZOOM = 0.62;\nconst PERIOD_X = 6;\nconst PERIOD_Y = 11;\nconst ROW_STAGGER_I = 3;\nconst FOLD_DURATION_FRAMES = 100;\nconst FOLD_QUARTER_TURN = -Math.PI / 2;\nconst SCROLL_DRIFT = 0.052; // grid units / frame (one axis only)\nconst SCROLL_ALONG_WORLD_X = true; // true: +X / Gi; false: +Z / Gj\nconst CACHE_PRUNE_MARGIN = 56; // cells past visible range before cache eviction\n\nlet scrollGi = 0; // global grid origin (float); world x = (Gi - scrollGi) * TILE_SIZE\nlet scrollGj = 0;\n\n/** @type {Map} */\nconst foldStartByKey = new Map(); // frameCount when fold started; Map key = \"br,bc,k\"\n\nlet foldLineRef = 0; // scrollG* + foldLineK — crossing drives fold trigger\nlet foldLineK = 0; // viewport-derived; world line at foldLineK * TILE_SIZE on active axis\n/** false: flat before line → fold after; true: cube before line → unfold after — set in setup() */\nlet unfoldAfterLine = false;\nlet mirrorSceneX = false;\n/** Multiplies scroll (grid/frame) and fold rate; fold duration scales as 1/speed so the line stays in sync. */\nlet speed = 1;\n\nconst palettes = [\n [\"#9e0142\", \"#d53e4f\", \"#f46d43\", \"#fdae61\", \"#fee08b\", \"#ffffbf\", \"#e6f598\", \"#abdda4\", \"#66c2a5\", \"#3288bd\", \"#5e4fa2\"],\n [\"#026391\", \"#003f5c\", \"#2f4b7c\", \"#753058\", \"#665191\", \"#a05195\", \"#d45087\", \"#f95d6a\", \"#ff7c43\", \"#ffa600\", \"#ffc65b\"],\n [\"#f7f3e9\", \"#FFCE89\", \"#ddd5cb\", \"#c29fb3\", \"#265a85\", \"#3998B0\", \"#4cd5db\", \"#5b898f\", \"#db8447\", \"#ce2514\", \"#EC4734\"],\n ['#669900', '#99cc33', '#ccee66', '#006699', '#3399cc', '#baebff', '#990066', '#cc3399', '#ff6600', '#ff9900', '#ffcc00'],\n ['#26c5f3', '#0466c8', '#0353a4', '#023e7d', '#002855', '#001845', '#001233', '#38b000', '#70e000', '#9ef01a', '#ccff33'],\n ['#20331a', '#014737', '#03543f', '#046c4e', '#057a55', '#0e9f6e', '#31c48d', '#84e1bc', '#bcf0da', '#def7ec', '#f3faf7'],\n ['#264653', '#287271', '#2a9d8f', '#8ab17d', '#BABB74', '#e9c46a', '#efb366', '#f4a261', '#ee8959', '#e76f51', '#C3583D'],\n ['#f7d4c1', '#e5c2ad', '#d2af9a', '#c09d86', '#ad8b72', '#9b785e', '#88664b', '#765337', '#634123', '#A48268', '#553517'],\n\n];\n\nlet netFaceColors = [];\n\nconst netCacheMap = new Map();\n\n// ---------------------------------------------------------------------------\n// Lifecycle (p5)\n// ---------------------------------------------------------------------------\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight, WEBGL);\n netFaceColors = shuffle([...random(palettes)]);\n TILE_SIZE = random(30, 50);\n unfoldAfterLine = random() < 0.4;\n mirrorSceneX = random() < 0.4;\n speed = random(0.3, 1);\n debugResetFpsTimer();\n}\n\nfunction draw() {\n background('#202020');\n\n scale(mirrorSceneX ? -1 : 1, 1, 1);\n\n const scrollGiPrev = scrollGi;\n const scrollGjPrev = scrollGj;\n const speedSafe = Math.max(speed, 1e-6);\n const driftStep = SCROLL_DRIFT * speedSafe;\n const foldDurationEff = FOLD_DURATION_FRAMES / speedSafe;\n if (SCROLL_DRIFT !== 0) {\n if (SCROLL_ALONG_WORLD_X) scrollGi += driftStep;\n else scrollGj += driftStep;\n }\n\n const sceneOffsetY = (height * 40) / 600;\n const sY = orthoHalfExtent() * ORTHO_VIEW_ZOOM;\n const aspect = width / height;\n const orthoFar = Math.max(3000, sY * 5 + TILE_SIZE * 80);\n ortho(-sY * aspect, sY * aspect, -sY, sY, 0.1, orthoFar);\n\n noLights();\n translate(0, sceneOffsetY, 0);\n rotateX(-ISO_ATAN);\n rotateY(QUARTER_PI);\n\n const gridRange = getCandidateGlobalGridRange(scrollGi, scrollGj, TILE_SIZE, sY, aspect, sceneOffsetY);\n\n foldLineK = computeFoldLineK(sY, aspect, sceneOffsetY);\n foldLineRef = SCROLL_ALONG_WORLD_X ? scrollGi + foldLineK : scrollGj + foldLineK;\n const foldPrev = SCROLL_ALONG_WORLD_X ? scrollGiPrev + foldLineK : scrollGjPrev + foldLineK;\n\n debugLogFoldLineOnResize();\n\n pruneOffscreenNetCaches(gridRange);\n\n const brMin = Math.floor(gridRange.gjMin / PERIOD_Y) - 4;\n const brMax = Math.ceil(gridRange.gjMax / PERIOD_Y) + 4;\n\n for (let br = brMin; br <= brMax; br++) {\n const bcMin = Math.floor((gridRange.giMin - 20 - ROW_STAGGER_I * br) / PERIOD_X) - 3;\n const bcMax = Math.ceil((gridRange.giMax + 20 - ROW_STAGGER_I * br) / PERIOD_X) + 3;\n\n for (let bc = bcMin; bc <= bcMax; bc++) {\n for (let k = 0; k < CUBE_NET_TILES.length; k++) {\n const netKey = `${br},${bc},${k}`;\n const b = netCacheMap.get(netKey)?.globalBounds ?? netGlobalBounds(k, bc, br);\n if (\n b.maxGi < gridRange.giMin ||\n b.minGi > gridRange.giMax ||\n b.maxGj < gridRange.gjMin ||\n b.minGj > gridRange.gjMax\n ) {\n continue;\n }\n\n const { cache, baseI, baseJ } = getOrCreateNetSlot(br, bc, k, b);\n const [wb, hb] = blockOffsetFace(baseI, baseJ, bc, br);\n const wx = (wb - scrollGi) * TILE_SIZE;\n const wz = (hb - scrollGj) * TILE_SIZE;\n\n if (!isNetProjectedVisible(b, scrollGi, scrollGj, TILE_SIZE, sY, aspect, sceneOffsetY)) {\n continue;\n }\n\n const refAlong = SCROLL_ALONG_WORLD_X ? wb : hb;\n if (!foldStartByKey.has(netKey)) {\n if (foldPrev < refAlong && foldLineRef >= refAlong) {\n foldStartByKey.set(netKey, frameCount);\n } else if (foldLineRef >= refAlong) {\n // Past line on first record (e.g. after cache prune): map scroll distance → fold progress\n if (Math.abs(driftStep) > 1e-8) {\n const elapsed = (foldLineRef - refAlong) / driftStep;\n const clamped = Math.min(foldDurationEff, Math.max(0, elapsed));\n foldStartByKey.set(netKey, frameCount - Math.floor(clamped));\n } else {\n foldStartByKey.set(netKey, frameCount - Math.ceil(foldDurationEff) - 1);\n }\n }\n }\n\n const startF = foldStartByKey.get(netKey);\n let foldT;\n if (unfoldAfterLine) {\n if (startF === undefined) {\n foldT = foldLineRef < refAlong ? 1 : 0;\n } else {\n foldT = 1 - ease(Math.min(1, (frameCount - startF) / foldDurationEff));\n }\n } else if (startF === undefined) {\n foldT = 0;\n } else {\n foldT = ease(Math.min(1, (frameCount - startF) / foldDurationEff));\n }\n\n const faceHex = netFaceColors[k % netFaceColors.length];\n\n push();\n translate(wx, 0, wz);\n drawFoldedNet(cache, foldT, baseI, baseJ, faceHex);\n pop();\n }\n }\n }\n\n debugDrawFrame(gridRange);\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n\n// ---------------------------------------------------------------------------\n// Iso / camera (matches ortho-grid-screen-fill.js framing)\n// ---------------------------------------------------------------------------\n\nfunction orthoHalfExtent() {\n return (Math.min(width, height) * 220) / 600;\n}\n\nfunction projectIsoGround(x, z) {\n return { sx: (x + z) / Math.SQRT2, sy: (-x + z) / SQRT6 };\n}\n\nfunction unprojectIsoGround(sx, sy) {\n return {\n x: (sx * Math.SQRT2 - sy * SQRT6) / 2,\n z: (sx * Math.SQRT2 + sy * SQRT6) / 2,\n };\n}\n\nfunction getVisibleGroundQuad(sY, aspect, sceneOffsetY = 0) {\n const corners = [\n { sx: -sY * aspect, sy: -sY - sceneOffsetY },\n { sx: sY * aspect, sy: -sY - sceneOffsetY },\n { sx: sY * aspect, sy: sY - sceneOffsetY },\n { sx: -sY * aspect, sy: sY - sceneOffsetY },\n ];\n return corners.map((c) => unprojectIsoGround(c.sx, c.sy));\n}\n\nfunction computeFoldLineK(sY, aspect, sceneOffsetY) {\n const q = getVisibleGroundQuad(sY, aspect, sceneOffsetY);\n let ax = 0;\n let az = 0;\n for (const p of q) {\n ax += p.x;\n az += p.z;\n }\n ax /= 4;\n az /= 4;\n return SCROLL_ALONG_WORLD_X ? ax / TILE_SIZE : az / TILE_SIZE;\n}\n\nfunction getCandidateGlobalGridRange(scrollGi, scrollGj, tileSize, sY, aspect, sceneOffsetY) {\n const groundCorners = getVisibleGroundQuad(sY, aspect, sceneOffsetY);\n let minX = Infinity;\n let maxX = -Infinity;\n let minZ = Infinity;\n let maxZ = -Infinity;\n for (const p of groundCorners) {\n minX = Math.min(minX, p.x);\n maxX = Math.max(maxX, p.x);\n minZ = Math.min(minZ, p.z);\n maxZ = Math.max(maxZ, p.z);\n }\n const pad = 2;\n return {\n giMin: Math.floor(minX / tileSize + scrollGi) - pad,\n giMax: Math.ceil(maxX / tileSize + scrollGi) + pad,\n gjMin: Math.floor(minZ / tileSize + scrollGj) - pad,\n gjMax: Math.ceil(maxZ / tileSize + scrollGj) + pad,\n };\n}\n\n// ---------------------------------------------------------------------------\n// Visibility (screen-space overlap)\n// ---------------------------------------------------------------------------\n\nfunction tileProjectedBounds(i, j, tileSize) {\n const x0 = i * tileSize;\n const z0 = j * tileSize;\n const x1 = x0 + tileSize;\n const z1 = z0 + tileSize;\n const pts = [\n projectIsoGround(x0, z0),\n projectIsoGround(x1, z0),\n projectIsoGround(x1, z1),\n projectIsoGround(x0, z1),\n ];\n let minSX = Infinity;\n let maxSX = -Infinity;\n let minSY = Infinity;\n let maxSY = -Infinity;\n for (const p of pts) {\n minSX = Math.min(minSX, p.sx);\n maxSX = Math.max(maxSX, p.sx);\n minSY = Math.min(minSY, p.sy);\n maxSY = Math.max(maxSY, p.sy);\n }\n return { minSX, maxSX, minSY, maxSY };\n}\n\nfunction isTileVisible(i, j, tileSize, sY, aspect, sceneOffsetY = 0) {\n const tb = tileProjectedBounds(i, j, tileSize);\n const viewMinX = -sY * aspect;\n const viewMaxX = sY * aspect;\n const viewMinY = -sY - sceneOffsetY;\n const viewMaxY = sY - sceneOffsetY;\n return !(\n tb.maxSX < viewMinX ||\n tb.minSX > viewMaxX ||\n tb.maxSY < viewMinY ||\n tb.minSY > viewMaxY\n );\n}\n\nfunction isNetProjectedVisible(b, scrollGi, scrollGj, tileSize, sY, aspect, sceneOffsetY) {\n const wxMin = (b.minGi - scrollGi) * tileSize;\n const wxMax = (b.maxGi + 1 - scrollGi) * tileSize;\n const wzMin = (b.minGj - scrollGj) * tileSize;\n const wzMax = (b.maxGj + 1 - scrollGj) * tileSize;\n const iMin = Math.floor(wxMin / tileSize);\n const iMax = Math.floor(wxMax / tileSize);\n const jMin = Math.floor(wzMin / tileSize);\n const jMax = Math.floor(wzMax / tileSize);\n for (let i = iMin; i <= iMax; i++) {\n for (let j = jMin; j <= jMax; j++) {\n if (isTileVisible(i, j, tileSize, sY, aspect, sceneOffsetY)) return true;\n }\n }\n return false;\n}\n\n// ---------------------------------------------------------------------------\n// Period tiling, seeds, net cache\n// ---------------------------------------------------------------------------\n\nfunction netGlobalBounds(k, bc, br) {\n let minGi = Infinity;\n let maxGi = -Infinity;\n let minGj = Infinity;\n let maxGj = -Infinity;\n for (const [gi, gj] of CUBE_NET_TILES[k]) {\n const Gi = gi + PERIOD_X * bc + ROW_STAGGER_I * br;\n const Gj = gj + PERIOD_Y * br;\n minGi = Math.min(minGi, Gi);\n maxGi = Math.max(maxGi, Gi);\n minGj = Math.min(minGj, Gj);\n maxGj = Math.max(maxGj, Gj);\n }\n return { minGi, maxGi, minGj, maxGj };\n}\n\nfunction blockOffsetFace(gi, gj, bc, br) {\n return [gi + PERIOD_X * bc + ROW_STAGGER_I * br, gj + PERIOD_Y * br];\n}\n\nfunction hashSeed(br, bc, k) {\n return br * 73856093 + bc * 19349663 + k * 83492791;\n}\n\nfunction seeded01(seed) {\n const x = Math.sin(seed) * 10000;\n return x - Math.floor(x);\n}\n\nfunction getOrCreateNetSlot(br, bc, k, globalBounds) {\n const slotKey = `${br},${bc},${k}`;\n const existing = netCacheMap.get(slotKey);\n if (existing) return existing;\n const netShape = CUBE_NET_TILES[k];\n const baseFi = Math.floor(seeded01(hashSeed(br, bc, k)) * netShape.length);\n const BASE = [netShape[baseFi][0], netShape[baseFi][1]];\n const entry = {\n cache: buildNetCache(netShape, BASE),\n baseI: BASE[0],\n baseJ: BASE[1],\n globalBounds: globalBounds ?? netGlobalBounds(k, bc, br),\n };\n netCacheMap.set(slotKey, entry);\n return entry;\n}\n\nfunction pruneOffscreenNetCaches(gridRange) {\n const g0 = gridRange.giMin - CACHE_PRUNE_MARGIN;\n const g1 = gridRange.giMax + CACHE_PRUNE_MARGIN;\n const j0 = gridRange.gjMin - CACHE_PRUNE_MARGIN;\n const j1 = gridRange.gjMax + CACHE_PRUNE_MARGIN;\n\n const toDrop = [];\n for (const [mapKey, entry] of netCacheMap) {\n const b = entry.globalBounds;\n if (b.maxGi < g0 || b.minGi > g1 || b.maxGj < j0 || b.minGj > j1) {\n toDrop.push(mapKey);\n }\n }\n for (const dropKey of toDrop) {\n netCacheMap.delete(dropKey);\n foldStartByKey.delete(dropKey);\n }\n for (const staleKey of foldStartByKey.keys()) {\n if (!netCacheMap.has(staleKey)) foldStartByKey.delete(staleKey);\n }\n}\n\n// ---------------------------------------------------------------------------\n// Vec3 + easing (hinge math)\n// ---------------------------------------------------------------------------\n\nfunction norm3(v) {\n const h = Math.hypot(v[0], v[1], v[2]) || 1;\n return [v[0] / h, v[1] / h, v[2] / h];\n}\n\nfunction mulVec(M, v) {\n return [\n M[0][0] * v[0] + M[0][1] * v[1] + M[0][2] * v[2],\n M[1][0] * v[0] + M[1][1] * v[1] + M[1][2] * v[2],\n M[2][0] * v[0] + M[2][1] * v[1] + M[2][2] * v[2],\n ];\n}\n\nfunction rotAxisAngle(axis, radians) {\n const [ax, ay, az] = norm3(axis);\n const c = Math.cos(radians);\n const s = Math.sin(radians);\n const t = 1 - c;\n return [\n [t * ax * ax + c, t * ax * ay - s * az, t * ax * az + s * ay],\n [t * ax * ay + s * az, t * ay * ay + c, t * ay * az - s * ax],\n [t * ax * az - s * ay, t * ay * az + s * ax, t * az * az + c],\n ];\n}\n\nfunction addV(a, b) {\n return [a[0] + b[0], a[1] + b[1], a[2] + b[2]];\n}\n\nfunction scaleV(a, s) {\n return [a[0] * s, a[1] * s, a[2] * s];\n}\n\nfunction ease(t) {\n return t * t * (3 - 2 * t);\n}\n\n// ---------------------------------------------------------------------------\n// BFS net → hinge tree → draw\n// ---------------------------------------------------------------------------\n\nfunction parseFaceKey(fk) {\n const sep = fk.indexOf(',');\n return [parseInt(fk.slice(0, sep), 10), parseInt(fk.slice(sep + 1), 10)];\n}\n\nfunction buildNetCache(NET, BASE) {\n const coordKey = (c) => `${c[0]},${c[1]}`;\n const netSet = new Set(NET.map(coordKey));\n const DIRS = [\n [1, 0],\n [-1, 0],\n [0, 1],\n [0, -1],\n ];\n\n const faceMap = {};\n const bk = coordKey(BASE);\n faceMap[bk] = { coord: BASE, step: 0, parent: null, edgeDir: null };\n const queue = [BASE];\n const visited = new Set([bk]);\n while (queue.length) {\n const cur = queue.shift();\n const cs = faceMap[coordKey(cur)].step;\n for (const d of DIRS) {\n const nb = [cur[0] + d[0], cur[1] + d[1]];\n const nk = coordKey(nb);\n if (netSet.has(nk) && !visited.has(nk)) {\n visited.add(nk);\n faceMap[nk] = { coord: nb, step: cs + 1, parent: coordKey(cur), edgeDir: d };\n queue.push(nb);\n }\n }\n }\n const faces = Object.values(faceMap).sort((a, b) => a.step - b.step);\n const maxStep = faces[faces.length - 1].step;\n\n function getEdgeDirVectors(d, uDir, vDir) {\n if (d[0] === 1) return { edgeMidOffset: uDir, foldAxis: vDir, outDir: uDir };\n if (d[0] === -1)\n return {\n edgeMidOffset: scaleV(uDir, -1),\n foldAxis: scaleV(vDir, -1),\n outDir: scaleV(uDir, -1),\n };\n if (d[1] === 1)\n return {\n edgeMidOffset: vDir,\n foldAxis: scaleV(uDir, -1),\n outDir: vDir,\n };\n return { edgeMidOffset: scaleV(vDir, -1), foldAxis: uDir, outDir: scaleV(vDir, -1) };\n }\n\n function getAncestorChain(fk) {\n const chain = [];\n let cur = faceMap[fk];\n while (cur) {\n chain.unshift(cur);\n cur = cur.parent ? faceMap[cur.parent] : null;\n }\n return chain;\n }\n\n function getFaceTransform(fk, animStep, animT) {\n const chain = getAncestorChain(fk);\n let center = [0, 0, 0];\n let uDir = [1, 0, 0];\n let vDir = [0, 0, 1];\n\n for (let hi = 1; hi < chain.length; hi++) {\n const face = chain[hi];\n const { edgeMidOffset, foldAxis, outDir } = getEdgeDirVectors(face.edgeDir, uDir, vDir);\n const edgeMid = addV(center, scaleV(edgeMidOffset, 0.5));\n\n const faceStep = face.step;\n let hingeAngle;\n if (faceStep < animStep) hingeAngle = FOLD_QUARTER_TURN;\n else if (faceStep === animStep) hingeAngle = ease(animT) * FOLD_QUARTER_TURN;\n else hingeAngle = 0;\n\n if (hingeAngle === 0) {\n center = addV(edgeMid, scaleV(outDir, 0.5));\n } else {\n const R = rotAxisAngle(foldAxis, hingeAngle);\n const newOutDir = mulVec(R, outDir);\n center = addV(edgeMid, scaleV(newOutDir, 0.5));\n uDir = mulVec(R, uDir);\n vDir = mulVec(R, vDir);\n }\n }\n return { center, uDir, vDir };\n }\n\n const faceKeys = faces.map((f) => coordKey(f.coord));\n\n return {\n NET,\n BASE,\n faceMap,\n maxStep,\n faceKeys,\n getFaceTransform,\n };\n}\n\nfunction foldTToAnim(maxStep, foldT) {\n if (foldT <= 0) return { animStep: 1, animT: 0 };\n const total = foldT * maxStep;\n if (total >= maxStep) return { animStep: maxStep, animT: 1 };\n const animStep = Math.min(Math.floor(total) + 1, maxStep);\n const animT = total - Math.floor(total);\n return { animStep, animT };\n}\n\nfunction drawQuad3d(va, vb, vc, vd, hexFill) {\n fill(hexFill);\n stroke(0);\n strokeWeight(2);\n quad(...va, ...vb, ...vc, ...vd);\n}\n\nfunction drawFoldedNet(cache, foldT, baseI, baseJ, faceHex) {\n const { maxStep, faceKeys, getFaceTransform } = cache;\n const { animStep, animT } = foldTToAnim(maxStep, foldT);\n const flatRef = foldTToAnim(maxStep, 0);\n const halfFace = 0.48 * TILE_SIZE;\n\n noStroke();\n for (const fk of faceKeys) {\n const [gi, gj] = parseFaceKey(fk);\n const cur = getFaceTransform(fk, animStep, animT);\n const flat = getFaceTransform(fk, flatRef.animStep, flatRef.animT);\n const centerUnit = addV(\n addV(cur.center, scaleV(flat.center, -1)),\n [gi - baseI, 0, gj - baseJ],\n );\n const center = scaleV(centerUnit, TILE_SIZE);\n const { uDir, vDir } = cur;\n const corners = [\n addV(center, addV(scaleV(uDir, -halfFace), scaleV(vDir, -halfFace))),\n addV(center, addV(scaleV(uDir, -halfFace), scaleV(vDir, halfFace))),\n addV(center, addV(scaleV(uDir, halfFace), scaleV(vDir, halfFace))),\n addV(center, addV(scaleV(uDir, halfFace), scaleV(vDir, -halfFace))),\n ];\n drawQuad3d(corners[0], corners[1], corners[2], corners[3], faceHex);\n }\n}\n\n// ---------------------------------------------------------------------------\n// Debug — set DEBUG true for pink fold plane + console logs (initialized before p5 calls setup)\n// ---------------------------------------------------------------------------\n\nconst DEBUG = false;\n\nlet _debugLastViewportSig = '';\nlet _debugFpsLastMs = 0;\nlet _debugFpsFrames = 0;\n\nfunction debugResetFpsTimer() {\n if (!DEBUG) return;\n _debugFpsLastMs = millis();\n _debugFpsFrames = 0;\n}\n\nfunction debugLogFoldLineOnResize() {\n if (!DEBUG) return;\n const viewportSig = `${width}x${height}`;\n if (viewportSig === _debugLastViewportSig) return;\n const pos = foldLineK * TILE_SIZE;\n const axis = SCROLL_ALONG_WORLD_X ? 'x' : 'z';\n const sg = SCROLL_ALONG_WORLD_X ? 'Gi' : 'Gj';\n console.log(\n `[fold cut-off] world ${axis}=${pos.toFixed(1)} | K=${foldLineK.toFixed(4)} (foldLineRef = scroll${sg} + K)`,\n );\n _debugLastViewportSig = viewportSig;\n}\n\nfunction debugDrawFoldCutoffLine(gridRange) {\n const pad = 80;\n const spanZ = Math.max(12000, (gridRange.gjMax - gridRange.gjMin + pad * 2) * TILE_SIZE);\n const spanX = Math.max(12000, (gridRange.giMax - gridRange.giMin + pad * 2) * TILE_SIZE);\n const y = TILE_SIZE * 0.18;\n const halfW = TILE_SIZE * 0.55;\n\n fill(255, 55, 140, 220);\n stroke(120, 0, 70);\n strokeWeight(Math.max(2, TILE_SIZE * 0.05));\n normal(0, 1, 0);\n\n if (SCROLL_ALONG_WORLD_X) {\n const worldX = foldLineK * TILE_SIZE;\n beginShape();\n vertex(worldX - halfW, y, -spanZ);\n vertex(worldX + halfW, y, -spanZ);\n vertex(worldX + halfW, y, spanZ);\n vertex(worldX - halfW, y, spanZ);\n endShape(CLOSE);\n } else {\n const worldZ = foldLineK * TILE_SIZE;\n beginShape();\n vertex(-spanX, y, worldZ - halfW);\n vertex(spanX, y, worldZ - halfW);\n vertex(spanX, y, worldZ + halfW);\n vertex(-spanX, y, worldZ + halfW);\n endShape(CLOSE);\n }\n}\n\nfunction debugDrawFrame(gridRange) {\n if (!DEBUG) return;\n debugDrawFoldCutoffLine(gridRange);\n _debugFpsFrames++;\n const now = millis();\n if (now - _debugFpsLastMs < 1000) return;\n const fps = (_debugFpsFrames * 1000) / (now - _debugFpsLastMs);\n const axis = SCROLL_ALONG_WORLD_X ? 'Gi' : 'Gj';\n console.log(\n `[cube sketch] FPS: ${fps.toFixed(1)} | speed ${speed.toFixed(2)} | scroll (${scrollGi.toFixed(2)}, ${scrollGj.toFixed(2)}) | foldLine ${axis}=${foldLineRef.toFixed(2)} | ${unfoldAfterLine ? 'unfold' : 'fold'} | netCaches ${netCacheMap.size} foldKeys ${foldStartByKey.size}`,\n );\n _debugFpsLastMs = now;\n _debugFpsFrames = 0;\n}","link_url","/p/3qnzce6fprvztk8n4fx5","versioned_link_url","/p/3qnzce6fprvztk8n4fx5/1","yapping","**Creating p5 Files**\n\nI'm tasked with creating files, specifically index.html and main.js, while using the esm.sh import map. I need to work with p5 via CDN, which is mentioned in the developer guidelines. The easiest way is to include p5 globally with a script tag, but I’ll follow the guideline and import p5 from 'https://esm.sh/p5'. I must consider adapting the code to use instance mode since the original uses global functions. I'll wrap the original code into a p5 sketch function for simplicity.\n**Simplifying p5 Integration**\n\nI'm considering how to incorporate p5 into my project. While it would be easier to include p5 using a non-module script tag to keep the global functions, the guidelines indicate that I should use esm.sh with an import map. However, it seems I could have some flexibility here. To minimize edits, I'm thinking of loading p5 from a CDN and including a separate module for logic. I’ll create index.html to load p5 and main.js for the original code. Let's go with that!\n\nindex.html\n```index.html\n```\n\nsketch.js\n```sketch.js\n```","cursor","eyJpZCI6IjNxbnpjZTZmcHJ2enRrOG40Zng1In0","token","included",[],"routes/browser/layout","actionData","errors"]