[{"_1":2,"_192":-5,"_193":-5},"loaderData",{"_3":4,"_58":59,"_191":-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,"_121":122,"_142":143,"_177":178,"_179":-5,"_180":181},"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":55,"_95":96,"_58":106,"_107":108,"_109":55,"_110":-5,"_111":-5,"_112":-5,"_113":114,"_119":-5,"_120":-5},"_type","id","z2p4ymj18fg3dwj_xg55","created_at","2025-11-10T10:28:36.368Z","created_by",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":-5,"_78":-5,"_79":55},"83ab480b-b2d1-4d39-99fb-cd7f4e9910c0","username","crispbear9153887","2025-11-10T10:22:31.358Z","avatar_url","https://lh3.googleusercontent.com/a/ACg8ocL5dN5i7Ju8dreu-NeCKN2NM8SyLHdEZqBx0Qav4lkGPR2ZX9Q=s96-c","discord_username","discord_id","is_admin","updated_at","2025-11-10T10:53:37.018Z","title","Colorbox (Web)","comments_mode","open","visibility","public","current_version",1,"last_posted_version","parent_id","parent_version","deleted_at","posted","stats",{"_97":98,"_99":66,"_100":101,"_102":103,"_104":105},"~type","project_stats","project_id","views",497,"likes",2,"comments",6,"colorbox-web","auto_set_current",true,"enable_chat","description","generated_description","from_template","domains",[115],{"_116":117,"_80":118},"name","colorbox.on.websim.ai","2025-11-17T03:15:36.011Z","thumbnail","video","project_revision",{"_64":121,"_65":123,"_60":89,"_67":124,"_125":-5,"_91":-5,"_126":-5,"_127":-5,"_69":128,"_129":130,"_99":66,"_80":131,"_93":-5,"_95":132,"_135":55,"_136":137,"_138":-5,"_139":-5,"_140":141},"019a6d4f-7afe-7bc3-9006-d526eb0f5da6","2025-11-10T10:28:36.734Z","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-10T11:02:45.565Z",{"_133":134},"multiplayer_count",0,"draft","site_id","xXaoG5PeFSKEci2e9","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/019a6d66-6033-79ff-8706-a9f22839368c","site",{"_64":142,"_65":137,"_91":-5,"_67":144,"_145":146,"_147":148,"_149":150,"_82":83,"_162":163,"_164":165,"_170":-5,"_171":172,"_173":174,"_93":-5,"_175":176},"2025-11-10T10:52:40.673Z","state","done","model","gpt-5","lore",{"_60":89,"_151":152,"_153":55,"_154":108,"_155":55,"_156":55,"_157":55,"_158":108,"_159":55,"_160":55,"_161":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",{"_166":167,"_168":169},"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/z2p4ymj18fg3dwj_xg55","versioned_link_url","/p/z2p4ymj18fg3dwj_xg55/1","yapping","**Developing interactive skybox**\n\nI need to create interactive web content that replicates the rainbow sphericalized skybox using browser JS, possibly with Canvas or WebGL/Three.js. The user wants multiple files, including index.html, and I need to follow formatting rules with an import map using esm.sh CDN. Since it's for mobile, I’ll set up WASD for desktop controls, keeping in mind the movement guidelines for Three.js apps. It's possible to implement this with Three.js for better performance, but there may be some complexities with shader implementation. A 2D canvas rendering could work but might be too heavy for mobile, so I may need to optimize for lower resolutions. I'll ensure the necessary files are included, such as index.html, main.js, and styles.css.\n**Implementing mobile controls**\n\nI need to use modules without a bundler for my project, and the developer wants an import map for JS libraries, following guidelines to include libraries from esm.sh CDN. For Canvas, I don't need any additional libraries, but I could consider a tiny utility. Since I'm not using Three.js, I'll need to implement mobile controls through touch dragging for yaw/pitch and two-finger pinching to move. I think using nipple.js for a movement joystick is a good idea, creating two joysticks—one for movement and another for looking around. I’ll make sure to include these from esm.sh via the import map and follow the editing format closely.\n**Creating project files**\n\nAs I'm building out the new project files, here's the plan. I'll create an index.html that references the import map for nipple.js and main.js. The styles.css will be minimal. In main.js, I will handle Canvas rendering, SkyLayer, Camera, and the animation loop, including touch and keyboard controls with adaptive resolution scaling based on the fps average. I'll make the code concise for performance, using requestAnimationFrame and managing tile point caching. While I’ll simplify the rainbow color generation and ignore neighbor consistency for now, I’ll still implement cube face mapping to project properly.\n**Setting up polygon drawing**\n\nI’m looking to set up a polygon drawing system using the canvas context. I’ll start with context.beginPath and then fill shapes with color. The UI HUD text needs to be small and mobile-friendly, so I'll implement an adaptive scale with an offscreen canvas for rendering, then scale it to fit the screen. I’ll create the necessary files: index.html, styles.css, and main.js, while including nipple.js through the import map. Let’s get to crafting!\n\nindex.html\n\n```index.html\n```\n\nstyles.css\n```styles.css\n```\n\nmain.js\n```main.js\n```","cursor","eyJpZCI6InoycDR5bWoxOGZnM2R3al94ZzU1In0","token","included",[182],{"_64":183,"_99":66,"_184":-5,"_185":55,"_186":55,"_187":55,"_188":108,"_189":108,"_190":108},"project_permissions","user_id","can_edit","can_delete","can_edit_members","can_view","can_list","can_participate","routes/browser/layout","actionData","errors"]