Practical p5.js Canvas Management: Creation, Parent Binding, Dynamic Resizing, Scrollbar Removal, and Deletion
If a p5.js sketch includes core lifecycle functions like setup() or draw() with out explicit canvas initialization, p5.js automatically appends a 100x100 pixel <canvas> to the <body> element.
function setup() {
background(200);
}
To define custom dimensions, use createCanvas(width, height) and pass numeric values for width and he ...
Posted on Fri, 31 Jul 2026 16:50:42 +0000 by nealios
Understanding the map() Function in p5.js
The map() function in p5.js re-scales a number from one range to another. This is especially useful for converting input values—like mouse coordinates or sensor data—into visual properties such as color, size, or position.
Function Signature
map(value, low1, high1, low2, high2, [clamp])
value: The incoming value to be mapped.
low1, high1: The ...
Posted on Thu, 30 Jul 2026 16:42:04 +0000 by matty84
Playing Videos with p5.js: A Practical Guide
Overview
Most developers use p5.js for drawing and creative coding, but the library also handles video playback from files and live camera streams. This guide covers the esssentials of working with video in p5.js.
Video File Playback
p5.js offers two approaches for video playback: rendering through a native <video> element or drawing fram ...
Posted on Tue, 16 Jun 2026 17:07:33 +0000 by IOAF
Drawing Triangles with p5.js: A Practical Guide to the triangle() Function
If you're new to p5.js and want to draw a triangle, the triangle() function is your go-to tool!
What is triangle()?
The triangle() functon in p5.js is specifically designed for drawing triangles. You provide it with three coordinate points, and it automatically connects them to form a triangle shape.
Basic Usage: Syntax and Parameters
The synta ...
Posted on Fri, 29 May 2026 19:01:39 +0000 by slimsam1
Drawing 3D Cylinders in p5.js with cylinder()
cylinder() is a built-in function in p5.js for rendering 3D cylinders. The geometry consists of two circular caps (top and bottom) and a curved lateral surface, all constructed from triangular faces—a standard approach in 3D graphics.
Important: This function only works when the canvas is initialized in WebGL mode. Attempting to use it in the d ...
Posted on Mon, 25 May 2026 21:51:53 +0000 by iacataca
Creating and Animating 3D Boxes in p5.js with box()
The box() function is the simplest03 way to generate a 3D solid in p5.js. It produces a cuboid (or cube) with six rectangular faces. All drawing must happen inside a WebGL canvas, otherwise the object will not appear.
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(240);
orbitControl();
box();
}
Drag t ...
Posted on Wed, 20 May 2026 18:42:32 +0000 by orionellis