PHP+SQLの覚え書き: 色

ラベル色の投稿を表示しています。すべての投稿を表示

2010年4月26日月曜日

phpでcssの色設定を動的に変更したいのでメモ

phpでcssを動的に変更したいので、リンクメモです。
http://www.phppro.jp/news/384

適当なphpファイルにてcssファイルをつくるには、
header("Content-type: text/css");
を加えてCSSファイルに化けさせて、

<link rel="stylesheet" type="text/css"
 media="screen" href="style.php">

みたいに読み込ませる、と。

あとは、style.phpみたいなファイルの中で、
動的にデータベースから読み込ませた変数からスタイル指定してやれば良さそうだな、と。

実装、2，3日かかるかな。。

2010年2月1日月曜日

「色彩の値を256といった10進数値からFFといった16進数に変換したいなあ」と思っていたので、関数を知れべたら、
dechex()という関数を知りました。

（dexhexと最初書いて、エラーが出ました（^^;）

これを使うと、for文で０～２５５までループさせ、その数値を16進数に変換して、テーブルセルのバックグラウンドカラーにprintfなどで代入できて、左の図のようなことができました。

ありがたや。

色を使ったいろいろな表現を考えているので、
dechexはお世話になりそうです。

hexdec()が逆の関数で、これもそのうち使うかな。。

一応、ソースを置いておきます。
表示は右が切れてますが、コピーしたらちゃんとコピーできますね。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dechexの応用による、色彩テーブル</title>

<style type="text/css">
table{border-collapse:collapse;} 
td{width:60px;text-align:center;padding:0;}
</style>

</head>

<body>
<table>
<?php
//純色で、数値を上げていく。
for($i=0;$i<256;$i=$i+16){
        $R0=sprintf ("<td bgcolor='#0%s0000'>#0%s0000</td>",dechex($i),dechex($i));
        $G0=sprintf ("<td bgcolor='#000%s00'>#000%s00</td>",dechex($i),dechex($i));
        $B0=sprintf ("<td bgcolor='#00000%s'>#00000%s</td>",dechex($i),dechex($i));
        $R =sprintf ("<td bgcolor='#%s0000'>#%s0000</td>"    ,dechex($i),dechex($i));
        $G =sprintf ("<td bgcolor='#00%s00'>#00%s00</td>"    ,dechex($i),dechex($i));
        $B =sprintf ("<td bgcolor='#0000%s'>#0000%s</td>"    ,dechex($i),dechex($i));
    if($i<16){echo "<tr>".$R0.$G0.$B0."</tr>";}
    else{echo "<tr>".$R,$G,$B."</tr>";}
}
//混色で、二色目の数値を上げていく。
for($i=0;$i<256;$i=$i+16){
        $RG0=sprintf ("<td bgcolor='#ff0%s00'>#ff0%s00</td>",dechex($i),dechex($i));
        $GB0=sprintf ("<td bgcolor='#00ff0%s'>#00ff0%s</td>",dechex($i),dechex($i));
        $RB0=sprintf ("<td bgcolor='#0%s00ff'>#0%s00ff</td>",dechex($i),dechex($i));
        $RG =sprintf ("<td bgcolor='#ff%s00'>#ff%s00</td>",dechex($i),dechex($i));
        $GB =sprintf ("<td bgcolor='#00ff%s'>#00ff%s</td>",dechex($i),dechex($i));
        $RB =sprintf ("<td bgcolor='#%s00ff'>#%s00ff</td>",dechex($i),dechex($i));
    if($i<16){echo "<tr>".$RG0.$GB0.$RB0."</tr>";}
    else{echo "<tr>".$RG.$GB.$RB."</tr>";}
}
?>
</table>
</body>
</html>

http://labo.web-do.com/php/colors/dechex2.php
にファイルを置いておきました。

テーブルだから、文字列を選択できるのがなんか嬉しい。。

2010年1月30日土曜日

やっと色相環、完成。

