“The carpet, like music, has its own language.”
An Ode to the
Moldovan Tapestry
a digital representation of a traditional carpet teaching you about it
Concept: Pay homage to my Moldovan heritage by recreating in code p5.js one of the tapestries (and sun symbols) represented in our carpets designed by Moldovan artisan Ecaterina Popescu, director of the crafts complex “Arta Rustica.”
In the first video there are small descriptions of the meaning of color, shapes, or symbols. In the second, every time the sketch runs, the combination of colors is slightly randomized. The next images are snapshots of the source image, resources used, code, sketches, and initial results to show what goes into the process of ideation, iteration, and creation.
To interact with the code in real time, press here.
Bull’s Eye | The Sun
Symbols
// Circle - symbol of the spiritual world, of time, and the cosmic sky in relationship to the earth.
// Point - the center, the origin, the creative power, the beginning and end.
// The Sun - the sign of life and eternal movement. It brings blessing, warmth and light in the family.
// Square - symbol of the Earth and matter. 4 corners point to cardinal directions, the seasons, the four elements.",
Colors
Beige/Whites- symbol of innocence, of the wedding dress, the white swan as the messenger of the soul.",
Browns- represent the elements of the earth, the sign of connection and faith; Source- walnut shells and onion skins.",
Greens- symbol of life and hope; Source- walnut shells.",
Black- represent guilt and evil; Source- ripe fruits of Sambucus Nigra.",
Red- love; Source- Beta Vulgaris (beet) root, Malus sylvesris and wild berries."
The Interaction
Hover over the different areas of the design and the information will change depending on the area the mouse is over. It is meant to be an educational piece as well as interactive.
Each time the sketch is run, the design of the colors is randomized anew.
Play the sketch here.
Inspiration
1.Artist: Aike at aike.praxis (IG)
I met Aike during a talk at school where she was speaking about the importance of research and how she came up with this idea that the symbols we use in clothing for example, at least in her own culture, acted as a language in an of itself, she approached this body of work as such. Aike is a former ITP-er and she’s working on replicating the symbols in her original language to create a form of tapestry. She’s also working on replicating geometry of the symbols used in their cultural costumes. I remember it impressed me and I wanted to do something similar for my own culture, and more specifically the symbols used in our Moldovan tapestry.
Images from my photographic project on Moldova, including portraits of Moldovan and Gagauz people wearing their traditional outfits.
2. Ecaterina Popescu, artisan and founder ‘Arta Rustica’ Complex - Traditional Textile and Carpet Craftsmanship Workshop, Republic of Moldova
As part of my Moldovan heritage and my art practice as a storyteller, I’ve been exposed to the beauty of my own tradition, its symbolism and motifs embedded in our tapestries, textiles, woodwork, pottery, even in household artifacts and objects of daily use. For my documentary project “Moldova - An Iconography of the Land and its People” I’ve documented many such instances and met incredible artisans and peasants alike representing Moldovans but also minority groups within Moldova such as the Gagauz people (Turks by origin but of Christian faith) who so artfully weave their specific traditions and their own cultural identity into the fabric of their daily lives.
Ecaterina Popescu is one of the artists and ambassadors of Moldovan tapestries both at home and internationally and runs a workshop complex dedicated to the revival and reclaiming of our old traditions encoded in our tapestries through symbolism and cultural motifs as well as elevating daily use objects such as carpets, clothing, wearable items to the level of national patrimony and art form.
DESIGN PROCESS
“The
Tree Of Life
in Moldovan Culture”
My initial idea for the project was to design the tapestry representing the tree of life, a motif that exists in many cultures across the world. This design was particularly challenging to code because it required many calculations of shapes, colors, and interactions - all of these working against time.
Ideas for a project title?
“The Tree Of Life in Moldovan Culture”
Project description
The project will explore the symbolism and motifs of Moldovan culture, tradition, and ritual expressed through creative code. The goal is to create engaging and moving visuals based in research (perhaps even involving sound) using technology in an otherwise traditional medium of expression (textiles, carpets, traditional clothing, etc.). The project aims to execute one such visual with the intention to replicate it into a series of such renderings later.
What is the user experience?
It will offer people a different medium of experiencing aspects of a culture in a creative, immersive and interactive way. The ultimate goal is to project these renderings on screens and/or installations in a museum setting or outdoor designated spaces. The idea is to create environments conducive to learning, community engagement, and socio-cultural dialogue [to preserve and propagate a tradition undermined by socio-economic factors, modernization and globalization].
What is the creative aesthetic/angle/approach?
Using code, most likely p5, the goal is to create geometrical shapes that make the symbol of the tree of life and some adjiacent elements to it. The other creative aspect is to make it animated and possibly combine it with sound. Lastly, if at all possible, figure out a way to make it interactive.
What technologies are required? Why?
I believe p5.js is the most suitable software for this purpose because it works well in designing geometrical shapes, work with sound, animate it and make it interactive. I will also work with VS Code and the Command Line to load it to a Git Repository to practice what we’ve learned but also to have it accessible on the web.
What do you need to learn/research/decide?
Symbol: break it down in smaller elements and figure out how to re-create it in p5.
Programming: research how to code each element from geom. shapes, to animation, to sound.
Interaction: if there is a way to use a web cam or serial communication with an arduino to add this aspect to the user experience.
-From Elyana: From Img through Perlin Noise a pattern emerges (loupe to see closer) and on top appears the shape… or colors change at each click and what colors mean… or shapes change as you move mouse on the image of the carpet… etc.
Education: Share knowledge on the symbols and colors and ehimological roots to the audience (Elif)
What assets/content/code already exists? (your own sketches or other people's sketches)
See below for inspiration material.
The sound probably will be a traditional song or sound.
What assets/content/code needs to be created?
Everything else.
What resources/books/sites/examples will you rely on?
Arta Rustica, Moldova - is a workshop / museum/ educational organization doing serious research on traditional motifs and symbolism in Moldovan culture in regards to textiles, carpets, and other materials.
Creative Code - Open Processing Website.
What is the end goal?
The end goal is to create a series of such visuals and include it as part of a greater exhibition on Moldovan culture. Since 2019 I’ve been working on a photography driven storytelling project documenting my country’s culture, tradition, and daily life: “Moldova - An Iconography of the Land and Its People”.
The thinking process was to either (1) break the design down in shapes and see what would they be, what would be their order in building it up in p5., (2) to experiment with pixelating the original image, or (3) bringing an element of the image into p5. and loop it where there was an opportunity for repetitions (i.e. for the border: extract the triangle in photoshop - import to p5 // 4 loop to place them around the sketch // variables with the positions (for easier animation purposes, change position, if statement)).
Changing Direction:
As I was working with the file in photoshop, I realized the resolution was low and aesthetically was not as excited to recreate this in p5. I reached out to the artisan Ecaterina Popescu for references and her assistant sent me the sketches. I thought maybe to create something similar to sketching on paper but in code.
Caption: Sun symbols in textile ornaments.
And then I came across a research paper by Ludmila Moisei, ”Traditional Ornaments Of The Moldovan Textiles”, which described the history of the symbolism captured in these incredible designs and their simplicity was irresistible. I thought to work with a layout that would allow to plug in simple symbols and perhaps that could be user interactive or animated. My question was how to go about it? Create something according to existing templates from the artist or to appropriate it in some way by playing with simple shapes?
Feedback Session:
Generate different combinations of colors to create diff. versions of the sketch.
would be cool to find a way to add the meaning of symbols and colors. How to do that?
draw four patterns in classes; in draw (how big and where it draws) - this way the user creates his own tapestry, and the meaning behind it;
watch design generative systems in p5.
After last week’s group feedback, I had a more clear idea on how I could do this project. Working with functions I tried to create a few geometric shapes and play with animating them, changing colors and random functions.
ITERATIONS TO THE sun Design
Process:
Inspiration: Dave Stein code/sound artwork inspired by Vera Molnar's Art.
Caption: The sketch I’m currently working on now about constructing patterns within a grid.
Progress:
-played with formulas
-created an array of colors and called them into the squares to fill
-learned about randomizing the color with int function to return an integer number and how random function works to return a value more than 0-1
-played with formula for newCellSize (i*2 - that created bigger squares and the rect mode moved them off the screen or drew on top so the smaller sq were not visible
-then tried (i*08) would create some weird results. was trying to adjust the size of the second sq inside the first rect bc i / 2 exponentially and I want it to be equal visually.
-that led to the decision to create an array of square sizes to acces and change the value of the sq size in the array
Next 2 weeks: Still working on finishing up the symbol and the border. The timeline for the next two weeks includes animation, user interaction and how to incorporate the educational component into the sketch.
Today figured out:
the white color, and need to take the double color by changing it to something else
mouse hovering to get text on the bottom of canvas (used mouseMoved function bc in draw it would run only once)
draw a rectangle that is not showing now but where the text appears bc creating buttons not that visually interesting, and to appear outside of canvas also not interesting considering design
how to identify the hex color by moving the mouse over a color.
As works of a special value in Moldovan cultural patrimony, the old carpets conquer us through a harmony of shapes, through the blurred chromatic scale, the original treatment of the motifs, and the rhythm of symmetry.
Carpet dimensions: 2.0 m x 0.85 m Woven on vertical loom, two faces, from wool and cotton.
Use: for church wedding ceremony, as a carpet under groom and bride’s feet, as a wall decoration, or as a cover-up for old furniture (chest, coffer, sofa, swing).
Pattern: The Bull’s Eye. In the folk tradition, this sign associates the terrestrial and solar energy to generate a high vibratory state, but anchored, which draws spiritual energies to the Earth. The motif can be found in the late 19th century – early 20th century carpets.
Produced by: the “Artă Rustică” Folk Crafts Complex. Research and documentation by craftswoman Ecaterina Popescu.
Caption: Dave suggested to use grids for now and start with the basics. We created a grid using a for loop, and played with adding colors to it. Also playing with a random function to see the animation of the colors.
What I have practiced in code so far was:
understanding and creating variables to be able to change the grid easier or any other parameters that will change later in the code;
revisited the for loop function and use it to create a grid;
Questions I have about modifying the code further:
-a to add colors do I need to use arrays?
-b to create a shape (a rect) within the grid, do I use another for loop or a nested loop? Or another function?
-c how to create specific combinations of colors, randomize the combinations and not the particular colors
// next steps:
// create a shape within each grid cell. Perhaps a rectangle within a rectangle
// add a new shape from the reference list to recreate something similar to the image on file
// add specific colors and figure out combinations maybe, using mouse click or sliders
// animate it
// find a way to add the meaning of the colors and symbols
// create the frame
// from first classes of 'code your way' to add features from what we've learned: random, noise, canvas resizing, animation, etc.
// Use random to add colors, use diff equations cellSize multiply or divide, play w color and fill, stroke weight, the color of the stroke with the stroke - all 4 properties of the stroke // array storing 3-4 colors from culture //let myColors = [red, orange,yellow] and how do you use random to get a random function //let col = random (myColors) //fill (col);
-simplified the code: var, and structure of code
-revisit the for loop and nested loops for rect
-choose to work with rectMode (CENTER) to calculate easier the origin of x and y
-simplified further from rect to square
-random function
-add colors
Next:
-figure out the border around the canvas. because of the rect mode drawing at center, i need to do some more calculations on how to adjust the size of the cellSizes to accommodate for the border.
I have adjusted the for loop to create that and the size of the squares to match but in order to find a better way, I created a separate sketch to see how else I would do it. Right now there is space in between the squares so the fill of the background is separating the squares.
-need to figure out how to combine it.
-determine the colors and fill them in
-choose and draw a symbol (1-2 to select from) for the inner square
Color Codes
Squares:
White Cream: #d5bfb5
Pink: #c88c92
Wheat: #b17c50
Red: #93211a
Brown: #944b39
Green: #999966
Inner Flower:
Light Green: #7c6a4a
Dark Green: #575b35
Inner Red: #d2264d
Outer Rectangle:
Bordo: #5d3034
Beige: #5d3034
More Questions:
what is another way to create two outer rectangles?
for (let x = 5+cellSize-5 / 2; x < width; x += cellSize) {
for (let y = 5+cellSize-5 / 2; y < height; y += cellSize) {
Created a new sketch and played to get this. Will try to combine the two codes. What I have now is this…
2. how to create space between the squares?
3. **adjust the square sizes to match the inspiration source? ****
Answers:
2-3 Played with the numbers in the array and it matches now. That took care of the fill in between the squares for the background color to come through.
4. trying to create the symbol:
Next | Last Steps for Final:
//how not to repeat the color in the next square
//add the right text, combine with the geometrical shape meaning
//change that color in the array that is the same, to take the repetition of beige
How to not repeat the color in two consecutive squares:
//after selecting the color, remember that color by storing it into a var
//next time you pick a color, make sure it's not the same as the last color
//if it is the same (if statement) then you have to pick another color - call it last random
//it's useful to put it into a while loop... save code before bc the while never ends can crush your sketch...
Final sketch can be viewed and further edited if anyone chooses to here.
Caption: “Arta Rustica” Crafts Complex
Photo: Lynn Johnson