[{"_1":2,"_189":-5,"_190":-5},"loaderData",{"_3":4,"_61":62,"_188":-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",1793694393073,"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,"_142":143,"_180":181,"_182":-5,"_183":184,"_185":186},"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","5n7hq_xarkbt7umwmyti","created_at","2025-11-16T15:07:47.289Z","created_by",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":-5,"_81":-5,"_82":58},"0b6f4480-2773-434a-94af-7a704aa5d124","username","UltimateTheWebsimEditor","2025-09-12T21:37:41.753Z","avatar_url","https://lh3.googleusercontent.com/a/ACg8ocK1oMg9aJuXN9SkSqe6QTxaqHNRYlu51VFSz5JHqE_HI6-Iuvo=s96-c","discord_username","discord_id","is_admin","updated_at","2025-11-23T19:06:15.606Z","title","ColorBox Simulation.","comments_mode","open","visibility","public","current_version",5,"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",440,"likes",1,"comments","interactive-joystick-interface","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,"_135":58,"_136":137,"_138":-5,"_139":-5,"_140":141},"019ab211-d6e2-7229-b083-09d0608f485b","2025-11-23T18:55:04.930Z","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},"2025-11-23T19:06:15.866Z",{"_133":134},"multiplayer_count",0,"draft","site_id","lIcihVQXLdBV9lnvJ","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/019ab212-ca5d-7b69-9c87-8206ef1a6335","site",{"_67":142,"_68":137,"_94":-5,"_70":144,"_145":146,"_147":148,"_149":150,"_85":162,"_163":164,"_165":166,"_171":-5,"_172":173,"_174":175,"_96":-5,"_176":177,"_178":179},"2025-11-23T18:55:17.616Z","state","done","model","gpt-5.1","lore",{"_63":107,"_151":152,"_153":58,"_154":58,"_155":58,"_156":58,"_157":98,"_158":58,"_159":58,"_160":58,"_161":58},"attachments",[],"enableMultiplayer_v2","enableMobilePrompt","enableLLM2","enableComments","enableVideo","enableApi","enableTweaks","enableDB","enableDB_v2_1","colorbox web","owner",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":-5,"_81":-5,"_82":58},"prompt",{"_167":168,"_169":170},"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/5n7hq_xarkbt7umwmyti","versioned_link_url","/p/5n7hq_xarkbt7umwmyti/5","yapping","**Planning JS Project**\n\nI'm considering using JS libraries from esm.sh with an import map and if none are used still providing an empty map. I’ll create index.html, main.js, and maybe a sky.js. There’s a need for performance considerations, like creating an animation loop with requestAnimationFrame and caching points. For rendering, I might use an offscreen canvas. I should implement keyboard and mouse support while keeping the instructions minimal unless specifically requested.\n**Defining UI Features**\n\nI’m considering whether to include a small HUD overlay, which could show the mode and FPS. I need to implement different modes like Rainbow and HUGE, toggled with 'M'. Other controls will include F for glitch effects, P for precision adjustments, I for pitch inversion, Z for resetting, and L to lock the pointer if supported. Additionally, I'll handle wheel movement to shift the camera. I’ll need to ensure the canvas fits the iframe without scrolling, using the full window for output.\n\nindex.html\n\n```index.html\n```\n\nmain.js\n```main.js\n```","page_description","The page features a fullscreen canvas with a dark background. It includes an overlay displaying text with styling for visibility, likely for user…","cursor","eyJpZCI6IjVuN2hxX3hhcmtidDd1bXdteXRpIn0","token","included",[],"about",{"_187":-5},"parent","routes/browser/layout","actionData","errors"]