[{"_1":2,"_178":-5,"_179":-5},"loaderData",{"_3":4,"_58":59,"_177":-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,"_117":118,"_137":138,"_172":173,"_174":-5,"_175":176},"version","1","project",{"_64":62,"_65":66,"_67":68,"_69":70,"_80":81,"_82":83,"_84":85,"_86":87,"_88":89,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":95,"_96":97,"_58":106,"_107":95,"_108":55,"_109":-5,"_110":-5,"_111":-5,"_112":113,"_114":-5,"_115":-5,"_116":55},"_type","id","0ekqo_ie3fiysa6c3wtr","created_at","2025-11-20T10:01:36.639Z","created_by",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":-5,"_78":-5,"_79":55},"7ccf0212-d7c8-49e7-866b-ea664cad2ec3","username","thirstyring3426674","2025-06-17T21:11:54.027Z","avatar_url","https://lh3.googleusercontent.com/a/ACg8ocIuQrb4srAdh876CrE4TWMHbIT2Hhj5JoYG73KvAsu1IDETWHaK=s96-c","discord_username","discord_id","is_admin","updated_at","2025-11-20T10:03:58.027Z","title","glitchbox (web)","comments_mode","open","visibility","public","current_version",1,"last_posted_version","parent_id","parent_version","deleted_at","posted",true,"stats",{"_98":99,"_100":66,"_101":102,"_103":104,"_105":104},"~type","project_stats","project_id","views",69,"likes",0,"comments","glitchbox-web","auto_set_current","enable_chat","description","generated_description","from_template","domains",[],"thumbnail","video","has_active_experiment","project_revision",{"_64":117,"_65":119,"_60":89,"_67":120,"_121":-5,"_91":-5,"_122":-5,"_123":-5,"_69":124,"_125":126,"_100":66,"_80":127,"_93":-5,"_96":128,"_130":55,"_131":132,"_133":-5,"_134":-5,"_135":136},"019aa0b6-5c2a-75fd-b29c-a6123793d15f","2025-11-20T10:01:37.066Z","visited_at","parent_revision_version","parent_revision_project_id",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":-5,"_78":-5,"_79":55},"meta",{"_60":61},"2025-11-20T10:03:58.155Z",{"_129":104},"multiplayer_count","draft","site_id","IfrShsyOcVIBlJJRm","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/019aa0b8-0d6c-72de-9f1d-b6369a6ff2d6","site",{"_64":137,"_65":132,"_91":-5,"_67":139,"_140":141,"_142":143,"_144":145,"_82":83,"_157":158,"_159":160,"_165":-5,"_166":167,"_168":169,"_93":-5,"_170":171},"2025-11-20T10:02:19.089Z","state","done","model","gpt-5.1","lore",{"_60":89,"_146":147,"_148":55,"_149":55,"_150":55,"_151":55,"_152":55,"_153":95,"_154":55,"_155":55,"_156":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":-5,"_78":-5,"_79":55},"prompt",{"_161":162,"_163":164},"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()","url","link_url","/p/0ekqo_ie3fiysa6c3wtr","versioned_link_url","/p/0ekqo_ie3fiysa6c3wtr/1","yapping","**Porting Pygame to JS**\n\nIt seems the user wants to convert Pygame Python code to JavaScript for a browser environment, specifically involving multiple files like index.html. Mobile controls like WASD and possibly nipple.js are mentioned for mobile inputs; however, since it’s a custom 3D projection and not three.js, nipple.js isn't necessary. I need to create a glitchy cube skybox, enable camera movement, and spawn cubes while using modules from esm.sh. I'll structure the files and code accordingly, keeping it straightforward and avoiding unnecessary details.\n**Structuring the Project**\n\nI want to keep things simple by creating files like camera.js, skybox.js, and draw.js, with main.js handling the imports. I also need to port utility functions such as clamp, randf, hsvToRgb, faceToXYZ, and project for good performance.\n\nI plan to set up mouse lock toggling with the L key and show small help text, considering the original had a HUD. I'll use a canvas size of 1280x720 and ensure it fits the window. I'll modify project settings to adapt to the current canvas size while keeping performance in mind. The final files I'll implement include index.html, main.js, camera.js, skybox.js, render.js, and possibly utils.js.\n\nindex.html\n\n```index.html\n```\n\nutils.js\n```utils.js\n```\n\ncamera.js\n```camera.js\n```\n\nskybox.js\n```skybox.js\n```\n\nrender.js\n```render.js\n```\n\nmain.js\n```main.js\n```","cursor","eyJpZCI6IjBla3FvX2llM2ZpeXNhNmMzd3RyIn0","token","included",[],"routes/browser/layout","actionData","errors"]