Google Analyticsで変なトラフィックがあった。
なんだこれ、と思ったらすぐに分かった。
キャンペーンのタブをクリックしたらFeedからのアクセスだった。
初めて見たのでちょっとびっくり。
アイディア、コード、デザインなどの断片集 (忘れっぽい自分のための備忘録) snippets of idia, programming, php, design etc. (memos for space cadet)
2010-11-14
2010-11-10
ブレンドモード・色相/彩度/カラー/輝度のまとめ
Photoshop, Illustrator, Fireworksなどの画像編集ソフト(ざっくりだな)を使うときに、良くカラーのブレンドってやりますよね。
"乗算"とか"スクリーン"とか"反転"とか"削除"とか。
まぁ、このあたりは直感的に分かるんですが、"色相"・"彩度"・"カラー"・"輝度"なんてのになると、訳が分からなくなるのは僕だけじゃないはず。
「何で、水色の上に茶色を色相でブレンドしたらオレンジ色になるん??」
なんて思っている人は僕だけじゃないはず。
と言う事でそのあたりをまとめてみました。
まずは、基本中の基本。
色の仕組み。
WEB屋さんだと色はRGBで考えがちですが、HSL(H:色相、S:彩度、L:輝度)で表現することもあります。(Figure.1,2)
CSS3使っている人は知ってるかも。
あえて詳しく説明する必要もないでしょう。
ブレンドモード"色相"とは、"ベースカラーの彩度と輝度"と"ブレンドカラーの色相"を合わせた色にすることです。
ブレンドモード"彩度"とは、"ベースカラーの色相と輝度"と"ブレンドカラーの彩度"を合わせた色にすることです。
ブレンドモード"輝度"とは、"ベースカラーの色相と彩度"と"ブレンドカラーの輝度"を合わせた色にすることです。
ブレンドモード"カラー"とは、"ベースカラーの輝度"と"ブレンドカラーの色相と彩度"を合わせた色にすることです。
…と、Adobeさんの説明を噛み砕いて書いてみましたが、はい?って感じです。
これで分かる人は賢い人ですね。
分からない人は次の図を見て下さい。(Figure.3,4)
上図の左がベースカラー(色相:中、彩度:中、輝度:中)です。右がブレンドカラーです。
「ブレンドモードで指定した要素のみ上書きする」と考えれば分かりやすいです。(余計分かりにくいですか?)
これが理解できればデザインの幅が少し広がりますね。
じゃあ、"焼き込み(リニア)"とか、"ハードミックス"はどうなんだって?
知りません。
また機会があればまとめます。
(余談)
輝度って「きど」って読むんですね。
読み方が分からず「けいど」って言っていました。お恥ずかしい。
(2010.11.12追記)
こちらの記事が大変詳しいです。
http://ofo.jp/osakana/cgtips/blendmode.phtml
"乗算"とか"スクリーン"とか"反転"とか"削除"とか。
まぁ、このあたりは直感的に分かるんですが、"色相"・"彩度"・"カラー"・"輝度"なんてのになると、訳が分からなくなるのは僕だけじゃないはず。
「何で、水色の上に茶色を色相でブレンドしたらオレンジ色になるん??」
なんて思っている人は僕だけじゃないはず。
と言う事でそのあたりをまとめてみました。
![]() |
(Figure.1) |
![]() |
(Figure.2) |
色の仕組み。
WEB屋さんだと色はRGBで考えがちですが、HSL(H:色相、S:彩度、L:輝度)で表現することもあります。(Figure.1,2)
CSS3使っている人は知ってるかも。
あえて詳しく説明する必要もないでしょう。
ブレンドモード"色相"とは、"ベースカラーの彩度と輝度"と"ブレンドカラーの色相"を合わせた色にすることです。
ブレンドモード"彩度"とは、"ベースカラーの色相と輝度"と"ブレンドカラーの彩度"を合わせた色にすることです。
ブレンドモード"輝度"とは、"ベースカラーの色相と彩度"と"ブレンドカラーの輝度"を合わせた色にすることです。
ブレンドモード"カラー"とは、"ベースカラーの輝度"と"ブレンドカラーの色相と彩度"を合わせた色にすることです。
…と、Adobeさんの説明を噛み砕いて書いてみましたが、はい?って感じです。
これで分かる人は賢い人ですね。
分からない人は次の図を見て下さい。(Figure.3,4)
![]() | |
(Figure.3) |
![]() |
(Figure.4) |
「ブレンドモードで指定した要素のみ上書きする」と考えれば分かりやすいです。(余計分かりにくいですか?)
これが理解できればデザインの幅が少し広がりますね。
じゃあ、"焼き込み(リニア)"とか、"ハードミックス"はどうなんだって?
知りません。
また機会があればまとめます。
(余談)
輝度って「きど」って読むんですね。
読み方が分からず「けいど」って言っていました。お恥ずかしい。
(2010.11.12追記)
こちらの記事が大変詳しいです。
http://ofo.jp/osakana/cgtips/blendmode.phtml
2010-11-02
[html5]canvasタグで月の満ち欠けを書いてみる
今回はCanvas - HTML5.JPを参考にしながら、月齢から月の形を計算して、canvasに出力したいと思います。
とりあえず、canvasのIDを取得するJavascript関数を作ります。
Canvasの使い方 - Canvas - HTML5.JP に詳しい情報があります。
まず初めに満月を書いてみましょう。
DEMO(月の色が変なのは気にしない)
次は、月が欠けた分だけ影を追加したいと思います。
上から黒で塗りつぶしても良いけど、芸が無いので、
次は、影の形を計算したいと思います。
ややこしいので、月の形を完全な球、月の軌道を完全な円にしてしまいます。
つまり、月齢0の時は全部影になって、右の方から光が当たり始めて、月齢7.5で半月(上弦の月)、月齢15で満月。
その後は右から徐々に影が増えて、月齢22.5で半月、月齢30(月齢0)で新月。
影の左右端はコサインで計算できそうだな。
月の中心座標を0,0として、影の左右端x座標をmoon_xとしよう。
月齢0~15のとき、moon_xが-moon_rから+moon_rに変化して、
月齢16~30のとき、moon_xが-moon_rから+moon_rに変化するんだから・・・
後々、逆にしておく事で計算が簡単になるんだ。
半円の影とmoon_xを結ぶ片側が潰れた円を描けば良いので最終的にこうなります。
制御点の計算が難しかったのですが、こちらを参考に係数をa=0.5522847として決めて様子見したところ、上手くいっていたのでそのまま採用しました。
そんなこんなで、色々とキャンバスの理解につながったので良かった。
「今日のお月さま」というサービスでアップしたので、良かったら見て下さい。
今日のお月さま作成にあたり参考にしたサイト
月齢カレンダー
http://koyomi.vis.ne.jp/moonage.htm
Canvasリファレンス - HTML5.JP
http://www.html5.jp/canvas/ref.html
s.h's page - [graphic] ベジエ曲線
http://park12.wakwak.com/~shp/cgi-bin/wiki.cgi/view/bezier_curve
月齢 - Wikipedia
http://ja.wikipedia.org/wiki/%E6%9C%88%E9%BD%A2
とりあえず、canvasのIDを取得するJavascript関数を作ります。
function getCanvas (canvasID) { var canvasObj = document.getElementById(canvasID); if (canvasObj && canvasObj.getContext) { return canvasObj.getContext('2d'); } return false; }これを作ってしまえば、今後キャンバスを使う際に使い回しができます。
まず初めに満月を書いてみましょう。
function drawMoon () { var c = getCanvas('TheMoon'); // 月の半径 var moon_r = 100; // グラデーションの設定 var gd = c.createRadialGradient(135,135, moon_r*0.9, 140,140, moon_r*1.2); gd.addColorStop( 0, 'rgb(233, 84, 100)' ); gd.addColorStop( 1, 'rgb(123, 74, 80)' ); // 円を塗りつぶす c.beginPath(); c.arc( 140, 140, moon_r, 0, Math.PI*2, true); c.fillStyle = gd; c.fill(); } // HTML // <canvas id="TheMoon" width="280" height="280"></canvas>canvasのメソッドについてはCanvas - HTML5.JPを見てね。本稿では解説しません。
drawMoon()
を実行すると、半径100pxの円形グラデーションが適用された円が表示されます。DEMO(月の色が変なのは気にしない)
次は、月が欠けた分だけ影を追加したいと思います。
上から黒で塗りつぶしても良いけど、芸が無いので、
globalCompositeOperation
プロパティを使って、円に重ねた影の領域を円から削除します。c.globalCompositeOperation = 'destination-out';これで準備OK。
次は、影の形を計算したいと思います。
ややこしいので、月の形を完全な球、月の軌道を完全な円にしてしまいます。
つまり、月齢0の時は全部影になって、右の方から光が当たり始めて、月齢7.5で半月(上弦の月)、月齢15で満月。
その後は右から徐々に影が増えて、月齢22.5で半月、月齢30(月齢0)で新月。
影の左右端はコサインで計算できそうだな。
月の中心座標を0,0として、影の左右端x座標をmoon_xとしよう。
月齢0~15のとき、moon_xが-moon_rから+moon_rに変化して、
月齢16~30のとき、moon_xが-moon_rから+moon_rに変化するんだから・・・
var moon_grow = (age>15)? true: false; var moon_x = Math.cos(age/30*Math.PI*2) * moon_r * (moon_grow? -1: 1);こんな計算をしてやればOK!
(age>15)? true: false;
って条件が反対じゃないかというツッコミが来そうですが、良いんです。後々、逆にしておく事で計算が簡単になるんだ。
半円の影とmoon_xを結ぶ片側が潰れた円を描けば良いので最終的にこうなります。
function drawMoon (age) { var c = getCanvas('TheMoon'); var a = 0.5522847; var moon_grow = (age>15)? true: false; var moon_r = 100; var rate = Math.cos(age/30*Math.PI*2); var moon_x = moon_r*rate * (moon_grow? -1: 1); var gd = c.createRadialGradient(135,135, moon_r*0.9, 140,140, moon_r*1.2); gd.addColorStop( 0, 'rgb(233, 84, 100)' ); gd.addColorStop( 1, 'rgb(123, 74, 80)' ); c.beginPath(); c.arc( 140, 140, moon_r, 0, Math.PI*2, true); c.fillStyle = gd; c.fill(); c.globalCompositeOperation = 'destination-out'; c.beginPath(); c.fillStyle = 'rgb(192, 70, 80)'; c.arc( 140, 140, moon_r, Math.PI*1/2, Math.PI*3/2, moon_grow); c.bezierCurveTo( 140+a*moon_x,140-moon_r, 140+moon_x,140-a*moon_r, 140+moon_x,140); c.bezierCurveTo( 140+moon_x,140+a*moon_r, 140+a*moon_x,140+moon_r, 140,140+moon_r); c.fill(); }
c.bezierCurveTo()
メソッドで3次ベジェ曲線を使って楕円を描画しています。制御点の計算が難しかったのですが、こちらを参考に係数をa=0.5522847として決めて様子見したところ、上手くいっていたのでそのまま採用しました。
c.arc( 140, 140, moon_r, Math.PI*1/2, Math.PI*3/2, moon_grow);
で月齢16を境に、右半円、左半円を切り替えているところがポイントですかね。そんなこんなで、色々とキャンバスの理解につながったので良かった。
「今日のお月さま」というサービスでアップしたので、良かったら見て下さい。
今日のお月さま作成にあたり参考にしたサイト
月齢カレンダー
http://koyomi.vis.ne.jp/moonage.htm
Canvasリファレンス - HTML5.JP
http://www.html5.jp/canvas/ref.html
s.h's page - [graphic] ベジエ曲線
http://park12.wakwak.com/~shp/cgi-bin/wiki.cgi/view/bezier_curve
月齢 - Wikipedia
http://ja.wikipedia.org/wiki/%E6%9C%88%E9%BD%A2
登録:
投稿 (Atom)
人気のエントリー
-
今月8日に クックビズ株式会社 に転職したtomotomoでございます。 リスクヘッジのために断っておきますが、このブログは私個人の思想・思考をメモしておくためのものであって、私の勤務先の考えとイコールではありません。 (ああ、正社員て何て面倒なんだ。…という発言も私個人の発言...
-
今までずっと独学でHTMLやらプログラミングやらやってきました。 子供の頃からパソコンで何か作るのが好きで、とうとう職業にしちゃったわけです。 そんなわけで・・・ ライセンスについて今までちっとも勉強してこなかった! 英語やら法律用語やら専門用語やらで今まで読む気がし...
-
先日、久しぶりに新しい分野、Androidアプリに手を出してみて、自分に向いている学習法を思い出したのでメモしておく。それって言語じゃなくない?とか言われると困る。 まず、 悪い学習法 。 去年から何度も Androidアプリを作ろう と思うも、PHPerの自分には...
-
先日、ちょっとしたミスでXAMPPをぶっ壊してしまい、起動しなくなりました。 1.6.xを使ってたんですが、久しぶりに公式サイトを覗いたら1.7.3まで出てるじゃーん。アップグレードしよう。なんて、思ってアップグレードパッケージを使った後に、1.7.2-1.7.3専用だと気付くも...
-
最近、開発の前線から遠のいて久しい。もはやエンジニア達が話していることの内容が分からなくなりつつある。やばいなぁと思っても中々勉強する時間を取れない。 と思っていたところ嬉しいニュースが。 PHPのバージョン7が今年の11月12日にリリースするらしい。( PHP7調査(3...