Code
var rootGroup = new Group()
var bg = new Path.Rectangle({
size: view.size,
position: view.center,
fillColor: 'blue'
})
bg.sendToBack()
function drawCircle(x, y, scale, color) {
var circle = new Path.Circle({
radius: 4,
center: [x, y],
fillColor: {
hue: x,
saturation: 0.7,
lightness: 0.7
},
opacity: 1,
applyMatrix: false,
blendMode: 'screen'
})
circle.scale(scale)
circle.fillColor = color
circle.bringToFront()
circle.onFrame = function(event) {
this.scaling += 0.3
this.fillColor.hue += 3
}
var clone = circle.clone()
clone.scaling += 20
clone.fillColor = 'red'
clone.blendMode = 'screen'
clone.position.x += 20
clone.position.y -= 20
rootGroup.addChild(circle)
rootGroup.addChild(clone)
}
function onFrame(event) {
var x = view.center.x + Math.sin(event.count * 0.05 / 2) * 150
var y = view.center.y + Math.sin(event.count * 0.05) * 70
drawCircle(x, y, 1, 'yellow')
rootGroup.children.map(function(object, i) {
object.fillColor.hue += i * 0.01
if (rootGroup.children.length > 600) {
object.remove()
}
})
}