カテゴリー: デザイン

canvasで ”うにょうにょ動く円” を ”複数” 作ってみました

 

こんにちは、相変わらずプログラミングが覚えられないLQヒロシです。

業務の流れでcanvasで複数のうにょうにょ動く円を作ったのでレシピをまとめてみました。
参考にしたのはこちらの記事。
JavaScriptはじめました。 – くねくねする円を作ってみた。
NIJIBOX Creator’s Blog – JavaScriptで実装!理想の「うにょうにょ動く円」を求めて…

 

ただ上記の記事の内容では一つの円しか作れませんので、次の記事も参考にしてゴニョゴニョしてみました。

https://jsfiddle.net/39we73t1/

 

完成はこちら

See the Pen NLrpJv by hirotatsu fujimoto (@LQ_Hiroshi) on CodePen.

 

script全文はこちら

 

さっそく作り方を

 

うにょうにょ動く円の考え方としてはこちらの「くねくねする円を作ってみた」に詳しく載っていますので、ざっと簡単に言うと、

 

・10個のアンカーポイントをサークル上に2次元ベジェ曲線で作成し線でつなぐ
・コサイン波を利用して各ポイントをそれぞれ動かす

 

という感じでしょうか。実際のコードを見ながら説明していきたいと思います。

 

アンカーポイントはPointオブジェクトで生成しています。
ここはコサイン波の計算式が主になっていて、数学がからっきしの私は脳死で参照させていただいております。テヘ。
ちなみに9、10行目のthis.speedthis.rが乱数になっているのでこの数値を変更すると、うにょうにょするスピードや幅を調整できます。

 

次にイニシャル関数。一つの円だけで良ければPointオブジェクトをMAX(ポイントの数)分だけインスタンス化すれば良いのですが、複数の円を作成する場合はそれぞれの円で配列を作り、それぞれの円ごとにMAX分のpointインスタンスを持つというカタチで行っています。

 

円の配列については最初に定義(circles)していて、こちらに中心点座標、色、半径などのパラメーターを設定しています。中心座標と半径はPointオブジェクトに引き継がれ、色と各ポイントの配列は後述するdrawCircle関数に引き継がれています。

 

そしてイニシャル関数からupdate関数を呼び出し、Pointオブジェクトのupdateメソッドを呼び出して実際のアンカーポイントを生成しています。考え方は参照記事と同様なのですが、複数円を対応するのでこちらでも各円ごとに処理を行う必要がでてきます。
ポイントを生成したらdraw関数で描画を行いsetTimeoutで繰り返し処理を行っています。

 

描画について

 

draw関数はsetTimeoutで繰り返し実行されるので、まずはclearRectで描画を初期化します。引数でcirclesを渡し、円の数だけdrawCircle関数(実際の描画処理を行う関数)を実行しています。これはcircles内にある各円が色とアンカーポイント情報を持っているので、円ごとに一つづつ描画処理を行うためにこのように処理をしてみました。これはこちらの考え方を参考にしています。

https://jsfiddle.net/39we73t1/

 

drawCircle関数ですが、こちらは参考にした「JavaScriptはじめました。 – くねくねする円を作ってみた。」の処理方法を活用させていただいてます。引数で各情報を渡して2次元ベジェ曲線を描画し塗りつぶしています。最後にonloadcanvasお決まりの構文を書いてinitすれば完了です。

 

 

これを作成する前に複数の円を描画する記事をググって探してみたんですが、なかなか見当たらなかったので自作した次第なので色々と不手際な部分もあるかと思いますが、canvasでこのような表示をやってみたいと思っている方の一助になれば幸いです。それではまた!

 

以下、scriptの全文になります。


色の見え方と色覚多様性について

こんにちは。二年目デザイナーのハナです。

 

少し先の話になりますが、色彩検定のUC(ユニバーサルカラー級)が12月から始まりますね!

私も受ける気満々なんですが、注文した公式テキストがなかなか届きません…

とはいえ試験自体はまだかなり先なので、届いてからゆっくり勉強を始めたいと思います。

 

ちょうど一年前にこのブログでもユニバーサルカラーの話をしていましたが、今回はここから更に少し突っ込んだ話をしたいと思います。

 

色が見える仕組み

人間の目は、錐体と杆体という二種類の視細胞で光を感知しています。

杆体は主に暗いところで働く視細胞です。

