Создание конструктора кирпичной кладки для сайта

в 8:46, , рубрики: php, Веб-разработка, кирпич, конструктор, обработка изображений, метки: , , ,

Компания Сиджеко занимается поддержкой сайта организации Реконстрой, которая продаёт и доставляет кирпич, черепицу, архитектурный декор и многие другие строительные материалы в Центральном Черноземье.

В процессе работы над сайтом возникла идея конструктора кладки.

У немецкого концерна «Feldhaus Klinker» существуют модельные ряды кирпича «Vascu Mix» и «Sintra Mix», которые специально предназначены для смешивания в разных пропорциях и создания неповторимого рисунка кладки. К ним существует ряд замазок «Quick Mix», применяемых при замазывании швов кладки между кирпичами. Для демонстрации этого подхода мы решили сделать конструктор кирпичной кладки, аналогов которому в интернете я пока не видел (буду рад примерам).

Конструктор кирпичной кладки

На кирпичи и швы накладываются тени и царапинки, чтобы максимально приблизить рисунок к жизни. Переключатели решили стилизовать под тач-устройства. Для конструктора были обработаны сотни изображений: фотографии кладок, кирпичей, замазок для швов и т. п.

Режим «Пьяный мастер» — потехи ради:

Режим «Пьяный мастер»

Процесс

Оставляем дизайнера с картинками (на самом деле, объём работы там несоизмеримо больше программистской стороны дела), фронтендер Дима делает красиво на клиентской стороне, я стараюсь дотянуть до его мастерства на бекенде.

Итак…

Основные шаги

Берём все возможные фотографии кладок, которые только смогли найти в рекламных материалах компании, добавляем свои фото.

Вырезаем кирпичи, производим их обтравку с прозрачными полями.

Приводим изображения кирпичей к одному размеру. От каждой модели нам нужно несколько реальных фоток, чтобы в результате было нескучно.

Кирпичи

Виртуальная кладка строится не в той же последовательности, что и реальная :-)
Так, сначала всё поле заполняем картинкой шва, размножив её до нужного размера картинки.

image

Затем заполняем слой кирпичей, в котором разные модели линейки смешаны в нужной пропорции. Чётные ряды смещаем по горизонтали на полкирпича от нечётных. (Существуют и другие рисунки кладок для любителей дела, но пока было решено остановиться на классическом, чтобы уложиться в сроки.)

image

Можно было бы и остановиться, но выглядит слишком рафинированно. Реальность всегда лучше: потёртости, царапины — внешний вид каждой вещи отражает её историю. Нужно искусственно «состарить» изображение шумами.

Можно нанести шум просто рандомно изменив каждый пиксель изображения. Но это работает долго, да и выглядит не очень: мы, всё-таки, хотим эмулировать реальную фактуру материалов, а не ISO-шумы фотоаппарата.

// Шум (долго)
for ($x = 0; $x < $allWidth; $x++)
	for ($y = 0; $y < $allHeight; $y++)
		imagesetpixel($image, $x, $y, imagecolorallocatealpha($image, 0xff, 0xff, 0xff, MyRand::rand(115, 127)));

Случайный шум

Пойдём более интересным путём (который, к тому же, сильно сэкономит время генерации картинки) — нанесём «царапины».

Царапины — это, по сути, линии белого и чёрного цвета со случайной длиной, наклоном и прозрачностью. Если верхняя часть линии светлая, а нижняя тёмная, на изображении это выглядит как выпуклость, если верхняя часть тёмная, а нижняя светлая — как царапина (впуклость, да).

// Выборочный шум (быстро)
// Царапинки и выпуклости
for ($x = 0; $x < 5000; $x++) {
	$dotX = MyRand::rand(0, $allWidth);
	$dotY = MyRand::rand(0, $allHeight);
	$scratchWidth = MyRand::rand(1, 8);
	// 80% впадинок-царапин (+1) и 20% выпуклостей (-1)
	$scratchAdj = MyRand::rand(0, 10) > 8 ? -1 : +1;

	for ($i = 0; $i < $scratchWidth; $i++) {
		imagesetpixel($image, $dotX+$i, $dotY+$scratchAdj, imagecolorallocatealpha($image, 0xff, 0xff, 0xff, MyRand::rand(95, 110)));
		imagesetpixel($image, $dotX+$i, $dotY, imagecolorallocatealpha($image, 0x00, 0x00, 0x00, MyRand::rand(95, 110)));
	}
}

