P5 Sketch

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_177":178,"_179":180},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":85,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":25,"_124":125,"_126":25,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":-5,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",51,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","32b06422-2769-11f0-86ff-569c3dd06744","name","fileType","script","content","/** @jsxImportSource npm:hono@3/jsx */\nimport { frameHtml } from \"https://esm.town/v/moe/frameHtml\"\nimport { getLaunches } from \"https://esm.town/v/moe/spacexapi\"\nimport { homeImage, launchImage } from \"https://esm.town/v/moe/spaceximage\"\nimport { Hono } from \"npm:hono\"\n\n// app.get(\"/image\", async (c) => {\n// const url = new URL(c.req.url)\n// const isLaunch = url.searchParams.has(\"launch\")\n\n// if (!isLaunch)\n// return c.body(await homeImage(), 200, { \"Content-Type\": \"image/png\" })\n\n// const isPast = url.searchParams.has(\"past\")\n// const index = parseInt(url.searchParams.get(\"i\") || \"0\")\n// const data = await getLaunches()\n// const launches = isPast ? data.pastLaunches.reverse() : data.launches\n// const l = launches[index]\n\n// return c.body(await launchImage(l), 200, { \"Content-Type\": \"image/png\" })\n// })\n\n// app.post(\"/frames\", async (c) => {\n// const url = new URL(c.req.url)\n// const isLaunch = url.searchParams.has(\"launch\")\n\n// if (!isLaunch) return c.html(frameHtml(homeFrame, baseUrl))\n\n// const isPast = url.searchParams.has(\"past\")\n// const index = parseInt(url.searchParams.get(\"i\") || \"0\")\n// // const data = await getLaunches()\n// // const launches = isPast ? data.pastLaunches.reverse() : data.launches\n// // const l = launches[index]\n\n// const pastPostfix = isPast ? \"&past\" : \"\"\n// const frame = {\n// image: `/image?launch&i=${index}${pastPostfix}`,\n// buttons: [\n// (index > 0) && { text: \"←\", target: `/frames?launch&i=${index - 1}${pastPostfix}` },\n// { text: \"→\", target: `/frames?launch&i=${index + 1}${pastPostfix}` },\n// ].filter(Boolean),\n// }\n\n// return c.html(frameHtml(frame, baseUrl))\n// })\n\nexport function sketch(module: string) {\n const app = new Hono()\n // export default app.fetch\n\n const baseUrl = \"https://moe-spacex.web.val.run\"\n const homeFrame = {\n image: \"/image\",\n buttons: [\n { text: \"Upcoming Launches\", target: \"/frames?launch\" },\n { text: \"Past Launches\", target: \"/frames?launch&past\" },\n ],\n }\n\n app.get(\"/\", async (c) => {\n const url = new URL(c.req.url)\n const html = (\n \n \n P5 Sketch\n \n \n \n \n\n \n \n \n \n \n \n {\n /* \n */\n }\n \n \n \n \n )\n return c.html(html as any)\n })\n\n return app.fetch\n\n // return function(req: Request): Response {\n // // console.log(\"module:\", module)\n // const url = new URL(req.url)\n // // console.log(\"url:\", url)\n // const searchParams = new URLSearchParams(url.search)\n // const isImage = searchParams.get(\"image\") !== null\n // // console.log(\"isImage:\", isImage)\n\n // if (isImage) {\n // const imageUrl = \"https://charlypoly-httpapiscreenshotpageexample.web.val.run/?url=\" + url.origin\n // return Response.redirect(imageUrl, 302)\n // }\n\n // const baseUrl = url.origin\n // const homeFrame = {\n // image: \"/?image\",\n // buttons: [\n // // { text: \"Randomize\", target: \"/frames?launch\" },\n // ],\n // }\n\n // return new Response(\n // `\n // \n // \n // P5 Sketch\n // \n // \n // \n // \n\n // \n // \n // \n // \n // \n // \n // \n // \n // \n // `,\n // { headers: { \"Content-Type\": \"text/html\" } },\n // )\n // }\n}","/** @jsxImportSource npm:hono@3/jsx */\nimport { frameHtml } from \"https://esm.town/v/moe/frameHtml\"\nimport { getLaunches } from \"https://esm.town/v/moe/spacexapi\"\nimport { homeImage, launchImage } from \"https://esm.town/v/moe/spaceximage\"\nimport { Hono } from \"npm:hono\"\n\n// app.get(\"/image\", async (c) => {\n// const url = new URL(c.req.url)\n// const isLaunch = url.searchParams.has(\"launch\")\n\n// if (!isLaunch)\n// return c.body(await homeImage(), 200, { \"Content-Type\": \"image/png\" })\n\n// const isPast = url.searchParams.has(\"past\")\n// const index = parseInt(url.searchParams.get(\"i\") || \"0\")\n// const data = await getLaunches()\n// const launches = isPast ? data.pastLaunches.reverse() : data.launches\n// const l = launches[index]\n\n// return c.body(await launchImage(l), 200, { \"Content-Type\": \"image/png\" })\n// })\n\n// app.post(\"/frames\", async (c) => {\n// const url = new URL(c.req.url)\n// const isLaunch = url.searchParams.has(\"launch\")\n\n// if (!isLaunch) return c.html(frameHtml(homeFrame, baseUrl))\n\n// const isPast = url.searchParams.has(\"past\")\n// const index = parseInt(url.searchParams.get(\"i\") || \"0\")\n// // const data = await getLaunches()\n// // const launches = isPast ? data.pastLaunches.reverse() : data.launches\n// // const l = launches[index]\n\n// const pastPostfix = isPast ? \"&past\" : \"\"\n// const frame = {\n// image: `/image?launch&i=${index}${pastPostfix}`,\n// buttons: [\n// (index > 0) && { text: \"←\", target: `/frames?launch&i=${index - 1}${pastPostfix}` },\n// { text: \"→\", target: `/frames?launch&i=${index + 1}${pastPostfix}` },\n// ].filter(Boolean),\n// }\n\n// return c.html(frameHtml(frame, baseUrl))\n// })\n\nexport function sketch(module: string) {\n const app = new Hono()\n // export default app.fetch\n\n const baseUrl = \"https://moe-spacex.web.val.run\"\n const homeFrame = {\n image: \"/image\",\n buttons: [\n { text: \"Upcoming Launches\", target: \"/frames?launch\" },\n { text: \"Past Launches\", target: \"/frames?launch&past\" },\n ],\n }\n\n app.get(\"/\", async (c) => {\n const url = new URL(c.req.url)\n const html = (\n \n \n P5 Sketch\n \n \n \n \n\n \n \n \n \n \n \n {\n /* \n */\n }\n \n \n \n \n )\n return c.html(html as any)\n })\n\n return app.fetch\n\n // return function(req: Request): Response {\n // // console.log(\"module:\", module)\n // const url = new URL(req.url)\n // // console.log(\"url:\", url)\n // const searchParams = new URLSearchParams(url.search)\n // const isImage = searchParams.get(\"image\") !== null\n // // console.log(\"isImage:\", isImage)\n\n // if (isImage) {\n // const imageUrl = \"https://charlypoly-httpapiscreenshotpageexample.web.val.run/?url=\" + url.origin\n // return Response.redirect(imageUrl, 302)\n // }\n\n // const baseUrl = url.origin\n // const homeFrame = {\n // image: \"/?image\",\n // buttons: [\n // // { text: \"Randomize\", target: \"/frames?launch\" },\n // ],\n // }\n\n // return new Response(\n // `\n // \n // \n // P5 Sketch\n // \n // \n // \n // \n\n // \n // \n // \n // \n // \n // \n // \n // \n // \n // `,\n // { headers: { \"Content-Type\": \"text/html\" } },\n // )\n // }\n}","createdAt",["D",1723896604684],"branchVersion","branchId","32addbf8-2769-11f0-86ff-569c3dd06744","id","32ad8c20-2769-11f0-86ff-569c3dd06744","p5",["D",1746199322374],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","6354d4b9-fd24-49d9-a600-cf17a1a9cf30","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","54e6f3c3-bf27-4301-a0b3-0ccc1fb75a27","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":55,"_103":104,"_105":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":51,"_92":93,"_94":95,"_96":45,"_97":98},"isOwned",124,"main","projectId","forkedBranchId","9f9993a4-27ac-11f0-9edc-569c3dd06744","forkedBranchVersion",0,"forkedProjectPrivacy","forkedProjectId","9f994d7c-27ac-11f0-9edc-569c3dd06744","forkedProjectOrgId","6af58753-71c6-4397-9d5b-2473eb888976","projectName","userHandle","moe","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yanFDd29JUGxvVEl1YVVlcHJiV2VYMUxFWjkifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":173,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":-5,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":174,"_79":175,"_81":176,"_83":25},"tree",[164,165],"files",[164,165],"counts",{"_154":90,"_155":61,"_156":61,"_157":158,"_159":160},"contents",[139,140],"upstreamProject",{"_43":93,"_32":45,"_53":-5,"_54":-5,"_50":51,"_77":137},"upstreamBranch",{"_43":88,"_38":131,"_132":133,"_32":85,"_86":93,"_13":134,"_87":-5,"_89":-5,"_135":-5,"_47":-5,"_83":25,"_50":51,"_97":136,"_62":95,"_96":45},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746228281395],"updatedAt",["D",1704307892841],5,"lockfileKey","saolsen",{"_99":136,"_106":138},"https://images.clerk.dev/oauth_github/img_2QtXHzN3gDPhKsBOvKsst8LTxC5.png",{"_43":148,"_32":149,"_30":150,"_142":-5,"_41":42,"_40":61,"_143":49,"_38":151,"_13":90,"_33":20,"_35":152,"_24":25,"_146":-5,"_27":153},{"_43":141,"_32":28,"_30":31,"_142":-5,"_41":42,"_40":14,"_143":25,"_38":144,"_13":145,"_33":34,"_35":37,"_24":25,"_146":-5,"_27":147},"33b91f44-2769-11f0-86ff-569c3dd06744","parentId","latest",["D",1723896604684],50,"label",[28],"32b06c2e-2769-11f0-86ff-569c3dd06744","README.md","32b06cd8-2769-11f0-86ff-569c3dd06744",["D",1722108843731],"# P5 sketch\n\nEasily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example.\n\n## Usage\n\n* Make a p5 sketch, you can import the p5 types to make it easier.\n```typescript\nimport type * as p5 from \"npm:@types/p5\";\n```\n\n* Export any \"global\" p5 functions. These are functions like `setup` and `draw` that p5 will call.\n\n* Set the val type to http and default export the result of `sketch`, passing in `import.meta.url`.\n\nA full example looks like this.\n\n```typescript\nimport type * as p5 from \"npm:@types/p5\";\n\nexport function setup() {\n createCanvas(400, 400);\n}\n\nexport function draw() {\n if (mouseIsPressed) {\n fill(0);\n } else {\n fill(255);\n }\n ellipse(mouseX, mouseY, 80, 80);\n}\n\nimport { sketch } from \"https://esm.town/v/saolsen/p5\";\nexport default sketch(import.meta.url);\n```\n\n## How it works\nThe sketch function returns an http handler that sets up a basic page with p5.js added. It then imports your module from the browser and wires up all the exports so p5.js can see them. All the code in your val will run in the browser (except for the default `sketch` export) so you can't call any Deno functions, environment variables, or other server side apis.\n\n\nMigrated from folder: art/p5",[149],"pulls","branches","forks","envVars",{"_161":90,"_163":90},"connections",{"_161":90,"_162":90},"count","unfilledCount","emptyCount",{"_43":148,"_32":149,"_30":150,"_142":-5,"_41":42,"_40":61,"_143":49,"_38":170,"_13":90,"_33":20,"_35":152,"_24":25,"_146":-5,"_167":171,"_27":172},{"_43":141,"_32":28,"_30":31,"_142":-5,"_41":42,"_40":14,"_143":25,"_38":166,"_13":145,"_33":34,"_35":37,"_24":25,"_146":-5,"_167":168,"_27":169},["D",1723896604684],"children",[],[28],["D",1722108843731],[],[149],["D",1746199322374],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":55,"_103":104,"_105":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":51,"_92":93,"_94":95,"_96":45,"_97":98},"ctx",{"_77":-5,"_128":210,"_211":212,"_213":214,"_215":25,"_216":25,"_217":25,"_218":49,"_219":-5,"_220":-7,"_221":-7,"_222":90,"_223":25,"_224":25,"_225":-5,"_226":25,"_227":25,"_228":25,"_229":-5},"ENV",{"_181":182,"_183":184,"_185":85,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209},"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"]

Diff · v51