Starbeamrainbowlabs

Stardust
Blog


Archive

Mailing List Articles Atom Feed Comments Atom Feed Twitter Reddit Facebook

Tag Cloud

3d account algorithms announcement archives arduino artificial intelligence artix assembly async audio bash batch blog bookmarklet booting c sharp c++ challenge chrome os code codepen coding conundrums coding conundrums evolved command line compilers compiling css dailyprogrammer debugging demystification distributed computing downtime electronics email embedded systems encryption es6 features event experiment external first impressions future game github github gist graphics hardware hardware meetup holiday html html5 html5 canvas infrastructure interfaces internet io.js jabber javascript js bin labs learning library linux low level lua maintenance manjaro network networking node.js operating systems performance photos php pixelbot portable privacy programming problems project projects prolog protocol protocols pseudo 3d python reddit reference release releases resource review rust secrets security series list server software sorting source code control statistics svg technical terminal textures three thing game three.js tool tutorial tutorials twitter ubuntu university update updates upgrade version control virtualisation visual web website windows windows 10 xmpp xslt

Line Simplification: Visvalingam's Algorithm

An screenshot of my demo of my implementation of Visvalingam's Algorithm. (Above: A screenshot of the demo of my implementation of Visvalingam's line simplification algorithm. Link below!)

For a secret project of mine I've been working on since about February time (if I recall correctly), I've discovered that I could make some considerable use of a line simplification algorithm. The tricky thing is though that I need an implementation in both Javascript and C♯ - which will both return identical results.

Initially, I chose the Ramer-Douglas-Peucker Algorithm, but I ended up implementing Visvalingam's Algorithm instead, as I encountered issues with calculating the shortest distance from a point to a line reliably along with other algorithmic problems that I determined weren't worth the time to fix.

Visvalingam's algorithm is actually really simple. Suppose we take a line:

A line with 6 points in it.

If we create a sliding window with a width of 3 and slide it along the list of points, then we get a set of triangles. To simplify the line, we can calculate the area of each of these triangles, and remove the centre point of the triangle with the smallest area.

The same line with the triangles highlighted.

The same line with a point removed.

Then we can continue removing the centre point of the smallest triangle until we reach a triangle with an area that's above a threshold we set - and this is Visvalingam's Algorithm.

Though I haven't written the C♯ version yet, I've completed the Javascript implementation - and created a demo for you to play around with! Here's a link:

Visvalingam's Algorithm Demo

Note that you'll need to enable ES6 Module support in your browser to get it to work, as I've used ES6 Modules whilst building it.

In Firefox this can be done by setting dom.moduleScripts.enabled to true in about:config, and in chrome by visiting chrome://flags/#enable-javascript-harmony (sorry, hyperlinks don't work for chrome:// urls IIRC!), enabling it, and restarting your browser.

It's open-source, of course - under the Mozilla Public License 2.0. You can find my code on GitHub - and pull requests are welcome :D

Finally, I've released it as an npm package. If you aren't aware of npm, it's really cool. It's the primary package manager for Javascript - I've written a blog post on this here.

Once I've written the C♯ version I'll have another bash at trying to get Nuget to package it. I think I know what the issue has been so far - so hopefully it works this time! If it does I'll blog about that too.

Found this useful? Think it's cool? Let me know in the comments below!

GalleryShare - Share a folder on your computer with a friend

The front page of GalleryShare

Just yesterday, I was browsing my repositories on both my personal git server (git.starbeamrainbowlabs.com) and GitHub, and I stumbled across a program I wrote a while ago and then completely forgot about. It lets you share a directory of files and pictures via http. The picture above is from the wallpapers folder on my laptop here!

On further inspection, I discovered that it didn't require too much work to tidy it up for a release, so I spent an hour or two tidying up a few things, and here is version 0.1! My, it's been far too long since I've blogged about a release of something on here....

If you want to share things yourself, you can download the latest version over here.

In the future, I might add an optional graphical interface to make it even easier for people to use :D

It's actually quite simple. It's powered by the System.Net.HttpServer class (so Windows users will either need to install mono or give it administrative privileges, which is a real shame) since I originally wrote it before I put the GlidingSquirrel together, though it does have it's own routing system of my own devising.

The pages it serves themselves are actually plain XML files, which are rendered with XSLT by the user's browser. This keeps the content that GalleryShare has to dynamically generate simple, and has the added benefit that it can be generated with C&csharp;'s System.Xml.XmlWriter class. It's practically a browser-side templating system, which also has the added benefit of providing an XML-based API for others to consume.

Thumbnails are generated with C♯'s inbuilt System.Drawing image handling functions - I did initially want to use Magick.NET (C♯ bindings for the awesome ImageMagick library) has the System.Drawing classes appear to be a bit funny about the images they'll accept, but Linux support doesn't seem to have landed just yet.

Are you interested in a more in-depth look at how GalleryShare renders thumbnails, or outputs XML? Perhaps the XSLT has caught your eye. Let me know in the comments below!

Further Reading

Soundbox: A Super Simple Sound Library

A sound waveform.

I little while ago I wrote the first version of Soundbox. I forgot to post about it earlier, so I am posting about it now.

Soundbox is a tiny Javascript library I wrote after adding sound to another of my projects via Audio(). I found that you could only play a given sound once, unless you set the currentTime property to 0. I knew that I would forget this later so I wrote a library to do this for me.

The entire library is 1.04kb unminified, and a tiny 0.64kb(!) when minified.

