🌈🎨 Generative Art || Nuxt Canvas Sketch (three.js, tensorflow.js and gsap)

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].

💘 Motivation

I'm introducing myself into theGenerative art,3D art,Visual designandCreative codingworlds.

So, why i can't do this with my favorite libraries and framework?
Infact, this is also a module forNuxtJS, it inject thecanvas-sketchlibrary withcanvas-sketch-utilsandload-asset(from the creative coderMatt DesLauriers).

After installation, you have access in NuxtJS (on theclient-side) at two things,$canvasSketch(the main module, used internally) and at the method$sketch(it starts the sketch).

Check out thesrc/pagesfolder for some demos.
Every page correspond to an example in themain website.

N.B.: This is awork-in-progress project, I'm learning and testing new things here.

Setup

Install@luxdamore/nuxt-canvas-sketchas a dependency:
- yarn add @luxdamore/nuxt-canvas-sketch;
- or,npm install --save @luxdamore/nuxt-canvas-sketch;
Append@luxdamore/nuxt-canvas-sketchto themodulesarray of yournuxt.config.js.

Configuration


    // nuxt.config.js
    export default {

        // Module injection
        modules: [ '@luxdamore/nuxt-canvas-sketch' ],

        // Module configuration
        canvasSketch: {
            hideErrorsInConsole: false,
            hideGenericMessagesInConsole: false, // `true` in production
        },

    };

Usage

I'm using thesketchManager, because i think withVueJSit's the better way to remove and clean handlers during the destroy phase.


    <template>
        <div class="canvas__container">

            <canvas ref="canvas" />

        </div>
    </template>

    <script>
        // Page, component or layout
        export default {
            data: () => (
                {
                    sketchManager: null,
                }
            ),
            async mounted() {

                try {

                    this.sketchManager = await this.$sketch(
                        // Settings of the sketch
                        {
                            maxPixelRatio: 3,
                            hotkeys: false,
                            // or you can pass a DOMCanvasElement ex.
                            // document.querySelector( 'canvas' )
                            canvas: this.$refs.canvas,
                        },
                        // Method for the rendering
                        this.sketch,
                    );

                    // Ensure every listener is removed on-component-destoy
                    this.$once(
                        'hook:beforeDestroy',
                        () => this.sketchManager.unload()
                    );

                } catch( e ) {

                    console.error(
                        e
                    );

                }

            },
            methods: {
                sketch({ context }) {

                    // Here you start coding-art

                    return ({ context }) => {

                        // Here you can return some animated stuff

                    };

                },
            },
        };
    </script>

    <style scoped>
        canvas {

            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            display: block;
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;

        }
    </style>

Related things

ThreeJS

There are lots of examples based onthreejs, but it's not included, You can install the library with:


    # cmd
    yarn add three # or npm install --save three

There si also aThreeJS starter templatebased on the plugin.

Gsap (GreenSock)

There are some examples based on thegsaplibrary, but it's not included, You can install the library with:


    # cmd
    yarn add gsap # or npm install --save gsap

Check thelayout navigation example.

Tensorflow - Machine Learning and face recognition with Facemesh

TensorFlow.jsandFacemeshare not included, but you can follow the installation processhere:


    # cmd
    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

There si also an example withThreeJS and Tensorflowbased on the plugin.

Extra Resources

CanvasSketch

ThreeJS and Shaders

Videos about creative coding and 3D art

👩🏻‍💻👨🏻‍💻 Development

Clonethe repository:
- git clone https://github.com/LuXDAmore/generative-art.git;
Installdependencies:
- yarn install(ornpm install);
Starta development server:
- yarn dev(ornpm run dev);
Testyour code:
- yarn test(ornpm run test);
Extra, generate the documentation (Github Pages):
- yarn generate(ornpm run generate);
- the content is automatically generated into the/docsfolder.

🐞 Issues

Please make sure to read theissue reporting checklistbefore opening an issue.
Issues not conforming to the guidelines may be closed immediately.

📝 Discussions

We're usingGithub discussionsas a place to connect with other members of our community.
You are free to ask questions and share ideas, so enjoy yourself.

👥 Contribution

Please make sure to read thecontributing guidebefore making a pull request.

📖 Changelog

Details changes for each release are documented in therelease notes.

🆓 License

💼 Hire me

💸 Are you feeling generous today?

If You want to share a beer, we can be really good friends 😄

Paypal//Patreon//Ko-fi

☀It's always a good day to be magnanimous- cit.

💘 Inspired by

All my thanks goes toMatt DesLauriersandYuri Artyukhfor those useful libraries and tutorials.

Single pages

Layouts

Experiments