Быстрый/легкий субботний дневной проект

Первоначальная идея:

Некоторое время назад я прочитал эту статью от Aral Tasher, в которой был представлен очень простой способ создания великолепных пиксельных изображений с помощью чистого CSS.

Чистый CSS — это здорово, и я определенно вижу в нем привлекательность; это довольно простой способ сделать это, и то, как объясняет Эйрал, в основном означает, что вам просто нужно знать, какие цвета вы собираетесь использовать.

Однако я немного знаю код, и у меня возникла идея создать генератор.

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

Чтобы проникнуть в некоторые легкие концептуальные вопросы, в любом языке разработки программного обеспечения и объектно-ориентированном языке вы можете разбить вещи на общие и специфические. .

В этом случае общее:

  • каждая «художественная доска» состоит из единиц («пикселей»)
  • артборд имеет родительский элемент HTML
  • каждый пиксель окрашен.

Все они являются общими для каждого экземпляра.

Тогда специфический будет спецификацией этих элементов:

  • размер устройства
  • родительский элемент
  • и цвета.

Давайте посмотрим на код:

Код:

Чтобы просмотреть весь исходный код, посетите эту страницу на моем Github.

Эта часть является объектом pixelArt.

Функция «chunk» (строка 9) — это функция, которая в основном берет массив и разбивает его на массив или более мелкие массивы (более подробное объяснение позже).

Затем мне нужно было создать функцию generate, которая использует каждое из свойств и выдает пиксельную графику:

Я добавил некоторую начальную проверку, чтобы убедиться, что передано правильное количество цветов. Например, если вы укажете 4 столбца и 4 строки, код будет ожидать 16 цветов.

Я постарался сделать генерацию максимально простой.

Строка 2–3: во-первых, мне нужно было добавить несколько полей к элементу «pixelWrapper», чтобы убедиться, что каждый пиксель будет содержаться. Без этого весь элемент может перетекать на другие элементы, и для исправления потребуется дополнительный CSS (не идеальный вариант).

Строка 6–15: пиксели генерируются с помощью CSS-атрибутов box-shadow, исходящих из одного элемента rootPixel. Я указал размер rootPixel из размера юнитов — тени также будут иметь этот размер.

Строки 17–27. Здесь я перебираю каждую строку в наборе цветов, а затем просматриваю каждый столбец. Таким образом, я мог указать положение каждого и правильно расположить каждую тень.

Нравится:

array = ['red', 'yellow', 'green', 'blue']
chunked_array = [ ['red', 'yellow'], ['green', 'blue'] ]

output:
red: row 1, column 1
yellow: row 1, column 2
green: row 2, column 1
blue: row 2, column 2

(на самом деле индексация массива начинается с 0 — так что на самом деле это будет (0, 0) (0, 1) — и т. д. Но неважно, давайте продолжим.)

Строки 29–34. Затем я устанавливаю «rootPixelStyle» в качестве стиля для элемента «rootPixel». «rootPixel» устанавливается в качестве дочернего элемента «pixelWrapper», а «pixelWrapper» устанавливается в качестве дочернего элемента для указанного элемента.

Вывод:

Так что теперь все, что мне нужно сделать, это указать несколько вещей, а скрипт сделает все остальное за меня.

И -

Оно работает. Величественный.

Я понимаю, что определенно может быть лучший способ закодировать все это, особенно некоторые особенности функции «генерировать». Это ни в коем случае не идеальное решение, и я предполагаю, что пользователь будет правильно использовать скрипт, что никогда не является хорошей идеей (т.е. я был слишком ленив, чтобы добавить дополнительную проверку).

Однако это было написано всего за пару часов в субботу, так что — да.

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

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

Чтобы просмотреть исходный код, ознакомьтесь с репозиторием здесь. Я также включил HTML-страницу, показанную на снимке экрана, в качестве примера того, как ее использовать. Скачивайте, редактируйте, ломайте, улучшайте, используйте.

Также ознакомьтесь со статьей Арала Ташера, чтобы узнать обо всем, что связано с CSS.

(Он также сделал часть 2, в которой используется Sass — хороший материал)

Спасибо за чтение.

Джо Бойлсон | https://joeboylson.herokuapp.com