square with all the colors... [Archive]

shlagish

05-08-2003, 01:50 AM

In drakan, when you choose the name of your character, you also choose the color of her armor. The way you do this is by clicking the color you want in the square that has all the possible colors in it... You know what I mean?

So what I want to do is do a square like that one but with javascript and on a webpage!
How would I do this?
I managed to do this with the grey scale like this:

<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>

<table align="center" border="0" cellpading="0" cellspacing="1">
<tr>

<script type="text/javascript">

</script>

</tr>
</table>

</body>
</html>

Thanks for the help!

Danne

05-08-2003, 04:01 PM

Based on your initial code I tried to mess a little with it.
This is not very neat because I found a little tricky to put similar colors next to each other. Maybe it will give you some ideas though.

Explanation:
The initial color is set to yellow. The decimal color value is increased or decreased with 51 each loop. This is set by the direction variables. This way I wanted to achieve a smooth color change. Obviously it only worked half way.
Anyway, when blue reaches one of the bounds (0 or 255) red value is changed, and when red does the same, green value is changed.

(Uncomment what's inside the td-tag to see the color codes in dec and hex)

<html>
<head>
<script type="text/javascript">

function convert(c)
{
return parseInt(c, 10).toString(16);
}

function doGreen() {
eval("green"+dirGreen+"=51");
if(green>255){
green=0;
dirGreen="+";
} else if (green<0) {
green=255;
dirGreen="-";
}
}

function doRed() {
eval("red"+dirRed+"=51");
if(red>255){
red=0;
dirRed="+"
doGreen();
} else if (red<0) {
red=255;
dirRed="-"
doGreen();
}
}

function doBlue() {
eval("blue"+dirBlue+"=51");
if(blue>255){
blue=0;
dirBlue="+"
doRed();
} else if (blue<0) {
blue=255;
dirBlue="-";
doRed();
}
}

var red=255;
var green=255;
var blue=0;
var dirRed="-";
var dirGreen="-";
var dirBlue="+";

function show() {
var rows=18;
var cols=12
for (var i=0;i<rows;i++) {
for (var j=0;j<cols;j++) {
m=convert(red)
n=convert(green)
o=convert(blue)
if (m < 10){
m="0"+m
}
if (n < 10){
n="0"+n
}
if (o < 10){
o="0"+o
}
if (j%cols == 0){
document.write("</tr><tr>")
}
document.write('<td width="10px" height="10px" '
+'bgcolor="#'+m+n+o+'" title="#'+(m+n+o).toUpperCase()+'" '
+'style="color:#FFFFFF"></td>')
doBlue();
}
}
}

</script>
</head>
<body>

<table align="center" border="0" cellpading="0" cellspacing="1">
<tr>
<script type="text/javascript">

show();

</script>
</tr>
</table>

</body>
</html>

Danne

05-08-2003, 08:30 PM

Small bug, it looks a little better if you use these functions instead of the other:

function doGreen() {
eval("green"+dirGreen+"=51");
if(green>255){
green=255;
dirGreen="-";
} else if (green<0) {
green=0;
dirGreen="+";
}
}

function doRed() {
eval("red"+dirRed+"=51");
if(red>255){
red=255;
dirRed="-"
doGreen();
} else if (red<0) {
red=0;
dirRed="+"
doGreen();
}
}

function doBlue() {
eval("blue"+dirBlue+"=51");
if(blue>255){
blue=255;
dirBlue="-";
doRed();
} else if (blue<0) {
blue=0;
dirBlue="+"
doRed();
}
}

Btw, these are obviously not all colors, as you can see from the color codes.

shlagish

05-08-2003, 11:04 PM

Thanks for your reply, I'll try figuring out something with that principle that shows all the colors