HTML5 CanvasにJavaScriptでベジェ曲線を描画する

すっかり松も明け「成人の日」になってしまったが、みなさまあけましておめでとうございます。昨年後半はちょっと忙しくて放置気味だったので、今年はもう少しコンスタントに書いていきたいと思っている。予定は未定だけれど。

と言いつつ、今年最初の記事は昨年から引っ張ってるネタだったりする。お題はHTML5のCanvasについて。

ベジェ曲線を書いてみた

きっかけ

昨年、「中学生でもわかるベジェ曲線」という記事を見かけた。大変わかりやすくまとまっており、何となく使って吐いたがきちんと理解していなかった「ベジェ曲線」というものに一定の理解を与えてくれ、中学生ならずとも役に立つすばらしい記事だった。

記事中には動きを解説するためのアニメーションGIFがいくつか置かれており、このおかげで容易に理解することができた。しかし、一通り理屈がわかったら、自分でポイントを打って確かめてみたい、というのが自然な発想だろう。

ないものは、作るしかない。HTML5が盛り上がり始めた昨今、Canvasを使えば簡単に実現できるんじゃないか?そう考えて、2時間ほど取り組んでみた。

動作例

動作させるとこんな感じになる。

bezier

実行例

実際に動かせるページを用意しておいたので、興味のある方は試してみてほしい。

黒いグリッドがCanvasエレメント。点がない状態でクリックすると、最初の2点が始点と終点。それ以降が制御点になる。runで動かし、resetで点をすべてクリアするのは見ての通り。

ソースコード

書いたものはすべてgithubに公開している。こちらも興味のある方はご覧いただきたい。

周辺事情

このコードそのものは、単純な好奇心から書いたものだ。しかし、なぜかいろんな周辺事情ができてしまったので、一区切りのためにまとめておくことにする。

Lab
lab

lab

勤務先では昨年から「Lab」というスタイルで技術記事を配信している。記事はエンジニアが持ち回りで書いていて、私も一本寄稿している。

このネタも書いた直後はLabで記事にしよう…と思っていたのだが、どうもネタの大きさもレベルも中途半端で、面白い記事にすることができなかった。結局そのまま掲載を見送った…という経緯がある。


みゆっき☆Think

みゆっき☆Thinke

その後しばらくして、 「ドワンゴ研究開発チャンネル」のコンテンツである「みゆっき☆Think」に出演することになった。テーマは「Git」。バージョン管理システムの歴史とGitというプロダクト、そしてチーム開発とコミュニティについて、高校生エンジニアである鳥居みゆっきに講義をする、という番組内容だった。

講義の内容とは直接関係しないのだが、githubを使ってforkとpull requestをしてみよう!という宿題のために、今回のベジェ曲線レンダラのリポジトリを使ってみた。

みゆっきがpull requestしてくれたのはこのcommit。ちゃんと宿題やってくれた上に、バグをひとつ潰してもらった。

ちょっと話はそれるが、みゆっきは飲み込みが早く質問が的確な、とても優秀な生徒だった。講義の準備をすること、実際に講義をすることで、むしろ私のほうが勉強になったぐらい。この先の成長が楽しみだ。

HTML5ハッカソン

さらにしばらくして。職場のエンジニアが全員でスマートフォン向けのHTML5を学ぶ、というイベントが開催された。スマートフォン向けHTML5に馴染みがないエンジニアは座学+ハンズオンの研修、もう慣れているエンジニアはハッカソン形式で開発し、最後にLT形式でプレゼンする、というものだ。

講義は株式会社アシアルさんのプログラム。スペシャルゲストとしてamachangが来てくれるという豪華なイベントになった。イベントの模様はamachangのblog「ドワンゴの社内ハッカソンに行ってきた! – IT戦記」や「ドワンゴ研究開発ブログ」でレポートされているので、ぜひご覧いただきたい。

で、私は仕事の都合で途中から参加したのだけれど、LTには自重せず飛び込んできた。そのネタとしてこのベジェ曲線レンダラを使った、という次第。

実はこのイベント、企画段階をちょっとだけお手伝いしている。こうやって記事にまとまったのを見ると、手伝うことができてよかったなぁとしみじみ思う。amachangとちゃんとお話できなかったのが心残り。


まとめ

…というわけで後半はテクニカルな要素まったくなかったけれど、昨年からなぜか長いことつきあってきたベジェ曲線レンダラについて、ひとつまとめることができたのでよいことにする。

今年はもっと新しいことに飛びついていきたいなーと思いつつ、今後とも「Kwappa研究開発室」をどうぞよろしくお願いいたします。

Links

Program
Lab
みゆっき☆Think
hack-a-thon

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です