Code
var bg = new Path.Rectangle({
size: view.size,
fillColor: 'black'
})
var amountX = 50
var amountY = 30
var paddingX = 35
var paddingY = 25
var distanceOfReact = 50
var scaling = 3
var radius = 3
var path = new Path.Circle({
radius: radius,
fillColor: new Color.random(),
center: view.center,
applyMatrix: false
})
var noise = []
var definition = new SymbolDefinition(path)
var group = new Group()
for (var x = 0; x < amountX; x++){
for (var y = 0; y < amountY; y++){
var instance = path.clone()
instance.fillColor.hue += Math.random() * 20
instance.position = [view.center.x * x / paddingX, (view.center.y * y / paddingY)]
instance.opacity = 0.02 + (Math.random() * 0.3)
instance.fillColor.saturation = 1
instance.fillColor.lightness = 0.5
group.addChild(instance)
}
}
group.position = view.center
var cursor = new Path.Circle({
radius: 5,
fillColor: 'transparent',
center: view.center
})
var t = 0
function onFrame(event){
t += 0.1
var slowerTime = t / 10
var circle1X = view.bounds.width / 2 + Math.sin(slowerTime / 2) * 350 // * Math.cos(slowerTime)
var circle1Y = view.bounds.height / 2 + Math.sin(slowerTime) * 250 / 2
cursor.position = [circle1X, circle1Y]
var distance = cursor.position.getDistance(view.center)
group.children.map(function(object, i){
var distance = cursor.position.getDistance(object.position)
if (distance < distanceOfReact) {
object.onFrame = function(event) {
this.scaling = Math.sin(1.5 + event.count * 0.03/2) * scaling
this.opacity = 1
this.fillColor.hue += 0.2
this.fillColor.hue += distance / 110
}
}
object.fillColor.hue -= 1
})
}