Retro Timestamp Corridor

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_218":219,"_220":221},"routes/_app.x.$handle.$name",{"_99":98,"_33":46,"_107":87,"_28":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":27,"_124":125,"_126":25,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_33":46,"_39":47,"_48":-5,"_49":27,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":27},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":29},"file",{"_31":32,"_33":29,"_34":38,"_36":37,"_39":40,"_41":14,"_42":43,"_24":27},"previous",{"_31":32,"_33":29,"_34":35,"_36":37},"deleted",true,"deletedHere",false,"path","main.js","latestPath","fileId","52b172a0-0beb-11f0-952a-569c3dd06744","name","fileType","script","content","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);","http","createdAt",["D",1743176637204],"branchVersion","branchId","036e2922-0beb-11f0-a397-569c3dd06744","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","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",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":55,"_103":104,"_105":27},"branch",{"_13":86,"_33":87,"_44":43,"_88":45,"_89":90,"_91":92,"_93":51,"_94":45,"_95":65,"_96":46,"_97":98},"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",{"_44":45,"_33":46,"_39":214,"_48":-5,"_49":27,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":215,"_81":216,"_83":217,"_85":27},"tree",[193,194,195,196,197],"files",[193,194,195,196,197],"counts",{"_183":63,"_184":179,"_185":167,"_186":187,"_188":189},"contents",[145,146,147,148,149],"upstreamProject",{"_44":140,"_33":141,"_53":-5,"_54":-5,"_50":51,"_79":142},"upstreamBranch",{"_44":90,"_39":131,"_132":133,"_33":134,"_88":45,"_13":135,"_89":136,"_91":137,"_138":139,"_48":-5,"_85":27,"_50":51,"_97":98,"_64":65,"_96":46},"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",{"_99":143,"_106":144},"rwhaling","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydXJhRDBpajRZUGY0QTVSeTBOUFprNzQxbjUifQ",{"_44":176,"_33":177,"_31":178,"_153":-5,"_42":43,"_41":179,"_154":25,"_39":180,"_13":63,"_34":20,"_36":181,"_24":27,"_157":-5,"_28":182},{"_44":169,"_33":170,"_31":171,"_153":-5,"_42":43,"_41":172,"_154":25,"_39":173,"_13":63,"_34":20,"_36":174,"_24":27,"_157":-5,"_28":175},{"_44":165,"_33":29,"_31":32,"_153":-5,"_42":43,"_41":14,"_154":27,"_39":166,"_13":167,"_34":38,"_36":37,"_24":27,"_157":-5,"_28":168},{"_44":159,"_33":160,"_31":161,"_153":-5,"_42":43,"_41":137,"_154":27,"_39":162,"_13":63,"_34":35,"_36":163,"_24":27,"_157":-5,"_28":164},{"_44":150,"_33":151,"_31":152,"_153":-5,"_42":43,"_41":92,"_154":27,"_39":155,"_13":63,"_34":35,"_36":156,"_24":27,"_157":-5,"_28":158},"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",[151],"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}",[160],"75ecc288-0beb-11f0-96a0-569c3dd06744",["D",1743176637204],1,[29],"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",[170],"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.",[177],"pulls","branches","forks","envVars",{"_190":63,"_192":63},"connections",{"_190":63,"_191":63},"count","unfilledCount","emptyCount",{"_44":176,"_33":177,"_31":178,"_153":-5,"_42":43,"_41":179,"_154":25,"_39":211,"_13":63,"_34":20,"_36":181,"_24":27,"_157":-5,"_199":212,"_28":213},{"_44":169,"_33":170,"_31":171,"_153":-5,"_42":43,"_41":172,"_154":25,"_39":208,"_13":63,"_34":20,"_36":174,"_24":27,"_157":-5,"_199":209,"_28":210},{"_44":165,"_33":29,"_31":32,"_153":-5,"_42":43,"_41":14,"_154":27,"_39":205,"_13":167,"_34":38,"_36":37,"_24":27,"_157":-5,"_199":206,"_28":207},{"_44":159,"_33":160,"_31":161,"_153":-5,"_42":43,"_41":137,"_154":27,"_39":202,"_13":63,"_34":35,"_36":163,"_24":27,"_157":-5,"_199":203,"_28":204},{"_44":150,"_33":151,"_31":152,"_153":-5,"_42":43,"_41":92,"_154":27,"_39":198,"_13":63,"_34":35,"_36":156,"_24":27,"_157":-5,"_199":200,"_28":201},["D",1743176562594],"children",[],[151],["D",1743176550644],[],[160],["D",1743176637204],[],[29],["D",1743176583999],[],[170],["D",1743176589622],[],[177],["D",1743009599503],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":55,"_103":104,"_105":27},{"_13":86,"_33":87,"_44":43,"_88":45,"_89":90,"_91":92,"_93":51,"_94":45,"_95":65,"_96":46,"_97":98},"ctx",{"_79":-5,"_128":251,"_252":253,"_254":255,"_256":27,"_257":27,"_258":27,"_259":25,"_260":-5,"_261":-7,"_262":-7,"_263":63,"_264":27,"_265":27,"_266":-5,"_267":27,"_268":27,"_269":27,"_270":-5},"ENV",{"_222":223,"_224":225,"_226":134,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v8