Alexander Deplov

Move path to random point - normalized speed

Move path to random point - normalized speed

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>