【p5.js】p5.Geometryであのドーナツをつくる - Qiita

この記事は、Processing Advent Calendar 2021 3日目の記事です。 みんな大好きなあのドーナツを、p5.jsのクラスp5.Geometryを活用して作っていきます。 （この記事を書いた際に使ったp5.jsのバージョンは、1.4.0です） ソースコードは下のOpenProcessingのリンクから見ることができます。 0. はじめに 0.1 p5.Geometryって何？ WebGLでは3Dモデルを描画する際に、あらかじめ作成した各頂点の位置ベクトルや法線ベクトルなどの頂点データが入った頂点バッファと、どの頂点3つを用いた3角形を描くかの情報（インデックス配列）が入ったインデックスバッファを呼び出すことで同じ形状のモデルを効率的に描画しています。 例えば、以下の頂点の位置情報が入った頂点バッファと、[ 0, 1, 2 ]の頂点3つと[ 1, 3, 2 ]の頂点3つ