ShuffleColorFilter

svggirl

2011-04-27 12:19:49

License: MIT License

Fork: 74

Fav: 2

View: 11763

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 94 lines
HTML 9 lines
CSS 48 lines

ShuffleColorFilter

How to use

This code is loaded before SVG animation, and run on same domain with SVG animation playing code, in the below order.

1. filter.each_text(svg_text, n)
2. filter.each_node(svg_node, n)
3. filter.complete(svg_node)

Each method is called with following timing.

* filter.each_text(svg_text, n)
Called before SVG text is loaded and added to DOM. svg_text is SVG text value, while n is current frame number.
(however, since background SVG is loading at the same time, frame number and played number is not equal)
After modifying svg_text, it is necessary to return the return value. There is no inline SVG support, thus it's impossible to call from browser.

* filter.each_node(svg_node, n)
SVG element is called whenever it is read. 
SVG element is given on svg_node, and n gives frame number.
(however, since background SVG is loading at the same time, frame number and played number is not equal)
The return value is dropped to enable direct modification on SVG element.
It could be called on most of browser that handle SVG.

* filter.complete(svg_node, background_node)
It's called after all SVG elements are loaded.
New elemtn where video SVG element is compiled is given to svg_node, whereas new element with compiled background SVG element is given to background_node.
The return value is dropped to enable direct modification on SVG element.
It could be called on most of browser that handle SVG.

//----------------------------------------------------------------------------------------

・使い方

コードはSVGアニメーション再生前に読み込まれ、
SVGアニメーション再生用のコードと同じドメイン上で以下の順番で実行されます。

1. filter.each_text(svg_text, n)
2. filter.each_node(svg_node, n)
3. filter.complete(svg_node)

それぞれのメソッドは以下のタイミングで呼び出されます。

* filter.each_text(svg_text, n)
SVGテキストが読み込まれDOMに追加される前に呼び出されます。
svg_textはSVGのテキスト情報、nは現在のフレーム数が渡されます。
（ただし、背景用SVGも読み込まれるため、フレーム数と再生秒数は一致しません）
svg_textを変更後、返り値として返す必要があります。
インラインSVGがサポートされていないブラウザでは呼び出しが行われません。

* filter.each_node(svg_node, n)
SVG要素が読み込まれる度に呼び出されます。
svg_nodeはSVG要素、nは現在のフレーム数が渡されます。
（ただし、背景用SVGも読み込まれるため、フレーム数と再生秒数は一致しません）
SVG要素を直接変更できるため、返り値は破棄されます。
SVGを扱うことのできるブラウザ全般で呼び出されます。

* filter.complete(svg_node, background_node)
SVG要素がすべて読み込まれた後に呼び出されます。
svg_nodeは動画SVG要素が格納されている親要素、background_nodeは背景SVG要素が格納されている親要素が渡されます。
SVG要素を直接変更できるため、返り値は破棄されます。
SVGを扱うことのできるブラウザ全般で呼び出されます。
*/

if (typeof filter === 'undefined') {
    var filter = {};
};
filter.each_text = function(svg_text, n) {
  var color = /#\w{3,6}/ig;
  var colors = svg_text.match(color);
  var count = colors.length - 1;
  if (!colors.length) return svg_text;

var text = svg_text.replace(color, function() {
    var col = colors[filter.each_text.random(count)]
    return col;
  });
  return text;
};

filter.each_text.random = function(max) {
  return Math.floor(Math.random() * (max + 1));
};

filter.each_node = function(svg_node, n) {
  log(n);
};

filter.complete = function(svg_node) {
  log('complete! total: '+svg_node.length);
};

ShuffleColorFilter

