createJSで弊社のロゴを描く

はじめに

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

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

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

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

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

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

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.

https://createjs.com/

まずは完成形から

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

See the Pen A Pen by FOURIER Inc. by FOURIER Inc. (@fourier-inc) on CodePen.

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

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とほぼ同じタイミングになり、動きが滑らかになるはずです。

See the Pen A Pen by FOURIER Inc. by FOURIER Inc. (@fourier-inc) on CodePen.

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

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

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

See the Pen A Pen by FOURIER Inc. by FOURIER Inc. (@fourier-inc) on CodePen.

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

See the Pen A Pen by FOURIER Inc. by FOURIER Inc. (@fourier-inc) on CodePen.

まとめ

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

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

CreateJSとは - ICS MEDIA

このサイトはHTML Canvasのフレームワーク「CreateJS」の入門サイトです。canvas要素を使ってWebサイトに動きのある表現を取り入れましょう。

https://ics.media/tutorial-createjs/basic/

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

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