Drapes and Weights of fabrics
How do you represent tactility visually?
This Form Generator is an attempt to translate the feel and physical behavior of various textiles to an
abstract visual representation that can be explored and customized.
Click at different places on the sketch to discover different fabrics' drapes and sheernesses.
Press any key to save the form.
Description
This Form generator lets one explore and imagine how a fabric might physically behave based on its composition (yarn blend) and
construction (density/compactness).
Here is what one can one understand about a fabric’s drape and weight in layman’s language.
Weight: When a fabric is less dense, more open, and/or woven with finer yarns, it is consequentially lighter in weight and appears sheer or translucent.
Likewise, when a fabric is more tightly woven and/or woven with coarser yarns, it drifts towards having more weight and less sheerness.
Drape: A drape of a fabric is its physical behavior when it hangs loosely. If it hangs or falls fluidly it is said to have more drape,
if not, it can be said to have less drape (is more stiff). This depends on a combination of various factors. The construction of a fabric surely plays a role,
however, the composition (yarn/fiber blend) is also what matters. In layman’s language, softer and/or finer yarns usually create more drape.
This form generator is essentially a graph of a Stiffness/Drapiness and Sheerness/Opaqueness. As you go clicking with mouse from left to right,
the abstract fabric form in the center appears to change from having a stiff silhouette, to a more drapery flow. And as you go from bottom to
top, the fabric form appears to get sheerer.
Design Process, Reflections and Observations
Inspiration:
As textile designers, especially in the time of Covid-19 pandemic, we are always looking for ways and mediums to best represent a textile virtually.
The main essence of textiles is how they feel and behave physically. Having primarily a flat appearance, but still having the ability to
transform physically into three-dimensional forms is what makes them such diverse tools for design development. What better object to explore
for form generation than these diverse materials!
This form generator, hence, explores the fluidity of different fabrics in the most basic representation through P5.js.
Design Process:
While trying to translate a design into textile, the idea mainly revolved around the basic- weaving, and interlacement of yarns.
However, as intriguing and technically sound as it might seem, it had little to do with form generation (at least by using just a beginner
level knowledge of javascript). This enabled me to look at textiles from a different perspective, seeing a fabric as a whole and its
interactions with free space. The physical characteristics one can visually observe at a first glance while looking at a fabric are
its colors/designs and the way it is placed or hung. This, thus, was the thought process behind the concept of studying a fabric’s
drape and weight (which essentially creates the way a fabric behaves freely).
Once the concept of a fabric’s form being the generated form was established, the next step was to determine the
parameters on which the form will be generated. Since Drape doesn’t only depend on the fabric type, but also on weight,
an additional scale of weight or openness of the fabric was established, which would express sheerness of the fabric in the form of transparency.
In textiles, the Drapiness depends on a value called a Drape Coefficient, and its value is inversely proportional to
the drapiness of the fabric. This Drape Coefficient, hence, was considered as a scale for form manipulation. However,
it varies depending on a lot of physical fabric parameters such as yarn count and construction, even in the same type of fabric.
This was starting to turn into quite technical and hence unnecessary, considering the main aim of the assignment.
Thus, stepping out of the mind of a Textile Designer, the criteria were settled to be just different fabric types that everyone can relate with.
However, the technique of measuring a fabric’s drape became the base for the fabric’s form in the sketch.
Logically, the form in the P5.js sketch can be seen as a tablecloth over a round table, when observed from a top view! However, the sketch serves purpose of both-a representational form of a fabric, as well as has an abstract touch to it. The circle under the fabric is used to act as reference to observe sheerness. It also aids in imagining the edges as Ruffles of a fabric. An attempt was made to add shadows to the fabric, however, considering the nature of the mousePressed(), and random() functions, It became complicated to give each generated form shadows.
The form generation is established by relating the Mouse’s position on the background grid (i.e. whether it is towards drapey or stiff on the X-axis).
The outer vertices are fixed and act as control points, and the inner vertices are manipulated based on the grid.
This is to give the form, ruffle-like look of a fabric.
Similar manipulations are done on the Y-axis for sheerness and opaqueness.
A combination of both the axis is significant, since fabrics often overlap these qualities and cannot be constrained by one or the other.
Some commonly known fabric names are used as Parameters, and mentioned along with the form so that it is easy for a layman to explore and compare them.
curveTightness() played a vital role here. In order to make the form appear as more like a fabric and less like a liquid.
(Notice the edges, specially in the denim's form)
Even the Mouse pointer mirrors the essence of the Drape/Weight grid, going from being circle to square, and transparent to opaque, along with the grid!
However, one of the important visual aspects of textiles is dyeing. But How to relate colors with this fabric form,
when shades of textiles aren’t really dependent on any calculations or parameters? Any fabric can be practically dyed in any shade!
Thus, here was implemented, the concept of True Randomness. It is also a symbolic means to view different fabrics with different sheerness in different shades.
Random() is applied in order to make no two fabric forms look similar, even if the weight and drape are same, because even
the different pieces of same fabric will never fall in the same manner, will they? Pseudo-Randomness is applied here, which
depends on the drape and weight of the fabric, but is controlled in order to retain the look of the fabric.
Both, Pseudo-Randomness and True-Randomness are at play to generate and discover various fabric forms!