{"id":29101652,"url":"https://github.com/poullorca/p5_template","last_synced_at":"2025-06-28T21:06:49.536Z","repository":{"id":300994278,"uuid":"1007818932","full_name":"PoulLorca/p5_template","owner":"PoulLorca","description":"A starter template for creative coding with p5.js, featuring a multi-layer drawing system, reference image overlay, guide grids, axis guides, and customizable UI elements—all easily toggled by keyboard shortcuts. Perfect for rapid prototyping and artwork organization in the browser.","archived":false,"fork":false,"pushed_at":"2025-06-24T15:47:11.000Z","size":535,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-24T16:44:35.310Z","etag":null,"topics":["creativecoding","generativeart","javascript","p5js","startertemplate"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PoulLorca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-24T15:19:17.000Z","updated_at":"2025-06-24T15:53:21.000Z","dependencies_parsed_at":"2025-06-24T16:54:56.377Z","dependency_job_id":null,"html_url":"https://github.com/PoulLorca/p5_template","commit_stats":null,"previous_names":["poullorca/p5_template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PoulLorca/p5_template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoulLorca%2Fp5_template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoulLorca%2Fp5_template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoulLorca%2Fp5_template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoulLorca%2Fp5_template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PoulLorca","download_url":"https://codeload.github.com/PoulLorca/p5_template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoulLorca%2Fp5_template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262497252,"owners_count":23320296,"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":["creativecoding","generativeart","javascript","p5js","startertemplate"],"created_at":"2025-06-28T21:06:46.578Z","updated_at":"2025-06-28T21:06:49.527Z","avatar_url":"https://github.com/PoulLorca.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# p5_template\n\n![Example Output](image1.png)\n\n## Overview\n\n**p5_template** is a powerful starter template for [p5.js](https://p5js.org/) projects, designed for rapid prototyping and creative coding with a layer-based workflow.\n\n## Features\n\n- **Layer-Based Drawing:** Organize your sketch into multiple layers, each managed by its own drawing function. Easily toggle visibility of layers.\n- **Reference Images:** Add reference images to the `assets` folder and display them as an overlay.\n- **Guide Grid \u0026 Axes:** Overlay a customizable grid and central axes to assist with alignment and composition.\n- **Tooltip:** Dynamic tooltip displays mouse coordinates.\n- **Keyboard Shortcuts:** Instantly show/hide features and layers with easy keyboard commands.\n\n## Keyboard Shortcuts\n\n| Key  | Action                          |\n|------|---------------------------------|\n| `r`  | Toggle reference image layer    |\n| `g`  | Toggle grid layer               |\n| `t`  | Toggle tooltip                  |\n| `d`  | Toggle drawing layer            |\n| `1`  | Set reference opacity to 50     |\n| `2`  | Set reference opacity to 100    |\n| `3`  | Set reference opacity to 150    |\n\n## Layer System\n\nWork in multiple layers: each layer is a function (e.g., `layer1`, `layer2`, ...) that you can implement to organize your drawing workflow. Toggle each layer’s visibility independently for maximum flexibility.\n\n## Getting Started\n\n1. **Clone this repository**:\n   ```bash\n   git clone https://github.com/PoulLorca/p5_template.git\n   ```\n\n2. **Add reference images** to the `assets` folder (default: `reference.png`).\n\n3. **Open `index.html`** in your browser and start coding in `sketch.js`.\n\n## Example Output\n\nThe image below shows a reference image, grid, axes, and tooltip in action:\n\n![Example Output](image1.png)\n\n## Folder Structure\n\n```\np5_template/\n├── assets/        # Place your reference images here\n├── index.html     # Starter HTML file\n├── sketch.js      # Main p5.js sketch file\n├── style.css      # Styling for your project\n└── README.md      # Project documentation\n```\n\n## Customization\n\n- Add or edit drawing layers in `sketch.js` (e.g., `layer1`, `layer2`, ...).\n- Adjust grid size, colors, or shortcut keys as needed.\n\n## License\n\nThis project is provided as-is for educational and creative use.\n\n---\nMade with [p5.js](https://p5js.org/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoullorca%2Fp5_template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpoullorca%2Fp5_template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoullorca%2Fp5_template/lists"}