Generative Art Using Paper JS

Karan Mhatre
Analytics Vidhya
Published in
3 min readApr 18, 2020

View demo here

Find the code on GitHub here

Paper JS basics

Paper JS is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. Meaning, an easy way to make elements on HTML5 canvas.

I’d suggest starting with the Paper JS Tutorials to get an understanding of the various components that they use such as Points, Sizes, Rectangles, and Circles.

Art Inspiration

Armed with sufficient knowledge about art and technology, let’s get programming.

Components

The Semi-Circle

Not semi-circles, but that’s what I’m calling it.

The Oval

The Lines Pattern

Lines
Make them shaky

The Circular Path

Dynamic selection

Art = Math.random()

Random number generation is your best friend when making algorithmically generated artworks.

Number of Elements

Randomly select a number between 1–5 to decide the number of elements to be displayed. Also, select which the type of element (Circle, Semi-circle, lines pattern, or circular path)

Colour

Colour is chosen from a pre-defined palette. I’m choosing one colour per element.

Colour Palette

Size

Need to make sure that the size isn’t too big, or too small. After testing I’ve tested on some optimum values for this.

Position

A random position is selected for each element that is within the bounds of the canvas.

Rotation

A random rotation is applied to each each, expect the Lines Pattern. Rotation value is selected from [90, 180, -90, -180].

Putting them all together

  1. Decide how many elements we want to display,
  2. For each element, select a size, position, colour, and rotation.
  3. Add the element on the canvas.

Feel free to test-drive the algorithm on the demo page. Send me your artworks at me@karanmhatre.com.

Fork it on Github.

--

--