[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_171":172,"_173":174},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_108":109,"_39":-7,"_110":-5,"_17":111,"_112":113,"_114":115,"_116":117,"_118":119,"_120":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":78,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":20,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5},"handle","artivilla","name","time_walk","branchName","main","project",{"_31":58,"_13":14,"_33":68,"_47":-5,"_69":25,"_49":50,"_70":50,"_71":-5,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":-5,"_81":20,"_53":82,"_83":-5,"_84":-5,"_85":-5,"_86":-5,"_87":88,"_89":88,"_90":91,"_92":91,"_93":91,"_94":88,"_95":88,"_96":97,"_98":99,"_100":27,"_48":25},"ahead",0,"behind","diff",{"_62":63,"_64":65,"_66":67},"hasChanges",false,"sourceBranch",{"_39":56,"_13":16,"_31":57,"_37":58,"_41":32,"_43":40,"_59":50,"_60":38,"_61":54,"_55":14,"_51":12},"targetBranch",{"_31":32,"_33":34,"_35":36,"_13":16,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":-5,"_48":25,"_49":50,"_51":52,"_53":54,"_55":14},"pull","id","8bb4a06c-0a66-11f0-9f27-569c3dd06744","createdAt",["D",1743009599503],"updatedAt",["D",1743188539147],"projectId","8bb1b780-0a66-11f0-9f27-569c3dd06744","version",35,"forkedBranchId","4d08a0e4-0a65-11f0-971d-569c3dd06744","forkedBranchVersion",2,"lockfileKey","1744494117142-esm.town_v_shouser_time_walk@35-main","deletedAt","isOwned","privacy","public","userHandle","shouser","orgId","a64c2ee7-6cd7-4fb7-9ff6-03782ed89739","projectName",1,"ee027128-0eac-11f0-9471-569c3dd06744","edfff83a-0eac-11f0-9471-569c3dd06744","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[],"deleted",[],"modified",[],["D",1743479633853],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","d56bd8b2-a31e-4821-93e6-bcbdd41c83ba","pinnedFileId","ad27201e-1afb-4eea-a89d-28aceb1cd71f","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","0d30098c-721f-4d42-b17b-1da1e51d05e7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_107":103},"org",{"_11":12,"_101":-5,"_102":103,"_73":74,"_104":105,"_106":25},"branch","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/05b096c6-70cf-4d2b-51e5-6c69c44dbf00/square512?exp=1789592547&sig=b3b8a42bda018c80d6520ba4f6f41eb00aec24186cb6eb69b88a02416c67fc7f","tier","free","canRestrictVals","profileImageUrl","path","","adoptOrgId",{"_31":58,"_13":14,"_33":167,"_47":-5,"_69":25,"_49":50,"_70":50,"_71":-5,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":-5,"_81":20,"_53":82,"_83":-5,"_84":-5,"_85":-5,"_86":-5,"_87":88,"_89":88,"_90":91,"_92":91,"_93":91,"_94":88,"_95":88,"_96":168,"_98":169,"_100":170,"_48":25},"tree",[162],"files",[162],"counts",{"_152":20,"_153":56,"_154":20,"_155":156,"_157":158},"contents",[137],"file","upstreamProject",{"_31":38,"_13":14,"_71":-5,"_72":-5,"_49":50,"_96":135},"upstreamBranch",{"_31":32,"_33":133,"_35":134,"_13":16,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":-5,"_48":25,"_49":50,"_51":52,"_53":54,"_55":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1743009599503],["D",1743188539147],{"_11":52,"_107":136},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9",{"_31":138,"_13":139,"_140":76,"_141":-5,"_142":57,"_143":56,"_144":78,"_33":145,"_39":20,"_146":147,"_148":149,"_64":25,"_150":-5,"_108":151},"ee043d8c-0eac-11f0-9471-569c3dd06744","main.js","fileId","parentId","branchId","branchVersion","latest",["D",1743479633853],"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);","label",[139],"pulls","branches","forks","envVars",{"_159":20,"_161":20},"connections",{"_159":20,"_160":20},"count","unfilledCount","emptyCount",{"_31":138,"_13":139,"_140":76,"_141":-5,"_142":57,"_143":56,"_144":78,"_33":163,"_39":20,"_146":147,"_148":149,"_64":25,"_150":-5,"_164":165,"_108":166},["D",1743479633853],"children",[],[139],["D",1743479633853],{"_11":12,"_107":103},{"_11":12,"_101":-5,"_102":103,"_73":74,"_104":105,"_106":25},{"_39":56,"_13":16,"_31":57,"_37":58,"_41":32,"_43":40,"_59":50,"_60":38,"_61":54,"_55":14,"_51":12},"ctx",{"_96":-5,"_130":204,"_205":206,"_207":208,"_209":25,"_210":25,"_211":25,"_212":78,"_213":-5,"_214":-7,"_215":-7,"_216":20,"_217":25,"_218":25,"_219":-5,"_220":25,"_221":25,"_222":25,"_223":-5},"ENV",{"_175":176,"_177":178,"_179":16,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203},"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"]

Compare

Mergeartivilla/mainintoshouser/main