Работа с HSV в JavaScript-е

    Доброго времени суток, дорогие форумчане!

    Делаю небольшой веб-сервис для игроков одной игры (О_О), и столкнулся с такой проблемой: в игре есть предмет, который выглядит, в некотором роде, по разному: он может быть разных оттенков. В папке текстур он существует в следующем виде:
1) Готовая раскрашенная картинка (на случай, если предмет "пустой") - https://www[dot]dropbox[dot]com/s/808p7w[dot][dot][dot]y0c1/colored[dot]png
2) Слой 1 (Серая картинка камушка) - https://www[dot]dropbox[dot]com/s/e5bueyewn7qq53v/l1[dot]png
3) Слой 2 (Ободок) - https://www[dot]dropbox[dot]com/s/sacyde1t84kppry/l2[dot]png

    Т.е. если предмет не "пустой" (, а модифицирован игроком), то он в клиенте принимает цвет, который получил игрок (своеобразное смешение красок с получением новой, но с другим предметом). В итоге камушек в предмете может быть чуть ли не любого оттенка (на самом деле не правда, но не об этом ). В клиенте в таком случае картинка, что логично, собирается по слоям.

    Все, что мне удалось выяснить - необходимо работать с цветовой моделью HSV (она же HSB). Так же я смог догадаться, что серая картинка камушка - готовый канал V, и мне нужно лищь наложить на него ещё S и H каналы, после чего поверх наложить ободок.

    Сам я вообще не художник, поэтому понятия не имею, как это сделать даже в фотошопе. Зато я уже нашёл js-библиотеку конвертации цветов - tinycolor.js. Думаю, она подойдёт.

    В общих чертах алгоритм такой: пользователь указывает RGB-цвет. Цвет конвертируется в HSV, V откидываем, т.к. в игре у предмета она всегда равна 100% (поэтому и не все цвета можно получить). Накладываем H и S на картинку с камушком, конвертируем всю картинку в RGB, накладываем ободок и выводим на экран. Не убивайте, если что-то глупое сморозил: не художник я

    Подскажите, пожалуйста, как это можно реализовать? Желательно без canvas-а, т.к. он у некоторой части аудитории не поддерживается. В частности у меня.

Иди загугли что такое спрайты и не изобретай велосипедов из костылей.

-----
Шта? Репозиторий?

черт, не правильно вопрос сформулировал: не как все эато сделать, а "как к серой картинке добавить H и S каналы?"

не особо понимаю, при чем тут спрайты? мне нужно не трафик ужать и не число обращений к серверу сократить, а сделать чернобелую картинку цветной.

Не могу понять в чем проблема.
Если не нужны спрайты (и причем тут сокращение трафика?) то сделай в редакторе её цветной и положи статически на сервере.

Или так: а в какой такой момент она должна вдруг стать цветной?

-----
Шта? Репозиторий?

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

Я пишу что-то вроде интернет-аукциона. В числе прочего там можно будет продавать и модификаторы свечения, т.к. некоторые оттенки довольно дорогие в получении, а следовательно, и в цене. Например, если игрок, имеющий 0 игровой валюты захочет купить Золотой МС, ему придется задонатить 1.500(!) российских рублей, получить от администрации за это 150.000 "монет", и продать кому-нибудь в игре эти "монеты" по актуальному курсу (сейчас - 1:20), получив 3.000.000 игровой валюты. Т.е. предмет дорогой, поэтому и представить его нужно красиво.

В моей системе аукционов игрок вводит цвет в системе RGB, и картинка лота отображается с камушком нужного цвета.

Тогда без канваса не обойтись. По крайней мере на них удобнее будет фильтры применять.

-----
Шта? Репозиторий?

если я правильно понял:

1. берешь этот файл
2. "делаешь его прозрачным"
3. подкладываешь нужный цвет
4. наслаждаешься результатом

---

upd: http://jsfiddle.net/r5pfyaqp/

(Отредактировано автором: 09 Июня, 2015 - 00:57:01)

-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Le0_Nard чувак
Ты не туда залез
Тут в основном ламеры обитают
Вот спроси любого что есть стек
Через один не ответят
О алгоритмах и структурах данных совсем никто не знает
Тут пхпшники... тупые люди

я уже выше ссылку добавил =)

-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Спасибо за ответы. Сам я вообще не подозревал, как это сделать даже в фотошопе, теперь наклепал заготовки, под которые нужно будет подкладывать цвет.

Решение, правда, костыльное, т.к. результат "не такой, как на картинке", но пока сойдет. Потом буду думать, что с этим делать. Может художников найду, которые подскажут, что, да как...

А пока всем спасибо!

какие еще заготовки?
Шаблон должен быть один. Т.е прозрачная картинка.
Тебе нужно удалить фон, а кристал разбить на части. Самые светлые части, должны быть менее прозрачные.

т.е Чем светлее часть, тем ниже ее прозрачность. К примеру, самые светлые части - прозрачность 70%, самые темные 20%. Там уже подбирать нужно.

Накладывать фон- как сказал nerv, либо через canvas.
Если через канвас, то смотри в сторону