http://jsdo.it/event/svggirl This piece of code represents most basic script to edit/fork SVG Girl animation. By forking the JavaScript portion, you can modify the colors used in animation or modify drawing algorithm of elements used here. You can view the part of animation modified by code by clicking “Watch SVG Girl” on the right of the fork button. For details please refer to code comments. //---------------------------------------------------------------------------------------- http://jsdo.it/event/svggirl このコードはSVG Girlのアニメーションを変更するためのコードです。このコードをForkし、JavaScript部分を変更することにより SVG Girlのアニメーションの色を変更したり、描画される要素を書き換えることができます。 Forkボタンの右にある「Watch SVG女子」のリンクからこのコードが適応された状態のSVGアニメーションを体験することができます。詳細に関してはコードのコメントをご覧ください。/* How to use This code is loaded before SVG animation, and run on same domain with SVG animation playing code, in the below order. 1. filter.each_text(svg_text, n) 2. filter.each_node(svg_node, n) 3. filter.complete(svg_node) Each method is called with following timing. * filter.each_text(svg_text, n) Called before SVG text is loaded and added to DOM. svg_text is SVG text value, while n is current frame number. (however, since background SVG is loading at the same time, frame number and played number is not equal) After modifying svg_text, it is necessary to return the return value. There is no inline SVG support, thus it's impossible to call from browser. * filter.each_node(svg_node, n) SVG element is called whenever it is read. SVG element is given on svg_node, and n gives frame number. (however, since background SVG is loading at the same time, frame number and played number is not equal) The return value is dropped to enable direct modification on SVG element. It could be called on most of browser that handle SVG. * filter.complete(svg_node, background_node) It's called after all SVG elements are loaded. New elemtn where video SVG element is compiled is given to svg_node, whereas new element with compiled background SVG element is given to background_node. The return value is dropped to enable direct modification on SVG element. It could be called on most of browser that handle SVG. //---------------------------------------------------------------------------------------- ・使い方コードはSVGアニメーション再生前に読み込まれ、 SVGアニメーション再生用のコードと同じドメイン上で以下の順番で実行されます。 1. filter.each_text(svg_text, n) 2. filter.each_node(svg_node, n) 3. filter.complete(svg_node) それぞれのメソッドは以下のタイミングで呼び出されます。 * filter.each_text(svg_text, n) SVGテキストが読み込まれDOMに追加される前に呼び出されます。 svg_textはSVGのテキスト情報、nは現在のフレーム数が渡されます。（ただし、背景用SVGも読み込まれるため、フレーム数と再生秒数は一致しません） svg_textを変更後、返り値として返す必要があります。インラインSVGがサポートされていないブラウザでは呼び出しが行われません。 * filter.each_node(svg_node, n) SVG要素が読み込まれる度に呼び出されます。 svg_nodeはSVG要素、nは現在のフレーム数が渡されます。（ただし、背景用SVGも読み込まれるため、フレーム数と再生秒数は一致しません） SVG要素を直接変更できるため、返り値は破棄されます。 SVGを扱うことのできるブラウザ全般で呼び出されます。 * filter.complete(svg_node, background_node) SVG要素がすべて読み込まれた後に呼び出されます。 svg_nodeは動画SVG要素が格納されている親要素、background_nodeは背景SVG要素が格納されている親要素が渡されます。 SVG要素を直接変更できるため、返り値は破棄されます。 SVGを扱うことのできるブラウザ全般で呼び出されます。 */ if (typeof filter === 'undefined') { var filter = {}; }; filter.each_text = function(svg_text, n) { var color = /#\w{3,6}/ig; var colors = svg_text.match(color); var count = colors.length - 1; if (!colors.length) return svg_text; var text = svg_text.replace(color, function() { var col = colors[filter.each_text.random(count)] return col; }); return text; }; filter.each_text.random = function(max) { return Math.floor(Math.random() * (max + 1)); }; filter.each_node = function(svg_node, n) { log(n); }; filter.complete = function(svg_node) { log('complete! total: '+svg_node.length); }; <div id="ext"></div> <div id="svg"></div> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.2.min.js"></script> <script src="http://jsdo.it/event/svggirl/js/config.js"></script> <script src="http://jsdo.it/event/svggirl/js/9.js"></script> <script src="http://jsdo.it/event/svggirl/js/preview.js"></script> <script src="http://jsdo.it/event/svggirl/js/svg.js"></script> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } html { background-color: #fff; } #svg, #ext { position: absolute; top: 0; left: 0; } #ext div { display: none; position: absolute; top: 0; left: 0; } #ext div:first-child { display: block; } #svg_143_157_3_tower_svgz { z-index: 0 !important; } div { width: 100%; height: 100%; } svg { width: 100%; height: 100%; vertical-align: middle; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/m8gPx/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/svggirl/svg_sample_filter" title="ShuffleColorFilter">ShuffleColorFilter - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip