Starbeamrainbowlabs

Stardust
Blog


Archive


Mailing List Articles Atom Feed Comments Atom Feed Twitter Reddit Facebook

Tag Cloud

3d 3d printing account algorithms android announcement architecture archives arduino artificial intelligence artix assembly async audio automation backups bash batch blender blog bookmarklet booting bug hunting c sharp c++ challenge chrome os cluster code codepen coding conundrums coding conundrums evolved command line compilers compiling compression conference conferences containerisation css dailyprogrammer data analysis debugging defining ai demystification distributed computing dns docker documentation downtime electronics email embedded systems encryption es6 features ethics event experiment external first impressions freeside future game github github gist gitlab graphics guide hardware hardware meetup holiday holidays html html5 html5 canvas infrastructure interfaces internet interoperability io.js jabber jam javascript js bin labs latex learning library linux lora low level lua maintenance manjaro minetest network networking nibriboard node.js open source operating systems optimisation outreach own your code pepperminty wiki performance phd photos php pixelbot portable privacy problem solving programming problems project projects prolog protocol protocols pseudo 3d python reddit redis reference release releases rendering research resource review rust searching secrets security series list server software sorting source code control statistics storage svg systemquery 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 worldeditadditions xmpp xslt

The Big Wheel in HTML5

The Big Wheel in HTML5.

Just in time for Hull Fair to leave (yes I know they left last week), I've finished recreating the big wheel using the HTML5 Canvas. It's even got search lights and gradients.

Here's a link to the Big Wheel - Make sure that you use a recent browser (I'm using ES6 classes).

The basic pattern I used to create it was to break the scene down into different things, create a different class for each thing (except the background), and then break each thing down into its component parts. Each component part then got its own drawing function, which are then all called by the master renderer function for that class.

In order to position everything correctly, I abused context.save(), context.restore(), context.translate() and context.rotate(). Since the saving / restoring of the canvas state works like a stack, you can push as many drawing states to the stack as you like, and then pop them all off when you're done.

If anyone is interested in proper 'making of' post, please comment down below and I'll write one up!.

3D Worley Noise with noisebox

Worley Noise Recently, I've been writing a command line noise generation tool in C♯, and I've called it noisebox. Initially I found a few noise generation algorithms that other people had already implemented, so all I had to do was write an extensible interfacde on top of the code I'd found. When I came to Worley noise, I couldn't find an implementation that I could understand (I haven't taken a look at delegates properly yet), so I decided to write my own. It's still got some bugs in it, but I've decided to relase the Worley noise implementation on it's own first, and then I will tidy up a few loose ends and release the full code on GitHub (loko out for a blog post soon!).

Here's a link to a gist of the Worley noise generator: Worley.cs

The imbuilt documentation comments (what do you call them?) should give you enough information to use it, but if you get stuck post a comment below and I will try and help you out.

The code will be released under the Mozilla Public License 2.0.

This post's title include the word "3D" - but the image at the top is very much in 2D. To demonstrate the 3D-ness of the algorithm, I added the --frames and --offset options to noisebox and rendered 1000 frames of noise, and then stitched the together with ffmpeg. I've uploaded the result to youtube.

Programming 2 Coursework - PickupTheCrew

A screenshot PickupTheCrew I recently got an email from a university friend asking for my Programming 2 coursework. It gave me the idea that I should make a blog post about it, so here it is. For my Programming 2 coursework this seester I was asked to build a game to a specification called "Pickup The Crew". My implementation can be found below:

I am releasing this under the CC-BY-SA (Creative Commons Attribution Share-Alike) license. If this is not the correct license for this thing, please contact me (leave a message in the comments!) and I will change it.

You can find it here: PickUpTheCrew

To extract the above archive you will need 7-zip. Once extracted navigate to PickupTheCrew\PickupTheCrew\bin\Windows\Release and double click PickupTheCrew.exe.

If you have any problems, please comment below and I will try to help.

Find treasure with sound

The Audio Treasure hunter

Hello again!

Today I have a small minigame to show you. There is some treasure hidden in your browser window, so naturally it is your job to find it. Make sure your sound is turned on and then press <space> to hear where the treasure is. Then click somewhere on the page and listen to the sound that each location makes. Try and match the sound you hear from clicking with the sound you hear when pressing space.

Link: Audio Treasure Hunter

The sound that is made consists of two tones. The first one is tied to the horizontal position of your cursor. The left side has a low sound, and the right side has a high sound. The second tone is tied to the vertical position of your cursor. As you would expect, the bottom of your screen has a low sound and the top, a high sound.

If your are finding it too easy or hard, your can cycle through the different modes by pressing <m>. The harder modes decrease the time between the two tones and reduce the size of the treasure.

I can do it in ~3-4 clicks if I try hard enough. What is your best?

Voronoi Diagrams

This post was meant to come out on the 15th April... but I forgot to upload it to the server - I am posting now instead.

A Voronoi Diagram

Today I bring you another experiment with the HTML5 Canvas - Voronoi diagrams. A Voronoi diagram is an image where you scatter a bunch of points across an image, give each point a colour, and then colour each pixel according to which point is closest.

You can find my implementation here: Voronoi Diagram Generator

Initially I had trouble implementing this algorithm as I was trying to draw the outline of each of the cells first, but the explanation on it's Wikipedia article helped me to realise that there was a much easier way to do it :)

Next time I am trying to implement something that looks rather complicated and difficult I will definitely look for an alternative way of thinking about it.

For those of you who are interested, I used a technique called 32 bit canvas manipulation when writing this one. In a nutshell, this is a way of setting the red, green, blue, and alpha values of a pixel all at once, instead of in 4 separate operations - speeding up the whole rendering process.

SVG and CSS

Huge Purple Flowers

Recently someone mentioned that they knew someone else who had just brought a duvet cover that has "Huge purple flowers" on it. This gave me a most interesting mental picture - and I recreated in Inkscape (which has just been updated!) for you to see - the result is shown above. Note that those plants would be at least 3 times your size.

Anyway, I also learned that you can mix SVG with CSS (and Javascript, but I haven't got to playing with that yet). as a test, I created a quick square in Inkscape and then opened the resulting file up in my favourite text editor and plugged in some CSS animations. This is what I came up with:

A simple loading animation

The square above is actually black and set to have a low opacity, to it sets on the colour anything that is behind it. It is also done in percentages, so you can set the width and height of the containing <img /> tag and it should scale accordingly.

I might do some more of this in the future - it looks to me like a wonderful way to create a nice little self contained widget that you can use anywhere.

Learning Three.js four: Maze Birthday Card

A maze for a birthday card

Hooray for the fourth 3 dimensional experiment!

This one is a birthday card for someone I know and is also much more complex than the others I have done so far. I ported a maze generation algorithm that I originally wrote in Python 3 to Javascript (I also have ported it to Lua, keep a look out for a post about Lua soon!) and then set about rendering it in 3D.

The aim is to get to the centre of the maze, where some 3D(!) spinning text is waiting for you. The maze generation algorithm is not designed to have the goal in the centre of the maze, so you will find that there are multiple paths that you can take from the centre that lead to different parts of the maze. I will make a separate post about the maze generation algorithm I have written later.

The collision detection is tile based and rather complicated (for me, anyway). I am surprised that nobody has written a library for this sort of thing.....

You can play with it here: Learning Three.js four

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.

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.

Art by Mythdael