p5.jsで3次元アニメーションを試してみた - infosmith.biz
気づけば前回のエントリから既に1カ月以上が経過。いかんですね。正直、コードはいっぱい書いているのですが、それをエントリ化しようと整理し始めると、追加で調べてみたいことや試してみたいことが次から次へと出てきて、なかなか手が進みません。 今回は「p5.js」の3次元機能について。Processingでは、「size」関数の第3引数に「P3D」あるいは「OPENGL」と書いておくことで、スケッチ内で3次元座標を扱えるようになります。「p5.js」にも同等の機能が用意されており、createCanvas関数の第3引数として「WEBGL」と指定してやります。 試しに、以前Processingで書いた3次元のスケッチをp5.js向けに書き直してみました。 （2017/10/12追記：このスケッチは5.14向けのものですが、p5.jsでは5.16以降でWebGL関連の機能が大きくアップデートされており、
p5.jsがWebGL＆3D対応。軽くいじってみます - Qiita
地味に拡張しているp5.js。久々にウォッチしてみると2015/10/05のリリースでWebGL対応していて、それに伴い3Dのサポートもはじめたようです。他のライブラリには色々先を越されていると思いますが、いじってみました。 最後は、時間がなかったのでシンプルなUFO作って終了 基本テンプレート 見るところは公式サイトのチュートリアル、あとはリファレンスにはそれに載り切らない実装がありました。まずは基本テンプレを p5パッケージのサンプルファイルの、コメント冒頭にはShiffmanのサイトへのリンクが。宣伝乙であります // Learning Processing // Daniel Shiffman // http://www.learningprocessing.com // Example 1-1: stroke and fill function setup() { createC
2. 座標の移動、回転（processing 3D入門） | Yasushi Noguchi Class
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/r-dimension/r-dimension.xsrv.jp/public_html/classes_j/wp-content/plugins/wp-syntax/wp-syntax.php on line 380 Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/r-dimension/r-dimension.xsrv.jp/public_html/classes_j/wp-content/plugin
「超入門コード10選！」【Processing-3D】 - Qiita
はじめまして、ますみです！ はじめに 個人的に考える超基本的で必要だと考える3D用のProcessingのコードです。 （「超必須コード10選！」【Processing】内の必須コードは省略しています。） 1. size (500, 500, P3D); 3D空間上で、画面の横と縦の大きさをそれぞれ500pxにする。 Reference：size(); 2. point(250,250,250); 座標(250,250,250)の位置に点を描く。 Reference：point(); 3. box(10, 20, 30); 幅10px、高さ20px、奥行き30px（x,y,z軸方向それぞれに10,20,30pxの長さ）の直方体を描く。 Reference：box(); 4. sphere(100); 半径100pxの球体を描く。 Reference：sphere(); 5. transla
Processingによる3Dプログラミング
今日の内容 Processingで3DCGプログラミング 3Dの座標系 OpenGLとは 2Dのアニメーションを3Dに拡張してみる 3D座標で図形を描く 視点の移動 3Dのを用いた高度なアニメーション コンピュータで3Dを表現するには コンピュータ画面で3Dを表現したい コンピュータのディスプレイは、2D (縦横に並んだピクセル) 奥行は擬似的に表現するしかない 画面に、立体や空間などの3次元の存在を投影して描画する = 3DCG (3次元グラフィックス) 2次元平面に3次元の存在を投影するには、様々な数学的な知識が必要 Processingではこうした演算を自動的に行うことが可能 3次元の座標系をそのまま使用できる 高速な表示のためのライブラリ(OpenGL)も標準で使用可 3Dの座標系 3Dプログラミング基本 まず2Dの図形を回転するプログラムを作成してみる translateで画面の
Processingで3Dグラフィックスを扱う上での注意点 - Imaginary Code
Processingのグラフィックスの描画系は内部でOpenGLを利用していますが、ProcessingのAPIは特有の癖があるのでOpenGLと同じ感覚でやっていると時々戸惑うことがあります。3DグラフィックスまわりのProcessing特有の仕様について気をつけておくべき点をここにメモしておきます（Processing 3.5.4において動作確認）。 （2017/7/19）主に行列のところを加筆しました。 （2019/5/15）文章を少し手直ししました。本質的な意味は変えてません。 （2020/11/19）座標系の向きの図を更新し、プロジェクション行列について追記しました。 （2021/9/6）図中の行列の記号をU・P・V・Mに置き換えました。意味は変わっていません。modelX()およびscreenX()についての説明を追記しました。 （2022/1/7）「3D描画と2D描画を組み合
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TrackBall: rotating 3D objects by dragging mouse
【Processing学習】 3D空間の座標に点を打つ - Qiita