Генеративный дизайн

Slide 1

Slide 1 text

sho.io/gd Презентация на вашем устройстве Image from 'The Snail on the Slope', by Vladimir Todorović, Processing

Slide 2

Slide 2 text

ДИЗАЙН: генеративный / вычислительный / алгоритмический • Что это? • Когда помогает? • Как взять в союзники?

Slide 3

Slide 3 text

Что обычно представляется при упоминании о генеративном дизайне?

Slide 4

Slide 4 text

«Какая-то модная архитектура» Гугл-картинки по запросам ‘computational design’

Slide 5

Slide 5 text

Или симуляция природных структур... Гугл-картинки по запросу ‘generative nature forms’

Slide 6

Slide 6 text

...и форм, Гугл-картинки по запросу ‘generative nature forms’

Slide 7

Slide 7 text

...текстуры и абстракщина. Flickr of Martin

Slide 8

Slide 8 text

Разбираться что же это такое и как применять будем на примерах

Slide 9

Slide 9 text

«Алгоритм» Вот урок о том, как рисовать прекрасные радиолярии в Иллюстраторе. 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Попробуем руками. Представим, что мы захотели нарисовать круглый стикер с волнистым краем. 11

Slide 12

Slide 12 text

Выбираем инструмент и модель: Иллюстратор Апиренс, скруглить звезду. 12

Slide 13

Slide 13 text

Видим, например, что нужно менять количество вершин и внутренний радиус. С выбранной связкой инструмент — модель придётся начинать с начала. 13

Slide 14

Slide 14 text

Попробуем сделать тоже самое в Нодбокс 3. Нодбокс 3 — комплекс для алгоритмической графики на основе блок-схем. Код писать не нужно, только расставлять кубы в нужном порядке и крутить параметры. 14

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Создав цепь настраиваемых блоков в Нодбокс, мы построили инструмент рисования стикера. Файл с примером в формате Nodebox 3 16

Slide 17

Slide 17 text

Самое ценное здесь: • мгновенно видеть результат при изменении параметров, • видеть труднопредставимые заранее варианты решений, благодаря случайности 17

Slide 18

Slide 18 text

Новый инструмент уместно строить при большом объёме или часто сменяющихся данных и одинаковой схеме вывода. Цель — экономия времени на перестроения, дерутинизация 18

Slide 19

Slide 19 text

Дерутинизация

Slide 20

Slide 20 text

Иван Пухкал, Визовая статистика стран 2003—2012, Processing 20

Slide 21

Slide 21 text

Для регулярных отчётов, листовок с часто изменяющимися данными. График доходности робота CIT Arbitrage для рекламной брошюры 21

Slide 22

Slide 22 text

Аврора Визуализация изменения цены ценных бумаг, Nodebox 1 Интерфейс торгового терминала «Аврора», Андрей Шапиро и Дмитрий Тростин.

Slide 23

Slide 23 text

Графики строились в Нодбокс1

Slide 24

Slide 24 text

Данные брались с сайта alor.ru

Slide 25

Slide 25 text

Данные брались с сайта alor.ru

Slide 26

Slide 26 text

Эксперимент на трешовость цветов на реальных данных

Slide 27

Slide 27 text

Cистема водяных знаков на основе масок штампов, поворачиваемых на разные углы

Slide 28

Slide 28 text

Для графики и анимации

Slide 29

Slide 29 text

Генеративные смайлы, Процессинг Бесконечное число образов из произвольного шрифта и схемы «лица» г л а з а : 8 : | н о с ы : * · - — р т ы : { / ( ] } 29

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Векторные спрайты прелоадер Аврора. Андрей Шапиро и Николай Аникеев, Nodebox 1 Score board #design1o1

Slide 32

Slide 32 text

А пусть индикатором ожидания при подгрузке данных будет Аврора Бореалис

Slide 33

Slide 33 text

Сделали мешами, узнали, что разработчикам нужно в СВГ, а он меш не поддерживает 33

Slide 34

Slide 34 text

Кроме того, эффект подошёл для диалога подтвердения запуска опасной команды Зорьку требовалось подкладывать под кнопку. 34

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Афиша этого воркшопа 36

Slide 37

Slide 37 text

Суперформула — обощённая формула овала

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Эта афиша сделана полностью в Nodebox 1. Никаких других графических редакторо. Исходный файл — 6 KB

Slide 40

Slide 40 text

перерыв

Slide 41

Slide 41 text

Исследования, инфографика

Slide 42

Slide 42 text

Фильмы на плоскости рейтинг—год, Процессинг Задача — проверить будет ли интересно выбирать «соседа» по расположению плоскости 42

Slide 43

Slide 43 text

Стало любопытно посмотреть как относительно общей картины выглядят фильмы разных жанров

Slide 44

Slide 44 text

Какое у нас самое длинное название фильма?

Slide 45

Slide 45 text

Прототип изучения пространства

