弹簧弦Spring String

下载代码

html

css

分享到微信朋友圈

html

<canvas id="canvas"></canvas>
<script src="https://rawgit.com/facebook/rebound-js/master/rebound.js"></script>
    
        <script>
        'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

function calcDist(start, end) {
  var dx = end.x - start.x || 0.001; // avoid 0 delta vector
  var dy = end.y - start.y || 0.001;
  var dist = Math.sqrt(dx * dx + dy * dy);

return { dist: dist, dx: dx, dy: dy };
}

var SpringString = (function () {
  function SpringString() {
    var length = arguments[0] === undefined ? 2 : arguments[0];

var _this = this;

var segmentLength = arguments[1] === undefined ? 10 : arguments[1];
    var system = arguments[2] === undefined ? new rebound.SpringSystem() : arguments[2];

_classCallCheck(this, SpringString);

this.system = system;
    this.length = length;
    this.handle = { x: 0, y: 0 };

for (var i = 0, last = this.handle; i < this.length + 1; ++i) {
      var point = i ? last.spring.endPoint = { x: 0, y: 0 } : last;

if (i < this.length) {
        // no spring for the last point
        point.spring = this.system.createSpring(200, 3);
        point.spring.startPoint = point;
        point.spring.addListener({
          onSpringUpdate: function onSpringUpdate(spring) {
            return _this.updateSpringEnd(spring);
          }
        });
      }

last = point;
    }

window.addEventListener('mousemove', function (e) {
      return _this.updateHandle(e.x, e.y);
    });
  }

_createClass(SpringString, [{
    key: 'setSpringValue',
    value: function setSpringValue(spring) {
      if (!spring) return;

var _calcDist = calcDist(spring.startPoint, spring.endPoint);

var dist = _calcDist.dist;

spring.setCurrentValue(dist);
      spring.setEndValue(10);
    }
  }, {
    key: 'updateSpringEnd',
    value: function updateSpringEnd(spring) {
      var val = spring.getCurrentValue();

var _calcDist2 = calcDist(spring.startPoint, spring.endPoint);

var dist = _calcDist2.dist;
      var dx = _calcDist2.dx;
      var dy = _calcDist2.dy;

spring.endPoint.x = spring.startPoint.x + val / dist * dx;
      spring.endPoint.y = spring.startPoint.y + val / dist * dy;

this.setSpringValue(spring.endPoint.spring);
    }
  }, {
    key: 'updateHandle',
    value: function updateHandle(x, y) {
      this.handle.x = x;
      this.handle.y = y;

this.setSpringValue(this.handle.spring);
    }
  }]);

return SpringString;
})();

// setup
var s = new SpringString(50, 5);

// wandering
var timeCoff = 500;
var wandering = true;
var wanderTimer = null;
var time = Date.now() / timeCoff;
function wander() {
  time = Date.now() / timeCoff;
  if (!wandering) return requestAnimationFrame(wander);
  s.updateHandle((window.innerWidth >> 1) + Math.sin(time) * 200, (window.innerHeight >> 1) + Math.cos(time) * 200);
  requestAnimationFrame(wander);
}

window.addEventListener('mousemove', function (e) {
  wandering = false;
  clearTimeout(wanderTimer);
  wanderTimer = setTimeout(function () {
    return wandering = true;
  }, 3000);
});

wander();

// renderer
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function render() {
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  var point = s.handle;
  while (point) {
    ctx.save();

var x = point.x;
    var y = point.y;

ctx.translate(x, y);
    ctx.fillStyle = '#999';
    ctx.strokeStyle = '#333';
    ctx.fillRect(0, 0, 2, 2);

point = point.spring && point.spring.endPoint;
    if (point) {
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(point.x - x, point.y - y);
      ctx.stroke();
      ctx.closePath();
    }

ctx.restore();
  }

requestAnimationFrame(render);
}

render();
        </script>

css

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg