ベジェ曲線

以前やったのを関数のベジェ曲線描画でやる。

参考にさせていただきました。
てっく煮ブログ – ベジエ曲線の仕組み (4) -ActionScript 3.0 でベジエ曲線を描く

参考
３次ベジェ曲線

Spriteを継承した、ベジェ曲線を描画するための
bezierTo 関数を持つクラスを作成して描画しました。

これを二つ並べて移動させることでナミナミさせてます。

bezierToは汎用的に使える予感です。

制御点 P0,P1,P2,P3として、
bezuerTo(P0.x,P0.y,P1.x,P1.y,P2.x,P2.y,P3.x,P3.y);

↓ ソース等

忙しく移動させてます。

Continue reading

ベジェ曲線練習するぞ宣言をしたら、
会社の総務の方が本を貸してくれた！

昨日はそれを読みながら、イベント告知ページを作ってみた。
まぁ習作ということで・・・。

→BearBornBaby vol.2
僕の所属しているバンドの企画イベントです。
興味もっていただけた方は足を運んでいただけると泣いて喜びます。

さて、illustratorのようにベクタ画像をひける便利なフリーソフトがあります。
→Inkscape
→mycom　ゼロからはじめるInkscape – Illustratorライクな無料ドローツール

今回のような画像をつくるのには、十分に力を発揮します。
wndows, macos, linux などのさまざまな環境で動作します。

それからビットマップ画像を自動的にベクター画像に変換する
Potraceというソフトも使用しました。

→potrace

どんな風にトレースされるか、こちらの方の比較画像がわかりやすい。
→Potraceでラスタ画像をベクタ画像に変換

これを比較しながら変換できるようにしたMac用のソフト cocoapotrace を使用して、
写真からトレースした画像なども用いました。
→Cocoapotrace

しかし、慣れないので、これだけの画像作るだけで相当時間かかりました・・・。

それでもベジェ曲線、大分言うこと聞いてくれるようになってきました。がんばろう。

僕がFlashを作るときに使う素材は、
Flashで描けるようなベクター画像ではなく、
ドローソフトで作ったラスター画像を使っています。

■参考
ベクターイメージ
PhotoShopでベジェ曲線に挑戦

ベクター画像を生成する場合、どんなソフトを使ってもだいたいベジェ曲線という作画法を用いるが、
僕はこれがどうにも苦手。

Flashの場合、LineToやらCurveToという関数でベクター画像を生成することもできるので、
もっぱら絵的なものはラスター画像で用意して、線的なものはFlashで描画してしまっている。

避けてばかりじゃいかんなーと思いたち、ペンタブレットも買ったことだし、
最近は知り合いに教わって、ベジェ曲線を使っての作画に挑戦している。

今回はレベル１ということで、ベジェ曲線で波形を描いて、
ナミナミさせてみた。

↓以下参考まで。。

Continue reading