2014年3月21日金曜日

レース模様のパターンをHTML5/SVGで作るJavaScriptっぽいものを使った何か"lace.js"をつくりました

レース模様のパターンをHTML5/SVGで作るJavaScriptっぽいものを使った何か"lace.js"をつくりました。ソースはこちらデモはこちら。netgeekに掲載された記事「【驚愕】レースの模様作りの神に作成方法を聞いたら、驚きの手法だった」のアルゴリズムを実装リアルタイムで楽しめる様に実装してみました。
先にWonder Rabbit Projectのウェブサイトに書いたので、ずぼら引用。そういうわけで"lace.js"というのを作ってみました。ソースはこちらデモはこちら

実際このパターンでレース模様を作って遊んでると結構楽しいです。ぜひみなさまもお楽しみ下さい(╹◡╹)

久しぶりにJavaScript(ES5)を書いたのはさほどの事はありませんでしたが、今回はHTML5のSVGをJavaScriptからいじってみようと思い、結果ちょこちょこ苦労しました。Canvasの2dコンテキストでやった方が慣れもあって楽だったはずではありますが、意匠系のパターンデザインでラスターではやりたくないなーと思い、SVGを使ってみたのでした。

メモを残しておくべきポイントは、
  1. jqueryはHTML APIの ****NS 系に対応してない → SVG名前空間を jquery 単独そのままでは扱え無い。(jquery.svgとかあるみたいだけど今回は使わず)
  2. SVGの要素はoffsetWidthやoffsetHeightなどHTML要素のそれは使えない。
    1. .getBBoxで包括矩形オブジェクトを取得して、.width.heightを見る。
  3. 有効なSVG要素にappendChildされるまでtext要素などはcreateElementNSしてあるだけでは.getBBoxで包括矩形を取得しても無意味(widthもheightも0しか出て来ない)
    1. 包括矩形を得るためだけに一端描画してそれは消すという実装に。よく考えたら1つは必ず回転無しで配置できるので、それだけ別処理にして先に描画し、包括矩形を取得する実装にしたら若干効率良かったかな。
  4. SVGのtext要素などのtransform属性はいわゆるワールド座標での変換のみっぽい。ローカル座標での変形には工夫しなきゃならなくてなんだかなー。しかもtransform後は変形がローカル座標にも適用されて元のローカル座標が狂う事に。あばば。
    1. 今回はsvg要素viewBox属性をよしなに定義する手抜きで楽をしました(╹◡╹)
今回はGoogle APIsが対応するjqueryしか使いたくないなーと jquery.svg や Snap.js など存在確認はしつつも使いませんでした。大した事するわけでもないしー、と思ったのだけど、そんな事言わずに素直に使っておいた方が楽できたかな。でも、jquery以外使っていないので基礎的な教材向きとしてはかえって使いやすくて良いかな、と思ったりも。

ちょうどWeb制作全般を教えている学生さんたちにJavaScript(ES5)、jquery、HTML5周りの基礎を思い出して貰ったりする教材も兼ねて、ついでにHTML5/SVGのデモとJavaScriptからの実装入門も兼ねてたり(╹◡╹)

0 件のコメント:

コメントを投稿