Curated by Paul Haeberli Welcome to Alpha 0.52 of GRAFICA Obscura, my evolving computer graphics notebook. This is a compilation of technical notes, pictures and essays that I've accumulated over the years. For maximum enjoyment, check the viewing notes provided. Contents Paper and Plotter: A 3D Surface One of my first computer graphics projects is shown here. Laser Cutting for Rapid Manufacturing

FICC 福岡です。 珍しくやる気になりましてAS3関連のエントリー。個人的にゆらゆらした円が描きたくなり、 こんな図を描き出す方法を考えてみました。Flashで滑らかな曲線、といえばgraphics.curveTo()ですが、このcurveToは2次ベジェ曲線しか書く事ができません。ベジェ曲線の詳しい話は省略しますが、できればIllustratorのようにハンドリングが楽な3次ベジェが使いたい。今回はアンカーポイントとコントロールポイントの位置から3次ベジェを計算し、2次ベジェに変換してFlashで描画します。幸いFlashCS3のfl.motion.BezierSegmentクラスが面倒な計算を助けてくれますのでこのクラスを有効活用します。 BezierSegmentを使うには、まず3次ベジェの要素である4つのポイント（上図でのp0,p1,p2,p3）を用います。 var bezier

ココとかココとかココとかココとか、皆さんもそうでしょうが、ご多分に漏れずワタクシも萌えたクチです。 wonderfl 上で、fumix さんが「フラクタルで画像を描画する」を、そのfork として ep91ckok さんが「forked from: フラクタルで画像を描画する」を投稿なさいましたが、この平面分割アルゴリズム、さらに高速化できないもんだろうかといろいろ考えておりました。 リアルタイムレベルの速度にできると嬉しいなあ、というゴール設定をしてきましたが、なんとかそれらしい速度で描画できるようになったので、ここで記事としてまとめておきます。 なんとかそれらしい速度で描画できるようになったのが↓ まずはおさらい。 このアルゴリズムは BitmapData を対象とした再帰処理なわけですが、その概略は以下のようになっています。 BitmapData の指定領域の全ピクセルの輝度の標準偏

If you wonder, what blendmodes are doing exactly, you can read this article about blendmodes in common. I tried to work with them in a accurate way to emulate complexer algorithms like animated water waves. Generically you can save a lot of performance, if you need to calculate every single pixel colorvalue from two bitmaps. In most cases, there is a simple solution using ColorTransform and Blendm

How do Adobe Photoshop, Micrografx PicturePublisher and Pegtop XFader blend layers? This article tries to give a survey of the most important blend modes, their advantages and disadvantages, and how they are coded. introduction normal mode average mode multiply mode screen mode darken mode lighten mode difference modes overlay mode hard light mode soft light mode dodge modes (color dodge & more) b

asドローソフトなどでもお世話になることが多いベジエ曲線について解説していくシリーズ。小学生のころ、BASIC で本のサンプルを入力して遊んでいたのですが、あまりのきれいさに衝撃を受けたプログラムがありました。それはこんな絵を出力するプログラムでした。左上と左下の点をそれぞれの x 座標、y 座標を少しずつ増やしながら、直線を引いています。いくつもの四角形が端に行くにしたがって変形していくところが、いかにも近未来風の CG に見えました（当時は）。しかも、この絵は直線だけで構成されているのに、カーブして見えるところが不思議でなりませんでした。さて、15年のときを経て、このプログラムを ActionScript で実装してみました。点をドラッグして曲線の変化を楽しんでみてください。前置きが長くなりましたが、実はこのカーブして見える曲線の部分は２次ベジエ曲線になっています。３つの黒い点がベジエ

