Curves

A comparison of Catmull-Rom splines curve() and Bezier curves bezier().

Source Code for this Sketch

// labelPosition draws a label at x,y indicating the selected x,y
// coordinates. if showLine is true it also draws a short
// connecting line between the text and the coordinate label,
// with optional color
function labelPosition(x, y, showLine, c) {
	push()
	colorMode(HSL)
	c = c ? c : color(220, 100, 50)

	// Make sure the label appears near the point, but not
	// off the edge of the canvas, or below the mouse cursor
	let showX = x + 15
	let showY = y + 10
	let anchorX = x + 12
	let anchorY = y + 8
	if (x > width * .8) {
		showX = x - 65
		anchorX = x - 8
	}
	if (y > height * .9) {
		showY = y - 10
		anchorY = y + -12
	}

	// Draw the label
	strokeWeight(0)
	fill(c)
	text("(" + round(x) + ", " + round(y) + ")", showX, showY)

	if (showLine) {
		strokeWeight(1)
		stroke(c)
		line(x, y, anchorX, anchorY)
	}
	pop()
}

// handles
let dh = {}

// colors
let catPoint
let catHandle
let bezPoint
let bezHandle

function setup() {
	createCanvas(400, 400, P2D, canvas)
	colorMode(HSL)
	angleMode(DEGREES)

	DragHandle.labelColor = color(45, 30, 65)
	DragHandle.radius = 10

	catPoint = color(220, 100, 40)
	catHandle = color(200, 100, 70)

	// Handles for catmull-rom splines
	dh.catA = new DragHandle(50, 100, catPoint)
	dh.catB = new DragHandle(130, 90, catPoint)
	dh.catAh = new DragHandle(200, 350, catHandle)
	dh.catBh = new DragHandle(100, 350, catHandle)

	bezPoint = color(30, 100, 50)
	bezHandle = color(40, 100, 50)

	// Handles for bezier curves
	dh.bezA = new DragHandle(280, 150, bezPoint)
	dh.bezB = new DragHandle(290, 230, bezPoint)
	dh.bezAh = new DragHandle(230, 250, bezHandle)
	dh.bezBh = new DragHandle(230, 100, bezHandle)

}

function draw() {
	background(45, 40, 85)

	// curves have a fill color, which we are not interested
	// in right now, so set it to the background color
	fill(45, 40, 85, 0)

	// catmull-rom control points
	strokeWeight(1)
	stroke(catHandle)
	line(dh.catA.x, dh.catA.y, dh.catAh.x, dh.catAh.y)
	line(dh.catB.x, dh.catB.y, dh.catBh.x, dh.catBh.y)

	// catmull-rom spline
	strokeWeight(2)
	stroke(catPoint)
	curve(dh.catAh.x, dh.catAh.y, // control point
		dh.catA.x, dh.catA.y, // start of line
		dh.catB.x, dh.catB.y, // end of line
		dh.catBh.x, dh.catBh.y) // control point

	// bezier control points
	strokeWeight(1)
	stroke(bezHandle)
	line(dh.bezA.x, dh.bezA.y, dh.bezAh.x, dh.bezAh.y)
	line(dh.bezB.x, dh.bezB.y, dh.bezBh.x, dh.bezBh.y)

	// bezier curve
	strokeWeight(2)
	stroke(bezPoint)
	bezier(dh.bezA.x, dh.bezA.y, // start of line
		dh.bezAh.x, dh.bezAh.y, // control point
		dh.bezBh.x, dh.bezBh.y, // control point
		dh.bezB.x, dh.bezB.y) // end of line

	for (let i in dh) {
		if (dh.hasOwnProperty(i)) {
			dh[i].draw()
		}
	}
}

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