{"id":2137,"date":"2021-10-06T22:02:18","date_gmt":"2021-10-07T02:02:18","guid":{"rendered":"https:\/\/www.alpharithms.com\/?p=2137"},"modified":"2021-10-06T22:02:18","modified_gmt":"2021-10-07T02:02:18","slug":"evenly-spacing-objects-around-a-circle-in-p5js-processing","status":"publish","type":"post","link":"https:\/\/www.alpharithms.com\/evenly-spacing-objects-around-a-circle-in-p5js-processing-180222\/","title":{"rendered":"Evenly Spacing Objects Around a Circle in P5JS (Processing)"},"content":{"rendered":"

Processing is a powerful generative art library available in a number of languages including Java, JavaScript, Android, and iOS. Circles and ellipses are among the many geometric functions processing afford artists. They are particularly useful in helping to place items in an evenly distributed manner.<\/p>\n

This tutorial will walk through the process of creating a circle to be used as a guide for spacing objects evenly. We will use a bit of trigonometry and a handful of P5JS’s handy functions. By the end\u2014we’ll be creating a circle onto which we can evenly space any number of objects we choose!<\/p>\n

Quick Trigonometry Refresher<\/h2>\n

We don’t need much math to make this magic happen but some basic trigonometric knowledge is a must. Specifically, we need to know how to find a point on a circle given the radius, angle, and in our case; the relative position of the circle’s origin. This means we need to find the x-coordinate and y-coordinate. The formula for these points\u2014using the unit circle\u2014are as follows:<\/p>\n

\"point<\/a>
A point on a circle is found using an angle and the sin and cos function.<\/figcaption><\/figure>\n

These are the functions we will implement using P5JS to get a point on our circle. By using angles that are fractions of 2*PI (a.k.a. 360 degrees) we can determine how much space a point on our circle should have between itself and the neighboring points. Enough chatter\u2014let’s start coding!<\/p>\n

Step 1: Draw a Reference Circle<\/h2>\n

The first step is to draw a circle on which our points will be placed. P5JS offers two primary means of achieving this. The first, using the built-in circle method, is the most straightforward approach. Alternatively, we could use the ellipse function but there is no particular need in this case. Create a circle with the following code:<\/p>\n

\/**\r\n * Initialization function by P5JS\r\n *\/\r\nfunction setup(){\r\n    \r\n    \/\/ Creates the HTML canvas object to which all\r\n    \/\/ drawing is projected.\r\n    createCanvas(1360, 768)\r\n    \r\n    \/\/ Fills the canvas object with a background color\r\n    background(\"#efefef\")\r\n}\r\n\r\n\/**\r\n * Primary update function called each frame by P5JS\r\n *\/\r\nfunction draw(){\r\n    \r\n    \/\/ Define styles of our geometry (circle)\r\n    stroke('black')\r\n    strokeWeight(15)\r\n    noFill()\r\n    \r\n    \/\/ Create the circle\r\n    circle(width \/ 2, height \/ 2, 512)\r\n}<\/pre>\n
In this script, we’ve created a canvas object of size 1360px x 768px, added a background color, and created a circle object with a black stroke color and no fill. Here’s the image, that will serve as our jumping-off point:<\/p>\n
\"p5js
A simple circle, drawn using P5JS’s built-in circle() function.<\/figcaption><\/figure>\n
Step 2: Draw a Point on the Circle<\/h2>\n
We need to first draw a single point on our circle before we start loading this circle up with lots of points. This can be accomplished by applying the two formulas from above with the following code in our draw() function just after we’ve drawn the circle:<\/p>\n
\/\/ Draw a single point\r\nlet angle = 0;\r\nlet x = diameter \/ 2 * Math.cos(angle);\r\nlet y = diameter \/ 2 * Math.sin(angle)\r\nstroke('red')\r\nstrokeWeight(25)\r\npoint(x, y)<\/pre>\n
In this block we’ve created a new variable for the angle we’ll use for calculation. In math class, you’ll hear this called theta<\/em> (\u0398). We’ve also created two variables x, y<\/code> to make the calculations more clear for our angles. After that, we’ve told P5JS we want the point to be red and of size (strokeWeight<\/code>) 25. This results in the following image:<\/p>\n
\"missing
Here we see our circle having been created, though it appears to be incorrectly placed. (upper left)<\/figcaption><\/figure>\n
Yikes. We’ve created a point all right but it doesn’t seem to be where we wanted it. So what gives\u2014were our calculations wrong?<\/p>\n
Step 3: Adding an Offset<\/h2>\n
The issue is that when using unit circle trigonometry one assumes the origin (middle point of the circle) is at the x,y coordinates (0, 0). Ours is located at 680 (width \/ 2), 383 (height \/ 2). To fix this, we need to relocate our point or origin as shown in the following image:<\/p>\n
\"offset
We need to account for starting our calculation at the center of our circle instead of the canvas center.<\/figcaption><\/figure>\n
This is an issue because P5JS uses a coordinate system where the upper-left of the canvas is the origin. See here for a more in-depth discussion<\/a>. To remedy this situation we need only add a simple offset to our equations by updating our code in the following way:<\/p>\n
\/\/ Use trigonometric functions to calculate a point\r\n\/\/ on the circle and adding an offset to account\r\n\/\/ for the position of our circle's center.\r\nlet x = diameter \/ 2 * Math.cos(angle) + width \/ 2;\r\nlet y = diameter \/ 2 * Math.sin(angle) + height \/ 2;<\/pre>\n
Note we’ve added calculated values of width\/2<\/code> and height\/2<\/code> for our circle’s center coordinates. These are P5JS built-in keywords that return both the width and height of the canvas object we created in the first step. This makes our trigonometric functions relevant to the center of our circle rather than the world (0, 0) coordinates that happen to be at the top-left corner of the canvas object. This tweak produces the following image:<\/p>\n
\"point
The point is now located on the border of our circle, having been offset accordingly.<\/figcaption><\/figure>\n
Step 4: Adding Multiple Points<\/h2>\n
Now that we have figured out how to add a point to our curve we can begin conceiving of how to add multiple points. We are going to approach this problem iteratively, adding a series of points one after another. However, we need to increment our angle during each iteration to ensure our points aren’t overlapping. We’ll approach this with the following update to our draw()<\/code> function:<\/p>\n
\/\/ Create and initialize a variable for the \r\n\/\/ Number of points to be drawn on our circle\r\nlet pointCount = 6;\r\n\r\n\/\/ Create and initialize a variable from which\r\n\/\/ we will start drawing points.\r\nlet angle = 0;\r\n\r\n\/\/ Iteratively draw points incrementing by 360 \/ pointCount\r\nfor(let i = angle; i < 360 + angle; i+=360 \/ pointCount){\r\n    let x = diameter \/ 2 * Math.cos(i) + width \/ 2;\r\n    let y = diameter \/ 2 * Math.sin(i) + height \/ 2;\r\n    point(x, y)\r\n}<\/pre>\n
Here we’ve used an iterator i<\/code> set to an initial value of angle<\/code> which loops in increments of 360 \/ pointCount<\/code> until reaching a value of 360 + angle<\/code>. The + angle<\/code> component ensures that if we start our angle at a non-zero value we will continue to increment until the start angle is reached. Let’s see the result:<\/p>\n
\"not
Here we have the correct number of points but the spacing is incorrect.<\/figcaption><\/figure>\n
Yikes. Here we’ve created the correct number of points. There also seems to be\u00a0some\u00a0<\/em>form of spacing going on\u2014but certainly not an\u00a0evenly distributed<\/em> spacing. The issue is that we are using 360\u2014a value in degrees\u2014when P5JS expects a value in\u00a0radians<\/em> by default. We can remedy this by using one of two following adjustments;<\/p>\n
    \n
  1. Using the radians()<\/code> function to convert the values of degrees;<\/li>\n
  2. Using a built-in value of PI (P5JS’s PI<\/code> or JavaScripts Math.PI<\/code>);<\/li>\n<\/ol>\n
    The Unit Circle presents values calculated in terms of radians. As such, most trigonometric functions use radians by default. Fortunately, any language worth its salt provides built-in methods to convert radians to degrees or easily use values of PI. Check out this video by Khan Academy for more information on Radians vs. Degrees<\/a>.<\/p>\n
    Below illustrates both a PI-relative approach and a degrees-to-radians approach<\/p>\n
    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/\/\/ Radian Conversion Approach\r\n\r\n\/\/ Replace Angle with PI\r\nlet angle = PI;  \/\/ 0 would still work here\r\nlet pointCount = 6;\r\n\r\n\/\/ Update 360 to TWO_PI, still offset via angle\r\nfor(let i = angle; i < TWO_PI + angle; i += TWO_PI \/ pointCount){\r\n    let x = diameter \/ 2 * Math.cos(i) + width \/ 2;\r\n    let y = diameter \/ 2 * Math.sin(i) + height \/ 2;\r\n    point(x, y)\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/\/\/ Radian Conversion Approach\r\n\r\n\/\/ Create a circle with angles converted from degrees\r\nlet angle = 0;\r\nlet pointCount = 6;\r\nfor(let i = angle; i < radians(360 + angle) ; i += radians(360 \/ pointCount) ){\r\n    let x = diameter \/ 2 * Math.cos(i) + width \/ 2;\r\n    let y = diameter \/ 2 * Math.sin(i) + height \/ 2;\r\n    point(x, y)\r\n}<\/pre>\n
    Here we see both approaches\u2014using P5JS’s TWO_PI<\/code> (equivalent to PI * 2<\/code> or Math.PI * 2<\/code>) as well as the radians(360 \/ pointCount)<\/code> approach. Whichever approach we might choose, the following image will be produced:<\/p>\n
    \"evenly
    A circle with 6 evenly-spaced points, located along the border.<\/figcaption><\/figure>\n
    Getting Creative<\/h2>\n
    Locating points along a circle can give rise to all sorts of possibilities. One can use them to create irregular grid designs, influence flow fields, or just see what type of patterns one can generate by fiddling around with the radius, point spacing, and visualizing those connections. Below is a grid of images created using points spaced evenly along a curve to direct the output of a recursive algorithm:<\/p>\n
    \"circle<\/a>
    A grid of patterns created using evenly spaced points about circles to locate the origin point of a recursive function. (click to enlarge)<\/figcaption><\/figure>\n
    Final Thoughts<\/h2>\n
    P5JS (and Processing generally) is a powerful visualization tool. Mastering fundamental operations, such as spacing objects evenly along a circle’s border, can help build a robust toolkit by which one can create mesmerizing generative art. The positions of these dots\u2014as well as the circle\u2014can serve as placements for other objects.<\/p>\n
    Adding in unique combinations of offsets, random variance, color, size, shape, etc. can build to create truly complex artwork. And to think\u2014all this is possible because we figured out how to evenly space a few points along the border of a circle! If you’re looking for more fundamentals check out the article on how to draw a squiggly line in P5JS<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"
    Processing is a powerful generative art library available in a number of languages including Java, JavaScript, Android, and iOS. Circles and ellipses are among the many geometric functions processing afford artists. They are particularly useful in helping to place items in an evenly distributed manner. This tutorial will walk through the process of creating a […]<\/p>\n","protected":false},"author":2,"featured_media":2149,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[10],"tags":[543,568,192,546,479,364,542,548,567,566,565,569],"acf":[],"_links":{"self":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2137"}],"collection":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/comments?post=2137"}],"version-history":[{"count":4,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2137\/revisions"}],"predecessor-version":[{"id":2150,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2137\/revisions\/2150"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media\/2149"}],"wp:attachment":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media?parent=2137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/categories?post=2137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/tags?post=2137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}