暗い部屋に入ったとき最初は真っ暗で何も見えませんが、だんだん目がなれてきて薄っすらと周りが見えるようになってきます。

これは暗い部屋に入ってから杆体が働き始めるまで少しタイムラグがあるためです。

杆体は一種類しかないので、杆体しか働かない真っ暗な部屋では「色」というものを感じることはできません。

 

錐体は明るいところで働く視細胞です。

杆体は一種類しかありませんが、錐体はL錐体、M錐体、S錐体という三種類に分かれています。

L錐体は赤、M錐体は緑、S錐体は青をそれぞれ感知します。

目に入ってきた物の色が、赤い光が何%、緑の光が何%、青い光が何%で構成されているのかをLMSの錐体がそれぞれ感知し、脳でそのデータを組みあわせ、そこではじめて私達は見たものの色が何色であるか理解できるのです。

 

色覚多様性

…というのは、あくまでも杆体と錐体三種類が全て働いている人の話です。

全ての人間がそうであるとは限りません。

錐体が一種類でも働いていないと、色の見え方というのは大きく変わってきます。

杆体1色覚は杆体のみが働いている状態の色覚で、非常に視力が弱いです。

暗いところで杆体は正常に働きます。

 

1色覚は杆体と錐体一種類が働いている状態の色覚です。

S錐体1色覚は視力も非常に弱いです。

 

2色覚は杆体と錐体2種類が働いている色覚です。

欠けている錐体によって、1型、2型、3型と分類されます。

 

異常3色覚は、杆体と錐体2種類が正常に働いていて、一種類が異常である色覚です。

こちらも異常のある錐体によって、1型、2型、3型と分類されます。

見え方は2色覚と非常に似ています。

 

★マークのL・Mの2色覚と異常3色覚が特に多く、その他の先天的な色覚異常はまれです。

 

以上の先天的な色覚異常のほか、事故や病気による色覚の変化や、加齢によって以前見えていたように色が見えなくなる場合もあります。

 

まとめ

いろいろな個性の人がいるように色の見え方だって多様である、というのがユニバーサルカラーを考える上で重要な、色覚多様性という概念です。

自分が見ている色と同じ色を、必ずしもすべての人が見ているわけではないと念頭に置いておくことが大切であると思います。

 

もしかしたらここまで詳しい内容はUC級の試験には出ないかも…(公式テキストがまだ届いてないのでどこまで出題されるかわからない)

でも覚えておいて損はないので、よければ頭の片隅にでも置いていただけたら良いかなと思います。

あとこの内容は色彩検定1級の内容なので、1級の試験勉強の際に少しでも役立てていただけると幸いです。

 

UC級はあまり難易度が高くないんじゃないかな〜という個人的予想ですが、油断せずしっかり合格したいと思います。がんばりましょー!


Evernoteから、レイアウトが自由なMilanoteへ。

長年使ってきたEvernote。
ブログ記事をスクラップしたり、いいなと思ったデザインやコードを集めたり、いろんなものをEvernoteに詰め込んできました。

しかし、無料版の制限ができてから「変わりのものは無いものか」とモヤモヤしていました。
有料版に切り替えて使っていましたが、せっかくお金を使うなら、もっといいサービスは無いものかと…。

 

そこで、今回、使ってみようと思っているのは「Milanote」です。

 

「クリエイティブなEvernote」と呼ばれたり、「クリエイティブな仕事のためのメモアプリ」と呼ばれたりしています。
「Google」「Apple」「Facebook」などの企業で利用されているらしいです。

 

一度使ってみようと思い、登録してみました。
100ノートまでなら、無料で使えます。

登録は簡単で「Sign up for free」から、「名前」と「メールアドレス」と「パスワード」を入力して登録するだけです。

 

画面はすごいシンプルです。
左側にあるアイテムをドラッグ&ドロップして、ノートを増やしていきます。

基本は「Board」を追加してその中に、ノートを増やしていきます。
「Board」はフォルダのようなもので、何階層も作れそうです。(10階層以上作れました。)
それと、「Board」の広さも、無限に広がっていく感じでした。

 

オフィシャルの動画を見るとイメージが付きやすいかもしれません。

動画を見ても驚いたのですが、実際に操作してみると、その自由度と速さに感動してしまい、無制限の有料版に登録したくなりました。
(月払いだと、$12.5なので、ちょっとお悩みどころ…)

 

