{"id":27920287,"url":"https://github.com/adiman9/p5-react-renderer","last_synced_at":"2025-08-21T09:08:11.201Z","repository":{"id":41797265,"uuid":"174386480","full_name":"adiman9/p5-react-renderer","owner":"adiman9","description":"A react renderer for p5.js","archived":false,"fork":false,"pushed_at":"2023-01-03T17:53:51.000Z","size":1682,"stargazers_count":26,"open_issues_count":35,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-09T12:52:34.443Z","etag":null,"topics":["p5","p5js","react","react-renderer","reactjs"],"latest_commit_sha":null,"homepage":null,"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/adiman9.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":"2019-03-07T17:01:15.000Z","updated_at":"2025-08-03T07:24:22.000Z","dependencies_parsed_at":"2023-02-01T08:31:18.926Z","dependency_job_id":null,"html_url":"https://github.com/adiman9/p5-react-renderer","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/adiman9/p5-react-renderer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiman9%2Fp5-react-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiman9%2Fp5-react-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiman9%2Fp5-react-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiman9%2Fp5-react-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adiman9","download_url":"https://codeload.github.com/adiman9/p5-react-renderer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiman9%2Fp5-react-renderer/sbom","scorecard":{"id":166504,"data":{"date":"2025-08-11","repo":{"name":"github.com/adiman9/p5-react-renderer","commit":"972cfa2ca335f18719cce95ad4803154f1866ea0"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/3 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 27 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"89 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-876r-hj45-fw7g","Warn: Project is vulnerable to: GHSA-v63x-xc9j-hhvq","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-w5q7-3pr9-x44w","Warn: Project is vulnerable to: GHSA-3fjq-93xj-3f3f","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-6fw4-hr69-g3rv","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-3f95-r44v-8mrg","Warn: Project is vulnerable to: GHSA-28xr-mwxg-3qc8","Warn: Project is vulnerable to: GHSA-9p95-fxvg-qgq2","Warn: Project is vulnerable to: GHSA-9w5j-4mwv-2wj8","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T15:03:22.435Z","repository_id":41797265,"created_at":"2025-08-16T15:03:22.435Z","updated_at":"2025-08-16T15:03:22.435Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271455226,"owners_count":24762701,"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","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["p5","p5js","react","react-renderer","reactjs"],"created_at":"2025-05-06T20:57:26.067Z","updated_at":"2025-08-21T09:08:11.184Z","avatar_url":"https://github.com/adiman9.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# p5 React Renderer\n\nThis library allows you to use p5.js as a render target for React. This means\nyou can write interactive p5 code while leveraging the power of React's\ndeclarative style.\n\nWriting p5 sketches this way opens up the door for reusable components and\ncleaner code, even when the sketches grow in complexity.\n\n## Getting started\n\nInstall it via npm or yarn:\n\n```bash\nnpm install p5-react-renderer\n\nyarn add p5-react-renderer\n```\n\n## Usage\n\nThe core of this library is a React component called `Canvas`. This will\ninstantiate a p5 canvas on the page and allow you to use p5 methods as jsx\nelements within it.\n\nEg.\n\n```jsx\nimport React from 'react';\nimport ReactDom from 'react-dom';\nimport {Canvas} from 'p5-react-renderer';\n\nfunction App() {\n  return (\n    \u003cCanvas\u003e\n      \u003ccircle args={[100, 100, 10]} /\u003e\n    \u003c/Canvas\u003e\n  );\n}\n\nReactDom.render(\u003cApp /\u003e, document.getElementById('app'));\n```\n\nAt its core all p5 methods can now be used as jsx elements and props to jsx\nelements. The arguments to a p5 method now become an array passed to the jsx\nelement in an `args` prop.\n\nEg.\n\n```jsx\n// This p5 code\ncircle(100, 100, 10);\n\n// Becomes this jsx\n\u003ccircle args={[100, 100, 10]} /\u003e;\n```\n\nFor methods that only take one argument you don't need to supply it as an array.\n\n### Passing functions as props\n\nAny prop given to a p5 jsx element can also accept a function that will return\nthe arguments. The difference being that the function will be given the p5\nobject as an argument. This allows you access to the p5 constants and methods\netc.\n\n```jsx\n// These are equivalent\n\u003ccircle args={[100, 100, 10]} /\u003e\n\n\u003ccircle args={p5 =\u003e {\n  // do work using p5.TWO_PI and other methods and constants etc\n  return [100, 100, 10];\n}} /\u003e\n```\n\n### P5 methods as props\n\nP5 methods can also be given as props to elements.\n\nEg.\n\n```jsx\n\u003ccircle args={[100, 100, 10]} fill=\"white\" /\u003e\n\n// or\n\u003ccircle args={[100, 100, 10]} fill={255} /\u003e\n\n// or\n\u003ccircle args={[100, 100, 10]} fill={p5 =\u003e {\n  p5.colorMode(p5.HSB);\n  return [255, 255, 255, 25];\n}} /\u003e\n```\n\nYou can also use most \"settings\" methods like `fill`, `stroke`, `noFill`,\n`colorMode` etc as components and nest other elements inside. All these children\nelements will inherit the behaviour.\n\nEg.\n\n```jsx\n\u003cfill args=\"red\" colorMode={p5 =\u003e p5.RGB}\u003e\n  // Everything in here will have a red fill and any color // work in components\n  will use RGB color mode\n  \u003ccircle args={[100, 100, 10]} /\u003e\n  \u003cnoStroke\u003e\n    // Everthing in here will have red fill and no stroke\n    \u003crect args={[200, 150, 10, 20]} /\u003e\n    // This rect will have a stroke as its stroke // takes priority over the\n    parent\n    \u003crect args={[500, 350, 10, 20]} stroke={150} /\u003e\n  \u003c/noStroke\u003e\n  \u003ccolorMode args={p5 =\u003e p5.HSB}\u003e// Anything in here will override the RBG colorMode and // will instead use HSB\u003c/colorMode\u003e\n\u003c/fill\u003e\n```\n\n## Code example\n\nHere is a minimal example:\n\n```jsx\nimport React from 'react';\nimport ReactDom from 'react-dom';\nimport { Canvas } from 'p5-react-renderer';\n\nfunction App() {\n  return (\n    \u003cCanvas size={[800, 800]} background={0}\u003e\n      \u003cstroke args{255} strokeWeight={2}\u003e\n        \u003ccircle args={[300, 300, 20]} /\u003e\n        \u003crect args={[700, 400, 100, 100]} noFill /\u003e\n      \u003c/stroke\u003e\n      \u003cnoStroke\u003e\n        \u003crect args={[700, 400, 100, 100]} fill=\"red\" /\u003e\n      \u003c/noStroke\u003e\n    \u003c/Canvas\u003e\n  );\n}\nReactDom.render(\u003cApp /\u003e, document.getElementById('app'));\n```\n\n## Hooks\n\nP5 provides a lot of \"event\" type functions such as `mousePressed` and\n`keyTyped` etc. All of these are available inside components as\n`useMousePressed` and `useKeyTyped` etc\n\n_Note_: Something to note about the use of these custom hooks. They only work\ninside components that are nested inside the `Canvas` component. This means they\nare not available in the `App` component that uses the `Canvas` in its render.\n\nA few more convenience hooks are provided:\n\n- `useP5` - Simply returns the active p5 object. This contains all the methods\n  and constants you are accustomed to using as globals in normal p5.\n- `useDraw` - Takes a function that will be called on every draw loop. Useful\n  for updating object state on each draw loop. The function passed to `useDraw`\n  will also be passed the p5 object every time it is called.\n- `useP5Effect` - Exactly the same as `useEffect` except you are given the p5\n  object as an argument to the callback function.\n- `useP5LayoutEffect` - Exactly the same as `useLayoutEffect` except you are\n  given the p5 object as an argument to the callback.\n\n## Clear the canvas on every loop\n\nThe default behaviour of the `Canvas` component is that it will clear and redraw\nthe canvas every time something changes. If you do not want to clear the canvas\non every draw loop you should provide the `Canvas` component with a `noClear`\nprop:\n\n```jsx\n// This will clear and redraw the canvas on every loop\n\u003cCanvas\u003e\n  // components\n\u003c/Canvas\u003e\n\n// This will draw new changes on top of existing drawings\n\u003cCanvas noClear\u003e\n  // components\n\u003c/Canvas\u003e\n```\n\n## Usage notes\n\nWhile all react features are available to you it is not advisable to manage\nstate the needs to update on every draw with react, especially if there are many\ninstances of a given object on the canvas all with their own state that updates\non every draw cycle.\n\n### Not advisable to do the following:\n\n```jsx\nimport React, {useState} from 'react';\nimport {Vector} from 'p5';\nimport {useDraw} from 'p5-react-renderer';\n\nfunction Particle() {\n  const [pos, setPos] = useState(new Vector(0, 0));\n  const [vel, setVel] = useState(new Vector(1, 0));\n\n  useDraw(p5 =\u003e {\n    pos.add(vel);\n    setPos(pos);\n  });\n\n  return \u003ccircle args={[pos.x, pos.y, 2]} fill=\"white\" /\u003e;\n}\n\nfunction App() {\n  // 1000 particles all setting state and each triggering\n  // react to recalc the tree every draw loop!!!! YIKES!!!\n  const particles = new Array(1000)\n    .fill(null)\n    .map((p, i) =\u003e \u003cParticle key={i} /\u003e);\n\n  return \u003cCanvas size={[800, 800]}\u003e{particles}\u003c/Canvas\u003e;\n}\n```\n\nInstead it is much more advisable to manage state by using a ref to vanilla\njavascript objects and call the `useDraw` hook only once in the top level of\nyour app and recalculate state of the raw javascript objects there and use those\nraw javascript objects to pass props to components.\n\n### Do this instead\n\n```jsx\nimport React, {useRef, useEffect} from 'react';\nimport {Vector} from 'p5';\nimport {useDraw} from 'p5-react-renderer';\n\nclass Particle {\n  constructor() {\n    this.pos = Vector(0, 0);\n    this.vel = Vector(0, 0);\n  }\n  update() {\n    this.pos.add(this.val);\n  }\n}\n\nfunction App() {\n  const particles = useRef([]);\n\n  useEffect(() =\u003e {\n    particles.current = new Array(1000)\n      .fill(null)\n      .map((p, i) =\u003e new Particle());\n  }, []);\n\n  const particleEls = particles.current.map((p, i) =\u003e {\n    p.update();\n    return \u003ccircle args={[p.pos.x, p.pos.y, 2]} fill=\"white\" /\u003e;\n  });\n\n  return \u003cCanvas size={[800, 800]}\u003e{particlesEls}\u003c/Canvas\u003e;\n}\n```\n\nDoing it this way keeps react from doing too much recalculations of the render\ntree and speeds things up considerably. It also keeps react as the presentation\nlayer and raw javascript objects as the logic layer.\n\nYou can see a full example of this in [/examples/perline-noise-flow].\n\n## Why make this library?\n\nThe reason is twofold. Firstly I wanted to learn more about React by\nimplementing my own custom renderer. Secondly, I am a big fan of the p5.js\nlibrary and html canvas more generally. However, complexity quickly get's out of\nhand with p5, especially as the library itself encourages globals and code is\nnecessarily imperative.\n\nBy using React you get all the advantages of declarative code with clean,\nreusable and reactive components. All the while still maintaining the easy to\nuse abstractions exposed by p5.\n\n## Word of warning\n\nThis is super super alpha right now, so use at your own discretion.\n\n## Contributing\n\nContributors are welcomed and encouraged. Submit a PR and let's get started.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadiman9%2Fp5-react-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadiman9%2Fp5-react-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadiman9%2Fp5-react-renderer/lists"}