Challenge:
On my web app, users can adjust settings to create or edit generative artworks and then share their creations via a shortened link. The objective is to store all the data needed to replicate the artwork in the URL within 280 characters.
Initial Solution:
The initial solution involves using JSON.stringify/JSON.parse and encoding the string as base64. Here's an example:
URL (560 chars):
https://generativestudios.app/stained-glass?version=1&artwork=[snippet]Unfortunately, this exceeds the 280-character limit.
Enhanced Approach:
Let's explore the data type we're trying to encode:
// Data structure for URL encoding
type Settings = {
seed: string;
splittingStrategy: SplittingStrategy;
depthStrategy: DepthStrategy;
distanceStrategy: DistanceStrategy;
jitter: number;
palette: Palette;
symmetry: boolean;
};
// Helper types
type SplittingStrategy = "A" | "B" | "C";
type DepthStrategy = { kind: "X"; maxDepth: number };
// Other types...
type Color = { a: Number; b: Number; c: Number; d: Number };
type Palette = { red: Color; green: Color; blue: Color; mode: "M" | "S" };
We can optimize the encoding by shortening keys, enums, reducing decimal places, and using cbor instead of json. This reduces the character count from 498 to 170, achieving our goal.
# Initial:
[Base64 String]
# Enhanced:
[Optimized Base64 String]
Considering future data storage needs, are there other strategies or encodings that could be more efficient than base64?