# 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

# 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