{"id":2049,"date":"2021-09-30T15:07:12","date_gmt":"2021-09-30T19:07:12","guid":{"rendered":"https:\/\/www.alpharithms.com\/?p=2049"},"modified":"2021-09-30T17:11:08","modified_gmt":"2021-09-30T21:11:08","slug":"how-to-draw-a-squiggly-line-in-p5js-or-processing","status":"publish","type":"post","link":"https:\/\/www.alpharithms.com\/how-to-draw-a-squiggly-line-in-p5js-or-processing-120715\/","title":{"rendered":"How to Draw a Squiggly Line in P5JS (or Processing)"},"content":{"rendered":"

Processing is a powerful visualization tool for creating generative art. It’s a native Java library but has been ported to Javascript, Android, and even iOs. Among the many tools, Processing offers artists is the ability to generate lines of all shapes, sizes, and colors.<\/p>\n

Generating lines is so easy in Processing that one can almost do it by accident. However, generating squiggly lines can be a bit more of a challenge. In this short tutorial, we’ll use the JavaScript implementation of Processing\u2014P5JS\u2014to explore the process of creating a squiggly line.<\/p>\n

Introduction<\/h2>\n

P5JS is a visualization library designed with 2D generative designers in mind. It is often noted as the tool of choice among generative artists from communities such as the Generative<\/em> subreddit<\/a> or popular curated communities such as ArtBlocks<\/a> (yes, NFTs.)<\/p>\n

P5JS is free to use, easy to set up, and very beginner-friendly. The complexity of P5JS is mostly<\/em> characterized by how an artist chooses to use it. To follow along, you can download the latest P5JS distribution or use the free online editor. Both are available from the official p5JS website here<\/a>.<\/p>\n

Step 1: Drawing a Straight Line<\/h2>\n

Processing comes with a number of built-in functions to draw basic forms\u2014a line<\/em> being one of them. The line function takes 4 arguments\u20142 for the (x, y) coordinates of the starting point and 2 for the (x, y) coordinates of the endpoint.<\/p>\n

This function is also overloaded to allow for use of a third coordinate\u2014the z position\u2014of both the starting and ending point if desired. See the documentation<\/a> for more on that.<\/p>\n

To get this party started, let’s set up a basic P5JS scene and select two arbitrary positions from which to draw our line. This is accomplished in the following code:<\/p>\n

\/\/ Define endpoint variables\r\nlet x1; \r\nlet x2; \r\nlet y1;\r\nlet y2;\r\n\r\n\r\n\/\/ Implement the processing setup function\r\n\/\/ called once during initialization.\r\nfunction setup() {\r\n  \r\n  \/\/ Processing \r\n  createCanvas(512, 512);\r\n  \r\n  \/\/ Create start and end points\r\n  x1 = width \/ 2 - width \/ 4;\r\n  x2 = width \/ 2 + width \/ 4;\r\n  y1 = height \/ 2 - height \/ 4;\r\n  y2 = height \/2 + height \/ 4;\r\n  \r\n\r\n}\r\n\r\n\r\n\/\/ Implement the processing function called\r\n\/\/ on each frame.\r\nfunction draw() {\r\n  \r\n  \/\/ Draw background each frame\r\n  background(\"#efefef\");\r\n  \r\n  \/\/ Create a line\r\n  line(x1, y1, x2, y2);\r\n}<\/pre>\n
Here we’ve implemented the two core functions of processing: setup and draw. The first defines our canvas size and the positions of our starting and ending points are assigned values. The latter is called every frame (60 per second by default, in most cases<\/a>) and is the main logic of our processing script. This code produces the following image (with notations added for clarification.)<\/p>\n
\"step
A single line has been drawn from point (x1, y1) to point (x2, y2)<\/figcaption><\/figure>\n
This represents the core approach to drawing a line in processing. The line thickness, color, and fill (depending on what type of line) can all be customized using built-in processing functions. For now, we’re just going to keep cruising with the defaults on our way to downtown squiggletown.<\/p>\n
Step 1 – Draw a Multi-Segment Line<\/h2>\n
A defining trait of the squiggly line is that it has many subsections. That is; where our vanilla line above has a single section between two endpoints, a squiggly line has many sections between endpoints. Before we go any further down this rabbit hole it will prove beneficial to consider the anatomy of a squiggly line:<\/p>\n
\"straight
Compared to a straight line, the squiggly line has many more points to affect its shape between endpoints.<\/figcaption><\/figure>\n
It’s clear the path towards squiggletown is paved in subpoints. The question now becomes\u00a0how<\/em>\u00a0might we define those points on a line?<\/em> The trick here is not to define many subpoints along a single line but rather to define many line segments that all interconnect (a.k.a. a polyline.) Let’s consider the following approach:<\/p>\n
\/\/ Define some global variables\r\nlet segments;\r\nlet length;\r\nlet x;\r\nlet y;\r\n\r\n\/\/ Define the intitialization function\r\nfunction setup() {\r\n  createCanvas(512, 512);\r\n  \r\n  \/\/ Constrain our lines to 3\/4 canvas size\r\n  length = width * 0.75;\r\n  \r\n  \/\/ Define segments\r\n  segments = 6;\r\n  \r\n  \/\/ Define starting points\r\n  x = length \/ segments;\r\n  y = height * 0.5;  \r\n}\r\n\r\n\/\/ Define the main rendering function\r\nfunction draw() {\r\n  \r\n  \/\/ Redraw the background each frame\r\n  background(\"#efefef\");\r\n  \r\n  \r\n  \/\/ Loop through creating lines for each \r\n  \/\/ segment.\r\n  for (let i = 0; i < segments; i++){\r\n    \r\n    \/\/ Get the next x point\r\n    let next = x + length \/ segments;\r\n    \r\n    \/\/ Draw the line from current\r\n    \/\/ point to next point\r\n    stroke('black');\r\n    strokeWeight(8);\r\n    line(x, y, next, y);\r\n    \r\n    \/\/ Draw the current point\r\n    push()\r\n    strokeWeight(25)\r\n    stroke(\"#ff9900\")\r\n    point(x, y)\r\n    pop()\r\n    \r\n    \/\/ Update x position\r\n    x = next;\r\n    \r\n  }\r\n  \r\n  \/\/ Draw the last point\r\n  strokeWeight(25)\r\n  stroke(\"#ff9900\")\r\n  point(x, y)\r\n\r\n  \r\n  \/\/ Draw the line once and stop\r\n  noLoop();\r\n}<\/pre>\n
There are several new additions to our code here. Let’s consider them piece by piece:<\/p>\n
    \n
  1. A length and segment variable\n
      \n
    1. These constrain our line’s width to less than the total canvas area and define how many subsections it will contain.<\/li>\n<\/ol>\n<\/li>\n
    2. A for loop\n
        \n
      1. The loop generates a new x position to define each segment of our line. It starts at 0 + width * .75 (the left edge of our scaled-down line) and continues until width – (width * .75) pixels (the right edge of our scaled-down line).<\/li>\n<\/ol>\n<\/li>\n
      2. The use of stroke<\/code> and strokeWeight<\/code> functions\n
          \n
        1. These are built-in functions that define how the next elements will be rendered. Here, we’re rendering our line in a “black” color with a weight of 8.<\/li>\n<\/ol>\n<\/li>\n
        2. A point object\n
            \n
          1. We’re also drawing a point, with a unique color and weight value, to visualize where our line segments are beginning and ending. This is completely optional and included only to help visualize what’s going on.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
            These steps have produced a straight line with 6 segments. While not yet squiggly\u2014our line is certainly reflecting the skeletal form of something that\u00a0could<\/em> squiggle. The following image is produced when running our script (with notes added):<\/p>\n
            \"line
            Each segment of our line is shown with the start and end points drawn in gold dots.<\/figcaption><\/figure>\n
            We aren’t squiggling yet\u2014but we’re surely getting closer! The next step is to add a bit of motion to our line such that the points of its inner segments are moved from the boring positions located in the center of the canvas.<\/p>\n
            Step 3: Add Some Movement<\/h2>\n
            A squiggly line can be understood as having three or more points such that a perfectly straight line cannot be drawn in a way that intersects all three. This is kind of like the opposite goal of linear regression analysis<\/a>.<\/p>\n
            With this level of variance, a squiggle can start to reveal itself when each line is connected. To get this effect, we’ll apply a random offset on the Y-axis of each of our points. We can achieve this by replacing our existing line creation code with the following:<\/p>\n
            function draw() {\r\n  \r\n  \/\/ Redraw the background each frame\r\n  background(\"#efefef\");\r\n  \r\n  \r\n  \/\/ Loop through creating line segments\r\n  for (let i = 0; i < segments; i++){\r\n    \r\n    \/\/ Get the next x point\r\n    let next = x + length \/ segments;\r\n\r\n    \/\/ Get random y\r\n    yRand = random(-(height * 0.25), height * 0.25); \/\/\u00a0<------------\u00a0New\r\n\r\n    \/\/ Draw Lines\r\n    stroke('black');\r\n    strokeWeight(8);\r\n    \/\/ To current point\r\n    line(x, y, next, y + yRand); \r\n \r\n    \/\/ To next point\r\n    line(x + length\/ segments, y, next, y + yRand) \/\/ <------------ New\r\n\r\n\r\n    \/\/ Draw points\r\n    push()\r\n    strokeWeight(25)\r\n    stroke(\"#ff9900\")\r\n    \r\n    \/\/ Draw the current point\r\n    point(x, y)\r\n    \r\n    \/\/ Draw the next point\r\n    point(x + length \/ segments, y + yRand) \/\/\u00a0<------------\u00a0New\r\n    pop()\r\n\r\n    \/\/ Update x position\r\n    x = next;\r\n    \r\n  }\r\n  \r\n  \/\/ Draw the last point\r\n  strokeWeight(25)\r\n  stroke(\"#ff9900\")\r\n  point(x, y)\r\n  \r\n  \/\/ Draw the line once and stop\r\n  noLoop();\r\n}<\/pre>\n
            Here we’ve added three new changes that will generate what will reveal itself as the beginnings of a squiggle. These are, in order:<\/p>\n
              \n
            1. A randomized value yRand by which to move our points from their previous positions<\/li>\n
            2. An additional line segment;<\/li>\n
            3. An additional point;<\/li>\n<\/ol>\n
              With these additions, we can see our code begin to give life to a more organic form reflected in the image below:<\/p>\n
              \"p5js
              The points are offset in the Y-Axis by a randomly-generated value<\/figcaption><\/figure>\n
              This is nice, but there’s an issue that needs ironing out. In our attempt to add motion we’ve inadvertently created a sort of mean-reversion tendency. Notice how, after each progression to a higher or lower Y-value, our line returns to the middle of the image (vertically speaking.) Let’s make the following adjustments in our main for loop body:<\/p>\n
              \/\/ Loop through creating line segments\r\nfor (let i = 0; i < segments; i++){\r\n\r\n\/\/ Get the next x point\r\nlet next = x + length \/ segments;\r\n\r\n\/\/ Get random y\r\nyRand = random(-(height * 0.125), height * 0.125); \/\/ <---------- Lower the yRand range a little\r\n\r\n\/\/ Draw Lines\r\nstroke('black');\r\nstrokeWeight(8);\r\n\/\/ \/\/ To current point\r\nline(x, y, next, y += yRand); \/\/ <----------- hard increment here\r\n\/\/ To next point\r\nline(x + length\/ segments, y, next, y)\r\n\r\n\r\n\/\/ Draw points\r\npush()\r\nstrokeWeight(25)\r\nstroke(\"#ff9900\")\r\n\r\n\/\/ Draw the current point\r\npoint(x, y - yRand) \/\/ <----------- avoid mean reversion\r\n\r\n\/\/ Draw the next point\r\npoint(x + length \/ segments, y)\r\npop()\r\n\r\n\/\/ Update x position\r\nx = next;\r\n\r\n}<\/pre>\n
              With these three small changes, the following image is produced:<\/p>\n
              \"p5js
              Removing the excess in points, we create a much smoother line that is starting to really resemble a squiggle.<\/figcaption><\/figure>\n
              Step 4: Make it Squigglier<\/h2>\n
              Our squiggle is coming along\u2014now reflecting some twists and turns that one might expect. However, it still feels a bit rigid. Squiggles are, after all, free spirits that aren’t bound by the need to get from point A to point B in the fastest route. Squiggles like to\u00a0squiggle<\/em>.<\/p>\n
              To this point<\/em>, we’ve been drawing things using the line<\/code> and point<\/code> functions\u2014with the point<\/code> function really only for visualization. By leveraging the beginShape<\/code> and cuveVertex<\/code> functions we can make things much more smooth. For this, we’ll need to alter our code considerably. Here’s an updated version of our draw() function:<\/p>\n
              function draw() {\r\n  \r\n  \/\/ Redraw the background each frame\r\n  background(\"#efefef\");\r\n  \r\n  \/\/ Loop through creating line segments\r\n  beginShape()\r\n  noFill()\r\n  \r\n  \/\/ Add the first point\r\n  stroke('black')\r\n  strokeWeight(5)\r\n  curveVertex(x, y)\r\n  \r\n  \/\/ Save points for visualization later\r\n  let points = [{x: x, y: y}] \/\/<----- Add initial point here\r\n  \r\n  \/\/ Draw line\r\n  for (let i = 0; i < segments; i++){\r\n    \r\n    \/\/ Get random y\r\n    yRand = random(-(height * 0.125), height * 0.125);\r\n    \r\n    \/\/ Add point to curve\r\n    curveVertex(x += length \/ segments, y += yRand);\r\n    \r\n    \/\/ Save point\r\n    points.push({x: x, y: y})\r\n    \r\n  }\r\n  endShape()\r\n  \r\n  \/\/ Draw points for visualization\r\n  stroke('#ff9900')\r\n  strokeWeight(10)\r\n  points.push({x: x, y: y})\r\n  points.forEach(function(p){\r\n    point(p.x, p.y)\r\n  })\r\n  \r\n  \/\/ Draw the line once and stop\r\n  noLoop();\r\n}<\/pre>\n
              We have consolidated some lines for brevity and changed the way we’re approaching the creation of the yellow points (used only for visualization) to be drawn outside the for loop<\/code>. This approach calls the beginShape()<\/code> function, then calls the curveVertex()<\/code> function for each point on the line, the finishes by calling the endShape()<\/code> function. Each line segment drawn in this approach gets the styling defined prior to the beginShape()<\/code>. Here’s the image that is produced:<\/p>\n
              \"missing
              This line is certainly looking squigglier but now we have an issue with missing segments.<\/figcaption><\/figure>\n
              Now, this<\/em> is venturing into the land of squiggle! Here we see our line segments being smoothed between points that result in a curve<\/em> rather than a\u00a0line<\/em>. However, we now face a different issue: we’re missing the first and last segments!<\/p>\n
              Step 5: Make it Whole Again<\/h2>\n
              Processing (and P5JS as well) use a Catmull-Ram algorithm to calculate curves. By this approach, the first and last points in a series are used to “guide” the beginning and end of curves rather than actively partake in their rendering. Let’s consider the official documentation<\/a> for the curveVertex()<\/code> function:<\/p>\n
              The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve. A minimum of four points is required to draw a tiny curve between the second and third points. Adding a fifth point with curveVertex() will draw the curve between the second, third, and fourth points.<\/em><\/p>\n
              This describes a scenario in which all curves could effectively be missing their first and last segments\u2014just as ours above is suffering. However, let’s consider what might happen when adding duplicates of both our start and end points. Consider the following code:<\/p>\n
              function draw():\r\n\r\n    ...\r\n\r\n    \/\/ Add the first point\r\n    ...\r\n    curveVertex(x, y);\r\n    curveVertex(x, y); \/\/ <---------- add an additional start point here\r\n\r\n    ...\r\n\r\n    for (let i = 0; i < segments; i++){\r\n    ...\r\n    };\r\n    curveVertex(x, y); \/\/ <---------- add an additional end point here\r\n    endShape();\r\n\r\n    ...<\/pre>\n
              This essentially uses the first point to “guide the beginning” of the curve to the first point and then a duplicate end point to “guide” the end of the curve as well. It seems a bit nonsensical honestly but it gets us where we want to be\u2014front and center for the squiggliest show in town! Here’s our image now:<\/p>\n
              \"p5js
              Our squiggle is now complete having both a start and end segment reunited with the larger squiggle body.<\/figcaption><\/figure>\n
              Now\u00a0that<\/em> is a squiggly line! It has taken quite a few steps to get here but at long last we have discovered the path to create a multi-segment line (curve) using Processing.<\/p>\n
              Note<\/strong>: A complete version of the finalized script developed in this post is available via Github<\/a>.<\/em><\/p>\n
              Important Considerations<\/h2>\n
              Now that we are masters of the squiggly line it might be tempting to run off into the wild and start squiggling all over everything. This would be a mistake\u2014there are some common mishaps that we may fall prey to.<\/p>\n
              Here is a list of some of the most common gotchas when it comes to using the beginShape()<\/code> and curveVertex()<\/code> functions in processing and\/or P5JS:<\/p>\n
                \n
              1. The curveVertex()<\/code> function can only be used where no argument for shape type is given to the beginShape()<\/code> function. This includes LINES, TRIANGLES, QUADS, and others.<\/li>\n
              2. The vertex()<\/code> function can be used in conjunction with the curveVertex()<\/code> so long as a single call to curveVertex()<\/code> is present within a beginShape()<\/code> –> endShape()<\/code> segment. The only upside here is syntactic brevity\u2014a poor trade-off in this case for the confusion it could create.<\/li>\n
              3. Using the CLOSE<\/code> keyword as an argument for the endShape()<\/code> function will draw a line between the first and last points. Oddly enough, this doesn’t cause any issue whether there are duplicate start and endpoints or not\u2014the resulting line is the same.<\/li>\n<\/ol>\n
                Final Thoughts<\/h2>\n
                Processing is among the most popular high-level design libraries out there. Whether you choose the original Java library, the P5JS JavaScript implementation, or go mobile-native with the android or iOs versions\u2014processing brings a lot to the table. When getting started with processing it can be frustrating learning how this library approaches certain tasks. Drawing a simple squiggly line, for example, can result in a process much more complicated than one might expect.<\/p>\n
                Taking the time to learn how processing’s functions are designs, intended to be used, and the benefits they provide is paramount to success with this library. Some of the most popular, renowned, and inspiring images of generative art on the planet have been produced with this software. For those seeking further inspiration, examples, or learning paths I suggest starting at the official Processing.org website<\/a> where there are ample examples, tutorials, and recommendations for books.<\/p>\n","protected":false},"excerpt":{"rendered":"
                Processing is a powerful visualization tool for creating generative art. It’s a native Java library but has been ported to Javascript, Android, and even iOs. Among the many tools, Processing offers artists is the ability to generate lines of all shapes, sizes, and colors. Generating lines is so easy in Processing that one can almost […]<\/p>\n","protected":false},"author":2,"featured_media":2058,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[10],"tags":[543,549,546,20,479,542,548],"acf":[],"_links":{"self":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2049"}],"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=2049"}],"version-history":[{"count":4,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2049\/revisions"}],"predecessor-version":[{"id":2064,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2049\/revisions\/2064"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media\/2058"}],"wp:attachment":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media?parent=2049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/categories?post=2049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/tags?post=2049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}