My Github Noops Hexbot

This blog post talks about my entry to the Github Noops Challenge for the Hexbot API.

What the API does?

This API lets you retrieve one or many random hex codes. This relatively simple API gives a lot of scope to try various different ways of using a hex code.

What my Hexbot Noop does

I wanted to display the hex code numerically and in colour, but I also wanted to transform it into different forms.

Every 15 seconds a new colour is requested. Once requested the page will transition to the new colour.

The transitioning works by calculating the vector difference between the current and new colour. This difference vector is used to create several colours to act as transition points. Once calculated the page slowly transitions through the points until it reaches the new colour.

There are twelve colour panels displayed on the page. On the left is the colour given by the API and 5 transformed colours, RBG, BRG, BGR, GBR, and GRB.

On the right hand side there are the same 6 colour permutations, with the inverted colour given by the API.

Inversion of the colour is performed by converting the hex code into individual R, G, B components and removing their value from 255 to get the new value.

The colour of the text is decided by calculating the HSP value for each of the codes. If the value is less than (255/2) then the text will be white. If it is higher than this value the text colour will be black. This ensures that the text colour is chosen to contrast nicely with the colour.

HSP is calculated as documented by Darel Rex Finley.

You can find my Noop available on my website https://chewett.co.uk/noops/hexbot/ .

I look forward to talking about the next one, the Vexbot.