JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jonobr1.github.io/two.js/third-party/two.js"></script>
JavaScript
var two = new Two({
fullscreen: true,
autostart: true
}).appendTo(document.body);
Two.Resoultion = 32;
var delta = new Two.Vector();
var mouse = new Two.Vector();
var drag = 0.1;
var radius = 25;
var ball = two.makeCircle(two.width / 2, two.height / 2, radius);
ball.noStroke().fill = 'green';
function moveRubberBall() {
mouse.x = Math.floor((Math.random() * two.width) + 1);
mouse.y = Math.floor((Math.random() * two.height) + 1);
}
_.each(ball.vertices, function(v) {
v.origin = new Two.Vector().copy(v);
});
two.bind('update', function() {
delta.copy(mouse).subSelf(ball.translation);
_.each(ball.vertices, function(v, i) {
var dist = v.origin.distanceTo(delta);
var pct = dist / radius;
var x = delta.x * pct;
var y = delta.y * pct;
var destx = v.origin.x - x;
var desty = v.origin.y - y;
v.x += (destx - v.x) * drag;
v.y += (desty - v.y) * drag;
});
ball.translation.addSelf(delta);
});
var auto_refresh = setInterval(moveRubberBall, 1000);