Сетка — кодинг для дизайнеров
1.22K subscribers
118 photos
63 videos
1 file
82 links
Дизайнерам про разработку. https://setka.design

Делают @adam_arutyunov и @ivan_dianov.
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Генератор тетрис-поля

Написал скетч, который автоматически заполняет поле фигурками из тетриса. Размер фигурок можно регулировать, так что на самом деле, это не совсем тетрис — можно сделать пентис, гексис или даже гекатонис.

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

Можно играться с алгоритмом, и этого даже не нужно уметь программировать. Просто подставляйте любые числа справа от знака равенства в самом начале кода и нажимайте на кнопку старта — результат будет меняться :—).
12🔥3👾2
Сетка — кодинг для дизайнеров
Адам бросает вызов Ване Йойосо, Тбилиси. Коврик для ног. Сможешь нагенеративить что-то похожее?
Ваня бросает вызов Адаму

В аэропорту я подкрался и сфоткал чувака в такой вот кофте. Сделаешь паттерн кодом? :–)
😁104
Генератор тротуарной плитки

Первый раз в жизни использовал p5.js не просто для создания красивой графики, а для решения РЕАЛЬНЫХ задач из РЕАЛЬНОЙ жизни.

Ситуация — выбор тротуарной плитки для укладки вокруг загородного дома. Форму выбрали, но нужно подобрать цвета. Можно примерно смотреть на палитру в каталоге и представлять в голове результат, а можно ничего не представлять и за 15 минут запрограммировать визуализацию.

Написал скетч, который принимает объект из цветов и их пропорций (например, можно смешать одну часть белого, одну чёрного и две серого) и рисует плитку, распределяя цвета более или менее равномерно. Двигая цвета и их концентрации, выбрали идеальные пропорции для покрытия.

Кстати, открыта запись на курс генеративного дизайна. Начало 24 октября, сейчас билеты продаются со скидкой. Приходите — научитесь такие штуки на раз-два делать.
4🔥3
Динамический кегль

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

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

Сначала делаю решение в лоб, а потом рассказываю про очень простой и эффективный алгоритм под страшным названием «бинарный поиск».
10👍3🔥2
Media is too big
VIEW IN TELEGRAM
ASCII-art

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

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

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

Я пятнадцать лет не мог запомнить, как читается ASCII, пока не придумал запоминалку ass key
👍8🔥64
😁5🔥2🤯2
Media is too big
VIEW IN TELEGRAM
Начните верстать за 10 минут

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

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

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

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

@gendesign_bot
🔥63👏2🍓1
Гендизайн-стрим: повторяем красивые штуки

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

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

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

Планируем уложиться в полтора часа. Созвон будет в Телеграме или в Зуме — ещё не решили. Велкам!
17🔥3👍2🥰1👏1🎉1🤩1😍1
Media is too big
VIEW IN TELEGRAM
Запись гендизайн-стрима

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
🔥184👍2
Stranger in the Q

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

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

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

#генеративные_художники
14🔥8👍6