Skip to content

Generator Interface

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

alt text
alt text
alt text

The UI

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

Inputs :

  • height required = height of cummerbund = hc
  • number of pleats = n
  • distance petween pleats = pitch size = p

  • depth of pleat = d

  • length required = l

  • overlap margin for fastening = m

alt text

Pattern Generator — Changelog

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