P5.js Sketch

[{"_1":2,"_179":-5,"_180":-5},"loaderData",{"_3":4,"_91":92,"_170":171,"_178":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fecb14d0d7cdde11199fb1bcf2c56509f6c90920","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_165":-5,"_166":-5,"_167":168,"_128":129,"_136":137,"_100":101,"_98":99,"_117":-7,"_50":51,"_169":26},"type","val","author","e4545ab0-de78-11ef-aed8-51cc7e3b6253",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":-5,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":116,"_117":118,"_119":26,"_120":31,"_121":31,"_122":31,"_123":31,"_124":31,"_125":31,"_126":-5,"_20":127,"_132":-5,"_133":-7,"_134":135,"_136":137,"_138":139},"name","p5Aloha","valNameId","57cda370-de79-11ef-ab61-e6cdfca9ef9f","parentFolderId","isOwned","privacy","public","readme","valType","http","currentVersion","e3d2c672-e0de-11ef-8be7-e6cdfca9ef9f","legacyPrivate","id","code","/**\n * P5.js Sketch\n */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nfunction Sketch() {\n const [p5Loaded, setP5Loaded] = React.useState(false);\n\n React.useEffect(() => {\n // Dynamically import p5 only in the browser\n if (typeof window !== \"undefined\") {\n import(\"https://esm.sh/p5@1.9.0\").then((P5) => {\n new P5.default((p) => {\n p.setup = () => {\n const canvas = p.createCanvas(400, 400);\n canvas.parent(\"p5-sketch\");\n };\n\n p.draw = () => {\n p.background(220);\n p.fill(0);\n p.ellipse(p.width / 2, p.height / 2, p.mouseX, p.mouseY);\n p.fill(255);\n p.ellipse(p.width / 2, p.height / 2, p.mouseY / 2, p.mouseX / 2);\n };\n });\n setP5Loaded(true);\n });\n }\n }, []);\n\n return (\n

\n {p5Loaded ? null :

Loading sketch...

}\n

\n );\n}\n\nfunction client() {\n // Dynamically import React DOM to ensure it's only loaded in the browser\n if (typeof window !== \"undefined\") {\n import(\"https://esm.sh/react-dom@18.2.0/client\").then(({ createRoot }) => {\n const root = document.getElementById(\"root\");\n if (root) {\n createRoot(root).render();\n }\n });\n }\n}\n\n// Only call client function in browser environment\nif (typeof window !== \"undefined\") { client(); }\n\nexport default async function server(request: Request) {\n return new Response(\n `\n \n \n \n P5.js Sketch\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","createdAt",["D",1738443338119],"version",6,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","icezee","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yc0poV05aRHBCT0c5TGNMbmM4OVdFNzJWR08ifQ","forkedVal","interval","slug","icezee/p5Aloha","description","// Only call client function in browser environment","versions",[140,143,147,151,155,158,162],{"_117":118,"_141":-5,"_115":142,"_112":110},"prId",["D",1738443338119],{"_117":144,"_141":-5,"_115":145,"_112":146},5,["D",1738442855338],"c40fecda-e0dd-11ef-9472-e6cdfca9ef9f",{"_117":148,"_141":-5,"_115":149,"_112":150},4,["D",1738442357256],"9b2e9768-e0dc-11ef-96d7-e6cdfca9ef9f",{"_117":152,"_141":-5,"_115":153,"_112":154},3,["D",1738442295147],"7629cd2a-e0dc-11ef-a7b9-e6cdfca9ef9f",{"_117":90,"_141":-5,"_115":156,"_112":157},["D",1738179901394],"874b695c-de79-11ef-90ff-e6cdfca9ef9f",{"_117":159,"_141":-5,"_115":160,"_112":161},1,["D",1738179867262],"72f511a6-de79-11ef-b272-e6cdfca9ef9f",{"_117":31,"_141":-5,"_115":163,"_112":164},["D",1738179821724],"57cf387a-de79-11ef-ab61-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.dependencies",{"_172":173,"_174":31,"_175":135,"_176":31,"_94":177},"dependenciesList",[],"dependenciesCount","valname","page",{"_112":110,"_98":99,"_128":129,"_11":96,"_117":118,"_100":101,"_113":114,"_104":105,"_111":26,"_134":135},"routes/_app","actionData","errors"]