Холст анимация с JavaScript. Случайные координаты и скорость при каждом запуске

TL; DR - Посмотрите, как он работает здесь.

Создание координат случайным образом:

Это требует от вас добавить случайное смещение в координаты x и y. Поэтому я добавил случайное значение в координаты. Но тогда смещение меньше 1 не заметно. Поэтому вам нужно увеличить это случайное число множителем. То, что входит в randomizationFactor. Я установил его равным 100 поскольку это значение, с помощью которого вы меняете координаты на каждой итерации. Таким образом, это дает поистине случайный взгляд на анимацию.

Создание скорости Random:

Это заняло у меня некоторое время, чтобы понять, но идеальным способом является толкать значение скорости в массив координат. Это позволит вам гарантировать, что во время анимации скорость будет оставаться постоянной, и это даст вам более плавное ощущение. Но при повторном умножении радиуса r со значением от 0 до 1 значительно уменьшается скорость для некоторых кругов. Поэтому я добавил множитель к 3, чтобы немного компенсировать это.

В идеале я бы поставил 2, так как среднее значение Math.random() равно 0,5, поэтому множитель из 2 будет достаточным для компенсации этого. Но небольшое экспериментирование показало, что множитель 3 был намного лучше. Вы можете выбрать значение в соответствии с вашими предпочтениями.

Ваша логика генерации координат изменяется следующим образом:

for(var i = 50; i <= width;i += 100)  {
  for(var j = 51; j <= height;j += 100) {
    var x = i + (Math.random() - 0.5)*randomizationFactor;
    var y = j + (Math.random() - 0.5)*randomizationFactor;
    cords.push({ cor: x+','+y, speed: Math.random()});
  }
}

Ваша логика расширения кругов изменяется следующим образом:

function render() {

  ctx.clearRect(0,0,width,height);

  cords.forEach(function(e1) {
    //console.log(e1);
    ctx.fillStyle = e1.rgb;
    ctx.beginPath();
    var r = e1.base + Math.abs(Math.sin(angle)) * offset * e1.speed * 3;
    var v = e1.cor.split(',');
    ctx.arc(v[0],v[1],r,0,Math.PI * 2, false);
    ctx.fill();
  });
  angle += speed ;
  requestAnimationFrame(render);
}

Предложение: обновить координаты цветом

Я бы, вероятно, также обновил местоположение кругов каждые 5 секунд вместе с цветами. Это довольно просто сделать. Здесь я только что создал функцию resetCoordinates которая запускается каждые 5 секунд вместе с функцией setBaseRgb.

var cords = [];
function resetCoordinates() {
  cords = [];

  for(var i = 50; i <= width;i += 100)  {
    for(var j = 51; j <= height;j += 100) {
      var x = i + (Math.random() - 0.5)*randomizationFactor;
      var y = j + (Math.random() - 0.5)*randomizationFactor;
      cords.push({ cor: x+','+y, speed: Math.random()});
    }
  }
}

ОБНОВЛЕНИЕ Я сделал некоторые исправления в вашем коде, которые могут сделать вашу анимацию более динамичной. Полностью переписан образец. (извините за изменение имени переменной, теперь imo лучше)

Построенный в Math.random не очень случайный, и становится очевидным, когда вы встречаете анимацию. Попробуйте использовать этот случайный js lib.

var randEngine = Random.engines.mt19937().autoSeed();
var rand = function(from, to){
  return Random.integer(from, to)(randEngine)
}

Внутренние базовые свойства для каждого круга были бы лучше (более динамичными).

var circles = [];

// better to save coords as object neither as string
for(var i = 50; i <= width; i += 100)
  for(var j = 50; j <= height; j += 100)
   circles.push({ 
    coords: {x:i,y:j}
   });

Мы можем настроить анимацию с помощью нового свойства bouncing.

var offset = 15,
    speed = 0.005,
    angle = 0.01,
    bouncing = 25;

Вот как setBaseRgb функция setBaseRgb

function setBaseRgb(el){
  el.base = rand(-bouncing, bouncing);
  el.speed = rand(5, 10) * speed;
  el.angle = 0;
  el.rgb = 'rgb('+rand(0, 255)+','+rand(0, 255)+','+rand(0, 255)+')';
}

Все ваши анимации фиксировали тайм-аут setInterval. Лучше со случайным таймаутом.

cords.forEach(function(el){
  // random timeout for each circle
  setInterval(setBaseRgb.bind(null,el), rand(3000, 5000));
})

Вы забыли добавить свою базу в свое положение круга

function render() {    

  ctx.clearRect(0,0,width,height);

  circles.forEach(function(el) {
    ctx.fillStyle = el.rgb;
    ctx.beginPath();
    var r = bouncing + el.base + Math.abs(Math.sin(el.angle)) * offset;
    var coords = el.coords;
    ctx.arc(
       coords.x + el.base,
       coords.y + el.base,
       r, 0, Math.PI * 2, false
    );
    ctx.fill();
    el.angle += el.speed;
  });
  requestAnimationFrame(render);
}

render();

Эффект 1 JSFiddle

Добавление этого

if(el.angle > 1)
  el.angle=0;

Эффект публикации результатов

Эффект 2 JSFiddle

Воспроизведение с помощью формул приводит к

Эффект 3 JSFiddle