3D typography - study of Quartz Composer from Yuma Hori on Vimeo. スクリーンショット ダウンロード hokkey/quartz-composer-works: Quartz Composer Works ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・動画・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 QCにまたはまってきた。今はまだ静的なデータだけど、この前のテキストマイニングとか使えばもっと作品っぽくできるのでは…。もっと作ってみたい。 #quartzcomposer https://t.co/ax1TTWDkBV https://t.co/VyWjxna8tD — hokkey (@y_hokkey) 2016年5月25日 コメント HYPER-REALITYという作品を目にし、3Dで動くUIっぽいタイポグラフィって恰好良いよな〜、という思いでとりあえず作ってみました。
社内勉強会用に作成したスライドです。メディアアート的な映像表現を得意とする開発環境「Quartz Composer」の特長をWebフロントエンド向けに解説した内容となっています。 また、本スライドの内容を更に発展させた記事をLIGブログにも掲載しています。 マウスで3DCGをプログラミング！ 無料ツール「Quartz Composer」でHello World！ | それいけ！フロントエンド スライド デモ作品 iTunes Music Visualizer #1 参考リンク 未来派図画工作 KanoLab Origami — Design Prototyping インタラクティブデザインプロトタイピングのためのFacebook Origami QuartzComposerでiOSアプリプロトタイピングする必要があるのか #vgadvent2014 - Qiita Quartz Composer + Facebook Origamiでインタラクティブなスケッチのススメ 株式会社レインボー・ジャパン スライド(一部)
iTunesのビジュアライザーとして動作するメディアアートっぽい作品です。 動画 スクリーンショット ダウンロード hokkey/quartz-composer-works: Quartz Composer Works ダウンロードしたqtzファイルを~/Library/Compositions内に配置すると、iTunesのビジュアライザとして選択できるようになります。 謝辞 デモ動画用の楽曲として「Catch My Fall」を使用させていただきました。 “Catch My Fall (feat. Sassygal)” by Nocturnia is licensed under a Attribution-NonCommercial 3.0 International License. 楽曲についての詳細はFree Music Archive: Psychadelik Pedestrian - Nocturniaを参照してください。 ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2016年5月9日 コメント 社内勉強会資料の今更はじめるQuartz Composerでのデモ用で適当作るつもりが、 今までのQC作品で一番ダイナミックに動くものが完成した。こういう作品ももっと作ってみたいな〜
CSSのfilterプロパティを使うと、YouTubeの動画に後からぼかし効果を加えることができる。 animationプロパティと組み合わせてブラー効果を周期的に変化させるようなデモを作ってみた。 FPSゲームでダメージを食らって死にそうなときの表現に似ている。 デモ See the Pen Blur CSS Animation on YouTube Video by y_hokkey (@hokkey) on CodePen. 互換性が低い手法 面白いので使ってみたくなるが、クロスブラウザでの動作がかなり怪しい。PCでもSPでも万全に使用できる雰囲気ではないので、仕事の案件で使うのは難しそうだ。残念。 2016年3月での検証結果 Chrome/Safari/Firefoxで動作 IE非対応 Android4.4.4で動作 iPhoneで一度フルスクリーン状態になるとそれ以降正常に適用されない。MobileSafariの仕様で自動的にフルスクリーン再生に移行してしまう為、実質的に使えない iPadでは動作
プログラムならではの表現を模索するため、ランダムに自動生成されるモーションタイポグラフィーを制作しました。 AppleのQuartzComposerを使用した3Dアニメーションで、Mac OS Xのスクリーンセーバーとしてそのまま使用できます。 動画 ※BGMは動画のためのもので、作品には含まれません。 スクリーンショット コンセプト サインシステムの美しさと、表記パターンの多様さに注目 東京メトロ銀座駅・日比谷駅・有楽町駅・東銀座駅は1つの地下空間として繋がっていて、 そこには番号の振られた出口があわせて44存在します。(2012年当時) 駅構内には鮮かな黄色の出口案内が無数に掲示され、その矢印記号の向きと、 アルファベットと数字の記号の組み合せはかなりの種類に及びます。 Metro Exitsは、この出口サインの組み合わせの多用さと、タイポグラフィとしての美しさに着目した作品です。 この作品では、9方向の矢印記号と44種類の出口記号が、ランダムな組み合わせで無限に生成されては、通路の奥から手前へ消えていきます。 ときおり、通路の下を6つの「G」マークが通過していくのは、編成の地下鉄銀座線を表現しています。 ダウンロード hokkey/quartz-composer-works: Quartz Composer Works ダウンロードしたqtzファイルを~/Library/Screen savers内に配置すると、Macのスクリーンセーバーとして選択できるようになります。 ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2013年12月18日 コメント 空港や鉄道の公共サインシステムが大好きです。以前よく利用していた地下鉄の日比谷駅はとても出口の数が多く、アルファベットや数字のパターンがとても沢山あります。 丁度プログラミング独自の表現をやってみたいと思ってたため、サインシステムのタイポグラフィにランダム性を取り入れたら面白いんじゃないか、と思ってこれを作ってみました。 実際のタイポグラフィでは「Frutiger(フルティガー)」が使用されていますが、この作品では便宜上「Neue Helvetica(ノイエ・ヘルベチカ)」を使用しています。
RSSフィードから取得した情報を3DCGで表示する作品です。そのままMac OS X用のスクリーンセーバーとして使用できます。 動画 ※BGMは動画のためのもので、作品には含まれません。 スクリーンショット ダウンロード hokkey/quartz-composer-works: Quartz Composer Works ダウンロードしたqtzファイルを~/Library/Screen savers内に配置すると、Macのスクリーンセーバーとして選択できるようになります。 ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2013年1月 コメント 未来派図画工作で配布されていた『20世紀ボヤージ』(現在は『21世紀ボヤージ』)に感銘を受け、自分も3Dで動くタイポグラフィを作ってみたい！ という動機から作成した作品です。3D空間にRSSフィードから取得した見出しをレイアウトし、ダイナミックに色彩が変わったり、3次元的にアニメーションする表現を試してみました。
