# 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

# Processing.py: How to use shapes, placements, and colors

To continue the series of how to use Processing.py, this article demonstrates how to use basic shapes, placements and colors. For the previous entry in the Processing.py series, see this page: Processing.py: How to draw lines and use mouse events This code demonstrates the use of lines, rectangles, ellipses, colors and placements by sketching a … Continue reading Processing.py: How to use shapes, placements, and colors

# Processing.py: How to draw lines and use mouse events

Building on the first post about using Processing.py (shown in the table below), this post will demonstrate the basic structure of a Processing.py program, how to draw lines, and understand some other basics of the Processing.py programming language. For the previous entry in the Processing.py series, see this page: Processing.py: Getting Started Example 1: Drawing … Continue reading Processing.py: How to draw lines and use mouse events

# Processing.py: Getting Started

Getting started with processing.py, this article follows the instructions found here: http://py.processing.org/tutorials/gettingstarted/ The first step is to download the processing IDE here. Once downloaded create a “processing_py” folder on your desktop and drag the “processing-3.3.6” folder from the .zip into the new folder. Inside this folder, click the processing.exe file and the IDE will open. … Continue reading Processing.py: Getting Started