#author("2021-05-29T10:50:27+09:00;2021-05-29T10:48:35+09:00","default:inoue.ko","inoue.ko") #author("2021-05-29T10:51:15+09:00;2021-05-29T10:50:27+09:00","default:inoue.ko","inoue.ko") *WORKS &color(red){このページの掲載内容は５年以上前と古くなっています。当時の仕様で記述されたプログラムの一部は、現状のブラウザ環境では正常に動作しなくなっています。あらかじめご了承ください。}; //自由かつオープンな技術を用いて、CG・映像の表現研究を行なっています ~ **MovieSquare 2016 //#image(MovieSquare2015.png) //https://design.kyusan-u.ac.jp/OpenSquareJP_repository/MovieSquare2016/]] #youtube(UYZCCYFlSIE) &small(この動画には音声情報はありません。); ~ ***これは何？ //-映像と音声の再生・記録をブラウザ環境のみで実現するWebサイトで、 //前年のバージョンMovieSquare2015を機能拡張したものです。 これはブラウザの動画再生機能を用いたマルチ映像上映システムで、オープンソースのWikiシステム ''PukiWiki'' をカスタマイズするとともに、いくつかのプラグインを追加制作するかたちで実現しています。 ここで開発した拡張機能の一部は、現在__[[ソーシャルデザイン学科の情報共有サイト>https://design.kyusan-u.ac.jp/socialdesign/?Plugin/YouTube]]__上で、ページ上にYouTube動画等をマルチレイアウトするための機能として利用しています。 -このシステムでは、例えば以下のようなことができます。 --お手元にある動画ファイルを用いたマルチ上映 --Webカメラを用いた録画と保存(WebM形式) --内臓マイクを用いた録音と保存(WAV形式) -基礎となる技術は <video>等のHTMLタグによる動画の埋め込み -３つの表示モードがあります --EDITモード：通常のWebサイト(Wiki)としての閲覧・編集を行う --SCREENモード：プレゼンテーション用に本文部分を拡大表示 --FULL SCREENモード：ページ内の映像要素のみを上映 //-&color(red){ブラウザは''Firefox''を推奨します。}; ~ ***動作環境その他（2016.05現在） -推奨ブラウザはFirefox、Chromeです。それぞれ一部動作しない点があります。 -推奨ブラウザはFirefox、Chromeです。 -Webカメラを用いるプリセットを選択すると、Webカメラの起動許可を求められます。ソースを見ていただければわかりますが、Webカメラの映像はそのまま表示する以外に通信等は行なっていませんので、ご安心下さい。 ~ ~ **MovieSquare 2015 ***これは何？ 複数の動画をWebページ内に配置し、それらを同時再生してマルチ映像として楽しむためのWebシステムです。「まとめサイト」等によく用いられるWikiをベースに、動画を自由なレイアウトで配置するためのプラグインを作成し、誰にでも簡単に動画のマルチ再生ができるしくみを開発しました。 //&size(12){[[MovieSquare2015>https://design.kyusan-u.ac.jp/OpenSquareJP_repository/MovieSquare/]]}; ~ ~ **MotionCube 2014 [[&ref(MotionCube2014.png,,576x323);>https://design.kyusan-u.ac.jp/OpenSquareJP_repository/MotionCube2014/index.html]] [[Click To Start>https://design.kyusan-u.ac.jp/OpenSquareJP_repository/MotionCube2014/index.html]] &size(12){[[DEMO>https://youtu.be/JxEXY6sowKY]]}; &size(12){&color(red){Webカメラを利用する仕様のため、近年のブラウザではセキュリティーリスクがあると判断されてブロックされると思います。};}; ~ ***これは何？ 3DCGによるCUBEの動きをインタラクティブに楽しむ作品です。プログラミングによる CG アート教育のサンプルコードとして、初学者の参考になるよう、極力シンプルに記述しました（バグはとりきれていませんので、たまにフリーズするかもです）。 使っているのは HTML、CSS、JavaScript、WebGL といったオープンな技術のみで、テキストエディタとブラウザがあれば、誰でもすぐにはじめられます。 -左ドラッグ ： CUBE が動きます -中ドラッグ ： 世界が回転します -右ドラッグ ： カメラが上下左右に移動します -マウスホイール ： ズームします この作品では、あなたのPCに搭載されたWebカメラの映像、また、あなたのPC上の静止画・動画ファイルをテクスチュア素材として遊べる仕様になっています（適当な画像をウインドウ内にドラッグ&ドロップしてお試し下さい）。 プリセットの画像素材、動画素材は仮のものです。動画のプリセット素材については、WikimediaCommons上のクリエイティブコモンズライセンスまたはパブリックドメインのファイルを利用させていただいています。以下がそのリンクです。 -Video01 [[Chimmie Hicks at the races c1902.ogv F.S. Armitage.>http://commons.wikimedia.org/wiki/File:Chimmie_Hicks_at_the_races_c1902.ogv]] -Video02. [[Automobile parade.ogg / Thomas A. Edison>http://commons.wikimedia.org/wiki/File:Automobile_parade.ogg]] -Video03. [[Remscheid - Lennep - Schützenplatz / Frank Vincentz>http://commons.wikimedia.org/wiki/File:Remscheid_-_Lennep_-_Sch%C3%BCtzenplatz_-_Osterfeuer_2013_03_%280%29_ies.ogv]] -Video04 [[Wuppertal - Zoo / Frank Vincentz>http://commons.wikimedia.org/wiki/File:Wuppertal_-_Zoo_-_Melanotaenia_boesemani_%2B_Melanotaenia_maccullochi_01_%280%29_ies.webm]] -Video05 [[Sardines.ogg / James Kilfiger>http://commons.wikimedia.org/wiki/File:Sardines.ogg]] -Video06 [[Antigua - Caleta de Fuste - Paseo Maritimo / Frank Vincentz>http://commons.wikimedia.org/wiki/File:Antigua_-_Caleta_de_Fuste_-_Paseo_Maritimo_-_Port_%28oT%29_04_ies.ogv]] -Video07 [[Pájara - Morro Jable / Frank Vincentz>http://commons.wikimedia.org/wiki/File:P%C3%A1jara_-_Morro_Jable_-_Playa_del_Matorral_%280%29_07.ogv]] ~ ***動作環境その他（2014.07現在） -Chrome、Firefox、Safari で動作します（[[WebGLを有効>Google:ブラウザ WebGl 有効]]にして下さい）。 -メニューでWebカメラを選択すると、Webカメラの起動許可を求められます。 ソースを見ていただければわかりますが、Webカメラの映像は、作品のテクスチュアとして利用しているだけです。通信は行なっておりませんので、ご安心下さい。 ~ ***ソースコード HTML、CSS、JavaScriptのみの一般的なWebコンテンツですので、ブラウザの「ソースの表示」から、すべてご覧いただけます。 ~ ~ **MotionCubeJS｜2013 [[&ref(MotionCube2013.png);>https://design.kyusan-u.ac.jp/OpenSquareJP_repository/MotionCubeJS/index.html]] [[Click To Start>https://design.kyusan-u.ac.jp/OpenSquareJP_repository/MotionCubeJS/index.html]] ~ ***これは何？ ブラウザ上で画面をクリックして遊ぶ、単なるおもちゃです。WebGLの動作確認と、ThreeJSによる3D表現の可能性を模索する目的で制作しました。 この作品では、あなたのPC上にある静止画・動画ファイルを ドラッグ&ドロップすると、それを素材として遊べる仕様になっています。 プリセットの画像素材、動画素材は仮のものです。 動画のプリセット素材については、WikimediaCommons上の クリエイティブコモンズライセンスまたはパブリックドメインの ファイルを利用させていただいています。以下がそのリンクです。 -[[File:Pycnonotus melanicterus trio - Kaeng Krachan.ogv by JJ Harrison(CC)>http://commons.wikimedia.org/wiki/File:Pycnonotus_melanicterus_trio_-_Kaeng_Krachan.ogv]] -[[File:Sardines.ogg by James Kilfiger(CC)>http://commons.wikimedia.org/wiki/File:Sardines.ogg]] -[[File:Cloud time lapse 1280.ogg (Public Domain)>http://commons.wikimedia.org/wiki/File:Cloud_time_lapse_1280.ogg]] ~ ***動作環境その他（2013.11現在） -GoogleChrome、Firefox ほぼすべて動作します。 -Safari デフォルトでは動きませんが、環境設定で「開発メニューを表示」にチェックして、開発メニューで「WebGLを有効」にすると動きます。 ~ ***ソースコード この作品は、index.html、style.css、system.js、three.min.js（ライブラリ）という ４つのファイルからできています。 HTMLは普通にブラウザの「ソースの表示」で見えます。 JavaScript、CSSもHTMLのヘッダー部分のリンク先を辿れば見えます。 ~ ~ **MotionSquareHTML5｜2011 [[&ref(MotionSquareHTML5.png);>https://design.kyusan-u.ac.jp/OpenSquareJP_repository/MotionSquareHTML5/index.html]] [[Click To Start>https://design.kyusan-u.ac.jp/OpenSquareJP_repository/MotionSquareHTML5/index.html]] ~ ***これは何？ ブラウザ上で画面をクリックして遊ぶ、単なるおもちゃです。 HTML5とJavaScriptによる動画制御の可能性を調べる目的で制作しました。 この作品では、あなたのPC上にある静止画・動画ファイルを ドラッグ&ドロップすると、それを素材として遊べる仕様になっています。 したがって、プリセットの「素材」も仮のものということで、 動画については、WikimediaCommons上のCC、PDライセンスの動画を 利用させていただいています。以下がそのリンクです。 -[[Florenz - Ortsprospekt vom Piazzale Michelangelo.ogg>http://commons.wikimedia.org/wiki/File:Florenz_-_Ortsprospekt_vom_Piazzale_Michelangelo.ogg]] -[[Sicht auf Bad Kissingen vom Altenberg - Video.ogg>http://commons.wikimedia.org/wiki/File:Sicht_auf_Bad_Kissingen_vom_Altenberg_-_Video.ogg]] -[[Cloud time lapse 1280.ogg>http://commons.wikimedia.org/wiki/File:Cloud_time_lapse_1280.ogg]] -[[FA-18 Automated Aerial Refueling.ogg>http://commons.wikimedia.org/wiki/File:FA-18_Automated_Aerial_Refueling.ogg]] ~ ***動作環境（2011.06現在） HTML5自体が実装途上のものなので、現状では限られた環境でしか動作しません。 -GoogleChrome 正常に動作します。 -Firefox 動画処理（重い・動画のオートリピートが×） マウスホイール× -Safari 動画処理× ドラッグ＆ドロップ× -I.E. 動画処理× ドラッグ＆ドロップ× ~ ***ソースコード この作品は、index.html、style.css、system.js という ４つのファイルからできています。 HTML5ののソースは普通にブラウザの「ソースの表示」で見えますが、 JavaScript、CSSもHTMLのヘッダー部分のリンク先を辿れば見えます。 ~ ~ **アートスペース貘｜Webサイト -http://www.artspacebaku.net/ -Design:HTML+CSS / System:[[PukiWiki>http://pukiwiki.sourceforge.jp/]]のカスタマイズ ~ ~ **MotionSquareJS｜2010 [[&ref(MotionSquareJS.png);>https://design.kyusan-u.ac.jp/OpenSquareJP_repository/MotionSquareJS/MotionSquare.html]] [[Click To Start>https://design.kyusan-u.ac.jp/OpenSquareJP_repository/MotionSquareJS/MotionSquare.html]] ~ ***これは何？ ブラウザ上で画面をクリックして遊ぶ、単なるおもちゃです。 GoogleChrome、Safari、Firefoxで動作確認しました (すみませんI.E.では動きません)。 オープンな仕様にしていますので、「ページを保存」すると全ソースコードが見えます。 raphael.js(MIT)、jquery.js(MIT&GPL)、 colorpicker.js(MIT&GPL) という３つのライブラリーを利用しています。 ~ ***グラフィックライブラリー''raphael'' [[''raphael''>http://raphaeljs.com/]]というJavaScriptのグラフィックスライブラリーの動作実験を兼ねた試作です。 まだ実験段階で、動きの最適化はできていません。 スムーズな動きを実現するにはまだまだ調整が必要な状態です。 この種の仕事は時間に余裕のあるときしかできないので、ちゃんと遊べるようになるにはしばらくかかります。 ~ ***LifeGame について そのままボタンを押しても「何のことやら？」となると思います。 まずは「[[ライフゲームについて(Wikipedeia)>http://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B2%E3%83%BC%E3%83%A0]]」をご一読下さい。 マス目の数を多くして、左クリックでパターンを選択してから実行してみて下さい。 ~ ~ **Motion Cube｜2009 Free Soft Ware Promotion Movie #youtube(VlcOYiJPk1Y, 480, 360) マウスとキーボードでCUBEの色や動きを変えて遊ぶ、シンプルなVisual Toyです。 &small(新しい環境に最適化する暇がなく、現在、配布は行っておりません。); ~ ***はじめに必ずお読み下さい。 1) Windows版(32bit)のみです。ごめんなさい更新はしておりません。 2) ゲームと同様フルスクリーン仕様です。 3) [ESC]で終了します。 4) 本ソフトウェアの利用により何らかの障害や損失が生じても、 著作者は一切の責任の義務を負いません。 初めて起動するときはそれなりに身構えてください。 ~ ***起動その他 解凍後、motioncube.exeをダブルクリックすると起動します。 インストールの必要はありません。 レジストリー等もいじっていませんので、不要になったら、 フォルダーごと捨てて下さい。 左クリックで選択・中ドラッグでグルグル・右クリックでメニュー その他、主な操作は画面右に出ています。 ~ ***ライセンス クリエイティブコモンズCC-BY-NDに従います。 ただし、同梱のGLUT32.dllについては、添付のライセンスに従ってご利用下さい。 ~ ~ ~ ~