[{"_1":2,"_181":-5,"_182":-5},"loaderData",{"_3":4,"_56":57,"_180":-5},"root",{"_5":6,"_19":-5,"_20":-5,"_21":22,"_39":-5,"_40":-5,"_41":-5,"_42":43,"_52":53,"_54":55},"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},"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",{"_58":59,"_60":61,"_116":117,"_136":137,"_172":173,"_174":-5,"_175":176,"_177":178},"version","1","project",{"_62":60,"_63":64,"_65":66,"_67":68,"_78":79,"_80":81,"_82":83,"_84":85,"_86":87,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":93,"_94":95,"_56":81,"_104":93,"_105":93,"_106":53,"_107":108,"_109":-5,"_110":-5,"_111":112,"_113":-5,"_114":-5,"_115":53},"_type","id","jtw4nw273md86xw7eka6","created_at","2025-12-17T21:16:14.744Z","created_by",{"_62":20,"_63":69,"_70":71,"_65":72,"_73":74,"_75":-5,"_76":-5,"_77":53},"79a451c1-6477-451c-b23c-498840e6112b","username","Skyboxroblox","2025-12-09T20:10:47.716Z","avatar_url","https://lh3.googleusercontent.com/a/ACg8ocJpB6pVKCKPlVu8pIV1ROGQu2NZYTFAsZRyd2tXPw7s9ss3DA=s96-c","discord_username","discord_id","is_admin","updated_at","2025-12-17T21:19:17.581Z","title","colorbox","comments_mode","open","visibility","public","current_version",1,"last_posted_version","parent_id","parent_version","deleted_at","posted",true,"stats",{"_96":97,"_98":64,"_99":100,"_101":102,"_103":87},"~type","project_stats","project_id","views",163,"likes",0,"comments","auto_set_current","allow_automatic_improvements","board_enabled","description","This is the colorbox","generated_description","from_template","domains",[],"thumbnail","video","has_active_experiment","project_revision",{"_62":116,"_63":118,"_58":87,"_65":119,"_120":-5,"_89":-5,"_121":-5,"_122":-5,"_67":123,"_124":125,"_98":64,"_78":126,"_91":-5,"_94":127,"_129":53,"_130":131,"_132":-5,"_133":-5,"_134":135},"019b2e2b-b682-7103-94d7-3f329b8a1d87","2025-12-17T21:16:15.362Z","visited_at","parent_revision_version","parent_revision_project_id",{"_62":20,"_63":69,"_70":71,"_65":72,"_73":74,"_75":-5,"_76":-5,"_77":53},"meta",{"_58":59},"2025-12-17T21:19:17.752Z",{"_128":102},"multiplayer_count","draft","site_id","XBxLAFbHSRixtti34","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/019b2e2c-6816-74f7-8c9a-218423144548","site",{"_62":136,"_63":131,"_89":-5,"_65":138,"_139":140,"_141":142,"_143":144,"_80":81,"_156":157,"_158":159,"_164":-5,"_165":166,"_167":168,"_91":-5,"_169":170,"_171":-5},"2025-12-17T21:16:25.388Z","state","done","model","gpt-5.1","lore",{"_58":87,"_145":146,"_147":53,"_148":53,"_149":53,"_150":53,"_151":93,"_152":53,"_153":53,"_154":53,"_155":53},"attachments",[],"enableMultiplayer_v2","enableMobilePrompt","enableLLM2","enableComments","enableVideo","enableApi","enableTweaks","enableDB","enableDB_v2_1","owner",{"_62":20,"_63":69,"_70":71,"_65":72,"_73":74,"_75":-5,"_76":-5,"_77":53},"prompt",{"_160":161,"_162":163},"type","plaintext","text","th, 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):\n return a if x < a else b if x > b else x\n\ndef randf(a,b):\n 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 ----------\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 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 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\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\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\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\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\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 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\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\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:\n 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 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 \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 base_radii = [1.4, 6.0]\n base_tiles = [16, 14]\n layers = [SkyLayer(base_tiles[i], base_radii[i], intensity=1.0 - i*0.2, hue_shift=i*0.9) 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 scale = 0.85\n \n rsurf = pygame.Surface((int(WIDTH*scale), int(HEIGHT*scale))).convert()\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:\n running = False\n elif e.type == pygame.KEYDOWN:\n if e.key == pygame.K_ESCAPE:\n 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:\n 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]\n cam.yaw = 0.0\n cam.pitch = 0.0\n elif e.type == pygame.MOUSEWHEEL:\n wheel_move += e.y\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 if keys[pygame.K_LEFT]:\n cam.yaw -= 0.035\n if keys[pygame.K_RIGHT]:\n cam.yaw += 0.035\n if keys[pygame.K_UP]:\n cam.pitch = clamp(cam.pitch - 0.035, -1.2, 1.2)\n if keys[pygame.K_DOWN]:\n cam.pitch = clamp(cam.pitch + 0.035, -1.2, 1.2)\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 \n if keys[pygame.K_w]:\n cam.pos[0] += fx*spd\n cam.pos[2] += fz*spd\n if keys[pygame.K_s]:\n cam.pos[0] -= fx*spd\n cam.pos[2] -= fz*spd\n if keys[pygame.K_a]:\n cam.pos[0] -= rx*spd\n cam.pos[2] -= rz*spd\n if keys[pygame.K_d]:\n cam.pos[0] += rx*spd\n cam.pos[2] += rz*spd\n if keys[pygame.K_q]:\n cam.pos[1] -= spd\n if keys[pygame.K_e]:\n cam.pos[1] += spd\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 \n cy, sy = math.cos(cam.yaw), math.sin(cam.yaw)\n cp, sp = math.cos(cam.pitch), math.sin(cam.pitch)\n \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 \n L = (dx*dx + dy*dy + dz*dz) ** 0.5 or 1.0\n dx, dy, dz = dx/L, dy/L, dz/L\n \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 for lay in layers:\n lay.step(t)\n \n iw, ih = rsurf.get_size()\n rsurf.fill((0,0,0))\n \n for lay in layers[::-1]:\n draw_layer(rsurf, cam, lay, t, precision, warp_cache_every=3)\n \n pygame.transform.smoothscale(rsurf, (WIDTH, HEIGHT), screen)\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 \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 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 \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()\n ","url","link_url","/p/jtw4nw273md86xw7eka6","versioned_link_url","/p/jtw4nw273md86xw7eka6/1","yapping","**Translating Pygame to Web**\n\nThe user pasted Pygame Python code and wants to create a web version with multiple files, including an `index.html`. I need to rewrite it using JavaScript and import maps, with no bundler involved. The project seems desktop-like, so it's acceptable to keep it that way. I must ensure it includes at least `index.html` and `main.js`, while incorporating controls like WASD and mouse functions. Although mobile functionality may seem limited, I need to keep it user-friendly without clutter. I'll follow the guidelines regarding import maps and libraries carefully.\n**Building main.js for Skybox Viewer**\n\nI’m implementing `main.js` with classes like SkyLayer, Camera, and some utilities. For randomness, I’ll use `Math.random`, and performance will be key. I'll need to create a text HUD and ensure the canvas resizes to fit the mobile iframe with no scrolling, keeping it to one screen height. The output files will be `index.html`, `main.js`, and possibly `utils.js`, but I'll keep it minimal. For event handling, I’ll use pointer locking for the mouse when the user presses 'L'. I'll ensure to follow browser gesture requirements for the pointer lock.\n**Implementing Dynamic Features**\n\nI need to set up `warp_cache_every` based on time, and since I'm using `requestAnimationFrame` at around 60fps, I can maintain a `frameIndex++`. I also want dynamic resolution scaling, using an offscreen canvas to draw a scaled version on the screen canvas. The font HUD will be implemented through `ctx.fillText`. \n\nAdjusting for mode switching is critical; I need to regenerate colors and reset the cache, updating `_cache_pts` when necessary. It might be simpler to recreate the layers array upon mode change while keeping the base intensities. I'm planning how to streamline the tile management while ensuring proper cache rebuilding.\n**Finalizing Functionality**\n\nThe seeds length will depend on the six faces, which works for my implementation. In `draw_layer`, I need to incorporate `need_recalc` logic based on `frameIndex` and `warp_cache_every`, so that’s all set. I’ll also be working on HUD strings and implementing a clamp function. I shouldn't need to import anything, but according to the guidelines, I can include a basic script with empty imports using the import map. I think I’m on track to set this up smoothly!\n\nindex.html\n\n```index.html\n```\n\nmain.js\n```main.js\n```","page_description","cursor","eyJpZCI6Imp0dzRudzI3M21kODZ4dzdla2E2In0","token","included",[],"about",{"_179":-5},"parent","routes/browser/layout","actionData","errors"]