Splats
Click to make a splat.
Made as a quick showcase of what p5.js 2.0's new splineVertex function can do.
let b, f
function setup() {
angleMode(DEGREES)
createCanvas(windowWidth, windowHeight)
b = createGraphics(width, height)
b.noFill()
b.strokeWeight(1.5)
f = createGraphics(width, height)
f.stroke(255, 80)
noLoop()
}
function draw() {
background(220)
image(b, 0, 0)
image(f, 0, 0)
}
function mousePressed() {
f.fill(random(110, 255), random(110, 255), random(110, 255))
b.beginShape();
f.beginShape();
let s = random(40, 100)
for (let i = 0; i < 360; i += random(9, 15)) {
let r = random(20, s)
b.splineVertex(mouseX + sin(i) * r, mouseY + cos(i) * r);
f.splineVertex(mouseX + sin(i) * r, mouseY + cos(i) * r);
}
b.endShape(CLOSE)
f.endShape(CLOSE)
redraw()
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
b.resizeCanvas(width, height)
f.resizeCanvas(width, height)
}(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/lEI2brzqy)
Browse more articles?
← Circle lockpick Experiments tagged p5 (31/85) Natural Knight tiling →
← Scribble pen Experiments tagged interactive (10/26) Teleportation effect →
← Circle lockpick Experiments on this site (31/85) Natural Knight tiling →