Canvas rotating particles

Question

Do you someone might know how to make this kind of animation. How I managed to see more word about a canvas javascript technique.

http://cuberto.com/

Thank you

Answer 1

Here's a single arc on a blue background going around and around. It is achieved by drawing a white arc on a blue background.

Fiddle:

https://jsfiddle.net/07d69v39/1/

 //coordinates of rectangle
  var xp = 125;
  var yp = 125;
  var radius = 45;  

  //How far to move the arc each time:
  var angleStep = Math.PI * 0.1;
  //How often to move the arc:
  var stepTime = 50;
    var currentStep = 0;

function doDraw() {
    var can = document.getElementById("myCanvas");
  can.width = 250;
  can.height = 250;
  var context = can.getContext("2d");

  //Erase the canvas by painting it blue:
  context.fillStyle="#0000FF";
  context.fillRect(0, 0, 250, 250);

  //Set the drawing color to white:
  context.strokeStyle="#FFFFFF";
  context.lineWidth=5;
  context.arc(xp, yp, radius, 0 + currentStep, 1.5*Math.PI + currentStep);
  context.stroke();

  //Make sure to maintain the currentStep angle so it doesn't overflow:
  currentStep = currentStep + angleStep;
  if (currentStep>Math.PI * 2) {
    currentStep = currentStep - Math.PI * 2;
  }

  //Wait, and then call this function again to animate:
  setTimeout(function() {
    doDraw();
  }, stepTime);

}

doDraw();

To complete the effect, you will need multiple concentric arcs, traveling in opposite directions:

I placed values for individual arc behavior in the circles[] array:

https://jsfiddle.net/07d69v39/3/

 //coordinates of rectangle
  var xp = 125;
  var yp = 125;

  var circles = [
    {
        radius: 45,
      step: 0,
      direction: true,
      speed: Math.PI * 0.1,
    },
    {
        radius: 42,
      step: 0,
      direction: false,
      speed: Math.PI * 0.05
    },
    {
        radius: 39,
      step: 0,
      direction: true,
      speed: Math.PI * 0.07
    },
    {
        radius: 36,
      step: 0,
      direction: false,
      speed: Math.PI * 0.02
    },
     {
        radius: 33,
      step: 0,
      direction: true,
      speed: Math.PI * 0.06
    },
     {
        radius: 30,
      step: 0,
      direction: false,
      speed: Math.PI * 0.04
    }  
  ];

  //How often to move the arc:
  var stepTime = 50;

function doDraw() {
    var can = document.getElementById("myCanvas");
  can.width = 250;
  can.height = 250;
  var context = can.getContext("2d");
  context.imageSmoothingEnabled= true;

  //Erase the canvas by painting it blue:
  context.fillStyle="#0000FF";
  context.fillRect(0, 0, 250, 250);

  //Set the drawing color to white:
  context.strokeStyle="#FFFFFF";
  context.lineWidth = 4;

  for (var i = 0; i<circles.length;i++) {
    var arc = circles[i];
    maintainArc(context, arc);
  }

  //Wait, and then call this function again to animate:
  setTimeout(function() {
    doDraw();
  }, stepTime);

}

function maintainArc(context, arc) {
    var radius = arc.radius;
  var step = arc.step;
  context.beginPath();
    context.arc(xp, yp, radius, 0 + step, 1.5*Math.PI + step);

  context.stroke();


  //maintain the step angle differently for clockwise and counter clockwise
  if (arc.direction) {
    step = step + arc.speed;
    if (step>Math.PI * 2) {
        step = step - Math.PI * 2;
    }
  } else {
    step = step - arc.speed;
    if (step<Math.PI * 2) {
        step = step + Math.PI * 2;
    }
  }
  arc.step = step;
}    

doDraw();

What's missing now is some artistic flare to make the revolving circles align into a 'C' at the proper moment. I also see that the 'C' in the example you provided fades out as the page load completes. This does not do that.