望みがやっと達成されました。
綺麗に色相環が実現できました。
imagefilledarcとimagefilledellipseの両方を使って実現。
ありがたや。。。

<?php
    $img = imagecreatetruecolor(400, 400);
    $bg=imagecolorallocate($img,0,0,0);
    $r2=150;
    $s=1;$v=1;

function toH($a){
    $result=round((round($a,3)*255));
    return $result;
}
for($h=0;$h<360;$h++){
    $y0=$r2*(sin(deg2rad($h)));
    $x0=$r2*(cos(deg2rad($h)));
    $y=$y0+200;
    $x=$x0+200;
    
$hi = ( $h / 60 ) % 6;
$f = ( $h / 60 ) - $hi;
$p = $v * ( 1 - $s );
$q = $v * ( 1 - $f * $s );
$t = $v * ( 1 - ( 1 - $f ) * $s );

if($hi == 0){$r = $v;$g = $t;$b = $p;}
elseif($hi == 1){$r = $q;$g = $v;$b = $p;}
elseif($hi == 2){$r = $p;$g = $v;$b = $t;}
elseif($hi == 3){$r = $p;$g = $q;$b = $v;}
elseif($hi == 4){$r = $t;$g = $p;$b = $v;}
elseif($hi == 5){$r = $v;$g = $p;$b = $q;}
//else{$r = $v;$g = $v;$b = $v;}
$col=imagecolorallocate($img,toH($r),toH($g),toH($b));    
$col0=imagecolorallocate($img,0,0,0);    
imagefilledarc($img,200,200,300,300,$h,$h+1,$col
    ,IMG_ARC_PIE);
imagefilledellipse($img,200,200,200,200,$col0);

}
    header("Content-Type: image/png");
    imagepng($img);

?>

■今後の課題としては、色相環はできたので、
明度を下げてだんだん中心に向かってフェードさせる、
といったことを実現したいな、と。

IMG_ARC_NOFILLというstyle指定があって、淵だけが描かれるので、
それをつかって、中心に向かってだんだん明度Vを下げていこうかな、と。

外に向かっても少しずつ下げていくと綺麗かな。。

imagefilledarc()にて、色相環。

imagefilledarc($img,200,200,300,300,$h,$h+1,$col,IMG_ARC_PIE);
ということで、弧をつくってやると、また綺麗になりました。

第2、第3引数は、円の中心x.y座標。
第4、第5引数は、幅と高さ。
第6、第7引数は、開始角と終了角。
第8は、色。
第9は、どのような法則で描画させるかのオプションでした。
（該当PHPマニュアルページ）

色相環、完成！

とうとう色相環が出来ました!(^^)!
ずっとエラーが出ていて、悩みました。
$rという変数を半径にしていたのですが、
$rはredの値を格納する変数にもしていたので、
バッティングしていたのに気づけませんでした。。

ともあれ、とりあえず完成です。

でも、filledellipseで360個の円をHSVの値を変えて表現しているので、
赤い円が最後にオレンジを食ってます。

これを、弧で実現すればたぶん行けると思うんですが、とりあえず今日は終了。

<?php
    $img = imagecreatetruecolor(400, 400);
    $bg=imagecolorallocate($img,0,0,0);
    $r2=150;
    $s=1;$v=1;

function toH($a){
    $result=round((round($a,3)*255));
    return $result;
}
for($h=0;$h<360;$h++){
    $y0=$r2*(sin(deg2rad($h)));
    $x0=$r2*(cos(deg2rad($h)));
    $y=$y0+200;
    $x=$x0+200;
    
$hi = ( $h / 60 ) % 6;
$f = ( $h / 60 ) - $hi;
$p = $v * ( 1 - $s );
$q = $v * ( 1 - $f * $s );
$t = $v * ( 1 - ( 1 - $f ) * $s );

if($hi == 0){$r = $v;$g = $t;$b = $p;}
elseif($hi == 1){$r = $q;$g = $v;$b = $p;}
elseif($hi == 2){$r = $p;$g = $v;$b = $t;}
elseif($hi == 3){$r = $p;$g = $q;$b = $v;}
elseif($hi == 4){$r = $t;$g = $p;$b = $v;}
elseif($hi == 5){$r = $v;$g = $p;$b = $q;}
//else{$r = $v;$g = $v;$b = $v;}
$col=imagecolorallocate($img,toH($r),toH($g),toH($b));    
imagefilledellipse($img, $x, $y, 50, 50, $col);
}
    header("Content-Type: image/png");
    imagepng($img);

