Scribbler

Click (do not drag) to draw a random curve between the last point and the new point.

Some quotes from people I've showed this to:

WHAT? Friend #1

This is weird. Bizarro. What's the point of it? Friend #2 Acquaintance #1

A random scribbley line made with the tool; hard to interpret as anything, but could pass for the signature.

(Note: the random generator used in this sketch is not cryptographically secure. Please do not use this for generating signatures.)

function setup() {
  createCanvas(windowWidth, windowHeight);
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
let points = []

function draw() {
  background(220);
  noFill()
  beginShape()
  for (let i = 0; i < points.length; i ++) {
    let {p, d, s} = points[i]
    if (i != 0) {
      bezierVertex(p.x + d.x, p.y + d.y)
    }
    bezierVertex(p.x, p.y)
    if (i != points.length - 1) {
      bezierVertex(p.x + d.x * s, p.y + d.y * s)
    }
  }
  endShape()
}
function mouseClicked() {
  let p = createVector(mouseX, mouseY)
  let last = points[points.length - 1]
  let distLast = last ? last.p.dist(p) : 100
  let d = createVector(random(0.2, 1.3) * distLast, 0)
  let a = random(TAU)
  let s = random([1, 1, -1])
  d.rotate(a)
  points.push({p, d, s})
  
}

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

Experiments tagged p5 (55/85)

Experiments tagged interactive (18/26)

Experiments on this site (55/85)