Canvasを利用したアニメーション作成について

Question

タイトルの通りCanvasを利用してアニメーションの作成を行っています。
アニメーションの内容としてはマージソートを作っています。
キーボードから入力された数値を適用し、それをソートするアニメーションを考えているのですが入力された数値をアニメーションとして動かすことは可能なのでしょうか？
数値自体が画像データとして出力されてしまい、数値としての値を持つか判断がつかずわかりません。

ご教授よろしくお願いします。

Answer 1

Canvas に描かれている内容を数値として、再利用するのはおそらく不可能だと思います。
ただ、今回の場合は、キーボードから入力された数値を変数（配列？）に保存しておけば良いだけではないでしょうか。

「キーボードから入力された数値をソートする」と「Canvas でアニメーションを行う」を別の物として考えることが無理ということであれば、話が変わってきますが。。。

Comments

[realize18]

ご回答ありがとうございます。
その方法だとキーボードで入力された値で行ったソートするプログラムをアニメーションに連動させて動かす方法がわからず困っています。

[usk]

まず、大前提として、、、

1. アニメーションを行うプログラムを記述することは可能でしょうか？
2. マージソートを行うプログラムを記述することは可能でしょうか？

両者を正しく理解・記述できるのであれば、１の後に２を行う（もしくはその逆）で実現できるはずです。
もし、リアルタイムに入力値を保存した配列を操作したいということでしたら、アニメーションの部分部分（隣り合う数値が入れ替わったタイミング）で配列を操作すれば良いだけだと思います。

「A, C, D, F」の配列があったとして、Bが入力値の場合、、、
１．FとBの入れ替え
２．DとBの入れ替え
３．CとBの入れ替え
→ ソート完了
となると思いますが、１～３のタイミングで配列を書き換えればよいだけです。

なお、Javascript でソートを行いたいのであれば、下記のサイトにコードがあります。
（私のほうでは動作検証を行っておりませんが・・・）
http://110chang.com/knowledge/javascript-sort-argorythm/

[realize18]

1についてはあまり理解が出来ていないため、現状不可能です。
２についてですが、JavaScriptでソートを行うプログラムを記述は可能なのですが、キーボード入力によって値を与えてそれをソートすることが出来ない現状です。
何か参考になるものなどがあればご教授お願いします。

[usk]

どうやったらいいかわからないという時は、具体的に行うべきこと（手順など）を細かく分解し、それを元にできること、できないことを洗い出してみてください。
どんどん細かくすることで、必要なものが見えてくると思います。

私が同様の課題を与えられた場合、まずは下記を考えます。

1. キーボードの入力値をJavascriptで取得する方法を実現する
2. 入力内容を維持する方法を実現する（１にて取得した値を、配列に格納する）
3. 入力したデータをソートする方法を実現する
4. Canvas 領域にて文字を出力する方法を実現する
5. Canvas 領域にて、文字を動かすアニメーションを実現する

1. キーボードの入力をJavascriptで取得する方法を実現する
→ OnKeyDown, OnKeyUp, OnClick 等で可能
ただし、２桁以上の整数を取り扱う必要があるなら、input タグ + Button アクションのほうが無難化も。

例：
http://phpjavascriptroom.com/

2. 入力内容を維持する方法を実現する
１にて取得した値を、配列に格納する

3. 入力したデータをソートする方法を実現する
配列をソートするJavascript を記載する

4. Canvas 領域にて文字を出力する方法を実現する
5. Canvas 領域にて、文字を動かすアニメーションを実現する
下記サイト等を参考に、自分なりのアニメーションを構築する（ぉ

例：
http://qiita.com/nekoneko-wanwan/items/33afa5d20264c83b2bd1