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 centerCircle = new Path.Circle({
radius: 200,
strokeColor: '#333',
strokeWidth: 2,
center: view.center
})
var group = new Group()
var cloneGroup = new Group()
var allArray = []
var amplitudeHorizontal = 0
function onFrame(event){
var path = new Path.Circle({
radius: 20,
fillColor: 'blue',
center: view.center,
parent: group,
applyMatrix: false
})
amplitudeHorizontal += 5
group.rotate(Math.sin(event.count * 0.0015) * 2, view.center)
path.position.x = view.center.x + amplitudeHorizontal * 0.05
path.position.y = view.center.y + Math.atan(event.count * 0.05) * 2
path.fillColor.hue += view.center.x + amplitudeHorizontal * 0.05125
var distance = view.center.getDistance(path.position)
if (distance > 200){
path.remove()
}
}
</script>
</head>
<body>
<canvas id="canvas" hidpi="on" resize style="background: black">
</canvas>
</body>
</html>
