How to make this effect on canvas?

Question

JavaScript

Good afternoon.
Interested in how you can make a circle of numbers like in the picture?

Answer 1

Just circles: jsFiddle

var canvas = document.getElementById("myCanvas")
  , ctx = canvas.getContext("2d")
  , r
;
ctx.translate( 500/2, 500/2); // передвинуться на центр листа

ctx.font = "14px Arial";
ctx.textAlign = "center";
ctx.textBaseline="middle"; 

ctx.fillStyle = "#999";
for(r=100;r<=500;r+=20) circle(r);

function circle(r) {
  var dist = 16
    , n = Math.round( 2 * Math.PI * r / dist)
    , i
  ;

  for(i=0;i<n;i++) {
    ctx.rotate( 2 * Math.PI / n); // повернуть лист
    ctx.fillText( Math.round(100*Math.random())%2?0:1,0,-r);
  }
}

For the color of the digits changing in smooth areas, you can use Perlin noise - the coordinates (x, y) are taken into which the next digit falls, and through the Perlin noise its brightness is obtained - this way you get not chaotic, but smooth areas, like clouds, brightness. Eg. implementation of Perlin noise in JS .

Answer 2

A little bit of geometry and mathematical calculations.