Archive

## Tag Cloud

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

## Generating word searches for fun and profit

(Above: A Word search generated with the tool below)

A little while ago I was asked about generating a wordsearch in a custom shape. I thought to myself "someone has to have built this before...", and while I was right to an extent, I couldn't find one that let you use any shape you liked.

This, of course, was unacceptable! You've probably guessed it by now, but I went ahead and wrote my own :P

While I wrote it a little while ago, I apparently never got around to posting about it on here.

In short, it works by using an image you drop into the designated area on the page as the shape the word search should take. Each pixel is a single cell of the word search - with the alpha channel representing whether or not a character is allowed to be placed there (transparent means that it can't contain a character, and opaque means that it can).

Creating such an image is simple. Personally, I recommend Piskel or GIMP for this purpose.

Once done, you can start building a wordlist in the wordlist box at the right-hand-side. It should rebuild the word search as soon as you click out of the box. If it doesn't, then you've found a bug! Please report it here.

With the word search generated, you can use the Question Sheet and Answer Sheet links to open printable versions for export.

You can find my word search generator here:

I've generated a word search of the current tags in the tag cloud on this blog too: Question Sheet [50.3KiB], Answer Sheet [285.6KiB]

The most complicated part of this was probably the logistics behind rude word removal. Thankfully, I did't have to find and maintain such a list of words, as the futility npm package does this for me, but algorithmically guaranteeing that by censoring 1 rude word another is not accidentally created in another direction is a nasty problem.

If you're interested in a more technical breakdown of one (or several!) particular aspects of this - let me know! While writing about all of it would probably make for an awfully long post, a specific aspect or two should be more manageable.

In the future, I'll probably revisit this and add additional features to it, such as the ability to restrict which directions words are placed in, for example. If you've got a suggestion of your own, open an issue (or even better, open a pull request :D)!

## Finding the distance to a (finite) line from a point in Javascript

For a project of mine (which I might post about once it's more stable), I'm going to need a way to find the distance to a point from the mouse cursor to implement an eraser. I've attempted this problem before - but it didn't exactly go to plan. To that end, I decided to implement the algorithm on its own to start with - so that I could debug it properly without all the (numerous) moving parts of the project I'm writing it for getting in the way.

As you may have guessed since you're reading this post, it actually went rather well! Using the C++ implementation on this page as a reference, it didn't take more than an hour or two to get a reasonable implementation working - and it didn't take a huge amount of time to tidy it up into an npm package for everyone to use!

My implementation uses ES6 Modules - so you may need to enable them in about:config or chrome://flags if you haven't already (don't believe the pages online that say you need Firefox / Chrome nightly - it's available in stable, just disabled by default) before taking a look at the demo, which you can find here:

Line Distance Calculator

(Click and drag to draw a line - your distance from it is shown in the top left)

The code behind it is actually quite simple - just rather full of nasty maths that will give you a headache if you try and understand it all at once (I broke it down, which helped). The library exposes multiple methods to detect a point's distance from different kinds of line - one for multi-segmented lines (which I needed in the first place), one for a single (finite) line (which the multi-segmented line employs), and one for a single infinite line - which I implemented first, using this Wikipedia article - before finding that it was buggy because it was for an infinite line (even though the article's name is apparently correct)!

I've written up a usage guide if you're interested in playing around with it yourself.

I've also got another library that I've released recently (also for Nibriboard) that simplifies multi-segmented lines instead of finding the distance to them, which I may post about about soon too!

Update: Looks like I forgot that I've already posted about the other library! You can read about it here: Line Simplification: Visvalingam's Algorithm

Got a question? Wondering why I've gone to the trouble of implementing such an algorithm? Comment below - I'd love to hear your thoughts!

## GalleryShare - Share a folder on your computer with a friend

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....

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!

## Forgotten Parallax Bicycles

In June last year (that feels weird to type), I created another one of my little HTML5 Canvas demos - this time of some hills that parallaxly scroll with a bicycle on a road. I actually made it as a (birthday?) present for someone I seem to remember - and I even released it on my website here, but I somehow seem to have forgotten to post about it here on my blog, so I'm doing so now :-)

You can find it here: Parallax Bicycle

At the time the bicycle itself in particular was incredibly fiddly to get working right if I recall correctly. The hills in the background are procedurally generated too - they are on a (seamless!) loop and repeat every so often. The seamless part was also interesting to get working right.

## Happy (belated) New Year!

Happy new year! Sorry this post is a bit late - I was busily putting the above together after my last post on browserify. Anyway, I hope that you have a peaceful and awesome new year :-)

If you look up into the sky tonight, what do you see? Hopefully something more-or-less like my latest demo (just more detailed :P). As you can see in the above picture, this time, I've created a canvas animation of a starry sky. The stars even rotate and twinkle, and are slightly dimmer near the bottom-centre of the screen.

Check it out for yourself: Starry Sky

Now all it needs are some fireworks....

For the curious the code is available on my personal git server.

## SBRL Archives: Colour Picker

