Random Line Generator

Another repost, though a bit more fresh – it was originally posted in September 2007.

JS Random Line Generator

The random line generator uses the HTML5 canvas element to draw a series of connected lines, with a large variety of options. You can choose where to start drawing, the initial angle, the line lengths, how far the lines can turn left or right, the number of lines, the line colors, the line width, and the background color. In addition, if you are using a modern browser that supports canvas’s toDataURL() method, you can save the image to your computer (otherwise you’ll likely have to Print Screen it).

One nifty thing you can do with the line colors is cycle through a gradient. By using a color fade generator and selecting “show HTML codes” then the color sequence, you can copy and paste the list into the line colors box. Additionally, it accepts code in HTML (font/color, and span/style), so if somebody has a nice gradient on a website, chances are you can copy/paste the source and use it.

Here’s an example image that I created:

Random Line Example

Random line with black-white gradient

For people with older browsers, there is a PHP version with slightly reduced functionality. It has a max color limit of 30, and no line width setting. It does allow you to turn anti-aliasing on and off, though. The source for the PHP version can be found here.

This entry was posted in JavaScript and tagged , . Bookmark the permalink.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>