[{"_1":2,"_187":-5,"_188":-5},"loaderData",{"_3":4,"_61":62,"_186":-5},"root",{"_5":6,"_21":-5,"_22":-5,"_23":24,"_42":-5,"_43":-5,"_44":-5,"_45":46,"_47":48,"_57":58,"_59":60},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20},"SUPABASE_URL","https://hello.websim.com","SUPABASE_KEY","sb_publishable_Psom5r5hvV9Glvzv4s3oOQ_2b_HevU-","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","ACTIVITY_DIRECT_PAGEVIEW","on","authUser","user","snapshotData",{"_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,"_39":-5,"_40":-5,"_41":-5},"lastProjectId","sidebarTab","homepageTab","pinSidebar","settingsOpen","maximized","assetsExpanded","focusedAssetFilename","authError","authErrorCode","authErrorDescription","sidebarWidth","videoMuted","videoVolume","navigationContext","hasSeenFeedOnboarding","nextUpExpanded","plan","balances","rewards","loadedAt",1794042534798,"origins",{"_49":50,"_51":52,"_53":54,"_55":56},"origin","https://websim.com","apiOrigin","https://api.websim.com","contentOrigin","https://{PROJECT_ID}.c.websim.com","appDomainOrigin","https://{SUBDOMAIN}.on.websim.com","isMobile",false,"theme","auto","slug",{"_63":64,"_65":66,"_121":122,"_141":142,"_178":179,"_180":-5,"_181":182,"_183":184},"version","1","project",{"_67":65,"_68":69,"_70":71,"_72":73,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":98,"_99":100,"_61":109,"_110":98,"_111":98,"_112":58,"_113":-5,"_114":-5,"_115":-5,"_116":117,"_118":-5,"_119":-5,"_120":58},"_type","id","f29kjh9_6ax2mcb5c676","created_at","2026-02-01T01:01:32.922Z","created_by",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":-5,"_81":-5,"_82":58},"2f7a6c72-31f5-46a8-a1e1-8795cb9b63f4","username","jerrystacy297612","2026-01-16T03:44:05.245Z","avatar_url","https://avatars.websim.com/2f7a6c72-31f5-46a8-a1e1-8795cb9b63f4/CxMjBebJ2B4Qc7bHG.webp","discord_username","discord_id","is_admin","updated_at","2026-02-01T01:03:01.029Z","title","colorbox web","comments_mode","open","visibility","public","current_version",1,"last_posted_version","parent_id","parent_version","deleted_at","posted",true,"stats",{"_101":102,"_103":69,"_104":105,"_106":107,"_108":92},"~type","project_stats","project_id","views",44,"likes",0,"comments","colorbox-web-4","auto_set_current","allow_automatic_improvements","board_enabled","description","generated_description","from_template","domains",[],"thumbnail","video","has_active_experiment","project_revision",{"_67":121,"_68":123,"_63":92,"_70":124,"_125":-5,"_94":-5,"_126":-5,"_127":-5,"_72":128,"_129":130,"_103":69,"_83":131,"_96":-5,"_99":132,"_134":58,"_135":136,"_137":-5,"_138":-5,"_139":140},"019c16b8-2718-7832-a55b-820a357d04ae","2026-02-01T01:01:33.336Z","visited_at","parent_revision_version","parent_revision_project_id",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":-5,"_81":-5,"_82":58},"meta",{"_63":64},"2026-02-01T01:03:01.162Z",{"_133":107},"multiplayer_count","draft","site_id","yeTeiLWOHRJ9CpdV4","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/019c16b9-16ae-7e71-a360-11bd492b7d05","site",{"_67":141,"_68":136,"_94":-5,"_70":143,"_144":145,"_146":147,"_148":149,"_85":86,"_161":162,"_163":164,"_169":-5,"_170":171,"_172":173,"_96":-5,"_174":175,"_176":177},"2026-02-01T01:01:46.928Z","state","done","model","gpt-5.1","lore",{"_63":92,"_150":151,"_152":58,"_153":58,"_154":58,"_155":58,"_156":98,"_157":58,"_158":58,"_159":58,"_160":58},"attachments",[],"enableMultiplayer_v2","enableMobilePrompt","enableLLM2","enableComments","enableVideo","enableApi","enableTweaks","enableDB","enableDB_v2_1","owner",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":-5,"_81":-5,"_82":58},"prompt",{"_165":166,"_167":168},"type","plaintext","text","#!/usr/bin/env python3\nimport os, math, random, time\nimport pygame\nfrom collections import deque\n\nWIDTH, HEIGHT = 1280, 720\nFPS_TARGET = 60\n\n# Modes\nRAINBOW, HUGE = 0, 1\nMODE_NAMES = [\"Rainbow\", \"HUGE\"]\n\ndef clamp(x, a, b): return a if x < a else b if x > b else x\ndef randf(a,b): return random.uniform(a,b)\n\ndef hsv_to_rgb(h): # h 0..6\n c = 255\n x = int(255 * (1 - abs((h % 2) - 1)))\n if 0 <= h < 1: return (c, x, 0)\n if 1 <= h < 2: return (x, c, 0)\n if 2 <= h < 3: return (0, c, x)\n if 3 <= h < 4: return (0, x, c)\n if 4 <= h < 5: return (x, 0, c)\n return (c, 0, x)\n\n# ---------- layered sphericalized skybox ----------\n\nclass SkyLayer:\n \"\"\"rainbow!!\"\"\"\n def __init__(self, tiles=16, radius=1.0, intensity=1.0, hue_shift=0.0):\n self.tiles = tiles\n self.radius = radius\n self.intensity = intensity\n self.hue_shift = hue_shift\n self.colors = self.make_colors()\n self.row_shift = [0]*6\n self.col_shift = [0]*6\n self.seeds = [random.random()*1000 for _ in range(6)]\n \n self._cache_pts = None\n self._cache_frame = -999\n\n def make_colors(self):\n N = self.tiles\n faces = [[[(0,0,0) for _ in range(N)] for _ in range(N)] for _ in range(6)]\n for f in range(6):\n for y in range(N):\n for x in range(N):\n h = (randf(0,6) + self.hue_shift) % 6\n col = hsv_to_rgb(h)\n \n col = tuple(clamp(ch + random.randint(-12,12), 0, 255) for ch in col)\n faces[f][y][x] = col\n \n neighbors = {\n 0: {0:(4,0), 1:(2,3), 2:(5,0), 3:(3,1)},\n 1: {0:(4,2), 1:(3,3), 2:(5,2), 3:(2,1)},\n 2: {0:(4,3), 1:(0,3), 2:(5,3), 3:(1,1)},\n 3: {0:(4,1), 1:(1,3), 2:(5,1), 3:(0,1)},\n 4: {0:(1,2), 1:(0,0), 2:(2,0), 3:(3,0)},\n 5: {0:(2,2), 1:(0,2), 2:(1,0), 3:(3,2)},\n }\n N1 = N-1\n for f in range(6):\n tf, te = neighbors[f][0]\n for x in range(N):\n faces[f][0][x] = faces[tf][N1 if te==2 else 0][x if te in (0,2) else (0 if te==3 else N1)]\n rf, re = neighbors[f][1]\n for y in range(N):\n faces[f][y][N1] = faces[rf][y if re in (1,3) else (0 if re==0 else N1)][N1 if re==3 else 0]\n bf, be = neighbors[f][2]\n for x in range(N):\n faces[f][N1][x] = faces[bf][0 if be==0 else N1][x if be in (0,2) else (0 if be==3 else N1)]\n lf, le = neighbors[f][3]\n for y in range(N):\n faces[f][y][0] = faces[lf][y if le in (1,3) else (0 if le==0 else N1)][0 if le==1 else N1]\n return faces\n\n def step(self, t):\n base = 0.12 * self.intensity\n for f in range(6):\n if random.random() < base:\n self.row_shift[f] = (self.row_shift[f] + random.choice([-1,0,1])) % self.tiles\n if random.random() < base:\n self.col_shift[f] = (self.col_shift[f] + random.choice([-1,0,1])) % self.tiles\n \n if random.random() < 0.03:\n self.hue_shift = (self.hue_shift + randf(-0.02, 0.02)) % 6\n self.colors = self.make_colors()\n\n\ndef face_to_sphere(radius, f, u, v):\n s = 1.0\n if f == 0: x,y,z = ( s, v, -u)\n elif f == 1: x,y,z = (-s, v, u)\n elif f == 2: x,y,z = ( u, s, -v)\n elif f == 3: x,y,z = ( u, -s, v)\n elif f == 4: x,y,z = ( u, v, s)\n else: x,y,z = (-u, v, -s)\n L = (x*x + y*y + z*z) ** 0.5 or 1.0\n return (radius * x / L, radius * y / L, radius * z / L)\n\nclass Camera:\n def __init__(self):\n self.yaw = 0.0\n self.pitch = 0.0\n self.pos = [0.0, 0.0, 0.0]\n self.speed = 1.0\n\n def forward_flat(self):\n return (math.sin(self.yaw), 0, math.cos(self.yaw))\n def right(self):\n return (math.cos(self.yaw), 0, -math.sin(self.yaw))\n\n def apply(self, v):\n x,y,z = v[0]-self.pos[0], v[1]-self.pos[1], v[2]-self.pos[2]\n cy, sy = math.cos(-self.yaw), math.sin(-self.yaw)\n x, z = cy*x - sy*z, sy*x + cy*z\n cp, sp = math.cos(-self.pitch), math.sin(-self.pitch)\n y, z = cp*y - sp*z, sp*y + cp*z\n return (x, y, z)\n\ndef project(v, cx, cy, f):\n x,y,z = v\n z = (z + 3.2)\n if z <= 0.1: z = 0.1\n s = f / z\n return (cx + x*s, cy - y*s)\n\ndef draw_layer(surface, cam, layer: SkyLayer, t, precision=False, warp_cache_every=3):\n \n if layer._cache_pts is None:\n layer._cache_pts = {f: [[None]*layer.tiles for _ in range(layer.tiles)] for f in range(6)}\n\n N = layer.tiles\n wob = 0.008 * layer.intensity \n melt = 0.02 if precision else 0.0\n\n w,h = surface.get_size()\n cx, cy = w/2, h/2\n f = 780 * (w / WIDTH) \n\n need_recalc = (pygame.time.get_ticks() // (1000//FPS_TARGET)) % warp_cache_every == 0\n\n for face in (5,1,0,3,2,4):\n seed = layer.seeds[face]\n for iy in range(N):\n for ix in range(N):\n jx = (ix + layer.col_shift[face]) % N\n jy = (iy + layer.row_shift[face]) % N\n col = layer.colors[face][jy][jx]\n \n jitter = int(30 * layer.intensity)\n col = (clamp(col[0]+random.randint(-jitter,jitter),0,255),\n clamp(col[1]+random.randint(-jitter,jitter),0,255),\n clamp(col[2]+random.randint(-jitter,jitter),0,255))\n\n if need_recalc or layer._cache_pts[face][iy][ix] is None:\n u0 = -1 + 2 * (ix / N); v0 = -1 + 2 * (iy / N)\n u1 = -1 + 2 * ((ix+1) / N); v1 = -1 + 2 * ((iy+1) / N)\n\n def warp(u, v, kadd):\n k = seed + ix*0.31 + iy*0.71 + kadd\n u += wob * math.sin(t*2.5 + k) + wob*0.5*math.sin((u+v+t)*4.8 + k*1.9)\n v += wob * math.cos(t*2.0 + k*0.6) + wob*0.5*math.sin((u-t)*5.2 + k*2.6)\n if melt:\n u += (random.random()-0.5) * melt\n v += (random.random()-0.5) * melt\n return u, v\n\n du0, dv0 = warp(u0, v0, 0)\n du1, dv0b = warp(u1, v0, 1)\n du1b, dv1 = warp(u1, v1, 2)\n du0b, dv1b = warp(u0, v1, 3)\n\n corners = [\n face_to_sphere(layer.radius, face, du0, dv0),\n face_to_sphere(layer.radius, face, du1, dv0b),\n face_to_sphere(layer.radius, face, du1b, dv1),\n face_to_sphere(layer.radius, face, du0b, dv1b),\n ]\n pts2d = [project(cam.apply(p), cx, cy, f) for p in corners]\n layer._cache_pts[face][iy][ix] = pts2d\n else:\n pts2d = layer._cache_pts[face][iy][ix]\n\n pygame.draw.polygon(surface, col, pts2d, 0)\n\ndef main():\n pygame.init()\n pygame.display.set_caption(\"colorbox\")\n screen = pygame.display.set_mode((WIDTH, HEIGHT))\n clock = pygame.time.Clock()\n\n \n base_radii = [1.4, 6.0]\n base_tiles = [16, 14] \n\n layers = [SkyLayer(base_tiles[i], base_radii[i], intensity=1.0 - i*0.2, hue_shift=i*0.9)\n for i in range(len(base_radii))]\n\n cam = Camera()\n mouse_locked = False\n invert_pitch = False\n precision = False\n mode = RAINBOW\n\n \n scale = 0.85 \n rsurf = pygame.Surface((int(WIDTH*scale), int(HEIGHT*scale))).convert()\n\n \n fps_hist = deque(maxlen=30)\n\n pygame.mouse.set_visible(True)\n\n running = True\n while running:\n dt = clock.tick(FPS_TARGET) / 1000.0\n t = pygame.time.get_ticks() / 1000.0\n wheel_move = 0.0\n\n for e in pygame.event.get():\n if e.type == pygame.QUIT: running = False\n elif e.type == pygame.KEYDOWN:\n if e.key == pygame.K_ESCAPE: running = False\n elif e.key == pygame.K_l:\n mouse_locked = not mouse_locked\n pygame.mouse.set_visible(not mouse_locked)\n pygame.event.set_grab(mouse_locked)\n elif e.key == pygame.K_i:\n invert_pitch = not invert_pitch\n elif e.key == pygame.K_f:\n for lay in layers: lay.intensity = clamp(lay.intensity + 0.3, 0.5, 4.0)\n elif e.key == pygame.K_p:\n precision = not precision\n elif e.key == pygame.K_m:\n if mode == RAINBOW:\n mode = HUGE\n for i, lay in enumerate(layers):\n lay.radius = base_radii[i] * 12.0\n lay.tiles = max(10, int(base_tiles[i] * 0.75)) \n lay.colors = lay.make_colors()\n else:\n mode = RAINBOW\n for i, lay in enumerate(layers):\n lay.radius = base_radii[i]\n lay.tiles = base_tiles[i]\n lay.colors = lay.make_colors()\n elif e.key == pygame.K_z:\n cam.pos = [0.0, 0.0, 0.0]; cam.yaw = 0.0; cam.pitch = 0.0\n elif e.type == pygame.MOUSEWHEEL:\n wheel_move += e.y\n\n \n if mouse_locked:\n mx, my = pygame.mouse.get_rel()\n cam.yaw += mx * 0.0030\n if invert_pitch:\n cam.pitch = clamp(cam.pitch + my * 0.0030, -1.2, 1.2)\n else:\n cam.pitch = clamp(cam.pitch - my * 0.0030, -1.2, 1.2)\n else:\n pygame.mouse.get_rel()\n\n keys = pygame.key.get_pressed()\n \n if keys[pygame.K_LEFT]: cam.yaw -= 0.035\n if keys[pygame.K_RIGHT]: cam.yaw += 0.035\n if keys[pygame.K_UP]: cam.pitch = clamp(cam.pitch - 0.035, -1.2, 1.2)\n if keys[pygame.K_DOWN]: cam.pitch = clamp(cam.pitch + 0.035, -1.2, 1.2)\n\n \n boost = 2.2 if keys[pygame.K_LSHIFT] or keys[pygame.K_RSHIFT] else 1.0\n spd = cam.speed * dt * boost\n fx, _, fz = cam.forward_flat()\n rx, _, rz = cam.right()\n if keys[pygame.K_w]: cam.pos[0] += fx*spd; cam.pos[2] += fz*spd\n if keys[pygame.K_s]: cam.pos[0] -= fx*spd; cam.pos[2] -= fz*spd\n if keys[pygame.K_a]: cam.pos[0] -= rx*spd; cam.pos[2] -= rz*spd\n if keys[pygame.K_d]: cam.pos[0] += rx*spd; cam.pos[2] += rz*spd\n if keys[pygame.K_q]: cam.pos[1] -= spd\n if keys[pygame.K_e]: cam.pos[1] += spd\n\n \n if wheel_move != 0.0:\n mx, my = pygame.mouse.get_pos()\n f = 760.0 * scale\n rx_cam = (mx - WIDTH/2) / (760.0)\n ry_cam = -(my - HEIGHT/2) / (760.0)\n rz_cam = 1.0\n cy, sy = math.cos(cam.yaw), math.sin(cam.yaw)\n cp, sp = math.cos(cam.pitch), math.sin(cam.pitch)\n x1, y1, z1 = rx_cam, ry_cam*cp + rz_cam*sp, -ry_cam*sp + rz_cam*cp\n dx, dy, dz = x1*cy - z1*sy, y1, x1*sy + z1*cy\n L = (dx*dx + dy*dy + dz*dz) ** 0.5 or 1.0\n dx, dy, dz = dx/L, dy/L, dz/L\n wheel_speed = 1.4 * wheel_move * (1.0 + 0.5*boost)\n cam.pos[0] += dx * wheel_speed * dt * 60.0\n cam.pos[1] += dy * wheel_speed * dt * 60.0\n cam.pos[2] += dz * wheel_speed * dt * 60.0\n\n \n for lay in layers: lay.step(t)\n\n \n iw, ih = rsurf.get_size()\n rsurf.fill((0,0,0))\n for lay in layers[::-1]:\n draw_layer(rsurf, cam, lay, t, precision, warp_cache_every=3)\n\n \n pygame.transform.smoothscale(rsurf, (WIDTH, HEIGHT), screen)\n\n \n fps = clock.get_fps()\n fps_hist.append(fps if fps > 0 else FPS_TARGET)\n avg = sum(fps_hist)/len(fps_hist)\n if len(fps_hist) == fps_hist.maxlen:\n if avg < 30 and scale > 0.6:\n scale = max(0.6, scale - 0.1)\n rsurf = pygame.Surface((int(WIDTH*scale), int(HEIGHT*scale))).convert()\n elif avg > 58 and scale < 1.0:\n scale = min(1.0, scale + 0.1)\n rsurf = pygame.Surface((int(WIDTH*scale), int(HEIGHT*scale))).convert()\n\n \n font = pygame.font.SysFont(\"consolas,monospace\", 16)\n hud = f\"[Mode {MODE_NAMES[mode]}] [Scale {scale:.2f}] [FPS {fps:.1f}]\"\n help1 = \"L lock | Wheel move-to-cursor | WASD+QE | Shift | F glitch | P precision | M HUGE | I invert | Z reset | ESC\"\n screen.blit(font.render(hud, True, (240,240,245)), (10, 8))\n screen.blit(font.render(help1, True, (185,185,195)), (10, 28))\n\n pygame.display.flip()\n\n pygame.quit()\n\nif __name__ == '__main__':\n main()","url","link_url","/p/f29kjh9_6ax2mcb5c676","versioned_link_url","/p/f29kjh9_6ax2mcb5c676/1","yapping","**Planning canvas implementation**\n\nI'm considering using JS Math.random for generating random elements with no constraints from Remotion. The canvas sizing will be 1280x720, and I want it to take the full viewport without scrolling. To enhance performance, I might scale the rendering based on the measured frames per second. I also need certain mode-switching keys while ensuring ESC doesn't quit the application. For mobile, I should create on-screen buttons, including joystick areas and touch handlers for interaction. Lastly, I’m working on structuring tiles with specific attributes.\n**Structuring the app development**\n\nI need to target 60 FPS mainly for the warp cache decision, tracking frame count. For projections, I'll consider a constant related to the width settings. A Camera class will help manage movements, while desktop zooming can rely on the mouse wheel event. For mobile, pinching might be more appropriate.\n\nI'll set up files like `index.html`, `main.js`, `sky.js`, and `camera.js`. Importing mappings in `index.html` is crucial, especially for `nipple.js`. I'll ensure the canvas is full-screen with specific dimensions and styles, maintaining logical dimensions for compatibility.\n**Planning user interface features**\n\nI think I can set WIDTH and HEIGHT to represent the canvas dimensions directly and adjust projections using a baseline of 1280. For the HUD text, I’ll utilize `ctx.fillStyle` to keep it small and clear. \n\nI’ll import `nipplejs` to create a joystick in the bottom-left corner using an absolute positioning zone. When the joystick moves, I’ll capture the joy vector and convert it into directional booleans for movement. For camera control, I’ll implement touchstart and touchmove events to monitor drag. I'll also ensure there's no scrolling. Let's get started on this!\n\nindex.html\n```index.html\n```\n\ncamera.js\n```camera.js\n```\n\nsky.js\n```sky.js\n```\n\nmain.js\n```main.js\n```","page_description","This page contains a web-based interactive canvas, potentially for a gaming or simulation experience. It includes a styling setup that promotes a…","cursor","eyJpZCI6ImYyOWtqaDlfNmF4Mm1jYjVjNjc2In0","token","included",[],"about",{"_185":-5},"parent","routes/browser/layout","actionData","errors"]