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