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

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

• GalleryShare on GitHub
• The latest release of GalleryShare on GitHub
• XSLT Tutorial
• ImageMagick
• Magick.NET

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();
smoothline.add(new Vector(138, 330));
this.smoothLine.add([
    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.

A first look a fractals - Shapes

Recently I took a little look at fractals, and in order to get my head around the recursive nature of drawing fractals, I wrote a small demo that draws a fractal like thing with shapes. It starts with a triangle, and draws a square at each corner. Then at the corner of each square, it draws a pentagon, and so the pattern continues. I thought it looked interesting, so I decided to share it here.

You can find it here: fractal shapes

You can also find it under the labs section of my homepage.

If anyone is interested in a more detailed explanation of how it works, I'd be happy to write a blog post about it. Comment below if you would like one.

Prolog Visualisation Tool

Recently, I've been finding that Prolog is getting rather more complicated, and that the traces that I keep doing are getting longer and longer. This is making it rather difficult to understand what's going on, and so in response to this I am building the Prolog Visualisation Tool(kit).

Basically, the Prolog Visualisation Tool(kit) is a tool that, given a Prolog trace, produces a diagram of the trace in question. The image at the top of this post is diagram produced by the tool for a depth first search.

You can find it live now on GitHub Pages.

It is built with mermaid, a really cool diagramming library by knsv, which converts some custom graph syntax to an svg.

The next step will be to animate it, but I haven't got that far yet. Expect an update soon!