Skip to content

Ninja circle

Effects experiment. How dramatic can you make clicking on the canvas?

A circle dramatically split in half

function setup() {
  createCanvas(400, 400);
  cursor("crosshair")
}
let p = 0
let t = 2
let a = 1.4
let s = 1
let cx = 0, cy = 0

function draw() {
  background(220);
  
  if (t >= 0) {
    t += 1 / 100
    let b = sin((1-min(t * 2, 1)) ** 4 * PI)
    let b3 = sin((1-min(t * 2, 1)) ** 9 * PI)
    background((t ** 2) * 220)
    translate(cx, cy)
    rotate(a)
    circle(25*b*s, b3 * 20, 30 + sin(p / 7) * 2)
    push()
    beginClip()
    rect(-width * 1.5, -height * 3, width * 3, height * 3)
    endClip()
    background((t ** 2) * 220)
    circle(-25*b*s, -b3 * 20, 30 + sin(p / 7) * 2)
    pop()
    push()
    stroke(255)
    strokeWeight(b3 * 40)
    line(-1000, 0, 1000, 0)
    pop()
    p += (t) ** 1.1
    if (t >= 1) {
      t = -1
    }
    if (t > 0.0) {
      cx = cx + (mouseX - cx) * (t) ** 1.1
      cy = cy + (mouseY - cy) * (t) ** 1.1
    }
  } else {
    p ++
    cx = mouseX
    cy = mouseY
    circle(cx, cy, 30 + sin(p / 7) * 2)
  }
}
function mousePressed() {
  t = 0
  cx = mouseX
  cy = mouseY
  a = random(2 * PI)
  s = random([-1, 1]) * random(0.8, 3)
}

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

Experiments tagged p5 (59/85)

Experiments tagged interactive (19/26)

Experiments on this site (59/85)