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).
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.
@luxdamore/nuxt-canvas-sketch
dependency to your project;@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
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
},
};
<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…
There are lots of examples using threejs
, but it’s not included, add it with:
yarn add three # or npm install --save three
yarn install
or npm install
;yarn dev
or npm run dev
.Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Please make sure to read the Contributing Guide before making a pull request.
Details changes for each release are documented in the release notes.
MIT License // Copyright (©) 2020-present Luca Iaconelli
Do you want to share a beer? We can be good friends… Paypal // Patreon
It’s always a good day to be magnanimous - cit
Author: LuXDAmore
Demo: https://luxdamore.github.io/generative-art/
Source Code: https://github.com/LuXDAmore/generative-art
#vue #vuejs #javascript #nuxtjs