quad/zoe-text.html

## zoe-text.html
<html>
  <meta charset="utf-8" />

  <style>
    body { background-color: white; margin: auto; text-align: center; }
    p { writing-mode: vertical-rl; }
    span { font-size: 3vh; }
    #off { color: white };
  </style>

  <body>
    <p>
      <span id="on"></span><span id="noise">?</span><span id="off">
人之初，性本善；性相近，習相遠。
苟不教一性乃遷；教之道，貴以專。
昔孟母，擇鄰處；子不學，斷機杼。
竇燕山，有義方；教五子，名俱揚。
養不教，父之過；教不嚴，師之惰。
子不學，非所宜；幼不學，老何為？
玉不琢，不成器；人不學，不知義。
為人子，方少時；親師友，習禮儀。
香九齡，能溫席；孝於親，所當執。
融四歲，能讓梨；弟於長，宜先知。
首孝弟，次見聞；知某數，識某文。
一而十，十而百，百而千，千而萬。
三才者，天地人。三光者，日月星。
三綱者，君臣義，父子親，夫婦順。
曰春夏，曰秋冬；此四時，運不窮。
曰南北，曰西東；此四方，應乎中。
曰水火，木金土；此五行，本乎數。
曰仁義，禮智信；此五常，不容紊。
稻粱菽，麥黍稷；此六穀，人所食。
馬牛羊，雞犬豕；此六畜，人所飼。
曰喜怒，曰哀懼，愛惡欲，七情具。
匏土革，木石金，絲與竹，乃八音。
高曾祖，父而身，身而子，子而孫，
自子孫，至玄曾；乃九族，人之倫。
父子恩，夫婦從，兄則友，弟則恭，
長幼序，友與朋，君則敬，臣則忠；此十義，人所同。</span>
    </p>
  </body>

  <script>
    "use strict";

    var every = function(f, offset) {
      var _this = {x: 123};

      var cb = function(timestamp) {
        if (!_this.last)
          _this.last = timestamp;

        var since = Math.floor(timestamp - _this.last);
        if (since > offset) {
          _this.last = timestamp;
          if (f())
            return;
        }

        window.requestAnimationFrame(cb);
      };

      window.requestAnimationFrame(cb);

      return _this;
    };

    var noise_char = function() {
      var s1 = "一乙丁九了";
      var s2 = "二人入刀力十又乃";
      var s3 = "三上下久凡叉口小士土大子山川已干才";
      var s4 = "正不中丹之元五井仁什今公內六分切勿化午友反太夫少勻戶手支文日月木止王毛水火父牙牛";

      var text = s1 + s2 + s3 + s4;
      var idx = Math.floor(Math.random() * text.length);

      return text[idx];
    }

    var noise = function() {
      var e_noise = document.getElementById("noise");
      e_noise.textContent = noise_char();
    };

    var next = function() {
      var e_on = document.getElementById("on");
      var e_off = document.getElementById("off");

      if (!e_off.textContent)
        return true;

      e_on.textContent += e_off.textContent[0]
      e_off.textContent = e_off.textContent.slice(1, e_off.textContent.length)
    };

    new every(noise, 50);
    new every(next, 250);
  </script>
</html>
	<html>
	<meta charset="utf-8" />

	<style>
	body { background-color: white; margin: auto; text-align: center; }
	p { writing-mode: vertical-rl; }
	span { font-size: 3vh; }
	#off { color: white };
	</style>

	<body>
	<p>
	<span id="on"></span><span id="noise">?</span><span id="off">
	人之初，性本善；性相近，習相遠。
	苟不教一性乃遷；教之道，貴以專。
	昔孟母，擇鄰處；子不學，斷機杼。
	竇燕山，有義方；教五子，名俱揚。
	養不教，父之過；教不嚴，師之惰。
	子不學，非所宜；幼不學，老何為？
	玉不琢，不成器；人不學，不知義。
	為人子，方少時；親師友，習禮儀。
	香九齡，能溫席；孝於親，所當執。
	融四歲，能讓梨；弟於長，宜先知。
	首孝弟，次見聞；知某數，識某文。
	一而十，十而百，百而千，千而萬。
	三才者，天地人。三光者，日月星。
	三綱者，君臣義，父子親，夫婦順。
	曰春夏，曰秋冬；此四時，運不窮。
	曰南北，曰西東；此四方，應乎中。
	曰水火，木金土；此五行，本乎數。
	曰仁義，禮智信；此五常，不容紊。
	稻粱菽，麥黍稷；此六穀，人所食。
	馬牛羊，雞犬豕；此六畜，人所飼。
	曰喜怒，曰哀懼，愛惡欲，七情具。
	匏土革，木石金，絲與竹，乃八音。
	高曾祖，父而身，身而子，子而孫，
	自子孫，至玄曾；乃九族，人之倫。
	父子恩，夫婦從，兄則友，弟則恭，
	長幼序，友與朋，君則敬，臣則忠；此十義，人所同。</span>
	</p>
	</body>

	<script>
	"use strict";

	var every = function(f, offset) {
	var _this = {x: 123};

	var cb = function(timestamp) {
	if (!_this.last)
	_this.last = timestamp;

	var since = Math.floor(timestamp - _this.last);
	if (since > offset) {
	_this.last = timestamp;
	if (f())
	return;
	}

	window.requestAnimationFrame(cb);
	};

	window.requestAnimationFrame(cb);

	return _this;
	};

	var noise_char = function() {
	var s1 = "一乙丁九了";
	var s2 = "二人入刀力十又乃";
	var s3 = "三上下久凡叉口小士土大子山川已干才";
	var s4 = "正不中丹之元五井仁什今公內六分切勿化午友反太夫少勻戶手支文日月木止王毛水火父牙牛";

	var text = s1 + s2 + s3 + s4;
	var idx = Math.floor(Math.random() * text.length);

	return text[idx];
	}

	var noise = function() {
	var e_noise = document.getElementById("noise");
	e_noise.textContent = noise_char();
	};

	var next = function() {
	var e_on = document.getElementById("on");
	var e_off = document.getElementById("off");

	if (!e_off.textContent)
	return true;

	e_on.textContent += e_off.textContent[0]
	e_off.textContent = e_off.textContent.slice(1, e_off.textContent.length)
	};

	new every(noise, 50);
	new every(next, 250);
	</script>
	</html>