![見出し画像](https://assets.st-note.com/production/uploads/images/149184341/rectangle_large_type_2_b2c45f43d1d3ec0ea976d6101b0e70ff.png?width=1200)
「円を描く間違った方法」の延長
クリエイティブコーディング界隈では入門書としてよく知られているマット・ピアソン著「ジェネラティブ・アート」の4章目は『円を描く間違った方法』("The Wrong Way to Draw a Circle")と題されており、その前章の『線を描く間違った方法』("The Wrong Way to Draw A Line")を受けたタイトルになっています。いずれもノイズを適用するための導入として、ライブラリに用意されている'ellipse()'関数や'line()'関数を使わずに、正円や直線をの軌跡を'point()'関数で点描のように描画する手法を解説しています。
これは本当に間違っている訳ではなく、本来は'ellipse()'関数や'circle()'関数を用いれば簡単に表せる円を、わざわざ三角関数を用いてプロットすることを、入門者の気持ちを汲んで「間違った方法」として紹介してくれているのだと思います。
さて、このところ仕事の関係で「インプリシットモデリング(Implicit Modeling)」という形状最適化の手法について耳にすることが多く、この"Implicit"は「陰関数(Implicit Function)」というものを示すと知りました。陰関数はF(x,y)=0 の形で表される関数を指すそうです。図形を表す数式をググったときによく見かける君はそんな名前だったんだね。
なぜここで急に陰関数の話をしたかというと、この事例としてよく取り上げられるのがx^2+y^2−1=0で、まさに円を示す方程式なのです。
そしてこれをp5.jsで描くとこんな感じになるそうです。(いつもありがとうOpenAI)
function setup(){
createCanvas(400, 400);
background(255);noLoop(); // draw()を一度だけ実行
}
function draw() {
let a = 200; // 円の中心 x
let b = 200; // 円の中心 y
let r = 100; // 円の半径
stroke(0);fill(0);
let resolution = 1; // グリッドの解像度
for (let x = 0; x < width; x += resolution) {
for (let y = 0; y < height; y += resolution) {
if (isOnCircle(x, y, a, b, r)) {
point(x, y); // 円上のポイントを描画
}
}
}
}
// 円の陰関数を評価する関数
function isOnCircle(x, y, a, b, r) {
let value = (x - a) * (x - a) + (y - b) * (y - b) - r * r;
let tolerance = 1; // 許容誤差return abs(value) < tolerance;
}
…長い。しかしこれもいつか大事な知識になるんだろうなぁと思い、ちょっとずつ関数の中身を紐解いていきたいと思います。