さらに、デフォルトでテンプレートがたくさんあり、「templates」から選ぶことができます。
その豊富さと整然とされた感じに圧倒されました。

 

[templates > Design > Design brief]

 

[templates > Marketing > Social media calendar]

美しいですね…。
これらのテンプレートがデフォルトで用意されており、ドラッグ&ドロップで好きな「Board」に設置できます。
こうやって、アイディアを綺麗にまとめることに、強いあこがれを持っているので、しばらく利用してみようと思っています。

 

いきなり、「Milanote」のみするのではなく、とりあえずのメモや記録は「Evernote」や「Google Keep」を使って記録して、それを「Milanote」に移して使うといろんなことがまとまりやすいのではないかと思っています。

 


Webスクレイピングをはじめてみました(1)

 

こんにちは、長年Webデザインに携わってきましたがプログラミングがなかなか覚えられないLQヒロシです。

今回は一念発起して、流行りのPythonWebスクレイピングをしながらプログラミングを勉強していこうという試みです。

なぜWebスクレイピングなのか?

 

PHPのちょっとした修正や、jQueryを使ったクリックやリサイズの簡単なイベントぐらいはできるけど、そこから先になかなか進めない・・。デザイナーなんだしJavaScriptUI周りのエフェクトとかを実装できるようになりたいと思ってはいるのですが、UI周りってイベント同士が絡んだりすると途端に難しくなってなかなか続かないのが目下の課題だったりします。

簡単なアウトプットを段階的にこなしていって、ファンクションのまとめ方だったり、データのやり取りなどプログラミングの勘所を掴んでいけるのが理想的ですよね。

Webスクレイピングであれば、WebサービスのAPI活用・クローリングでのデータの収集、データベースへの保存や取り出し、データの加工の作成という一連の流れが小規模なカタチで勉強できるので、体系的にポイントを抑えた勉強ができそうです。データを加工するのに正規表現も使うことになりそうだし。

 

プログラミング言語はpythonを使用し、ツイッターと連携して画像を収集しギャラリーサイト作成を最終的な目標としたいと思います。

 

第一回目は、スクレイピングとPythonについてご紹介できればと思います。

そもそもWebスクレイピングとは?

 

厳密にはクローリングとスクレイピングに分けることができます。

・クローリング
WebサイトのハイパーリンクをたどってWebページを探す作業

・スクレイピング
Webページから必要な情報を抜き出し、整形し直す作業

例えば、電子書籍の販売サイトから書籍情報を抜き出して価格を比較、最安値の情報のみをまとめるなど、要するに複数のWebサイトから任意の情報だけを抜き出し、雑多なデータを整理して有益な情報にすることでしょうか。

Pythonって何?おいしいの?

 

GoogleFacebookで採用されていて、機械学習やIoTの事例も多い現在最も旬な言語とも言われていますので、おいしいです。他のプログラミング言語同様、WindowsMacOSLinuxなどのプラットフォームで動作でき、環境構築・Webシステムの開発~データ解析までひとつの言語で実現できることから世界中で広く使われています。

Pythonの特徴

 

文法が読みやすい

 

プログラムは一度書かれた後も他の人に読まれるもの。pythonでは「シンプルで読みやすいコードが書けること」という設計思想があり、コード上の装飾が極力少なくなるような記述方法になっています。少し文例を見てみましょう

実行結果:hogeです

 

このように文の終わりに閉じタグが必要なく、制御構文では影響する範囲を括弧で囲む代わりにインデントで定義。変数は代入するだけで宣言されたことになるのでとてもすっきりとして読みやすいコードになります。

Pythonってなんだか難しそうなイメージがありましたが、PHPなどと比べても別段特殊な書き方をしているわけでもなく、文法が見やすいので非常に馴染みやすく感じました。教育の現場でも採用されていたりするそうで、プログラミング初心者にも学びやすい言語だと思います。

 

・導入が簡単!

 

MacならHomebrewでインストールするだけですぐに使えました。コンパイルする必要もないので、ぶっちゃけ笑ってしまうぐらい早いですwww

(以前PHPを導入した際は、php.iniファイルの設定を調整したり、事前にDBを用意したりと面倒だった思い出があります。)

 

・豊富なライブラリ

 

