Retro Timestamp Corridor

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_241":242,"_243":244},"routes/_app.x.$handle.$name",{"_104":103,"_32":50,"_112":92,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_21":-5,"_124":125,"_126":127,"_128":25,"_129":130,"_131":63,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_48":49,"_32":50,"_36":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":61,"_62":63,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",9,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","assets","latestPath","fileId","f165c857-5f10-447d-8036-66073e46573f","name","fileType","directory","content","createdAt",["D",1743176718691],"branchVersion","branchId","036e2922-0beb-11f0-a397-569c3dd06744",{"_30":43,"_32":44,"_33":45,"_35":46,"_36":47,"_38":14,"_39":40,"_24":25},"assets/particle_texture.js","a67f1cc0-0beb-11f0-bfa7-569c3dd06744","particle_texture.js","script","// 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}",["D",1743176718691],"id","8bb1b780-0a66-11f0-9f27-569c3dd06744","time_walk",["D",1743009599503],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","387c2a1a-af32-4662-ba80-cb97133b520c","pinnedFileId","41f31f5a-5e09-40c5-b774-7013233bcd27","pinPreview",true,"pinMigrated","screenshotVersion",20,"likeCount",0,"orgId","a64c2ee7-6cd7-4fb7-9ff6-03782ed89739","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":-5,"_106":107,"_18":59,"_108":109,"_110":25},"branch",{"_13":91,"_32":92,"_48":40,"_93":49,"_94":95,"_96":97,"_98":55,"_99":49,"_100":70,"_101":50,"_102":103},"isOwned",18,"walking-through-time","projectId","forkedBranchId","8bb4a06c-0a66-11f0-9f27-569c3dd06744","forkedBranchVersion",3,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","shouser","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_32":50,"_36":237,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":61,"_62":63,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":238,"_86":239,"_88":240,"_90":25},"tree",[207,209,210,211,212,213],"files",[207,208,209,210,211,212,213],"counts",{"_197":68,"_198":190,"_199":176,"_200":201,"_202":203},"contents",[150,151,152,153,154,155],"upstreamProject",{"_48":145,"_32":146,"_57":-5,"_58":-5,"_54":55,"_84":147},"upstreamBranch",{"_48":95,"_36":136,"_137":138,"_32":139,"_93":49,"_13":140,"_94":141,"_96":142,"_143":144,"_52":-5,"_90":25,"_54":55,"_102":103,"_69":70,"_101":50},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1743009599503],"updatedAt",["D",1743188539147],"main",35,"4d08a0e4-0a65-11f0-971d-569c3dd06744",2,"lockfileKey","1744494117142-esm.town_v_shouser_time_walk@35-main","4d08533c-0a65-11f0-971d-569c3dd06744","p5_project_template",{"_104":148,"_111":149},"rwhaling","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydXJhRDBpajRZUGY0QTVSeTBOUFprNzQxbjUifQ",{"_48":194,"_32":28,"_30":31,"_159":-5,"_39":40,"_38":14,"_160":63,"_36":195,"_13":68,"_33":34,"_35":-5,"_24":25,"_163":-5,"_27":196},{"_48":187,"_32":188,"_30":189,"_159":-5,"_39":40,"_38":190,"_160":63,"_36":191,"_13":68,"_33":21,"_35":192,"_24":25,"_163":-5,"_27":193},{"_48":180,"_32":181,"_30":182,"_159":-5,"_39":40,"_38":183,"_160":63,"_36":184,"_13":68,"_33":21,"_35":185,"_24":25,"_163":-5,"_27":186},{"_48":171,"_32":172,"_30":173,"_159":-5,"_39":40,"_38":174,"_160":25,"_36":175,"_13":176,"_33":177,"_35":178,"_24":25,"_163":-5,"_27":179},{"_48":165,"_32":166,"_30":167,"_159":-5,"_39":40,"_38":142,"_160":25,"_36":168,"_13":68,"_33":45,"_35":169,"_24":25,"_163":-5,"_27":170},{"_48":156,"_32":157,"_30":158,"_159":-5,"_39":40,"_38":97,"_160":25,"_36":161,"_13":68,"_33":45,"_35":162,"_24":25,"_163":-5,"_27":164},"497332f0-0beb-11f0-9f46-569c3dd06744","utils.js","497333b8-0beb-11f0-9f46-569c3dd06744","parentId","latest",["D",1743176562594],"// Utility functions for the corridor effect\n\n// Draw a grid of timestamp text on a plane\nexport function drawTimestampGrid(p5, z, isFloor = false) {\n const gridSize = 40;\n const timestamp = getCurrentTimestamp();\n \n p5.push();\n if (isFloor) {\n p5.rotateX(p5.HALF_PI);\n }\n p5.translate(0, 0, z);\n \n p5.fill(30, 255, 180);\n p5.stroke(0, 200, 100);\n p5.strokeWeight(1);\n \n // Draw grid of timestamp text\n for (let x = -200; x <= 200; x += gridSize) {\n for (let y = -200; y <= 200; y += gridSize) {\n p5.push();\n p5.translate(x, y, 0);\n if (!isFloor) {\n p5.rotateY(p5.HALF_PI * (x > 0 ? 1 : -1));\n p5.translate(0, 0, 100);\n }\n p5.textSize(8);\n p5.textAlign(p5.CENTER, p5.CENTER);\n p5.text(timestamp, 0, 0);\n p5.pop();\n }\n }\n \n p5.pop();\n}\n\n// Get current timestamp in a retro format\nexport function getCurrentTimestamp() {\n const now = new Date();\n const hours = now.getHours().toString().padStart(2, '0');\n const minutes = now.getMinutes().toString().padStart(2, '0');\n const seconds = now.getSeconds().toString().padStart(2, '0');\n const millis = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0');\n \n return `${hours}:${minutes}:${seconds}:${millis}`;\n}\n\n// Draw the corridor\nexport function drawCorridor(p5, depth) {\n // Floor\n drawTimestampGrid(p5, 0, true);\n \n // Left wall\n p5.push();\n p5.translate(-100, -50, 0);\n drawTimestampGrid(p5, 0, false);\n p5.pop();\n \n // Right wall\n p5.push();\n p5.translate(100, -50, 0);\n drawTimestampGrid(p5, 0, false);\n p5.pop();\n \n // Draw some perspective lines\n p5.stroke(0, 255, 0, 100);\n p5.strokeWeight(2);\n p5.line(-100, 0, -depth, -100, 0, depth);\n p5.line(100, 0, -depth, 100, 0, depth);\n p5.line(-100, -100, -depth, -100, -100, depth);\n p5.line(100, -100, -depth, 100, -100, depth);\n}","label",[157],"42540f3a-0beb-11f0-a029-569c3dd06744","particles.js","42540fda-0beb-11f0-a029-569c3dd06744",["D",1743176550644],"// Smoke particle system\nexport class SmokeParticle {\n constructor(p5, x, y, z) {\n this.p5 = p5;\n this.pos = p5.createVector(x, y, z);\n this.vel = p5.createVector(\n p5.random(-0.5, 0.5),\n p5.random(-0.2, 0.2),\n p5.random(1, 3)\n );\n this.acc = p5.createVector(0, 0, 0);\n this.size = p5.random(5, 15);\n this.color = p5.color(\n p5.random(200, 255),\n p5.random(200, 255),\n p5.random(200, 255),\n p5.random(100, 200)\n );\n this.lifespan = 255;\n this.decay = p5.random(1, 3);\n }\n\n update() {\n this.vel.add(this.acc);\n this.pos.add(this.vel);\n this.lifespan -= this.decay;\n this.size *= 0.99;\n }\n\n display() {\n const p = this.p5;\n p.push();\n p.translate(this.pos.x, this.pos.y, this.pos.z);\n p.noStroke();\n this.color.setAlpha(this.lifespan);\n p.fill(this.color);\n p.rectMode(p.CENTER);\n p.rect(0, 0, this.size, this.size);\n p.pop();\n }\n\n isDead() {\n return this.lifespan <= 0;\n }\n}\n\nexport class SmokeSystem {\n constructor(p5) {\n this.p5 = p5;\n this.particles = [];\n this.maxParticles = 100;\n }\n\n addParticle() {\n if (this.particles.length < this.maxParticles) {\n this.particles.push(\n new SmokeParticle(\n this.p5,\n this.p5.random(-50, 50),\n this.p5.random(-20, 20),\n -200\n )\n );\n }\n }\n\n run() {\n for (let i = this.particles.length - 1; i >= 0; i--) {\n const particle = this.particles[i];\n particle.update();\n particle.display();\n \n if (particle.isDead()) {\n this.particles.splice(i, 1);\n }\n }\n }\n}",[166],"75ecc288-0beb-11f0-96a0-569c3dd06744","main.js","52b172a0-0beb-11f0-952a-569c3dd06744",8,["D",1743176637204],1,"http","import type * as p5 from \"npm:@types/p5\";\nimport { SmokeSystem } from \"./particles.js\";\nimport { drawCorridor, getCurrentTimestamp } from \"./utils.js\";\n\nlet smokeSystem;\nlet cameraZ = 0;\nlet retroFont;\n\nexport function preload() {\n // Load a retro-style font if available\n // retroFont = loadFont('https://cdn.jsdelivr.net/npm/press-start-2p-font@1.0.0/font.ttf');\n}\n\nexport function setup() {\n createCanvas(400, 400, WEBGL);\n smokeSystem = new SmokeSystem(window);\n \n // Set text properties\n textSize(8);\n textAlign(CENTER, CENTER);\n \n // Create pixelated look\n noSmooth();\n}\n\nexport function draw() {\n // Retro background\n background(0);\n \n // Add camera movement\n cameraZ += 0.5;\n if (cameraZ > 200) cameraZ = 0;\n \n // Set up the camera\n perspective(PI / 3.0, width / height, 10, 1000);\n camera(0, -30, 100 + cameraZ, 0, 0, -100, 0, 1, 0);\n \n // Add ambient light\n ambientLight(50);\n pointLight(255, 255, 255, 0, -50, 100);\n \n // Draw the corridor with timestamp walls\n drawCorridor(window, 500);\n \n // Display current timestamp at the top\n push();\n fill(0, 255, 0);\n stroke(0);\n textSize(16);\n text(getCurrentTimestamp(), 0, -80, -50);\n pop();\n \n // Add and update smoke particles\n for (let i = 0; i < 2; i++) {\n smokeSystem.addParticle();\n }\n smokeSystem.run();\n \n // Add some retro scan lines\n drawScanLines();\n}\n\nfunction drawScanLines() {\n push();\n noLights();\n translate(0, 0, 200);\n stroke(0, 255, 0, 20);\n strokeWeight(1);\n for (let y = -height/2; y < height/2; y += 4) {\n line(-width/2, y, width/2, y);\n }\n pop();\n}\n\n// Mouse interaction to add more particles\nexport function mouseDragged() {\n for (let i = 0; i < 5; i++) {\n smokeSystem.addParticle();\n }\n return false;\n}\n\nimport { sketch } from \"https://esm.town/v/saolsen/p5\";\nexport default sketch(import.meta.url);",[172],"563552d4-0beb-11f0-a7d6-569c3dd06744","index.html","563553a6-0beb-11f0-a7d6-569c3dd06744",6,["D",1743176583999],"\n\n\n \n \n Retro Timestamp Corridor\n \n\n\n

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

