Works
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*WORKS
&color(red){このページの掲載内容は5年以上前と古くなって...
//自由かつオープンな技術を用いて、CG・映像の表現研究を行...
~
**MovieSquare 2016
//#image(MovieSquare2015.png)
//https://design.kyusan-u.ac.jp/OpenSquareJP_repository/M...
#youtube(UYZCCYFlSIE)
&small(この動画には音声情報はありません。);
~
***これは何?
//-映像と音声の再生・記録をブラウザ環境のみで実現するWeb...
//前年のバージョンMovieSquare2015を機能拡張したものです。
これはブラウザの動画再生機能を用いたマルチ映像上映システ...
ここで開発した拡張機能の一部は、現在__[[ソーシャルデザイ...
-このシステムでは、例えば以下のようなことができます。
--お手元にある動画ファイルを用いたマルチ上映
--Webカメラを用いた録画と保存(WebM形式)
--内臓マイクを用いた録音と保存(WAV形式)
-基礎となる技術は <video>等のHTMLタグによる動画の埋め込み
-3つの表示モードがあります
--EDITモード:通常のWebサイト(Wiki)としての閲覧・編集を行う
--SCREENモード:プレゼンテーション用に本文部分を拡大表示
--FULL SCREENモード:ページ内の映像要素のみを上映
//-&color(red){ブラウザは''Firefox''を推奨します。};
~
***動作環境その他(2016.05現在)
-推奨ブラウザはFirefox、Chromeです。
-Webカメラを用いるプリセットを選択すると、Webカメラの起動...
~
~
**MovieSquare 2015
***これは何?
複数の動画をWebページ内に配置し、それらを同時再生してマル...
//&size(12){[[MovieSquare2015>https://design.kyusan-u.ac....
~
~
**MotionCube 2014
[[&ref(MotionCube2014.png,,576x323);>https://design.kyusa...
[[Click To Start>https://design.kyusan-u.ac.jp/OpenSquare...
&size(12){&color(red){Webカメラを利用する仕様のため、近年...
~
***これは何?
3DCGによるCUBEの動きをインタラクティブに楽しむ作品です。...
使っているのは HTML、CSS、JavaScript、WebGL といったオ...
-左ドラッグ : CUBE が動きます
-中ドラッグ : 世界が回転します
-右ドラッグ : カメラが上下左右に移動します
-マウスホイール : ズームします
この作品では、あなたのPCに搭載されたWebカメラの映像、また...
プリセットの画像素材、動画素材は仮のものです。動画のプリ...
-Video01 [[Chimmie Hicks at the races c1902.ogv F.S. Arm...
-Video02. [[Automobile parade.ogg / Thomas A. Edison>ht...
-Video03. [[Remscheid - Lennep - Schützenplatz / Frank V...
-Video04 [[Wuppertal - Zoo / Frank Vincentz>http://commo...
-Video05 [[Sardines.ogg / James Kilfiger>http://commons....
-Video06 [[Antigua - Caleta de Fuste - Paseo Maritimo / ...
-Video07 [[Pájara - Morro Jable / Frank Vincentz>http://...
~
***動作環境その他(2014.07現在)
-Chrome、Firefox、Safari で動作します([[WebGLを有効>Goog...
-メニューでWebカメラを選択すると、Webカメラの起動許可を求...
ソースを見ていただければわかりますが、Webカメラの映像は、...
~
***ソースコード
HTML、CSS、JavaScriptのみの一般的なWebコンテンツですので...
~
~
**MotionCubeJS|2013
[[&ref(MotionCube2013.png);>https://design.kyusan-u.ac.jp...
[[Click To Start>https://design.kyusan-u.ac.jp/OpenSquare...
~
***これは何?
ブラウザ上で画面をクリックして遊ぶ、単なるおもちゃです。W...
この作品では、あなたのPC上にある静止画・動画ファイルを
ドラッグ&ドロップすると、それを素材として遊べる仕様になっ...
プリセットの画像素材、動画素材は仮のものです。
動画のプリセット素材については、WikimediaCommons上の
クリエイティブコモンズライセンスまたはパブリックドメインの
ファイルを利用させていただいています。以下がそのリンクで...
-[[File:Pycnonotus melanicterus trio - Kaeng Krachan.ogv ...
-[[File:Sardines.ogg by James Kilfiger(CC)>http://commons...
-[[File:Cloud time lapse 1280.ogg (Public Domain)>http://...
~
***動作環境その他(2013.11現在)
-GoogleChrome、Firefox ほぼすべて動作します。
-Safari デフォルトでは動きませんが、環境設定で「開発メニ...
~
***ソースコード
この作品は、index.html、style.css、system.js、three.min.j...
4つのファイルからできています。
HTMLは普通にブラウザの「ソースの表示」で見えます。
JavaScript、CSSもHTMLのヘッダー部分のリンク先を辿れば見え...
~
~
**MotionSquareHTML5|2011
[[&ref(MotionSquareHTML5.png);>https://design.kyusan-u.ac...
[[Click To Start>https://design.kyusan-u.ac.jp/OpenSquare...
~
***これは何?
ブラウザ上で画面をクリックして遊ぶ、単なるおもちゃです。
HTML5とJavaScriptによる動画制御の可能性を調べる目的で制作...
この作品では、あなたのPC上にある静止画・動画ファイルを
ドラッグ&ドロップすると、それを素材として遊べる仕様になっ...
したがって、プリセットの「素材」も仮のものということで、
動画については、WikimediaCommons上のCC、PDライセンスの動...
利用させていただいています。以下がそのリンクです。
-[[Florenz - Ortsprospekt vom Piazzale Michelangelo.ogg>h...
-[[Sicht auf Bad Kissingen vom Altenberg - Video.ogg>http...
-[[Cloud time lapse 1280.ogg>http://commons.wikimedia.org...
-[[FA-18 Automated Aerial Refueling.ogg>http://commons.wi...
~
***動作環境(2011.06現在)
HTML5自体が実装途上のものなので、現状では限られた環境でし...
-GoogleChrome 正常に動作します。
-Firefox 動画処理(重い・動画のオートリピートが×) マウ...
-Safari 動画処理× ドラッグ&ドロップ×
-I.E. 動画処理× ドラッグ&ドロップ×
~
***ソースコード
この作品は、index.html、style.css、system.js という
4つのファイルからできています。
HTML5ののソースは普通にブラウザの「ソースの表示」で見えま...
JavaScript、CSSもHTMLのヘッダー部分のリンク先を辿れば見え...
~
~
**アートスペース貘|Webサイト
-http://www.artspacebaku.net/
-Design:HTML+CSS / System:[[PukiWiki>http://pukiwiki.so...
~
~
**MotionSquareJS|2010
[[&ref(MotionSquareJS.png);>https://design.kyusan-u.ac.jp...
[[Click To Start>https://design.kyusan-u.ac.jp/OpenSquare...
~
***これは何?
ブラウザ上で画面をクリックして遊ぶ、単なるおもちゃです。
GoogleChrome、Safari、Firefoxで動作確認しました (すみませ...
オープンな仕様にしていますので、「ページを保存」すると全...
raphael.js(MIT)、jquery.js(MIT&GPL)、 colorpicker.js(MIT&...
~
***グラフィックライブラリー''raphael''
[[''raphael''>http://raphaeljs.com/]]というJavaScriptのグ...
~
***LifeGame について
そのままボタンを押しても「何のことやら?」となると思いま...
まずは「[[ライフゲームについて(Wikipedeia)>http://ja.wiki...
マス目の数を多くして、左クリックでパターンを選択してから...
~
~
**Motion Cube|2009
Free Soft Ware Promotion Movie
#youtube(VlcOYiJPk1Y, 480, 360)
マウスとキーボードでCUBEの色や動きを変えて遊ぶ、シンプル...
&small(新しい環境に最適化する暇がなく、現在、配布は行って...
~
***はじめに必ずお読み下さい。
1) Windows版(32bit)のみです。ごめんなさい更新はしておりま...
2) ゲームと同様フルスクリーン仕様です。
3) [ESC]で終了します。
4) 本ソフトウェアの利用により何らかの障害や損失が生じても、
著作者は一切の責任の義務を負いません。
初めて起動するときはそれなりに身構えてください。
~
***起動その他
解凍後、motioncube.exeをダブルクリックすると起動します。
インストールの必要はありません。
レジストリー等もいじっていませんので、不要になったら、
フォルダーごと捨てて下さい。
左クリックで選択・中ドラッグでグルグル・右クリックでメニ...
その他、主な操作は画面右に出ています。
~
***ライセンス
クリエイティブコモンズCC-BY-NDに従います。
ただし、同梱のGLUT32.dllについては、添付のライセンスに従...
~
~
~
~
終了行:
*WORKS
&color(red){このページの掲載内容は5年以上前と古くなって...
//自由かつオープンな技術を用いて、CG・映像の表現研究を行...
~
**MovieSquare 2016
//#image(MovieSquare2015.png)
//https://design.kyusan-u.ac.jp/OpenSquareJP_repository/M...
#youtube(UYZCCYFlSIE)
&small(この動画には音声情報はありません。);
~
***これは何?
//-映像と音声の再生・記録をブラウザ環境のみで実現するWeb...
//前年のバージョンMovieSquare2015を機能拡張したものです。
これはブラウザの動画再生機能を用いたマルチ映像上映システ...
ここで開発した拡張機能の一部は、現在__[[ソーシャルデザイ...
-このシステムでは、例えば以下のようなことができます。
--お手元にある動画ファイルを用いたマルチ上映
--Webカメラを用いた録画と保存(WebM形式)
--内臓マイクを用いた録音と保存(WAV形式)
-基礎となる技術は <video>等のHTMLタグによる動画の埋め込み
-3つの表示モードがあります
--EDITモード:通常のWebサイト(Wiki)としての閲覧・編集を行う
--SCREENモード:プレゼンテーション用に本文部分を拡大表示
--FULL SCREENモード:ページ内の映像要素のみを上映
//-&color(red){ブラウザは''Firefox''を推奨します。};
~
***動作環境その他(2016.05現在)
-推奨ブラウザはFirefox、Chromeです。
-Webカメラを用いるプリセットを選択すると、Webカメラの起動...
~
~
**MovieSquare 2015
***これは何?
複数の動画をWebページ内に配置し、それらを同時再生してマル...
//&size(12){[[MovieSquare2015>https://design.kyusan-u.ac....
~
~
**MotionCube 2014
[[&ref(MotionCube2014.png,,576x323);>https://design.kyusa...
[[Click To Start>https://design.kyusan-u.ac.jp/OpenSquare...
&size(12){&color(red){Webカメラを利用する仕様のため、近年...
~
***これは何?
3DCGによるCUBEの動きをインタラクティブに楽しむ作品です。...
使っているのは HTML、CSS、JavaScript、WebGL といったオ...
-左ドラッグ : CUBE が動きます
-中ドラッグ : 世界が回転します
-右ドラッグ : カメラが上下左右に移動します
-マウスホイール : ズームします
この作品では、あなたのPCに搭載されたWebカメラの映像、また...
プリセットの画像素材、動画素材は仮のものです。動画のプリ...
-Video01 [[Chimmie Hicks at the races c1902.ogv F.S. Arm...
-Video02. [[Automobile parade.ogg / Thomas A. Edison>ht...
-Video03. [[Remscheid - Lennep - Schützenplatz / Frank V...
-Video04 [[Wuppertal - Zoo / Frank Vincentz>http://commo...
-Video05 [[Sardines.ogg / James Kilfiger>http://commons....
-Video06 [[Antigua - Caleta de Fuste - Paseo Maritimo / ...
-Video07 [[Pájara - Morro Jable / Frank Vincentz>http://...
~
***動作環境その他(2014.07現在)
-Chrome、Firefox、Safari で動作します([[WebGLを有効>Goog...
-メニューでWebカメラを選択すると、Webカメラの起動許可を求...
ソースを見ていただければわかりますが、Webカメラの映像は、...
~
***ソースコード
HTML、CSS、JavaScriptのみの一般的なWebコンテンツですので...
~
~
**MotionCubeJS|2013
[[&ref(MotionCube2013.png);>https://design.kyusan-u.ac.jp...
[[Click To Start>https://design.kyusan-u.ac.jp/OpenSquare...
~
***これは何?
ブラウザ上で画面をクリックして遊ぶ、単なるおもちゃです。W...
この作品では、あなたのPC上にある静止画・動画ファイルを
ドラッグ&ドロップすると、それを素材として遊べる仕様になっ...
プリセットの画像素材、動画素材は仮のものです。
動画のプリセット素材については、WikimediaCommons上の
クリエイティブコモンズライセンスまたはパブリックドメインの
ファイルを利用させていただいています。以下がそのリンクで...
-[[File:Pycnonotus melanicterus trio - Kaeng Krachan.ogv ...
-[[File:Sardines.ogg by James Kilfiger(CC)>http://commons...
-[[File:Cloud time lapse 1280.ogg (Public Domain)>http://...
~
***動作環境その他(2013.11現在)
-GoogleChrome、Firefox ほぼすべて動作します。
-Safari デフォルトでは動きませんが、環境設定で「開発メニ...
~
***ソースコード
この作品は、index.html、style.css、system.js、three.min.j...
4つのファイルからできています。
HTMLは普通にブラウザの「ソースの表示」で見えます。
JavaScript、CSSもHTMLのヘッダー部分のリンク先を辿れば見え...
~
~
**MotionSquareHTML5|2011
[[&ref(MotionSquareHTML5.png);>https://design.kyusan-u.ac...
[[Click To Start>https://design.kyusan-u.ac.jp/OpenSquare...
~
***これは何?
ブラウザ上で画面をクリックして遊ぶ、単なるおもちゃです。
HTML5とJavaScriptによる動画制御の可能性を調べる目的で制作...
この作品では、あなたのPC上にある静止画・動画ファイルを
ドラッグ&ドロップすると、それを素材として遊べる仕様になっ...
したがって、プリセットの「素材」も仮のものということで、
動画については、WikimediaCommons上のCC、PDライセンスの動...
利用させていただいています。以下がそのリンクです。
-[[Florenz - Ortsprospekt vom Piazzale Michelangelo.ogg>h...
-[[Sicht auf Bad Kissingen vom Altenberg - Video.ogg>http...
-[[Cloud time lapse 1280.ogg>http://commons.wikimedia.org...
-[[FA-18 Automated Aerial Refueling.ogg>http://commons.wi...
~
***動作環境(2011.06現在)
HTML5自体が実装途上のものなので、現状では限られた環境でし...
-GoogleChrome 正常に動作します。
-Firefox 動画処理(重い・動画のオートリピートが×) マウ...
-Safari 動画処理× ドラッグ&ドロップ×
-I.E. 動画処理× ドラッグ&ドロップ×
~
***ソースコード
この作品は、index.html、style.css、system.js という
4つのファイルからできています。
HTML5ののソースは普通にブラウザの「ソースの表示」で見えま...
JavaScript、CSSもHTMLのヘッダー部分のリンク先を辿れば見え...
~
~
**アートスペース貘|Webサイト
-http://www.artspacebaku.net/
-Design:HTML+CSS / System:[[PukiWiki>http://pukiwiki.so...
~
~
**MotionSquareJS|2010
[[&ref(MotionSquareJS.png);>https://design.kyusan-u.ac.jp...
[[Click To Start>https://design.kyusan-u.ac.jp/OpenSquare...
~
***これは何?
ブラウザ上で画面をクリックして遊ぶ、単なるおもちゃです。
GoogleChrome、Safari、Firefoxで動作確認しました (すみませ...
オープンな仕様にしていますので、「ページを保存」すると全...
raphael.js(MIT)、jquery.js(MIT&GPL)、 colorpicker.js(MIT&...
~
***グラフィックライブラリー''raphael''
[[''raphael''>http://raphaeljs.com/]]というJavaScriptのグ...
~
***LifeGame について
そのままボタンを押しても「何のことやら?」となると思いま...
まずは「[[ライフゲームについて(Wikipedeia)>http://ja.wiki...
マス目の数を多くして、左クリックでパターンを選択してから...
~
~
**Motion Cube|2009
Free Soft Ware Promotion Movie
#youtube(VlcOYiJPk1Y, 480, 360)
マウスとキーボードでCUBEの色や動きを変えて遊ぶ、シンプル...
&small(新しい環境に最適化する暇がなく、現在、配布は行って...
~
***はじめに必ずお読み下さい。
1) Windows版(32bit)のみです。ごめんなさい更新はしておりま...
2) ゲームと同様フルスクリーン仕様です。
3) [ESC]で終了します。
4) 本ソフトウェアの利用により何らかの障害や損失が生じても、
著作者は一切の責任の義務を負いません。
初めて起動するときはそれなりに身構えてください。
~
***起動その他
解凍後、motioncube.exeをダブルクリックすると起動します。
インストールの必要はありません。
レジストリー等もいじっていませんので、不要になったら、
フォルダーごと捨てて下さい。
左クリックで選択・中ドラッグでグルグル・右クリックでメニ...
その他、主な操作は画面右に出ています。
~
***ライセンス
クリエイティブコモンズCC-BY-NDに従います。
ただし、同梱のGLUT32.dllについては、添付のライセンスに従...
~
~
~
~
ページ名: