Сетка — кодинг для дизайнеров

Кто здесь

Сетку основали два человека:

Иван Дианов — генеративный художник, амбассадор гендизайна в России и основатель Генклуба — крупнейшего тематического сообщества. Ваня знает, как нарисовать любую красивую картинку, которую вы могли увидеть в интернете в разделе «криэйтив-кодинг». Иногда мне кажется, что это он изобрёл шейдеры, просто стесняется признаться. Живёт в Волгограде, плавает по Волге на сапах, ходит в походы и лайвкодит на фестивалях. Преподаёт дата-арт в ВШЭ.

Адам Арутюнов — программист в Студии Артемия Лебедева. Ведущий разработчик и техлид Потокуса, на котором работает новый сайт студии. Разрабатывал ИИ-дизайнера Николая Иронова. В школе автоматизировал учёт сборки комбайнов на заводе. Написал систему для университетов, которая автоматически проверяет домашние задания по программированию. Живёт везде, ездит куда глаза глядят и выступает на конференциях.

Мы преподаём генеративный дизайн. Сначала проводили живые потоки, а потом упаковали записи занятий и дополнительные материалы в 29-дневный курс. Он выходит в виде телеграм-канала, где каждый день по расписанию публикуются видеолекции, квизы, советы и ответы на вопросы. Технология, которой мы учим — p5.js (на ней в том числе сделан Метрогенератор). Этот курс базовый, для тех, кто ещё не умеет программировать. Следующий поток начинается 15 ноября.

В этом канале мы популяризируем гендизайн, выкладываем мини-уроки, рассказываем о художниках и классных техниках. Иногда устраиваем вебинары с крутыми специалистами и делаем совместные проекты.

Если что, пишите в личку. Всё, убегаю, до связи.

(↑ На фото — наша вторая в истории личная встреча в Волгограде, 24 октября 2023 года :—)

Метрогенератор

Сетка представляет свой первый спецпроект.

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

Всем узлам логотипа, которые можно двигать, мы дали названия: уши, глаза, ноги и щиколотки. Можно изменить цвет, заливку, собрать из логотипа динамичный паттерн и даже сгенерировать случайный уникальный М-логотип :—).

Метрогенератор: setka.design/metro.

🕸 Сетка

Stranger in the Q

JS разработчик по профессии. Многие из своих работ начинал кодить на телефоне во время комьюта. Возможно, в этом секрет его продуктивности :–)

А ещё он активный участник комьюнити генеративщиков @gen_c: открытый, дружелюбный, запросто делится секретами. Заходите в Генклуб сказать ему «привет», «классные штуки рисуешь», «омагад, как это работает?» и пр.

Сайт www.strangerintheq.art
Канал @mathimages

#генеративные_художники

Запись гендизайн-стрима

00:00 Вступление и основы p5.js
13:13 Радужные квадраты из Тиктока
38:04 Результат (скетч)
39:45 Хаотичная таблица из Пинтереста
01:03:14 Результат (скетч)
01:06:58 Разноцветный глаз из Беханса
01:28:27 Результат (скетч)
01:33:24 Самореклама
01:37:13 Вайфай-волны из Инстаграма
01:53:05 Результат (скетч)

Ютуб: https://youtu.be/69HEeO6iIwc

Приходите к нам на занятия! Там мы разжёвываем всё в десять раз медленнее и последовательнее. Выпускники говорят, что начать гендизайнить не сложно, сложно остановиться и не сидеть с кодом до пяти утра. Поток начинается 24 октября.

setka.design

Гендизайн-стрим: повторяем красивые штуки

В это воскресенье, 8 октября, в 18:00 по Москве, мы проведём публичный созвон. Мы заранее соберём красивые генеративные картинки из инстаграма/тиктока/пинтереста/вотевер, а на созвоне Адам будет повторять эти штуки на p5.js с подробными объяснениями. Ваня будет задавать вопросы и помогать всем с высоты своей экспертизы.

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

Если вы уже знакомы с p5, этот созвон поможет развить самый сложный навык — как превращать идею в логический алгоритм. А если вы ещё не умеете программировать — приходите посмотреть, как у нас тут в гендизайне всё вообще устроено. Адам постарается рассказывать всё простым языком, не вдаваясь в технические подробности.

Планируем уложиться в полтора часа. Созвон будет в Телеграме или в Зуме — ещё не решили. Велкам!

Начните верстать за 10 минут

Самый тупой маркетинговый булщит. Начинать вещи обычно несложно. Чтобы начать фотографировать, нужно достать телефон и включить камеру. Чтобы начать заниматься дизайном, нужно зарегистрироваться в Фигме. «Начать программировать совсем не сложно!» — ну ясен хер; сложно продолжить программировать и стать в этом профессионалом.

(Простите, настроение сегодня такое :—)

Но начинать с чего-то надо. ↑ Это — кусочек первого занятия первого потока курса по веб-разработке. Аштиэмэль один-ноль-один. Начать верстать действительно можно за 10 минут, посмотрев это видео. А чтобы продолжить верстать (и программировать), приходите на живой поток, который начинается 30 октября.

На лендинге есть подробная информация, программа с наглядными примерами, фак и отзывы. Поток разделён на два модуля — отдельно про вёрстку, отдельно про джаваскрипт. Можно купить билет на любой модуль или на курс целиком (со скидкой). Цена на всё потихоньку растёт — если купить билеты впритык к началу занятий, будет примерно на 20% дороже, чем сейчас.

@gendesign_bot

ASCII-art

Эски-арт — это когда пиксели заменяются буквами. Причём эффект до безобразия простой: берём в правую руку картинку, в левую — строчку с символами — хбдщ — и готово. Записал видео про то, как сделать хбдщ.

Посмотрите, а если лень, просто залейте в редактор свою картинку, интересно, что получится

https://editor.p5js.org/illus0r/sketches/RDUMNduWg

Я пятнадцать лет не мог запомнить, как читается ASCII, пока не придумал запоминалку ass key

Динамический кегль

Пишем на JS скрипт, который автоматически подбирает размер шрифта в зависимости от доступного пространства.

Распространённая задача, которая пока что не решается гибко и хорошо чистым CSS-ом.

Сначала делаю решение в лоб, а потом рассказываю про очень простой и эффективный алгоритм под страшным названием «бинарный поиск».