Scribble

Random scribbles. Hold the mouse or tap to attract the pen.

Source Code for this Sketch

const randStep = 10
const mouseStep = 3
const hueStep = 5

let lastX = 0
let lastY = 0
let x = 0
let y = 0
let hue = 0

function setup() {
	createCanvas(400, 400, P2D, canvas)
	colorMode(HSL)
	background(100)

	hue = random(0, 360)

	lastX = width/2
	lastY = height/2
}

function draw() {
	strokeWeight(1)

	hue += random(-hueStep, hueStep)
	if (hue > 360) {
		hue -= 360
	}
	if (hue < 0) {
		hue = 360-hue
	}

	stroke(hue, 100, 50)

	x = lastX + random(-randStep, randStep)
	y = lastY + random(-randStep, randStep)

	if (mouseIsPressed) {
		if (mouseX > x) {
			x += mouseStep
		}
		if (mouseX < x) {
			x -= mouseStep
		}
		if (mouseY > y) {
			y += mouseStep
		}
		if (mouseY < y) {
			y -= mouseStep
		}
	}

	// Bounce off the edge when hitting an edge
	if (x < 0) {
		x = abs(x)
	}
	if (y < 0) {
		y = abs(y)
	}
	if (x > width) {
		x = width-(x-width)
	}
	if (y > height) {
		y = height-(y-height)
	}

	line(x, y, lastX, lastY)

	lastX = x
	lastY = y
}

You may use all or part of the p5 code seen on this page for your own creations, without restriction. Attribution is appreciated but not required.

This sketch also includes the following sources: p5common.js . Sources are available under their respective licenses.

See all p5.js sketches