Since I've been rather ill suffering the after effects of this year's flu vaccination and I haven't finished the next post I was writing for this week, I'm posting this instead :-)

A few weeks ago I went digging through my archives and I found a few gems just lying around, so I thought I'd post about one of the things I found! This particular project is from waaay back in 2013, when I hadn't started University and learnt C# (Thanks Rob :D), and was still learning Javascript.

The project in question (as you might have guessed by the title) is a simple colour picker. You can find it here:

2013 Colour Picker

I've been careful to make only minimal changes to the code before uploading it here (updating comments, switching onload out for window.addEventListener() etc.) - it's interesting to compare my programming style then to the way that I do things now, especially since I was entirely self-taught at that point in time.

Looking back now, there are several things I'd change. For one I'd remove the dependency on functions.js - an early attempt of mine to create a utility library, and rather put each method in a gist and copy the ones I need. For another I'd certainly separate the code that writes to the DOM (and update it to use a document fragment & the DOM api rather than innerHTML) from the code that performs the core logic.

It's also interesting to note that Javascript wasn't actually the language that I started with. My tale actually starts back when I was in my last year of primary school, when I discovered Game Maker by Mark Overmars, which later went on create YoYo Games (It was called Game Maker 7 back then!). After growing out of it, I found its integrated 'programming language', GML. Only after learning that did I start to investigate the technologies of the web - HTML5, CSS3, and then Javascript.

Hopefully this post has been an interesting read - I should have the next regular post ready for later this week :-)

## Making Mathematical Art with C Sharp and PPM

The other day I wanted to (for some random reason) create some stripes. Having worked out a simple algorithm that would produce some rather nice stripes given an (x, y) pixel coordinate, I set out to write a small script that would generate some stripes for me.

I discovered that it wasn't as easy as I'd thought. Lockbits confused me, and I couldn't find a good enough example to learn from. Thankfully I caught wind of a ridiculously simple image format called PPM (Portable Pixel Map) that I could use to output a byte[] array of pixel data as a valid image.

Here's a diagram I made to illustrate the format:

The format basically consists of a ascii header, followed by a raw dump of a byte[] full of pixel data. The header contains several parts:

1. The characters P6 (This is called the 'magic byte', and can be used to identify the type of content that a file contains)
2. A single whitespace (I used \s in the diagram because that is the escape code for whitespace in a javascript regular expression)
3. The width of the image, in ascii
4. Another single whitespace
5. The height of the image, in ascii
6. Another single whitespace
7. The maximum value that the red / green / blue pixels will go up to. This value will be considered 100% saturated. Normally, you'd want this to be 255.
8. Another single whitespace - not shown on the diagram (oops); usually a new line (\n).
9. The raw byte[] array of pixel data.

Once you've your pixel data as a PPM, you can then use something like imagemagick to convert it to a png with a command like mogrify -format png image.ppm or convert image.ppm image.png.

Using this method, you can generate almost anything using pure C#. Here's the code I used to generate the above stripes:

using System;
using System.IO;

public class EmptyClass
{
#region Settings

static string filename = "image.ppm";

static int width = 1500;
static int height = 400;

static int stripeWidth = width / 30;
static rgb stripeLowCol = new rgb(204, 0, 0);
static rgb stripeHighCol = new rgb(255, 51, 51);

static float multiplier = 1f;

#endregion

#region Image Generator

public static void Main()
{
byte[] pixelData = new byte[width * height * 3];
for(int x = 0; x < width; ++x)
{
for(int y = 0; y < height; ++y)
{
int currentPixel = ((y * width) + x) * 3;
pixelData[currentPixel] = redPixel(x, y);
pixelData[currentPixel + 1] = greenPixel(x, y);
pixelData[currentPixel + 2] = bluePixel(x, y);
}
}

StreamWriter destination = new StreamWriter(filename);
destination.Write("P6\n{0} {1}\n{2}\n", width, height, 255);
destination.Flush();
destination.BaseStream.Write(pixelData, 0, pixelData.Length);
destination.Close();
}

#endregion

#region Pixel value functions - edit these

public static byte redPixel(int x, int y)
{
return (byte)(((x + y) % stripeWidth < stripeWidth / 2 ? stripeLowCol.r : stripeHighCol.r) * multiplier);
}
public static byte greenPixel(int x, int y)
{
return (byte)(((x + y) % stripeWidth < stripeWidth / 2 ? stripeLowCol.g : stripeHighCol.g) * multiplier);
}
public static byte bluePixel(int x, int y)
{
return (byte)(((x + y) % stripeWidth < stripeWidth / 2 ? stripeLowCol.b : stripeHighCol.b) * multiplier);
}

#endregion
}

#region Utility Classes
class rgb
{
public byte r, g, b;
public rgb(byte inCol)
{
r = g = b = inCol;
}
public rgb(byte inR, byte inG, byte inB)
{
r = inR;
g = inG;
b = inB;
}
}
#endregion


