Search code examples
graphicsprocessingspline

How to draw smooth quad mesh with Processing?

I am trying to draw a mesh composed of several squares using splines in Processing, so far I have tried it

mesh = (
    [100, 100],[150, 100],[200, 100],[250, 100],[300, 100],[350, 100],[400, 100],[450, 100],[500, 100],
    [100, 150],[150, 150],[200, 150],[250, 150],[300, 150],[350, 150],[400, 150],[450, 150],[500, 150],
    [100, 200],[150, 200],[200, 200],[250, 200],[300, 200],[350, 200],[400, 200],[450, 200],[500, 200],
    [100, 250],[150, 250],[200, 250],[250, 250],[300, 250],[350, 250],[400, 250],[450, 250],[500, 250],
    [100, 300],[150, 300],[200, 300],[250, 300],[300, 300],[350, 300],[400, 300],[450, 300],[500, 300],
    [100, 350],[150, 350],[200, 350],[250, 350],[300, 350],[350, 350],[400, 350],[450, 350],[500, 350],
)

def draw():
    clear()
    background(255)
    stroke(0)
    strokeWeight(1.2)
    beginShape()
    for p in mesh:
        curveVertex(*p)
    endShape()
    stroke(*POINT_COLOR)
    strokeWeight(POINT_RADIUS)
    for p in mesh:
        point(*p)

where mesh is the matrix of all vertices. I want to draw all 4 edges of all squares, how can I do it using splines? Later I will allow users to drag vertices to change mesh shape and I want that shape to be smooth. The final result would be something like below but on 2D plane:

enter image description here

Solution

  • Here's my recommendation (disclaimer: I don't use processing in python, so I couldn't test run this code and there may be errors):

    mesh = (
    [[100, 100],[150, 100],[200, 100],[250, 100],[300, 100],[350, 100],[400, 100],[450, 100],[500, 100]],
    [[100, 150],[150, 150],[200, 150],[250, 150],[300, 150],[350, 150],[400, 150],[450, 150],[500, 150]],
    [[100, 200],[150, 200],[200, 200],[250, 200],[300, 200],[350, 200],[400, 200],[450, 200],[500, 200]],
    [[100, 250],[150, 250],[200, 250],[250, 250],[300, 250],[350, 250],[400, 250],[450, 250],[500, 250]],
    [[100, 300],[150, 300],[200, 300],[250, 300],[300, 300],[350, 300],[400, 300],[450, 300],[500, 300]],
    [[100, 350],[150, 350],[200, 350],[250, 350],[300, 350],[350, 350],[400, 350],[450, 350],[500, 350]]
)

def draw():
    background(255)
    stroke(0)
    for i in range(len(mesh)):
        beginShape()
        curveVertex(mesh[i][0][0], mesh[i][0][0])
        for j in range(len(mesh[i])):
            curveVertex(mesh[i][j][0], mesh[i][j][0])
        curveVertex(mesh[i][len(mesh[i]) - 1][0], mesh[i][len(mesh[i]) - 1][0])
        endShape()
    for i in range(len(mesh[0])):
        beginShape()
        curveVertex(mesh[0][i][0], mesh[0][i][1])
        for j in range(len(mesh)):
            curveVertex(mesh[j][i][0], mesh[j][i][0])
        curveVertex(mesh[len(mesh) - 1][i][0], mesh[len(mesh) - 1][i][1])
        endShape()

    This draws a line across each row, then a line down each column (at least, that was my intent). Note that I made each row its own list, as opposed to having all the coordinate pairs in a single tuple. This allowed me to iterate through the points in a much more organized manner.