Generative Art is the idea realized as genetic code of artificial events

Generative Art is the idea realized as genetic code of artificial events

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).

🎉 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.

    // 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

Download Details:

Author: LuXDAmore

Demo: https://luxdamore.github.io/generative-art/

Source Code: https://github.com/LuXDAmore/generative-art

vue vuejs javascript nuxtjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Veluxi Starter - Vue JS Landing Page Template .Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

nuxt-storyblok-boilerplate .Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

Classic Mini Cooper owners built with VueJS and NuxtJS

Classic Mini DIY is the best place to find all the reference material, how to videos, and much much more for your Classic Mini

Boilerplate with Foundations for Sites in NuxtJS

Nuxtation Boilerplate with Foundations for Sites in NuxtJS This repository is one example of how to integrate Foundation for Sites into the progressive Vue.js framework, the Nuxt.js project. A Foundation + NuxtJS project use webpack4 and babel7