CodingQuick code review

 

Press Ctrl+Enter to quickly submit your post
Quick Reply  
 
 
  
 From:  Mikee  
 To:  ALL
35180.1 
Gonna post a bit of code on my companies blog... but wanna make sure there's no obvious mistakes in it before I do. If anyone gets the time and knows a bit of javascript, would they might having a quick look over it? I'm not expecting it to be perfect, just 'not shit'.

The basis behind it is that you can do this:

javascript code:
 
var color = new Hex(000000).toRGB(); // outputs 0,0,0
 


and you can string converts together, so you can do this..

javascript code:
 
var color = new Hex(‘cc0000’).toRGB().toCMYK().toCIELab();
 



Each color object also has a “websafe()” function, which’ll convert it to a websafe color… like this..

javascript code:
 
var color = new Hex(112233).websafe();
 

or...
javascript code:
 
var color = new Hex(112233).websafe().toRGB();
 


I’ve also written in a bit of color matching so that you can pass it a pallet of colours and it’ll return the nearest match, like this:

javascript code:
 
var color = new Hex(225577).match ([
                        new Hex(555555),
                        new Hex(888888),
                        new RGB(123,56,77),
                        new RGB(123,56,77).websafe()
]);
 


Of course, you also have access to the individual properties of each object, so...

javascript code:
 
  var color = new Hex('004455').toRGB();
  // alert (color.r);
  // alert (color.g);
  // alert (color.b);
  // alert (color.toString());
 



The code itself can be found here:

http://www.madebypi.co.uk/labs/colormatch/colorutils.js

and an example (Firebug is needed) can be found here:

http://www.madebypi.co.uk/labs/colormatch/


ta
0/0
 Reply   Quote More 

 From:  andy  
 To:  ALL
35180.2 
too long for me to look through properly, but seeing as the array of websafe colours is going to be the same every time shouldn't it be statically defined? or can you not do that because it's an abstract class or something? (don't know too much about all the fancy different class types)
0/0
 Reply   Quote More 

 From:  Mikee  
 To:  andy     
35180.3 In reply to 35180.2 

Hmm, that's a good point actually. Unfortunately javascript's OO isnt that good, even when I do use dean edwards clever thing to make life easier.

 

I /think/ dean wrote a "class interface" thing where you can specify things that'll be shared.. I'll give that a go. cheers!

0/0
 Reply   Quote More 

 From:  Mikee  
 To:  ALL
35180.4 

http://www.madebypi.co.uk/labs/colormatch/test2.html

 

a quick page for people who dont have firebug..

0/0
 Reply   Quote More 

 From:  Mikee  
 To:  Mikee     
35180.5 In reply to 35180.1 
Hmm. I've just made an updated version which gives you access to a few more functions..


javascript code:
 
 var color = new Hex("cc0000").complement();
 // returns 0080C2
 
 var color = new Hex("cc0000").triadic();
 // returns array(007E2D,0068F8);
 
 var color = new Hex("cc0000").split();
 // returns array(00807C,007AF0);
 
 var color = new Hex("cc0000").analogous();
 // returns array(A24D00,DD0050);
 


Does anyone know of any color harmony methods?
0/0
 Reply   Quote More 

 From:  Mikee  
 To:  Mikee     
35180.6 In reply to 35180.1 
http://www.mikefranklin.me.uk/experiments/color/color.html

http://www.mikefranklin.me.uk/experiments/color/colorutils.js


Hurrah.

Now supports....

javascript code:
 
rectangle(int sidelength);
square();
analogous();
split();
triadic();
complement();
websafe();
match(array pallet);
toHex();
toRGB();
toXYZ();
toCIELab();
toCIELCh();
toCMY();
toCMYK();
 


Rather proud of that :) might port it over to PHP and .NET.
0/0
 Reply   Quote More 

 From:  empathy  
 To:  Mikee     
35180.7 In reply to 35180.6 
Should be palette rather than pallet, no?
0/0
 Reply   Quote More 

 From:  Mikee  
 To:  empathy     
35180.8 In reply to 35180.7 
Aye, that should be palette rather than pallet :)
0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)  
 To:  Mikee     
35180.9 In reply to 35180.1 
quote:
wanna make sure there's no obvious mistakes in it before I do


Depends what you term a "mistake", but one thing to consider...

What is 0.04045 and 1.055? Or 0.0722? Or 1.8758? etc. You've got *lots* of numbers in your code, with no indication of what they are, which is incredibly confusing to anyone who doesn't know whatever formulae you are implementing.


Hmm, this looks odd:
code:
if ( H < 0 ) ; H += 1
if ( H > 1 ) ; H -= 1

(line 287)

Unless that's some weird construct where semi-colon /doesn't/ terminate the command, it's going to mean that H is going to increment then decrement every time?
0/0
 Reply   Quote More 

 From:  Mikee  
 To:  ALL
35180.10 
Made a few small updates.. Mostly being that i've merged three functions into one..

javascript code:
 
square();
triadic();
complement();
 


javascript code:
 
equal(int parts);
 


As you should be able to see from the example page (http://www.mikefranklin.me.uk/experiments/color/color.html), it now means you can split the colour wheel into as many parts as you like.

I've also fixed the palette typo!
0/0
 Reply   Quote More 

 From:  Mikee  
 To:  Peter (BOUGHTONP)     
35180.11 In reply to 35180.9 
Yeah you're right - that's a mistake. Cheers!
0/0
 Reply   Quote More 

 From:  Mikee  
 To:  ALL
35180.12 
Hehe... added a range() function.

javascript code:
 
color.range(color toColor, int steps, bool include);
 


so you can do...

javascript code:
 
var start = new Hex("cc0000");
var end = new Hex("00FFFF");
var range = start.range(end,10,true);
console.log(range);
 

Which'll output an array...
javascript code:
 
// CC0000
// B51C1C
// 9E3838
// 885555
// 717171
// 5A8D8D
// 44AAAA
// 2DC6C6
// 16E2E2
// 00FFFF
 


Or nice and simple..

javascript code:
 
 console.log(new Hex("cc0000").range(new Hex("00CCCC"),10,true));
 


Eee. I like that :D
0/0
 Reply   Quote More 

 From:  Mikee  
 To:  ALL
35180.13 

A few tweaks and a conversation with Caer later, may I present to you.........

 

"Les couleurs de thingymabob"

 

http://www.mikefranklin.me.uk/experiments/color/color2.html

0/0
 Reply   Quote More 

 From:  andy  
 To:  Mikee     
35180.14 In reply to 35180.13 
pretty smart, may steal that one day! (if i ever actually do any web work again)
0/0
 Reply   Quote More 

 From:  Ally  
 To:  Mikee     
35180.15 In reply to 35180.13 

Interesting! I usually use this to work out colour schemes:

 

http://www.wellstyled.com/tools/colorscheme2/index-en.html

 

But yours has an interesting (and more detailed) take on it. Bravo.

0/0
 Reply   Quote More 

 From:  Mikee  
 To:  ALL
35180.16 

On a side note, I decided to go ahead and release it after a bit of tidyup work..

 

http://www.madebypi.co.uk/labs/colorutils/

 

:)

0/0
 Reply   Quote More 

Reply to All    
 

1–16

Rate my interest:

Adjust text size : Smaller 10 Larger

Beehive Forum 1.5.2 |  FAQ |  Docs |  Support |  Donate! ©2002 - 2024 Project Beehive Forum

Forum Stats