Search
p5
@moe
P5 sketch Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example. Usage Make a p5 sketch, you can import the p5 types to make it easier. import type * as p5 from "npm:@types/p5"; Export any "global" p5 functions. These are functions like setup and draw that p5 will call. Set the val type to http and default export the result of sketch , passing in import.meta.url . A full example looks like this. import type * as p5 from "npm:@types/p5";
export function setup() {
createCanvas(400, 400);
}
export function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
import { sketch } from "https://esm.town/v/saolsen/p5";
export default sketch(import.meta.url); How it works The 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.
Script
import type * as p5 from "npm:@types/p5";
* Export any "global" p5 functions. These are functions like `setup` and `draw` that p5 will call.
* Set the val type to http and default export the result of `sketch`, passing in `import.meta.url`.
import type * as p5 from "npm:@types/p5";
export function setup() {
createCanvas(400, 400);
export function draw() {
if (mouseIsPressed) {
## How it works
The 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.
import { frameHtml } from "https://esm.town/v/moe/frameHtmlRaw";
export function sketch(module: string, title = "P5 Sketch") {
return async function(req: Request): Promise<Response> {
// console.log("module:", module)
return new Response(html, { headers: { "Content-Type": "text/html" } });
function r() {
return Math.floor(Math.random() * 100);
valRuns
@neverstew
An interactive, runnable TypeScript val by neverstew
Script
import { searchParams } from "https://esm.town/v/stevekrouse/searchParams?v=9";
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";
export function valRuns({ token, id, error, source, since, until, offset, limit }: {
token: string;
id: string;
run
@neverstew
An interactive, runnable TypeScript val by neverstew
Script
import { fetch } from "https://esm.town/v/std/fetch";
export async function run(
{ username, valName, data, token }: Params,
): Promise<Result> {
VALLE
@tmcw
VALL-E LLM code generation for vals! Make apps with a frontend, backend, and database. It's a bit of work to get this running, but it's worth it. Fork this val to your own profile. Make a folder for the temporary vals that get generated, take the ID from the URL, and put it in tempValsParentFolderId . If you want to use OpenAI models you need to set the OPENAI_API_KEY env var . If you want to use Anthropic models you need to set the ANTHROPIC_API_KEY env var . Create a Val Town API token , open the browser preview of this val, and use the API token as the password to log in.
HTTP
* Make a folder for the temporary vals that get generated, take the ID from the URL, and put it in `tempValsParentFolderId`.
* If you want to use OpenAI models you need to set the `OPENAI_API_KEY` [env var](https://www.val.town/settings/environment-variables).
* If you want to use Anthropic models you need to set the `ANTHROPIC_API_KEY` [env var](https://www.val.town/settings/environment-variables).
functionZilla
@sdan
An interactive, runnable TypeScript val by sdan
Script
import { extractValArgs } from "https://esm.town/v/sdan/extractValArgs";
export async function functionZilla(fnc: string) {
let args = await extractValArgs(fnc);
console.log(args);
myApi
@pjlamb12
An interactive, runnable TypeScript val by pjlamb12
Script
export function myApi(name) {
return "hi " + name;
myApi
@asg0451
An interactive, runnable TypeScript val by asg0451
Script
export function myApi(name) {
return "hi " + name;
observable_esm
@mootari
Allows Observable notebooks to statically import ES modules as Runtime modules. See https://observablehq.com/d/1ff60814f0002dd5 for details and examples.
HTTP
const body = `
import * as module from ${JSON.stringify(url)};
export default function define(runtime, observer) {
const main = runtime.module();
main.variable(observer("__module")).define("__module", () => module);
myApi
@db0
An interactive, runnable TypeScript val by db0
Script
export function myApi(name) {
return "hi " + name;
myApi
@shanemcgrath
An interactive, runnable TypeScript val by shanemcgrath
Script
export function myApi(name) {
return "hi " + name;
VALLE
@peterzakin
Fork it and authenticate with your Val Town API token as the password. Needs an OPENAI_API_KEY env var to be set, and change the variables under "Set these to your own". https://x.com/JanPaul123/status/1812957150559211918
HTTP
Fork it and authenticate with your Val Town API token as the password. Needs an `OPENAI_API_KEY` env var to be set, and change the variables under "Set these to your own".
https://x.com/JanPaul123/status/1812957150559211918
valTownInspoList
@rodrigotello
Val Town inspiration & use cases list List [as object] used in Val Town's use cases and inspiration.
Check it out at in /examples/use-cases and /docs/tutorial/4
Script
"https://air-prod.imgix.net/11aee64e-8d3d-4f13-9bb0-e1cef14bc74c.jpg?w=1200&h=2000&auto=compress&ixlib=react-9.5.4",
"title": "Generate PDFs",
"description": "Generate PDFs using val functions by using an external library like jsPDF",
"val": "@vtdocs.examplePDF",
image:
