VPF::палитра цветов - Форум программистов

12345c

Дата 13.1.2006, 19:35 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Да, но красивых раскладок цветов я там не нашёл.

http://www.iosart.com/firefox/colorzilla/palettes.html - палитры, много, и даже коды цветов можно вытащить без проблем, а затем воспроизвести в JS.

http://www.ficml.org/jemimap/style/color/wheel.html - неплохой автомат для подбора цветов.

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Alx

Дата 14.1.2006, 16:19 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

Цитата(12345c @ 13.1.2006, 19:35

)

http://www.ficml.org/jemimap/style/color/wheel.html - неплохой автомат для подбора цветов.

--------------------

12345c

Дата 16.1.2006, 18:12 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Alx: конечно, красиво, и идея остроумная - взять один png и выводить сменяющиеся палитры. Раньше видел варианты, как брали jpg, увеличивали его маленький участок и показывали как пример выбранного цвета.

Про палитры:
Пока нет алгоритма генерации, написал брутфорсный генератор палитры по Gimp-овскому файлу палитр, который нашёл на вышеприведённой странице (ColorZilla palettes). Например, берём и выводим такой файл, только в виде таблицы:
user posted image

.
Для этого нужно скопировать описание в код страницы (занимает 12 Кба с комментариями) и выполнить маленький код:

Код

<!--http://cvs.gnome.org/viewcvs/*checkout*/gimp/data/palettes/Visibone.gpl-->
<script>d=document;
Columns=16;
/*GIMP Palette Name: Visibone Columns: 16
# Visibone -- GIMP Palette file
#  Arrangement idea from www.visibone.com
#  Conversion to GIMP Palette and addition of
#  hex codes and color names by Tigert <[email protected]>
# */
onload=function(){s=d.getElementById('ta1').value;
    a=s.match(/[ \t\n]\d+\b/g);    //для Gimp - 204 153  51 comment...(без цифр)\r\n
    j=0;s2='<table bgColor=black>';
    while(a[j]){ s2+='<tr>';
        for(i=0;i<Columns;i++)if(a[j])s2+='<td style=background-color:rgb('
            +a[j++].substring(1)+','+a[j++].substring(1)+','
            +a[j++].substring(1)+') width=4 height=5></td>';
    s2+='</tr>';}d.body.innerHTML+=s2+'</table>';
}
</script>
<body><br><br><br><br>
<textarea id=ta1 cols=70 rows=30 st yle=display:none>

255 255 255    #FFFFFF - White
204 204 204    #CCCCCC - Pale Gray
153 153 153    #999999 - Light Gray
102 102 102    #666666 - Dark Gray
 51  51  51    #333333 - Obscure Gray
  0   0   0    #000000 - Black
255 204   0    #FFCC00 - Yellow-Yellow-Orange
255 153   0    #FF9900 - Orange-Orange-Yellow
255 102   0    #FF6600 - Orange-Orange-Red
255  51   0    #FF3300 - Red-Red-Orange
  0   0   0    #000000 - Black
 51  51  51    #333333 - Obscure Gray
102 102 102    #666666 - Dark Gray
153 153 153    #999999 - Light Gray
204 204 204    #CCCCCC - Pale Gray
255 255 255    #FFFFFF - White
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255 204  51    #FFCC33 - Light Yellow-Orange
255 204 102    #FFCC66 - Light Orange-Yellow
255 153 102    #FF9966 - Light Orange-Red
255 102  51    #FF6633 - Light Red-Orange
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
204 153   0    #CC9900 - Dark Yellow-Orange
204 153  51    #CC9933 - Medium Orange-Yellow
204 102  51    #CC6633 - Medium Orange-Red
204  51   0    #CC3300 - Dark Red-Orange
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
 51  51   0    #333300 - Obscure Weak Yellow
102 102   0    #666600 - Obscure Dull Yellow
153 153   0    #999900 - Dark Faded Yellow
204 204   0    #CCCC00 - Dark Hard Yellow
255 255   0    #FFFF00 - Yellow
153 102   0    #996600 - Dark Orange-Yellow
153  51   0    #993300 - Dark Orange-Red
 51   0   0    #330000 - Obscure Weak Red
