Handwoven samples record crossing, density, float and tension.
Fang Ziqi / 方梓萁Computational Arts Portfolio · 2026
From thread
to executable rule.
I translate textile structure, tension and rhythm into computational systems that can be seen, heard and changed.
Enter the primary project ↓
Position / 立场
Fiber is not a passive surface waiting for technology. A thread already carries state; a crossing already makes a decision; tension already stores force.
These projects begin with textile intelligence and extend it through rule-based geometry, sound analysis and interactive graphs. The computation stays accountable to the physical work.
01
Primary project · handwoven archive + live rule instrument
Woven Logic经纬逻辑
A woven surface is a decision system before it becomes an image.
- Version
- Portfolio prototype v1 · 2026
- System
- Three.js / WebGL · procedural crossing matrix
- Physical source
- 2024 handwoven coursework archive
- Authorship
- Fang Ziqi · textile work, concept, rule definition, visual direction
Woven Logic reconstructs structures learned at the loom as executable decisions. Three standard crossings establish a grammar; rupture, derived from Fang's red relief, interrupts a long float with local density breaks.
Each over-under decision becomes a repeatable matrix.
Plain, twill, float and rupture define four behaviours.
The rules run as live geometry instead of a fixed illustration.
Rule tracebase = (column + floor(row / 3)) mod 8 < 6 · selected cells invert · every sixth row introduces a shortened run
Live WebGL clothFang's interrupted density rule
Move pointer to tilt the fieldDrag to tilt the fieldTension 62%
01 / Select crossing logic
Four ways to route one thread.
02 / Change structural force
Simulation parameter — not measured physical tension. It maps to vertical deviation: 20% ≈ 0.48 / 92% ≈ 0.14.
A repeat can remain legible while its thickness changes.
Colour order turns a structural repeat into visual timing.
Loose fibres make deviation part of the material rule.
Reflection
The project does not use code to decorate cloth. It asks what changes when a textile rule can be executed, compared and adjusted while it is still visible as structure.
02
Sound study · recorded loom rhythm + dual-track score
Temporal Loom时间织机
Weaving time is produced by a machine and negotiated by a body.
- Version
- Portfolio prototype v1 · 2026
- System
- Web Audio Analyser · Canvas dual-track score
- Audio source
- 36-second loom recording · coursework archive · recorder/date unrecorded
- Authorship
- Fang Ziqi · loom process, listening analysis, event annotation, visual direction
The recording is not presented as an abstract waveform. It is split into two forces: the loom's returning beat and the maker's micro-pauses. Their difference gives the score its form.
Auditable audio translation
- 01 / Record36-second loom-rhythm source
- 02 / AnalyseFFT 1024 · amplitude + two frequency bands
- 03 / SeparateMachine: 80–850 Hz · Body: 1.2–7 kHz
- 04 / DrawBand energy displaces two live score lines
Live audio analysisDormant
- Machine track
- Recorded amplitude + live 80–850 Hz energy
- Body track
- Inverse amplitude + live 1.2–7 kHz friction
- Four events
- Selected by ear, then anchored to the recorded waveform
- Drawing rule
- Machine = amplitude × 42 + low band × 24; Body = inverse amplitude × 42 + high band × 18
“A pause is not empty. It is where the hand corrects the machine.”
Reflection
The score makes authorship audible as negotiation: regular movement belongs to the apparatus, while delay, correction and emphasis reveal the body inside the system.
03
Interactive prototype · tufted relief + image-traced graph
Propagation Study蔓延研究
What if the routes already visible in a textile could carry a changing signal?
- Version
- Portfolio prototype v1 · 2026
- System
- Canvas · normalized image topology · breadth-first search
- Physical source
- 2024 hand-tufted relief photograph
- Authorship
- Fang Ziqi · textile work, concept, route criteria, visual direction
The tufted work already behaves like a map: stems connect dense fibre clusters, and each junction suggests a route. The prototype traces that visual topology, then lets a viewer move through four readable states.
Original → Trace → Graph → Propagate
Auditable topology translation
- 01 / CoordinateNodes use normalized positions on the source photograph
- 02 / NodeA dense fibre cluster or visible junction
- 03 / EdgeA continuous stem or ridge joins adjacent nodes
- 04 / RouteBreadth-first search finds the shortest path to node 09
Image-traced topologypropagate
Choose any visible nodeRoute 03 → 09
Propagation strength
Animation parameter — changes pulse delay, speed and display intensity. The traced graph and shortest route remain fixed.
Choose input node
- Input node
- 03
- Route
- 03 → 07 → 09
- Visible traces
- 12
- Connection rule
- Visual adjacency + visible stem path
- Path search
- Breadth-first shortest route → node 09
Fibre cluster Active route Stem structure
The route follows the photographed stems and ridges. Select any node to redirect the active path toward the lower root.
A branching silhouette establishes possible routes.
Density is accumulated from the back of the surface.
Cutting exposes ridges, borders and local nodes.
Reflection
This is a visual propagation study: no sensor hardware is implied. Its value is the translation from a specific handmade topology to a navigable digital behaviour.
A
Supporting appendix · material observation, not a fourth computational project
Material Research Notes材料研究札记
A material effect becomes useful when it can be observed precisely.
M
Conditions for disappearance.
The garment does not hide or reveal the body as a single effect. Overlap darkens it, gathering stores pressure, and a dispersed black print unsettles its boundary.
Auditable material translation / supporting appendix
- 01 / ObserveOverlap, gathering and dispersed print are documented in the garment photographs
- 02 / CompareLayer count, compressed intervals and edge density become three visible variables
- 03 / AbstractOpacity, stored pressure and boundary instability form a material vocabulary
- 04 / OutputA comparative image study; no sensor input or real-time computation is claimed
M1Opacity accumulates
One layer remains atmospheric. Repeated overlap begins to obscure the body and turns quantity into visual density.
M2Compression leaves a memory
Gathered channels keep pressure visible after the hand releases them; the fold becomes a record of force.
M3The edge disperses
Irregular black marks move between a defined contour and a dispersed field, making the garment boundary unstable.
Source index / 作品索引
Physical works behind the systems.
A compact index of the textile records used across this portfolio.
Used in Woven LogicBrown loom study
2024 · hand weaving · coursework · individual work
Used in Woven LogicRed relief sampler
2024 · hand weaving · coursework · individual work
Used in Woven LogicPlaid sequence study
2024 · hand weaving · coursework · individual work
Used in PropagationBranching tufted relief
2024 · hand tufting · coursework · individual work
Used in AppendixTranslucent garment
2024 · garment construction · coursework · individual work
Used in AppendixDispersed boundary
2024 · textile surface study · coursework · individual work
About / 关于
Fang Ziqi方梓萁
Fang Ziqi is an undergraduate student in Fiber Art Design, enrolled in September 2023. Her practice moves between weaving, tufting, garment construction, creative coding and computational image systems.
This portfolio brings three years of coursework into one position: textile structure is not only a visual language, but a way to think about rules, time, force and interaction.
- Practice
- Weaving · tufting · garment · material research
- Computation
- Creative coding · Three.js/WebGL · audio analysis · canvas
- Portfolio focus
- Computational Arts / MFA application