Retro Timestamp Corridor

\n Click and drag to add more smoke particles\n

\n \n\n",[164],"598fa5e2-0beb-11f0-bde8-569c3dd06744","README.md","598fa6aa-0beb-11f0-bde8-569c3dd06744",7,["D",1743176589622],"# Retro Timestamp Corridor\n\nA retro-style visualization featuring smoke particles moving down an endless corridor with walls and floor made of timestamps.\n\n## Features\n\n- 3D corridor effect with perspective\n- Walls and floor constructed from the current timestamp\n- Pixelated smoke particles that move down the corridor\n- Retro aesthetic with scan lines and green text\n- Interactive - click and drag to add more smoke particles\n\n## Project Structure\n\n- `main.js` - Main entry point and p5.js setup\n- `particles.js` - Smoke particle system implementation\n- `utils.js` - Helper functions for drawing the corridor and timestamps\n- `index.html` - HTML wrapper with styling\n\n## How It Works\n\nThe project uses p5.js's WEBGL mode to create a 3D corridor effect. The current timestamp is displayed on the walls and floor in a grid pattern. Smoke particles are generated and move down the corridor, creating a dynamic visual effect.\n\n## Interaction\n\nClick and drag anywhere on the canvas to add more smoke particles.",[171],"a67f24cc-0beb-11f0-bfa7-569c3dd06744","assets","f165c857-5f10-447d-8036-66073e46573f",9,["D",1743176718691],"directory",[178],"pulls","branches","forks","envVars",{"_191":42,"_193":42},"connections",{"_191":42,"_192":42},"count","unfilledCount","emptyCount",{"_18":177,"_20":178,"_133":179,"_135":-5,"_136":68,"_137":180,"_138":37,"_22":224,"_65":42,"_140":182,"_142":-5,"_144":26,"_145":-5,"_202":225,"_87":226},{"_18":217,"_20":218,"_133":219,"_135":179,"_136":68,"_137":180,"_138":37,"_22":220,"_65":42,"_140":141,"_142":221,"_144":26,"_145":-5,"_202":222,"_87":223},{"_18":170,"_20":171,"_133":172,"_135":-5,"_136":68,"_137":173,"_138":37,"_22":214,"_65":42,"_140":98,"_142":175,"_144":26,"_145":-5,"_202":215,"_87":216},{"_18":163,"_20":164,"_133":165,"_135":-5,"_136":68,"_137":166,"_138":37,"_22":211,"_65":42,"_140":98,"_142":168,"_144":26,"_145":-5,"_202":212,"_87":213},{"_18":154,"_20":155,"_133":156,"_135":-5,"_136":68,"_137":157,"_138":37,"_22":208,"_65":159,"_140":160,"_142":161,"_144":26,"_145":-5,"_202":209,"_87":210},{"_18":147,"_20":148,"_133":149,"_135":-5,"_136":68,"_137":150,"_138":37,"_22":205,"_65":42,"_140":141,"_142":152,"_144":26,"_145":-5,"_202":206,"_87":207},{"_18":131,"_20":132,"_133":134,"_135":-5,"_136":68,"_137":66,"_138":37,"_22":201,"_65":42,"_140":141,"_142":143,"_144":26,"_145":-5,"_202":203,"_87":204},["D",1743177470430],"children",[],[132],["D",1743176740086],[],[148],["D",1743176800506],[],[155],["D",1743176583999],[],[164],["D",1743176589622],[],[171],"a67f1b9e-0beb-11f0-bfa7-569c3dd06744","particle_texture.js","a67f1cc0-0beb-11f0-bfa7-569c3dd06744",["D",1743176718691],"// This file creates a procedural particle texture\n// We'll use this instead of loading an external image\n\nexport function createParticleTexture(p5, size = 64) {\n // Create a graphics buffer to draw our particle texture\n const pg = p5.createGraphics(size, size);\n \n // Set up the graphics buffer\n pg.background(0, 0);\n pg.noStroke();\n \n // Draw a soft, circular gradient for the particle\n for (let i = 0; i < size; i++) {\n const alpha = p5.map(i, 0, size, 255, 0);\n pg.fill(255, alpha);\n pg.ellipse(size/2, size/2, size - i, size - i);\n }\n \n // Add some noise to make it look more like smoke\n pg.loadPixels();\n for (let x = 0; x < size; x++) {\n for (let y = 0; y < size; y++) {\n const index = (x + y * size) * 4 + 3; // Alpha channel\n if (pg.pixels[index] > 0) {\n // Add some noise to the alpha channel\n const noise = p5.random(-30, 30);\n pg.pixels[index] = p5.constrain(pg.pixels[index] + noise, 0, 255);\n }\n }\n }\n pg.updatePixels();\n \n return pg;\n}",[],[178,218],["D",1743176718691],[195],[178],["D",1743009599503],{"_16":17,"_85":81},{"_16":17,"_79":-5,"_80":81,"_32":33,"_82":83,"_84":26},{"_65":66,"_20":67,"_18":68,"_69":19,"_70":71,"_72":73,"_74":28,"_75":19,"_76":44,"_77":21,"_78":17},"ctx",{"_58":-5,"_108":264,"_265":266,"_267":268,"_269":26,"_270":26,"_271":26,"_272":37,"_273":-5,"_274":-7,"_275":-7,"_276":42,"_277":26,"_278":26,"_279":-5,"_280":26,"_281":26,"_282":26,"_283":-5},"ENV",{"_235":236,"_237":238,"_239":114,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search