I wish there was a better vecotr lib...

by asemahle

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sylvester/0.1.3/sylvester.js"></script>

<div id="app">
  <input type="number" v-model="speed">
  <div id="canvas"></div>
  <pre>{{JSON.stringify(1, null, 2)}}</pre>
</div>

JavaScript

var speed = 10;
var v = {
  p: Vector.create([50, 50]),
  d: Vector.create([1, 1]).toUnitVector().multiply(speed)
}

function setup() {
  let canvas = createCanvas(600, 400);
  canvas.parent('#canvas');
}

function draw() {
  ellipse(v.p.elements[0], v.p.elements[1], 80, 80);
  v.p = v.p.add(v.d);
  if (v.p.elements[0] > 600 || v.p.elements[0] < 0) 
  	v.d.elements[0] *= -1;
  if (v.p.elements[1] > 400 || v.p.elements[1] < 0) 
    v.d.elements[1] *= -1;

  v.d = v.d.toUnitVector().multiply(speed || 1);
  //speed += 0.1
}

new Vue({
	el: '#app',
  computed: {
  	speed: {
    	get: function() { return speed; },
      set: function(val) { speed = val; }
    },
  }
});