web Project2025 April
Strukt
Project Details
Tech Stack
ReactTypeScriptP5.JSViteTailwind CSSShad/cn
My Role
Sole Developer & Designer
Links
Access
Publicly Accessible
Overview
Strukt is a web-based generative art tool that allows users to create complex geometric compositions using the p5.js library. It provides a rich set of controls to manipulate various parameters influencing the generation process, including shapes, colors, composition, and effects.
Users can fine-tune the artwork by adjusting sliders, selecting options, and inputting values. The tool supports multiple color palettes (both default and custom), preset management via local storage, and exporting settings or high-resolution images of the generated artwork.
Key Goals:
- Provide an interactive interface for exploring procedural geometric art.
- Offer deep customization through numerous parameters.
- Enable users to save, load, and manage their configurations (palettes/presets).
- Allow high-quality export of the generated visuals.
Gallery
Website Preview
Strukt user interface showing controls
Palette selection tab in Strukt
Canvas Export Option in Strukt
Key Features
- Procedural geometric artwork generation using p5.js
- Extensive parameter controls (Canvas, Composition, Shapes, Effects, Patches, Grain)
- Seed-based deterministic generation with randomization option
- Interactive canvas with regeneration capabilities
- Multiple predefined color palettes
- Custom color palette creation and saving (Local Storage)
- Preset saving, loading, and deleting (Local Storage)
- Import/Export generator settings as JSON
- High-resolution artwork export (PNG, JPG) with scaling
- Multiple shape types (Rect, Ellipse, Triangle, Line, Arc, Polygon)
- Configurable shape properties (size, stroke, color probability)
- Shape effects: Masking, Gradients, Blend Modes
- Color patch generation with blur, opacity, and blend mode controls
- Adjustable grain texture overlay
- Responsive layout for controls and canvas areas
- Light/Dark mode theming