?>

2010年1月29日金曜日

HSVからRGBに変換した値の表示。

一応、H=0～359の色相におけるRGBの値を256階層でテーブル表示させるコードが出来ました。
ずらっと長いテーブルが生成されます(^^;。

これを次は、GDででも色付けしてPNG化です。
楽しみなり。

その後、sin(),cos()あたりで色相環の完成か。
楽しみっす。。。

<?php

echo "<table cellpadding='1' border='1'>";
echo "<tr><th>H</th><th>R</th><th>G</th><th>B</th></tr>";
for($h=0;$h<360;$h++){
$s=1;$v=1;
$hi = ( $h / 60 ) % 6;
$f = ( $h / 60 ) - $hi;
$p = $v * ( 1 - $s );
$q = $v * ( 1 - $f * $s );
$t = $v * ( 1 - ( 1 - $f ) * $s );

if($hi == 0){
$r = $v;$g = $t;$b = $p;
}
elseif($hi == 1){
$r = $q;$g = $v;$b = $p;
}
elseif($hi == 2){
$r = $p;$g = $v;$b = $t;
}
elseif($hi == 3){
$r = $p;$g = $q;$b = $v;
}
elseif($hi == 4){
$r = $t;$g = $p;$b = $v;
}
elseif($hi == 5){
$r = $v;$g = $p;$b = $q;
}
else{
$r = $v;$g = $v;$b = $v;
}
echo "<tr><th>".$h."</th><td>".toHex($r)
."</td><td>",toHex($g),"</td><td>"
.toHex($b)."</td></td>";
}
echo "</table>";
function toHex($a){
    $result=round((round($a,3)*255));
    return $result;
}
?>

参考にさせていただいたページ。
http://movingahead.seesaa.net/article/139081151.html
感謝。

■後日に書いた追記です。
各度と円の6区分とRGB値と、ｘ、ｙ座標などを一覧表示させたテーブルページへのリンクをはっておきます。
　http://labo.web-do.com/php/colors/hsv_show.php
ちょっとRGBの背景色がいけてないんですが、眺めていると色々勉強になります。。

HSV色空間についてのメモ

最近、色相環をPHPで実現したいと思って、時々「どうしたら実現できるかなあ。。360度の6つの領域の色の変化を、各6領域でRGBをそれぞれ条件に沿って変化させるか。」などと考えていました。

が、ふと「HSV色空間」のことを知り、どうもその方向で実現できそうだとわかりました。
何事にも、先達のあらまほしきことなり。
やはり先賢は賢いなあ、と。

http://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93
wikipediaの「HSV色空間」へのリンク。
http://movingahead.seesaa.net/article/139081151.html
PHPで実現されたようであるかたのページリンク。
http://ja.wikipedia.org/wiki/%E5%90%88%E5%90%8C%E5%BC%8F
360を60で割って、その剰余を求める、ということが6領域をスマートに割り出す鍵であることが分かり、「mod」について勉強した際のwikipediaリンク。

少し理解できてきたので（まだかなり怪しいですが。。）、
GDでも使って色相環を実現したいな、と。

なんか、ずっと色相環を実現したかったんですよね～
憧れのような（笑）

がんばろっと。

（色々やることあるのに、何をやってるんだか、という突っ込みを自分に入れつつ。。）

登録: 投稿 (Atom)

PHP+SQLの覚え書き