I have uploaded the source to a github repository here: sbrl/soundbox. You can also find usage information there in the readme.

Here are the direct links to the latest master versions:

Happy Christmas!

A Random Snowflake

Happy Christmas!

Posts will resume in the new year.

I have a random snowflake generator for you that I wrote a while ago - my current project is taking longer than I thought :D

Edit: It can be found here Random Snowflake Generator).

Pepperminty Wiki: A Wiki in a box

Recently I found a post on reddit by someone called am2064 about a 'one file wiki' called 'Minty Wiki' written in PHP. I took a look and whilie it was cool, I found it to have some bugs in it. I also found that it needed an extra PHP file to parse markdown to make it work properly. Still, I thought it was a cool idea so I decided to have a go myself.

694 lines of code later, I had something that worked and I thought that I might post about here on my blog. It is by no means finished, but it is in a somewhat usable (hopefully secure) state. I decided that markdown was the most logical choice for editing pages, so I modified Slimdown (by Johnny Broadway) to add internal link parsing and tweaked the bold/italics code to be mroe like Gmail's chat amongst other things. I first found Slimdown when looking for a lightweight markdown parser for comments on this blog.

I named my creation 'Pepperminty Wiki' (after the wiki that gave me the idea). It currently allows you to create and edit pages (although you need access to the server's files to delete pages currently), list all current pages, and view a printable version of a page. It even has a 'search' box that allows you to type in the name of the page you want to view. The search box has an HTML5 <datalist> to provide the autocomplete functionality.

To use it yourself, simply download index.php in the github repository below and put it in a folder on your server. Make sure that you have enabled write access to the folder though, or else you will start to see to rather strange error messages :)

To configure it, simply open the file you downloaded with your favourite text editor. You will find the settings (along with an explanation of each) at the top of the file. Make sure that you change the usernames and passwords!

You can find it on github here: Pepperminty Wiki

A (uneditable) version can be found here: Demo

Soon I will write up a technical post about my efforts to improve the performance of Pepperminty Wiki.

HTML5 Canvas Clouds

This week I have some clouds for you, rendered via the HTML5 <canvas>. I wrote these in early 2013. I have not had a lot of time this week, but something cool is coming soon :)

The clouds themselves are stored in an array, and are composed of a random number of circles. This array is then iterated over 60 times a second and rendered using the HTML5 <canvas>. setInterval() is used to schedule the drawing of the frames, but I really should go back and upgrade that to requestAnimationFrame().

Link: HTML5 Canvas Clouds

Security update to atom.gen.php

Since this website gets a lot of spam (ongoing investigations are currently in force in order to analyse the spambots' patterns, a post will be made here when they have been stopped) and this website also has a comments feed powered by atom.gen.php, I have had a chance to test atom.gen.php out in the wild with real data.

I discovered, unfortunately, that the script didn't handle invalid utf-8 and non printable characters very well, and this lead to the feed getting broken because XML doesn't like certain specific characters. This has now been fixed.

If you handle user input and use atom.gen.php to turn it into a feed, you will want to grab an updated copy of the script (quick link here) and overwrite your previous copy in order to fix this.

As well as fixing that, I also added a new option, $usecdata. This controls whether the <content> tag's contents should be wrapped in <![CDATA[...]]>. This should add extra protection again html / javascript injection attacks breaking your feeds. It defaults to false, though, so you need to manually enable it by setting it to true.

The reference has been updated accordingly.

If you find another bug, please comment below. You will recieve full credit at the top of the file (especially if you provide a fix!).

Parallax Stars

Since I forgot to post last wednesday, I will post twice this week :)

A while ago I played around with creating a parallax effect with stars on an HTML5 Canvas. After tiding up the original code I wrote a little bit, I have decided to release it in this website. It will not, however do well as a screensaver due to the high CPU / GPU usage it induces because of the inefficiencies in the code.

It can be found here: parallax scrolling stars

I will (hopefully) write a technical post in the near future that will explain how it works, including an explanation behind the high CPU / GPU usage.

A Simpler Way to Generate XML in PHP

In an effort to make XML generation simpler in PHP, I have written another PHP class, called simpexmlwriter.

Much like atom.gen.php, everything you need is all packaged up into one file - simply download and require simplexmlwriter.php and you are ready to start. Links can be found near the bottom of this post.

The same system is in place for contributions and feature requests: post a comment below to either request a feature or link to a modified version of the code and I will consider either merging your changes or adding the feature that you request.

It also has a 'reference' - just like atom.gen.php. A link can be found near the bottom of this post.

If you are still reading this and you are not interested in code, there will be a few things that you may be interesting in appearing on this website soon.

simplexmlwriter.php

simplexmlwriter.php reference

Generating Atom Feeds

This week I am releasing atom.gen.php, the PHP script that powers this blog's Atom feed (which you can find here!).

This PHP class has been designed to be simple and easy to use (apart from the addentry() function which needs tidying up :D), and quick to get started with. I have also created a basic example showing you how to use it and a 'reference' that covers all of the functions and properties that are available for use. Links to both the script and the 'reference' can be found at the bottom of this post.

Although I have tested it, it is entirely possible that you will come across a bug. If you do, please post about in the comments below.

You may also find that atom.gen.php does not do everything that you want it to. In this case, you have two options: either post a comment down below and I will consider adding the feature you request, or adding the feature yourself. If you add the feature or fix a bug yourself, please post a comment down below along with a link to the modified code and I will merge your changes and give you full credit for all the work you have done.

atom.gen.php

atom.gen.php reference

Art by Mythdael