102   0   0    #660000 - Obscure Dull Red
153   0   0    #990000 - Dark Faded Red
204   0   0    #CC0000 - Dark Hard Red
255   0   0    #FF0000 - Red
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
204 255   0    #CCFF00 - Yellow-Yellow-Spring
204 255  51    #CCFF33 - Light Yellow-Spring
153 204   0    #99CC00 - Dark Yellow-Spring
102 102  51    #666633 - Dark Weak Yellow
153 153  51    #999933 - Dark Dull Yellow
204 204  51    #CCCC33 - Medium Faded Yellow
255 255  51    #FFFF33 - Light Hard Yellow
102  51   0    #663300 - Obscure Dull Orange
  0   0   0    #000000 - Black
102  51  51    #663333 - Dark Weak Red
153  51  51    #993333 - Dark Dull Red
204  51  51    #CC3333 - Medium Faded Red
255  51  51    #FF3333 - Light Hard Red
204   0  51    #CC0033 - Dark Red-Pink
255  51 102    #FF3366 - Light Red-Pink
255   0  51    #FF0033 - Red-Red-Pink 
153 255   0    #99FF00 - Spring-Spring-Yellow
204 255 102    #CCFF66 - Light Spring-Yellow
153 204  51    #99CC33 - Medium Spring-Yellow
102 153   0    #669900 - Dark Spring-Yellow
153 153 102    #999966 - Medium Weak Yellow
204 204 102    #CCCC66 - Light Dull Yellow
255 255 102    #FFFF66 - Light Faded Yellow
153 102  51    #996633 - Dark Dull Orange
204 102   0    #CC6600 - Dark Hard Orange
153 102 102    #996666 - Medium Weak Red
204 102 102    #CC6666 - Light Dull Red
255 102 102    #FF6666 - Light Faded Red
153   0  51    #990033 - Dark Pink-Red
204  51 102    #CC3366 - Medium Pink-Red
255 102 153    #FF6699 - Light Pink-Red
255   0 102    #FF0066 - Pink-Pink-Red
102 255   0    #66FF00 - Spring-Spring-Green
153 255 102    #99FF66 - Light Spring-Green
102 204  51    #66CC33 - Medium Spring-Green
 51 153   0    #339900 - Dark Spring-Green
  0   0   0    #000000 - Black
204 204 153    #CCCC99 - Light Weak Yellow
255 255 153    #FFFF99 - Pale Dull Yellow
204 153 102    #CC9966 - Light Dull Orange
255 153  51    #FF9933 - Light Hard Orange
204 153 153    #CC9999 - Light Weak Red
255 153 153    #FF9999 - Pale Dull Red
  0   0   0    #000000 - Black
153   0 102    #990066 - Dark Pink-Magenta
204  51 153    #CC3399 - Medium Pink-Magenta
255 102 204    #FF66CC - Light Pink-Magenta
255   0 153    #FF0099 - Pink-Pink-Magenta
 51 255   0    #33FF00 - Green-Green-Spring
102 255  51    #66FF33 - Light Green-Spring
 51 204   0    #33CC00 - Dark Green-Spring
 51 102   0    #336600 - Obscure Dull Spring
102 204   0    #66CC00 - Dark Hard Spring
153 255  51    #99FF33 - Light Hard Spring
255 255 204    #FFFFCC - Pale Weak Yellow
255 204 153    #FFCC99 - Pale Dull Orange
  0   0   0    #000000 - Black
255 204 204    #FFCCCC - Pale Weak Red
204 102 153    #CC6699 - Light Dull Pink
153  51 102    #993366 - Dark Dull Pink
102   0  51    #660033 - Obscure Dull Pink
204   0 153    #CC0099 - Dark Magenta-Pink
255  51 204    #FF33CC - Light Magenta-Pink
255   0 204    #FF00CC - Magenta-Magenta-Pink
  0 255   0    #00FF00 - Green
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
102 153  51    #669933 - Dark Dull Spring
153 204 102    #99CC66 - Light Dull Spring
204 255 153    #CCFF99 - Pale Dull Spring
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255 153 204    #FF99CC - Pale Dull Pink
255  51 153    #FF3399 - Light Hard Pink
204   0 102    #CC0066 - Dark Hard Pink
  0   0   0    #000000 - Black
