Skip to content

Teleportation effect

Click to teleport.

Lines stroke the distance between the mouse and a circle

function setup() {
  createCanvas(400, 400);
  cursor("none")
}

let x = 100
let y = 100

function draw() {
  background(220);
  let t = frameCount / 40
  
    for (let i = 0; i < 50; i++) {
      let a = atan2(noise(t / 10, -i - 60) * 2 - 1, noise(t / 10, -i - 90) * 2 - 1)
      let b = (noise(t * 2, -i) * 3) % 1
      let c = (b + noise(t * 2, -i - 30) / 5) % 1
      if (b < c) {
        line(
          lerp(x + cos(a) * 7.5, mouseX + cos(a) * 10, b),
          lerp(y + sin(a) * 7.5, mouseY + sin(a) * 10, b),
          lerp(x + cos(a) * 7.5, mouseX + cos(a) * 10, c),
          lerp(y + sin(a) * 7.5, mouseY + sin(a) * 10, c),
        )
      } else {
        line(
          x + cos(a) * 7.5,
          y + sin(a) * 7.5,
          lerp(x + cos(a) * 7.5, mouseX + cos(a) * 10, c),
          lerp(y + sin(a) * 7.5, mouseY + sin(a) * 10, c),
        )
        line(
          lerp(x + cos(a) * 7.5, mouseX + cos(a) * 10, b),
          lerp(y + sin(a) * 7.5, mouseY + sin(a) * 10, b),
          mouseX + cos(a) * 10,
          mouseY + sin(a) * 10,
        )

      }
    }
    noFill()
    let a = atan2(noise(t / 10, -4) * 2 - 1, noise(t / 10, -16) * 2 - 1)
    for (let i = 0; i < 2*PI; i += PI/9 * (1 + noise(t, i))) {
      arc(mouseX, mouseY, 20, 20, i + a, i + PI/9/3 + a)
    }
  
  fill(255)
  circle(x, y, 15)
}

function mouseReleased() {
  x = mouseX
  y = mouseY
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/60xOubnHc)

Experiments tagged p5 (33/85)

Experiments tagged interactive (11/26)

Experiments on this site (33/85)