[{"_1":2,"_185":-5,"_186":-5},"loaderData",{"_3":4,"_59":60,"_184":-5},"root",{"_5":6,"_21":-5,"_22":-5,"_23":24,"_42":-5,"_43":-5,"_44":-5,"_45":46,"_55":56,"_57":58},"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","origins",{"_47":48,"_49":50,"_51":52,"_53":54},"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",{"_61":62,"_63":64,"_118":119,"_139":140,"_176":177,"_178":-5,"_179":180,"_181":182},"version","1","project",{"_65":63,"_66":67,"_68":69,"_70":71,"_81":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":96,"_97":98,"_59":84,"_107":96,"_108":96,"_109":56,"_110":-5,"_111":-5,"_112":-5,"_113":114,"_115":-5,"_116":-5,"_117":56},"_type","id","usnkvgaj0pi8_nzesndr","created_at","2025-11-28T21:21:51.736Z","created_by",{"_65":22,"_66":72,"_73":74,"_68":75,"_76":77,"_78":-5,"_79":-5,"_80":56},"7989620a-ce77-4e1a-899f-f4e912863ead","username","fragrantglitchmoon5718054","2024-11-25T16:11:33.097Z","avatar_url","https://avatars.websim.com/7989620a-ce77-4e1a-899f-f4e912863ead/SKpdLf6FyIomi0Ea9.webp","discord_username","discord_id","is_admin","updated_at","2025-11-28T21:26:45.918Z","title","glitchbox","comments_mode","open","visibility","public","current_version",1,"last_posted_version","parent_id","parent_version","deleted_at","posted",true,"stats",{"_99":100,"_101":67,"_102":103,"_104":90,"_105":106},"~type","project_stats","project_id","views",195,"likes","comments",2,"auto_set_current","allow_automatic_improvements","board_enabled","description","generated_description","from_template","domains",[],"thumbnail","video","has_active_experiment","project_revision",{"_65":118,"_66":120,"_61":90,"_68":121,"_122":-5,"_92":-5,"_123":-5,"_124":-5,"_70":125,"_126":127,"_101":67,"_81":128,"_94":-5,"_97":129,"_132":56,"_133":134,"_135":-5,"_136":-5,"_137":138},"019acc58-05fd-78d0-95ad-35a56cb5cfe8","2025-11-28T21:21:52.125Z","visited_at","parent_revision_version","parent_revision_project_id",{"_65":22,"_66":72,"_73":74,"_68":75,"_76":77,"_78":-5,"_79":-5,"_80":56},"meta",{"_61":62},"2025-11-28T21:26:46.010Z",{"_130":131},"multiplayer_count",0,"draft","site_id","CGeEkwODwZxMRbLzw","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/019acc59-56ed-77d7-a815-69257940e348","site",{"_65":139,"_66":134,"_92":-5,"_68":141,"_142":143,"_144":145,"_146":147,"_83":84,"_159":160,"_161":162,"_167":-5,"_168":169,"_170":171,"_94":-5,"_172":173,"_174":175},"2025-11-28T21:21:59.897Z","state","done","model","gpt-5.1","lore",{"_61":90,"_148":149,"_150":56,"_151":56,"_152":56,"_153":56,"_154":56,"_155":56,"_156":56,"_157":56,"_158":56},"attachments",[],"enableMultiplayer_v2","enableMobilePrompt","enableLLM2","enableComments","enableVideo","enableApi","enableTweaks","enableDB","enableDB_v2_1","owner",{"_65":22,"_66":72,"_73":74,"_68":75,"_76":77,"_78":-5,"_79":-5,"_80":56},"prompt",{"_163":164,"_165":166},"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/usnkvgaj0pi8_nzesndr","versioned_link_url","/p/usnkvgaj0pi8_nzesndr/1","yapping","**Designing touch joystick code**\n\nI need to import the map, including nipplejs for a touch joystick. I'll get it from esm.sh and will use a type=\"module\" script. The design will have a dark background with a small HUD text in the top-left corner. First, I need to detect if it's a mobile device using 'ontouchstart' and check if the window width is less than 800 pixels. Then, I can set up nipplejs in the bottom left for movement and map axes for yaw and pitch. Let's create that code!\n\nindex.html\n\n```index.html\n```\n\nmain.js\n```main.js\n```","page_description","The page features a canvas element used for rendering interactive content and a heads-up display (HUD) for displaying relevant information. It utilizes…","cursor","eyJpZCI6InVzbmt2Z2FqMHBpOF9uemVzbmRyIn0","token","included",[],"about",{"_183":-5},"parent","routes/browser/layout","actionData","errors"]