{"id":22426275,"url":"https://github.com/tonyketcham/10print","last_synced_at":"2026-05-02T13:34:28.864Z","repository":{"id":47807871,"uuid":"299178996","full_name":"tonyketcham/10print","owner":"tonyketcham","description":"Exploring a little piece of history using p5","archived":false,"fork":false,"pushed_at":"2022-11-09T23:37:36.000Z","size":149,"stargazers_count":2,"open_issues_count":8,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T06:17:37.791Z","etag":null,"topics":["10print","coding-train","generative-art","p5js","svelte"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tonyketcham.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-28T03:40:33.000Z","updated_at":"2021-03-17T13:28:24.000Z","dependencies_parsed_at":"2023-01-22T21:45:29.413Z","dependency_job_id":null,"html_url":"https://github.com/tonyketcham/10print","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tonyketcham/10print","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonyketcham%2F10print","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonyketcham%2F10print/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonyketcham%2F10print/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonyketcham%2F10print/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tonyketcham","download_url":"https://codeload.github.com/tonyketcham/10print/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonyketcham%2F10print/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32536579,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T12:25:33.646Z","status":"ssl_error","status_checked_at":"2026-05-02T12:24:51.733Z","response_time":132,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["10print","coding-train","generative-art","p5js","svelte"],"created_at":"2024-12-05T19:17:13.030Z","updated_at":"2026-05-02T13:34:28.832Z","avatar_url":"https://github.com/tonyketcham.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e10print using a p5.js Svelte App\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\nvery good! 👋👋🏿👋🏽👋🏻👋🏾👋\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/11print.png\" alt=\"maybe this is like......11print i think?\" width=\"300\" height=\"300\" /\u003e\n\u003c/p\u003e\n\nThis was made by Dan Shiffman seeding his [wonderful teachings](https://www.youtube.com/watch?v=bEyTZ5ZZxZs) into my little brain! This is also my first formal step into generative algorithms beyond just thinking about them for a year.\n\nThe project uses my [project skeleton](https://github.com/tonyketcham/p5-svelte-template) for creating a [p5.js](https://p5js.org/) sketch in a [Svelte](https://svelte.dev) app.\n\nFeel free to clone and tweak this, and add contributions as pull requests!\n\nOr, to create your own new project based on that p5 template I'm using:\n\n```bash\nnpx degit tonyketcham/p5-svelte-template 10print\ncd p5-svelte-app\n```\n\n_Note that you will need to have [Node.js](https://nodejs.org) installed._\n\n## Get started\n\nInstall the dependencies...\n\n```bash\ncd 10print\nnpm install\n```\n\n...then start [Rollup](https://rollupjs.org):\n\n```bash\nnpm run dev\n```\n\nNavigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.\n\nBy default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.\n\n## p5.js instance mode\n\nSince Svelte doesn't allow us to globally expose the p5 library, we must instead do some trickery and use p5's [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode):\n\n```js\nimport p5 from \"p5\";\n\nexport default function sketch(node) {\n  new p5((instance) =\u003e workspace(instance), node);\n}\n\n/**\n * The main method\n *\n * @param {p5} p5 sketch instance, scoped where many may exist on the same page\n */\nconst workspace = (p5) =\u003e {\n  let x = 100;\n  let y = 100;\n\n  p5.setup = () =\u003e {\n    p5.createCanvas(400, 400);\n  };\n\n  p5.draw = () =\u003e {\n    p5.background(0);\n\n    if (p5.mouseIsPressed) {\n      p5.fill(255);\n    } else {\n      p5.fill(0);\n    }\n    p5.ellipse(p5.mouseX, p5.mouseY, 50, 50);\n  };\n};\n```\n\nThis has the benefit of allowing multiple sketches per page with seperation of concerns.\n\n## Building and running in production mode\n\nTo create an optimised version of the app:\n\n```bash\nnpm run build\n```\n\nYou can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).\n\n## Single-page app mode\n\nBy default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.\n\nIf you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for _any_ path. You can make it so by editing the `\"start\"` command in package.json:\n\n```js\n\"start\": \"sirv public --single\"\n```\n\n## Using TypeScript\n\nThis template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:\n\n```bash\nnode scripts/setupTypeScript.js\n```\n\nOr remove the script via:\n\n```bash\nrm scripts/setupTypeScript.js\n```\n\n## Deploying to the web\n\n### With [Vercel](https://vercel.com)\n\nInstall `vercel` if you haven't already:\n\n```bash\nnpm install -g vercel\n```\n\nThen, from within your project folder:\n\n```bash\ncd public\nvercel deploy --name my-project\n```\n\n### With [surge](https://surge.sh/)\n\nInstall `surge` if you haven't already:\n\n```bash\nnpm install -g surge\n```\n\nThen, from within your project folder:\n\n```bash\nnpm run build\nsurge public my-project.surge.sh\n```\n\n---\n\nThis project is a fork of the [official Svelte template](https://github.com/sveltejs/template).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonyketcham%2F10print","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftonyketcham%2F10print","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonyketcham%2F10print/lists"}