Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

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

Anna | 31.05.2014 | нет комментариев

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

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

У немецкого концерна «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)));
	}
}

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

Без шумов и с ними:

Без шумов и с ними

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

imagettftext($image, 10, 90, $allWidth - 7, $allHeight - 7, imagecolorallocatealpha($image, 0, 0, 0, 90), 'font/ubuntu-r.ttf', 'Sijeko Brick Generator ' . GENERATOR_VERSION);

Копирайт

Готово!

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

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

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

Идентификатор кеша картинки (он же — имя файла) должен быть идентичным при любом порядке переменных в 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), должна быть уникальной и повторяемой.

Источник: programmingmaster.ru

Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB