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
Processing Language
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
Processing.py: How to calculate the midpoint of a line
To calculate the midpoint of a line, use the following formula to calculate the x and y midpoints: # Middle of line # midpoint = (xM, yM) xM = (x1 + x2)/2 yM = (y1 + y2)/2 Then the midpoint coordinates (xM, yM) can be used to draw an ellipse on the line. For example: … Continue reading Processing.py: How to calculate the midpoint of a line
Processing.py: How to create grid square patterns and digital camo
Continuing the Processing.py series, this article demonstrates how to use a slight variant of the 10 PRINT example to build a grid pattern design made up of squares of differing sizes and colors. This technique can also produce digital camo (camouflage) patterns! For the previous entry in the Processing.py series, see this page: Processing.py: How … Continue reading Processing.py: How to create grid square patterns and digital camo
Processing.py: How to implement 10 PRINT
Continuing the Processing.py series, this article demonstrates how to implement ’10 PRINT’ to create interesting line images. 10 PRINT is an old Commodore 64 one-line program written in BASIC that looks like this: 10 PRINT CHR$(205.5+RND(1)); : GOTO 10 For more information, see 10print.org. For the previous entry in the Processing.py series, see this page: Processing.py: … Continue reading Processing.py: How to implement 10 PRINT