{"id":18439073,"url":"https://github.com/demonstrandum/basiccanvas","last_synced_at":"2025-04-07T21:32:13.470Z","repository":{"id":54285778,"uuid":"142924402","full_name":"Demonstrandum/BasicCanvas","owner":"Demonstrandum","description":"A friendlier way to interact with the canvas; simple library for canvas manipulation.","archived":false,"fork":false,"pushed_at":"2023-10-31T17:35:57.000Z","size":1784,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T00:51:20.123Z","etag":null,"topics":["2d","art","canvas","canvas-2d-context","design","drawing","graphics","hacktoberfest","javascript","js","library"],"latest_commit_sha":null,"homepage":"https://canvas.knutsen.co/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Demonstrandum.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-30T20:23:12.000Z","updated_at":"2023-10-30T20:29:59.000Z","dependencies_parsed_at":"2022-08-13T11:00:45.807Z","dependency_job_id":"fc55df8c-90b6-4d28-9736-256348484f80","html_url":"https://github.com/Demonstrandum/BasicCanvas","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Demonstrandum%2FBasicCanvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Demonstrandum%2FBasicCanvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Demonstrandum%2FBasicCanvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Demonstrandum%2FBasicCanvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Demonstrandum","download_url":"https://codeload.github.com/Demonstrandum/BasicCanvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247732641,"owners_count":20986893,"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":["2d","art","canvas","canvas-2d-context","design","drawing","graphics","hacktoberfest","javascript","js","library"],"created_at":"2024-11-06T06:23:16.370Z","updated_at":"2025-04-07T21:32:09.395Z","avatar_url":"https://github.com/Demonstrandum.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BasicCanvas\nA friendlier way interact with the canvas.\n\n## Usage\njsdelivr CDN (use this to import):\n- Canvas\n  ```\n  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.3/lib/BasicCanvas.js\n  ```\n- Shapes\n  ```\n  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.3/lib/BasicShapes.js\n  ```\n- DOM\n  ```\n  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.3/lib/BasicDOM.js\n  ```\n### Docs\n\nAuto-generated documentation: [canvas.knutsen.co/docs/](https://canvas.knutsen.co/docs/)\n\nTODO: Instructions on usage, for now look at the example files (and/or source files), still a small project.\n\n\n## Run Examples\nExample hosted with ▲now: [canvas.knutsen.co](https://canvas.knutsen.co/example/)\n\nTo run unlisted examples, or run specific examples by a specifc URL, simply go to:\n- [canvas.knutsen.co/example/?](https://canvas.knutsen.co/example/?) + _name of the js file_\n- e.g. [canvas.knutsen.co/example/?music.js](https://canvas.knutsen.co/example/?music.js)\n\nFirst clone:\n```sh\ngit clone https://github.com/Demonstrandum/BasicCanvas.git\ncd BasicCanvas\n```\nthen run with:\n```sh\n./server.sh\n```\nAnd go to http://localhost:8000/example/ (for an example file, see the index.html code to switch example).\n\n## Quick Examples\n![tree.js](https://user-images.githubusercontent.com/26842759/54957430-a7a08580-4f4a-11e9-8928-7477b41ca01e.png)\n\n[See Animation.](https://canvas.knutsen.co/example/?tree.js)\n\n```js\nimport * as BC from '../lib/BasicCanvas.js';\nimport {line} from '../lib/BasicShapes.js';\n\nuse(BC);\n\nconst sketch = canvas_id('sketch');\nsketch.dimensions(400, 400);\nsketch.translate(sketch.width / 2, sketch.height / 2);\n\nsketch.fill = RGB(50, 30, 80);\nsketch.stroke = HSL(340, 100, 45, 170);\nsketch.stroke_weight = 4;\nsketch.stroke_cap = 'round';\n\nconst branch = (previous, angle, depth, inc, first = true) =\u003e {\n  if (depth \u003c 0) return;\n\n  let next = previous;\n  if (!first) {\n    next = Polar(Math.sqrt(depth) * 16, -angle, previous);\n    sketch.render(line(next, previous));\n  }\n\n  branch(next, angle + inc, depth - 1, inc, false);\n  branch(next, angle - inc, depth - 1, inc, false);\n};\n\nconst tree = P(0, 10);\nsketch.loop(frame =\u003e {\n  sketch.background();\n  sketch.render(line(P(0, 200), tree));\n  branch(tree, Math.PI / 2, 7, 0.6 + Math.sin(frame / 20) / 3);\n});\n```\n\nDrawing a simple sinusoidal progressive wave:\n```js\nimport * as BC from 'https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.3/lib/BasicCanvas.js';\n// If running this locally, you need a server running for `import`s to work, (for now).\n\nuse(BC)  // To avoid having to write `BC.` all the time.\n         // (Be ware of collisions)\n\nconst sketch = canvas_id('sketch'); // Gets canvas with id=\"sketch\".\nsketch.dimensions(400, 400); // width x height, size of the canvas.\n\nsketch.stroke = RGB(0); // Same as BC.RGBA(0, 0, 0, 255).\nsketch.stroke_weight = 8; // 8px wide.\nsketch.stroke_cap = 'round';\n\nconst BG = RGB(255, 255, 110);\nsketch.loop(frame =\u003e {  // `frame` is an integer, starts at 0 and increments for every frame drawn.\n  sketch.background(BG); // Redraw background each frame.\n\n  sketch.render('sine', shape =\u003e { // Create new shape, `shape(name, construction of shape callback)`\n    for (let x = 0; x \u003c 3 * Math.PI; x += 0.2) { // Draw sine curve for this frame, next frame will be different\n      shape.vertex(BC.Point(32 * x + 50, 32 * Math.sin(x + frame / 10) + 200));\n    }\n  });\n});\n```\nMake sure the relative path to the BasicCanvas.js file is correct.\n\nIf the above file is called something like `sine_wave.js` then the `index.html` file (in the same folder) should look something like:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\" dir=\"ltr\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eSimple Sinusoidal Wave\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ccanvas id=\"sketch\"\u003e\u003c/canvas\u003e\n    \u003cscript src=\"sine_wave.js\" type=\"module\" charset=\"utf-8\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\nOr, you could use the `your_example.js` file found in the example/ folder of the repo.\n\n\n## Try Yourself\nCheck out the CodePen: https://codepen.io/wernstrom/project/editor/DKzVaY\nExplore the library by making small modifications to the CodePen and/or rewriting it to do something new.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdemonstrandum%2Fbasiccanvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdemonstrandum%2Fbasiccanvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdemonstrandum%2Fbasiccanvas/lists"}