p5.js: How to build a Menger sponge

According to Wikipedia, a Menger sponge is: In mathematics, the Menger sponge (also known as the Menger universal curve) is a fractal curve. It is a three-dimensional generalization of the Cantor set and Sierpinski carpet, though it is slightly different from a Sierpinski sponge. It was first described by Karl Menger in 1926, in his … Continue reading p5.js: How to build a Menger sponge

p5.js: How to build a starfield

In this article, I will show how to build a starfield in p5.js. The starfield is presented as if you are flying through a field of stars, where the closer stars are bigger and there is an appearance of light streaking as your speed increases. This sketch is interactive in that moving the mouse to … Continue reading p5.js: How to build a starfield

p5.js: A better (web based) IDE

Since writing my article about getting started with p5.js: p5.js: Getting Started I have since found a better Integrated Development Environment (IDE) for p5.js which also happens to be web based. This IDE is flexible, updated, and fast enough such that it is fun to experiment and save multiple project iterations easily. The web IDE … Continue reading p5.js: A better (web based) IDE

p5.js: How to rotate 3D objects on the X, Y, and Z axis

On the 2D plain of a browser window p5.js can represent 3D space using WEBGL. This is specified as the third argument to the createCanvas() function in the setup portion of the sketch: createCanvas(400, 300, WEBGL); Here is some code that demonstrates how to rotate a 2D rectangle on the X axis, using rotateX(), which … Continue reading p5.js: How to rotate 3D objects on the X, Y, and Z axis

p5.js: How to build a clock

In this article, I will show how to build a clock using p5.js, step by step. Here is what the final result looks like: Step 1: Create a square canvas with an origin point When you create a new p5.js sketch in the Processing IDE, you start with empty setup() and draw() functions. For example: … Continue reading p5.js: How to build a clock

p5.js: Understanding circles

To understand how to code with circles in p5.js, it is necessary to have a foundation of knowledge about the parts of a circle and how they map to code. The first mapping is the name. Circles are actually called ellipses in p5.js and are produced using the ellipse() function, that takes in four (or … Continue reading p5.js: Understanding circles

WordPress: How to create an iframe refresh button

Let’s say you have an interactive canvas loaded in an iframe and you want to have the ability to “clear” the canvas without reloading the entire page. This example was created using p5.js and the html was loaded into an iframe. After drawing on this canvas, it can be cleared by clicking the “Clear Canvas” … Continue reading WordPress: How to create an iframe refresh button

p5.js: Getting Started

Getting started with p5.js, this article follows the instructions found here:https://p5js.org/get-started/ Where processing.py only allows interaction in the Processing code environment, p5.js allows for real time interactive experiences on the web. This article is similar to the previous article I wrote about getting started with Processing.py: In the Processing IDE, choose the p5.js option at … Continue reading p5.js: Getting Started