102  51 102    #663366 - Dark Weak Magenta
 51   0  51    #330033 - Obscure Weak Magenta
  0 204   0    #00CC00 - Dark Hard Green
 51 255  51    #33FF33 - Light Hard Green
102 255 102    #66FF66 - Light Faded Green
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
204 153 204    #CC99CC - Light Weak Magenta
153 102 153    #996699 - Medium Weak Magenta
153  51 153    #993399 - Dark Dull Magenta
102   0 102    #660066 - Obscure Dull Magenta
  0 153   0    #009900 - Dark Faded Green
 51 204  51    #33CC33 - Medium Faded Green
102 204 102    #66CC66 - Light Dull Green
153 255 153    #99FF99 - Pale Dull Green
204 255 204    #CCFFCC - Pale Weak Green
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255 204 255    #FFCCFF - Pale Weak Magenta
255 153 255    #FF99FF - Pale Dull Magenta
204 102 204    #CC66CC - Light Dull Magenta
204  51 204    #CC33CC - Medium Faded Magenta
153   0 153    #990099 - Dark Faded Magenta
  0 102   0    #006600 - Obscure Dull Green
 51 153  51    #339933 - Dark Dull Green
102 153 102    #669966 - Medium Weak Green
153 204 153    #99CC99 - Light Weak Green
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255 102 255    #FF66FF - Light Faded Magenta
255  51 255    #FF33FF - Light Hard Magenta
204   0 204    #CC00CC - Dark Hard Magenta
  0  51   0    #003300 - Obscure Weak Green
 51 102  51    #336633 - Dark Weak Green
  0   0   0    #000000 - Black
  0 204 102    #00CC66 - Dark Hard Teal
 51 255 153    #33FF99 - Light Hard Teal
153 255 204    #99FFCC - Pale Dull Teal
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
204 153 255    #CC99FF - Pale Dull Violet
153 102 204    #9966CC - Light Dull Violet
102  51 153    #663399 - Dark Dull Violet
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255   0 255    #FF00FF - Magenta
  0 255  51    #00FF33 - Green-Green-Teal
 51 255 102    #33FF66 - Light Green-Teal
  0 204  51    #00CC33 - Dark Green-Teal
  0 102  51    #006633 - Obscure Dull Teal
 51 153 102    #339966 - Dark Dull Teal
102 204 153    #66CC99 - Light Dull Teal
204 255 255    #CCFFFF - Pale Weak Cyan
  0   0   0    #000000 - Black
153 204 255    #99CCFF - Pale Dull Azure
204 204 255    #CCCCFF - Pale Weak Blue
153  51 255    #9933FF - Light Hard Violet
102   0 204    #6600CC - Dark Hard Violet
 51   0 102    #330066 - Obscure Dull Violet
153   0 204    #9900CC - Dark Magenta-Violet
204  51 255    #CC33FF - Light Magenta-Violet
204   0 255    #CC00FF - Magenta-Magenta-Violet
  0 255 102    #00FF66 - Teal-Teal-Green
102 255 153    #66FF99 - Light Teal-Green
 51 204 102    #33CC66 - Medium Teal-Green
  0 153  51    #009933 - Dark Teal-Green
  0   0   0    #000000 - Black
153 255 255    #99FFFF - Pale Dull Cyan
153 204 204    #99CCCC - Light Weak Cyan
 51 153 255    #3399FF - Light Hard Azure
102 153 204    #6699CC - Light Dull Azure
153 153 255    #9999FF - Pale Dull Blue
153 153 204    #9999CC - Light Weak Blue
  0   0   0    #000000 - Black
102   0 153    #660099 - Dark Violet-Magenta
153  51 204    #9933CC - Medium Violet-Magenta
204 102 255    #CC66FF - Light Violet-Magenta
153   0 255    #9900FF - Violet-Violet-Magenta
  0 255 153    #00FF99 - Teal-Teal-Cyan
102 255 204    #66FFCC - Light Teal-Cyan
 51 204 153    #33CC99 - Medium Teal-Cyan
  0 153 102    #009966 - Dark Teal-Cyan
102 255 255    #66FFFF - Light Faded Cyan
102 204 204    #66CCCC - Light Dull Cyan
102 153 153    #669999 - Medium Weak Cyan
  0 102 204    #0066CC - Dark Hard Azure
 51 102 153    #336699 - Dark Dull Azure
102 102 255    #6666FF - Light Faded Blue
102 102 204    #6666CC - Light Dull Blue
102 102 153    #666699 - Medium Weak Blue
102   0 153    #660099 - Dark Violet-Magenta
153  51 204    #9933CC - Medium Violet-Magenta
204 102 255    #CC66FF - Light Violet-Magenta
153   0 255    #9900FF - Violet-Violet-Magenta
  0 255 204    #00FFCC - Cyan-Cyan-Teal
 51 255 204    #33FFCC - Light Cyan-Teal
  0 204 153    #00CC99 - Dark Cyan-Teal
 51 255 255    #33FFFF - Light Hard Cyan
 51 204 204    #33CCCC - Medium Faded Cyan
 51 153 153    #339999 - Dark Dull Cyan
 51 102 102    #336666 - Dark Weak Cyan
  0   0   0    #000000 - Black
  0  51 102    #003366 - Obscure Dull Azure
 51  51 255    #3333FF - Light Hard Blue
 51  51 204    #3333CC - Medium Faded Blue
 51  51 153    #333399 - Dark Dull Blue
 51  51 102    #333366 - Dark Weak Blue
 51   0 204    #3300CC - Dark Blue-Violet
102  51 255    #6633FF - Light Blue-Violet
 51   0 255    #3300FF - Blue-Blue-Violet
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0 255 255    #00FFFF - Cyan
  0 204 204    #00CCCC - Dark Hard Cyan
  0 153 153    #009999 - Dark Faded Cyan
  0 102 102    #006666 - Obscure Dull Cyan
  0  51  51    #003333 - Obscure Weak Cyan
  0 102 153    #006699 - Dark Azure-Cyan
  0  51 153    #003399 - Dark Azure-Blue
  0   0 255    #0000FF - Blue
  0   0 204    #0000CC - Dark Hard Blue
  0   0 153    #000099 - Dark Faded Blue
  0   0 102    #000066 - Obscure Dull Blue
  0   0  51    #000033 - Obscure Weak Blue
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0 153 204    #0099CC - Dark Cyan-Azure
 51 153 204    #3399CC - Medium Azure-Cyan
 51 102 204    #3366CC - Medium Azure-Blue
  0  51 204    #0033CC - Dark Blue-Azure
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
 51 204 255    #33CCFF - Light Cyan-Azure
102 204 255    #66CCFF - Light Azure-Cyan
102 153 255    #6699FF - Light Azure-Blue
 51 102 255    #3366FF - Light Blue-Azure
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255 255 255    #FFFFFF - White
204 204 204    #CCCCCC - Pale Gray
153 153 153    #999999 - Light Gray
102 102 102    #666666 - Dark Gray
 51  51  51    #333333 - Obscure Gray
  0   0   0    #000000 - Black
  0 204 255    #00CCFF - Cyan-Cyan-Azure
  0 153 255    #0099FF - Azure-Azure-Cyan
  0 102 255    #0066FF - Azure-Azure-Blue
  0  51 255    #0033FF - Blue-Blue-Azure
  0   0   0    #000000 - Black
 51  51  51    #333333 - Obscure Gray
102 102 102    #666666 - Dark Gray
153 153 153    #999999 - Light Gray
204 204 204    #CCCCCC - Pale Gray
255 255 255    #FFFFFF - White
</textarea>