Slide 46

Slide 46 text

Из спора о том, кому нужны эти параметры родилось исследование

Slide 47

Slide 47 text

Предполагали и обнаружили неравномерность распределения количества фильмов по степени их выгодности

Slide 48

Slide 48 text

Ритмограмма. «Набита» на iPad. Procoding

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Из желания спеть песню родилось исследование нового способа представления текста ритмически сложных песен

Slide 51

Slide 51 text

Eirik Solheim, One year in one image

Slide 52

Slide 52 text

Новые инструменты

Slide 53

Slide 53 text

«Иногда ты не можешь найти то, что тебе нужно. Значит, ты еще это не создал. Настала твоя очередь». Майк Монтейро “ 53

Slide 54

Slide 54 text

Prototypo Прототип параметрического редактора шрифта Прототайпо, Процессинг В этом году разработчики набрали средства на Кикстартере и планируют к осени выпустить релиз редактора. 54

Slide 55

Slide 55 text

Питеронлайн. Инструмент для мудборда 55

Slide 56

Slide 56 text

Так что же это?

Slide 57

Slide 57 text

Попытаюсь дать своё определение ГД Подход к созданию артефактов культуры на основе вычислительных алгоритмов экономящий время, дарящий идеи и озарения в ходе игры с построенным инструментом. “ 57

Slide 58

Slide 58 text

За что я это люблю 1. Предпочитаю интеллектуальную рутину мышечной (но каллиграфия!) 2. Обожаю использовать случайность для поиска идей 58

Slide 59

Slide 59 text

Случайно слетевший интерлиньяж на веб-странице

Slide 60

Slide 60 text

Грязь траектории от перемещения объекта даёт шума для плаката. Sketch.app

Slide 61

Slide 61 text

Слипшийся после намокания сборник иллюстраций группы Алхимия

Slide 62

Slide 62 text

Слипшийся после намокания сборник иллюстраций группы Алхимия

Slide 63

Slide 63 text

Наше мышление инертно. Нужна помощь, сдвиг точки сборки. Замеченные случайности. Часто мука рассыпается красивее, чем мы её тщательно выложим. 63

Slide 64

Slide 64 text

Два пути • Идея → Модель/алгоритм → Исполнение • Эксперимент → Неожиданная идея 64

Slide 65

Slide 65 text

Что понадобится Любознательность и непреодолимая тяга Пригодятся • Основы логики • Математика: геометрия, тригонометрия, линейная алгебра • Основы информатики: пиксель, цветовые модели • Основы программирования: циклы, ветвление, структуры данных, ввод-вывод 65

Slide 66

Slide 66 text

Какие среды сейчас есть?

Slide 67

Slide 67 text

ИнДизайн • — Примеры работ воркшоп Typography and Automation Week • — Фреймворк Basil

Slide 68

Slide 68 text

Веб • Processing JS, • D3 • PaperJS exx Scriptographer для Illustrator 68

Slide 69

Slide 69 text

Веб: Песочницы • JS Fiddle • Dabblet • CodePen • другие... • Консоль разработчика в браузере 69

Slide 70

Slide 70 text

Самостоятельные • Процессинг (Java, JavaScript) • Нодбокс 3 (бокс-модель) • Нодбокс 1 (Python, only Mac OS X) • VVVV (бокс-модель) 70

Slide 71

Slide 71 text

Самостоятельные 2/2 • Resolume (бокс-модель) — генеративное видео • Madmapper (бокс-модель, Mac only) — инструмент проецирования • R, статистические вычисления и визуализация • Open Frameworks (C++) 71

Slide 72

Slide 72 text

перерыв

Slide 73

Slide 73 text

Практика

Slide 74

Slide 74 text

Знакомство с Nodebox Расщепление надписи на частицы 74

Slide 75

Slide 75 text

Nodebox. Инфографика Летняя температура в Челябинске. Цель — показать Южный Урал какой он есть. Данные из файла. 75

Slide 76

Slide 76 text

Знакомство с Процессинг Интерактивная кисть для быстрого рисования текстур. Кисть объём и, возможно цвет, которой изменяется при движении по холсту. 76

Slide 77

Slide 77 text

v o i d s e t u p ( ) { s i z e ( 6 0 0 , 6 0 0 ) ; / / ш и р и н а и в ы с о т а л и с т а b a c k g r o u n d ( 2 5 5 ) ; / / о ч и с т и т ь э к р а н б е л ы м n o S t r o k e ( ) ; / / б е з о б в о д к и f i l l ( 0 ) ; / / з а л и в а т ь ф о р м ы ч ё р н ы м } v o i d d r a w ( ) { } 77

Slide 78

Slide 78 text

Режим Tweak 78

Slide 79

Slide 79 text

Andrew@aShapiro.ru vk.com/ashapiro Спасибо! Большинство фоновых изображений сгенерированы Владимиром Тодоровичем