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) - [threejs and tensorflow are not included
Last updated a month ago by luxdamore .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @luxdamore/nuxt-canvas-sketch 
SYNC missed versions from official npm registry.

???? Generative Art || ThreeJs - Nuxt Canvas Sketch

npm version npm downloads Circle CI Dependencies Donate Code Quality

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) - [threejs and tensorflow 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 example/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.


  1. Add @luxdamore/nuxt-canvas-sketch dependency to your project;
  2. Inject @luxdamore/nuxt-canvas-sketch as a modules in your nuxt.config.js.

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

    // nuxt.config.js
    export default {

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

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



N.B. : I'm using the sketchManager, because i think with VueJS it's the better way to remove and clean handlers during the destroy phase.

        <div class="canvas__container">

            <canvas ref="canvas" />


        // 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 DOMElement document.querySelector( 'canvas' )
                            canvas: this.$refs.canvas,
                        // Method for the rendering

                    // Ensure every listener is removed on-component-destoy
                        () => this.sketchManager.unload()

                } catch( e ) {



            methods: {
                sketch({ context }) {

                    // Here you start coding-art

                    return ({ context }) => {

                        // Here you can return some animated stuff



    <style scoped>
        canvas {

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


Related things


There are lots of examples using threejs, but it's not included, You can follow the examples and add it with:

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

There si also a ThreeJS starter template for the plugin.

Tensorflow - Machine Learning and face recognition with Facemesh

Facemesh by Tensorflow is not included, but you can follow the installation process here.

There si also an example with ThreeJS and Tensorflow for the plugin.

Extra Resources


ThreeJS and Shaders

Videos about creative coding and 3D art


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

To access camera and/or microphone from localhost, you need to enable Unsecure Origins in Chrome.

???? 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 file.

???? License

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

???? Are you feeling generous today? :)

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

Paypal // Patreon


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

???? Hire me

Hire me

???? Inspired by

All my thanks goes to Matt DesLauriers and Yuri Artyukh for those useful libraries and tutorials.

Current Tags

  • 1.8.1                                ...           latest (a month ago)

10 Versions

  • 1.8.1                                ...           a month ago
  • 1.7.0                                ...           3 months ago
  • 1.5.4                                ...           7 months ago
  • 1.5.2                                ...           7 months ago
  • 1.5.1                                ...           9 months ago
  • 1.4.1                                ...           9 months ago
  • 1.3.1                                ...           10 months ago
  • 1.2.2                                ...           10 months ago
  • 1.2.0                                ...           10 months ago
  • 1.1.0                                ...           10 months ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 16
Dependencies (6)
Dev Dependencies (59)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |