(Электронные таблицы: применяем с пользой; часть 13)
(описание используемых условных обозначений, а также список других публикаций канала по теме электронных таблиц, находится здесь).
Лет эдак тридцать тому назад дома у моей бабушки был выпуск «Науки и жизни», который почему-то запомнился скромной по объёму публикацией, в коей рассказывалось про составление витиеватых узоров при помощи сложенных вместе картонных шестиугольников с нанесённым на каждый простым рисунком из пары-тройки линий. Тот номер журнала давным-давно куда-то пропал без следа, не оставив в памяти сведений ни о годе, ни тем более о месяце своего издания. Забегая немного вперёд, скажу, что до недавнего времени так оно и было.
В 2010 году лето выдалось на редкость жарким и засушливым. В ту пору на сайте Яндекса висела забавная безделица, оформленная в виде «однорукого бандита» и предлагавшая дёрганьем за виртуальную рукоятку сделать прогноз погоды по своему желанию – там частенько «выпадало» что-то наподобие тропического ливня в понедельник, снежной бури во вторник и пустынного зноя в среду. Именно такая «погодная рулетка» натолкнула на мысль попробовать создать компьютерную реализацию упомянутого выше составителя случайного узорчатого рисунка, однако в бытовой суматохе это, даже когда изредка вспоминалось, каждый раз откладывалось на неопределённый срок.
В конце прошлого года было решено всё-таки задумку исполнить, но прежде требовалось отыскать ту самую публикацию, дабы спокойно сослаться на неё как на первоисточник. Найти удалось далеко не сразу, ведь выудить в старых подшивках журнала нужное, имея лишь одно очень смутное воспоминание о том, какие картинки эту статейку иллюстрировали – та ещё задачка. Но нет худа без добра – по ходу поисков мне попались не менее интересные материалы про приёмы скорописи и о полимерной глине, а также ряд публикаций на тему игры (клеточного автомата) «Жизнь».
Итак, на странице 91 мартовского выпуска журнала «Наука и жизнь» за 1973 г. в рубрике «Развлечения не без пользы» была опубликована заметка «Орнамент “Каракули”», автором которой указан В. Ракитин из г. Алма-Ата. Там приведены рекомендации об изготовлении самих шестиугольников, описаны подходы по работе с ними и упомянуты возможные области применения (прежде всего – в декоративных целях для, например, вышивания и разрисовки тканей). Ниже на иллюстрациях из заметки показаны варианты типовых рисунков на шестиугольниках (паттернов) и пример получающегося из них узора:
Ракитин В. не забыл также упомянуть, что для составления узоров годятся не только шестиугольники, но и квадраты, ромбы и треугольники.
Ниже вашему вниманию предлагается описание создания двух вариантов генераторов узоров на базе табличных процессоров.
Вариант 1. Узор из квадратных паттернов с визуализацией на веб-странице
Реализация данного варианта пришла в голову первой как наиболее простая и заключалась в формировании в среде электронных таблиц набора тегов (команд языка HTML) для вставки в веб-страницу изображений.
Для тех, кто незнаком с языком гипертекстовой разметки HTML, проведу очень краткий ликбез. Этот искусственный язык используется для оформления веб-страниц (по-другому – html-файлов), которые по сути представляют собой текстовые файлы, содержащие отображающийся на странице сам текст и команды по его оформлению – теги (отделяются от основного содержимого при помощи символов "<" и ">"). Есть специальные программы – HTML-редакторы, использующиеся для разработки интернет-сайтов, ведь каждый отдельно взятый сайт в первом приближении можно считать хранящимся на каком-либо сервере набором связанных гиперссылками веб-страниц и сопутствующих вспомогательных файлов (например, файлов изображений). HTML является весьма простым языком, более того – для редактирования веб-страниц сгодится даже стандартное windows-приложение «Блокнот». Чтобы создать простейший html-файл при помощи Блокнота, запустите его и введите в окне текст:
Примечание: здесь и в некоторых других случаях примеры кода/формул, представленные в виде рисунков, будут дублироваться в подписях к ним, чтобы их можно было скопировать при необходимости.
После этого выберите в программном меню команду «Файл» → «Сохранить как...» и в открывшемся стандартном диалоговом окне укажите папку, где хотите расположить создаваемую веб-страницу. Самое главное при этом – явно указать не только собственно имя файла, но и его расширение – “htm” (можно “html”):
Если такой файл затем открыть при помощи любого браузера, то он считает его содержимое и отобразит в своём окне в соответствии с инструкциями (тегами) – в строке заголовка выведет “Hi!”, а в области страницы покажет фразу “Hello, world!”. Браузер позволяет просматривать веб-страницу, для редактирования её можно открыть при помощи того же «Блокнота».
Считаю необходимым отметить, что изучение основ HTML сейчас включено в школьный курс по информатике, поэтому прежде, чем переходить к дальнейшему описанию создания генератора узоров, могу заинтересовавшимся посоветовать издание, где этот материал изложен более подробно, нежели у меня здесь: Угринович Н.Д. Информатика и информационные технологии. Учебник для 10-11 классов. М.: БИНОМ. Лаборатория знаний, 2003. – 512 с. (Глава 13 «Основы языка гипертекстовой разметки документов», с. 467).
При помощи графического редактора GIMP я сначала создал две такие картинки в формате PNG размерами 64×64 пикселей:
Предполагалось формировать из них на веб-странице блок 10×10, причём каждый паттерн должен был не только выбираться случайно, но ещё и случайно ориентироваться одним из четырёх возможных способов. Таким образом требовалось восемь файлов, именам которых были присвоены числа от 1 до 8:
За основу я взял ранее созданную книгу (файл электронных таблиц), способную генерировать массив случайных чисел, и прежде всего подправил (уменьшил) в ней размеры этого массива для данной ситуации, указав также требуемые настройки «генератора»:
Далее предстояло превратить полученный набор произвольных чисел в совокупность html-тегов – использование подобного приёма упоминалось ранее в качестве нестандартного применения программы для транслитерации текста. В ячейку “P2” была введена такая формула:
="<img src=" & E2 & ".png>"
Её откопировали маркером заполнения вправо, до “Y2” включительно, а в “AA2” была размещена формула, выполняющая объединение текста в ячейках диапазона “P2:Y2”:
=P2&Q2&R2&S2&T2&U2&V2&W2&X2&Y2&"<br>"
После этого осталось только размножить все формулы вниз, вплоть до 11-й строки, чтобы в диапазоне “AA2:AA11” получался готовый html-код, пригодный для копирования в буфер обмена:
Итак, сам генератор кода готов, теперь же осталось создать веб-страницу, в который его можно будет вставить. Для этого в той же папке, где лежат PNG-картинки с паттернами, нужно разместить html-файл, содержащий такие инструкции:
После переноса html-команд из электронной таблицы в веб-страницу, последнюю нужно сохранить и открыть любым браузером (или обновить страницу, если она уже им открыта). Результат может выглядеть так:
Чуть позже я добавил ещё вот такие рисунки:
Изменяя значения начала и конца интервала, в котором производится генерирование случайных чисел, можно управлять наборами используемых для создания узора паттернов. Как нетрудно догадаться, при таких параметрах:
будут создаваться узоры из второго комплекта изображений, подобные показанному ниже:
При желании можно задействовать весь имеющийся диапазон файлов – для этого достаточно указать значения начала и конца интервала 1 и 16 соответственно:
Вариант 2. Узор из шестиугольных паттернов с визуализацией на веб-странице
Цифровые изображения характеризуются шириной и высотой, поэтому сложить из одинаковых по размерам картинок мозаичный блок, вплотную состыковав рисунки друг с другом на веб-странице, не составляет большого труда. В случае шестиугольных паттернов, таких, как в обсуждавшейся выше заметке из «Науки и жизни», так сделать уже не получится – в самом файле всё равно будет по сути прямоугольное изображение и плотно соединить его с другими посредством стандартных средств HTML можно лишь в виде одного ряда:
Чтобы уложить следующий ряд шестиугольников встык с первым, его нужно не только сместить вбок, но ещё и вверх, частично наложив рисунки друг на друга:
Отсюда дополнительно следует, что сами паттерны обязательно должны иметь участки с прозрачностью, чтобы при наложении одних рисунков поверх других не происходило закрытие изображений.
Для генератора «каракулей» Ракитина В. я создал 18 PNG-файлов (86×100 пикселей) с тремя типами предложенных им паттернов – по шесть вариантов поворота для каждого:
Как уже было сказано, стандартными тегами HTML обойтись не получится, поэтому для размещения рисунков в нужном порядке на веб-странице я воспользовался CSS – если кратко, то это средство, позволяющее задавать частям веб-страницы дополнительные параметры оформления. В окне браузера координаты размещаемого на странице объекта (текст, рисунок и т. п.) отсчитываются от верхнего левого угла:
В связи с этим задумка была следующая. Сначала нужно поместить ряд рисунков внутри контейнера <div>:
Затем полученный блок можно позиционировать на веб-странице как надо, указав у <div> параметр “style” с необходимыми инструкциями CSS:
Для создания требующегося в данном случае html-кода в “AA2” (см. Вариант 1) была размещена модифицированная формула, которую затем размножили вниз до 11-й строки включительно:
Обратите внимание: красным шрифтом выделена её часть, которая ориентируется на стоящие в столбце “D” числа:
Указанный фрагмент отвечает за вычисление значения координаты y (CSS-инструкция “top”) в зависимости от целочисленного параметра n и задаёт смещение от верхней части окна браузера для блока паттернов с шагом 73 пикселя:
y = 1 + 73· (n – 1)
Аналогично, выделенная зелёным цветом часть формулы задаёт попеременный отступ x от левого края окна браузера (CSS-инструкция “left”) в 1 или в 44 пикселя также на основании значения n:
x = 1 + 21,5·(1 + (–1)ⁿ)
Как легко догадаться, этим обеспечивается разница смещения вбок на
44 – 1 = 43 пикселя между соседними контейнерами <div>, что как раз равно половине ширины изображения в файле каждого паттерна (86 пикселей).
Формулы, создающие тег <img> для вставки изображения (диапазон “P2:Y11”), чуток отличаются от указанных в Варианте 1, так как имена файлов с шестиугольными паттернами содержат букву “h” (показано на примере “P2”):
="<img src=h" & E2 & ".png>"
Получающийся в итоге код в ячейках диапазона “AA2:AA11” можно добавлять в html-файл. Ниже приведены примеры четырёх узоров, составленных из первого (а), второго (б), третьего (в) паттернов и из всех трёх сразу (г):
Строго говоря, в заметке Ракитина В. прежде всего велась речь о наличии какой-либо системы в чередовании типов паттернов и их поворотов, благодаря чему можно создавать именно орнаменты, а не хаотично составленные рисунки. Добиться регулярности несложно – ниже для примера показан узор, который получается, если в диапазоне ячеек “E2:N11” вручную проставить как по горизонтали, так и по вертикали циклично повторяющиеся числа 1 – 7 – 13 вместо имеющихся там формул.
Файлы с примерами: xlsx / ods / zip-архив с паттернами
См. также: Генератор узоров «Каракули-2»
Перечень публикаций на канале