Skip to content

Generator Interface

The Generator interface was designed, executed and iterated over a 3-4 day trip we took to Kochi, in the South of India, to visit the Kochi Biennale. Since I could not work on physical materials, I utilised the cafe-evenings to work on the interface.

Intent

The interface is meant to generate vector cutting files for creating belts and cummerbunds to size. It takes in various parameters to give the user a downloadable file, in SVG format for now.

Process

The initial sketch for the belt and cummerbund designs was done by handcoding in p5.js. Later I passed my core code to ChatGPT to generate the UI elements - sliders and radio buttons and the rest, as well as finetuning their layouts.

This is a strategy I have used previously for some other tool pages, since I thoroughly enjoy working out the logic and coding it, but find making UI elements tiresome. I'm also not a fan of laying out the HTML and CSS of pages, nor do I have the skill to be fast or efficient at it.

v0.1 — Conceptual UI Prototype
v1.0 — Base sketch coded in p5.js
v3.1 — Page with UI and SVG export

I worked out the necessary formulae by hand, and minimized the number of input parameters as far as possible.

alt text
text text

The interface takes in inputs for various sizing parameters, as well as what the pleats' parameters should be.

Depending on the mode chosen, the user can control the number of pleats, or the distance between pleats. The other parameter is then calculated based on the total height required.

The Results

The UI

text

The complete page with the input panel on the left, the canvas in the centre, and the export button on the lower right.

text
Detailed data panel of inputs and calculated values.

The basics of the interface are :

  • choice of garment : belt, cummerbund or corset
  • inputs of the key measurments
  • export of SVG or DXF
  • visual canvas with drawing

Detail of Input Panel

text

Inputs

Vertical dimensions :

  • height required = height of cummerbund = hc
  • number of pleats = n
  • distance between pleats = pitch size = p
  • depth of pleat = d

Horizontal/Circumferential dimnesions :

  • circumferential length required = l
  • overlap margin for fastening, to add to the circumference = m

Calculations

alt text

Results

After some tweaking and tuning, the UI works well. The SVG downloads are usable downstream in any vector software.

Pattern Generator — Changelog

Changelog detailing the evolution of the tool

v0.1 — Conceptual UI Prototype (Pre-Geometry)

  • Webpage scaffold created directly with ChatGPT, giving only basic geometry logic for the outputs
  • Goal: explore interface structure

UI elements introduced:

  • Garment choice:
    • Belt
    • Cummerbund
    • Corset
  • Sliders for:
    • Circumference
    • Height

Canvas behavior:

  • Simple placeholder shapes
  • Belt → rectangle
  • Cummerbund → rectangle with different proportions
  • Corset → circular form (explicitly non-final)

Compared to later versions:

  • No pleat logic
  • No parameter interdependence
  • No export functionality

Purpose:

  • Validate input vocabulary
  • Validate mental model of garment choice → geometry type
  • Establish page layout and canvas/UI relationship

Served as a UI / interaction sketch, not a pattern generator.

v1.0 — Original Sketch (Baseline)

  • Single p5.js sketch created by me

Hardcoded parameters:

  • hc — finished height
  • p — pleat pitch
  • n — number of pleats
  • d — pleat depth
  • l — circumference-derived length
  • m — overlap margin

Geometry:

  • Rectangle drawn using beginShape() + vertex()
  • Pleat guide lines drawn via line()

Logic:

  • Either p or n manually chosen in code

  • hf (fabric height) computed from pleat logic

  • No UI

  • No export

v2.0 — Parameterisation & UI Introduction

Collaboration with ChatGPT

  • Sliders introduced for:
    • hc, p, n, d, l, m
  • Numeric text inputs paired with sliders
  • Two-way binding:
    • Slider → textbox
    • Textbox → slider
  • Visual preview retained using p5.js canvas
  • Geometry logic preserved from original sketch

v2.5 — Mode Logic & Usability Refinement

  • Radio-button mode selector added:
    • p as primary input → compute integer n → recalc p
    • n as primary input → compute p
  • Both sliders always visible:
    • Inactive parameter greyed out
    • Still moves programmatically to computed value
  • p split conceptually into:
    • User-input p
    • Recalculated p_final (display-only)
  • Read-only chips added for:
    • Final p
    • Actual n used
  • Sidebar layout fixed to prevent textbox overflow
  • No export yet
  • Geometry unchanged

v3.0 — Deterministic SVG Export (Stable)

  • SVG export implemented without p5.svg
  • Manual SVG string construction for reliability
  • Export button added: Export as SVG
  • SVG output verified in browser and vector editors
  • Geometry parity confirmed between:
    • Canvas preview
    • Exported SVG

Marked as final working SVG export version.

v3.1 — Multi-Garment Structure & Code Refactor (Frozen)

  • Garment choice reintroduced:
    • Belt
    • Cummerbund
    • Corset (WIP)
  • Explicit rendering function separation:
    • drawBelt(args)
    • drawCummerbund(args)
    • drawCorset(args)
  • Matching SVG export functions:
    • svgBelt(args)
    • svgCummerbund(args)
    • svgCorset(args)
  • Version frozen at v3.1

Project Status

  • ✅ Geometry logic stable
  • ✅ UI stable
  • ✅ SVG export stable
  • ❄️ v3.1 frozen

Future work (not included):

  • DXF export
  • Seam allowances
  • Annotations / grainlines
  • Corset geometry development