アートでjavascriptを学びたい

質問

皆様、よろしくお願いいたします。

私は現在WEBデザイナーとしてUI設計業務とコーディングを行っております。

最近、（生の）JavaScriptの学習を開始しました。
レベルは入門者向けのJS本を読んでいる程度です。具体的には、
・JavaScript本格入門
・よくわかるJavaScriptの教科書
・HTMLとCSSで基礎から学ぶJavaScript
・WEBサイト制作者のためのJavaScript入門講座
などです。
（パーフェクトJavaScript、独習JSは難易度が高かったです）

スキル的には既存のコードを読み解き修正を加えるレベルで、
100行以上のコードを書くことはできません。
また、実務ではjsはエンジニアに任せることがほとんどで、自分で書くことはほとんどありません。

このような状態でなぜJSを習得したいかと言いますと、
・1.ある程度フロントエンドに精通したい（HTML/CSSは分かるので、加えて「JSも任せろ」と言える状態になりたい。）
・2.jQuery等のライブラリ依存から脱却したい
・3.Titaniumでアプリ開発など、JSスキルを流量したい。
などの思惑があるためです。

ただ、JSの必要性は強く感じているのですが、書籍を追って制御構造などのコードを書くだけでは、学習モチベーションを高い状態で保つことが難しいです。
しかし、昔processingやFLASHを触っていたため、アニメーションが発生するもの、特にインタラクティブな物を作成すること対しては興味があります。

とはいえ、processingやactionscriptでは現状の業務に直接結びつかないため、
javascriptでアート系作品を公開しているサイト、書籍、勉強法などはないか、
というのが今回の質問意図となります。

jsDoitはすでに見ていますが、非常に高度な作品が多いため、
順序立てて導入から解説されているような物があれば幸いです。

また、元デザイナー、コーダーで現在jsを使った業務に携わられている方が
いらっしゃいましたら、どのように学習を進めて行ったのか、
教えていただけますでしょうか？

以上となります。お手数ですが、ご回答どうぞよろしくお願いいたします。

回答No.3

35fa8e3c · ベストアンサー

一端の情報系の学生ですが、失礼いたします。

■前置き
確かに既存のライブラリは便利であればあるほど自由度が低くなります。
アニメーションひとつにしても速度関数の種類で動作感が変わりますよね。

モチベーションについてですが、技術習得を中心にして実装するのと、実装を中心にして技術本をコンサルトするのとは真逆ですが、私は後者です。
そして、後者の場合、実装中の疑問をその都度グーグルで検索すれば事足りる、というのが現代の現状です。（基礎的なことをしっかり知るためには書籍が頼れるかもしれません。）
私は心が折れそうなときは、イメージの最終形態に少しでも近づけるよう、フリーの画像や効果音をあさりに出かけます（パソコンの中で）。

■結論
アートのサイト：わかりません
書籍：基礎がわかる書籍（アートをやりたいということでクラスの作り方をしっかり解説している書籍の中からレベルを選んでいただけるといいと思います。アートは存在する物体とクラスを綺麗に結びつけると途端に書き易くなります。）
勉強法：作りたいアートの最終形態をイメージして、実装中に出た疑問をその都度グーグルで調べる

■以降、Javascriptでアートしか作成しない私がアートを作成する際にすることを記します。参考までに。

イメージ → 概念構成 ← プログラム

まず、作品の最終形態をイメージします。何を作りたいか。
なにが作れるのか、は「Javascriptの仕様的に無理だ」と挫折してからでいいのでとにかくイメージします。
そしてそのイメージがどんな要素で成り立っているのかを考えます。クラスの構成につながります。
最後にその構成を基にしてプログラムを書きます。

私が過去に作成したライントレーサのJavascriptを例に説明いたします。
・イメージ
まずライントレーサ、黒い線を引いたらロボットがその上を走る、そしてそのロボットはセンサー３つを持っていて、それぞれのセンサーが黒い線の上にあるのか、白い地を感知しているのか、取得している。ロボットはそれをもとに移動するが、移動のパターンは直進、左回転、右回転に絞ろう。
・概念構成
レールが存在する
ロボットが存在する
＞センサーが存在する
＞＞センサーの値が黒か白かを取得する関数が存在する
＞センサーの値をもとにロボットを動かす関数が存在する
※後の拡張のし易さにもつながります。
　これを時間をかけて考えることは、後の実装の手早さでモトが取れるので、いくら時間をかけてもかまわないと思います。私はノートとボールペンでアイディアを書いています。
・プログラミング
function RAIL(){
}

