#!/usr/bin/perl require 'cgi-lib.pl'; my $me = "variation.cgi"; my %input; &ReadParse(\%input); my $base = $input{'base'}; my $shape = $input{'shape'}; $shape = 0 if($shape eq ''); my $color = $input{'color'}; $color = 0 if($color eq ''); my $form_str = createForm(); createCss(); my $msg = createMsg(); print << "__END__"; Content-type:text/html 自動バリエーション [kei\@sodanのトップ] / [HTML作成支援のトップ]

カラーバリエーション自動作成

☆Mozilla系でもちゃんと見れるようにしました。
$msg $form_str
__END__ if($color == 0){ @A = rgb2hsv(0x00, 0x33, 0x66); @B = rgb2hsv(0x33, 0x33, 0x99); @C = rgb2hsv(0xff, 0xff, 0xdd); @D = rgb2hsv(0x33, 0x33, 0x99); for($i = 0; $i < 12; $i++){ $shift = $i * 30; printStyle0(hsv2str(@D, $shift), hsv2str(@B, $shift), hsv2str(@C, 360-$shift), hsv2str(@A, $shift), hsv2str(@B, $shift), "#ffffff" , $shape, $shift); } } elsif($color == 1){ @A = rgb2hsv(0x00, 0x66, 0x99); @B = rgb2hsv(0xcc, 0xcc, 0xdd); @C = rgb2hsv(0xee, 0xff, 0xff); @D = rgb2hsv(0x66, 0x66, 0x99); for($i = 0; $i < 12; $i++){ $shift = $i * 30; printStyle0(hsv2str(@D, $shift), hsv2str(@B, $shift), hsv2str(@C, $shift), hsv2str(@A, $shift), hsv2str(@B, $shift), "#ffffff" , $shape, $shift); } } elsif($color == 2){ @A = rgb2hsv(0x44, 0x44, 0x99); @B = rgb2hsv(0x99, 0x99, 0xaa); @C = rgb2hsv(0xdd, 0xdd, 0xff); @D = rgb2hsv(0x44, 0x44, 0x99); for($i = 0; $i < 12; $i++){ $shift = $i * 30; printStyle0(hsv2str(@D, $shift), hsv2str(@B, $shift), hsv2str(@C, $shift), hsv2str(@A, $shift), hsv2str(@B, $shift), "#ffffff" , $shape, $shift); } } elsif($color == 3){ @A = rgb2hsv(0x44, 0x44, 0x99); @B = rgb2hsv(0x99, 0x99, 0xcc); @C = rgb2hsv(0xf0, 0xf0, 0xff); @D = rgb2hsv(0x44, 0x44, 0x99); for($i = 0; $i < 12; $i++){ $shift = $i * 30; printStyle0(hsv2str(@D, $shift), hsv2str(@B, $shift), hsv2str(@C, $shift), hsv2str(@A, $shift), hsv2str(@B, $shift), "#ffffff" , $shape, $shift); } } print << "__END__"; __END__ sub printStyle0 { my($h2_color, $h2_border_color, $h2_bg_color, $div_color, $div_border_color, $div_bg_color, $shape, $comment) = @_; my $h2_css = createCssColor($h2_color, $h2_border_color, $h2_bg_color); my $div_css = createCssColor($div_color, $div_border_color, $div_bg_color); print << "__END__";

Style 0 : $comment


__END__ } sub createMsg { return << "__END__"; 一番上のスタイルを手動で作って、それを元に自動的に色相を変化させてバリエーションを作りました。 スタイルと色を選んで、ボタンを押すと反映されます。
単純にオストワルトの色相環をくるくる回すだけではなかなかちゃんとしたスタイルが出来ないので、 適当に調整してます。例えば、一番目の「はっきり」では、枠の色と背景の色とで逆に回してます。
自動彩色とか自動配色というにはまだまだ人手が介在する点が多いけど、とりあえず一種類作れば 2,30パターンできるのは便利かなぁ、と。 いくつか微妙なパターンもあるけど、それは人手使って機械学習とかさせてみようかなぁ。

☆機械学習の実験もしてみました。詳しくはリンク先をどうぞ __END__ } sub createForm { $ret = << "__END__";