Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

ColorWheel を作成中…::(っ`ω´c)::💦 + Chroma.js さんが秀逸過ぎる

⌬JavaScript ✿デザイン ★ ピックアップ

Brian Grinsteadさんのコードを参照させて頂き、ColorWheelの仕組みを理解し、もう一度自分で作れるか一から自作中です✨

Colorwheel 1K - Brian Grinstead

don't code today what you can't debug tomorrow: color wheel on Canvas

 

jsコード自体は短いのですが、使っている内容に色々な要素が盛り込まれていたため、只今苦戦中です…৲(๑*д*๑)◞՞??

 

JavaScript で Color Wheel を描くには…

  • <canvas></canvas> の DOM プロパティ・メソッド
  •  コンピューターでの色表示関連 ( Color Space/ Model | sRGB, HSL, HSV, Labなど)
  • Geometry ( 三角関数・図形あたり )
  • Color Conversition ( HSL to RGB )

 

が必要のようです。

Maths is Fun! さんの Geometry (三角関数・図形) 周りを参照しながら、ちょっとずつ進めています。うん、高校の時に習ったけど、何となくしか覚えていない…そしてうる覚えはほとんど使い物になりませんでした…::(っ`ω´c)::💦

そして、 sinθ(サイン) がどいう事を表しているか、今← はっきりと理解しました(*⚫︎ー⚫︎)b🌟 w

 

絶賛奮闘中ですもんげ~(  Д ) ゚ ゚

 

Chroma.js

https://gka.github.io/chroma.js/

f:id:DDramonQ:20170202000959j:image

 

ざっくり概要

  • 色の玉手箱ような、幅広い機能性
  • 種々のカラーモデル毎(RGB, HSV, HSL, Lab, Color Brewerなど)の、グラデーションを簡単に作成できる。
  • 連続グラデーション・非連続グラデーションどちらも。段階数(step)も指定できる

 

ざっと眺めるだけでも、なんとなくどんな感じか分かるかと思います。また、解説の例が、デモ機能も備えているので、color hex(#xxxxxxのやつ) を入力すれば、実際にどのような感じで使えるのかがわかります。うん、その機能自体がもうすんばらしぃです、はい(ˊo̶̶̷ᴗo̶̶̷`)✨✨♪

 

それにしても、まぁ本当にすごいの一言です。恐ろしく広範な量の知識を知り 且つ、JavaScript のスキルも高くないとこれを実現するのは難しい。

僕も触りだけですが、hsl, hsv, lab についてのWiki記事を読みましたが、数式(数学)の知識が少し必要なようですね(;´Д`A💦

 

このライブラリの著者さんは、アメリカの世界的にも有名な新聞、The New York Times でデータ・ビジュアリゼーションを専門にされている方だそうです。統計データを、「分かりやすく、見易く、綺麗に」描写する事を専門にされておられるので、『色』に関してもプロフェッショナルな方なのですね~(*ö*)🌟

 

 

 

 

 

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️