Если задаться целью сделать компактную версию, берём для разнообразия примеров другую палитру, более компактную также по форме: user posted image

,
и пишем код для разбора 16-ричных чисел:

Код

<br><br><br><br><input type=button value=Генерировать: onClick=gen2('ta3')><br>
<script>d=document;
Columns=16;
gen2=function(p){s=d.getElementById(p).value;
    a=s.match(/#(\w{6})/ig);    //для hex-представлений- #CCCCCC,#999999,#666666,...
    j=0;s2='<table bgColor=black>';
    while(a[j]){
        s2+='<tr>';
        for(i=0;i<Columns;i++)if(a[j])s2+='<td'
            +' bgColor='+a[j++]+' style=font-size:4px width=4 height=5></td>';
        s2+='</tr>';
    }d.body.innerHTML+=s2+'</table>';
}</script>
<textarea id=ta3 cols=70 rows=20 st yle=display:none>
#FFFFFF,#CCCCCC,#999999,#666666,#333333,#000000,#FFCC00,#FF9900,#FF6600,#FF3300,#000000,#333333,#666666,#999999,#CCCCCC,#FFFFFF,
#99CC00,#000000,#000000,#000000,#000000,#CC9900,#FFCC33,#FFCC66,#FF9966,#FF6633,#CC3300,#000000,#000000,#000000,#000000,#CC0033,
#CCFF00,#CCFF33,#333300,#666600,#999900,#CCCC00,#FFFF00,#CC9933,#CC6633,#330000,#660000,#990000,#CC0000,#FF0000,#FF3366,#FF0033,
#99FF00,#CCFF66,#99CC33,#666633,#999933,#CCCC33,#FFFF33,#996600,#993300,#663333,#993333,#CC3333,#FF3333,#CC3366,#FF6699,#FF0066,
#66FF00,#99FF66,#66CC33,#669900,#999966,#CCCC66,#FFFF66,#996633,#663300,#996666,#CC6666,#FF6666,#990033,#CC3399,#FF66CC,#FF0099,
#33FF00,#66FF33,#339900,#66CC00,#99FF33,#CCCC99,#FFFF99,#CC9966,#CC6600,#CC9999,#FF9999,#FF3399,#CC0066,#990066,#FF33CC,#FF00CC,
#00CC00,#33CC00,#336600,#669933,#99CC66,#CCFF99,#FFFFCC,#FFCC99,#FF9933,#FFCCCC,#FF99CC,#CC6699,#993366,#660033,#CC0099,#330033,
#33CC33,#66CC66,#00FF00,#33FF33,#66FF66,#99FF99,#CCFFCC,#000000,#000000,#000000,#CC99CC,#996699,#993399,#990099,#663366,#660066,
#006600,#336633,#009900,#339933,#669966,#99CC99,#000000,#000000,#000000,#FFCCFF,#FF99FF,#FF66FF,#FF33FF,#FF00FF,#CC66CC,#CC33CC,
#003300,#00CC33,#006633,#339966,#66CC99,#99FFCC,#CCFFFF,#3399FF,#99CCFF,#CCCCFF,#CC99FF,#9966CC,#663399,#330066,#9900CC,#CC00CC,
#00FF33,#33FF66,#009933,#00CC66,#33FF99,#99FFFF,#99CCCC,#0066CC,#6699CC,#9999FF,#9999CC,#9933FF,#6600CC,#660099,#CC33FF,#CC00FF,
#00FF66,#66FF99,#33CC66,#009966,#66FFFF,#66CCCC,#669999,#003366,#336699,#6666FF,#6666CC,#666699,#330099,#9933CC,#CC66FF,#9900FF,
#00FF99,#66FFCC,#33CC99,#33FFFF,#33CCCC,#339999,#336666,#006699,#003399,#3333FF,#3333CC,#333399,#333366,#6633CC,#9966FF,#6600FF,
#00FFCC,#33FFCC,#00FFFF,#00CCCC,#009999,#006666,#003333,#3399CC,#3366CC,#0000FF,#0000CC,#000099,#000066,#000033,#6633FF,#3300FF,
#00CC99,#000000,#000000,#000000,#000000,#0099CA,#33CCFF,#66CCFF,#6699FF,#3366FF,#0033CC,#000000,#000000,#000000,#000000,#3300CC,
#FFFFFF,#CCCCCC,#999999,#666666,#333333,#000000,#00CCFF,#0099FF,#0066FF,#0033FF,#000000,#333333,#666666,#999999,#CCCCCC,#FFFFFF,
</textarea>

Весь он занимает 2.5 К, и ещё можно ужать за счёт ",#".
Остаётся задача - получить код для той хорошо расставленной палитры, и затем сделать генератор таблицы с ней не составит больших проблем. Кто видел в Gimp хорошие палитры?

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

alex77

Дата 4.10.2006, 13:49 (ссылка)

(нет голосов)

Загрузка ...

жывтоне чочо

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 29.9.2006
Где: Екатеринбург

Репутация: нет
Всего: нет

Добрый день!

Цитата(Рыжий @ 29.4.2005, 00:48

)

вот посмотрите, картинка, которая должна получиться, у вас почти тоже самое, но здесь опрятней, и тем более отсортировано все по другому - синий с синим, зеленый с зеленым и т.д.

Присоединённый файл ( Кол-во скачиваний: 20 )
Присоединённый файл 11.jpg

Как сгенерить такую картинку? Всмысле по какому принципу.

Это сообщение отредактировал(а) alex77 - 4.10.2006, 13:57

12345c

Дата 4.10.2006, 15:41 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Это здесь:
http://forum.vingrad.ru/index.php?showtopic=96019
http://js2.ru/subs/subs006.shtml - скрипты и примеры генерации палиты цветов (статья).
http://js2.ru/subs/subs005.shtml#part2 - начало статьи.

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:49

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

alex77

Дата 5.10.2006, 07:09 (ссылка)

(нет голосов)

Загрузка ...

жывтоне чочо

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 29.9.2006
Где: Екатеринбург

Репутация: нет
Всего: нет

Спасибо, много полезного, но той картинки, которая в цитируемом сообщении, я там не нашел.
Вот, нашел другую палитру (в прикрепл. файле), взял из photoshop.
Интересует принцип построения такой палитры. Может кто-нибудь знает, или делал?
Вариант с предварительным созданием списка цветов не подходит.

p.s. делаю форму для выбора цвета, наподобие той, что в FCKEditor, только с другими цветами.

Присоединённый файл ( Кол-во скачиваний: 18 )

palitra.png 7,26 Kb

Sardar

Дата 5.10.2006, 09:19 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

alex77, тебе лучше в алгоритмы с этим вопросом, потом уже просто реализовать в JS.

На вид похоже на HSL/HSV

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

dstorm81

Дата 5.10.2006, 10:39 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

http://www.says-it.com/seal/index.php
тут тоже помотреть можно (пример)

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

12345c

Дата 5.10.2006, 13:17 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Цитата(alex77 @ 5.10.2006, 07:09

)

Интересует принцип построения такой палитры. Может кто-нибудь знает, или делал?
Вариант с предварительным созданием списка цветов не подходит.

Здесь таблица с очень многими ячейками получится, по опыту известно, что при генерации такой, IE будет сильно тормозить (на десятки секунд).
Попробуй угадать или прочитать граббером способ кодирования, затем написать алгоритм. Я делал подобное, в статье http://js2.ru/subs/subs006.shtml - пример, в конце статьи. Но времени на кодирование генерации уходит очень много, а выигрыш - 300 байтов.
Для показанной палитры выигрыш, конечно, будет больше, так как цветов больше, но вопрос встанет со скоростью. Попробуйте нарисовать эту палитру без цветов или с 1 и тем же цветом, чтобы посмотреть скорость. (Вряд ли устроит.)

Другой способ работы с палитрой - по рисунку без генерации таблицы. Который подойдёт для такого очень многоцветного рисунка. По клику мыши получаем координаты клика и вычисляем цвет. По списку или по формуле - неважно. Формула будет привязана к рисунку.

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:53

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »