Collected.Press

<!DOCTYPE html>
<html lang="en">
<head>
  <title>vue.js version</title>
  <script src="https://cdn.jsdelivr.net/stats.js/r11/stats.min.js"></script>
  <script src="../../dist/vue.min.js"></script>
  <style>
  html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  svg {
    width: 800px;
    height: 600px;
  }
  </style>
</head>
<body>
  <h1>Animating 1000 SVG dots</h1>
  <div id="app">
    <p>
      <button @click="toggleOptimization">
        {{ optimized ? 'disable' : 'enable' }} optimization (Object.freeze)
      </button>
    </p>
    <svg>
      <circle  v-for='point in model.points' :cx='point.x' :cy='point.y' r='2px' fill='#FC309D'></circle>
    </svg>
  </div>
<script type="text/javascript" charset="utf-8">
var stats = new Stats()
stats.setMode(0)
stats.domElement.style.position = 'absolute'
stats.domElement.style.right = '0px'
stats.domElement.style.top = '0px'
document.body.appendChild(stats.domElement)

var WIDTH = 800
var HEIGHT = 600

new Vue({
  el: '#app',
  data: {
    model: createModel(1000),
    optimized: false
  },
  created: function () {
    var self = this
    requestAnimationFrame(render)
    stats.begin()
    function render () {
      stats.end()
      stats.begin()
      requestAnimationFrame(render)
      self.model.step()
      if (self.optimized) {
        self.$forceUpdate()
      }
    }
  },
  methods: {
    toggleOptimization: function () {
      this.model = this.optimized
        ? createModel(1000)
        : Object.freeze(createModel(1000))
      this.optimized = !this.optimized
    }
  }
});

function createModel (count) {
  var points = []
  for (var i = 0; i < count; ++i) {
    points.push({
      x: Math.random() * WIDTH,
      y: Math.random() * HEIGHT,
      vx: Math.random() * 4 - 2,
      vy: Math.random() * 4 - 2
    })
  }

  return {
    points: points,
    step: step
  }

  function step () {
    points.forEach(move)
  }

  function move (p) {
    if (p.x > WIDTH || p.x < 0) p.vx *= -1
    if (p.y > HEIGHT || p.y < 0) p.vy *= -1
    p.y += p.vy
    p.x += p.vx
  }
}
</script>
</body>
</html>