ベジェ曲線の分割の流れで、ActionScriptでベジェ曲線を破線で描画してみます。 前回、等分の座標を求めるのに、変数tを0から1まで小刻みに増やして逐一チェックする方法をとっていました。この部分を若干汎用化して、任意の長さからt値を得るようにしてみました。 /** * 長さからtを得る * @param 長さ( 0～length：曲線の長さ ) * @param 許容誤差 * @return t */ public function length2T( len:Number, d:Number=0.1 ):Number{ if( len<0 || len>_length ){ //0以下、曲線より大きい場合NaN return Number.NaN; }else{ //再帰的関数でt値を得る return seekL( len, d ); } } /** * 長さに対するtを得る *

Collision detection with Recursive Dimensional Clustering Brute force comparison Collision detection can be done in many ways. The most straightforward and simplest way is to just test every object against all other objects. Because every object has to test only for others after it in the list of objects, and testing an object with itself is useless, we arrive at the well known brute force compari

12月第1週でゲーム3本購入。なんとも年末気分になっています。前回の流れで3次ベジェ曲線の切り出しを書いてみます。 前回のエントリーのように、3次ベジェをtの関数としたとき、t=t0、t=t1での座標は、fig1のようにtp0、tp1となるとします。この間の曲線を切り出すわけですが、次のfig2のような手順でいけます。 つまり、一度tp0で切り分けて、切り分けられた曲線の一方をtp1で切り分けるんですね。手順としては前回の切り分けを2度行うわけです。 ただ、2度目の切り分け(fig2b)のとき、tp1を示すt値がt1ではなくなります。基準となる曲線が変わるので、t値も変化するわけです。で、t=t1に対応するような、t1’を導きます。 t値を相対的にみると、t1は、長さ 1-t0 の内の t1′ となり、1-t0 を 1 とすると、t1’=(t1-t0)/(1.0-t0) となります。 これ

年末気分で、事務所でビール飲んでしまいました。不良社員です。うまいです。全体ベジェばっかりですが、今回は2次ベジェ曲線でgetRectです。素直にやれば、ShapeやらのDisplayObjectに描画してgetRect()すればRectangleを得れるのですが、2次ベジェの各点(始点・終点・制御点)から計算してみます。 最初に、2次ベジェ曲線の関数を書いておきます。 /** * Quadratic Bezier Function * @param t( 0～1.0 ) * @return 座標 */ /* _point0:Point 始点 _point1:Point 終点 _control:Point 制御点 */ function f(t:Number):Point{ var tp:Number = 1.0 - t; return new Point( _point0.x*tp*tp

正直忘れてしまいそうなのでエントリしてみようと思いました。説明はぐだぐだやもですが…。で、3次ベジェから2次ベジェの近似変換について簡単に書いてみます。ソースには2次から3次も書いてありますが、使うことあるのかなぁ的でメモ的に書いているだけです。 今回実装している3次から2次の変換は、まず3次ベジェが一つの2次ベジェで表現できるかチェック、その後段階的に2次ベジェの数を増やして複数の曲線で近似する流れになっています。 一つの2次で表現できるかは下図のような考えで行います。 3次ベジェのコントロール点の延長にある交点を、2次ベジェのコントロール点にしてみるわけです。大抵の場合一致はしません…。 次に複数の曲線の組み合わせを試してみます。基本的な方法は3次ベジェを二つの2次ベジェで表現してみることです。 この方法を基本として、最初に3次ベジェを二つの2次ベジェ、次に3次ベジェを分割し、それぞれ

最近は季節変動で呼吸器系をやられつつゲームやり過ぎな毎日ですが、2つの2次ベジェ曲線の交点について簡単に書いてみます。最初は幾何学的に解けるんじゃないかと考えていたのですが、結局は数値解析的な方法で求めました。Bezier Clipping 法の考え方(FatLine)を参考にしています。 交点を求める過程の基本的な考え方は次のような感じです。 図のように曲線Aと曲線Bがあるとき、一方の曲線を包括する矩形を求めます。この矩形は、曲線の始点、終点を水平にしたときのgetRectに相当します。この矩形で、fig2のように一方の曲線を切り出します。 上図の場合、一本の曲線が切り出されていますが、場合によっては複数本の曲線が切り出されることになります。 次に、切り出した曲線について同じように矩形を求めて、他方の曲線を切り出すわけです。 この、曲線の矩形化・曲線切り出しの処理を繰り返すと、最終的に矩

Interpolation with Bezier Curves A very simple method of smoothing polygons Initially, there was a question in comp.graphic.algorithms how to interpolate a polygon with a curve in such a way that the resulting curve would be smooth and hit all its vertices. Gernot Hoffmann suggested to use a well-known B-Spline interpolation. Here is his original article. B-Spline works good and it behaves like an

ここでは、プログラムなどでよく使用されるアルゴリズムについて紹介したいと思います。 元々は、自分の頭の中を整理することを目的にこのコーナーを開設してみたのですが、最近は継続させることを目的に新しいネタを探すようになってきました。まだまだ面白いテーマがいろいろと残っているので、気力の続く限りは更新していきたいと思います。 今までに紹介したテーマに関しても、新しい内容や変更したい箇所などがたくさんあるため、新規テーマと同時進行で修正作業も行なっています。 アルゴリズムのコーナーで紹介してきたサンプル・プログラムをいくつか公開しています。「ライン・ルーチン」「円弧描画」「ペイント・ルーチン」「グラフィック・パターンの処理」「多角形の塗りつぶし」を一つにまとめた GraphicLibrary と、「確率・統計」より「一般化線形モデル」までを一つにまとめた Statistics を現在は用意していま