# Trying to create wave / cloth flow pattern

**URL:** <https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795>\
**Category:** Coding Questions\
**Created:** [June 3, 2019, 8:23am UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795 "2019-06-03T08:23:43Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [June 3, 2019, 8:23am UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/1 "2019-06-03T08:23:44Z")

</div>

Hello good people!

I found this picture in the internet few weeks ago:

 ![7781919adcfbe0fbabea7117b8e9fdaf](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3f8b537486fea468e77d4bfde46fc492aa8625ea.jpeg)  
and I have been trying to replicate this in p5.js but haven’t found the solution yet.

This is my code:

```auto
var woll = [];

function setup() {
  createCanvas(1000, 1000);
  colorMode(RGB);
  background(236, 236, 236);
  stroke(20, 20, 20);

  strokeWeight(1);
  noFill();
  for (var i = 0; i < 400; i++) {
    var x = 1 + (i / 2) / 5;
    woll[i] = new Woll(x, 0);
  }
}

function draw() {
  for (var i = 0; i < woll.length; i++) {
    woll[i].move();
  }
}

function Woll(templocX, templocY) {
  this.locX = templocX;
  this.locY = templocY;
  this.jitterMax = 30;
  this.jitter = 0;

  this.move = function() {
    translate(this.locX, this.locY);
    beginShape();
    for (var i = 0; i < 1000; i += 9) {
      this.jitter = map(i, 0, 1000, 0, this.jitterMax);
      this.y = i;
      this.a = i
      this.x = noise(this.jitter) * 100;
      curveVertex(this.x, this.y);

    }

    endShape();
    noLoop();
  }
}

```

See the live version in [editor.p5js.org](http://editor.p5js.org)  
[https://editor.p5js.org/istiko@gmail.com/sketches/Mx7m38sl7](https://editor.p5js.org/istiko@gmail.com/sketches/Mx7m38sl7)

–

My solutions was to create noise line and then replicate that line with translate. I don’t know maybe the solution is wrong. Any help would appreciated 🙂  
Thanks!

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [June 3, 2019, 12:09pm UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/2 "2019-06-03T12:09:28Z")

</div>

Would you not need to offset the lines with more noise?

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [June 3, 2019, 5:03pm UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/3 "2019-06-03T17:03:59Z")

</div>

might want to take a look at this, it could help.

> **[Color smoke llfx.exe - OpenProcessing](https://www.openprocessing.org/sketch/678315)**
>
> This fork includes minor updates to host the sketch on the homepage of OpenProcessing.org

---

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [June 4, 2019, 1:51am UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/4 "2019-06-04T01:51:34Z")

</div>

I don’t want to offset the lines. But what I want is that each individual lines is going to top each other while maintain the angle

---

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [June 4, 2019, 1:52am UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/5 "2019-06-04T01:52:12Z")

</div>

This could work, thanks for the suggestion 🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 4, 2019, 9:03am UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/6 "2019-06-04T09:03:26Z")

</div>

I think although we only see straight lines there is in fact a grid of connections

So the parallel visible threads that you see are connected by invisible short threads

Those work like springs so they lift up the parallel thread

See height field or look at springs in the example section on the website

---

<div class="post-metadata">

**Author:** ![FreddieRa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/freddiera/32/4078_2.png) [@FreddieRa](https://discourse.processing.org/u/FreddieRa)\
**Post date:** [June 4, 2019, 2:49pm UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/7 "2019-06-04T14:49:01Z")

</div>

Take a look at this:

> **[Distortion test 3 - OpenProcessing](https://www.openprocessing.org/sketch/404046)**
>
> experimenting by distorting lines

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [June 4, 2019, 10:07pm UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/8 "2019-06-04T22:07:32Z")

</div>

Hi @noob,

From what I see it looks like:

- the waves are accentuated around the center
- those waves follow a diagonal pattern

For the first point maybe try to increase then decrease the noise value based on the x coordinates.  
For example if your `width` is 600 , increase the noise value from 0 to 300 and then decrease it from 300 to 600.

For the second point, I would suggest to mix the `x` and `y` coordinates (adding or summing them) when computing the 2D noise value.

Example sketch in Processing Python mode (needs a lot of improvements and fine tuning) :

```auto
def setup():
    size(600, 800, P2D)
    background("#F3F3F5")
    strokeWeight(2)
    smooth(8)
    
    points = []
    
    edge = 10
    step = 10
    res = (height - (edge*2)) / step
    nLines = ((width*2) - (edge*4)) / step
    
    factor = .001
    off = 0
    x2 = 0
    
    for i, x in enumerate(xrange(edge, (width*2) - edge, step)):
        
        if x > width:
            x2 -= step
            off += step
        else:
            x2 = x

        for y in xrange(edge, height - edge, step):
            n = noise(x2 * factor * 1.5, (x+y) * factor) 
            if i > 10 and i < nLines - 10:
                points.append(PVector(off + x2 * n, y ))
            
    
    for i in xrange(len(points)-1):
        if i%res != (res-1):
            line(points[i].x, points[i].y, points[i+1].x, points[i+1].y)

```

 ![screenshot66](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/37df80eb96b0592b261fdad05e9f0d3cda1b2be9.png)

Edit: a simple P5.js sketch to get you started [https://editor.p5js.org/solub/sketches/Q1GN0BL8C](https://editor.p5js.org/solub/sketches/Q1GN0BL8C)

---

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [June 11, 2019, 2:10pm UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/9 "2019-06-11T14:10:07Z")

</div>

Thank you so much @solub ! Your sketch is amazing. I am studying your code for a week now. Something that I am still doesn’t understand is this line of code `if (id % res != (res - 1)) {` would you mind to explain to me what is that mean by this?

Thanks

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [June 11, 2019, 3:36pm UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/10 "2019-06-11T15:36:44Z")

</div>

Sure, `res` stands for ‘resolution’, it is the number of points contained in a single line.

You need to remember that these points are stored as vectors in a **1 dimensional** array list:

`points = [vector(10, 10), vector(10, 20), vector(10, 30), vector(10, 40), ...]`

If you want to draw a line you need to connect the first vector to the second, the second to the third, the third to the fourth, and so on until you reach the end of the array.  
**However** , if you do so, the last point of the first line will be connected to the first point of the second line, and this for each line.

 ![sc69](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bb12be45c7dfd40a314c8f9aad724c78162080f0.png)

In order to prevent this you need to stop the connexion mecanism at the end of each line. That’s what that line of code does:

> `if (id % res != (res - 1)) `  
> “as long as the current point is not the last point of a line” …(connect it to the next point)

Check the reference page of [mudolo](https://processing.org/reference/modulo.html) if that’s still obscure to you.

Here below a visual exaplanation with `res = 5`

 ![ss71](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/91fedf7f15bd627219623c36a61fa09e0e273177.png)

Hope that helps

---

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [June 12, 2019, 2:37am UTC](https://discourse.processing.org/t/trying-to-create-wave-cloth-flow-pattern/11795/11 "2019-06-12T02:37:46Z")

</div>

Ohhh… THANK YOU! Great explanation and crystal clear for me @solub👏👏  
This new logic using `res` is very clever. I am sure I can use it to tweak another problem.