Выборочный шум

Осталось нанести копирайт. Подгрузим шрифт (Убунту подойдёт).

Копирайт

Готово!

Конструктор на выходе может выдавать и JPEG, и PNG (все исходные картинки в PNG24), но ввиду большого размера результирующего PNG мы остановились на JPEG.

Кеширование и урлы

Второй раз строить изображение при тех же входных параметрах не нужно, пощадим процессор и пользователя; сохраняем картинку при первом обращении и выдаём её из кеша при последующих.

Идентификатор кеша картинки (он же — имя файла) должен быть одинаковым при любом порядке переменных в GET-части урла. Поэтому сначала удаляем все ненужные переменные (ключи и значения, которые можно вручную подставить в урл), а потом сортируем глобальный массив $_GET по ключам:

// Сортируем ключи (чтобы идентификатор кеша всегда был одинаков при одинаковом наборе ключей)
ksort($_GET);

Затем получаем всю остальную часть идентификатора:

$fileIdentifier = 'images/cache/' . $randSeed;

$fileIdentifier .= sprintf(
	'/lineup-%s_color-%d_drunk-%s_',
	$lineup,
	$backFile,
	$isDrunk ? 'on' : 'off'
);

foreach ($_GET as $key => $value) {
	if (!empty($value))
		$fileIdentifier .= preg_replace('/[^a-z0-9_-]/ui', '', $key) . '-' . preg_replace('/[^a-z0-9_-]/ui', '', $value) . '_';
}
$fileIdentifier = rtrim($fileIdentifier, '_');
$fileIdentifier .= '.' .  OUTPUT_FORMAT;

Не забудем и про HTTP-заголовки, связанные с кешированием:

header('Cache-Control: Public');
header('Pragma: Public');
header('Last-Modified: '     . gmdate('D, d M Y H:i:s', $time) . ' GMT');
header('If-Modified-Since: ' . gmdate('D, d M Y H:i:s', $time) . ' GMT');
header('Expires: '           . gmdate('D, d M Y H:i:s', $time + 30*24*60*60) . ' GMT');
Генератор случайных чисел

Чтобы полностью следовать философии урлов, для каждой ссылки всегда должна выдаваться одна и та же картинка. Но у нас в системе много случайных факторов (шумы, неровности). Если быть предельно точным, нам нужен не генератор псевдослучайных чисел (ГПСЧ), а генератор псевдослучайных последовательностей (ГПСП). Каждая последовательность, определяемая неким идентификатором (seed), должна быть уникальной и повторяемой.

В новых версиях PHP (⩾5.2.1), генератор mt_rand() перестал выдавать одинаковые последовательности при одинаковых значениях параметра mt_srand($seed) (по крайней мере, рекомендуется на это поведение не рассчитывать). Напишем свой велосипед. Поскольку криптографической безопасности от генератора нам не требуется, воспользуемся одним из самых популярных и простых методов — умножением с переносом.

/**
 * Получение следующего псевдослучайного целого числа в заданном диапазоне.
 * @param integer $min
 * @param integer $max
 * @return integer
 */
public static function rand($min = 0, $max = 0xffffffff)
{
	self::$m_z = 36969 * (self::$m_z & 65535) + (self::$m_z >> 16);
	self::$m_w = 18000 * (self::$m_w & 65535) + (self::$m_w >> 16);

	$res = ((self::$m_z << 16) + self::$m_w) & 0xffffffff;
	$res = $res > 0 ? $res : ~$res;
	//var_dump($res, PHP_INT_MAX, 0xffffffff); die;
	return intval($min + floor(($res / doubleval(0xffffffff)) * ($max - $min + 1)));
}

Где self::$m_z и self::$m_w — статические поля текущего состояния генератора. При одном и том же заданном наборе self::$m_z и self::$m_w генератор будет выдавать одинаковые псевдослучайные последовательности целых чисел.

Режим «Пьяный мастер»

Повернём каждый кирпич на случайный угол в узком диапазоне наклона, и выпивший мастер уже работает над вашей стеной.

Варьируя диапазон наклона в градусах, можно менять количество и градус выпитого (простите за каламбур). Я остановился на ±3,2°.

Ссылки

Автор: MaximAL

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js