Генератор случайных котов за 8 шагов

Доброго времени, Хабр!
Я всегда очень любил котов, и любил их рисовать, особенно морды кошачьи. Чуть изменишь форму, линию — и совершенно другое выражение, другое настроение. У меня листы А4 были изрисованы под предел. И тут мне недавно стукнуло в голову — а что если сделать генератор морд котов? Чтобы нажал на кнопочку и тебе выкинется случайная морда кота. Как можно более случайная и интересная. Давайте же посмотрим, как же сделать такую штуку.
Прошу под кат, любители котов.

Всё будем делать на JS и Canvas’е, и я не привожу код инициализации, настройки и подобного. Этого в интернетах полно, а нам же интересно как рисовать котов, правда?

Приведу лишь несколько предопределенных функций, просто для дальнейшего удобства, вот они:

function add(func, scale){  	Graphics.ctx.scale(scale.x, scale.y); 	func(Graphics.ctx);	 	Graphics.ctx.scale(1, 1);  } 

Меняем размер канваса, что-то рисуем, возвращаем назад.

function drawСircle(ctx, pos, radius, fillColor, strokeColor, lineWidth) {     ctx.beginPath();     ctx.arc(center.x - pos.x, center.y + pos.y, radius, 0, 2*Math.PI, false);     ctx.fillStyle = fillColor;     ctx.fill();     ctx.lineWidth = lineWidth;     ctx.strokeStyle = strokeColor;     ctx.stroke(); } 

А это рисование окружностей\кругов. Тоже ничего особенного, всё это можно прочитать миллионы раз и на хабре и где угодно, давайте скорее к котам!

Шаг 1 — Голова

Начнем мы с головы. Шо есмь голова? Окружность. Которую можно немного сжать, или расширить.
Ещё можно задать толщину обводки, это тоже сделаем. И есть маленькая деталь, смотрим в коде комментарии.
Код весь прокомментирован, думаю проблем с понимаем не возникнет.

//Генерим случайный радиус var radius = Math.sRandom(60, 70); //Изменяем размеры var scaleCircle = {x:Math.sRandom(1,1.1),y:Math.sRandom(0.9,1.0)}; //Задаем цвета var whiteColor = "#fff"; var blackColor = "#000"; //Рисуем add(function(ctx){         // (Math.sRandom(0, 100) < 95 ? blackColor : whiteColor) - эта строчка, иногда, редко, делает контур белым, т.е. голова оказывается без контура. Уверяю, это получаеться здорово. 	drawСircle(ctx, {x:0,y:0}, radius, whiteColor, (Math.sRandom(0, 100) < 95 ? blackColor : whiteColor), Math.sRandom(2,5)); }, scaleCircle); 

Воть и голова появилась.

Идем дальше!

Шаг 2 — Уши

Уши у котов — одно из самых выразительных элементов морды. Поэтому чем более уши будут разные, по разному повернуты, разной ширины, тем больше будет разнообразия выражений.
Делаем.

	//Вектор, который будем поворачивать, в поисках точек ушей 	var dir = {x:0, y:radius}; 	//Первый угол     var angleOne = Math.PI + Math.PI/Math.sRandom(2, 5);     //Поворачиваем вектор и получаем первую точку     var pointR1 = VectorRot(dir, angleOne);     //Делаем вторую точку, через поворт вектора на первый угол минус отклонение     var pointR2 = VectorRot(dir, angleOne - Math.PI/Math.sRandom(4, 7));     //Считаем верхнюю точку уха     var topPointR = {x:((pointR1.x + pointR2.x) / 2)+Math.sRandom(-10, 10), y:pointR2.y - 30 + Math.sRandom(0, 5)};     //Рисуем 	add(function(ctx){ 		//Рисуем правое ухо 	    ctx.beginPath();         ctx.strokeStyle = strokeColor;         ctx.fillStyle = fillColor;         ctx.lineWidth = Math.sRandom(2, 4);         topPointR = {x:topPointR.x+Math.sRandom(-1,5), y:topPointR.y+Math.sRandom(-5,5)}; 		ctx.moveTo(center.x + pointR1.x,center.y + pointR1.y); 		ctx.lineTo(center.x + topPointR.x,center.y + topPointR.y); 		ctx.lineTo(center.x + pointR2.x,center.y +pointR2.y); 		ctx.fill(); 		ctx.stroke(); 		//Рисуем левое ухо     	ctx.beginPath();         ctx.strokeStyle = strokeColor;         ctx.fillStyle = fillColor;         ctx.lineWidth = Math.sRandom(2, 4);         var topPointL = VectorXInvert({x:topPointR.x+Math.sRandom(-5,5), y:topPointR.y+Math.sRandom(-5,5)});         var pointL1 = VectorXInvert(pointR1);         var pointL2 = VectorXInvert(pointR2); 		ctx.moveTo(center.x + pointL1.x,center.y + pointL1.y); 		ctx.lineTo(center.x + topPointL.x,center.y + topPointL.y); 		ctx.lineTo(center.x + pointL2.x,center.y +pointL2.y); 		ctx.fill(); 		ctx.stroke();   	}, {x:1,y:1}); 

