{"id":13401927,"url":"https://github.com/mattdesl/canvas-sketch","last_synced_at":"2025-05-13T23:11:06.673Z","repository":{"id":37789548,"uuid":"137313102","full_name":"mattdesl/canvas-sketch","owner":"mattdesl","description":"[beta] A framework for making generative artwork in JavaScript and the browser.","archived":false,"fork":false,"pushed_at":"2024-02-08T15:47:59.000Z","size":21059,"stargazers_count":5150,"open_issues_count":60,"forks_count":401,"subscribers_count":106,"default_branch":"master","last_synced_at":"2025-05-12T22:38:57.280Z","etag":null,"topics":[],"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/mattdesl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/contributing.md","funding":null,"license":"LICENSE.md","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}},"created_at":"2018-06-14T06:01:46.000Z","updated_at":"2025-05-08T11:01:26.000Z","dependencies_parsed_at":"2024-05-06T01:44:21.908Z","dependency_job_id":"0d159363-ec66-426e-abea-20b962443455","html_url":"https://github.com/mattdesl/canvas-sketch","commit_stats":{"total_commits":239,"total_committers":20,"mean_commits":11.95,"dds":"0.10041841004184104","last_synced_commit":"e4bc63dbc7f9fac56b7c1b6af0feabd070c08f8d"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fcanvas-sketch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fcanvas-sketch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fcanvas-sketch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fcanvas-sketch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattdesl","download_url":"https://codeload.github.com/mattdesl/canvas-sketch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254042340,"owners_count":22004901,"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":[],"created_at":"2024-07-30T19:01:09.308Z","updated_at":"2025-05-13T23:11:01.639Z","avatar_url":"https://github.com/mattdesl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Tools","Libraries"],"sub_categories":["Frameworks • Libraries • Ecosystems"],"readme":"### canvas-sketch\n\n`canvas-sketch` is a loose collection of tools, modules and resources for creating generative art in JavaScript and the browser.\n\n- :closed_book: [Documentation](./docs/README.md)\n\n- :wrench: [Examples](./examples/)\n\n#\n\n\u003cp align=\"center\"\u003e\n  \u003csub\u003eexample of \u003ccode\u003ecanvas-sketch\u003c/code\u003e running in Chrome\u003c/sub\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003csub\u003e↓\u003c/sub\u003e \n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/assets/images/chrome-example.png\" width=\"50%\" /\u003e\n\u003c/p\u003e\n\n### Quick Start with Node.js \u0026 npm\n\nTo jump directly into `canvas-sketch`, try the following terminal commands with `node@15.x` and `npm@7.x` or newer:\n\n```sh\n# Make a new folder to hold all your generative sketches\nmkdir my-sketches\n\n# Move into that folder\ncd my-sketches\n\n# Scaffold a new 'sketch.js' file and open the browser\nnpx canvas-sketch-cli sketch.js --new --open\n```\n\n\u003e :bulb: Notice the `x` in `npx`, and the `-cli` in `canvas-sketch-cli`\n\nNow, while in the browser, hit `Cmd + S` or `Ctrl + S` to export a high-resolution PNG of your artwork to your `~/Downloads` folder.\n\n### More Commands\n\nSome other commands to try:\n\n```sh\n# Start the tool on an existing file and change PNG export folder\nnpx canvas-sketch-cli src/foobar.js --output=./tmp/\n\n# Start a new sketch from the Three.js template\nnpx canvas-sketch-cli --new --template=three --open\n\n# Build your sketch to a sharable HTML + JS website\nnpx canvas-sketch-cli src/foobar.js --build\n\n# Develop with \"Hot Reloading\" instead of full page reload\nnpx canvas-sketch-cli src/foobar.js --hot\n```\n\nFor more features and details, see the [Documentation](./docs/README.md).\n\n### Installation Guide\n\nThe examples above use `npx` which is a convenient way to install and run a local CLI tool, but you might want to setup `canvas-sketch` as a global command. You can see more details in the [Installation Guide](./docs/installation.md).\n\n### Code Example\n\nOnce you have the CLI tool running, you can try this example of an A4 print artwork.\n\n```js\nconst canvasSketch = require('canvas-sketch');\n\n// Sketch parameters\nconst settings = {\n  dimensions: 'a4',\n  pixelsPerInch: 300,\n  units: 'in'\n};\n\n// Artwork function\nconst sketch = () =\u003e {\n  return ({ context, width, height }) =\u003e {\n    // Margin in inches\n    const margin = 1 / 4;\n\n    // Off-white background\n    context.fillStyle = 'hsl(0, 0%, 98%)';\n    context.fillRect(0, 0, width, height);\n\n    // Gradient foreground\n    const fill = context.createLinearGradient(0, 0, width, height);\n    fill.addColorStop(0, 'cyan');\n    fill.addColorStop(1, 'orange');\n\n    // Fill rectangle\n    context.fillStyle = fill;\n    context.fillRect(margin, margin, width - margin * 2, height - margin * 2);\n  };\n};\n\n// Start the sketch\ncanvasSketch(sketch, settings);\n```\n\nWhen exporting the image in browser with `Cmd + S` or `Ctrl + S` keystrokes, the saved PNG file matches 21 x 29.7 cm at 300 DPI, and can be printed with archival ink on quality paper.\n\nResulting image looks something like this:\n\n\u003cimg src=\"docs/assets/images/gradient.png\" width=\"50%\" /\u003e\n\n###### \u003csup\u003eNote: The above PNG file has been scaled/optimized for web.\u003c/sup\u003e\n\n### Roadmap\n\nThere are many features still outstanding, such as:\n\n- API \u0026 CLI Docs\n- Easy \u0026 beginner-friendly examples\n- Website/frontend\n- HUD/GUI controls\n- \"Gallery Mode\" for viewing many local sketches\n- External Module for utilities (randomness, geometry, etc)\n- Unit tests\n- More??\n\n### License\n\nMIT, see [LICENSE.md](http://github.com/mattdesl/canvas-sketch/blob/master/LICENSE.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattdesl%2Fcanvas-sketch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattdesl%2Fcanvas-sketch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattdesl%2Fcanvas-sketch/lists"}