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 clones = 2
var angle = 360/clones
var group = new Group()
for (var i = 0; i < clones; i++){
var path = new Path.Rectangle({
size: 5,
radius: 2,
strokeWidth: 0.2,
strokeColor: 'blue',
position: view.center + [0, 0],
opacity: 0
})
path.rotate(angle * i, view.center)
group.addChild(path)
}
var obj1;
var objectsGroup = new Group()
function onFrame(event){
group.rotate(0.03)
objectsGroup.rotate(-0.03)
group.position.x = view.center.x + Math.cos(event.count * 0.08) * 50
group.position.y = view.center.y + Math.sin(event.count * 0.08) * 50
var centerOfstar = new paper.Point(100,50)
var myStar = new paper.Path.Star(centerOfstar, 20, 55, 20)
myStar.scale(4)
myStar.strokeColor = 'blue'
myStar.fillColor = 'black'
myStar.strokeWidth = 30
myStar.visible = false
myStar.rotation = Math.sin(event.count * 0.04) * 100
obj1 = myStar.clone()
obj1.visible = true
objectsGroup.addChild(obj1)
group.children.map(function(object, i){
obj1.position = object.position
obj1.strokeColor.hue += event.count * 0.45
obj1.strokeColor.saturation += Math.sin(0.2 * event.count) * 0.1
obj1.strokeColor.lightness += Math.sin(0.2 * event.count) * 0.1
})
if (event.count > 50){
objectsGroup.children[0].remove()
}
objectsGroup.children.map(function(object, i){
object.strokeColor.hue -= 3
})
}
</script>
</head>
<body>
<canvas id="canvas" hidpi="off" resize style="background-color: black">
</canvas>
</body>
</html>