\n \n\n",[181],"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.",[188],"a67f24cc-0beb-11f0-bfa7-569c3dd06744",["D",1743176718691],[28],"pulls","branches","forks","envVars",{"_204":68,"_206":68},"connections",{"_204":68,"_205":68},"count","unfilledCount","emptyCount",{"_48":194,"_32":28,"_30":31,"_159":-5,"_39":40,"_38":14,"_160":63,"_36":234,"_13":68,"_33":34,"_35":-5,"_24":25,"_163":-5,"_215":235,"_27":236},{"_48":230,"_32":44,"_30":43,"_159":31,"_39":40,"_38":14,"_160":63,"_36":231,"_13":68,"_33":45,"_35":46,"_24":25,"_163":-5,"_215":232,"_27":233},{"_48":187,"_32":188,"_30":189,"_159":-5,"_39":40,"_38":190,"_160":63,"_36":227,"_13":68,"_33":21,"_35":192,"_24":25,"_163":-5,"_215":228,"_27":229},{"_48":180,"_32":181,"_30":182,"_159":-5,"_39":40,"_38":183,"_160":63,"_36":224,"_13":68,"_33":21,"_35":185,"_24":25,"_163":-5,"_215":225,"_27":226},{"_48":171,"_32":172,"_30":173,"_159":-5,"_39":40,"_38":174,"_160":25,"_36":221,"_13":176,"_33":177,"_35":178,"_24":25,"_163":-5,"_215":222,"_27":223},{"_48":165,"_32":166,"_30":167,"_159":-5,"_39":40,"_38":142,"_160":25,"_36":218,"_13":68,"_33":45,"_35":169,"_24":25,"_163":-5,"_215":219,"_27":220},{"_48":156,"_32":157,"_30":158,"_159":-5,"_39":40,"_38":97,"_160":25,"_36":214,"_13":68,"_33":45,"_35":162,"_24":25,"_163":-5,"_215":216,"_27":217},["D",1743176562594],"children",[],[157],["D",1743176550644],[],[166],["D",1743176637204],[],[172],["D",1743176583999],[],[181],["D",1743176589622],[],[188],"a67f1b9e-0beb-11f0-bfa7-569c3dd06744",["D",1743176718691],[],[28,44],["D",1743176718691],[208],[28],["D",1743009599503],{"_104":103,"_111":107},{"_104":103,"_105":-5,"_106":107,"_18":59,"_108":109,"_110":25},{"_13":91,"_32":92,"_48":40,"_93":49,"_94":95,"_96":97,"_98":55,"_99":49,"_100":70,"_101":50,"_102":103},"ctx",{"_84":-5,"_133":274,"_275":276,"_277":278,"_279":25,"_280":25,"_281":25,"_282":63,"_283":-5,"_284":-7,"_285":-7,"_286":68,"_287":25,"_288":25,"_289":-5,"_290":25,"_291":25,"_292":25,"_293":-5},"ENV",{"_245":246,"_247":248,"_249":139,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Diff · v9