p5

let t = 0

function setup() 
{
    createCanvas(windowWidth, windowHeight)
}

function draw() 
{
    background(245)
    t = frameCount
    translate(width*0.125, height*0.25)
    wave(width*0.75, t, height*0.25, color(245, 0, 128), 0)
    translate(0, height*0.5)
    scale(1, -1)
    wave(width*0.75, t, height*0.25, color(128, 0, 128), 1)
}

const wave = (w, theta, amp, c, mode) =>
{
    noStroke()
    fill(c)
    segments = w / 25
    for( i = 0; i < segments; i++)
    {
    let magnitude = 0
    if(mode === 0){
        magnitude = (sin((t*0.025)+i*0.2)+1)* 0.5 * amp + 15
    } 
    else {
        magnitude = (cos((t*0.025)+i*0.2)+1)* 0.5 * amp + 15
    }
    hp = createVector(i * 25, magnitude)
    tp = createVector(i * 25, 0)
    diamond(hp,tp,8*(magnitude/amp))
    }
}

const diamond = (headPos, tailPos, w) =>
{
    beginShape()
    vertex(headPos.x-w, lerp(headPos.y, tailPos.y, 0.1))
    vertex(headPos.x, headPos.y)
    vertex(headPos.x+w, lerp(headPos.y, tailPos.y, 0.1))
    vertex(tailPos.x, tailPos.y)
    endShape(CLOSE)
}