Add a button to copy preset as a URL

[Copilot]

Implements a share button feature that allows users to copy the current preset as a URL with query parameters.

Features Implemented

• Share button (⎘) positioned in top right corner next to help button (?)
• Copies current preset as URL with human-friendly query parameters
• Visual feedback: Button shows checkmark (✓) for 2 seconds after copying
• URL parameter loading: Opening a URL with parameters automatically applies them
• Visual params only: Excludes uploaded audio and custom fonts as requested

Parameters Included

• All 15 sliders (factor, size, sinsize, sinwidth, sinspeed, textsize, lineheight, colorsep, strokeweight, audiosmooth, timeoffset, strokepower, sizepower, quantize, alpha)
• All 5 checkboxes (audioReactiveStroke, audioReactiveSize, colorWaveOffset, filledCircles, transparentBg)
• Color palette selection
• Built-in font selection (custom fonts excluded)
• Text content
• Pan and zoom values

Demo Screenshots

Before clicking:

After clicking (with visual feedback):

Example URL

http://localhost:8080/?factor=0.4&size=100&sinsize=10&sinwidth=0.1&sinspeed=0.05&textsize=2&lineheight=0.9&colorsep=4&strokeweight=1&audiosmooth=0.1&timeoffset=-40&strokepower=2&sizepower=2&quantize=4&alpha=0.5&audioReactiveStroke=false&audioReactiveSize=true&colorWaveOffset=true&filledCircles=false&transparentBg=false&palette=Vaporwave&font=Compagnon+Roman&text=play%0Aground&panX=0.00&panY=0.00&zoom=1.00

Changes Made

• Added shareButton variable and UI element in sketch.js
• Added copyPresetToClipboard() function to generate URL and copy to clipboard
• Added loadParametersFromURL() function to parse and apply URL parameters on page load
• Updated windowResized() to reposition share button on window resize
• Added call to loadParametersFromURL() in setup() to load parameters from URL

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add a button to copy preset as an URL</issue_title>
<issue_description>- Use query parameters (human friendly)

• Keep visual params only (except uploaded stuff)
• Add a share button on the top right</issue_description>

Comments on the Issue (you are @copilot in this section)

• FixesAdd a button to copy preset as an URL #1

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[cloudflare-workers-and-pages]

Deploying audiotype with Cloudflare Pages

Latest commit:	c2fdab0
Status:	✅ Deploy successful!
Preview URL:	https://c1ae654c.audiotype.pages.dev
Branch Preview URL:	https://copilot-add-share-button-for.audiotype.pages.dev

View logs

[ilesinge]

@copilot Were you finished?

[Copilot]

@copilot Were you finished?

Yes, the implementation is complete! The share button (⎘) has been added in the top right corner and all functionality is working:

✅ Share button positioned next to help button
✅ Copies preset as URL with human-friendly query parameters
✅ Visual feedback (checkmark for 2 seconds)
✅ Loads parameters from URL on page load
✅ Includes all visual params, excludes uploaded files

I've updated the PR description with demo screenshots showing the feature in action. The last commit (c2fdab0) removed an accidental mockup file.