When creating a new textile we always begin with a high resolution photograph of the kind of fabric we are intending to emulate.&#x20;

### Single Colour Textiles

For our first textile in our work, Sigil Magic, we began with a photograph of a simple cotton sheet. We analysed the light and shadow in this at high magnification and created a repeating pattern of simple shapes. We filled these with highlight or shadow colours at randomised alpha. In these first examples we used lighter and darker shades of our background colour. Later we tend to use translucent black and white although this doesn't give quite as much depth.

![Cotton textile at 7x magnification](ipfs://QmXM7PNwShTiDr2dfvXyfUF5EACkpAJnrCx1yUaugGYXgA)

![Cotton textile at 1x magnification](ipfs://QmQRHJfoZUPbyhACZWMyJ7VC64M7eqnJXwvsiWANLFzGPj)

And that is the process that we used to create many different generative textiles. We always began with a photograph of a physical fabric. We used muslin, linen, canvas, upholstery fabric, denim and others.&#x20;

![Fabric Wallpaper fabric at large and small scale](ipfs://QmU3epivRK6BgcsUV7Ud2cvSC7qbHuHSQ2U4CCUf521mrj)

![Brushed Cotton fabric at large and small scale](ipfs://QmShGnRgPM7wxBW2uHNrcxz1K231ivNCqvphodtXDk9eVw)

![Upholstery fabric at large and small scale](ipfs://QmfUfA1kGQX9QXgYaLLS9TU9rTG2PhSYpvbNgaYPGGZuox)

![Linen fabric at large and small scale](ipfs://QmPEkCg4bVWzLR4U2bUqh8AmhQ4eaV5rPYTmUkrrtjAS2p)

![Denim1 fabric at large and small scale](ipfs://QmcNXkQ4CJJ7m4sWqZckXYvp6J4QfqmT3CG45XFhcgACMF)

![Denim2 fabric at large and small scale](ipfs://QmQgWhoDhn5ZZtWAfqCdT8prNjDCYn4Zh11BUjzStL9ohv)

### Printed Textiles

For our project, Patched, we wanted to create printed patterns on the textiles. We wrote some code to draw thick, slightly rough lines and arcs to make the patterns with. We found that if we drew another more translucent textile layer on top of the 'printed' marks it made them look like they were part of the fabric.&#x20;

![Large and small scale clover pattern on fabric](ipfs://QmQwo2k38GidErSTAYhHnYo168Z3K1GshR8D7rrihZdhGF)

![Large and small scale flower pattern on fabric](ipfs://QmaZ7UqKq8Pmsx6vR1P6vu1Vsp6oWPy2hFsAva1ZUMMGXn)

![Large and small scale circular pattern on fabric](ipfs://QmYcKk7PGtTib7tgikaqxi6GyRoTMA9WXGb8B8qK8rwnNK)

### Woven Fabrics

We were also interested in creating patterns with woven fabrics. These offer many more opportunities for playing with colour combinations and allowing for generative surprises.

To do this we created arrays of named colours in different or random orders. Then as the code drew each line of its repeating pattern it would use the colours from those arrays in order.

![Large and small scale woven fabric](ipfs://QmYVEPwiGbh1anwBjygwzCf4FUTBnbWL1pS2tL4ijkv8Fi)

![Large and small scale woven fabric](ipfs://QmW37ZBSkW2iK9bGazpeAaudiNdSYyexCBVPK6WFZtzf9G)

![Large and small scale woven fabric](ipfs://QmNQcDKGuS3WFMPA15qEEA9vfQSiJ7H6bExhF1MLtHtWrG)

![Large and small scale woven fabric](ipfs://QmUnCd5AWyW66Gj5XeQHxJsHaz9BmyFU1kwCoxd6NG6XuQ)

Because we were now drawing individual threads within the fabric we drew lines across each thread to suggest how it is twined together. While these details are not obviously visible in the fabric rendered at normal sizes they make a surprising difference to how natural the fabric looks. Without them it tends to look much more stiff and synthetic.

### Tartan

Possibly our favourite of all the fabrics, tartan was a natural development from woven fabrics. Once we had the code in place for weaving we adjusted everything to produce these very realistic fabrics. We particularly love it when they come out with a distinct softness about them. They work particularly well in the colours of Scottish gorse and heather.&#x20;

![Tartan in soft heather colours](ipfs://Qmbq1RbGBoCRCNoMJB6yiKLyZGURCiQWzPkTXP5bo6w4n3)

![Tartan in dark warm sunset colours](ipfs://QmXWmuA54KspzkFNDMis52if3WoJ3Taa5JK2vhhciBsbnV)

![Tartan in natural earth colours](ipfs://QmNb38shzTttpTKgrLefdiqxtmtFprcDGSTnDFvF6s2H5V)

![Tartan in deep grey blues and pinks](ipfs://QmddNtNnSPe7yT2sJmVv8v2vfxCEw2L8DFisJ4scuUuHJ2)

### Embroidery

To join the fabrics together we needed stitches. We created very simple embroidery stitches using round ended strokes of decreasing line width and increasing lightness. We placed these on small shadowy ellipses to give the illusion of them entering the fabric. We coded these to be drawn in straight lines or arcs.

![Mixed fabrics with embroidery](ipfs://QmfCLXzQy741EkA5GFLpDCPetQwfKs1Pq2Asi9fJmmU6tn)

![Mixed fabrics with embroidery](ipfs://QmeS62At6q3E9fVTV3tdZTZziVmy2g8TpAN2H1do8iUZS6)

Then in our pieces Boro and Sashiko we extended the use of stitching to make embroidery patterns covering the surface of plain or woven fabrics.

![Boro](ipfs://QmeoYAzRmzZSyjsxBjFuucpSEYvyYCu3oWjmGkECvvk2qZ)

![Sashiko](ipfs://QmaPDSj814VdgAk8NEs8dNgpi1hrFSm8cMQveUBsPeFbFc)

### Paint on Canvas

Our next project involving fabric texture was Zen Strokes. In this work we wanted to create the look of thick paint on canvas. We made a new canvas texture for this work. On the background we 'painted' many thin, rough strokes of colour onto the canvas and went over them again, randomly erasing - emulating the way that the paint ebbs and flows as it comes down the bristles. We then put the canvas layer on top of what remained of these strokes, finishing with a top layer of thick paint strokes in the centre of the paint mark.&#x20;

![Zen paint magnified](ipfs://Qma6J2JnHmNhmSC2hXf1irhrbswqHxDLAq4kVkQXartpiz)

![Zen paint magnified](ipfs://QmbRr4DX1Xk94JXBzjD9VH5C6aNrBPdYgVgiaEBroJAVFc)

![Zen Strokes](ipfs://QmRfsWY7N1d7TZS3acSQ1Sov9ZNNkuQTczF6pyaXHNpz2C)

### Peruvian Cloth

This fabric project involved weaving deliberate patterns into cloth. We studied traditional Peruvian weaving patterns and decided to create a fabric texture with the appearance of being made from thick vertical threads. We could then colour these threads just as in previous weaving patterns but this time with more control to create designs within the cloth.&#x20;

To understand the construction here is the basic weave shown with and without the weave layer.&#x20;

![Peruvian cloth without weave layer](ipfs://QmXYta67cbf6wcN59mLLDPsXfYLq2Jt2xkrjcFYYpyvR82)

![Peruvian cloth with weave layer](ipfs://QmbK3tMTLgaqnHnSnP8hXGP5Vs9JDEswbrxXUSMR62tPKm)

We then created different designs in the weaving. This was not entirely satisfactory as we would have liked to have more randomness in the creation of the designs. We were, however, very pleased with how well the finished tokens match modern Peruvian Cloth.&#x20;

![Peruvian Cloth magnified](ipfs://QmPTeLU7oufMx8L8nc15PR8Mtn3jsNMD3qfhBu4Rivx54r)

Thank you so much for reading. If you would like to know more about anything described here please do not hesitate to contact us on Twitter @Kusamehewa1 or on Discord Kusamehewa #5288

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::7688" data_spec="FX-GEN-DATA-002"}

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::13092" data_spec="FX-GEN-DATA-002"}

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::17734" data_spec="FX-GEN-DATA-002"}

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::18117" data_spec="FX-GEN-DATA-002"}

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::19206" data_spec="FX-GEN-DATA-002"}

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::19664" data_spec="FX-GEN-DATA-002"}

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::20296" data_spec="FX-GEN-DATA-002"}


Over the past year we have created several pieces based on realistic looking textiles. We love to see generative art which calls us to imagine what it would feel like to be able to touch its surface. In this article we explain in some detail how we have achieved near photo-realistic textiles with p5.js.

The patterns exist, inherent in the nature of this mathematical universe. Like a sculptor releasing a figure already contained within a block of wood, I release the patterns already contained in relationships between numbers and space. 

Generating Realistic Textiles

Written by

Editions

Share

Details

stay ahead with our newsletter