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: 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 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