Иииии вот что у нас получилось:

Уже напоминает кота, правда?

Шаг 3 — Усы

Второй во выразительности, после ушей, элемент морды кота. Сделать его не сложно, но сделать так чтобы они выглядели более правдоподобно сложнее. Одним рандомом тут не обойдёшься, приходится крутить цикл, и по счетчику высчитывать точки, для более линейных результатов.

	//Расчитываем точки начала усов 	//путем выбора вектора, и поворота вектора на почти случайное значение 	//Результат - точка начала уса 	var pointsR = []; 	//Выбираем число усов 	var count = Math.floor(Math.sRandom(3, 5)); 	for (var i = 0; i < count; i++) { 		//Делаем вектор, с длиной из радиуса круга / на случайное значение 		var dir = {x:0, y:radius/Math.sRandom(1.6,1.9)}; 		//Выбираем угол, плюс некоторые действия, для красоты 		var angleOne = Math.PI/(2 + ((i+1)/4)); 		//Пвоворачиваем вектор 		var pointR1 = VectorRot(dir, angleOne); 		//Выбираем y конечной точки, так чтобы первую половину count усы отлонялись в одну сторону 		//а во второй половине в другую 		var y = pointR1.y+(i < count / 2 ? -Math.sRandom(8, 25) : Math.sRandom(7, 15) ); 		//Записываем точки начала и конца в массив 		pointsR.push({begin:pointR1, end:{x:pointR1.x - Math.sRandom(60, 100),y:y}}); 	} 	//Случайное значение ширины линии 	var lineWidth = Math.sRandom(0.5, 2); 	//Рисуем 	add(function(ctx){ 		//Правая сторона 		for (var i = 0; i < pointsR.length; i++) { 			ctx.beginPath(); 	        ctx.strokeStyle = strokeColor; 	        ctx.fillStyle = fillColor; 	        ctx.lineWidth = lineWidth; 			ctx.moveTo(center.x - pointsR[i].begin.x,center.y + pointsR[i].begin.y); 			ctx.lineTo(center.x - pointsR[i].end.x,center.y + pointsR[i].end.y); 			ctx.stroke(); 		} 		//Левая сторона 	    for (var i = 0; i < pointsR.length; i++) { 			 			ctx.beginPath(); 	        ctx.strokeStyle = strokeColor; 	        ctx.fillStyle = fillColor; 	        ctx.lineWidth = lineWidth; 	        var pointLBegin = VectorXInvert(pointsR[i].begin); 	        var pointLEnd = VectorXInvert(pointsR[i].end); 			ctx.moveTo(center.x - pointLBegin.x,center.y + pointLBegin.y); 			ctx.lineTo(center.x - pointLEnd.x,center.y + pointLEnd.y); 			ctx.stroke(); 		}  	}, {x:1,y:1}); 

Функция VectorXInvert пусть вас не смущает, просто приходилось часто отражать по x различные элементы, поэтому сделана простая функция, которая делает x = -x;
Смотрим как прорисовывается наш кот:

Шаг 4 — Рот

Это довольно сложно сделать реалистично, поэтому сделаем просто линию рта, схематично, но для нашего графического рисунка вполне пойдет.
Пишем код, рисующий линию рта. Сделано на кривых Безье.

	//---Рот 	//Рот строем с помощью кривых Безье. Задаем четыре точки + 2 точки для отражения 	//      P0 	//  P3  |   iP3 	//  |   |    | 	//  P2--P1--iP2 	var P0 = {x:center.x, y:center.y}; 	var P1 = {x:center.x, y:center.y + Math.sRandom(40, 65)}; 	var P2 = {x:center.x - Math.sRandom(29, 36),y: center.y + 40}; 	var P3 = {x:center.x - Math.sRandom(20, 40), y:center.y + Math.sRandom(23, 28)}; 	var iP2 = {x:center.x + Math.sRandom(29, 36),y: center.y + 40}; 	var iP3 = {x:center.x + Math.sRandom(20, 40), y:center.y + Math.sRandom(23, 28)}; 	//Рисуем 	add(function(ctx){ 	    ctx.beginPath();         ctx.strokeStyle = strokeColor;         ctx.fillStyle = fillColor ;         ctx.lineWidth = Math.sRandom(1,3); 		ctx.moveTo(P0.x,P0.y ); 		ctx.bezierCurveTo(P1.x, P1.y, P2.x, P2.y, P3.x, P3.y); 		ctx.stroke();  	    ctx.beginPath();         ctx.strokeStyle = strokeColor;         ctx.fillStyle = fillColor ;         ctx.lineWidth = Math.sRandom(1,3); 		ctx.moveTo(P0.x,P0.y ); 		 		ctx.bezierCurveTo(P1.x, P1.y, iP2.x, iP2.y, iP3.x, iP3.y); 		ctx.stroke();   	}, {x:1,y:1}); 

