🎉 Generative art with 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. This is also a nuxt-module to make it easy to do.

💘 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

    export default {
        data: () => (
            {
                sketchManager: null,
            }
        ),
        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

                };

            },
        },
    };

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

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 (©) 2019-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.

✔ TODO

Just asking myself if i should do more.

• Add tests;
• Check compatibility with P5 (actually not working);
• More config options?