{"id":15408034,"url":"https://github.com/arvinxx/p5-typescript-template","last_synced_at":"2026-05-03T04:38:48.103Z","repository":{"id":44668367,"uuid":"288880120","full_name":"arvinxx/p5-typescript-template","owner":"arvinxx","description":"processing/P5.js Typescript Template","archived":false,"fork":false,"pushed_at":"2022-06-26T08:01:23.000Z","size":5,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-02T03:44:29.188Z","etag":null,"topics":["p5js","processing","template","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/arvinxx.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-08-20T01:57:30.000Z","updated_at":"2024-09-22T22:52:24.000Z","dependencies_parsed_at":"2022-09-14T08:51:40.801Z","dependency_job_id":null,"html_url":"https://github.com/arvinxx/p5-typescript-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arvinxx%2Fp5-typescript-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arvinxx%2Fp5-typescript-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arvinxx%2Fp5-typescript-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arvinxx%2Fp5-typescript-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arvinxx","download_url":"https://codeload.github.com/arvinxx/p5-typescript-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245956932,"owners_count":20700181,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["p5js","processing","template","typescript"],"created_at":"2024-10-01T16:30:50.413Z","updated_at":"2026-05-03T04:38:48.059Z","avatar_url":"https://github.com/arvinxx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Starter Project\n\n## p5.js with Typescript\n\nProject to quickly get something working in [p5.js](https://p5js.org/) and [typescript](https://www.typescriptlang.org/)\n\n## Demo\n\n## **[Click here for Demo](https://gaweph.github.io/p5-typescript-starter/)**\n\n\nThis is based on the [Regular Polygon](https://p5js.org/examples/form-regular-polygon.html) sketch available in the p5js examples\n\n## Getting Started\n\n### Installing\n\n```\ngit clone https://github.com/Gaweph/p5-typescript-starter.git\n```\n\n```\nnpm i\n```\n\n### Usage\n\n```\nnpm start\n```\n\nA local version will now be running on [localhost:3000](http://localhost:3000)\n\n## Global and Instanced mode\n\nP5 is able to run in either global or instanced mode.\nhttps://github.com/processing/p5.js/wiki/Global-and-instance-mode\n\nThis starter project now uses **Global mode** to bring it inline with most of the online resources provided by the project.\n\nAs stated on the P5 wiki:\n\n\u003e While this is convenient (and friendlier) it's important to note that this can lead to problems and confusion down the road when mixing other JS libraries or trying to embed multiple p5 sketches on the same page. A safer, more advanced methodology is to create a p5 sketch as an object \"instance\".\n\nThe following examples are both functionaly the same.\n\n### Global Mode\n\n```typescript\nlet x = 100;\nlet y = 100;\n\nfunction setup() {\n  createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n  background(0);\n  fill(255);\n  rect(x, y, 50, 50);\n}\n```\n\n### Instanced Mode\n\n```typescript\nvar sketch = (p: p5) =\u003e {\n  this.x = 100;\n  this.y = 100;\n  p.setup = () =\u003e {\n    p.createCanvas(p.windowWidth, p.windowHeight);\n  };\n\n  p.draw = () =\u003e {\n    p.background(0);\n    p.fill(255);\n    p.rect(this.x, this.y, 50, 50);\n  };\n};\n\nnew p5(sketch);\n```\n\nThis starter project will work with either mode, feel free to experiment with both.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farvinxx%2Fp5-typescript-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farvinxx%2Fp5-typescript-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farvinxx%2Fp5-typescript-template/lists"}