Introduction

This project is part of my study at Pratt Institute. In Professor Matthew Miller‘s course Programing for User Interface, for the first time I tried to make some functioning applictions with JavaScript.

Get Ready

My intention was to make a light-weight interface that help artists and designers create central symmetrical geomatric patterns with one repeating polygon, and users should have the full control of this pattern, and it should be able to export as an SVG file, which can be further edited in softwares like Adobe Illustrator or Coral Draw.

JavaScript is a great tool to create interactive projects. However, before I start coding, I need to figure out the facts behind the scene and find the right tools to complete it. I splited this project into three main chunks: draw SVG (Drawing), add parameter controls (Controling), and Export the SVG (Downloading).

Drawing

In order to define a pattern as I planned, we first need to define the polygon with the following parameters:

• amount of the polygon’s sides (corners/points)
• the size of the polygon is (its radius)
• the angle that the polygon tilts

Then I will need to define how this polygon create the pattern with two more parameters:

• the amount of  the repeating polygons
• the distance that these polygons are from the center of symmetry

Lastly I want to give this pattern a color set.

• The web color code

Controling

The parameters should be able to be manipulated by users, and it should be able to work both instinctively and accurately. Therefore it should have two features:

• Integer value input (an input box)
• Range input (a slide bar)

Downloading

Users might want to download the pattern they have generated, which requires a download function that allows them to export a reusable SVG file:

• get the SVG codes
• download the codes as an SVG file

JavaScript Libraries Used

In order to achieve the listed requests, two JavaScript librarys has been used.

Svg.js provides a variety of classes that help people draw, manipulate and animate SVG, while I used Vue.js to create the input functions.

Some Details

Draw a Polygon with SVG.js

The fundamental task of this project is to draw a polygon in SVG. SVG.js defines the polygon element as “a closed shape consisting of a set of connected straight line segments”. Therefore, it is necessary to find out the coordinates of each vertices of the polygon.

I found these two formulas on StackOverflow, provided by Oliver Charlesworth.

x[n] = r * cos(2*pi*n/N)
y[n] = r * sin(2*pi*n/N)

which computes x(n) and y (n) coordinates of an N-sided polygon of radius r, centred at (0,0).

According to this formula, I used

px = this.shapeSize / 2 * Math.cos(2*Math.PI * j / this.polygonSideNumber)

py = this.shapeSize / 2 * Math.sin(2*Math.PI * j / this.polygonSideNumber)

to caculate the value of (px, py) and use .push method to add it to the svg.draw function. Similarly,

let shapeX = this.drawRadius * Math.cos(2*Math.PI * i / this.shapeNumber) + this.cx – this.shapeSize / 2

let shapeY = this.drawRadius * Math.sin(2*Math.PI * i / this.shapeNumber) + this.cy – this.shapeSize / 2

computes the polygon center of each polygon, and with SVG.js’s .move and .rotate function the polygon can be modified with different position and angle.

CSS mixBlendMode

In order to create a variety of patterns I wanted to make the shapes semi-transparent and create different shades of colors, pretty much like the “multiply blend mode” in Photoshop. So I found that CSS has a property mix-blend-mode that can achieve this effect. However, I can only change the nesting