function ROBOT(){
this.sensors = []; // 配列
for(var i=0; i<3; i++){
this.sensors[i] = new SENSOR();
}
this.MoveBySensors = function(){...}
}

function SENSOR(){
this.GetValue = function(){...}
}
※アートで100行を超えるちゃんとしたものを作ると、このクラス構造をいかに綺麗に作るかが問題になります。
　すみません、クラス（構造体？）を理解されている前提で話していますがご存じなければグーグル（基礎により書籍のほうが良いかもしれません）でお願いします。
　Javascriptのクラスは関数とごっちゃになるかもしれない特殊なものではありますのでご注意ください。

■技術的なアドバイス
経験則ですが、物体と結びつけたクラスに、位置や速度の値を持たせることに加え、位置を実際にプラウザに反映させるメソッドを持たせるとよいと思っています。
this.position = new VEC2(100, 200); // 二次元ベクトル
this.elm = document.getElementById("div_abc");
this.View = function(){
this.elm.style.width = this.position.x;
this.elm.style.height = this.position.y;
}
といった感じで。
二次元ベクトルのクラスは自分で定義しました。
だいたい要素の位置情報に関しては（私は）これで安定しています。
数日後の参考までに。

■そして
そしてですが、こうしてワクワクしながら作品を作っているうちにJavascriptはマスターできるでしょう。

回答No.2

Ogre7077

楽しいものを作っていたら、いつの間にか習得できた、が理想だと思います。

アートっぽい楽しいもので、素の JavaScript+HTML5 で実現でき、プログラミングが比較的簡単な題材として「フラクタル図形の描画」をオススメします。とくにマンデルブロイ集合の描画はロマンを掻き立ててくれるでしょう。

検索すればいろいろ実例が出てきますが、解説どおりに実装しても習得できたとは言い難いため、以下のヒントだけで実装してはいかがでしょうか。

描画ボタンをクリック時
http://www.ajaxtower.jp/js/event/index2.html
フォームから入力値を読み取る操作
https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement
計算式
http://ja.wikipedia.org/wiki/マンデルブロ集合
canvas 要素の操作
https://developer.mozilla.org/ja/docs/Web/HTML/Canvas/Tutorial

ちなみに、私のアイコンは上記の要領で4時間程で描画した画像です。
楽しかったです。

お礼

Ogre7077様
ご回答ありがとうございます。

「楽しいものを作っていたら、いつの間にか習得できた」
まさにこのパターンが理想だと思います。
（プログラミング学習において、
・技術自体を習得する為に学習する
・作りたいものがあって、それを達成するために必要な情報を集める
だと、後者のほうが圧倒的にモチベーションが高まりますよね）

参考例もありがとうございました。
こちらを参考に実装方法を自分なりに考えて見ようと思います。

回答No.1

b0a0a

アニメーションやインタラクティブなものは
コードが複雑で量も多くなりがちで難しいです
加えて数学や専門的な知識が必要になることもあります

それに、基本的なことが分からなければ当然応用はできません
英語法の基礎をやらずして英会話ができるかというのと同じです
つまり結局、まずは入門書に書いてあるようなことをやるのは変わらないのです

とはいっても、入門書の内容を最初から最後までなぞる必要はないです
入門書は流れの参考程度にして、沢山の入門サイトを利用して断片的に勉強し、
実際に自分の興味があるものを作ろうとしてみて、
わからない知識はその都度ググればいいと思います

つまり自主的に学ぶということです
とりあえずさらっとサンプルを全部見てどんなことができるのかを知っておいて、
必要だ、または興味があると思うものをやっていけばいいです

お礼

b0a0a様
ご回答ありがとうございます。
確かにまず基本的なフローをおさえられないと、
簡単な部分でも躓いてしまいますね。

今までの勉強法として、書籍を一冊一冊読んでいましたが、
重複する部分もだいぶ見えてきましたので、必要なポイントのみを
拾い読みして、手を動かす比重を高めていこうと思います。

ジェネレーティブアートは最終目標として、まずは
簡単なアニメーションから入っていこうと思います。