https://github.com/kfahn22/persian-rug

Repo with persian_rug algorithm
https://github.com/kfahn22/persian-rug

p5js persian-rug processing recursion

Last synced: 21 days ago
JSON representation

Repo with persian_rug algorithm

• Host: GitHub
• URL: https://github.com/kfahn22/persian-rug
• Owner: kfahn22
• License: cc0-1.0
• Created: 2024-08-04T12:27:29.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-12-01T18:48:43.000Z (about 1 month ago)
• Last Synced: 2024-12-01T19:32:05.736Z (about 1 month ago)
• Topics: p5js, persian-rug, processing, recursion
• Language: Processing
• Homepage:
• Size: 28.4 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Persian Rug using Recursion

From [Wikipedia](https://en.wikipedia.org/wiki/Recursion):

> "Recursion is the process a procedure goes through when one of the steps of the procedure involves invoking the procedure itself."

To learn more about recusion, I highly recommend Daniel Shiffman's newly updated [The Nature of Code](https://natureofcode.com) book or his [Recursion Coding Challenge](https://thecodingtrain.com/challenges/77-recursion).

In [Recursion in Nature, Mathematics and Art](https://archive.bridgesmathart.org/2005/bridges2005-9.pdf), Anne Burns discusses using the mid-point algorithm to generate patterns that resemble Persian rugs. The essential idea is to draw a border around a square, and then draw lines connecting the midpoints of the opposite border in a new color which is a function of the colors, $x_i$, in the four corners of the square. This process was illustrated in Figure 10 of the paper.



Figure 10 from _Recursion in Nature, Mathematics and Art_

The sketch is an adapted version of this [code](https://stackoverflow.com/questions/26226531/persian-rug-recursion). I have used a method suggested by Dr. Eric Gossett in [Persian Rugs](https://www.youtube.com/watch?v=0wfPlzPvZiQ) to compute the next color. In this approach, we select colors from a palette based on the index. We first initialize an empty array to hold the indexes.

```JavaScript

 colorIndexArray = Array(canvasSize)

    .fill()

    .map(() => Array(canvasSize).fill(0));

```

We draw a border using palette[0]. We then retrieve the palette index from the colorIndexArry and calculate then new index using the following formula, where shift is an integer to add more variation to the rug generation.

$f(x_1 + x_2 + x_3 + x_4) = (i_1 + i_2+ i_3 + i_4$ + shift) % palette.length

We use the newIndex to pick the color from the palette for the new middle lines.

```JavaScript

let col = palette[newIndex];

let midCol = floor((left + right) / 2);

let midRow = floor((top + bottom) / 2);

// Draw middle lines

stroke(col);

line(left + 1, midRow, right - 1, midRow); // Horizontal

line(midCol, top + 1, midCol, bottom - 1); // Vertical

```

We also pass the newIndex to the colorIndexArray and continue this process recursively.

```JavaScript

  colorIndexArray[midCol][midRow] = newIndex;

```

I have found that the best images are created from a palette with a large number of colors. Luckily, I found a really nice [website](https://supercolorpalette.com) where you can obtain palettes with 12 and more different colors.

You can play with the p5 sketch [here](https://editor.p5js.org/kfahn/sketches/sL1BsexS-). I also have a version that chooses colors randomly [here](https://editor.p5js.org/kfahn/sketches/RShw897BV). Assuming you have Processing downloaded, you can open the Processing sketch by downloading from [here](Processing-palette/sketch.pdez).

## Gallery