Как сделать такой эффект на canvas?

Question

[Umid]

Добрый день.
Заинтересовало, как можно сделать круг из чисел как на картинке?

Comments

[Сергей Соколов]

книгу, обложку которой вы привели, читали?

[Umid]

Сергей Соколов: Я сам картинку получил.

Answer 1

[Сергей Соколов]

Просто круги: 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);
	}
}

Для меняющегося плавными областями цвета цифр можно задействовать шум Перлина – берутся координаты (x,y) в которые попадает очередная цифра, и через шум Перлина получается её яркость – так получаются не хаотичные, а плавными областями, как облака, яркости. Напр. реализация шума Перлина на JS.

Answer 2

[Negwereth]

Немножечко геометрии и математических расчётов.