{"id":2034,"date":"2021-09-19T21:47:26","date_gmt":"2021-09-20T01:47:26","guid":{"rendered":"https:\/\/www.alpharithms.com\/?p=2034"},"modified":"2021-09-19T21:47:26","modified_gmt":"2021-09-20T01:47:26","slug":"centering-things-in-p5js","status":"publish","type":"post","link":"https:\/\/www.alpharithms.com\/centering-things-in-p5js-264721\/","title":{"rendered":"Centering Things with P5JS"},"content":{"rendered":"

The P5JS library is an excellent port of the infamous Java-based Processing library. Each is used for visual designs and is the go-to tool for many generative artists. The P5JS library approaches the centering of objects a bit strange and this approach can throw beginners for a loop.<\/p>\n

P5JS has a lot of built-in functions that are somewhat\u00a0magic<\/em> when first starting. Functions like fill()<\/code>, stroke()<\/code>, no fill()<\/code>, background()<\/code> can affect different things depending on when they are called. This functional design can take some getting used to\u2014especially when it comes to translating, rotating, and orienting objects.<\/p>\n

Note<\/strong>: You can follow along with the code in this post via the online P5JS Editor<\/a>.<\/em><\/p>\n

Setting up the Scene<\/h2>\n

P5JS abstracts away a lot of the lower-level requirements for visualizations. As such, setting up a new scene is quite easy. There are two basic functions to be aware of: setup<\/code> and draw<\/code>. The setup()<\/code> function gets called during initialization and is called continuously throughout the script. Let’s set our scene up as follows:<\/p>\n

\/\/ Some variables for convenience (optional)\r\nconst height = 512\r\nconst width = 512\r\n\r\n\/**\r\n * Gets called during scene initialization\r\n *\/\r\nfunction setup(){\r\n    createCanvas(width, height)\r\n    background(\"#efefef\")\r\n}\r\n\r\n\/**\r\n * Called continuously during visualization\r\n *\/\r\nfunction draw(){\r\n    \/\/ We will add code here\r\n}<\/pre>\n
This results in a “blank” scene with only our canvas object showing:<\/p>\n
\"p5js
A blank canvas of 512px x 512px in dimensions created by the setup() function<\/figcaption><\/figure>\n
During the creation of this canvas object, the following elements and data are added to the HTML file having loaded this script (index.html<\/code> in the case of this test.)<\/p>\n
<main>\r\n    <canvas id=\"defaultCanvas0\" class=\"p5Canvas\" width=\"512\" height=\"512\" style=\"width: 512px; height: 512px;\"><\/canvas>\r\n<\/main><\/pre>\n
P5JS allows the addition of classes, specification of which element to add the code to, and a whole mess of other useful functions. For our discussion here, however, we’ll be focused only on placing and aligning objects onto the canvas. As the saying goes\u2014best to start at the beginning. Or, in the case of P5JS\u2014the top<\/em>.<\/p>\n
Starting at the Top<\/h2>\n
The P5JS canvas is indexed as a pixel grid coordinate system that ranges from 0-width in width and 0-height in height. In the case of our example here, both the height and width values have been defined as 512px. Let’s see what happens when we add a shape to our scene in the draw()<\/code> function:<\/p>\n
rect(0, 0, 64, 64);<\/pre>\n
This creates a rectangle shape at the coordinates (0, 0)<\/code> with a width and height of 64<\/code>. For more details on how to create a rectangle, check out the official P5JS documentation<\/a>. There are tons of fun ways in which one can alter rectangles by preference. The image below reflects our canvas with the newly-minted rect<\/code> object:<\/p>\n
\"p5js
The default rectangle shape has a fill color of white and a stroke color of black.<\/figcaption><\/figure>\n
P5JS will add an object to the coordinates (0, 0) by default\u2014as opposed to nicely centering things in the middle of our canvas. This seemed like an annoyance to me when first getting familiar with this library. However, it becomes second nature to reposition things once one gets used to the P5JS workflow.<\/p>\n
Finding the Center<\/h2>\n
P5JS makes translations<\/em> and rotations<\/em> simple via built-in methods. To get our rectangle shape to the center of the canvas requires little more than a single call to the P5JS translate function as such:<\/p>\n
\/**\r\n * Called continuously during visualization\r\n *\/\r\nfunction draw(){\r\n\r\n    \/\/ Affects all objects after this call\r\n    translate(width \/ 2, height \/ 2);\r\n\r\n    rect(0, 0, 64, 64)\r\n    \r\n}<\/pre>\n
This instructs P5JS to move out rectangle by on the x-axis by a [positive] value of width \/ 2<\/code> and on the y-axis by a [positive] value of height \/ 2<\/code>. Keeping in mind our global constants from earlier, we know these values result in 256-pixel translations (512 \/ 2 = 256.) This results in the following image:<\/p>\n
\"p5JS
The translate function moves our rectangle along the x and y-axis by the specified values.<\/figcaption><\/figure>\n
This is getting close to having our rectangle centered but notice that it seems a little off-center\u2014albeit\u00a0much\u00a0<\/em>better overall! This is due to P5JS’s default indexing of the rectangle’s values starting with the top-leftmost pixel (the same approach as with the canvas.)<\/p>\n
Finding the Center, Again<\/h2>\n
This re-iterated topmost approach to indexing means our rectangle is off-center by +(width \/ 2)<\/code> and +(height \/ 2)<\/code> along the x and y axis, respectively. There are at least two approaches for addressing this, with one being much more elegant. Let’s start with the annoying approach first:<\/p>\n
\/\/ Subtract half of our shape's dimension from\r\n\/\/ from each axis dimension. \r\ntranslate(width \/ 2 - 32, height \/ 2 - 32);\r\n<\/pre>\n
Here we are simply decrementing the amount of our translation by half of our rectangle’s value in both the x and y-axis directions. This stops our translation short, resulting in the center of our rectangle aligning with the center of the canvas.<\/p>\n
This accomplishes our goal but means we will probably need to manage another variable (for the shape size). If we start creating actual<\/em> rectangles (and not squares) that will mean juggling two variables\u2014one for shapeHeight<\/code> and shapeWidth<\/code>. Fortunately, P5JS has a built-in method to ease our burden: rectMode().<\/code><\/p>\n
The recMode()<\/code> function can accept several arguments depending on how one chooses to approach. For centering, the two most relevant arguments are CENTER<\/code> and RADIUS<\/code>.<\/p>\n
The CENTER<\/code> argument creates a rectangle from the center out as does the RADIUS<\/code> method. However, the RADIUS<\/code> parameter specifies the rectangle to be created where the width and height are\u00a0half<\/em> of the resulting width (like creating a circle). Let’s add this to our code using the following:<\/p>\n
\/**\r\n * Called continuously during visualization\r\n *\/\r\nfunction draw(){\r\n    \/\/ Aligns the rectangle from the center\r\n    \/\/ rather than the top-left corner\r\n    rectMode(CENTER)\r\n    translate(width \/ 2, height \/ 2);\r\n    rect(0, 0, 64, 64)\r\n\r\n}<\/pre>\n
This results in the following image:<\/p>\n
\"P5JS
The rectMode(CENTER)<\/code> function aligns the center of the rectangle to the coordinates specified in our following translate()<\/code> function.<\/figcaption><\/figure>\n
This approach reflects the ease by which P5JS allows artists to focus on design rather than underlying implementation details. This contrasts other more technical libraries like vanilla JS, Three.js or other common visualization libraries. This is all one needs to know to center things easily\u2014but let’s take a quick look at how to make our rectangle look a bit more appealing as well!<\/p>\n
All Things Nice<\/h2>\n
Now that we have centered our rectangle let’s add a few aesthetic details before we wrap things up. Being a visualization<\/em> library, P5JS has an immense number of functions and utilities for creativity. Here we’ll stick to the default parameters of the rect<\/code> object and add a fill color, increase the size a bit, and add a radius on all the corners:<\/p>\n
\/**\r\n * Called continuously during visualization\r\n *\/\r\nfunction draw(){\r\n\r\n    \/\/ Center the rectangle, color, and remove stroke\r\n    rectMode(CENTER)\r\n    translate(width \/ 2, height \/ 2);\r\n    fill(\"#ff9900\")\r\n    noStroke()\r\n\r\n\r\n    \/\/ Create the rectangle\r\n    rect(0, 0, 128, 128, 32)\r\n\r\n}<\/pre>\n
Given the\u00a0functional<\/em> nature of P5JS, it’s important to note the order in which we make these specifications are important. Note that all the fiddling about with our rectangle here\u2014the centering, repositioning, fill color, and removal of the stroke\u2014all happen\u00a0before<\/em> the call to the rect()<\/code> function. This results in the following image:<\/p>\n
\"p5js
P5JS offers ease in updating visual attributes like border-radius, fill color, size, and position.<\/figcaption><\/figure>\n
Final Thoughts<\/h2>\n
P5JS is one of the most popular libraries for generative art and comes packed with high-level visualization APIs. While firmly focused on 2D visualizations this library is still packed with lots of 3D capabilities. It’s not designed to be a gaming engine<\/a> like other visualization libraries such as Three.js\u2014but that’s on purpose!<\/p>\n
The simplicity by which we have seen a canvas object, rectangle, and resulting placement created to attest to this library’s power. Whether you are randomly placing thousands of rectangles or creating complex algorithmic visualizations\u2014P5JS can help fuel your creativity.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
The P5JS library is an excellent port of the infamous Java-based Processing library. Each is used for visual designs and is the go-to tool for many generative artists. The P5JS library approaches the centering of objects a bit strange and this approach can throw beginners for a loop. P5JS has a lot of built-in functions […]<\/p>\n","protected":false},"author":2,"featured_media":2042,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[186,10],"tags":[544,543,457,192,547,545,546,542],"acf":[],"_links":{"self":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2034"}],"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=2034"}],"version-history":[{"count":3,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2034\/revisions"}],"predecessor-version":[{"id":2043,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2034\/revisions\/2043"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media\/2042"}],"wp:attachment":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media?parent=2034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/categories?post=2034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/tags?post=2034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}