Dropbox Paper

プログラミングB #14

#14 DOM，デバイスでのプログラミング

高尾俊介（takawo@konan-wu.ac.jp）

甲南女子大学文学部メディア表現学科講師

【注意】OpenProcessingでのp5.dom.jsの読み込み

ボタンやスライダーなどのDOM要素をOpenProcessingで扱う場合，p5.dom.jsを読み込む必要があります．

Video MP4 (1278x646)

p5.sound.jsと同様の手順で読み込みます．

授業の感想を記入してください。	教員からのコメント
今日の授業ではコンピュータグラフィックスでも学んだことが多く出てきてとても面白かったです. たくさんの立体を組み合わせてみたいと思います！ (立体と写真の組み合わせをしてみたいなと思っていますがどう書けばいいかわかりません...教えてください！)	良かったです．画像を読み込んでtextureを設定してあげると貼り付けられます．texture()とplane()をまずは組み合わせてみるといいかも．😃ウェブカメラのサンプルですが，OpenProcessingに上げているのでチェックしてみてください． https://www.openprocessing.org/sketch/647946/
今までに3Dを使ったプログラミングを自分で書いたことがあるが、frameCountを使う座標を変えると図形が広がったり、縮まったりするのがおお！と思って面白かった。cameraを使って3Dオブジェクトの見え方の変化を持たせたプログラミングに挑戦してみようと思った。lightの種類が用途によって違って、思っていたより多かった。	そうですね．カメラはちょっと設定項目が多いですが，要はどこの座標からどの方向をどの向きで見ているかを設定するので，慣れるといろいろできて楽しいですよ．僕も少し前に覚えました．覚えて動かしてみよう． https://www.openprocessing.org/sketch/648089
3D楽しかったです。	そうですか😃
３Dは前からやってみたいと思っていたのですがプログラムが複雑なものだと思っていたので案外簡単な命令で物体を作ることができて驚きました。しかし光を入れたり、応用して作品を形作るのはなかなか大変そうだと感じました。	そうですね．何事も積み重ねが大事，ということです😃
コードだけで本当に3Dが作れて驚きました。休みの時にいろいろ自分で書けたらいいなと思ったので、実践してみます。 3Dでかける図のなかに使てみたいものも見つけれたので頑張ります。	はい，頑張ってみてください．
3D のプログラムは面白かった。３Dは静止画よりも動いているほうが良さが出ると思った。またライトやマテリアルを利用して物体に立体感を与えることでより本格的なものになると感じた。	プログラムは静止画よりも動いているものを作るのに向いているので，いろいろやってみるといいでしょう😃
オービットコントロールを自分で書かないといけないところが面倒だと思いました。コースティクスも作れるか気になりました。	orbitControl()って書くだけでウェブ上でグリグリできるんでそれは便利ですよ（笑）．コースティクスとかサブサーフェイススキャったリングみたいなやつはリアルタイムCGでは計算処理多すぎてできないですね😃
タッチデザイナーに共通していることが多くて楽しかったです。p5jsで立体的にみせたりライトを使うことができるようになったので、タッチデザイナーと組み合わせて面白いことができそうでわくわくしました。orbitControlやambientLightなど綴りを間違えないように頑張ります。	3DCGは考え方自体は基本的には一緒なんです😃p5.jsの書籍をコモンルームの本棚に入れているので命令など確認すると良いでしょう．
平面が立体になるだけで一気にグレードアップしたようなプログラムになった。あと、立体図形の角を丸くすることはできますか？円錐などの尖った先をまるくしたいのですが…	3Dの基本図形の描画では角丸めたりはちょっとできなさそう．でも，3DCGのソフトで自分でモデリングした造形物の3Dデータを読み込む，とかでできます．Tinkercadの使い方はコンピュータ造形の授業をとるか，授業資料を読もう😃
specularで物体がつやつやしたのが面白かったです。pointLightのZをsinで動かしたりするとマウスを動かすだけでいろいろな光の当たり方がシミュレーションができて楽しかったです。最後に見た四角が飛んでるプログラムがゲームに出てきそうなエフェクトでかっこよかったです。	三角関数やノイズ，マッピングは光の当て方やカメラの位置などでも使えるのでどんどん使っていこう😃
前期にTouchDesignerで書いたようなプログラムと繋がってきて楽しかったです。またプログラムが長くなってきたので、ここで配列が上手く使えれば非常に楽なんだろうなと思いますが、まだ慣れていないので期間空く間に練習してみようと思います。	配列は同じものを増やしたりするのに便利です．クリックすると増えるとか．配列で描画するものの管理をできるともっと面白いものが作れると思います．
p5.js Editorを使って立体的なオブジェクトを作れることに驚きました。touchdesignerで作ったようなオブジェクトや光の当て方など、共通点があって面白かったです。使う関数によって座標が変わるのは頭が混乱するなと思いました。	3Dは慣れがあるので，基本的な原理（XYZの方向や回転軸）を確認しながら，あとは少しずつ触っていくと脳が3D脳になります．
3Dは難しいイメージがあったけれどそこまで難しくないなと思ったのでよかったです。p5jsのコードを書くのにもやっと慣れてきた感じがあるので冬休みもできるだけかいてみようと思います。こっちでも質感やカメラの機能があることに驚きました。	いろいろやってみてください😃アップされているものはコメント含めて確認しますので

DOM（Document Object Model）

通常，ウェブページはHTML（HypeText Markup Language）と呼ばれるマークアップ言語で記述されている．HTMLではH1やP，IMGなどのタグと呼ばれるマーカーによって文書内の構造を記述する．

HTML以外のPHPやPython，JavaScriptなどでウェブページを開発することも増えているが，それらは基本的に最後にHTMLを出力する

（ウェブサイトをChromeの検証でDOMツリーを確認，文書を書き換えてみる）

p5.jsではさまざまなDOM要素をp5.dom.jsを読み込むことで操作できる．

授業ではDOM要素として，GUI（グラフィカルユーザーインターフェース）のボタンやスライダーを作成してプログラムで使用してみる．

​​#14 DOM，デバイスでのプログラミング

​​【注意】OpenProcessingでのp5.dom.jsの読み込み

​​授業の感想を記入してください。

​​教員からのコメント

​​DOM（Document Object Model）

#14 DOM，デバイスでのプログラミング

【注意】OpenProcessingでのp5.dom.jsの読み込み

授業の感想を記入してください。

教員からのコメント

DOM（Document Object Model）