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 electronics embedded systems encryption es6 features event experiment external first impressions future game github github gist graphics hardware 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 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

Website Updates

Yesterday I tweaked and updated the website. Here are the thing that I changed:

  • Finished adding the jigsaw puzzle pieces to the homepage
  • Added navigation aid to the top left of website on widescreens
  • Added footer to blog index page
  • Moved prism to the new /libraries/ folder
  • Added a smooth scrolling script to the navlist in the top left
  • Updated the todo list
  • Removed spam from blog
  • Added extra antispam measure: Not allowing email field to be filled in since it is not currently used yet anyway
  • Changed the highlighted selection colour to rgba(54, 0, 255, 0.21)

If you discover any issues while using the website, please leave a comment below. Antispam measures for this blog in particular seem to cause issues - in which case you can send bug reports to bugs at starbeamrainbowlabs dot com.

More changes will be coming in the near future, such as an Atom feed for comments and an email notification system for replies to your comments.

Update: The Atom feed for comments has been created! You can find it over at feed.comments.php.

An Animated GIF Renderer

The online tool I am releasing today is another one of the projects I did a while ago (December 2013 in this case). The difference here is that someone asked me to build it for them. The tool allows you to stich a number of still images into an animated gif.

Having an online version of the tool on a server that I own seems like a good idea (so I can keep it up to date) - so I am releasing it on this site for you to use.

It uses a javascript library called gif.js to render the still images as an animated gif. Please bear in mind that all the rendering is done on your computer! Nothing is uploaded to the server at all. If you refresh the page, everything will be reset.

A description of the options and known issues can be found below. If you just want to skip all that and play around with it for yourself, please follow this link:

Animated GIF Renderer

Options

A description of all the options available can be found below:

Option Description
Repeats The number of repeats. -1 = no repeat, 0 = repeat forever.
Default Delay The default delay each still image should be given when first dragged into the tool. Remember to set this before you drag all your images in to save time!
Frames per second An alternative method of setting the default delay. Simply enter the number of frame you want to show per second.
Workers* The number of threads to use to render the animated gif. For optimum performace enter the number of cpu cores you have. This will speed up the rendering process for large gifs.
Quality* The quality of the resultant gif. In the code this is referred to as the pixel sample interval. I don't really understand this setting myself - if you do, please leave a comment below and I will update both this post and the tool itself.

A '*' indicates an advanced setting.

Known issues

  • The 'x' button to remove an image is buggy. - Fixed! A new image removal system has been implemented to fix this bug.
  • The size of the rendered gif i snot updated when images are removed - Fixed! The maximum image dimensions are now recalculated when an image is removed.
  • Found another bug? Report it below.

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

Saving and Restoring <inputs />

I have made a pair of Javascript bookmarklets that allow you to save and load the contents of input boxes and textareas on any webpage.

To use them, simply drag the 2 links below to your bookmarks (bar), and click "Save Inputs" when you wish to save the contents of all the inputs, and click "Restore Inputs" and paste in the code you received from the "Save Inputs" bookmarklet to restore the contents of the input boxes on any given page.

Save Inputs

Restore Inputs

Source Code

The (pretty printed and decoded) source code for the two bookmarklets can be found below:

Save Inputs

(function () {
	var inputs = document.querySelectorAll("input, textarea"),
	savedata = [];
	
	for (var i = 0; i < inputs.length; i++)
	{
		savedata.push(inputs[i].value);
	}
	console.log(savedata);
	prompt("< input /  > and < textarea > savedata :", JSON.stringify(savedata));
})();

Restore Inputs

(function () {
	var savedata = JSON.parse(prompt("Savedata: ", "")),
	inputs = document.querySelectorAll("input, textarea");
	for (var i = 0; i < savedata.length; i++)
	{
		inputs[i].value = savedata[i];
	}
})();

Known Limitations

  • The savedata code that the "Save Inputs" bookmarlet produces is not copied to the clipboard
  • Strange things happen if you try to restore the contents of a set of input boxes from a savedata code from another page
  • The script breaks if the input boxes on a page get changed

If you have a better version of these bookmarklets, please leave a comment below.

Found a spelling mistake? Got suggestion? Leave a comment below. Suggestions for improvement are always appreciated.

An (Almost) Pure CSS Spotlight

I made a spotlight demonstration using (almost) pure CSS!

A little bit of javascript is used to make the spotlight follow the mouse. You can also click through the layer in from of everything that makes the spotlight work because of the pointer-events: none; CSS styling rule.

It can be found below.

The (editable!) source code can be found here. A full screen version of the demo above can be found here.

Lightsout and Syntax Highlighting

Hello!

I am releasing a javascript bookmarklet that allows you to select an element of any web page and put the rest of the page behind a screen.

