Ninja circle
Effects experiment. How dramatic can you make clicking on the canvas?
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)
Browse more articles?
← Match sets Experiments tagged p5 (59/85) Catenary chain →
← Scribbler Experiments tagged interactive (19/26) Catenary chain →
← Match sets Experiments on this site (59/85) Catenary chain →