createJSで弊社のロゴを描く

はじめに

(株)フーリエの企業名は、フーリエ変換からとったものです。

フーリエ変換とは、一言で言うと｢重なりあった異なる周波数の波を、周波数毎に分離する｣ 方法です。

↑あまりピンとこないかもしれませんが、スタイリッシュな企業名ですよね。

企業名がスタイリッシュなので、企業ロゴもスタイリッシュなわけです。

ロゴの点と長棒はモールス信号になっていて、「FOURIER」の文字を表しています。

今回はこのスタイリッシュなロゴをcanvasのライブラリである createJS を用いて作成し、アニメーションで様々な動きをつけていこうと思います。

まずは完成形から

以下のようにして弊社のロゴを作成することができました！

オブジェクトを表示する流れ

createJS ではStageオブジェクトに表示オブジェクトを追加することでコンテンツを作っていきます。

舞台の演劇で例えると、ステージを用意した段階です。

// Stageオブジェクトを作成
let stage = new createjs.Stage('canvas');

表示オブジェクトには主にシェイプ、画像、テキストの3種類が用いられます。

例としてシェイプを生成します。

先ほどの例えで言うと、シェイプは役者を意味します。

// シェイプを作成
let circle = new createjs.Shape();

生成したシェイプをステージに追加します。

これは役者をステージに立たせることを意味します。

// シェイプをステージに追加
stage.addChild(circle);

createJS でオブジェクトを表示するための、おおまかな流れは以上になります。

動きをつける

回転（rotation）

createjs.Ticker.timingMode で回転速度を調整することが可能です。

60FPSを設定している場合は、 createjs.Ticker.RAF と設定することを推奨します。

RAFというタイミングは1秒間に60回発生し、60FPSとほぼ同じタイミングになり、動きが滑らかになるはずです。

単振動（Math.sin, Math.cos）

三角関数を利用してオブジェクトを単振動させることが可能です。

let a =  50; // 振幅（振り幅）
let angle = 0; // 振動数（上下運動の速度）
function handleTick() {
  container.y = 150 + Math.sin(angle) * a;
  angle += 0.1;
};

最後に、クリックしたときに単振動、マウスオーバーしたときに回転させる合わせ技！

まとめ

createJS には他にも様々な機能がございます。

下記サイトにわかりやすくまとめてありましたので詳しくはそちらをご参照ください。

createJSを使うことで簡単にcanvasを実装することが可能です。

是非試してみてください。