Go to Qiita Advent Calendar 2024 Top
LoginSignup
15
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@tonkotsuboy_com(鹿野 壮)

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

Last updated at Posted at 2017-12-06

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

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

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

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

- [デモURL](http://jsdo.it/tonkotsuboy/q1qt/fullscreen) - [ソースコード](https://github.com/tonkotsuboy/testCodes/tree/feature/svgtest/170430_svg/svg5-suda-rainbow)

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コンテンツ。

sudakorogashi_1.gif

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

sudakorogashi_2.gif

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

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

15
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?