JAVASCRIPT 11
Finger.js Guest on 6th April 2021 03:14:14 AM
  1. function Finger(container) {
  2.  
  3.     var EMPTY = {};
  4.  
  5.     get('images/fingeri.svg', function(svg) {
  6.  
  7.         this.el = document.createElement('div');  
  8.         this.el.innerHTML = svg;
  9.        
  10.         this.left = false;
  11.         this.joints = this.el.querySelectorAll('.joint');
  12.  
  13.         _.each(this.joints, function(j) {
  14.  
  15.             j.origin = j.getAttribute('data-origin');
  16.             j.left = parseFloat(j.getAttribute('data-left'));
  17.             j.right = parseFloat(j.getAttribute('data-right'));
  18.  
  19.             j.elastic = new Elastic();
  20.  
  21.             j.elastic.strength = parseFloat(j.getAttribute('data-strength'));
  22.             j.elastic.damping = parseFloat(j.getAttribute('data-damping'));
  23.  
  24.             j.elastic.onChange = function(rotation) {
  25.                 j.setAttribute('transform', 'rotate(' + rotation + ' ' + j.origin + ')');
  26.             };
  27.  
  28.  
  29.         }, this);
  30.  
  31.  
  32.  
  33.         container.appendChild(this.el);
  34.  
  35.         _.each(this.joints, function(j, i) {
  36.             j.elastic.dest = j.elastic.value = j.right;
  37.             j.elastic.onChange(j.elastic.value);
  38.         }, this);
  39.  
  40.         // this.waggle();
  41.         // setInterval(_.bind(this.waggle, this), 1000);
  42.  
  43.         // midi.on({
  44.         //     type: 'noteOn',
  45.         //     channel: 10,
  46.         //     note: 36
  47.         // }, function() {
  48.         //     this.waggle();
  49.         // }, this);
  50.  
  51.     }, this);
  52.  
  53. };
  54.  
  55. Finger.prototype.setBPM = function(bpm) {
  56.     this.bpm = bpm;
  57. };
  58.  
  59. Finger.prototype.waggle = function() {
  60.    
  61.     if (!this.el) return;
  62.  
  63.     this.left = !this.left;
  64.  
  65.     _.each(this.joints, function(j, i) {
  66.         j.elastic.dest = this.left ? j.left : j.right;
  67.         // j.elastic.value = j.elastic.dest;
  68.     }, this);
  69.  
  70. };
  71.  
  72. Finger.prototype.rest = function() {
  73.  
  74.     // _.each(this.joints, function(j) {
  75.     //     j.elastic.dest = 0;
  76.     // });
  77.  
  78. };
  79.  
  80. Finger.prototype.update = function(millis) {
  81.  
  82.     var beat = Math.floor(this.millis2beat(millis + 200));
  83.    
  84.     if (beat != this.lastBeat) {
  85.         this.waggle();
  86.     }
  87.  
  88.     _.each(this.joints, Finger.updateJoint);
  89.  
  90.     this.lastBeat = beat;
  91.  
  92. };
  93.  
  94. Finger.updateJoint = function(j) {
  95.     j.elastic.update();
  96. };
  97.  
  98. Finger.prototype.millis2beat = function(millis) {
  99.     return this.bpm/2/60000 * millis;
  100. }

Paste-bin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.