🎉 Generative Art || ThreeJs - Nuxt Canvas Sketch

Generative Art is the idea realized as genetic code of artificial events, as construction of dynamic complex systems able to generate endless variations. And to make it easy to do, this is also a nuxt-module (nuxt-canvas-sketch) - (threejs is not included).

💘 Motivation

I'm introducing myself to the generative-art world, so, why not doing this with my favorite libraries and framework?

So, this is also a module for Nuxt, it simply inject the canvas-sketch library (there are more packages you can use installing this, for example canvas-sketch-utils).

After installing this, you have access in Nuxt (client-side) at two things, $canvasSketch (the main module, used internally) and at the method $draw (it start the sketch).

Check the example/ folder and take a look at page-*.vue for some examples. Every page correspond to an example in the main website.

Setup

1. Add @luxdamore/nuxt-canvas-sketch dependency to your project;
2. Add @luxdamore/nuxt-canvas-sketch in the modules section of your nuxt.config.js;

    yarn add @luxdamore/nuxt-canvas-sketch # or npm install --save @luxdamore/nuxt-canvas-sketch

Configuration

N.B. : the config is only shallow merged, not deep merged.

• canvas-sketch documentation;
• canvas-sketch api;
• canvas-sketch examples.

    // nuxt.config.js
    export default {

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

        // Module config
        canvasSketch: {
            hideErrorsInConsole: false,
            hideGenericMessagesInConsole: false, // Disabled in production
        },

    };

Usage

    <template>
        <div class="canvas__container">

            <canvas ref="canvas" />

        </div>
    </template>

    <script>
        export default {
            data: () => (
                {
                    sketchManager: null,
                }
            ),
            async mounted() {

                // Suggested way
                try {

                    this.sketchManager = await this.$sketch(
                        // Settings of the sketch
                        {
                            animate: true,
                            hotkeys: false,  // <-- the only default value passed
                            // <canvas ref="canvas" />
                            // or you can pass a DOMCanvas element document.querySelector( 'canvas' )
                            canvas: this.$refs.canvas,
                        },
                        // Method for the rendering
                        this.sketch,
                    );

                } catch( e ) {

                    console.error(
                        e
                    );

                }

            },
            beforeDestroy() {

                this.sketchManager && this.sketchManager.unload();

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

                    // Here you start coding-art

                    return ({ context }) => {

                        // Here you can return an animation

                    };

                },
            },
        };
    </script>

    <style scoped>
        canvas {

            display: block;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;

        }
    </style>

N.B. : You don't really need the sketchManager, but i think with Vue it's a better way to remove and clean handlers onBeforeDestroy..

ThreeJS

There are lots of examples using threejs, but it's not included, add it with:

    yarn add three # or npm install --save three

Development

1. Clone this repository;
2. Install dependencies using yarn install or npm install;
3. Start development server using yarn dev or npm run dev.

🐞 Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

👥 Contribution

Please make sure to read the Contributing Guide before making a pull request.

📖 Changelog

Details changes for each release are documented in the release notes.

📃 License

MIT License // Copyright (©) 2020-present Luca Iaconelli

💸 Are you feeling generous today? :)

Do you want to share a beer? We can be good friends.. Paypal // Patreon

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

💼 Hire me

💘 Inspired by

All my thanks goes to Matt DesLauriers for these beautiful and easy to use libraries.