README.md

Canvas Text Morphing

A creative coding experiment exploring interactive text rendering using p5.js and canvas-sketch.

Features

• Interactive text rendering using concentric circle segments.
• Real-time parameter adjustment via UI controls.
• Dynamic center positioning through canvas clicks and/or mouse hover.
• Built with Webpack and SCSS.

Tech Stack

• p5.js - Creative coding library.
• canvas-sketch - Framework for making generative art.
• Webpack - Module bundling.
• Sass - Styling.

Visuals

Cursor Interaction

Interaction example.

Controls Panel

Control panel for real-time parameter tweaking.

Installation

npm install

Usage

Development

Start the development server with hot-reloading:

npm run serve

Production

Build the project for production:

npm run build

Key Controls

• Background/Stroke Color: Adjust visual palette.
• Circle Width/Gap: Modify thickness and spacing of concentric rings.
• Segment Length/Gap: Control the granularity of the text representation.
• Click Interaction: Relocate the origin point of the circular pattern.