[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_160":161,"_162":163},"routes/_app.x.$handle.$name",{"_16":17,"_20":21,"_88":67,"_89":90,"_65":-7,"_91":-5,"_13":92,"_93":94,"_11":95,"_96":97,"_98":99,"_100":-5,"_101":102,"_103":104,"_105":26,"_106":107,"_108":37,"_109":-5,"_110":-5,"_111":112},"routes/_app.x.$handle.$name.search.$(branch)",{"_11":12,"_13":14,"_15":-5,"_16":17},"files",[],"project",{"_18":19,"_20":21,"_22":23,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":-5,"_46":-5,"_47":-5,"_48":-5,"_49":50,"_51":50,"_52":53,"_54":53,"_55":53,"_56":50,"_57":50,"_58":59,"_60":61,"_62":63,"_64":26},"query","handle","shouser","id","8bb1b780-0a66-11f0-9f27-569c3dd06744","name","time_walk","createdAt",["D",1743009599503],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","imageUrl","userId","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",{"_16":17,"_87":83},"org",{"_16":17,"_81":-5,"_82":83,"_32":33,"_84":85,"_86":26},"branch",{"_65":66,"_20":67,"_18":68,"_69":19,"_70":71,"_72":73,"_74":28,"_75":76,"_77":78,"_79":21,"_80":17},"isOwned","version",35,"main","8bb4a06c-0a66-11f0-9f27-569c3dd06744","projectId","forkedBranchId","4d08a0e4-0a65-11f0-971d-569c3dd06744","forkedBranchVersion",2,"forkedProjectPrivacy","forkedProjectId","4d08533c-0a65-11f0-971d-569c3dd06744","forkedProjectOrgId","5280d928-ce75-4c0a-b953-779a130b1815","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_18":19,"_20":21,"_22":156,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":-5,"_46":-5,"_47":-5,"_48":-5,"_49":50,"_51":50,"_52":53,"_54":53,"_55":53,"_56":50,"_57":50,"_58":157,"_60":158,"_62":159,"_64":26},"tree",[151],[151],"counts",{"_139":42,"_140":141,"_142":143,"_144":145,"_146":147},"contents",[122],"file","upstreamProject",{"_18":76,"_20":119,"_30":-5,"_31":-5,"_27":28,"_58":120},"upstreamBranch",{"_18":71,"_22":113,"_114":115,"_20":67,"_69":76,"_65":73,"_70":-5,"_72":-5,"_116":117,"_24":-5,"_64":26,"_27":28,"_80":118,"_43":78,"_79":119},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1743009064883],"updatedAt",["D",1743009141058],"lockfileKey","1744484322748-esm.town_v_rwhaling_p5_project_template@2-main","rwhaling","p5_project_template",{"_16":118,"_87":121},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydXJhRDBpajRZUGY0QTVSeTBOUFprNzQxbjUifQ",{"_18":123,"_20":124,"_125":35,"_126":-5,"_127":68,"_128":66,"_129":37,"_22":130,"_65":131,"_132":133,"_134":135,"_136":26,"_137":17,"_89":138},"2c095908-0c07-11f0-96e7-569c3dd06744","main.js","fileId","parentId","branchId","branchVersion","latest",["D",1743188539147],34,"fileType","http","content","import type * as p5 from \"npm:@types/p5\";\n\n// Declare variables for comet particle system\nlet particles = [];\nlet cometPosition;\nlet cometTrail = [];\nlet tailPhase = 0;\nlet colorPhase = 0; // For changing background colors\n// Create a single unified speed variable for all animations\nlet unifiedSpeed = 0.8; // Slow movement speed - this now controls everything\n\nexport function setup() {\n // Create a canvas that fills the entire screen\n createCanvas(windowWidth, windowHeight);\n textAlign(CENTER);\n colorMode(HSB);\n\n // Initialize comet position fixed at the bottom center\n cometPosition = createVector(width / 2, height - height / 5);\n\n // Create initial particles\n for (let i = 0; i < 40; i++) {\n createCometParticle();\n }\n}\n\n// Handle window resizing\nexport function windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n // Adjust comet position after resize\n cometPosition = createVector(width / 2, height - height / 5);\n}\n\nexport function draw() {\n // Create a continuously changing gradient background - simplified version\n colorPhase += 0.005; // Slow color change speed\n\n // Create top and bottom colors that change over time\n let topHue = (sin(colorPhase) * 30 + 210) % 360; // Hue cycles through blues\n let bottomHue = (sin(colorPhase + 1) * 30 + 220) % 360;\n\n // Draw a simple background color first to avoid any gaps\n background(topHue, 75, 80);\n\n // Draw simplified gradient using rect() instead of line-by-line\n noStroke(); // Ensure no stroke is applied to rectangles\n\n // Draw gradient with 10 rectangles (sufficient for smooth appearance but much faster)\n let steps = 10;\n for (let i = 0; i < steps; i++) {\n let inter = i / (steps - 1);\n let y = inter * height;\n let rectHeight = height / steps + 2; // Add extra height to ensure overlap\n\n let currentHue = lerp(topHue, bottomHue, inter);\n fill(currentHue, 75, 80);\n rect(0, y, width, rectHeight); // Slightly overlapping rectangles\n }\n\n // Perspective settings for timestamps\n let vanishingPointY = 0; // Vanishing point is at the top\n let horizon = height * 0.15; // Horizon line position\n let numTimestamps = 25; // More timestamps for smoother effect\n let minSize = 8; // Size at the top (distance)\n let maxSize = 36; // Size at the bottom (foreground)\n\n // Using the unified speed variable\n let totalDistance = height - horizon;\n\n // Draw the timestamps with perspective effect\n for (let i = 0; i < numTimestamps; i++) {\n // Get current time\n let now = new Date();\n let hours = now.getHours().toString().padStart(2, \"0\");\n let minutes = now.getMinutes().toString().padStart(2, \"0\");\n let seconds = now.getSeconds().toString().padStart(2, \"0\");\n let milliseconds = now.getMilliseconds().toString().padStart(3, \"0\");\n let timeString = `${hours}:${minutes}:${seconds}.${milliseconds}`;\n\n // Calculate base position for this timestamp\n let basePos = i * (totalDistance / numTimestamps);\n\n // Apply movement with modulo for looping - using unifiedSpeed\n let yOffset = (frameCount * unifiedSpeed) % totalDistance;\n let y = horizon + ((basePos + yOffset) % totalDistance);\n\n // Calculate size based on position\n let progress = (y - horizon) / totalDistance; // 0 at horizon, 1 at bottom\n let fontSize = minSize + (maxSize - minSize) * progress;\n\n // Fade in as they appear at horizon\n let alpha = 255;\n if (y < horizon + 20) {\n alpha = map(y, horizon, horizon + 20, 0, 255);\n }\n\n // Draw the center timestamp\n textSize(fontSize);\n fill(0, 0, 0, alpha);\n text(timeString, width / 2, y);\n }\n\n // Create perspective walls of timestamps - using unifiedSpeed\n for (let y = horizon; y < height; y += 5) {\n let progress = (y - horizon) / totalDistance;\n let fontSize = (minSize + (maxSize - minSize) * progress) * 0.8;\n\n // Fade in at horizon\n let alpha = 255;\n if (y < horizon + 20) {\n alpha = map(y, horizon, horizon + 20, 0, 255);\n }\n\n // Get time for this row\n let now = new Date();\n let hours = now.getHours().toString().padStart(2, \"0\");\n let minutes = now.getMinutes().toString().padStart(2, \"0\");\n let seconds = now.getSeconds().toString().padStart(2, \"0\");\n let milliseconds = now.getMilliseconds().toString().padStart(3, \"0\");\n\n // Create a central corridor (road) - NARROWER ROAD\n // Changed from 0.1-0.3 to 0.05-0.2 for narrower road so walls are closer\n let roadWidth = map(progress, 0, 1, 0.05, 0.2);\n\n // Only draw timestamps outside the road area\n if (random() < 0.3) { // Control density of timestamps\n // Left side wall - CLOSER TO ROAD\n // Changed to move wall closer to road edge\n let leftSideX = random(width * (0.5 - roadWidth) - width * 0.1, width * (0.5 - roadWidth));\n\n // Calculate angle - mirroring the right wall's angle calculation\n let angleToVanishing = atan2(leftSideX - width / 2, horizon - y);\n let leftAngle = angleToVanishing + PI / 2 + random(-0.1, 0.1);\n\n push();\n translate(leftSideX, y);\n rotate(leftAngle);\n textSize(fontSize * random(0.7, 1.0));\n fill(0, 0, 0, alpha * 0.8);\n text(`${hours}:${minutes}:${seconds}.${Math.floor(random(999))}`, 0, 0);\n pop();\n }\n\n if (random() < 0.3) {\n // Right side wall - CLOSER TO ROAD\n // Changed to move wall closer to road edge\n let rightSideX = random(width * (0.5 + roadWidth), width * (0.5 + roadWidth) + width * 0.1);\n\n // Calculate angle - pointing toward vanishing point but with randomness\n let angleToVanishing = atan2(rightSideX - width / 2, horizon - y);\n let rightAngle = angleToVanishing - PI / 2 + random(-0.1, 0.1);\n\n push();\n translate(rightSideX, y);\n rotate(rightAngle);\n textSize(fontSize * random(0.7, 1.0));\n fill(0, 0, 0, alpha * 0.8);\n text(`${hours}:${minutes}:${seconds}.${Math.floor(random(999))}`, 0, 0);\n pop();\n }\n }\n\n // Add more scattered timestamps throughout the sides - USING UNIFIED SPEED\n for (let i = 0; i < 90; i++) { // Increased from 70 to 90 for more density\n // Use unified speed for all animations\n let yOffset = (frameCount * unifiedSpeed) % totalDistance;\n let baseY = i * (totalDistance / 90); // Distribute timestamps evenly\n // Apply movement to the timestamps on the sides with the same speed\n let y = horizon + ((baseY + yOffset) % totalDistance);\n\n let progress = (y - horizon) / totalDistance;\n\n // NARROWER ROAD\n let roadWidth = map(progress, 0, 1, 0.05, 0.2); // Narrower road\n let fontSize = (minSize + (maxSize - minSize) * progress) * 0.7;\n\n // Get randomized times\n let now = new Date();\n let hours = now.getHours().toString().padStart(2, \"0\");\n let minutes = now.getMinutes().toString().padStart(2, \"0\");\n let seconds = now.getSeconds().toString().padStart(2, \"0\");\n let milliseconds = Math.floor(random(999)).toString().padStart(3, \"0\");\n\n // Alpha based on y-position\n let alpha = 255;\n if (y < horizon + 20) {\n alpha = map(y, horizon, horizon + 20, 0, 255);\n }\n\n // Left side random timestamps - CLOSER TO ROAD\n if (random() < 0.5) {\n // Changed to position timestamps closer to road\n let x = random(width * 0.1, width * (0.5 - roadWidth * 0.5));\n\n // Calculate angle toward vanishing point with more randomness - mirrored from right side\n let angleToVanishing = atan2(x - width / 2, horizon - y);\n let displayAngle = angleToVanishing + PI / 2 + random(-0.3, 0.3);\n\n push();\n translate(x, y);\n rotate(displayAngle);\n textSize(fontSize * random(0.6, 1.0));\n fill(0, 0, 0, alpha * random(0.4, 0.7));\n text(`${hours}:${minutes}:${seconds}.${milliseconds}`, 0, 0);\n pop();\n }\n\n // Right side random timestamps - CLOSER TO ROAD\n if (random() < 0.5) {\n // Changed to position timestamps closer to road\n let x = random(width * (0.5 + roadWidth * 0.5), width * 0.9);\n\n // Calculate angle toward vanishing point with more randomness\n let angleToVanishing = atan2(x - width / 2, horizon - y);\n let displayAngle = angleToVanishing - PI / 2 + random(-0.3, 0.3);\n\n push();\n translate(x, y);\n rotate(displayAngle);\n textSize(fontSize * random(0.6, 1.0));\n fill(0, 0, 0, alpha * random(0.4, 0.7));\n text(`${hours}:${minutes}:${seconds}.${milliseconds}`, 0, 0);\n pop();\n }\n }\n\n // Update comet and trail\n updateComet();\n\n // Draw comet trail first (behind the comet head)\n drawCometTrail();\n\n // Calculate a small bounce for the comet head\n let bounceAmount = sin(frameCount * 0.1) * 3; // Small vertical bounce\n\n // Draw comet head (the bright center) - with slight bounce\n noStroke();\n fill(40, 100, 100); // Orange-yellow color\n ellipse(cometPosition.x, cometPosition.y + bounceAmount, 20, 20);\n\n // Draw glow around comet head\n drawingContext.shadowBlur = 15;\n drawingContext.shadowColor = color(40, 100, 100, 0.8);\n ellipse(cometPosition.x, cometPosition.y + bounceAmount, 16, 16);\n drawingContext.shadowBlur = 0;\n\n // Run the particle system\n updateParticles();\n drawParticles();\n\n // Add new particles\n if (frameCount % 2 === 0) {\n createCometParticle();\n }\n}\n\nfunction updateComet() {\n // Fixed position for comet head (base position, bounce is added when drawing)\n cometPosition.x = width / 2;\n cometPosition.y = height - height / 5;\n\n // Update the tail phase to create sideways movement\n tailPhase += 0.05;\n\n // Calculate bounce for consistency with head\n let bounceAmount = sin(frameCount * 0.1) * 3;\n\n // Generate a trail point starting from the middle of the comet head\n // with smaller oscillation radius\n let trailPoint = createVector(\n cometPosition.x + sin(tailPhase) * 8, // Smaller amplitude for oscillation\n cometPosition.y + bounceAmount, // Start at the center of the head, not below it\n );\n\n // Keep track of trail\n cometTrail.push(trailPoint);\n if (cometTrail.length > 20) {\n cometTrail.shift();\n }\n}\n\nfunction drawCometTrail() {\n noStroke();\n\n // Draw trail with gradient - using smaller circles\n for (let i = 0; i < cometTrail.length; i++) {\n let pos = cometTrail[i];\n let alpha = map(i, 0, cometTrail.length, 0, 200);\n // Use even smaller sizes for the trail\n let size = map(i, 0, cometTrail.length, 1, 5);\n\n fill(40, 100, 100, alpha / 255);\n ellipse(pos.x, pos.y, size, size);\n }\n}\n\nfunction createCometParticle() {\n // Create particles around the current trail point rather than the comet head\n let trailPos = cometTrail.length > 0\n ? cometTrail[cometTrail.length - 1]\n : createVector(cometPosition.x, cometPosition.y); // Start from the center of the head\n\n particles.push(\n new CometParticle(\n trailPos.x + random(-3, 3), // Smaller random spread\n trailPos.y + random(-3, 3), // Smaller random spread\n ),\n );\n}\n\n// Comet particle class\nclass CometParticle {\n constructor(x, y) {\n this.position = createVector(x, y);\n\n // Random velocity with downward bias (away from the top, toward the bottom)\n let angle = random(-PI / 4, PI / 4) + PI / 2; // Mostly downward with some sideways variation\n let speed = random(0.5, 2);\n this.velocity = p5.Vector.fromAngle(angle, speed);\n\n this.acceleration = createVector(0, 0);\n this.size = random(2, 8);\n\n // Colors ranging from yellow to orange to red\n this.color = color(random(15, 45), random(80, 100), 100, 0.7);\n this.lifespan = random(100, 200);\n this.maxLife = this.lifespan;\n }\n\n update() {\n // Add some sideways movement based on the tail phase\n let sideForce = createVector(sin(tailPhase + this.lifespan / 100) * 0.05, 0);\n this.acceleration.add(sideForce);\n\n this.velocity.add(this.acceleration);\n this.velocity.mult(0.98); // Damping\n this.position.add(this.velocity);\n this.lifespan -= 2;\n this.acceleration.mult(0);\n }\n\n display() {\n noStroke();\n\n // Fade out as lifespan decreases\n let alpha = map(this.lifespan, 0, this.maxLife, 0, 255);\n let particleColor = color(\n hue(this.color),\n saturation(this.color),\n brightness(this.color),\n alpha / 255,\n );\n\n fill(particleColor);\n ellipse(this.position.x, this.position.y, this.size, this.size);\n }\n\n isDead() {\n return this.lifespan <= 0;\n }\n}\n\nfunction updateParticles() {\n // Update and remove dead particles\n for (let i = particles.length - 1; i >= 0; i--) {\n particles[i].update();\n if (particles[i].isDead()) {\n particles.splice(i, 1);\n }\n }\n}\n\nfunction drawParticles() {\n // Draw all particles\n for (let particle of particles) {\n particle.display();\n }\n}\n\nimport { sketch } from \"https://esm.town/v/saolsen/p5\";\nexport default sketch(import.meta.url);","deleted","label",[124],"pulls","branches",7,"forks",1,"envVars",{"_148":42,"_150":42},"connections",{"_148":42,"_149":42},"count","unfilledCount","emptyCount",{"_18":123,"_20":124,"_125":35,"_126":-5,"_127":68,"_128":66,"_129":37,"_22":152,"_65":131,"_132":133,"_134":135,"_136":26,"_137":17,"_153":154,"_89":155},["D",1743188539147],"children",[],[124],["D",1743009599503],{"_16":17,"_87":83},{"_16":17,"_81":-5,"_82":83,"_32":33,"_84":85,"_86":26},{"_65":66,"_20":67,"_18":68,"_69":19,"_70":71,"_72":73,"_74":28,"_75":76,"_77":78,"_79":21,"_80":17},"ctx",{"_58":-5,"_110":193,"_194":195,"_196":197,"_198":26,"_199":26,"_200":26,"_201":37,"_202":-5,"_203":-7,"_204":-7,"_205":42,"_206":26,"_207":26,"_208":-5,"_209":26,"_210":26,"_211":26,"_212":-5},"ENV",{"_164":165,"_166":167,"_168":67,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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