Genuary 6: "Make a landscape using only primitive shapes."
https://codepen.io/lekzd/pen/xbKPeKX

Пока самая залайканная везде работа, ведь где бы ты ни был, а панель в которой вырос она в сердце, идея взята с работ @DeepPixelMelancholy, который рисует пиксельарты по мотивам воспоминаний детства, которые вызывают довольно сильную ностальгию у всех кто вырос в похожем окружении

Genuary 7: "Use software that is not intended to create art or images."

Не самый простой день, я не мог придумать что делать до вечера и потом родилась идея, что редактор кода довольно быстро подхватывает изменения в файле, нашел что самый быстрый из тех что установлен был VS Code (для тех кто недоумевает, Vim обновляет файл только первый раз). В итоге я придумал, что можно запустить файл скрипта через node.js, перезаписать его и запустить еще раз чтобы снова перезаписать...

Genuary 8: "Draw one million of something."
https://codepen.io/lekzd/pen/XJrZmbw

1.000.000 точек, но как не странно для 3д это даже мало чтобы что-то нарисовать большое

Genuary 9: "The textile design patterns of public transport seating."

https://codepen.io/lekzd/pen/WbeMojp

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

Genuary 10: "You can only use TAU in your code, no other number allowed."
https://codepen.io/lekzd/pen/GgKQxVd

когда-то я увлекался головоломкой на JS Return true to win, где надо было придумать что передать в функцию, чтобы она вернула true, так как просто алгоритмы это скучно половина заданий там идет с ограничениями на символы, например нельзя использовать цифры, прямо как в этом задании, но ничего страшного:

zero = TAU - TAU
one = TAU / TAU
two = one + one
animation = performance.now() / (TAU * TAU * TAU * TAU)

ну и название люди придумали "много крокодилов быстро пересекаю реку"

Genuary 11: "Impossible day - Try to do something that feels impossible for you to do ... Maybe it’s something you know nothing about how to accomplish."
https://codepen.io/lekzd/pen/ZYzxLLm

День когда надо попытаться сделать невозможное был пожалуй самым продуктивным пока, я начал с радиального узора в мароканском стиле. Здесь рисуется 1 треугольник, в нем еще 10, которые анимируются от центра к краям и наоборот, дальше он повторяется 20 раз по кругу и получившиеся круги повторяются заполняя весь экран. Чтобы избежать наложения используется маскирование

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

Далее я добавил туда линии и вышла...акварель!

Ну и, наконец-то, получился столь желанный калейдоскоп со стеклышками, залитыми полупрозрачным градиентом

https://codepen.io/lekzd/pen/jENzLGg

Но я все еще не мог остановиться на достигнутом и сделал уже правильный мароканский узор, кстати, все 5 работ выполнены с использованием одной и той же палитры, взятой отсюда https://coolors.co/palettes/trending

https://codepen.io/lekzd/pen/jENzZJL

Пожалуй, второй самый залайканный везде пост.

Genuary 12: "Subdivision"
https://codepen.io/lekzd/pen/ogvqdxZ

Разделение...что бы это могло быть, я не силен в алгоритмах где большой полигон делится на мелкие, потом еще и еще и я вспомнил, что еще когда начинал разбираться в вебе в 2010 году шуму наделала flash-анимация на сайте испанской певицы Labuat (судя по всему она так расфорсилась в рунете что домен захватил какой-то сеошный каталог, хе-хе).

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

Кстати именно эту песню я выбрал для свадебного танца с женой, ведь как символично для веб-разработчика было выбрать именно ее)

UPD: нашел тред на гитхабе, где достучались до разработчика и он выложил видео на сайте https://github.com/open-source-flash/open-source-flash/issues/70

Genuary 13: "Triangles and nothing else."
https://codepen.io/lekzd/pen/VYZXNdy

Треугольники значит, нарисовал сетку на треугольниках и отрендерил на ней цвета при помощи кода:

(1 + Math.sin((y) / 40) + Math.cos((x) / 50))

когда не знаешь что делать бери синус и косинус)

Но, как обычно, не достигнув вау-эффекта лично для себя, пошел дальше: решил отрендерить картину, и не просто нарисовать, а используя 1 линию, которая каждый тик поворачивается на 120 градусов, образуя треугольники. В итоге получился некий муравей, который прогрызает темноту, открывая миру Мону Лизу. Таких муравьев у меня 256, раскиданных по спирали, чтобы картинка проявлялась вся начиная с лица

https://codepen.io/lekzd/pen/NPKMGjv

Остался вопрос, где взять Мону Лизу, чтобы не было запроса на сторонний ресурс, что помешало бы сгенерировать красивое превью на CodePen. На помощь пришел старый добрый ASCII арт из 1994 года.

