「今日のスダクリエイト」タグで作ったJavaScriptのコンテンツ

17900 ワード
es2015 SVG JavaScript TypeScript 今日のスダクリエイト JavaScript テキストリンク

Twitterで仲良くなったスダさんという方を題材に、この1年間 #今日のスダクリエイト というハッシュタグで趣味のコンテンツを作ってきました。自分が書きたいプログラムを定期的に書くことで、業務で扱う以外の技術の勘が鈍らなくなり、作ることの喜びやモチベーションが向上し続けました。

本記事では、ES2015+、TypeScript、SVG、WebGLなどを使ったインタラクションをピックアップし、その技術的な工夫点とともに紹介します。

SVG、fetch APIで泡アニメーション

SVGの線や塗りなどの形状をJavaScriptでコントロールしようとするとSVGのインライン展開が必要ですが、HTMLのコード量が増えてしまいます。HTML内にSVGコードは書かず、Fetch APIを用いてリソースをダウンロードしてパースし、CSSアニメーションを加えたデモです。

SVGを表示するHTMLコードは次のように、空のdivタグです。

HTML
<div id="container">
</div>

JavaScript(TypeScript)を用いてSVGコードをダウンロードしています。

TypeScript
fetch("./images/suda.svg").then((response) => {
      return response.text();
    });

素材の変更もすぐに可能です。

SVGとCSSでTwitterのいいね風アニメーション

SVGとCSSアニメーションでTwitterのいいね風アニメーションを作成しました。レイアウトにはCSS Gridを用いています。

ハート部分を「スダさん」のSVG要素に変更し、叫び声と共に爆発していくインタラクションを作りました。

SVG要素をパスに沿って移動する

SVG要素をパスに沿って移動させるインタラクションです。注射器を押す度に注入されるSVG要素「スダさん」が、大きなパスに沿って移動します。

移動経路となるパスは次のように定義しています。

HTML
<path id="linePath" fill="none"
          d="M311,159h-1s-3-10-4-17l-2-12c-2-7-6-23-12-35s-4-5-6-6l-4-3c-3-3-5-9-7-13V71c-6-14-19-23-30-30h-1c-6-4-12-7-18-9h-5c-4,0-6-1-10-4L184,7（中略）"/>

SVG時計

JavaScriptによるSVG要素の操作説明のために作った時計です。

TypeScriptとCreateJSでパーティクル表現

HTML5 Canvasのフレームワーク「CreateJS」を用いたパーティクル表現です。パーティクル発生時にマウスの加速度を加味しているので、マウスを早く動かすとパーティクルがより遠くに飛んでいきます。

パーティクル発生座標とマウス加速度を算出している部分は次のとおり。

TypeScript
  /**
   * MainLayerのtickイベント毎に実行される処理
   */
  public update(goalX: number, goalY: number) {
    // 発生装置はgoalに徐々に近づいていく。
    let dx: number = goalX - this._emitX;
    let dy: number = goalY - this._emitY;
    let d: number = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));  // 斜め方向の移動距離
    let rad: number = Math.atan2(dy, dx);    // 移動角度
    this._vx = Math.cos(rad) * d * 0.1; // 速度の更新
    this._vy = Math.sin(rad) * d * 0.1; // 速度の更新
    this._emitX += this._vx;
    this._emitY += this._vy;
    // アニメーション中のパーティクルの状態を更新
    this.updateParticleList();
  }

WebGL(three.js)

Twitterで仲良くなった@RR2arazさんが、練習のために作ったWebGL（three.js）の3Dコンテンツ。

面白そうな素材だったので、回転率とクレイジーさをアップしました。ES2015+で記述しています。

スダさんでコンテンツを作るのは楽しい

#今日のスダクリエイトで作るコンテンツは、仕事もお金も関係のない完全に趣味のもの。しかし、「この表現はどうするんだろう？」「この技術はどう使うのかな？」と試行錯誤することで、創作の喜びに満たされていきました。引き続き、趣味の「スダさん」を作っていこうと思います。