src/main.js

   1 "use strict";
   2
   3 var DISAPPEAR = {
   4      0: { tween: { transform: { yaw: Math.PI } },
   5           duration: 35 },
   6     10: { tween: { quad: { alpha: 0 } },
   7           duration: 25 }
   8 };
   9
  10 var JIGGLE = {
  11     0: { tween1: { yaw: 0.3 }, repeat: -Infinity }
  12 };
  13
  14 var JUMP = {
  15     0:   { tween1: { scale: [0.6, 0.3, 1.0] }, duration: 20 },
  16     20: [{ tween1: { scale: [0.3, 0.6, 1.0] }, duration: 18 },
  17          { tween1: { xy: 'target' }, duration: 20 }],
  18     38:  { tween1: { scale: [0.5, 0.5, 1.0] }, duration: 5 },
  19 };
  20
  21 var FollowScene = yT(yuu.Scene, {
  22     constructor: function () {
  23         yuu.Scene.call(this);
  24         var textMat = new yuu.Material("@text");
  25         var faceMat = new yuu.Material("@face");
  26
  27         var textQuad;
  28         var textEntity = new yuu.E(
  29             new yuu.Transform().setScale([1, 1, 1]).setYaw(-0.3),
  30             textQuad = new yuu.QuadC(textMat));
  31         this.faceEntity = new yuu.E(
  32             new yuu.Transform().setScale([0.5, 0.5, 1]),
  33             new yuu.QuadC(faceMat));
  34         this.entity0.addChild(textEntity);
  35         this.entity0.addChild(this.faceEntity);
  36
  37         textEntity.attach(new yuu.Animation(
  38             JIGGLE, { $: textEntity.transform }));
  39
  40         this.disappear = function () {
  41             textEntity.attach(new yuu.Animation(DISAPPEAR, {
  42                 transform: textEntity.transform,
  43                 quad: textQuad
  44             }));
  45         };
  46
  47         this.ready = yuu.ready([textMat, faceMat], this);
  48      },
  49
  50     inputs: {
  51         resize: function () {
  52             var base = new yuu.AABB(-1.5, -1.5, 1.5, 1.5);
  53             var vp = base.matchAspectRatio(yuu.viewport);
  54             this.layer0.resize(vp.x0, vp.y0, vp.w, vp.h);
  55         },
  56
  57         mousemove: function (p) {
  58             p = this.layer0.worldFromDevice(p);
  59             var d = 0.75 * (p.x - this.faceEntity.transform.x);
  60             var angle = Math.PI / 2 * d;
  61             if (!angle)
  62                 angle = 0;
  63             angle = yf.clamp(angle, -Math.PI / 2, Math.PI / 2);
  64             this.faceEntity.transform.roll = angle + Math.PI / 2;
  65         },
  66
  67         touch: function (p) { this.inputs.mousemove.call(this, p); },
  68
  69         tap: function (p) {
  70             this.disappear();
  71             this.disappear = yf.I;
  72             p = this.layer0.worldFromDevice(p);
  73             this.faceEntity.attach(new yuu.Animation(JUMP, {
  74                 $: this.faceEntity.transform,
  75                 target: [p.x, p.y]
  76             }));
  77         },
  78     },
  79 });
  80
  81 function load () {
  82     yuu.director.pushScene(new FollowScene());
  83 }
  84
  85 window.addEventListener("load", function() {
  86     yuu.registerInitHook(load);
  87     yuu.init({ backgroundColor: [1, 1, 1, 0] })
  88         .then(function () { yuu.director.start(); });
  89 });
  90