To use it, simply drag the link below to your bookmarks bar and then click the bookmark when you want to use it. After it loads, you can then select the element of the page you want to focus, indicated by the blue border. You can also press 'A' to attempt to autoselect a flash object, while avoiding ads.

Lightsout

If you can't get the bookmarklet to load by dragging the link above to your bookmarks, copy and paste the following code into a new bookmark:

javascript: (function () { var lightsoutloading = document.createElement('div');lightsoutloading.id='SBRLlightsoutloadingmessagecontainer'; lightsoutloading.innerHTML = '<div id=\'SBRLlightsoutloadingmessage\' style=\'width:300px;height:auto;position:fixed;top:0;left:0;background:rgba(200, 200, 200, 0.8);border-radius:5px;z-index:2147483647;transition:all 0.5s;margin:10px;padding:10px;border:none;opacity:1.0;text-transform:none;min-height:0;min-width:0;font-faamily:sans-serif;bottom:auto;right:auto;font-size:12px;text-indent:0;line-height:normal;color: black;text-decoration:none;clip:auto;font-style:normal;font-variant:normal;font-weight:normal;max-height:none;max-width:none;direction:ltr;word-spacing:normal;visibility:visible;text-shadow:none;\'>Loading lightsout...</div>'; document.body.appendChild(lightsoutloading); var jsCode = document.createElement('script');jsCode.setAttribute('src', 'https://starbeamrainbowlabs.com/bookmarklets/lightsout/lightsout.js');document.body.appendChild(jsCode);}()););

Since this is a javascript bookmarklet, there are probably websites that this doesn't work with. If you stumble across one of these websites, leave a comment below and I will look into it.

I am also trialing a new syntax highlighter along with this post! It is possible that the site may not work as expected during this trial period.

Edit: Testing complete! This blog now has code syntax highlighting enabled thanks to PrismJS.

How the trianglfier works

This technical post will be all about how the recently released Image Trianglfier works.

The visible <img /> element that shows the original image has a function called drawimage() attached to it's load event such that every time a new image is selected, it updates the first of two invisible <canvas> elements:

The above code takes the newly loaded image, calculates new dimensions for the image if either side of the image exceeds 1000 pixels, and draws it to the imagecache canvas.

When the render button is clicked, a second <canvas> with an id of main is put to work:

After grabbing a few references to the main canvas (the one we want to draw the image on) and the imagecache canvas (the one with the scaled original image on it), we then extract the pixeldata of the imagecache canvas on line #5 of the gist so that we can use it to out colours for each triangle later.

We then enter a for loop and start drawing triangles. A triangle is drawn by picking 3 random points within a box with a diameter set by the trianglesize setting, and setting these to be the 3 vertices. The central point of the box is picked on lines #17 and #18, and the 3 points are picked on lines #20 through #33.

The colour of the triangle is also set at this point by averaging the colour in a box centred on the central point we picked on lines #17 and #18. This boxes size is set by the coloursampleradius setting. The algorithm is passed the pixeldata we extracted earlier, along with the canvas size, the coordinates of the centralpoint, and the box's diameter and calculates the average by simply adding up all the colour components of each pixel in the box and dividing it by the number pixels it added up the components of. This algorithm is not particularly optimised and is one of the main causes for the hanging that occurs during the rendering process. This algorithm can be found here.

After the colour and point coordinate calculations, all that is left to do is draw the triangle itself. This is done on lines #36 to #42.

After all the triangles have been drawn, the rendering is complete. The finished image is then converted into a jpeg image is displayed on the right hand side.

Got a question? Spotted a mistake? Leave a comment below.

Suggestions for improvement are always appreciated

Image Trianglifier

A sample trianglfied image Along with the new site design, I have released a small project of mine - an image trianglifier. Although it has a weird name (that is even more difficult to spell!), it's function is quite simple: It draws a customisable number of triangles on an image of your choice.

You can find it here.

To use it, simply drag an image onto the page or click "Choose file". When the image has loaded, your image will appear in the left. Click the render button to trianglify your image. The image size is limited to 1000 pixels due to a bug that crashes chrome when you try to render large canvases to a file. If anybody has any idea how to fix this, please leave a comment below.

You can also change the settings at the right hand side in the dat.gui interface. Each setting is explained beifly below:

Property Description
iterations The number of triangles drawn.
trianglesize The size of the bounding box in which each triangle is drawn.
coloursampleradius The size of the area from which an average colour is picked for each triangle. Warning: Setting this to a high value can cause lots of lag!
render Render the image and display the result to the right.

More information about each setting can be found by clicking "Click to toggle description" below the blue box. Still don't have an answer to your question? Leave a comment below.

Suggestions for improvement are always appreciated.

Art by Mythdael