Alexander Deplov

Huawei Watch animation blob

Huawei Watch animation blob

Code

var bg = new Path.Rectangle({
    size: view.bounds,
    fillColor: 'black',
    position: view.center
})

var permutation = [
  151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225,
  140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247,
  120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57,
  177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175,
  74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229,
  122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102,
  143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89,
  18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198,
  173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118,
  126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189,
  28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221,
  153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79,
  113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242,
  193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14,
  239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176,
  115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205
]


var path = new Path()
path.fillColor = 'green'
var size = 100
path.add(new Point(-size, size))
path.add(new Point(size, size))
path.add(new Point(size, -size))
path.add(new Point(-size, -size))
path.applyMatrix = false
path.closed = true
path.smooth()

var animSpeed = 0.02
var animAmplitude = 0.2
path.onFrame = function(event){
    path.segments.map(function(obj, i){
        
        var mutation = permutation[Math.floor(Math.random() * permutation.length)]
        var normalizedMutation = convertRange(mutation, 0, 255, 0.2, 3)

        obj.point.x += Math.sin(event.count * animSpeed) * animAmplitude * (Math.random() * i) * (i * 0.5)
        obj.point.y += Math.cos(event.count * animSpeed) * animAmplitude * (Math.random() * i) * (i * 0.5)
        if (i == 0){
            obj.point.x += Math.sin(event.count * animSpeed) * animAmplitude * (Math.random() * 2) * (i * 0.5)
            obj.point.y += Math.cos(event.count * animSpeed) * animAmplitude * (Math.random() * 2) * (i * 0.5)
        }  
    })
    path.scaling = (2.5 + Math.sin(event.count * animSpeed)* animAmplitude) / 2
    path.rotate(0.3)
    path.fillColor.hue = 100 + (Math.sin(event.count * animSpeed) * animAmplitude) * 60
}

function convertRange(value, valueMin, valueMax, newMin, newMax) {
  var oldRange = valueMax - valueMin;
  var newRange = newMax - newMin;
  var newValue = (((value - valueMin) * newRange) / oldRange) + newMin;
  return newValue;
}


path.position = view.center