Monday, 23. September 2002
Colour Modification Parameters

Colours. On Antville, you have a background, title, text, small text, link, active link, and visited link colour respectively. If you edit the style sheet, you can invent new classes and make up even more colours. You can have seperate colours for questions, answers, tips, alerts, dreams or stories. You can define your very own colour scheme.

Now what if your visitors could choose from one of several ready-made colour schemes and pick the one that fits their mood best? What if you had an image with a whole rainbow in it and your visitors could click anywhere to make the whole site that colour? Phew, lots of work, you might think, you'd have to define all those colour schemes.

Well, no, you don't have to. You can use colour modification parameters. You can tell your Antville site that links should be the same colour as your text, just a little brighter and a bit more saturated, more tinted. You might figure the background could be the inverse colour of the text, so there's a good contrast, but as it turns out that that doesn't look too good, you specify that it shouldn't be as saturated, but paler, almost grey. And finally you set your titles to be like the text, just a bit darker and with a slightly different hue, a little greener. That's exactly what you did when you set up your *.antville colour scheme? Sure, but if you tell the system about those considerations, you can change your text colour, and everythign else will adapt accordingly. Woo-hoo!

Of course, you don't have to make everything depend on just one colour. But if you do, it could look something like this:

four different colour schemes
The only difference between these images, preferences-wise, is the site.bgcolor parameter.

Well, okay, I lied. You can't do that with your vanilla Antville yet. But you can use the macros I made today on your own installation, and maybe the nice Antville developers will merge my code into the codebase and the site?

So far I just extended the renderColor function in renderfunctions.js a little. It now can take and process different parameters, like shiftHue or invertLuminance or setSaturation. When you want to enable a macro that outputs a colour to modify the colour in that way, all you have to do is pass on the parameters. For example, in site/macros.js we have:

function textcolor_macro(param) {
  if ( == "editor")
          "textcolor", param));
And all you have to do is extend the renderColor function call a bit, like that:
    renderColor(this.textcolor, param);
That's it! The new site.renderColor macro also changed only a bit. If there's a parameter, the colour is modified. Before:
function renderColor(c) {
function renderColor(c, param) {
  if (param) {
    c = modifyCol(c, param);

So obviously all the interresting stuff is going on in the function modifyCol. I uploaded the source code plus documentation: colourmod

(text/plain, 18 KB)

It belongs into global/renderFunctions.js. The function renderColor must be replaced, obviously, the rest must be inserted/appended. Functions that convert RGB values to HSL values and back will be globally available; maybe someone can use them for an HSL colour picker or something else.

As I said, all I did so far is extended the renderColor function. It would be nice if the preferences dialog would allow to set those new parameters, and say, for example, that visited links should be like normal links, but just a bit darker.

And it would be nice if someone extended to functionality on images. Imagine that the colour scheme of the whole site still consistently changes colour like a chameleon (as shown above) if there are colourful images in it. They'd all adapt. W00t!

I hope this is useful for the Antville developers and lets a few DIY-Antvillers have some fun.

N.B. I put this story on my own site because it's long and I didn't want to take up so much space on the project.antville frontpage. You can leave a comment here if you want to ask me about my favourite colour scheme or if you want to explain exactly why I am an idiot. But it you want to discuss the code described here, please do so at the project.antville story.

Online for 7654 days
Last modified: 5/6/11, 2:32 PM
Youre not logged in ... Login
... Home
... Tags

February 2023
Recent updates
sesquidirectional whereas the second largest
cause of lost productivity is fiddling with printer drivers.
by nex (5/6/11, 2:32 PM)
Niilo Nönnönnöö, HETU: 715517 The
odd thing about brain washing is that the less of...
by nex (1/14/08, 1:55 PM)
Rocky Mountain Alpenglow Religion is
the logic of idiots.
by nex (12/31/07, 8:14 PM)
It's The Ninja's Nunchucks. I
can't tell you why, since I haven't found out what...
by nex (12/7/07, 12:22 AM)
Instant Personality Processor The 7
signs of ugly hair: It is ugly It is repulsive...
by nex (11/17/07, 12:56 AM)
Abusus Non Tollit Usum Dirty
as in beer, not as in speech.
by nex (11/13/07, 4:19 AM)
Morning After Small Talk I
don't want you to be no slave. I don't want...
by nex (10/8/07, 5:18 PM)
Frustrated Total Internal Reflection Does
'woking' also encompass the situation when you just opened a...
by nex (9/16/07, 2:55 PM)
Bible Wiki Magic is anything
you can see working without knowing how it works. Lack...
by nex (9/4/07, 12:27 PM)
Literate Programming for Robots You
can judge the quality of a random number generator by...
by nex (8/9/07, 8:31 AM)
Quantum Harmonic Oscillator A decrepit
lightbulb can sound like a paging harddisk.
by nex (7/3/07, 3:48 AM)
The Wrath of Grapes Why
would they go after the most badass animals around here?...
by nex (6/29/07, 5:30 AM)
Split Cycle Offset Optimization Technique
I'm a wimp, so please don't hurt me, but do...
by nex (6/13/07, 10:18 PM)
Bearing Straight If I have
seen a little farther, it is by standing on a...
by nex (6/11/07, 5:49 PM)
Running from Sharks Dungeon crawlers
don't have filler, they are filler.
by nex (5/30/07, 10:36 AM)
Arcology There's a fine line
between looking likeable and looking attractive, and Jack is nowhere...
by nex (5/3/07, 9:25 AM)
Shitamachi Every universe, when viewed
as a whole, is a zero-sum game.
by nex (4/18/07, 7:52 AM)
Leakage Leo, copper hasn't been
an 'advanced material' since the Bronze Age.
by nex (4/12/07, 3:54 AM)
Fallible Guillotine Yes, it is
organised. In the sense in which anarchy is a form...
by nex (4/6/07, 12:09 AM)
Crispy Goo I once collected
ephemera, but it got old really quickly.
by nex (3/15/07, 5:22 PM)
Simple, Yet Defective You can't
hold it for more than 24 hours without charging it...
by nex (3/11/07, 11:20 PM)
It's just something I say
Peter's earlier projects were great, but a bit boring. The...
by nex (3/6/07, 2:52 PM)
Innocent Ivan Caution: Tiger poison
baits in this area. Cook bananas before consumption.
by nex (3/1/07, 6:58 AM)
Corn Dawg Plus, he can
do pair programming by himself.
by nex (2/22/07, 12:21 AM)
Hedcut A free market in
the states? I think it would be a good idea.
by nex (2/14/07, 7:31 PM)

RSS feed

Made with Antville
Helma Object Publisher