npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

Iโ€™ve always been into building performant and accessible sites, but lately Iโ€™ve been taking it extremely seriously. So much so that Iโ€™ve been building a tool to help me optimize and monitor the sites that I build to make sure that Iโ€™m making an attempt to offer the best experience to those who visit them. If youโ€™re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, ๐Ÿ‘‹, Iโ€™m Ryan Hefnerย  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If youโ€™re interested in other things Iโ€™m working on, follow me on Twitter or check out the open source projects Iโ€™ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soonโ€“ish.

Open Software & Tools

This site wouldnโ€™t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you ๐Ÿ™

ยฉ 2024 โ€“ย Pkg Stats / Ryan Hefner

@luxdamore/nuxt-canvas-sketch

v1.8.7

Published

๐ŸŒˆ๐ŸŽจ 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 a

Downloads

28

Readme

๐ŸŒˆ๐ŸŽจ 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.