blogこの広告は、90日以上更新していないブログに表示しています。開かれた(告知ページ)。みんなでサイ本を読む会だ。第1回からだいたい3年ぐらい続いてて、今回でいよいよ最終回となった。僕は途中半分の第6回くらいからの参加なんだけど、最後のまとめとして気合いを入れて参加した。P629(最後)まで。クライアントサイドのグラフィック制御のところを読んだ。いろんなグラフィック関係のテクニックが書いてあったけど、本が出てから時間がたってることもあって今では使わないようなものもあった。サンプルコードが書いてあったのでみんなで読んだ。定義された画像フォーマットの一種。その名の通りベクターグラフィックになってる。指定した経路に沿って線を書くこともできる。扇形を書くときはこんな風に経路を指定する。始点まで戻って終わり超読みにくい。こんな指定を繰り返すと円グラフが描けたりする。動的に画像を描くための要素。できあがりはビットマップ画像になる。使ってチマチマ画像を描いていく。ベジエ曲線について今回はグラフィック関連の章ということで、僕はベジエ曲線について発表した。ベジエ曲線って名前は聞いたことある、もしくは使ったことあるっていう人も多いんじゃないのかな。アルゴリズムまでは知ってる人少ないと思う。僕は学校でそういうの勉強したので、いい機会だと思って発表した。ベジエ曲線とはベジエ曲線とは、線分の内分点を取る操作を繰り返すことにより得られる曲線のこと。いってもよく意味が分からないかもしれない。デモページを作ったので適当に遊んで欲しい。入力となるいくつかの点があって、そこからアルゴリズムに基づいて曲線を描く。その「いくつかの点」というのを制御点という。「開始地点のアンカーポイント」とか呼ばれてるやつね。数学的な理論の話は「ベジエ曲線とベジエ曲面」というページに書いてある。大学の講義用の資料でかなり本格的。僕のデモページで一番大事な関数は以下。ベジエ曲線上の1点を求めてる。0から1まで動かせばなめらかな曲線になる。実際には連続的に無限の点を求めることはできないので、0から1までを適当に分割して折れ線で近似してる。拡大/縮小、平行移動ベジエ曲線の便利な性質として「アフィン写像に対して普遍」というのがある。なんかまた難しい用語が出てきたけど、かみ砕いて言うと以下の通り。実際に曲線を変換する場合は後者の方法、先に制御点を変換する方が楽に実装できる。拡大の場合なんかは曲線全体を拡大すると困ることがある。曲線とは言っても実際には折れ線で近似していることを思い出そう。小さいうちは折れ線には見えなくても、拡大すると角の部分も拡大されるのでカクカクに見えてしまう。そんな場合でも、後者の方法の場合は拡大した分だけ分割数を増やせば角は見えなくなる。曲線のアルゴリズムだけ決まっていて実際の精度は描画する時に決めれるので、必要に応じて精度を上げるということができるのだ。これが「ベクター画像は拡大してもギザギザがでてこない」という理由になってる。実用上はこういう理論を知らなくても必要なところだけ利用すればいいんだけど、数学を使うと「その性質が必ず成り立つ。絶対に大丈夫」という保証ができる。数学って何してるのかいまいち分かりにくいところがあるけど、こんなところに役に立ってる例があった。あるので、これに実用上の意味はない。アルゴリズムを理解するためのサンプル。そんなこんなで読書会は無事最後まで終了した。それから2年以上たって、僕のプログラミングのレベルも上がったし、いろいろ発表するようにもなった。この勉強会を通して学んだことは大きかった。いろんな勉強会の中でもトップクラスの技術レベルだと思う。それもみんなで本を読んだりして勉強した結果だ。メンバーが入れ替わりながら何年も継続できているのは、この勉強会を大切に感じている人がいるからこそだと思う。コードリーディングと単発企画ものを行う。これからも継続して、関西を代表する勉強会になればいいと思う。参加した今日、Kanasan.jsのJavaScript第5版読書会#6に参加した。(1)はてなブログをはじめよう!mollifierさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。