Глядим на то, что получилось. Терпение, ещё чуть-чуть осталось!

Шаг 5 — Нос

Нос есть нос. Сделаем его двух вариантов — маленький круг, и треугольничек. Круг будет появляться намного реже. Ну так, для интереса.
Разуметься примешиваем рандом, в том числе в цвета, чтобы получались разные носы — закрашенные, и просто контур. Нам ведь нужно много котов?

	//Два типа носа - либо треугольник, либо круг 	var chance = Math.sRandom(0, 100); 	if(chance < 98) 	{ 		//Коефициент размера 		var scale = {x:Math.sRandom(0.9,1.3), y:Math.sRandom(0.9,1.3)}; 		//Правая точка 		var pointR ={x:Math.sRandom(4,5)*scale.x,y:Math.sRandom(-5,-4)*scale.y}; 		//Левая точка 		var pointL ={x:Math.sRandom(-4,-5)*scale.x,y:Math.sRandom(-5,-4)*scale.y}; 		//Нижняя точка 		var bottomPoint ={x:0,y:Math.sRandom(5,6)*scale.y}; 		//Рисуем 		add(function(ctx){ 		    ctx.beginPath(); 	        ctx.strokeStyle = strokeColor; 	        ctx.fillStyle = (Math.sRandom(0, 100) > 50 ? fillColor : strokeColor); 	        ctx.lineWidth = Math.sRandom(1,3); 			ctx.moveTo(center.x + pointR.x,center.y + 5 + pointR.y); 			ctx.lineTo(center.x + bottomPoint.x,center.y + 5 + bottomPoint.y); 			ctx.lineTo(center.x + pointL.x,center.y + 5 + pointL.y); 			ctx.closePath(); 			ctx.fill(); 			ctx.stroke();  		}, {x:1,y:1}); 	} 	else 	{ 		//Рисуем кот 		add(function(ctx){ 			drawСircle(ctx, {x:0,y:0}, Math.sRandom(7, 10), strokeColor, strokeColor, 1); 		}, {x:1,y:1}); 	} 

Наш кот постепенно превращается в кота. Это не может не радовать.

Шаг 6 — Глаза

Глаза штука сложная. Нет, нарисовать не сложно — просто две кривых Безье. Но надо ещё добавить закрывающееся глаза, котик же может спать, а может и один глаз приоткрыть. И это надо сделать. В этот раз просто кот, без кода. Ибо большой объем, не хочется утомлять читателя кучей текста. В конце будут приведены исходники, кто захочет поглядит. А мы просто посмотрим на то что получилось.

Кот уже есть, но добавим ещё некоторый декор.

Шаг 7 — Точки усов на щеках

Знаете, бывают такие. Вероятность появления естественно, не 100%. Вот код, потом результат.
Код простой — просто раскидываем точки на некотором расстояниие от носа.

	if(Math.sRandom(0, 100) > 60) 	{ 		add(function(ctx){  			for (var i = 0; i < Math.sRandom(5, 7); i++) { 				var P = {x:Math.sRandom(20, 40),y:Math.sRandom(0, 30)}; 				drawСircle(ctx, P, 1, strokeColor, strokeColor, 1); 			} 		    for (var i = 0; i < Math.sRandom(5, 7); i++) { 				var P = {x:-Math.sRandom(20, 40),y:Math.sRandom(0, 30)}; 				drawСircle(ctx, P, 1, strokeColor, strokeColor, 1); 			}  		}, {x:1,y:1}); 	} 

Результат:

Шаг 8 — «Челка»

