Hey there! 👋 My name is Engin Arslan. I am the founder and developer of ProceduralArt. With ProceduralArt you can choose from a selection of procedural artworks to create an infinitely* customizable prints on your favorite products. *(well not really infinite but a very large number 😊).

Let’s talk a bit about what procedural art is. A procedural artwork is an artwork that is created with the help of an algorithmic process. The procedural artworks on this store are all created using a programming language called JavaScript and with the help of a programming library called p5.js.

JavaScript is a general-purpose programming language that has the advantage of being able to run in the browser environment. Because of this, almost every website that you visit online is powered by JavaScript. It is one of the most widely used programming languages out there. p5.js is a programming library, meaning it is a package of specialized features that gives additional power to the programming language that it belongs to. In this case, that programming language is JavaScript. Note that p5.js doesn’t allow you to do anything that is not already possible with the language. It rather makes those operations so much easier to perform. p5.js is a programming library that makes creating interactive and animated visualizations on the web easy.

There are thousands of programming libraries out there. In fact, this website is built using 30 of those libraries. Those libraries in turn use other libraries, which could be using other libraries. In the end, this project ended up using more than a thousand libraries! If it wasn’t for these libraries it would be really hard to develop any complex project in a reasonable amount of time. Libraries make the software development process easier by providing ready-built solutions to common problems.

Let’s get back to p5.js. p5.js allows us to create visualizations in an easy manner. We are using the functionality provided by the p5.js library to draw shapes to the screen. We then use different kinds of algorithms to create algorithmic artwork and expose the parameters that are shaping the artwork to you. Using these parameters you are then able to shape the artwork in any way that you like.

Here is an example of a simple procedural artwork below. This code draws a rectangular shape throughout the size of the canvas from left to right, with shapes being separated from each other in an increasing amount. These rectangles get darker from left to right. It has predefined values for the color of the rectangles, the background, width of the rectangles, the separation amount of rectangles and at which rate they are separating. In most other print stores this is what you would get. An artwork with predefined values.

ProceduralArt allows you to customize your preferred artwork to your liking. We define a set of parameters that you can adjust to modify the artwork. Here is the same artwork from above but this time parameterized for a few of its properties.

I hope you enjoy ProceduralArt! Feel free to explore the procedural artworks that we currently feature. If you have a question, an idea for an artwok, or would like to collaborate feel free to reach out at codingforvisuallearners at gmail dot com.