Палитра цветов на JS. Часть 1- из HSL в RGB - 8 Апреля 2010 - Блог U.S.F. - U.S.F.
Я в твиттере Архив записей Подписаться на обновления
Палитра цветов на JS. Часть 1- из HSL в RGB
08.04.10

Добрый вечер мои дорогие читатели. Идея написать скрипт рисования палитры пришел спонтанно. Тоесть он мне по идее не для каких целей не нужен был, но вот захотелось сделать и все. С чего же начнем?

Сделать палитру можно например взяв один блок и заполнив его маленькими цветными блоками. Ну вот, подумал я, основа уже есть. Тоесть:


Code

<style>
#pal {
  width:360px; height:100px;
}
#pal div {
  width:1px; height:100px;
  float:left;
}
</style>

<div id="pal"></div>

Думаю по этому коду все ясно. У нас есть главный DIV и внутри него будут блоки шириной в 1 пиксел. Теперь мне нужно генерировать эти блоки задавая им различный цвет.При этом я могу щелкнув на цвет получить его цвет(сделал через alert(this.style.backgroundColor)) Делает вот так:
Code

function DrawP() {
 var pal; 
for(var i=0;i<360;i++) {
  pal+="<div onClick='alert(this.style.backgroundColor);' style='background-color:"+ТУТ ЦВЕТА ГЕНЕРИРУЕМЫЕ+";'></div>"; 
}
 document.getElementById('pal').innerHTML=pal;  
}

И тут я столкнулся с первыми проблемами. Мне нужно генерировать цвет в RGB и каждый параметр должен успеть пройти от 0 до 255. Это 255*255*255 операций. Натяжно всетаки будет. Да и как это сделать я не понял.
Я с успехом могу генерировать отдельные области спектра составляя 2D палитру изменяя только 2 из трех параметров. 3й остается постоянным. Получается что я могу таким образом составить 6 областей которые и дадут мне ВСЮ палитру. Но мне это показалось очень неудобным. 6 разных палитр очень уж громоздко. Да и считает он туговато. Хочу все и сразу.
Тут меня осенило! У цветовой схемы HSL за тон цвета отвечает только 1 параметр! Тоесть я могу получить всю палитру просто прогнав по 1 циклу все значения(у HSL их 360). Пришлось искать формулы перевода из HSL в RGB. Нашел конечно тут . Написал код.

Code

function HSLtoRGB(H, S, L) {
 var H,S,L,Q,P,Hk; 
 T=[  ]; 
 C=[  ];//массив выходных цветов 

  if (L<1/2) { 
      Q=L*(1+S); 
  } 
  else { 
      Q=L+S-L*S; 
  } 
  P=2*L-Q; 
  Hk=H/360; 
  T[0]=Hk+1/3; T[1]=Hk; T[2]=Hk-1/3; 

  for(i=0;i<3;i++) { 
     if (T[i]<0) { 
         T[i]+=1 
     } 
     else if (T[i]>1) { 
         T[i]-=1; 
     } 
  } 
  for(i=0;i<3;i++) { 
     if (T[i]<1/6) { 
         C[i]=P+((Q-P)*6*T[i]); 
     } 
     else if (T[i]<1/2 && T[i]>=1/6) { 
         C[i]=Q; 
     } 
     else if (T[i]>=1/2 && T[i]<2/3) { 
         C[i]=P+((Q-P)*(2/3-T[i])*6); 
     } 
     else C[i]=P; 
  } 

  for(i=0;i<3;i++) { //перевожу параметры R G и B в диапазон 0:255 т.к я получал от 0:1 
       C[i]*=255; 
  } 
  return decToHex(C); о функции decToHex(C) и зачем она тут читайте ниже 
 } 

Ну тут оказалось что на выходе у меня сразу 3 параметра. И я ломал голову как же мне их три подставлять в бекграунд генерируемого DIVa. Return насколько мне извесно выводит определенное значение(но никак не три сразу, причом мне надо выводить их через запятую). И тут решение нашлось! Зачем мне подставлять туда цвет в формате RGB(r,g,b), если можно ОДНО значение в виде хекса(#rrggbb)?
Code

function decToHex(decArray) {
  var hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
  var out = "#";
  for (var i = 0; i < decArray.length; i++) {
  dec = parseInt(decArray[i]);
  out += hex[parseInt(dec / 16)] + hex[dec % 16];
  }
  return out;

И теперь я могу записать код рисования палитры так:
Code

function DrawP() {
 var pal; 
k=0;
for(var i=0;i<360;i++) {
  pal+="<div onClick='alert(this.style.backgroundColor);' style='background-color:"+HSLtoRGB(i,0.5,0.5)+";'></             div>"; //2й и 3й параметры были взяты со средними значениями 
}
 document.getElementById('pal').innerHTML=pal;  
}

 Таким образом я получил полноценную Палитру. Играя со вторым и третьим параметрами HSL мы можем получать различные вариации цветовых схем.

Код полностью

ЗЫ: не разобрался откуда там Underfined вываливается. Если подскажите буду благодарен)

ПОЧИТАТЬ ЕЩЕ:
Теги: Палитра, JavaScript

№ 1. Тимур [20.01.11 в 17:48]
в функции DrawP()
объявляется переменная var pal;
если объявить ее с инициализацией, вот так:
var pal='';
Underfined пропал
а так спасибо, хорошая статья

№ 2. usf [20.01.11 в 19:45]
хмм, да действительно пропал. понял почему. там же +=. а первоначальное значение было underfined

Имя *:
Email:
Ваш сайт:
Хотите что-то сказать?
Код *:

последнее из прокоментированных..
Хостинг от uCoz

Powered by usf.ru