VueXYZ

VueXYZ is a collection of Vue 3 composables for creative coding.

VueXYZ is a collection of Vue composables for creative coding. Unlike other creative coding libraries that simplify rendering to a canvas, VueXYZ doesn't render anything for you. Instead, the composables return reactive data that you can use as you see fit.

You may decide to take the data and render it to canvas or SVG, or you might use it to drive animations, or anything else. You could chain multiple composables together to create complex shapes or compounded effects. The choice is yours.

Documentation: https://vuexyz.org

🚀 Features

• 💎 Composables for 2D primitives like circles, triangles, pentagons, etc.
• ✨ Additional non-polygonal primitives like arcs, bézier curves, etc.
• 📐 Composables return reactive data for vertices, edges, faces, etc.
• 🖍 Helpers for rendering primitives to SVG, canvas and Three/Tres
• 🎛️ Utility methods for performing calculations on primitive data.
• 🔥 Built for the Vue 3 Composition API.
• ⚡ Fully tree shakeable: Only use the composables you care about.
• 📒 Type strong with TypeScript.
• 🎨 Detailed documentation & interactive demos for all primitives.

Example Usage

const { vertices, edges, faces } = useTriangle({ sideLength: 100})

// vertices: [ { x, y, z }, { x, y, z }, { x, y, z } ... ]

📦 Install

Install VueXYZ with just a single line in your project:

npm install vuexyz

Links

• Getting Started
• Interactive Demos
• Chat on Discord

📄 License

Copyright (c) 2024 Simon Le Marchant (Marchant Web, LLC.)

VueXYZ is licensed under the MIT License. Licensed works, modifications, and larger works may be distributed under different terms and without source code.