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

Делают @adam_arutyunov и @ivan_dianov.
Download Telegram
Сетка — кодинг для дизайнеров pinned «Курс генеративного дизайна в новом формате Генеративный дизайн — это новое направление в области создания графики. Вместо того, чтобы делать дизайн вручную, можно описать творческую идею в виде кода, и программа сама сгенерирует множество разнообразных решений.…»
Сегодня источником вдохновения послужил футляр от очков.

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

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

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

То есть:

mySin(x) = sin(x + d1) + sin(2x + d2) + sin(3x + d3) + ...

Где d1, d2, ..., dN — случайные смещения по фазе (от 0 до 2π), они генерируются один раз в начале работы программы. Эта функция всё ещё периодическая с периодом 2π, но при этом ведёт себя достаточно непредсказуемо.

Наверное, за меня такое уже сто раз придумали, и это что-то типа ряда Фурье или чего-то там ещё, не знаю, я окончил 11 классов, не бейте. В любом случае получилось красиво, попробуйте.
6🔥3👍2
A. Michael Noll

Майкл Нолл — пионер цифрового компьютерного искусства, первые свои генеративные работы он написан на языке FORTRAN в 1962 году. В 1965 участвовал в одной из первых выставок компьютерного искусства в Германии вместе с Фридером Наке и Георгом Нисом.

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

#генеративные_художники
6🔥3
Подборка работ генеративного художника Ивана Дианова.

(Мне кажется, чувак шарит, надо позвать его в Сетку. Может, знает контакт кто-то?)

#генеративные_художники
😁17🔥8👏2👍1
Адам бросает вызов Ване

Йойосо, Тбилиси. Коврик для ног. Сможешь нагенеративить что-то похожее?
😁10🔥21
Channel name was changed to «Сетка — кодинг для дизайнеров»
Сетка — кодинг для дизайнеров
Адам бросает вызов Ване Йойосо, Тбилиси. Коврик для ног. Сможешь нагенеративить что-то похожее?
This media is not supported in your browser
VIEW IN TELEGRAM
Вызов принят и переработан в видосик. Вместе со мной к работе руку приложил именитый демосценер @jin_x.

Мало того, что всё работает, так ещё и код вышел крошечный.

Есть такая веселуха «кодгольф». Надо уместить программу в минимальное число символов, например, чтобы в твит влезла. Наша влезает.


vec2 u=FC.xy/r.y*2.,v=u;
u=abs(fract(u+t*.5)*2.-1.);
u=u*.66+.166;
ivec2 i=ivec2(u*3.);
if(i.x==i.y==(i.y==1))u=u.yx;
if(i.y*i.x==1)u*=rotate2D(.8);
vec3 c=cos(PI*(v.y/2.+vec3(0,.3,.6)));
o=vec4(1.-c*c*fract(u.x*10.),0);

Онлайн демка и код. Попробуйте какие-нибудь цифры поменять рандомно, обычно что-то прикольное получается.
10🔥3
Сетка — кодинг для дизайнеров
Вызов принят и переработан в видосик. Вместе со мной к работе руку приложил именитый демосценер @jin_x. Мало того, что всё работает, так ещё и код вышел крошечный. Есть такая веселуха «кодгольф». Надо уместить программу в минимальное число символов, например…
Ваня, а можешь рассказать, что это за страшное заклинание в середине поста?

Неужели это и есть программирование? Неужели мы учим этому? Можно ли программировать как-то попроще? С чего начать, чтобы не сойти с ума?
Сетка — кодинг для дизайнеров
Ваня, а можешь рассказать, что это за страшное заклинание в середине поста? Неужели это и есть программирование? Неужели мы учим этому? Можно ли программировать как-то попроще? С чего начать, чтобы не сойти с ума?
Этот код страшный и непонятный. Не читайте его. Я его запостил, только чтобы выглядеть поумнее.

Но суть простая: код выполняется каждый кадр анимации для каждого пикселя на экране. Зная координаты пикселя FC и время t код вычисляет цвет пикселя o. Видите в конце что-то вроде o=vec4(R,G,B,A)? Это и есть цвет.

Шейдерам мы учим на курсе по шейдерам, которого ещё нет :–) Чтобы я быстрее его делал, нажмите 💩
💩361
Сетка — кодинг для дизайнеров pinned «Этот код страшный и непонятный. Не читайте его. Я его запостил, только чтобы выглядеть поумнее. Но суть простая: код выполняется каждый кадр анимации для каждого пикселя на экране. Зная координаты пикселя FC и время t код вычисляет цвет пикселя o. Видите…»
🎉 День рождения Сетки

Сетке — один год.

Всё началось с того, что мы с Ваней провели модуль занятий в Парке Интуиции в августе прошлого года, а 8 сентября он написал мне:

«Привет, Адам! А хочешь со мной делать курс по генарту? Там будет модуль для новичков, которые JS не знают. А ты теорию клёво объясняешь».

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

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

Почему день рождения сегодня, если Ваня написал мне 8 сентября? Ну мы забыли просто. Вот милые фотки на память ↑.
12🎉5🔥4😁1