Generating Patchwork design pattern using javascript

Patchwork or “pieced work” is a form of needlework used mostly in quilts that involves sewing together pieces of fabric into a larger design. The larger design is usually based on repeating patterns built up with different fabric geometric shapes (which can be different colors).

Photo by Raul Cacho Oses on Unsplash

Did you ever think about how these designs are being generated? Today we are going to generate our own geometric patchwork using p5.js. One good reason for me to choose p5.js is, it just abstracts away the low-level implementation and helps the developer focus only on the design part and has better documentation.

Let’s get started

In order to proceed, we need to set up the environment. I’m using codepen.io loaded with p5.js.

In our JavaScript file, we will add two functions that will be used in pretty much ever p5 script: setup and draw. These functions will be called by the p5.js library.setup() function will be called only once and draw() function will be executed continuously until noLoop()is called. Since we are generating the static pattern we will be calling noLoop() inside setup() .

Here in setup() we create a brand new canvas element with size 500px. Also, you can notice that we calling noLoop() inside setup. So our draw() function will be executed only once.

Now moving on to the implementation ofdraw() function.

Here colorPalettes contains the theme gallery for our patterns. num stores the number of tiles needs to be generated. We call noStroke() as we don’t need an outline here. tileLen stores the length of the tile and shuffle() shuffles the array elements. We first fill the tile with random color from the palette. We then create a triangle shape using triangle() function with random color and position (x, y) using random() function.

Voila! we just created a patchwork design pattern with just a few lines of code. You can fork my project in CodePen and try to implement it yourself with a different pattern by tweaking the rendering logic. This work is not that difficult but definitely a kick starter for you into creative coding. Look around you there are plenty of design patterns available to implement from nature.

Happy coding!

Useful links:

• Creating generative art with Javascript — by Kate Compton during JSConf Iceland 2018
• Creative Coding on Github — most useful links on your way to becoming a generative artist
• Openprocessing — place where you can find and share works using P5.js and Processing

Thanks for reading through 🙌🏼.