Have ideas to improve npm?Join in the discussion! Β»

    @luxdamore/nuxt-canvas-sketch

    1.8.7Β β€’Β PublicΒ β€’Β Published

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

    Code Quality Downloads Dependencies Circle CI Version Donate

    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 the Generative art, 3D art, Visual design and Creative coding worlds.

    So, why i can't do this with my favorite libraries and framework? Infact, this is also a module for NuxtJS, it inject the canvas-sketch library with canvas-sketch-utils and load-asset (from the creative coder Matt DesLauriers).

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

    Check out the src/pages folder for some demos. Every page correspond to an example in the main website.

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


    Setup

    1. Install @luxdamore/nuxt-canvas-sketch as a dependency:
      • yarn add @luxdamore/nuxt-canvas-sketch;
      • or, npm install --save @luxdamore/nuxt-canvas-sketch;
    2. Append @luxdamore/nuxt-canvas-sketch to the modules array of your nuxt.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 the sketchManager, because i think with VueJS it'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 on threejs, but it's not included, You can install the library with:

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

    There si also a ThreeJS starter template based on the plugin.

    Gsap (GreenSock)

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

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

    Check the layout navigation example.

    Tensorflow - Machine Learning and face recognition with Facemesh

    TensorFlow.js and Facemesh are not included, but you can follow the installation process here:

        # 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 with ThreeJS and Tensorflow based on the plugin.


    Extra Resources

    CanvasSketch

    ThreeJS and Shaders

    Videos about creative coding and 3D art


    πŸ‘©πŸ»β€πŸ’»πŸ‘¨πŸ»β€πŸ’» Development

    1. Clone the repository:
      • git clone https://github.com/LuXDAmore/generative-art.git;
    2. Install dependencies:
      • yarn install (or npm install);
    3. Start a development server:
      • yarn dev (or npm run dev);
    4. Test your code:
      • yarn test (or npm run test);
    5. Extra, generate the documentation (Github Pages):
      • yarn generate (or npm run generate);
      • the content is automatically generated into the /docs folder.

    🐞 Issues

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

    πŸ“ Discussions

    We're using Github discussions as 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 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-now Luca Iaconelli

    πŸ’Ό Hire me

    Contacts

    πŸ’Έ 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 to Matt DesLauriers and Yuri Artyukh for those useful libraries and tutorials.

    Install

    npm i @luxdamore/nuxt-canvas-sketch

    DownloadsWeekly Downloads

    0

    Version

    1.8.7

    License

    MIT

    Unpacked Size

    30.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar