РУКОДЕЛКИ Идеи дизайна из бабушкиного сундука (пиксель-арт из вышивки)

bort707

★★★★★★✩
21 Сен 2020
3,062
912
Не уверен, что это сюда. Вряд ли это "проект", но то что идея - точно :)
Рассказ о том, как, не умея рисовать - я создавал заставку на светодиодный экран.

Начну с повторения - я не художник, рисовать не умею совсем. Понадобилась цветная картинка для светодиодной матрицы. Оказалось, найти такую – проблема, пиксельное разрешение панелей низкое, глубина цвета небольшая, начинаешь преобразовывать готовое изображение – получается полная ерунда.
Поделился проблемой с женой, слово за слово – она и говорит – а узоры для “свитеров с оленями” тебе не подойдут? А ведь правда, это то что надо! Глянул в гугле альбомы с вышивкой - там такие сюжеты, и монохром, и в цвете... и главное - они уже расчерчены на пиксели :)




Или вот, например, чем не готовый шрифт в старославянском стиле?

(Картинки с вышивками взяты отсюда https://www.pinme.ru/u/yavazhure/slavyanskaya-vyishivka-shemyi-uzoryi/)

Решено, будем делать часы в стиле “кич а-ля рюс”.

Фонт для цифр я взял с картинки выше, в программе GLCD FontCreator https://www.mikroe.com/glcd-font-creator
создаем символы прямо по точкам, благо нам нужны только цифры.



Удобно, что все цифры одинакового размера, 11х20 пикселей, исключая “1” и “4” – последняя имеет сзади “хвостик”, который я позволил себе удалить. Цифры “0” на картинке нет, вместо нее срисовал букву “о”. Еще понадобится двоеточие. На выходе программа сразу создает С-массив фонта в формате Adafruit GFX, который можно влючать в скетч ардуино.

Далее надо определится с общим размером экрана. Светодиодные матрицы бывают разных размеров – 32х16, 64х32, 128х64 пикселей. В ширину для вывода времени нам нужно 11*4 = 44 пикселя под цифры, еще 4 займет двоеточие и еще 4 – промежутки между знаками. Итого 52 пикселя. Высота букв у нас 20 пикселей. Таким образом, минимальная подходящая панель – 64х32, но на таком холсте поместятся, фактически, только цифры. Размер 128х64 мне показался великоват, понадобится слишком много декора, я не справлюсь. Я решил выбрать размер 64х64

Рисование по точкам с низким разрешением, в стиле первых компьютерных игр – ныне модное течение, называется “пиксель-арт”. Для создания таких изображений лучше использовать специальные редакторы. Главное требование – четкие границы отдельных точек, отсуствие эффектов типа “размытия”. Как мне показалось, в фотошопе размытие отключить нельзя, минимальное значение – это 4 соседних пикселя, что в данном случае очень плохо сказывается на результате.
Для создания своего шедевра я использовал он-лайн редактор Piskel https://www.piskelapp.com/ (не реклама!) - который привлек меня своей простотой. Возможностей у него минимум – в этом и плюс, не надо тратить время на изучение, просто садись и делай.

Открываем новый проект, задаем размер холста – у нас это 64х64 и включаем сетку. Первым делом нарисуем в центре контур, в который потом будут выводится часы – прямоугольник 54х20. У нас остается примерно по 20 пикселей сверху и снизу и всего по 5 по краям. Покопавшись в альбомах вышивки, я выбрал для нижнего поля вот этих чудесных птиц:



А наверх решил поместить вот эту розу с салфетки. Кстати, на этой же салфетке нашелся бордюрчик, некое подобие которого я поместил справа и слева.

Традиция русской вышивки, как правило, требует, чтобы узор был симметричным. Я решил поступить так же, тем более что это сокращает работу наполовину. В итоге, мне достаточно нарисовать картинку только с одной стороны, а потом скопировать ее зеркальное отражение на другую сторону.

Для сохранения выбираем “Selected frame export”. Теперь нам надо преобразовать этот файл в формат, понятный микроконтроллеру. Сделать это можно с помощью онлайн конвертера ImageConverter565 Rinky-Dink Electronics http://www.rinkydinkelectronics.com/_t_doimageconverter565.php Сохраняем как с-файл и переименовываем в clock_interface.h

Ну что ж, художественная часть работы закончена. Осталось проверить, как мое произведение будет смотрется на светодиодной панели. Для своих часов я использую плату STM32 bluepill, вывод на светодиодную матрицу организован через библиотеку DMD_STM32 https://github.com/board707/DMD_STM32.
Вот так выглядит результат “вживую”:



Может, кто-то скажет “фу какая пошлятина!”- а что вы хотели? :) Это же “кич”!!

Спасибо за внимание.
 
Изменено:

bort707

★★★★★★✩
21 Сен 2020
3,062
912
Добавлю файлы, вдруг кто-то захочет посмотреть на это сам.

clock_interface.h - картинка интерфейса
vyshivka12x20.h - фонт для светодиодной матрицы высотой 20 пикс. только символы 0-9 и двоеточие
gfx_clock_64x64.ino - скетч для вывода всего этого на матрицы, для СТМ32.

Внимание! - код только выводит картинку! кода часов в скетче нет :))))
 

Вложения

poty

★★★★★★✩
19 Фев 2020
3,230
940
Давно хотел сделать что-то подобное. В качестве развития - картинку можно менять от времени года и времени суток, будет заодно и функционально!
А уж для метеостанции - вообще поле для самовыражения бесконечное!