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

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.

Welcome!

Welcome to starbeamrainbowlabs.com.

I am a self taught programmer who knows PHP, HTML, CSS, Javascript, and a bit of Python. I first learnt to program with Game Maker, which can be found here.

I will hopefully post about things I have learnt, found and made here.

---

Please note that this website is still under construction.