[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_176":177,"_178":179},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_108":-7,"_109":110,"_91":-7,"_111":-5,"_15":112,"_113":114,"_115":116,"_117":118,"_119":120,"_121":-5,"_122":123,"_124":125,"_126":20,"_127":128,"_129":53,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.remixes",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26},"handle","shouser","name","time_walk","project",{"_27":64,"_13":14,"_54":65,"_66":-5,"_67":20,"_32":33,"_41":33,"_30":-5,"_31":-5,"_42":68,"_50":69,"_52":53,"_70":-5,"_71":72,"_56":22,"_44":73,"_74":-5,"_75":-5,"_76":-5,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_34":87,"_48":88,"_89":90,"_46":20},"forks",[39],"hasNext",false,"page",0,"forkCount",1,"upstream",{"_27":28,"_13":29,"_30":-5,"_31":-5,"_32":33,"_34":35},"id","4d08533c-0a65-11f0-971d-569c3dd06744","p5_project_template","description","imageUrl","privacy","public","user",{"_11":36,"_37":38},"rwhaling","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydXJhRDBpajRZUGY0QTVSeTBOUFprNzQxbjUifQ",{"_27":40,"_13":14,"_30":-5,"_31":-5,"_32":33,"_41":33,"_42":43,"_44":45,"_46":20,"_34":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":22},"edfff83a-0eac-11f0-9471-569c3dd06744","httpPrivacy","userId","d56bd8b2-a31e-4821-93e6-bcbdd41c83ba","orgId","0d30098c-721f-4d42-b17b-1da1e51d05e7","isOwned",{"_11":57,"_37":60},"org",{"_11":57,"_58":-5,"_59":60,"_42":43,"_61":62,"_63":20},"pinnedFileId","ad27201e-1afb-4eea-a89d-28aceb1cd71f","pinPreview",true,"createdAt",["D",1743479633853],"likeCount","artivilla","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/05b096c6-70cf-4d2b-51e5-6c69c44dbf00/square512?exp=1789567199&sig=03b03b887ae7376f7baa2a7b1ebcd3864c2d99c7bc413319f6377d2e15476782","tier","free","canRestrictVals","8bb1b780-0a66-11f0-9f27-569c3dd06744",["D",1743009599503],"deletedAt","legacyEnvVars","387c2a1a-af32-4662-ba80-cb97133b520c","41f31f5a-5e09-40c5-b774-7013233bcd27","pinMigrated","screenshotVersion",20,"a64c2ee7-6cd7-4fb7-9ff6-03782ed89739","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_37":106},{"_11":12,"_58":-5,"_59":106,"_42":68,"_61":107,"_63":20},"branch",{"_91":92,"_13":93,"_27":94,"_95":64,"_96":97,"_98":99,"_100":33,"_101":28,"_102":103,"_104":14,"_105":12},"version",35,"main","8bb4a06c-0a66-11f0-9f27-569c3dd06744","projectId","forkedBranchId","4d08a0e4-0a65-11f0-971d-569c3dd06744","forkedBranchVersion",2,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","5280d928-ce75-4c0a-b953-779a130b1815","projectName","userHandle","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9","pro","branchName","path","","adoptOrgId",{"_27":64,"_13":14,"_54":172,"_66":-5,"_67":20,"_32":33,"_41":33,"_30":-5,"_31":-5,"_42":68,"_50":69,"_52":53,"_70":-5,"_71":72,"_56":22,"_44":73,"_74":-5,"_75":-5,"_76":-5,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_34":173,"_48":174,"_89":175,"_46":20},"tree",[167],"files",[167],"counts",{"_157":22,"_158":159,"_17":24,"_160":161,"_162":163},"contents",[140],"file","upstreamProject",{"_27":28,"_13":29,"_30":-5,"_31":-5,"_32":33,"_34":139},"upstreamBranch",{"_27":97,"_54":134,"_135":136,"_13":93,"_95":28,"_91":99,"_96":-5,"_98":-5,"_137":138,"_66":-5,"_46":20,"_32":33,"_105":36,"_44":103,"_104":29},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1743009064883],"updatedAt",["D",1743009141058],"lockfileKey","1744484322748-esm.town_v_rwhaling_p5_project_template@2-main",{"_11":36,"_37":38},{"_27":141,"_13":142,"_143":69,"_144":-5,"_145":94,"_146":92,"_147":53,"_54":148,"_91":149,"_150":151,"_152":153,"_154":20,"_155":12,"_109":156},"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",[142],"pulls","branches",7,"envVars",{"_164":22,"_166":22},"connections",{"_164":22,"_165":22},"count","unfilledCount","emptyCount",{"_27":141,"_13":142,"_143":69,"_144":-5,"_145":94,"_146":92,"_147":53,"_54":168,"_91":149,"_150":151,"_152":153,"_154":20,"_155":12,"_169":170,"_109":171},["D",1743188539147],"children",[],[142],["D",1743009599503],{"_11":12,"_37":106},{"_11":12,"_58":-5,"_59":106,"_42":68,"_61":107,"_63":20},{"_91":92,"_13":93,"_27":94,"_95":64,"_96":97,"_98":99,"_100":33,"_101":28,"_102":103,"_104":14,"_105":12},"ctx",{"_34":-5,"_131":209,"_210":211,"_212":213,"_214":20,"_215":20,"_216":20,"_217":53,"_218":-5,"_219":-7,"_220":-7,"_221":22,"_222":20,"_223":20,"_224":-5,"_225":20,"_226":20,"_227":20,"_228":-5},"ENV",{"_180":181,"_182":183,"_184":93,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208},"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"]

Remixes1

Remixes
1