Skip to content

Splats

Click to make a splat.

Made as a quick showcase of what p5.js 2.0's new splineVertex function can do.

A canvas of coloful paint splotches

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)

Experiments tagged p5 (31/85)

Experiments tagged interactive (10/26)

Experiments on this site (31/85)