Skip to content

Scribble pen

Move the mouse to trace curved lines.

A "penplotter" chases the mouse leaving a trace behind it

let trace
function setup() {
  createCanvas(400, 400);
  trace = createGraphics(width, height)
  trace.background(220)
}

let x = 0
let y = 0
let x2 = 0

function draw() {
  image(trace, 0, 0)
  
  fill(0)
  rectMode(CENTER)
  rect(x, y, 20, 5)
  line(0, y, 400, y)
  line(x, 0, x, 400)
  
  let ox = x, oy = y
  y += sqrt(abs(mouseY - y)) * constrain(mouseY - y, -1, 1)
  x += sqrt(abs(mouseX - x)) * constrain(mouseX - x, -1, 1)
  
  trace.line(ox, oy, x, y)
}

function doubleClicked() {
  trace.background(220)
}

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

Experiments tagged p5 (28/85)

Experiments tagged interactive (9/26)

Experiments on this site (28/85)