Category Archives: Tryout

now in progress

「アラ、終わる気しないですね」の波が何度も押し寄せて来ちゃってる。

shaking typography with bookmarklet

リンクをクリック!もしくはリンクをブックマークバーまでドラッグして好きなページでクリック!

SHAKE IT

embedding inline svg

HTMLに直接SVG埋め込んでごにょごにょしたくてハマったのでメモ。

HTML5の仕様上インラインSVGは認められているものの、現状対応してるのはIE9とFirefox4のみらしい。その他のブラウザはHTML内で以下のように記述してもSVGは描画されない。

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
	<svg width="100" height="100" viewBox="0 0 100 100">
		<rect x="0" y="0" width="50" height="50" />
	</svg>
</body>
</html>

解決方法は3通り、
1. objectタグで埋め込み
2. XHTMLに記述する
3. JavaScriptで記述する

今回はダイナミックに図形を書き換えたいので1はNG。拡張子がxhtmlに変わるのがキモイので2もNG。よって今回は3のjsによるアプローチを試した。

HTMLは先ほどと同じ。SVGをラップするdivタグを用意。

<html>
<body>
	<div id="svg"></div>
</body>
</html>

まずHTMLとSVGの名前空間を分離するためにSVG用の名前空間を用意。

var svgNS ="http://www.w3.org/2000/svg";

createElementNSで先ほど用意したSVG用の名前空間にsvgタグを作る。

var svg = document.createElementNS(svgNS, "svg");

各要素をセットする。

svg.setAttribute("width", 100);
svg.setAttribute("height", 100);
svg.setAttribute("viewBox", "0 0 100 100");

ラッパーdivを捕捉して先ほど作ったSVGタグを追加する。

var wrapper = document.getElementById(wrapperId);
wrapper.appendChild(svg);

これでsvgの用意はok。あとはSVGの名前空間の方に要素を追加、操作すればいい。
例:円を描画。

var circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx',50);
circle.setAttribute('cy',50);
circle.setAttribute('r',50);
svg.appendChild(circle);

結論、クソめんどいからSVGをまるっとラップしたショートカットクラスが欲しい。
あった。

study01

Cubic Mirror

前回からの続き。
Cubic Mirror
Cubic Mirror

要ウェブカメラ、要FlashPlayer10以上

※追記
FlashPlayerのセキュリティ上、ウェブカメラを使おうとするとアクセス許可を求められるけど、このコンテンツ自体はウェブカメラの映像をどこかに流したりというような悪用はできないのでウェブカメラへのアクセスは許可しても大丈夫です。

Pliable Mirorr

課題で作った新しい鏡の提案。

Pliable Mirorr.jpg
Pliable Mirror

要ウェブカメラ、要FlashPlayer10以上

※追記
FlashPlayerのセキュリティ上、ウェブカメラを使おうとするとアクセス許可を求められるけど、このコンテンツ自体はウェブカメラの映像をどこかに流したりというような悪用はできないのでウェブカメラへのアクセスは許可しても大丈夫です。

indexhibit試してみた

上西さんindexhibit使ってサイト作ってたのがおもしろそうだったのでちょっと触ってみた。

source lab. sketch

indexhibitってのはポートフォリオサイト作成に特化したcms。ちょっといじってみたらすんごい簡単にインスコできた。こりゃいい。

ただテンプレが直接いじれないので細かく作り込むにはphpを直接編集しないといけない。これはちょっと面倒。

あと途中でつまづいたのはGoogleAnalyticsのコードを埋め込む位置。これは「ndxz-studio/lib」の中のfront.phpに左メニューのhtmlを出力してる箇所があるので247行目あたりの</body>直前にgaのコード貼り付けておけ。

以上。

ピクセルフォントを自作

Avant Garade Gothic Pixel

ピクセルフォントであんまりよろしいのがないので自作してみた。原型はAvant Garde Gothic。ついでにリガチャも作ってみた。リガチャ付きのピクセルフォントってあんまないよね。たぶん。

つーわけでこっからOTF化してカーニング調整地獄。こういう原型アリの書体って勝手に配布とかっていいのかな?そのへんのライセンス関係ってどうなってんだろうか。

face is fake video study2

face is fake (video study2) from bouze on Vimeo.

人望不足でじぇんじぇん撮影許可もらえないから深夜に1人で頭振ってみた。

組版でダヴィンチ

mona typo

レンダリングに長時間かかってMacの熱がやばくなったので6時間超でやむなく中断。左1.5列が欠けてるのはそのため。
このぐらいのオブジェクト量で半日近くかかるのはちょっとしんどいなぁ。

ディテールはこんなん。ある程度パラメータ調節すれば可読性は維持できそう。

mona typo ディテール