AlgoArt.org is a digital platform that brings together Artists and Technologists to create algorithmically generated visual designs and artworks. This repository contains a simplified and light-weight version of our Creator Studio that you can use to develop your own drawing algorithms and generate your own unique artworks!

Try out our public demo @ https://algoart.org/studio.html

Artwork Video

Talk & Tutorial

Drawing Algorithms: We designed a simple framework for creating drawing algorithms. These algorithms, coded in JavaScript, are built from procedural processes that draw lines and basic shapes onto an HTML Canvas. Our example procedural processes were inspired by mathematical concepts, natural phenomena, and artistic trends.

Algorithm Structure: Each algorithm has two JavaScript files. One file is for the drawing procedure and the other is for parameter configuration. The drawing procedure is declared as a dictionary object and includes functions called start, pause, reset, initialize, and drawOneStep.

Web Interface: The web interface is used to run your drawing algorithms. Using the web interface, a user can start, pause, or reset a drawing algorithm. In addition, a user can also clear the canvas and save the current state of the digital canvas as an image file.

This is a sample drawing algorithm that is meant for viewers to understand the programming framework that is used to create a new drawing algorithm. We encourage you to clone our repo and try modifying this code to build your own drawing algorithm. If you do so, please consider sharing your resulting artworks with us and submit a pull request!

Example Drawing:

This drawing program takes in over 30 different parameters representing line length, line thickness, rotation angles, color variations, background color blending, line sparsity, and whether intersecting lines are allowed. Based on these parameters and a random number generator, the drawing program generates different kinds of repeated geometric patterns. All of the generated patterns are drawn line by line on a digital canvas.

Example Drawing:

Blog Article: https://michaelwehar.wordpress.com/2022/06/16/algorithmically-generated-visual-designs-geometric-patterns/

This algorithm, called "Vines", operates by drawing a variety of shapes across a canvas following certain kinds of paths. These paths that the vines follow are determined by various mathematical formulas. In particular, there are four kinds of paths: a random path, a linear path, a spiral path, and a path determined by a sine function.

Example Drawing:

Blog Article: https://michaelwehar.wordpress.com/2022/07/23/algorithmically-generated-visual-designs-5-vines/

Blog Articles

• Wrapping Paper by Alyssa Zhang
• Geometric Patterns by Michael Wehar
• Overlapping Tiles by Michael Wehar
• Spiderwebs by Maya Newman-Toker
• Vines by Alyssa Zhang
• Fractals by Maya Newman-Toker and Michael Wehar
• 70's Funk by Michael Wehar and Alyssa Zhang
• Game of Life by John Mancini and Michael Wehar
• Trees by Michael Wehar

More Articles

• AI Generated Digital Painting from Start to Finish by Michael Wehar

More Links

• Reviewer Sign-up Form for Computer Generated Artwork

Actively Contributing

• Xingyu (Kevin) Dong
• Xinxin Li
• Michael Wehar

Past Contributors

• John Mancini
• Maya Newman-Toker
• Alyssa Zhang

Special thanks to all friends and collaborators who offered help!

The code in this repository is made available under MIT License.

This platform was developed using the following libraries which are available under MIT License.

• JQuery
• Bootstrap
• Bootstrap Icons

We are excited to start collaborations and build new partnerships!

Send an email to Michael Wehar or submit a pull request.