Code
<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 = 10
var angle = 360/clones
var group = new Group()
var fadeOutTiming = 3000
var bg = new Path.Rectangle({
size: view.size,
fillColor: 'black'
})
for (var i = 0; i < clones; i++){
var path = new Path.Rectangle({
size: 5,
radius: 5,
fillColor: 'orange',
strokeWidth: 0.2,
strokeColor: 'blue',
position: view.center + [0, 120],
opacity: 0
})
path.rotate(angle * i, view.center)
group.addChild(path)
}
var obj1 = new Path.Rectangle({
size: [100],
position: view.center,
radius: 35,
applyMatrix: false,
rotation: 45
})
var objectsGroup = new Group()
var allObjectsArray = []
var time = 0
function onFrame(event){
time += 0.05
group.rotate(0.5)
objectsGroup.rotate(-0.03)
group.position.x = view.center.x + Math.cos(event.count * 0.02) * 30
//TURN OFF, ALSO COOL:
group.position.y = view.center.y + Math.sin(event.count * 0.02) * 30
obj1.fillColor = 'yellow'
objectsGroup.addChild(obj1)
obj1.rotate(Math.sin(event.count * 0.05) * 1.2 + Math.cos(event.count * 0.15))
objectsGroup.position.x += Math.sin(event.count * 0.01) * 2
group.children.map(function(object, i){
var object = group.children[i]
obj1.position = object.position
obj1.fillColor.hue -= event.count * 0.1
})
var objAround = obj1.clone()
allObjectsArray.push(objAround)
objAround.position = obj1.position
objAround.scale(3.5)
objAround.fillColor = 'transparent'
objAround.strokeColor = 'yellow'
objAround.strokeColor.hue -= event.count * 0.35
objAround.strokeColor.saturation = 2
objAround.strokeColor.lightness = 0.5
objAround.strokeWidth = 0.7
objAround.opacity = 0.3 // 0.3
objAround.applyMatrix = false
objAround.tweenTo({
opacity: 0,
}, fadeOutTiming)
objAround.segments.map(function(object, i){
object.point.x += Math.sin(event.count * 0.1) * 2
if (event.count % 10 >= 0){
objAround.strokeWidth = 2
} else{
objAround.strokeWidth = 0
}
})
if (objectsGroup.children.length > 180){
objectsGroup.children[0].remove()
}
var objAround2 = objAround.clone()
objAround2.scale(1.02)
objAround2.blendMode = 'multiply'
objAround2.rotate(Math.sin(event.count * 0.02) * 0.5 + Math.cos(event.count * 0.2) * 2)
objAround2.strokeColor = 'green'
objAround2.strokeColor.hue -= event.count * 3.25
objAround2.position.y += Math.sin(event.count * 0.1) * 10
objAround2.tweenTo({
opacity: 0,
rotation: 180,
}, fadeOutTiming * 0.5)
var scalingPath = objAround.clone()
scalingPath.applyMatrix = false
scalingPath.scale(0.98)
scalingPath.strokeColor = 'yellow'
scalingPath.blendMode = 'overlay'
scalingPath.scale(1.02)
scalingPath.blendMode = 'screen'
scalingPath.rotate(Math.sin(event.count * 0.02) * 0.5 + Math.cos(event.count * 0.2) * 2)
scalingPath.strokeColor = 'green'
scalingPath.strokeColor.hue -= event.count * 3.25
scalingPath.position.y += Math.sin(event.count * 0.1) * 10
scalingPath.tweenTo({
opacity: 0,
}, fadeOutTiming * 0.2)
}
</script>
</head>
<body>
<canvas id="canvas" hidpi="off" resize style="background: black">
</canvas>
</body>
</html>
