JavaScript Art: Triangles

You can see abstract triangles art everywhere these days. They are on banners, wallpapers, decorative pillows, fliers, tattoos, book covers… Just put a bunch of triangles and some colors and it will look great.

download (6)

To create this abstract art we need functions for two things: dots and colors.

First, we need function to create dots which will be used for creating triangles. Easiest way is to create some dots by random. We gonna need width and height of canvas and number of dots and we can create array of random dots that will fit on canvas.

var width = 800;
var height = 600;
var no = 10;
var dots = [];

for (var i = 0; i < no; i++) {
    dots.push([Math.random() * width, Math.random() * height]);
}

After creating dots we’ll use Delaunay algorithm to connect dots to triangles. From wikipedia:

In mathematics and computational geometry, a Delaunay triangulation for a set P of points in a plane is a triangulation DT(P) such that no point in P is inside the circumcircle of any triangle in DT(P). Delaunay triangulations maximize the minimum angle of all the angles of the triangles in the triangulation; they tend to avoid skinny triangles. The triangulation is named after Boris Delaunay for his work on this topic from 1934.

There is a nice JavaScript implementation for that done by ironwallaby. That module and algorithm are core of what we gonna do, everything else is just a makeup.

var triangles = Delaunay.triangulate(dots);

Ok, we have array of triangles. Format is a little bit strange, it’s a array where groups of three elements in order presents dots of one triangle, but that’s not a big deal. We’ll use canvas to draw triangles, so you’ll need canvas element in your html file, something like this:

<canvas id="triglici"></canvas>

Function for drawing triangles is pretty simple:

var canvas = document.getElementById('triglici');
canvas.width = width;
canvas.height = height;

var ctx = canvas.getContext('2d');

for (var i = 0; i < triangles.length; i += 3) {
    ctx.beginPath();
    ctx.moveTo(dots[triangles[i]][0], dots[triangles[i]][1]);
    ctx.lineTo(dots[triangles[i + 1]][0], dots[triangles[i + 1]][1]);
    ctx.lineTo(dots[triangles[i + 2]][0], dots[triangles[i + 2]][1]);
    ctx.closePath();
    ctx.fillStyle = '#fff';
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    ctx.fill();
}

You can play with lineWidth and strokeStyle but end results should be similar to this:

download-(1)

That looks nice, but it will look better if we add some color. We’ll use random color for each triangle. Same function as before with small changes will make your triangles colorful.

for (var i = 0; i < triangles.length; i += 3) {
    ctx.beginPath();
    ctx.moveTo(dots[triangles[i]][0], dots[triangles[i]][1]);
    ctx.lineTo(dots[triangles[i + 1]][0], dots[triangles[i + 1]][1]);
    ctx.lineTo(dots[triangles[i + 2]][0], dots[triangles[i + 2]][1]);

    var color = 'rgba(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ', 1)';

    ctx.closePath();
    ctx.fillStyle = color;
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.fill();
}

Result will vary, but it should be something similar to this:

download-(2)

All you have to do now is to play with algorithms for creating dots and colors. You can see some of my experiments on hackaday.io

Also, you can get code from this post here or play online with this tool.

  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]
  • Bigshark – larger buttons on Grooveshark (0)
    GrooveShark is one of the web services which I’m using on daily basis. Actually, I have one computer which I use only to play music from my GrooveShark playlists, while I’m sitting on […]
  • Just Random Color (0)
    Some time ago I was working on app where for each category we had to assign random color in case that user didn't choose one. A few day ago I needed to generate random color again. Instead […]
  • Animated Progress Bar in 4 lines of jQuery (48)
    Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is […]
  • Fancy Transitions Featured Gallery for WordPress (62)
    ftFeatured is Wordpress plugin for creating image gallery with fancy transition effects of featured posts. You can choose between three types of transition effects: curtain, wave and […]

no comments on "JavaScript Art: Triangles"

Leave a Reply

Your email address will not be published. Required fields are marked *