[{"_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",1793697893889,"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,"_122":123,"_143":144,"_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":110,"_111":98,"_112":98,"_113":58,"_114":-5,"_115":-5,"_116":-5,"_117":118,"_119":-5,"_120":-5,"_121":58},"_type","id","yk8dwmse2doeq93q96vz","created_at","2025-11-10T03:45:47.125Z","created_by",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":-5,"_81":-5,"_82":58},"86cbc390-3774-4dba-842f-7676896f17ad","username","goofygoofguy2000","2025-11-10T00:11:29.413Z","avatar_url","https://lh3.googleusercontent.com/a/ACg8ocLfsCc3ezTtbOPiJNZEneH04v21CoPvtfFZ0TV4xVnAVgCo4Q=s96-c","discord_username","discord_id","is_admin","updated_at","2025-11-10T03:50:47.253Z","title","Glitchbox (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":109},"~type","project_stats","project_id","views",1651,"likes",12,"comments",14,"glitchbox-web-3","auto_set_current","allow_automatic_improvements","board_enabled","description","generated_description","from_template","domains",[],"thumbnail","video","has_active_experiment","project_revision",{"_67":122,"_68":124,"_63":92,"_70":125,"_126":-5,"_94":-5,"_127":-5,"_128":-5,"_72":129,"_130":131,"_103":69,"_83":132,"_96":-5,"_99":133,"_136":58,"_137":138,"_139":-5,"_140":-5,"_141":142},"019a6bde-b02e-702e-893a-2518d6492a3c","2025-11-10T03:45:47.566Z","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-10T03:50:47.382Z",{"_134":135},"multiplayer_count",0,"draft","site_id","NFSvjQCxN2eyjYOk1","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/019a6bdf-c462-7871-90ef-05229772f53d","site",{"_67":143,"_68":138,"_94":-5,"_70":145,"_146":147,"_148":149,"_150":151,"_85":86,"_163":164,"_165":166,"_171":-5,"_172":173,"_174":175,"_96":-5,"_176":177,"_178":179},"2025-11-10T03:45:53.745Z","state","done","model","gpt-5-mini","lore",{"_63":92,"_152":153,"_154":58,"_155":58,"_156":58,"_157":58,"_158":98,"_159":58,"_160":58,"_161":58,"_162":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",{"_167":168,"_169":170},"type","plaintext","text","#!/usr/bin/env python3\nimport os, math, random, time\nimport pygame\n\nWIDTH, HEIGHT = 1280, 720\nFPS = 60\nTILES = 18 \n\nBLACKBOX, COLORBOX, GLITCHBOX, MOSAIC = 0, 1, 2, 3\nMODE_NAMES = [\"Blackbox\", \"Colorbox\", \"Glitchbox\", \"Mosaic\"]\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\nclass Skybox:\n def __init__(self, tiles=TILES, mode=COLORBOX):\n self.tiles = tiles\n self.mode = mode\n self.colors = self.make_colors(mode)\n self.row_shift = [0]*6\n self.col_shift = [0]*6\n self.intensity = 1.0\n self.seeds = [random.random()*1000 for _ in range(6)]\n\n def make_colors(self, mode):\n N = self.tiles\n faces = [[[(0,0,0) for _ in range(N)] for _ in range(N)] for _ in range(6)]\n def gray_col():\n g = random.randint(60, 180); return (g,g,g)\n for f in range(6):\n for y in range(N):\n for x in range(N):\n if mode in (BLACKBOX, GLITCHBOX):\n col = gray_col()\n else:\n h = randf(0,6); col = hsv_to_rgb(h)\n col = tuple(clamp(ch + random.randint(-28,28), 0, 255) for ch in col)\n faces[f][y][x] = col\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 recolor(self):\n self.colors = self.make_colors(self.mode)\n\n def step(self):\n \n for f in range(6):\n if random.random() < 0.28 * self.intensity:\n self.row_shift[f] = (self.row_shift[f] + random.choice([-1,0,1])) % self.tiles\n if random.random() < 0.28 * self.intensity:\n self.col_shift[f] = (self.col_shift[f] + random.choice([-1,0,1])) % self.tiles\n if random.random() < 0.14 * self.intensity:\n self.recolor()\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.1\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):\n x,y,z = v\n z = (z + 3.0)\n if z <= 0.1: z = 0.1\n f = 780 / z\n return (WIDTH/2 + x*f, HEIGHT/2 - y*f), f\n\ndef face_to_xyz_scaled(scale, f, u, v):\n s = scale\n if f == 0: return ( s, v, -u)\n if f == 1: return (-s, v, u)\n if f == 2: return ( u, s, -v)\n if f == 3: return ( u, -s, v)\n if f == 4: return ( u, v, s)\n return (-u, v, -s)\n\ndef draw_glitchy_background(screen, intensity):\n \n w, h = screen.get_size()\n screen.fill((28, 28, 32))\n count = min(90, int(45 * intensity)) # perf cap\n for _ in range(count):\n n = random.randint(3, 6)\n pts = []\n cx, cy = randf(-0.2*w, 1.2*w), randf(-0.2*h, 1.2*h)\n radius = randf(100, 420)\n for i in range(n):\n ang = randf(0, 6.283)\n r = radius * randf(0.5, 1.2)\n pts.append((cx + math.cos(ang)*r, cy + math.sin(ang)*r))\n g = clamp(random.randint(70, 190) + random.randint(-30, 30), 50, 220)\n pygame.draw.polygon(screen, (g,g,g), pts, 0)\n\ndef draw_rainbow_center_cube(screen, cam, sky, t, scale=0.35, precision=False):\n \n N = sky.tiles\n wob = 0.010 * sky.intensity\n melt = 0.026 if precision else 0.0\n for face in [5,1,0,3,2,4]:\n seed = sky.seeds[face]\n for iy in range(N):\n for ix in range(N):\n jx = (ix + sky.col_shift[face]) % N\n jy = (iy + sky.row_shift[face]) % N\n col = sky.colors[face][jy][jx]\n j = int(40 * sky.intensity)\n col = tuple(clamp(c + random.randint(-j, j), 0, 255) for c in col)\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 def warp(u, v, kadd):\n k = seed + ix*0.31 + iy*0.71 + kadd\n u += wob * math.sin(t*3.0 + k) + wob*0.5*math.sin((u+v+t)*5.7 + k*1.9)\n v += wob * math.cos(t*2.4 + k*0.6) + wob*0.5*math.sin((u-t)*6.0 + 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 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 corners = [\n face_to_xyz_scaled(scale, face, du0, dv0),\n face_to_xyz_scaled(scale, face, du1, dv0b),\n face_to_xyz_scaled(scale, face, du1b, dv1),\n face_to_xyz_scaled(scale, face, du0b, dv1b),\n ]\n pts2d = [project(cam.apply(p))[0] for p in corners]\n pygame.draw.polygon(screen, col, pts2d, 0)\n\ndef draw_maroon_cube(screen, cam, pos, size=0.25):\n s = size*0.5\n verts = [(-s,-s,-s),( s,-s,-s),( s, s,-s),(-s, s,-s),\n (-s,-s, s),( s,-s, s),( s, s, s),(-s, s, s)]\n faces = [(0,1,2,3),(4,5,6,7),(0,1,5,4),(2,3,7,6),(1,2,6,5),(0,3,7,4)]\n depths = []\n for i, fidx in enumerate(faces):\n zavg = sum((cam.apply((verts[idx][0]+pos[0], verts[idx][1]+pos[1], verts[idx][2]+pos[2])))[2] for idx in fidx)/4.0\n depths.append((zavg, i))\n depths.sort(reverse=True)\n COL = (128, 20, 32) # redbox\n for _, i in depths:\n pts = []\n for idx in faces[i]:\n vx,vy,vz = verts[idx]\n vx += pos[0]; vy += pos[1]; vz += pos[2]\n pts.append(project(cam.apply((vx,vy,vz)))[0])\n pygame.draw.polygon(screen, COL, pts, 0)\n\ndef main():\n pygame.init()\n pygame.display.set_caption(\"glitchbox\")\n screen = pygame.display.set_mode((WIDTH, HEIGHT))\n clock = pygame.time.Clock()\n\n cam = Camera()\n sky_center = Skybox(tiles=TILES, mode=COLORBOX) \n mouse_locked = False\n invert_pitch = False\n precision_meltdown = False\n show_center = True\n\n \n spawned = []\n\n pygame.mouse.set_visible(True)\n\n running = True\n while running:\n dt = clock.tick(FPS) / 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 sky_center.intensity = clamp(sky_center.intensity + 0.5, 1.0, 8.0)\n elif e.key == pygame.K_p:\n precision_meltdown = not precision_meltdown\n elif e.key == pygame.K_c:\n show_center = not show_center\n elif e.key == pygame.K_h:\n \n fx, _, fz = cam.forward_flat()\n dist = 12.0 \n spawn = (cam.pos[0] + fx*dist, cam.pos[1], cam.pos[2] + fz*dist)\n spawned.append(spawn)\n elif e.key == pygame.K_z:\n cam.pos = [0.0, 0.0, 0.0]; cam.yaw = 0.0; cam.pitch = 0.0; spawned.clear()\n elif e.type == pygame.MOUSEWHEEL:\n wheel_move += e.y\n\n # mouse look\n if mouse_locked:\n mx, my = pygame.mouse.get_rel()\n cam.yaw += mx * 0.0033\n cam.pitch = clamp(cam.pitch + (my * 0.0033 if invert_pitch else -my * 0.0033), -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.05\n if keys[pygame.K_RIGHT]: cam.yaw += 0.05\n if keys[pygame.K_UP]: cam.pitch = clamp(cam.pitch - 0.05, -1.2, 1.2)\n if keys[pygame.K_DOWN]: cam.pitch = clamp(cam.pitch + 0.05, -1.2, 1.2)\n\n # movement\n boost = 2.8 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 = 780.0\n rx_cam = (mx - WIDTH/2) / f\n ry_cam = -(my - HEIGHT/2) / f\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.9 * wheel_move * (1.0 + 0.6*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 sky_center.step()\n\n # ----- RENDER -----\n \n draw_glitchy_background(screen, max(1.0, sky_center.intensity))\n\n \n for pos in spawned:\n draw_maroon_cube(screen, cam, pos, size=0.35)\n\n \n if show_center:\n draw_rainbow_center_cube(screen, cam, sky_center, t, scale=0.35, precision=precision_meltdown)\n\n # HUD\n font = pygame.font.SysFont(\"consolas,monospace\", 16)\n hud = f\"[Rainbow {sky_center.intensity:.1f}x] [C center {'ON' if show_center else 'OFF'}] [Spawned {len(spawned)}] [FPS {clock.get_fps():.1f}]\"\n help1 = \"L lock | Wheel move-to-cursor | WASD+QE | Shift boost | F glitch | P precision | C toggle center | H spawn maroon cube | I invert | Z reset | ESC\"\n screen.blit(font.render(hud, True, (235,235,240)), (10, 8))\n screen.blit(font.render(help1, True, (180,180,190)), (10, 28))\n\n pygame.display.flip()\n\n pygame.quit()\n\nif __name__ == '__main__':\n main()\n","url","link_url","/p/yk8dwmse2doeq93q96vz","versioned_link_url","/p/yk8dwmse2doeq93q96vz/1","yapping","**Creating web files**\n\nI need to produce multiple files like index.html and main.js to convert a Pygame project into web content. It seems simpler to create an index.html that includes an HTML canvas with JavaScript for the visuals. I’ll stick to three files: index.html, styles.css, and main.js. I won't use external libraries, and I might need to keep comments minimal while implementing a canvas animation with features like rotating cubes and WASD camera controls. Let’s keep it concise!\n\nindex.html\n\n```index.html\n```\n\nstyles.css\n```styles.css\n```\n\nmain.js\n```main.js\n```","page_description","The page features a blank HTML structure that includes a canvas element for graphical rendering and a HUD (heads-up display) for user interface…","cursor","eyJpZCI6InlrOGR3bXNlMmRvZXE5M3E5NnZ6In0","token","included",[],"about",{"_187":-5},"parent","routes/browser/layout","actionData","errors"]