Trying to create wave / cloth flow pattern

p5.js Coding Questions
8

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) :

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
screenshot66.png578×792 64.3 KB

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

4 Likes