Поискав автора, нашел что у него есть целая статья о том как это было сделано, если вкратце, автор написал скрипт, который по сетке перевел картинку в текст, я, выходит сделал наоборот)

Genuary 14: "Pure black and white. No gray."
https://codepen.io/lekzd/pen/yyBjMOr

В этом задании я вспомнил молодые годы и обучение рисованию и графике в школе, затем в институте, где одним из приемов композиции была инверсия. Захотелось сделать что-то такое, и на ум сразу пришел мастер инверсии из Дании Эшер, работы которого построены на особенностях периферического зрения.

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

Именно этот эффект я взял своей черно-белой композиции, но кажется испортил его динамикой перерисовки фона, которая уж очень понравилась и решил так и оставить

Genuary 15: "Design a rug."
https://codepen.io/lekzd/pen/emOKZMv

Мастерим коврик) Началось все с попыток сделать гексагональную плитку Труше, так как для ковра вполне подходят абстрактные структуры и казалось что буквально добавить рандома и все полетит. Но сделать из этого красивую картинку на рандоме не вышло, в итоге гексы остались, а их заполнение стало в разы проще чем планировалось. Потому я обратился к старому доброму паттерну sin + cos и повторил его отдельно для края ковра.

Неужели это все? Да это все, коврик буквально собран на случайностях. Бывает так, что собрал алгоритм, который что-то рисует, начинаешь играться с параметрами и тут раз! и красиво выходит

Genuary 16: "Generative palette."

https://codepen.io/lekzd/pen/VYZdyJM

Генеративная палитра, не самое простое задание от @mathimages и все из-за того, что подобрать на глаз три цвета, которые сделают хорошее сочетание, их массы и соотношение еще куда не шло, но вот сделать это кодом, чтобы буквально тыкнуть JS-пальцем в цветовой круг и от этой точки построить палитру уже выглядит сложнее.

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

Кстати, вычитал на Википедии, что данный тип орнамента классифицирован с 17 другими возможными вариантами и называется p4 (то есть 4 поворота), ранее я делал узоры по наитию, теперь можно пробовать использовать шаблоны, описанные еще 130 лет назад.

Иногда банан это просто банан

10 итишников за столом, много пива спустя, на стене висит картина с кольцами, повернутыми в разные стороны. Бармен очередной раз проходя мимо шутливо закидывает нам идею что картина может быть не просто картина, а шифр! На все подсказки реагирует улыбкой Моны Лизы, чем еще сильнее подталкивает нас к исследованию.

За полчаса опробовано:
— шифр Цезаря
— 8-ричная система исчисления (у колец 8 поворотов)
— чат гпт
— бинарные последовательности

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

Короче, кто-то копает что за кольца, кто-то ищет инфу про художника, я начинаю обводить на картине последовательности, которые неожиданно прерываются без всякой логики. В итоге находим заметку о выставке, где была эта картина, оказывается смысла в написанном реально нет. А последовательности символов такие, потому что художник использовал трафарет, переворачивал его и сдвигал на 1 символ, чтобы было немного по-интереснее. А вся суть картины в том, что тут изображена адресная табличка, а все остальное заполнено кольцами Ландольта, которые используются для проверки зрения и ВНИМАНИЯ, такой вот символизм. Художник говорит что там еще на первом слое какая-то молния нарисовано, но кто знает... заходите лучше в бар Ящик пива где висит эта картина, и не такое узнаете.

Genuary 17: "What happens if pi=4?"

Для тех кто недоумевает что такое Genuary, в этом посте я объяснял

Когда буквально первый эксперимент приводит к неожиданным последствиям: берем число PI которое будет равно 4, рисуем 8 полукругов с поворотом ((PI * 2) / 10) поворачивая их по часовой стрелке и получается лягушка в очках. Мне оставалось только добавить ей глаза и анимировать ее движения чуть-чуть сдвигая углы конечностей. Почти генеративный брендинг для @laranatech =)

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

https://codepen.io/lekzd/pen/raBrNMY

Genuary day 18: "What does wind look like?"

https://codepen.io/lekzd/pen/KwPBzrd

Для этого задания хотелось повторить визуализацию ветра, как это делается на сервисах где вы смотрите погоду. Но столкнувшись с честным рисованием линий оказалось, что если нет сервера, который заранее отдает точки с каким-то шагом, раскидать их по сцене с поворотам, это не самая тривиальная задача. А еще и предусмореть центры притяжения для создания завихрений.

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

Genuary 19: "Op Art."

Оптическое искусство, снова ограничился только черным и белым, получился хоррор с глазами как в игре Stray.

https://codepen.io/lekzd/pen/ByBPVzO