createCanvas(600, 600);

  frameRate(15);

  stroke("#E43F53")

  noFill()

}

​

const pathPoints = 30

const distance = 20

const paths = 400 / distance

​

const lineWidth = 200

​

const lineHeights = []

​

for (let i = 0; i < paths; i++){

  lineHeights.push(1)

}

​

function draw() {

  background(255);

  translate( width/2 - lineWidth, height/6 )

  for( let i = 0; i < paths; i++ ){

    translate( distance/2, distance )

    beginShape();

    for( let p = 0; p < pathPoints; p++ ){

      /*

      let point = map( p, 0, pathPoints, 0, height )

      let pX = map( p, 0, pathPoints, 0, height )

      let pY = map( p, 0, pathPoints, height/4, 0 )

      // pY += sin( (pathPoints-p) / 2 + 2 ) * frameCount

      vertex( pX, pY )

      */

      let pX = (p / pathPoints) * lineWidth

      // let pY = 0 - Math.abs( cos( p/pathPoints - 0.5 ) )

      let factor = ( p / pathPoints )

      if( p > pathPoints/2 ){

        factor = ( (pathPoints-p) / pathPoints )

      }

      factor = factor * 3

      let pY = Math.pow(lineHeights[i],factor)

      pY += random(-2,2)

      pY += ( p / pathPoints ) * distance*2

      vertex( pX, -pY )

    }

    endShape();

  }

  lineHeights.pop()

  lineHeights.unshift( map( mouseX, 0, height, 0, 30 ) )

}

​

​

function mousePressed(){

  lineHeights.unshift( random( 3, 20 ) )

}