{"id":13506725,"url":"https://github.com/LuXDAmore/generative-art","last_synced_at":"2025-03-30T05:31:22.489Z","repository":{"id":44738492,"uuid":"248802000","full_name":"LuXDAmore/generative-art","owner":"LuXDAmore","description":"🌈🎨 Generative Art is the idea realized as genetic code of artificial events, as construction of dynamic complex systems able to generate endless variations. This is also a nuxt-module (@luxdamore/nuxt-canvas-sketch) - [three.js, tensorflow.js and gsap are not included].","archived":false,"fork":false,"pushed_at":"2023-05-09T02:23:46.000Z","size":55374,"stargazers_count":58,"open_issues_count":8,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-29T23:34:00.412Z","etag":null,"topics":["3d-art","art","canvas","canvas-sketch","creative","creative-coding","facemesh","generative-art","gsap","modules","nuxt","nuxt-module","nuxtjs","tensorflow","tensorflow-examples","tensorflow-tutorials","three-js","threejs","visual-design","vuejs"],"latest_commit_sha":null,"homepage":"https://luxdamore.github.io/generative-art","language":"Vue","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/LuXDAmore.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"patreon":"luxdamore","open_collective":"luca-iaconelli","ko_fi":"luxdamore","liberapay":"luxdamore","issuehunt":"luxdamore","otechie":"luxdamore","custom":["https://www.paypal.me/luxdamore"]}},"created_at":"2020-03-20T16:26:39.000Z","updated_at":"2024-08-16T11:22:04.000Z","dependencies_parsed_at":"2023-12-19T01:01:48.333Z","dependency_job_id":"c2785198-d8a0-4193-bcdd-f09adb3423ed","html_url":"https://github.com/LuXDAmore/generative-art","commit_stats":{"total_commits":305,"total_committers":1,"mean_commits":305.0,"dds":0.0,"last_synced_commit":"3823f5b2be0a6f244376be90823fbd1a523a75f6"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuXDAmore%2Fgenerative-art","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuXDAmore%2Fgenerative-art/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuXDAmore%2Fgenerative-art/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuXDAmore%2Fgenerative-art/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LuXDAmore","download_url":"https://codeload.github.com/LuXDAmore/generative-art/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246281099,"owners_count":20752203,"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":["3d-art","art","canvas","canvas-sketch","creative","creative-coding","facemesh","generative-art","gsap","modules","nuxt","nuxt-module","nuxtjs","tensorflow","tensorflow-examples","tensorflow-tutorials","three-js","threejs","visual-design","vuejs"],"created_at":"2024-08-01T01:00:56.307Z","updated_at":"2025-03-30T05:31:20.076Z","avatar_url":"https://github.com/LuXDAmore.png","language":"Vue","funding_links":["https://patreon.com/luxdamore","https://opencollective.com/luca-iaconelli","https://ko-fi.com/luxdamore","https://liberapay.com/luxdamore","https://issuehunt.io/r/luxdamore","https://otechie.com/luxdamore","https://www.paypal.me/luxdamore","https://www.patreon.com/luxdamore"],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# 🌈🎨 Generative Art || Nuxt Canvas Sketch (three.js, tensorflow.js and gsap)\n\n[![Code Quality][quality-src]][quality-href]\n[![Downloads][npm-downloads-src]][npm-downloads-href]\n[![Dependencies][dependencies-src]][dependencies-href]\n[![Circle CI][circle-ci-src]][circle-ci-href]\n[![Version][npm-version-src]][npm-version-href]\n[![Donate][paypal-donate-src]][paypal-donate-href]\n\n[quality-src]: https://img.shields.io/badge/code%20quality-A-informational?style=flat\n[quality-href]: https://luxdamore.github.io/generative-art/\n\n[npm-downloads-src]: https://img.shields.io/npm/dt/@luxdamore/nuxt-canvas-sketch.svg?style=flat\u0026color=darkgreen\n[npm-downloads-href]: https://npmjs.com/package/@luxdamore/nuxt-canvas-sketch\n\n[dependencies-src]: https://img.shields.io/badge/dependencies-up%20to%20date-darkgreen.svg?style=flat\n[dependencies-href]: https://npmjs.com/package/@luxdamore/generative-art\n\n[circle-ci-src]: https://img.shields.io/circleci/project/github/LuXDAmore/generative-art.svg?style=flat\u0026color=darkgreen\n[circle-ci-href]: https://circleci.com/gh/LuXDAmore/generative-art\n\n[npm-version-src]: https://img.shields.io/npm/v/@luxdamore/nuxt-canvas-sketch/latest.svg?style=flat\u0026color=darkorange\u0026label=version\n[npm-version-href]: https://npmjs.com/package/@luxdamore/nuxt-canvas-sketch\n\n[paypal-donate-src]: https://img.shields.io/badge/paypal-donate-black.svg?style=flat\n[paypal-donate-href]: https://www.paypal.me/luxdamore\n[patreon-donate-href]: https://www.patreon.com/luxdamore\n[kofi-donate-href]: https://ko-fi.com/luxdamore\n\n\u003e Generative Art is the idea realized as genetic code of artificial events, as construction of dynamic complex systems able to generate endless variations. This is also a nuxt-module (@luxdamore/nuxt-canvas-sketch) - [three.js, tensorflow.js and gsap are not included].\n\n## 💘 Motivation\n\nI'm introducing myself into the **Generative art**, **3D art**, **Visual design** and **Creative coding** worlds.\n\nSo, why i can't do this with my favorite libraries and framework?\nInfact, this is also a module for [**NuxtJS**](https://nuxtjs.org/), it inject the [canvas-sketch](https://github.com/mattdesl/canvas-sketch) library with [`canvas-sketch-utils`](https://github.com/mattdesl/canvas-sketch-util) and [`load-asset`](https://github.com/mattdesl/load-asset) (from the creative coder [Matt DesLauriers](https://www.mattdesl.com/)).\n\nAfter installation, you have access in NuxtJS (on the [client-side](https://nuxtjs.org/docs/2.x/directory-structure/plugins#client-or-server-side-only)) at two things, `$canvasSketch` (the main module, used internally) and at the method `$sketch` (it starts the sketch).\n\nCheck out the [src/pages](./src/pages) folder for some demos.\n_Every page correspond to an example in the [main website](https://luxdamore.github.io/generative-art)_.\n\n\u003e N.B.: This is a _work-in-progress project_, I'm learning and testing new things here.\n___\n\n## Setup\n\n1. **Install** `@luxdamore/nuxt-canvas-sketch` as a dependency:\n   - `yarn add @luxdamore/nuxt-canvas-sketch`;\n   - or, `npm install --save @luxdamore/nuxt-canvas-sketch`;\n2. **Append** `@luxdamore/nuxt-canvas-sketch` to the `modules` array of your `nuxt.config.js`.\n\n## Configuration\n\n```js\n\n    // nuxt.config.js\n    export default {\n\n        // Module injection\n        modules: [ '@luxdamore/nuxt-canvas-sketch' ],\n\n        // Module configuration\n        canvasSketch: {\n            hideErrorsInConsole: false,\n            hideGenericMessagesInConsole: false, // `true` in production\n        },\n\n    };\n\n```\n\n## Usage\n\n\u003e I'm using the [sketchManager](https://github.com/mattdesl/canvas-sketch/blob/master/docs/api.md#sketchmanager), because i think with **VueJS** it's the better way to remove and clean handlers during the destroy phase.\n\n```html\n\n    \u003ctemplate\u003e\n        \u003cdiv class=\"canvas__container\"\u003e\n\n            \u003ccanvas ref=\"canvas\" /\u003e\n\n        \u003c/div\u003e\n    \u003c/template\u003e\n\n    \u003cscript\u003e\n        // Page, component or layout\n        export default {\n            data: () =\u003e (\n                {\n                    sketchManager: null,\n                }\n            ),\n            async mounted() {\n\n                try {\n\n                    this.sketchManager = await this.$sketch(\n                        // Settings of the sketch\n                        {\n                            maxPixelRatio: 3,\n                            hotkeys: false,\n                            // or you can pass a DOMCanvasElement ex.\n                            // document.querySelector( 'canvas' )\n                            canvas: this.$refs.canvas,\n                        },\n                        // Method for the rendering\n                        this.sketch,\n                    );\n\n                    // Ensure every listener is removed on-component-destoy\n                    this.$once(\n                        'hook:beforeDestroy',\n                        () =\u003e this.sketchManager.unload()\n                    );\n\n                } catch( e ) {\n\n                    console.error(\n                        e\n                    );\n\n                }\n\n            },\n            methods: {\n                sketch({ context }) {\n\n                    // Here you start coding-art\n\n                    return ({ context }) =\u003e {\n\n                        // Here you can return some animated stuff\n\n                    };\n\n                },\n            },\n        };\n    \u003c/script\u003e\n\n    \u003cstyle scoped\u003e\n        canvas {\n\n            position: absolute;\n            top: 0;\n            left: 0;\n            z-index: 1;\n            display: block;\n            width: 100vw;\n            height: 100vh;\n            margin: 0;\n            padding: 0;\n\n        }\n    \u003c/style\u003e\n\n```\n\n___\n\n### Related things\n\n#### ThreeJS\n\nThere are lots of examples based on [`threejs`](https://threejs.org/), but it's not included, You can install the library with:\n\n```bash\n\n    # cmd\n    yarn add three # or npm install --save three\n\n```\n\n_There si also a [ThreeJS starter template](https://luxdamore.github.io/generative-art/single/three-js-starter) based on the plugin._\n\n#### Gsap (GreenSock)\n\nThere are some examples based on the [`gsap` library](https://greensock.com/), but it's not included, You can install the library with:\n\n```bash\n\n    # cmd\n    yarn add gsap # or npm install --save gsap\n\n```\n\n_Check the [layout navigation example](https://luxdamore.github.io/generative-art/navigate/page-1)._\n\n#### Tensorflow - Machine Learning and face recognition with Facemesh\n\n[TensorFlow.js](https://www.tensorflow.org/js) and [Facemesh](https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection) are not included, but you can follow the installation process [here](https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection#installation):\n\n```bash\n\n    # cmd\n    yarn add @tensorflow/tfjs-backend-cpu @tensorflow/tfjs-converter @tensorflow/tfjs-core # or npm install --save @tensorflow/tfjs-backend-cpu @tensorflow/tfjs-converter @tensorflow/tfjs-core\n\n```\n\nThere si also an example with [ThreeJS and Tensorflow](https://luxdamore.github.io/generative-art/experiments/facemesh-with-machine-learning) based on the plugin.\n\n___\n\n### Extra Resources\n\n#### CanvasSketch\n\n- [Documentation](https://github.com/mattdesl/canvas-sketch/blob/master/docs/README.md);\n- [Api](https://github.com/mattdesl/canvas-sketch/blob/master/docs/api.md);\n- [Examples](https://github.com/mattdesl/canvas-sketch/tree/master/examples).\n\n#### ThreeJS and Shaders\n\n- [The Book of Shaders](https://thebookofshaders.com/);\n- [Three.js Fundamentals](https://thebookofshaders.com/).\n\n#### Videos about creative coding and 3D art\n\n- [Matt DesLauriers](https://github.com/mattdesl).\n- [Yuri Artyukh](https://www.youtube.com/channel/UCDo7RTzizoOdPjY8A-xDR7g);\n- [The Art of Code](https://www.youtube.com/channel/UCcAlTqd9zID6aNX3TzwxJXg);\n- [Tim Rodenbröker](https://www.youtube.com/channel/UCPwg5nDMQWzkAfb56_GvGpA);\n- [SimonDev](https://www.youtube.com/channel/UCEwhtpXrg5MmwlH04ANpL8A);\n- [Interactive Developer](https://www.youtube.com/channel/UCdeWxKJuvtUG2xyN6pOJEvA).\n\n___\n\n## 👩🏻‍💻👨🏻‍💻 Development\n\n1. **Clone** the repository:\n   - `git clone https://github.com/LuXDAmore/generative-art.git`;\n2. **Install** dependencies:\n   - `yarn install` (or `npm install`);\n3. **Start** a development server:\n   - `yarn dev` (or `npm run dev`);\n4. **Test** your code:\n   - `yarn test` (or `npm run test`);\n5. **Extra**, generate the documentation ([*Github Pages*](https://pages.github.com/)):\n   - `yarn generate` (or `npm run generate`);\n   - _the content is automatically generated into the `/docs` folder_.\n\n## 🐞 Issues\n\nPlease make sure to read the [**issue reporting checklist**](./.github/ISSUE_TEMPLATE/bug_report.md) before opening an issue.\n*Issues not conforming to the guidelines may be closed immediately*.\n\n## 📝 Discussions\n\nWe're using [**Github discussions**](https://github.com/LuXDAmore/generative-art/discussions) as a place to connect with other members of our community.\n*You are free to ask questions and share ideas, so enjoy yourself*.\n\n## 👥 Contribution\n\nPlease make sure to read the [**contributing guide**](./.github/ISSUE_TEMPLATE/feature_request.md) before making a pull request.\n\n## 📖 Changelog\n\nDetails changes for each release are documented in the [**release notes**](./CHANGELOG.md).\n\n### 🆓 License\n\n[MIT License](./LICENSE) // Copyright (©) 2019-now [Luca Iaconelli](https://lucaiaconelli.it)\n\n#### 💼 Hire me\n\n[![Contacts](https://img.shields.io/badge/Contact%20Me-Let's%20Talk-informational?style=social\u0026logo=minutemailer)](https://curriculumvitae.lucaiaconelli.it)\n\n#### 💸 Are you feeling generous today?\n\nIf You want to share a beer, we can be really good friends 😄\n\n__[Paypal][paypal-donate-href] // [Patreon][patreon-donate-href] // [Ko-fi][kofi-donate-href]__\n\n\u003e ☀ _It's always a good day to be magnanimous_ - cit.\n\n___\n\n#### 💘 Inspired by\n\n\u003e **All my thanks goes to _Matt DesLauriers_ and _Yuri Artyukh_ for those useful libraries and tutorials**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLuXDAmore%2Fgenerative-art","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLuXDAmore%2Fgenerative-art","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLuXDAmore%2Fgenerative-art/lists"}