JQuery - анимация цветового цикла с цветовым пространством hsv?

Я работаю над проектом, для которого мне нужен специальный боди-фон. Цвет фона должен циклически перемещаться по цветовому спектру, как свет настроения. Итак, я нашел это:

http://buildinternet.com/2009/09/its-a-rainbow-color-changing-text-and-backgrounds/

«Но» этот фрагмент работает с цветовым пространством RGB, в котором есть очень светлые и темные цвета. Получение только ярких цветов будет работать только с цветовым пространством HSV (например, имея статические значения S и V на 100 и позволяя циклу H). Я не знаю, как конвертировать, а на самом деле, как использовать этот сниппет для своих нужд.

Есть у кого-нибудь идея ??

Заранее спасибо. Бест, Флойд


animation colors jquery cycle hsv
person Sgt Floyd Pepper    schedule 08.06.2010    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Просто используйте готовую функцию преобразования RGB в HSV, например, такую:

http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript

Затем просто введите свой цвет как HSV, и вы получите RGB, который вы можете использовать в своих анимациях.

person Tatu Ulmanen    schedule 08.06.2010
comment
Привет, спасибо за быстрый ответ. А где мне поставить этот конвертер? Я не могу просто вставить его в color.js, потому что аниматор здесь настроен на захват rgb. Как вывести преобразованный HSV в аниматор? Понимаете, моя проблема не в конвертере, а в том, как его интегрировать. - person Sgt Floyd Pepper; 08.06.2010
comment
Привет, спасибо Тату Ульманен за информацию, но это не устранило мою проблему. Я все еще использую следующий код JavaScript: buildinternet .com / 2009/09 /. Но я не знаю, как преобразовать RGB в HSV с помощью алгоритма. Есть ли у кого-нибудь свободные минуты для моего дела ?? Я был бы так рад. - person Sgt Floyd Pepper; 04.10.2010

arrow_upward
0
arrow_downward

ColorJizz должен быть тем, что вам нужно.

person Mikee    schedule 12.10.2010

arrow_upward
0
arrow_downward

Я считаю, что это именно тот эффект, который вы искали. Функция randRange () позволяет указать минимальное и максимальное значение.

<script language="JavaScript" type="text/javascript">
function randRange(lowVal,highVal) {
     return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
function spectrum(){  
    var hue = 'rgb(' + randRange(100,256) + ',' + randRange(100,256) + ',' + randRange(100,256) + ')';  
    $('#div').animate( { backgroundColor: hue }, 1000);  
    spectrum();  
 }  
$(function(){
    spectrum();
});
</script>
person James Moberg    schedule 23.06.2011