pandashoppe

[pandashoppe]

Averaging Colours

I’m currently working on a project which needs me to get the mean average of different colours. I tried different ways of getting the average from rgb/hex and hsl.

My initial reaction was to add up each of the rgb values and divide by number of colours. However this is not strictly correct: the value of each pixel of color is stored as the square root of the value, and our monitors display it as the square of that value. See this post, and reddit discussion.

So the average value would more accurately be the sum of the square of each of the r,g,b values divided by the number of colours.

But what if I used hsl values instead of hex or rgb? Simply adding the two hue values together to get the average gives an incorrect value as hue is, in short, a point in a colour wheel. Each hue needs to be converted to cartesian coordinates, take the mean, and get the arctangent. The saturation and lightness/luminosity are percentages, so their average can be simply obtained.

I found that taking the average of the hue gives a colour that’s different to taking the average of the rgb.

Adding these two colours:

+

Gives you:

with RGB/hex, without squaring:

with RGB/hex, with squaring:

with HSL:

As you can see the HSL average (taken by calculating the mean of circular quantities), is closer to the 'incorrect' mean of RGB/hex, without taking the square of each r,g,b component. For this reason I decided against using HSL (also it's less common for web).

Another issue I had is that the more colours were added together, the more it averaged out to a sort of brownish shade. It made more visual sense to choose two colours (eg. red and yellow) so each result can be represented on a red-yellow gradient, rather than as a shade of brown.

For reference, see this page with colours and formulas used.

[pandashoppe]

Tumblr Tag Cloud Tutorial

 I wanted a tag cloud for my personal Tumblr but couldn’t find a good one. There seem to be three main options: Heather Rivers’ which didn’t load for me, drunkonschadenfreude’s which doesn’t link to your tag pages, and Pearl Trees’, but you have to join them to use it. The tutorials I found mostly revolve around using jQuery or require you to host your own Tumblr blog and use PHP or whatever, so I ended up writing my own little script.

I was so happy with it I made a tag cloud generator you can use. The generator is pretty self explanatory. I figured the easiest way to use it would be to stick your blog name and API Key in a form, and there’s some basic customisation for sorting, the minimum tag frequency you want to include in your tag cloud, etc. You essentially copy and paste the code for the generated tag cloud into your page. I’ve put mine in the sidebar. 

However it might not be quite perfect for everyone, so I decided to write a little tutorial so you could stick the code in your own blog and customise it for your own use.

The code is simple and pretty self explanatory, and you can really just copy it and replace the capitalised text with the correct values for you.

What annoyed me about many of the guides/tutorials on the internet that tell you how to make a Tumblr tag cloud is that they tend to use jQuery.. Here I use fetch to fetch your blog posts, which is really easy and straightforward.

         fetch('https://api.tumblr.com/v2/blog/YOURTUMBLRNAME.tumblr.com/posts?api_key=YOURTUMBLRAPIKEY').then(response =>{  

...and now you can probably also see why I’ve made it so you copy and paste the generated HTML on the Tag Cloud Generator instead of the javascript itself - your Tumblr API Key is exposed. I assume that you don’t host your own Tumblr blog and just want to casually stick some code in it. What you can do if you don’t want to keep going to the Tag Cloud Generator is set up a basic HTML file like this on your laptop or phone or whatever and just run it whenever you need to update your tag cloud. Also remember that Tumblr’s imposed a rate limit, so you probably don’t want to just stick the javascript on your page anyway.

Anyway.

After it fetches your blog posts and all is good...

not good

if (response.status != 200) { console.log('error', response.status) return }

good

response.json().then(function(data) { const {posts} = data.response

...it goes through all your posts and pushes all of your tags into a giant array allTags...

const allTags = [] posts.forEach(function (post, index) { allTags.push(...post.tags) })

...and then counts all the unique tags.

const tagCount = allTags.reduce((acc, tag) => { acc[tag] = (acc[tag] || 0)+1 return acc }, {})

Then it sorts your tags, in this case in descending order, but at this point you can sort it in other ways too: in ascending order, randomly, alphabetically, etc.

const sortedTags = Object.keys(tagCount) .map((key) => [key, tagCount[key]]) .sort((a,b) => b[1]-a[1])

This point is probably where you’ll want to customise the most. The tag list is filtered to show only the tags above a minimum number of posts (replace MINIMUMENTRIES with the number you want), but you can also filter it to exclude tags with certain values (eg. if all your text-based posts are tagged as ‘text’ and that isn’t a useful tag for your readers, you can filter out value[0] == ‘text’). 

let fontsize const tagList = sortedTags .filter(value => value[1] > MINIMUMENTRIES)

A common feature of tag clouds is that tags that recur more are often in a bigger, bolder font. I’ve split my own tags into three groups and applied different classes on each: a default ‘middle’ group with an average font size, infrequent tags in a small font and the most used tags in the largest font. Replace UPPERLIMIT and LOWERLIMIT with the values you want, or split the tags into more groups. Then style the classes with css.

.map(value => { if (value[1] > UPPERLIMIT) { fontsize = 'font3' } else if (value[1] < LOWERLIMIT) { fontsize = 'font1' } else { fontsize = 'font2' }

The tag list is then returned as a list, which you can style. I’ve gone for a cluster of tags without line breaks in between each list item.

return '<li><a href=http://YOURTUMBLRNAME.tumblr.com/tagged/'+value[0]+' class='+fontsize+'>'+value[0]+' ['+value[1]+']</a></li>' }) 

Last of all, the tag cloud is wrapped up in an unordered list in a div with the ID tagcloud, and gets written into a div (’#generatedTags’ in this example), but obviously you can write it into whatever div you want, and you could have an ordered list too.

document.getElementById('generatedTags').innerHTML = <div id=tagcloud><ul>"+tagList.join(' ')+"</ul></div>" }) }) }

Don’t forget to call the script!

As you can see in this tutorial the Tumblr API is pretty easy to use. If you have a look at the Tumblr API docs, you’ll see it’s pretty easy to branch off this tag cloud generator example and pimp your blog in other ways with data from the Tumblr API.

Have fun! Feel free to ask me any questions you might have.

View full code here:

[pandashoppe]

Hello

Welcome to the Pandashop blog.