Tech blog Produced by FOURIER

createJSで弊社のロゴを描く

Takahashi Takahashi 2023.05.16

はじめに

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

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

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

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

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

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

まずは完成形から

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

See the Pen spectrum-web-analyzer 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 spectrum-web-analyzer 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 spectrum-web-analyzer by FOURIER Inc. ( @fourier-inc )on CodePen .

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

See the Pen spectrum-web-analyzer by FOURIER Inc. ( @fourier-inc )on CodePen .

まとめ

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

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

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

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

Takahashi

Takahashi / Engineer

主にWordPressを担当しています。趣味はフットサル、サッカー観戦。