Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paper.js</title>
<link rel="stylesheet" href="./../PaperJSEngine/style.css" />
<script type="text/javascript" src="./../PaperJSEngine/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var bg = new Path.Rectangle({
size: view.size,
fillColor: 'black'
})
var path = new Path.Circle({
center: new Point(100, 100),
radius: 20,
})
var randomPointCursor = new Path.Circle({
radius: 5,
fillColor: new Color.random(),
center: randomPointInBounds()
})
function randomPointInBounds() {
var bounds = view.bounds;
var x = Math.random() * bounds.width;
var y = Math.random() * bounds.height;
return new Point(x, y);
}
var duration = 200
function moveToRandomPoint() {
path.fillColor = new Color.random()
var randomPoint = randomPointInBounds()
duration = (randomPoint - path.position / 1).length * 5
randomPointCursor.position = randomPoint
randomPointCursor.fillColor = new Color.random()
var tween = path.tweenTo({
'position': randomPoint
}, duration)
tween.onUpdate = function(event){
if (event.progress == 1){
moveToRandomPoint()
}
}
}
moveToRandomPoint();
</script>
</head>
<body>
<canvas id="canvas" hidpi="on" resize></canvas>
</body>
</html>