The settings at the top control the appearance of the output. filename is the filename to write the image to, width and height set the dimensions of the image, stripeWidth sets the width in pixels of each stripe, and stripeLowCol and stripeHighCol set the colour of the different stripes. The multiplier at the end isn't actually needed, but you can use it to brighten or dim the resulting image if you want.

Not content with stripes, I played around for a bit longer and came up with this:

Above: My second attempt at mathematical art. It looks better in my native image previewer...

The above actually consists of a 3 different functions - one for each channel. Here they are:

public static byte redPixel(int x, int y)
{
return (byte)(Math.Sin(x / (width / (Math.PI * 10))) * 255 * Math.Sin(y / (height / (Math.PI*10))));
}
public static byte greenPixel(int x, int y)
{
return (byte)(Math.Sin(x / (width / (Math.PI * 5))) * 128 * Math.Sin(y / (height / (Math.PI * 5))));
}
public static byte bluePixel(int x, int y)
{
return (byte)((Math.Sin(x / (width / Math.PI)) * 52 * Math.Sin(y / (height / Math.PI))) + 25);
}

I don't actually know how it works (even though I wrote it strangely enough), but if you do know, please leave a comment down below!

Since it might be a bit difficult to see, here's an animated gif that shows each of the colour channels broken down:

Lastly, I have rendered a larger copy of the above. You can view it here (Size: 4.8MB).

Have you made some interesting mathematical art? Post it in the comments below!

## Drawing (rotating) shapes

After writing the smooth line class last week I wanted to write another one, and I decided to write a class to aid the drawing regular shapes. While writing the library I found myself with some rather nice looking rotating shapes that I thought would make a good blog post here.

Before I go any further, here's the demo:

See the Pen Rotating shapes by Starbeamrainbowlabs (@sbrl) on CodePen.

The background is a just a set of fancy css3 radial and linear gradients layered on top of one another. The interesting part is the calculating of the points in each shape - let me explain with a hexagon.

In the above, the hexagon I am drawing is shown in red, and a circle in green. In order to work out the co-ordinates for each corner (or vertex) of the hexagon, we can walk around a circle and note down our location at regular intervals (shown by the blue lines). I learnt this trick from this stack overflow answer. They can explain it much better than I probably could:

Let's assume you want to draw an N-sided polygon of radius r, centred at (0,0). Then the n vertices are given by:

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

where 0 <= n < N. Note that cos and sin here are working in radians, not degrees (this is pretty common in most programming languages).

If you want a different centre, then just add the coordinates of the centre point to each (x[n], y[n]). If you want a different orientation, you just need to add a constant angle. So the general form is:

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

By Oliver Charlesworth. Source: Stack Overflow

Anyway, here's the code I came up with:

I can't think of anything else I wanted to say, so I think I'll end this post here. Please comment down below if you have anything you want to say :)

## Easy Smooth Lines with Bezier Curves

A while ago I wrote a vector class and a bezier curve class for my 2D graphics University ACW (Assessed CourseWork). After packaging them up and posting them here, I thought it a good idea to take a step further and write a smooth line class too, to start building up a library of implementations of various different algorithms.

While I was searching for a good alternative to jsbin (it doesn't let me use tabs instead of spaces), I came across Codepen again, and finally decided to take a look. Apparently you can do quite a bit with a free account, so I signed up and posted about new my account on this blog.

Since the quality of the content on Codepen is considerably high, and you can see who has done what, I've decided to put more time into the visual effects of the things that I put up on there.

Anyway, here's a demo of my SmoothLine class in action:

See the Pen Smooth Lines by Starbeamrainbowlabs (@sbrl) on CodePen.

Click to add a point. A line will show up when you have 3 points. Here's the class itself:

Note that it depends on my earlier Vector and BezierCurve classes (links above).

The code is actually really simple. You create a new instance of the SmoothLine class, add some Vector points with the add() method (it takes both a single vector and an array of vectors), and then call the line() method when you are reading to add the SmoothLine to your drawing context path.

Here's some example code:

// Creation code
var smoothLine = new SmoothLine();
new Vector(161, 10),
new Vector(561, 111),
new Vector(890, 254),
new Vector(1088, 254),
new Vector(1152, 130),
new Vector(1186, 55),
new Vector(1230, 21)
]);

// Rendering code
context.beginPath();
// Do stuff here
smoothline.line(context, 16);
// Do stuff here
context.stroke();

Over the next few months if I can possibly manage it I want to implement a bunch of other useful algorithms in order to build up a library of code that I can just drop into a project and use. Suggestions for the next algorithm are welcome!

## Codepen

Hello!

This is a short announcement post to tell you that I've created an account on Codepen. Codepen is a site that lets you experiment with HTML, CSS and Javascript (or their compiled variants) and share your creations with the world.

I've already created something on there - I'll be blogging about that soon.

Right now though I'm rather ill though, so please don't be disappointed if I don't post right away (although I'll certainly try to get it out asap).

Here's a link to my Codepen profile page.

Art by Mythdael