Starbeamrainbowlabs

Stardust
Blog


Archive

Mailing List Articles Atom Feed Comments Atom Feed Twitter

Tag Cloud

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

Forgotten Parallax Bicycles

The 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!

A starry sky, randomly generated by the program below.

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.

My colour picker from 2013.

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

Some red stripes.

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:

Another mathematical picture.

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:

Illusion Boxes Decoded

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!

Procedural Castle Generation

See the Pen Procedural Castle Generator by Starbeamrainbowlabs (@sbrl) on CodePen.

(Full screen)

The subreddit /r/proceduralgeneration has recently set up monthly challenges, and after missing the first one I decided to enter the second one. February's challenge was to generate random castles procedurally. The challenge was a lot of fun to take part in - my entry can be seen above.

I've published the code behind my entry on Github, too if you're interested in checking it out.

There were 15 other entries apart from mine. Here are all the entries next to each other:

All the entries

(Full size image [15MB])

I liked zapetch's because although it's 2D, the generated castles are very varied and they look nice and simple. Moosekk's was great too - The towers look complicated and it has buildings and trees too. Comment down below with your favourites. Why did you like them? Voting is now open - please go and vote here. Your votes will decide who gets to decide on the next challenge!

How it works

Since I can't write a post on something that I've done without explaining just a little bit about how it works, I've written up a quick overview below. If anyone is interested in a longer writeup or any specific part of the generator, please comment down below and I will get back to you as soon as I can.

The generator works by picking a random regular shape, and then randomly altering the location of each of the resulting corners a little bit. After that the towers (and their stairs) and the keep are generated, and the flags are placed. Since the wind only flows in one direction, all the flags all face the same direction.

The moat is generated as a closed smooth line, with it's control points generated by taking the corners of the castle and moving them a set distance away from the main keep. Since the moat originally was way too wide for the drawbridge (whose parameters don't actually have anything to do with the moat at all!), I added a pair of extra control points to the moat's smooth line to bring it closer to the 2 towers that sit either side of the entrance (the moat was built intentionally, right?).

Originally I was going to generate random buildings inside the castle and draw paths between them, the towers, the keep, and the entrance, but the maths behind that got rather complicated and I didn't have time to wrap my head around it. I was also going to generate random people in the castle too, but again I didn't have time for this. I'll probably come back to this at a later date and work on these features.

If this challenge looks interesting, then /r/proceduralgeneration are hosting another challenge this month - this time the challenge is to procedurally generate a side-scrolling platformer.

Drawing (rotating) shapes

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.

Shape drawing explained.

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 Answerer Avatar 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

The smooth line class in action.

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

Codepen Logo

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

My fractal shape generator.

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

A visualisation of depth first search in Prolog.

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!

Art by Mythdael