Retro Timestamp Corridor

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

\n \n\n",[127],"1029d6dbc0d2af53360a5f538b695ca2afde7c284eb1d26f8cbdf8244ac7ca64","assets/particle_texture.js",{"_32":139,"_13":140,"_78":141,"_80":142,"_81":59,"_82":143,"_84":26,"_34":144,"_41":113,"_87":114,"_89":145,"_66":51,"_91":-5,"_92":-7,"_71":146,"_94":147},"a67f1b9e-0beb-11f0-bfa7-569c3dd06744","particle_texture.js","a67f1cc0-0beb-11f0-bfa7-569c3dd06744","f165c857-5f10-447d-8036-66073e46573f",9,["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}",[148,140],"05c7c1015819274fea475df4f170afa181e4f9ba6b0eb07b8d7743f07485606c","assets",{"_32":150,"_13":148,"_78":142,"_80":-5,"_81":59,"_82":143,"_84":26,"_34":151,"_41":113,"_87":152,"_89":-5,"_66":51,"_91":-5,"_92":-7,"_71":153,"_94":-5},"a67f24cc-0beb-11f0-bfa7-569c3dd06744",["D",1743176718691],"directory",[148],"README.md",{"_32":156,"_13":154,"_78":157,"_80":-5,"_81":59,"_82":158,"_84":26,"_34":159,"_41":113,"_87":133,"_89":160,"_66":51,"_91":-5,"_92":-7,"_71":161,"_94":162},"598fa5e2-0beb-11f0-bde8-569c3dd06744","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.",[154],"a8ed19d5bf218e38336166cf1866224868c1be7c0c914fe7483695a79840f464",["D",1743009599503],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","387c2a1a-af32-4662-ba80-cb97133b520c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion",20,"likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_200":196},"org",{"_11":12,"_194":-5,"_195":196,"_168":169,"_197":198,"_199":51},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":40,"_13":14,"_34":280,"_49":-5,"_164":51,"_52":53,"_165":53,"_166":-5,"_167":-5,"_168":169,"_170":97,"_171":26,"_172":-5,"_173":174,"_175":113,"_55":56,"_176":-5,"_177":-5,"_178":-5,"_179":-5,"_180":181,"_182":181,"_183":184,"_185":184,"_186":184,"_187":181,"_188":181,"_189":281,"_191":282,"_193":283,"_50":51},"tree",[259,261,262,263,264,265],"files",[259,260,261,262,263,264,265],"counts",{"_249":113,"_250":158,"_251":86,"_252":253,"_254":255},"contents",[231,232,233,234,235,236],"upstreamProject",{"_32":226,"_13":227,"_166":-5,"_167":-5,"_52":53,"_189":228},"upstreamBranch",{"_32":33,"_34":224,"_36":225,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1743009599503],["D",1743188539147],"4d08533c-0a65-11f0-971d-569c3dd06744","p5_project_template",{"_11":229,"_200":230},"rwhaling","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydXJhRDBpajRZUGY0QTVSeTBOUFprNzQxbjUifQ",{"_32":150,"_13":148,"_78":142,"_80":-5,"_81":59,"_82":143,"_84":26,"_34":247,"_41":113,"_87":152,"_89":-5,"_66":51,"_91":-5,"_71":248},{"_32":156,"_13":154,"_78":157,"_80":-5,"_81":59,"_82":158,"_84":26,"_34":245,"_41":113,"_87":133,"_89":160,"_66":51,"_91":-5,"_71":246},{"_32":129,"_13":127,"_78":130,"_80":-5,"_81":59,"_82":131,"_84":26,"_34":243,"_41":113,"_87":133,"_89":134,"_66":51,"_91":-5,"_71":244},{"_32":77,"_13":72,"_78":79,"_80":-5,"_81":59,"_82":83,"_84":26,"_34":241,"_41":86,"_87":88,"_89":90,"_66":51,"_91":-5,"_71":242},{"_32":120,"_13":118,"_78":121,"_80":-5,"_81":59,"_82":122,"_84":26,"_34":239,"_41":113,"_87":114,"_89":124,"_66":51,"_91":-5,"_71":240},{"_32":110,"_13":108,"_78":111,"_80":-5,"_81":59,"_82":58,"_84":26,"_34":237,"_41":113,"_87":114,"_89":115,"_66":51,"_91":-5,"_71":238},["D",1743177470430],[108],["D",1743176740086],[118],["D",1743176800506],[72],["D",1743176583999],[127],["D",1743176589622],[154],["D",1743176718691],[148],"pulls","branches","forks","envVars",{"_256":113,"_258":113},"connections",{"_256":113,"_257":113},"count","unfilledCount","emptyCount",{"_32":150,"_13":148,"_78":142,"_80":-5,"_81":59,"_82":143,"_84":26,"_34":151,"_41":113,"_87":152,"_89":-5,"_66":51,"_91":-5,"_92":278,"_71":279},{"_32":139,"_13":140,"_78":141,"_80":142,"_81":59,"_82":143,"_84":26,"_34":144,"_41":113,"_87":114,"_89":145,"_66":51,"_91":-5,"_92":276,"_71":277},{"_32":156,"_13":154,"_78":157,"_80":-5,"_81":59,"_82":158,"_84":26,"_34":159,"_41":113,"_87":133,"_89":160,"_66":51,"_91":-5,"_92":274,"_71":275},{"_32":129,"_13":127,"_78":130,"_80":-5,"_81":59,"_82":131,"_84":26,"_34":132,"_41":113,"_87":133,"_89":134,"_66":51,"_91":-5,"_92":272,"_71":273},{"_32":77,"_13":72,"_78":79,"_80":-5,"_81":59,"_82":83,"_84":26,"_34":85,"_41":86,"_87":88,"_89":90,"_66":51,"_91":-5,"_92":270,"_71":271},{"_32":120,"_13":118,"_78":121,"_80":-5,"_81":59,"_82":122,"_84":26,"_34":123,"_41":113,"_87":114,"_89":124,"_66":51,"_91":-5,"_92":268,"_71":269},{"_32":110,"_13":108,"_78":111,"_80":-5,"_81":59,"_82":58,"_84":26,"_34":112,"_41":113,"_87":114,"_89":115,"_66":51,"_91":-5,"_92":266,"_71":267},[],[108],[],[118],[],[72],[],[127],[],[154],[],[148,140],[260],[148],["D",1743009599503],{"_11":12,"_200":196},{"_11":12,"_194":-5,"_195":196,"_168":169,"_197":198,"_199":51},{"_41":58,"_13":16,"_32":59,"_39":40,"_43":33,"_45":60,"_61":53,"_62":40,"_63":56,"_57":14,"_54":12},"ctx",{"_189":-5,"_221":317,"_318":319,"_320":321,"_322":51,"_323":51,"_324":51,"_325":26,"_326":-5,"_327":-7,"_328":-7,"_329":113,"_330":51,"_331":51,"_332":-5,"_333":51,"_334":51,"_335":51,"_336":-5},"ENV",{"_288":289,"_290":291,"_292":38,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316},"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"]

Compare

Mergewalking-through-timeintomain

Hmain.js+89-6

README.md+26-0

assets

assets/particle_texture.js+34-0

index.html+40-0

particles.js+158-0

utils.js+135-0