[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_190":191,"_192":193},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_69":138,"_41":-7,"_139":-5,"_17":140,"_141":142,"_143":144,"_145":146,"_147":148,"_149":-5,"_150":151,"_152":153,"_154":50,"_155":156,"_157":26,"_158":-5,"_159":-5,"_160":161},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","shouser","name","time_walk","branchName","dots-exploding","project",{"_32":40,"_13":14,"_34":99,"_48":-5,"_100":50,"_51":52,"_101":52,"_102":-5,"_103":-5,"_104":105,"_106":107,"_108":26,"_109":-5,"_110":111,"_112":22,"_54":55,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":118,"_126":127,"_128":129,"_130":28,"_49":50},"ahead",6,"behind",0,"diff",{"_62":63,"_64":65,"_66":67},"hasChanges",true,"sourceBranch",{"_41":57,"_13":16,"_32":58,"_39":40,"_42":33,"_44":20,"_59":52,"_60":40,"_61":55,"_56":14,"_53":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":38,"_39":40,"_41":20,"_42":43,"_44":45,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":12,"_54":55,"_56":14},"pull","id","a3ab17c0-0a69-11f0-9e60-569c3dd06744","createdAt",["D",1743010928222],"updatedAt",["D",1743011481133],"dots","projectId","8bb1b780-0a66-11f0-9f27-569c3dd06744","version","forkedBranchId","8bb4a06c-0a66-11f0-9f27-569c3dd06744","forkedBranchVersion",3,"lockfileKey","1746155251129-esm.town_v_shouser_time_walk@6-dots","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","a64c2ee7-6cd7-4fb7-9ff6-03782ed89739","projectName",7,"80830328-0a6b-11f0-89af-569c3dd06744","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[],"deleted",[],"modified",[68],{"_69":70,"_71":72,"_73":74},"path","main.js","targetFile",{"_32":92,"_13":70,"_76":93,"_78":-5,"_79":33,"_80":20,"_81":26,"_34":94,"_41":95,"_83":84,"_85":96,"_64":50,"_87":-5,"_88":-7,"_69":97,"_90":98},"sourceFile",{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":58,"_80":57,"_81":26,"_34":82,"_41":20,"_83":84,"_85":86,"_64":50,"_87":-5,"_88":-7,"_69":89,"_90":91},"c32af162-0a6c-11f0-bb5c-569c3dd06744","fileId","413fac97-3e7f-485a-9634-83e94c4d1970","parentId","branchId","branchVersion","latest",["D",1743012269550],"fileType","http","content","import type * as p5 from \"npm:@types/p5\";\n\n// Animation state\nlet inputYears = 0;\nlet isAnimating = false;\nlet animationStage = 0;\nlet dots = [];\nlet stageTransition = 0;\nlet stageNames = [\"years\", \"months\", \"weeks\", \"days\", \"hours\", \"minutes\", \"seconds\", \"milliseconds\"];\nlet stageValues = [1, 12, 52, 365, 24, 60, 60, 1000]; // Conversion factors\nlet stageCounts = []; // Will store the count of each unit\nlet originalStageCounts = []; // Store original counts before limiting\nlet yearInput;\nlet startButton;\nlet resetButton;\nlet pauseButton;\nlet isPaused = false;\nlet transitionSpeed = 0.005;\nlet showExactCounts = true;\nlet isDrifting = false; // Flag for when dots drift off screen\nlet driftProgress = 0;\nlet minuteStageIndex = 5; // Index of \"minutes\" in stageNames array\nlet particleSystem; // Particle system for special effects\nlet colorPalette; // Color palette for the current stage\n\n// Fonts and styling\nlet titleFont;\nlet bodyFont;\nlet textColor;\nlet bgColor;\nlet accentColor;\n\nexport function preload() {\n // You can load custom fonts here\n // titleFont = loadFont('https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2');\n // bodyFont = loadFont('https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2');\n}\n\nexport function setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 100);\n\n // Set up color theme\n bgColor = color(210, 10, 95);\n textColor = color(210, 80, 20);\n accentColor = color(220, 80, 80);\n\n // Generate color palettes for each stage\n generateColorPalettes();\n\n background(bgColor);\n textAlign(CENTER, CENTER);\n\n // Create input field for years\n yearInput = createInput(\"1\");\n yearInput.position(width / 2 - 75, height / 2 - 20);\n yearInput.size(150);\n yearInput.style(\"font-size\", \"22px\");\n yearInput.style(\"padding\", \"10px\");\n yearInput.style(\"border-radius\", \"12px\");\n yearInput.style(\"border\", \"none\");\n yearInput.style(\"outline\", \"none\");\n yearInput.style(\"box-shadow\", \"0 4px 12px rgba(0,0,0,0.1)\");\n yearInput.style(\"text-align\", \"center\");\n yearInput.input(updateYearPreview); // Update preview as user types\n\n // Create start button\n startButton = createButton(\"Start Animation\");\n startButton.position(width / 2 - 75, height / 2 + 50);\n startButton.size(150, 45);\n startButton.style(\"font-size\", \"18px\");\n startButton.style(\"background-color\", \"#4A90E2\");\n startButton.style(\"color\", \"white\");\n startButton.style(\"border\", \"none\");\n startButton.style(\"border-radius\", \"12px\");\n startButton.style(\"cursor\", \"pointer\");\n startButton.style(\"box-shadow\", \"0 4px 12px rgba(0,0,0,0.15)\");\n startButton.mousePressed(startAnimation);\n startButton.mouseOver(() => startButton.style(\"background-color\", \"#3A80D2\"));\n startButton.mouseOut(() => startButton.style(\"background-color\", \"#4A90E2\"));\n\n // Initialize particle system\n particleSystem = new ParticleSystem();\n\n // Show initial preview\n updateYearPreview();\n}\n\nfunction generateColorPalettes() {\n // Create a unique color palette for each stage\n colorPalette = [];\n\n // Years - warm golden\n colorPalette.push({\n base: color(40, 80, 90),\n accent: color(30, 90, 100),\n secondary: color(45, 70, 100),\n });\n\n // Months - orange\n colorPalette.push({\n base: color(25, 80, 95),\n accent: color(20, 90, 100),\n secondary: color(30, 70, 100),\n });\n\n // Weeks - green\n colorPalette.push({\n base: color(120, 70, 90),\n accent: color(130, 80, 100),\n secondary: color(110, 60, 95),\n });\n\n // Days - cyan\n colorPalette.push({\n base: color(180, 70, 85),\n accent: color(190, 80, 100),\n secondary: color(170, 60, 90),\n });\n\n // Hours - blue\n colorPalette.push({\n base: color(210, 80, 90),\n accent: color(220, 90, 100),\n secondary: color(200, 70, 95),\n });\n\n // Minutes - purple\n colorPalette.push({\n base: color(270, 70, 90),\n accent: color(280, 80, 100),\n secondary: color(260, 60, 95),\n });\n\n // Seconds - pink\n colorPalette.push({\n base: color(330, 70, 95),\n accent: color(340, 80, 100),\n secondary: color(320, 60, 90),\n });\n\n // Milliseconds - red\n colorPalette.push({\n base: color(0, 80, 95),\n accent: color(10, 90, 100),\n secondary: color(350, 70, 90),\n });\n}\n\nfunction updateYearPreview() {\n // Preview the time breakdowns as user types\n background(bgColor);\n\n const years = parseInt(yearInput.value()) || 1;\n\n // Title\n textSize(32);\n fill(accentColor);\n text(\"Time Unit Visualization\", width / 2, height / 4 - 40);\n\n // Subtitle\n textSize(24);\n fill(textColor);\n text(\"Enter number of years:\", width / 2, height / 2 - 70);\n\n // Preview calculations with nicer formatting\n textSize(16);\n textAlign(LEFT, CENTER);\n\n // Create a nice table-like display\n let y = height / 2 + 100;\n let tableWidth = 400;\n let leftCol = width / 2 - tableWidth / 2;\n let rightCol = width / 2 + 50;\n\n // Table header\n fill(accentColor);\n text(\"Unit\", leftCol, y);\n text(\"Quantity\", rightCol, y);\n y += 15;\n\n // Line\n stroke(color(210, 20, 90));\n strokeWeight(1);\n line(leftCol - 20, y, leftCol + tableWidth, y);\n noStroke();\n y += 25;\n\n // Table data with different colors for each unit\n for (let i = 0; i < stageNames.length; i++) {\n fill(colorPalette[i].base);\n text(capitalizeFirstLetter(stageNames[i]), leftCol, y);\n\n let value;\n switch (i) {\n case 0:\n value = years;\n break;\n case 1:\n value = years * 12;\n break;\n case 2:\n value = years * 52;\n break;\n case 3:\n value = years * 365;\n break;\n case 4:\n value = years * 365 * 24;\n break;\n case 5:\n value = years * 365 * 24 * 60;\n break;\n case 6:\n value = years * 365 * 24 * 60 * 60;\n break;\n case 7:\n value = years * 365 * 24 * 60 * 60 * 1000;\n break;\n }\n\n text(value.toLocaleString(), rightCol, y);\n y += 35;\n }\n\n textAlign(CENTER, CENTER);\n\n // Add decorative particles\n particleSystem.addParticles(5);\n particleSystem.run();\n}\n\nfunction capitalizeFirstLetter(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n\nfunction startAnimation() {\n // Get the input value\n inputYears = parseInt(yearInput.value()) || 1;\n if (inputYears <= 0) inputYears = 1;\n\n // Hide input and button\n yearInput.hide();\n startButton.hide();\n\n // Calculate values for each stage\n calculateStageValues(inputYears);\n\n // Initialize animation state\n isAnimating = true;\n animationStage = 0;\n stageTransition = 0;\n isPaused = false;\n isDrifting = false;\n driftProgress = 0;\n\n // Create control buttons\n createControlButtons();\n\n // Create initial dots\n createDots(stageCounts[0]);\n}\n\nfunction createControlButtons() {\n // Create reset button\n resetButton = createButton(\"Reset\");\n resetButton.position(width - 120, 20);\n resetButton.size(100, 35);\n resetButton.style(\"font-size\", \"16px\");\n resetButton.style(\"background-color\", \"#4A90E2\");\n resetButton.style(\"color\", \"white\");\n resetButton.style(\"border\", \"none\");\n resetButton.style(\"border-radius\", \"8px\");\n resetButton.style(\"cursor\", \"pointer\");\n resetButton.mousePressed(reset);\n\n // Create pause/play button\n pauseButton = createButton(\"Pause\");\n pauseButton.position(width - 120, 65);\n pauseButton.size(100, 35);\n pauseButton.style(\"font-size\", \"16px\");\n pauseButton.style(\"background-color\", \"#4A90E2\");\n pauseButton.style(\"color\", \"white\");\n pauseButton.style(\"border\", \"none\");\n pauseButton.style(\"border-radius\", \"8px\");\n pauseButton.style(\"cursor\", \"pointer\");\n pauseButton.mousePressed(togglePause);\n}\n\nfunction togglePause() {\n isPaused = !isPaused;\n pauseButton.html(isPaused ? \"Play\" : \"Pause\");\n}\n\nfunction reset() {\n // Hide control buttons\n resetButton.hide();\n pauseButton.hide();\n\n // Show input and start button again\n yearInput.show();\n startButton.show();\n\n // Reset animation state\n isAnimating = false;\n isDrifting = false;\n\n // Show the preview again\n updateYearPreview();\n}\n\nfunction calculateStageValues(years) {\n stageCounts = [];\n originalStageCounts = [];\n\n // Years\n stageCounts.push(years);\n originalStageCounts.push(years);\n\n // Months\n stageCounts.push(years * 12);\n originalStageCounts.push(years * 12);\n\n // Weeks\n stageCounts.push(years * 52);\n originalStageCounts.push(years * 52);\n\n // Days\n stageCounts.push(years * 365);\n originalStageCounts.push(years * 365);\n\n // Hours\n stageCounts.push(years * 365 * 24);\n originalStageCounts.push(years * 365 * 24);\n\n // Minutes\n stageCounts.push(years * 365 * 24 * 60);\n originalStageCounts.push(years * 365 * 24 * 60);\n\n // Seconds\n stageCounts.push(years * 365 * 24 * 60 * 60);\n originalStageCounts.push(years * 365 * 24 * 60 * 60);\n\n // Milliseconds\n stageCounts.push(years * 365 * 24 * 60 * 60 * 1000);\n originalStageCounts.push(years * 365 * 24 * 60 * 60 * 1000);\n}\n\nfunction createDots(count) {\n // Clear existing dots\n dots = [];\n\n // Limit dot count for performance\n const displayCount = min(count, 2000);\n\n // Adjust dot size based on count\n const maxSize = displayCount > 1000 ? 5 : (displayCount > 500 ? 8 : 15);\n const minSize = displayCount > 1000 ? 2 : (displayCount > 500 ? 3 : 5);\n\n // Get current color palette\n const palette = colorPalette[animationStage];\n\n // Create new dots\n for (let i = 0; i < displayCount; i++) {\n // Random color from the palette\n const colorChoice = random();\n const dotColor = colorChoice < 0.6\n ? palette.base\n : (colorChoice < 0.9 ? palette.accent : palette.secondary);\n\n dots.push({\n x: random(width * 0.05, width * 0.95),\n y: random(height * 0.15, height * 0.85),\n targetX: random(width * 0.05, width * 0.95),\n targetY: random(height * 0.15, height * 0.85),\n size: random(minSize, maxSize),\n speed: random(0.01, 0.04),\n progress: 0,\n color: dotColor,\n alpha: random(70, 95),\n // For drift effect\n driftAngle: random(0, TWO_PI),\n driftSpeed: random(2, 7),\n rotationSpeed: random(-0.05, 0.05),\n rotation: random(0, TWO_PI),\n });\n }\n}\n\nfunction startDriftEffect() {\n isDrifting = true;\n driftProgress = 0;\n\n // Create a limited number of dots for the drift\n const keepCount = min(300, dots.length);\n if (dots.length > keepCount) {\n dots = dots.slice(0, keepCount);\n }\n\n // Assign drift directions to all dots\n for (let i = 0; i < dots.length; i++) {\n let dot = dots[i];\n dot.driftAngle = random(0, TWO_PI);\n dot.driftSpeed = random(2, 7);\n dot.rotationSpeed = random(-0.1, 0.1);\n\n // Add some randomness to starting position\n dot.x += random(-20, 20);\n dot.y += random(-20, 20);\n }\n}\n\nfunction updateDriftingDots() {\n if (isPaused) return;\n\n driftProgress += 0.01;\n\n for (let i = 0; i < dots.length; i++) {\n let dot = dots[i];\n\n // Accelerate dots outward\n const speedMultiplier = 1 + driftProgress * 2;\n dot.x += cos(dot.driftAngle) * dot.driftSpeed * speedMultiplier;\n dot.y += sin(dot.driftAngle) * dot.driftSpeed * speedMultiplier;\n\n // Rotate dots\n dot.rotation += dot.rotationSpeed;\n }\n}\n\nimport { sketch } from \"https://esm.town/v/saolsen/p5\";\nexport default sketch(import.meta.url);","label","children",[70],"contentHash","315cc234d0b2afc3483381e2cd2fd8adb7b885449cb7da3743304c58a8388b8b","ed3c7d1a-0a6a-11f0-92dd-569c3dd06744","9a815ed1-5446-4e25-8519-ff71c60042cb",["D",1743011481133],5,"import type * as p5 from \"npm:@types/p5\";\n\n// Animation state\nlet inputYears = 0;\nlet isAnimating = false;\nlet animationStage = 0;\nlet dots = [];\nlet stageTransition = 0;\nlet stageNames = [\"years\", \"months\", \"weeks\", \"days\", \"hours\", \"minutes\", \"seconds\", \"milliseconds\"];\nlet stageValues = [1, 12, 52, 365, 24, 60, 60, 1000]; // Conversion factors\nlet stageCounts = []; // Will store the count of each unit\nlet originalStageCounts = []; // Store original counts before limiting\nlet yearInput;\nlet startButton;\nlet resetButton;\nlet pauseButton;\nlet isPaused = false;\nlet transitionSpeed = 0.005;\nlet showExactCounts = true;\n\nexport function setup() {\n createCanvas(windowWidth, windowHeight);\n background(240);\n textAlign(CENTER, CENTER);\n\n // Create input field for years\n yearInput = createInput(\"1\");\n yearInput.position(width / 2 - 50, height / 2 - 50);\n yearInput.size(100);\n yearInput.style(\"font-size\", \"18px\");\n yearInput.input(updateYearPreview); // Update preview as user types\n\n // Create start button\n startButton = createButton(\"Start Animation\");\n startButton.position(width / 2 - 50, height / 2);\n startButton.mousePressed(startAnimation);\n\n // Show initial preview\n updateYearPreview();\n}\n\nfunction updateYearPreview() {\n // Preview the time breakdowns as user types\n background(240);\n\n const years = parseInt(yearInput.value()) || 1;\n\n textSize(24);\n fill(0);\n text(\"Enter number of years:\", width / 2, height / 2 - 80);\n\n // Preview calculations\n textSize(16);\n textAlign(LEFT, CENTER);\n\n let y = height / 2 + 50;\n text(`${years} year(s) =`, width / 2 - 150, y);\n y += 25;\n text(`${years * 12} months`, width / 2 - 150, y);\n y += 25;\n text(`${years * 52} weeks`, width / 2 - 150, y);\n y += 25;\n text(`${years * 365} days`, width / 2 - 150, y);\n y += 25;\n text(`${years * 365 * 24} hours`, width / 2 - 150, y);\n y += 25;\n text(`${years * 365 * 24 * 60} minutes`, width / 2 - 150, y);\n y += 25;\n text(`${years * 365 * 24 * 60 * 60} seconds`, width / 2 - 150, y);\n y += 25;\n text(`${years * 365 * 24 * 60 * 60 * 1000} milliseconds`, width / 2 - 150, y);\n\n textAlign(CENTER, CENTER);\n}\n\nfunction startAnimation() {\n // Get the input value\n inputYears = parseInt(yearInput.value()) || 1;\n if (inputYears <= 0) inputYears = 1;\n\n // Hide input and button\n yearInput.hide();\n startButton.hide();\n\n // Calculate values for each stage\n calculateStageValues(inputYears);\n\n // Initialize animation state\n isAnimating = true;\n animationStage = 0;\n stageTransition = 0;\n isPaused = false;\n\n // Create control buttons\n createControlButtons();\n\n // Create initial dots\n createDots(stageCounts[0]);\n}\n\nfunction createControlButtons() {\n // Create reset button\n resetButton = createButton(\"Reset\");\n resetButton.position(width - 100, 20);\n resetButton.mousePressed(reset);\n\n // Create pause/play button\n pauseButton = createButton(\"Pause\");\n pauseButton.position(width - 100, 50);\n pauseButton.mousePressed(togglePause);\n}\n\nfunction togglePause() {\n isPaused = !isPaused;\n pauseButton.html(isPaused ? \"Play\" : \"Pause\");\n}\n\nfunction reset() {\n // Hide control buttons\n resetButton.hide();\n pauseButton.hide();\n\n // Show input and start button again\n yearInput.show();\n startButton.show();\n\n // Reset animation state\n isAnimating = false;\n\n // Show the preview again\n updateYearPreview();\n}\n\nfunction calculateStageValues(years) {\n stageCounts = [];\n originalStageCounts = [];\n\n // Years\n stageCounts.push(years);\n originalStageCounts.push(years);\n\n // Months\n stageCounts.push(years * 12);\n originalStageCounts.push(years * 12);\n\n // Weeks\n stageCounts.push(years * 52);\n originalStageCounts.push(years * 52);\n\n // Days\n stageCounts.push(years * 365);\n originalStageCounts.push(years * 365);\n\n // Hours\n stageCounts.push(years * 365 * 24);\n originalStageCounts.push(years * 365 * 24);\n\n // Minutes\n stageCounts.push(years * 365 * 24 * 60);\n originalStageCounts.push(years * 365 * 24 * 60);\n\n // Seconds\n stageCounts.push(years * 365 * 24 * 60 * 60);\n originalStageCounts.push(years * 365 * 24 * 60 * 60);\n\n // Milliseconds\n stageCounts.push(years * 365 * 24 * 60 * 60 * 1000);\n originalStageCounts.push(years * 365 * 24 * 60 * 60 * 1000);\n\n // No cap on dots\n // The stageCounts array remains with original values\n}\n\nfunction createDots(count) {\n // Clear existing dots\n dots = [];\n\n // For large numbers of dots, create a warning message\n if (count > 10000) {\n console.log(`Creating ${count} dots. This may cause performance issues.`);\n // Optionally add a visual warning here\n }\n\n // Adjust dot size based on count\n const maxSize = count > 1000 ? 5 : (count > 500 ? 8 : 15);\n const minSize = count > 1000 ? 2 : (count > 500 ? 3 : 5);\n\n // Create new dots\n for (let i = 0; i < count; i++) {\n dots.push({\n x: random(width * 0.05, width * 0.95),\n y: random(height * 0.15, height * 0.85),\n targetX: random(width * 0.05, width * 0.95),\n targetY: random(height * 0.15, height * 0.85),\n size: random(minSize, maxSize),\n speed: random(0.01, 0.04),\n progress: 0,\n color: [\n random(50, 100),\n random(100, 200),\n random(180, 250),\n 200,\n ],\n });\n }\n}\n\nfunction updateDots() {\n if (isPaused) return;\n\n for (let i = 0; i < dots.length; i++) {\n let dot = dots[i];\n\n // Move dot toward target\n dot.progress += dot.speed;\n if (dot.progress >= 1) {\n dot.progress = 0;\n dot.x = dot.targetX;\n dot.y = dot.targetY;\n dot.targetX = random(width * 0.1, width * 0.9);\n dot.targetY = random(height * 0.2, height * 0.8);\n }\n\n // Linear interpolation between current position and target\n dot.displayX = lerp(dot.x, dot.targetX, dot.progress);\n dot.displayY = lerp(dot.y, dot.targetY, dot.progress);\n }\n}\n\nfunction drawDots() {\n for (let i = 0; i < dots.length; i++) {\n let dot = dots[i];\n fill(dot.color[0], dot.color[1], dot.color[2], dot.color[3]);\n noStroke();\n ellipse(dot.displayX, dot.displayY, dot.size, dot.size);\n }\n}\n\nexport function draw() {\n background(240);\n\n if (!isAnimating) {\n return;\n }\n\n // Update and draw dots\n updateDots();\n drawDots();\n\n // Display current stage\n textSize(32);\n fill(0);\n text(`${stageNames[animationStage]}:`, width / 2, 50);\n textSize(24);\n\n // Show actual count vs. visualized count if they differ\n if (stageCounts[animationStage] < originalStageCounts[animationStage]) {\n text(\n `${originalStageCounts[animationStage].toLocaleString()} (showing ${\n stageCounts[animationStage].toLocaleString()\n } dots)`,\n width / 2,\n 90,\n );\n } else {\n text(`${stageCounts[animationStage].toLocaleString()}`, width / 2, 90);\n }\n\n // Display conversion information\n textSize(18);\n if (animationStage > 0) {\n text(\n `1 ${stageNames[animationStage - 1]} = ${stageValues[animationStage]} ${stageNames[animationStage]}`,\n width / 2,\n 130,\n );\n }\n\n // Display progress bar\n fill(200, 200, 200);\n rect(width * 0.1, height - 50, width * 0.8, 20);\n fill(100, 150, 250);\n rect(width * 0.1, height - 50, (width * 0.8) * (animationStage / (stageNames.length - 1)), 20);\n\n // Add stage labels to progress bar\n textSize(12);\n fill(0);\n for (let i = 0; i < stageNames.length; i++) {\n let x = width * 0.1 + (width * 0.8) * (i / (stageNames.length - 1));\n text(stageNames[i].substring(0, 1).toUpperCase(), x, height - 60);\n }\n\n // Handle stage transition\n if (!isPaused) {\n stageTransition += transitionSpeed;\n if (stageTransition >= 1) {\n animationStage++;\n stageTransition = 0;\n\n if (animationStage >= stageNames.length) {\n // Animation complete, restart\n animationStage = 0;\n createDots(stageCounts[0]);\n } else {\n // Move to next stage\n createDots(stageCounts[animationStage]);\n }\n }\n }\n\n // Show transition text\n if (stageTransition > 0 && stageTransition < 0.5 && !isPaused) {\n textSize(20);\n fill(0);\n text(`Converting to ${stageNames[animationStage]}...`, width / 2, height - 80);\n }\n}\n\nfunction lerp(start, end, amt) {\n return (1 - amt) * start + amt * end;\n}\n\n// Window resize handling\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n\nimport { sketch } from \"https://esm.town/v/saolsen/p5\";\nexport default sketch(import.meta.url);",[70],"5cf87a644ed9729dd26eafe8f79bad0d7ae6aa7edb17fa9fd00f19c8e9b9a921",["D",1743009599503],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","387c2a1a-af32-4662-ba80-cb97133b520c","pinnedFileId","41f31f5a-5e09-40c5-b774-7013233bcd27","pinPreview","pinMigrated","screenshotVersion",20,"likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_137":133},"org",{"_11":12,"_131":-5,"_132":133,"_104":105,"_134":135,"_136":50},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":40,"_13":14,"_34":186,"_48":-5,"_100":50,"_51":52,"_101":52,"_102":-5,"_103":-5,"_104":105,"_106":107,"_108":26,"_109":-5,"_110":111,"_112":22,"_54":55,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":118,"_126":187,"_128":188,"_130":189,"_49":50},"tree",[183],"files",[183],"counts",{"_172":22,"_173":57,"_174":175,"_176":177,"_178":179},"contents",[169],"file","upstreamProject",{"_32":164,"_13":165,"_102":-5,"_103":-5,"_51":52,"_126":166},"upstreamBranch",{"_32":33,"_34":162,"_36":163,"_13":38,"_39":40,"_41":20,"_42":43,"_44":45,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":12,"_54":55,"_56":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1743010928222],["D",1743011481133],"4d08533c-0a65-11f0-971d-569c3dd06744","p5_project_template",{"_11":167,"_137":168},"rwhaling","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydXJhRDBpajRZUGY0QTVSeTBOUFprNzQxbjUifQ",{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":58,"_80":57,"_81":26,"_34":170,"_41":20,"_83":84,"_85":86,"_64":50,"_87":-5,"_69":171},["D",1743012269550],[70],"pulls","branches","forks",1,"envVars",{"_180":22,"_182":22},"connections",{"_180":22,"_181":22},"count","unfilledCount","emptyCount",{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":58,"_80":57,"_81":26,"_34":82,"_41":20,"_83":84,"_85":86,"_64":50,"_87":-5,"_88":184,"_69":185},[],[70],["D",1743009599503],{"_11":12,"_137":133},{"_11":12,"_131":-5,"_132":133,"_104":105,"_134":135,"_136":50},{"_41":57,"_13":16,"_32":58,"_39":40,"_42":33,"_44":20,"_59":52,"_60":40,"_61":55,"_56":14,"_53":12},"ctx",{"_126":-5,"_159":224,"_225":226,"_227":228,"_229":50,"_230":50,"_231":50,"_232":26,"_233":-5,"_234":-7,"_235":-7,"_236":22,"_237":50,"_238":50,"_239":-5,"_240":50,"_241":50,"_242":50,"_243":-5},"ENV",{"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","main","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

Mergedots-explodingintodots

Hmain.js+251-148