Pythonには正規表現、数学関数、通信プロコトルなどの標準ライブラリが非常に豊富でインストールするだけで利用が可能です。さらにサードパーティ製のライブラリも豊富に提供されています。最近ではディープラーニング用のTensorFlowなどが有名ですね。データ解析のライブラリも強力で、スクレイピングしたデータをインフォグラフィックとして表現できたりもします。

 

それではPythonの導入方法を見てみましょう

 

Pythonは2系と3系があり、現在は3系が主流になりつつあります。2系と3系の間には互換性がありません。Macではデフォルトでインストールされていますが2系だったりするので、Homebrewで3系をインストールします。

 

 

バージョンを確認してみましょう

 

Homebrewでインストールしたものが参照されているか確認します。

と表示されれば準備は完了です。

 

では、対話方式でプログラム実行できる「インタラクティブシェル」でPythonを動かしてみます。やり方はターミナル上で「python3」と入力するだけですw

立ち上がったら上記のようなメッセージが表示され、コマンド受付状態になります。では、構文を入力してみましょう。

はい、これだけですw簡単ですw

 

終了する時は

または

これでbashに戻ることができます。

 

第一回目は以上になります。説明や導入を中心に駆け足でご紹介してきました。
まだまだ勉強中の身のため、上手く伝えられず分かりにくい部分が多々あると思いますが、次回からは実際にPythonを利用して少しでも魅力をお伝えできればと思います!


カメラの基本講座 その2 「シャッタースピード」編

こんにちは。デザイナーKです。
今回は前回の記事に引き続き、写真撮影の際の基本となるカメラの「シャッタースピード」に重点を置いた記事を書いてみたいと思います。
記事全般を通して、一眼レフを使用した際の事例になるかと思いますので、その点ご了承下さいませ。

「シャッタースピード」とは

「シャッタースピード」はその名の通り、カメラのシャッターが下りる時間の長さのことをいいます。「シャッタースピード」は「SS」とカメラの設定で言われることもあります。
一眼レフなどの機能では「シャッタスピード優先モード」を使用することにより、シャッタスピードを制御して撮影することが可能になります。
通常、一般的な一眼レフカメラで設定できるシャッタースピードは「1/4000秒(ハイアマ、プロ機などは1/8000秒)〜30秒」となっており、「1/4000秒」が最も短く、「30秒」が最も長いシャッタースピードとなります。
また、「バルブ撮影」という30秒以上シャッターを開き続ける設定もあります。

なにが違うのか?

それでは実際にシャッタースピードを変えて撮影すると何が違うのか、シーンを想像しながら説明します。

シーン1)シャッタースピードを短くして撮影する場合

鳥などの動物や自動車や電車などの動きが早いものを撮影するときは、シャッタースピードを短く(1/1000〜1/4000など)設定します。
シャッタースピードを短く設定するとシャッターの下りる時間が短くなり、光をセンサーに取り込む時間も短くなります。
そのため、早く動くものに対してはシャッタースピードを短く設定することによってとても短い時間を写すことが可能になります。

 

撮影例 梅の花から飛び立つメジロさん


シャッタースピード 1/1000 F値(絞り) 5.6

 

シーン2)シャッタースピードを長くして撮影する場合

暗い場所や夜景、花火などを撮影するときは、シャッタースピードを長く(1秒〜バルブ撮影)設定します。
シャッタースピードを長く設定するとシャッターの下りる時間が長くなり、光をセンサーに取り込む時間が長くなります。
そのため、暗い場所でも光を取り込む時間が長くなるため、シャッタースピードを長く設定することによってとても長い時間を写すことが可能になります。
花火撮影などではバルブ撮影を行い、花火が打ち上がった瞬間から炸裂してから花火が消えるまでの間、ずっとシャッターを開けることによって花火の全景を撮影することも可能になります。
他にも、夜空に浮かぶ星なども、街の明かりが少ない山奥などに行って15秒間ぐらいシャッターを開けることによって綺麗に浮かび上がってきます。

 

撮影例 夜空に浮かび上がる天の川
シャッタースピード 15秒 F値(絞り) 4

 

シャッタスピードをマスターして思い通りの写真を撮ろう!

シャッタースピードをマスターすると、人間の目では見ることのできない瞬間を写真に収めることができます。新たな発見やイマジネーションも生まれること間違いなしです!ぜひシャッタースピードを駆使して写真に挑戦してみて下さい!
デザインはもちろん、それに加えてカメラや写真が大好きな人も弊社では募集中です!!
ぜひこちらからお気軽にお問い合わせください^^