Alexander Deplov

Infinite Sign by Circles

Infinite Sign by Circles

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
    })
}