Просто иногда рисуем парочку линий сверху. На словах тяжело описать, смотрим код, смотрим что получается.

 	if(Math.sRandom(0, 100) > 75) 	{ 		add(function(ctx){  			 			for (var i = 0; i < Math.sRandom(3, 5); i++) { 				//Берем вектор равный по длине радиусу 				var radiusVector = {x:0,y:-radius}; 				//Поворачиваем вектор на некоторое отлонение 				//Нужно чтобы волосы выходили ровно из окружности 				radiusVector = VectorRot(radiusVector, Math.sRandom(-0.01, 0.01)) 				//Строим нижнии точки 				var P0 = {x:Math.sRandom(-25, 25), y: radiusVector.y}; 				var P1 = {x:Math.sRandom(-25, 25), y: Math.sRandom(-50, -40)}; 				//Ширина волоса 				var lineWidth = Math.sRandom(0.5, 1.5); 				//Рисуем 				drawLine(ctx, P0, P1, strokeColor, strokeColor, lineWidth); 			}  		}, {x:1,y:1}); 	} 

Здорово, правда?

Шаг 8 — Колокольчик или бантик

Ну а это уже просто для интереса, я думал чтобы ещё добавить, и решил добавить бантик и колокольчик. Не судите строго, я развлекаюсь 🙂
Как всегда код, потом красивые картинки с котиками.

	//Декорации 	//Либо бабочка либо колокольчик 	var chanceBottom = Math.sRandom(0, 100); 	if(chanceBottom > 50) 	{  		var chance = Math.sRandom(0, 100); 		if(chance > 90) 		{ 			//Бабочка - два треугольника + круг, с точками в случайном дипазаоне 			var P = {x:0,y:radius}; 			var P0 = {x:Math.sRandom(20, 45), y:radius- Math.sRandom(13, 22)}; 			var P1 = {x:Math.sRandom(20, 45), y:radius+ Math.sRandom(13, 22)}; 			add(function(ctx){ 					 				var color = (Math.sRandom(0, 100) > 50 ? fillColor : strokeColor); 			    ctx.beginPath(); 		    	ctx.strokeStyle = strokeColor; 		    	ctx.fillStyle = color; 		    	ctx.lineWidth = Math.sRandom(2, 5); 				ctx.moveTo(center.x + P.x,center.y + P.y); 				ctx.lineTo(center.x + P0.x,center.y + P0.y); 				ctx.lineTo(center.x + P1.x,center.y + P1.y); 				ctx.closePath(); 				ctx.stroke(); 				ctx.fill();  				ctx.beginPath(); 		    	ctx.strokeStyle = strokeColor; 		    	ctx.fillStyle = color; 		    	ctx.lineWidth = Math.sRandom(2, 5); 				ctx.moveTo(center.x - P.x,center.y + P.y); 				ctx.lineTo(center.x - P0.x,center.y + P0.y); 				ctx.lineTo(center.x - P1.x,center.y + P1.y); 				ctx.closePath(); 				ctx.stroke(); 				ctx.fill();  				drawСircle(ctx, P, Math.sRandom(6, 12), (Math.sRandom(0, 100) > 50 ? fillColor : strokeColor), strokeColor, Math.sRandom(1, 3));  			}, {x:1,y:1}); 		} 	} 	else 	{ 		//Колокольчик 		var chance = Math.sRandom(0, 100); 		if(chance > 90) 		{ 			//Колокольчик - треугольник, внизу с кругом. Строится по трём точкам, всё аналогично, как и выше 			var P = {x:0,y:radius}; 			var P0 = {x:Math.sRandom(8, 15), y:radius+ Math.sRandom(23, 29)}; 			var P1 = {x:-P0.x, y:P0.y}; 			var P3 = {x:0,y:P0.y + Math.sRandom(0, 7)}; 			add(function(ctx){  				drawСircle(ctx, P3, Math.sRandom(2, 6), (Math.sRandom(0, 100) > 50 ? fillColor : strokeColor), strokeColor, Math.sRandom(1, 3));  				var color = (Math.sRandom(0, 100) > 50 ? fillColor : strokeColor); 			    ctx.beginPath(); 		    	ctx.strokeStyle = strokeColor; 		    	ctx.fillStyle = color; 		    	ctx.lineWidth = Math.sRandom(2, 5); 				ctx.moveTo(center.x + P.x,center.y + P.y); 				ctx.lineTo(center.x + P0.x,center.y + P0.y); 				ctx.lineTo(center.x + P1.x,center.y + P1.y); 				ctx.closePath(); 				ctx.stroke(); 				ctx.fill();  			}, {x:1,y:1}); 		} 	} 

Как видите ничего сложного, просто геометрические фигуры.
Код был бы скучен, если бы не было котов, да будет кот с бантиком!

Заключение

Ну вот и закончил я свое повествование о котах.
Привожу код на гитхабе: github.com/MagistrAVSH/random-cat
А вот результат всех трудов, можете пощелкать: magistravsh.github.io/random-cat/
А теперь брысь от монитора, и погладь кота! 🙂