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

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.

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