let pg

let t = 0

let tDelta = 0.01

let trigoMultiplier = 0.15

​

const simplex = new SimplexNoise()

​

function setup() {

  dim = 400

  createCanvas(dim, dim)

​

  pg = createGraphics(dim, dim)

  pg.clear()

  pg.stroke(255, 3)

  for (let i = 0; i < 10e5; i++) {

    pg.point(random(540), random(540))

  }

}

​

function draw() {

  t += tDelta

​

  const cosT = cos(t * TAU) * trigoMultiplier

  const sinT = sin(t * TAU) * trigoMultiplier

​

  background(44)

  image(pg, 0, 0)

​

  push()

​

  //clipping

  stroke(220)

  strokeWeight(4)

  fill(0, 0) //for transparent clipping

  beginShape()

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

    const v = p5.Vector.fromAngle((TAU / 6) * i - PI / 2).setMag(width / 2 - 30)

    vertex(v.x + width / 2, v.y + width / 2)

  }

​

  endShape(CLOSE)

  drawingContext.clip()

​

  translate(width / 2, height / 2)

  rotate(-PI / 4)

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

​

  drawingContext.globalAlpha = 0.9

  noStroke()

  fill(220)

  const N = 80

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

    let y = map(i, 0, N - 1, -100, height + 100)

    const points = []

    for (let x = -100; x <= width + 100; x += 2) {

      const angle = simplex.noise4D(x / 800, y / 800, cosT, sinT) * TAU

      points.push(createVector(x, y).add(p5.Vector.fromAngle(angle).setMag(40)))

    }

​

    beginShape()

    points.forEach((pt) => vertex(pt.x, pt.y))

    points.reverse().forEach((pt) => {

      pt.add(p5.Vector.fromAngle(-PI / 4).setMag(7))

      vertex(pt.x, pt.y)

    })

    endShape(CLOSE)

  }

  pop()

}

​

function mouseMoved() {

  tDelta = map(mouseX, 0, dim, 0, 0.02)

  trigoMultiplier = map(mouseY, 0, dim, 0.05, 0.3)

}