JavaScript + SVG で星空を作ってみた

JavaScript、mapもクロージャもあって、意外とまともだなあ・・

JavaScript で雨を降らせてみた

blogger には JavaScript が貼れるという真理を忘れていた・・

短期目標1

TODO
ポーズを練習(1ストローク毎に採点しグラフ化)
ポーズを練習(同じ問題をやるボタン、使った設定をツイートに表示、結果の表に出す情報を増やす、設定の説明をちゃんとする、採点エフェクトは表示・非表示の切り替えにする)

POSTPONE

ソフト倉庫（ツールの利用規約を書く、ライセンス管理をする、バグ修正、紹介ページ）ウェブページ読み上げツール、時間計測・TODOリストのアプリを更新
位置テスト（デッサントレーナーをWeb版として復活させる）
円の達人（ペンタブレットに対応、経過時間を測る、点数を表にする）
なぞって練習（ラウンド制にする、エフェクト）
色彩テスト（回数を多く、説明をちゃんとする、はじめからボタン、ツイート内容を豪華に、経過時間も測る、エフェクト）

DONE
5分ドローイング(左右反転、キー変更)
絵（デモとして雰囲気のあるものを+5枚程度）ランダムなお題を表示（ポーズ、服装、髪型、角度）
ポーズを練習(ツイート内容を多く、客観的な数値を表示、ヒントとして一部を表示、お手本が消えるモード、UNDO・REDO、クリア、制限時間の選択の見た目、秒単位で調整、どう間違えたか分かるリアルタイムの採点、ページ別の設定ファイル、CSS preprocessor の代わりのヘルパー、ドロップダウンメニュー、ヘルプ、リアルタイムの採点のオン・オフ)

絵を何枚か仕上げる -> 4枚仕上げた
いつかぜのサブストーリーをノベルゲーム化したものを公開する

さくさくペイントのコンパイル方法2

FStap.Controls はレポジトリをクローンした後は、

以下のように dll が読み込めていない状態のようです

FStap.Control プロジェクトを右クリックして Manage Nuget Packages から

FSharp.Data, HtmlAgilityPack, NDde, Newtonsoft.Json の4つはインストールされているように見えて、実は存在しないので、一旦すべて Uninstall します

Online のタブを開き、右上の検索ボックスにキーワードを入れて、パッケージを検索できます

ndde と入力して NDDe を見つけてインストールして下さい

F# Data と入力して F# Data を見つけてインストールして下さい(ToolBox と書いてある方は使いません)

HtmlA まで入力すれば出ると思いますが、HtmlAgilityPack と入力して、 HtmlAgilityPack をインストールして下さい。

Json.NET と入力して Json.NET をインストールして下さい

先ほどの警告マークの出ていた Reference に戻ります

警告マークのあるもののうち

FStap.TypeProviders

Interop.SHDocVw

だけ一旦、右クリックして削除して下さい

FStap.Controls プロジェクトを右クリックして Add -> Reference の Browser タブを開いて

Browese で dll を探します

Windows 7 だと C:\Windows\System32\shdocvw.dll を追加します

OSのバージョンが違うと位置が違うかもしれません。

ここで、Visual Studio をもう１つ起動する必要があります

FStap\FStap.TypeProvider\FStap.TypeProviders.fsproj をVisual Studio で開き

Build -> Build Solution すると

FStap\FStap.TypeProvider\bin\Debug\FStap.TypeProvider.dll が出来上がっていると思います

これを 最初に起動しているVisual Studioの FStap.Controls プロジェクトの参照に追加します

ここまでやった後で、

Build から Build Solution して、Clean Solution して

Paint\Paint.UI に res というフォルダを作成して

もう１回ビルドしたらコンパイルが通りました。

さくさくペイントのコンパイル方法

ソリューションを右クリックして Add -> Existing Project から、以下のように

FStap.Core

FStap.System

FStap.WPF

FStap.Controls

をインポートします

次に、各プロジェクトを右クリックして、Add -> Reference から以下のように他のプロジェクトを読み込みます

Paint.Core

Paint.Algo

Paint.Canvas

Paint.UI

Paint.Tool

Paint.App

FStap.System

FStap.WPF

FStap.Control

手のポリゴン

http://cgcookie.com/blender/2009/10/03/modeling-a-human-hand/

形を表現できるような面を過不足なく作って、上手く変形できれば良いのが作れるらしい。
それを効率的にやるには、立体を作る手順とか操作方法が大事っぽい。

操作方法

凸凹とか関節を増やすには k(knife) をctrl(midpoint snap)、z(cut-though)で使うか ctrl-r(loop cut)
爪の部分を p で分割して別の立体として爪を作る
指が１本できたら、shift-d(duplicate)でコピーして、f(face)で辺を貼り合わせ、ctrl-e(edge loop select) で余計な辺を選択して x(delete) -> dissolve edges
ポリゴンを単純にする時は、 面を shift-j、辺を x(delete) -> edge loop、点を ctrl-v(vertex tool) -> merge
形を整えるには、w(special) -> smooth で立体を丸くしたり、gで掴む、rで回転、sで拡縮 を、o(propotional editing)で変形する範囲を指定できるようにして、マウスホイールで変形する範囲を変える

http://software-tips.wonderhowto.com/how-to/model-hand-blender-3d-196392/

Scala.js は出来が良いのかな？

なぞって練習 というミニゲームの ソースコード(ただし自作ライブラリ使用) を見てみると

Java と比較して

• var で、変数宣言で型を毎回書かなくて良くなっている
• いろんな所で () が省略できる
• new も大体省略
• セミコロンもけっこう省略できる
• class じゃなくて object と書けばシングルトンが作れる
• for .. yield でコレクションをかなり自由に操作できる
• コレクションを高階関数で操作できる標準ライブラリが強力
• public とか static とか void とか書かなくてよかったり {} が省略できてメソッド宣言が短い
• プレースホルダ構文( x => x * 2 が _ * 2 と書ける)でラムダ式がさらに短く
• class MyPoint(x:Double, y:Double) { .. みたく、型宣言とコンストラクタを１回で書ける
• package object は open できるので import scala.scalajs.js.Math._ とすれば Math.pow を pow と書ける
• Some(10) match { case Some(10) => 10 case None => 0 } パターンマッチで値を分解しつつ、値に応じて処理を分岐できる
• F# のパイプライン演算子 |> や関数合成 >> などのコンビネータも、ユーザー定義演算子として自由に定義できる
• new CanvasManipulator(canvas).draw(); のような型変換を伴う処理は、implicit conversion を使えば canvas.draw(); と書ける

という感じの事などが出来ていて Scala の言語機能で定型的なコードをどんどん削っていけます。
また、コーディングの自由度が高いので、可読性やメンテナンス性を良い状態に保ちやすい気がします。

その他の事情

• コンパイル時間は多分長め
• ミニマムな実行ファイルは 200kb 程度
• サンプルは結構あるが、オープンソースで使われている例はまだ少ない
• 重要なライブラリ出てきているが少ないので、既存のJavaScript資産との相互運用が必要
• 定義にアノテーションを付ければ、JavaScript との相互運用が出来る
• Scala がWebサービスのサーバーサイドで使われているので、クライアントサイドを Scala.js にすると、WebサービスをScalaで統一して書けるという事になる。

出来は良いと思いますが、ユーザーが増えるかどうかは予測できていません。