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

Доклад 24 июня 2014

Transcript

1. sho.io/gd Презентация на вашем устройстве Image from 'The Snail on the Slope', by Vladimir Todorović, Processing
2. ДИЗАЙН: генеративный / вычислительный / алгоритмический • Что это? • Когда помогает? • Как взять в союзники?
3. Что обычно представляется при упоминании о генеративном дизайне?
4. «Какая-то модная архитектура» Гугл-картинки по запросам ‘computational design’
5. Или симуляция природных структур... Гугл-картинки по запросу ‘generative nature forms’
6. ...и форм, Гугл-картинки по запросу ‘generative nature forms’
7. ...текстуры и абстракщина. Flickr of Martin
8. Разбираться что же это такое и как применять будем на примерах
9. «Алгоритм» Вот урок о том, как рисовать прекрасные радиолярии в Иллюстраторе. 9
10. Пример красивый. Но что характерно. Мы видим алгоритм, пошаговую инструкцию. Если нужна немного другая радиолярия, путь приходится повторять заново. 10
11. Попробуем руками. Представим, что мы захотели нарисовать круглый стикер с волнистым краем. 11
12. Выбираем инструмент и модель: Иллюстратор Апиренс, скруглить звезду. 12
13. Видим, например, что нужно менять количество вершин и внутренний радиус. С выбранной связкой инструмент — модель придётся начинать с начала. 13
14. Попробуем сделать тоже самое в Нодбокс 3. Нодбокс 3 — комплекс для алгоритмической графики на основе блок-схем. Код писать не нужно, только расставлять кубы в нужном порядке и крутить параметры. 14
16. Создав цепь настраиваемых блоков в Нодбокс, мы построили инструмент рисования стикера. Файл с примером в формате Nodebox 3 16
17. Самое ценное здесь: • мгновенно видеть результат при изменении параметров, • видеть труднопредставимые заранее варианты решений, благодаря случайности 17
18. Новый инструмент уместно строить при большом объёме или часто сменяющихся данных и одинаковой схеме вывода. Цель — экономия времени на перестроения, дерутинизация 18
19. Дерутинизация
20. Иван Пухкал, Визовая статистика стран 2003—2012, Processing 20
21. Для регулярных отчётов, листовок с часто изменяющимися данными. График доходности робота CIT Arbitrage для рекламной брошюры 21
22. Аврора Визуализация изменения цены ценных бумаг, Nodebox 1 Интерфейс торгового терминала «Аврора», Андрей Шапиро и Дмитрий Тростин.
23. Графики строились в Нодбокс1
24. Данные брались с сайта alor.ru
25. Данные брались с сайта alor.ru
26. Эксперимент на трешовость цветов на реальных данных
27. Cистема водяных знаков на основе масок штампов, поворачиваемых на разные углы
28. Для графики и анимации
29. Генеративные смайлы, Процессинг Бесконечное число образов из произвольного шрифта и схемы «лица» г л а з а : 8 : | н о с ы : * · - — р т ы : { / ( ] } 29
31. Векторные спрайты прелоадер Аврора. Андрей Шапиро и Николай Аникеев, Nodebox 1 Score board #design1o1
32. А пусть индикатором ожидания при подгрузке данных будет Аврора Бореалис
33. Сделали мешами, узнали, что разработчикам нужно в СВГ, а он меш не поддерживает 33
34. Кроме того, эффект подошёл для диалога подтвердения запуска опасной команды Зорьку требовалось подкладывать под кнопку. 34
36. Афиша этого воркшопа 36
37. Суперформула — обощённая формула овала
39. Эта афиша сделана полностью в Nodebox 1. Никаких других графических редакторо. Исходный файл — 6 KB
40. перерыв
41. Исследования, инфографика
42. Фильмы на плоскости рейтинг—год, Процессинг Задача — проверить будет ли интересно выбирать «соседа» по расположению плоскости 42
43. Стало любопытно посмотреть как относительно общей картины выглядят фильмы разных жанров
44. Какое у нас самое длинное название фильма?
45. Прототип изучения пространства
46. Из спора о том, кому нужны эти параметры родилось исследование
47. Предполагали и обнаружили неравномерность распределения количества фильмов по степени их выгодности
48. Ритмограмма. «Набита» на iPad. Procoding
50. Из желания спеть песню родилось исследование нового способа представления текста ритмически сложных песен
51. Eirik Solheim, One year in one image
52. Новые инструменты
53. «Иногда ты не можешь найти то, что тебе нужно. Значит, ты еще это не создал. Настала твоя очередь». Майк Монтейро “ 53
54. Prototypo Прототип параметрического редактора шрифта Прототайпо, Процессинг В этом году разработчики набрали средства на Кикстартере и планируют к осени выпустить релиз редактора. 54
55. Питеронлайн. Инструмент для мудборда 55
56. Так что же это?
57. Попытаюсь дать своё определение ГД Подход к созданию артефактов культуры на основе вычислительных алгоритмов экономящий время, дарящий идеи и озарения в ходе игры с построенным инструментом. “ 57
58. За что я это люблю 1. Предпочитаю интеллектуальную рутину мышечной (но каллиграфия!) 2. Обожаю использовать случайность для поиска идей 58
59. Случайно слетевший интерлиньяж на веб-странице
60. Грязь траектории от перемещения объекта даёт шума для плаката. Sketch.app
61. Слипшийся после намокания сборник иллюстраций группы Алхимия
62. Слипшийся после намокания сборник иллюстраций группы Алхимия
63. Наше мышление инертно. Нужна помощь, сдвиг точки сборки. Замеченные случайности. Часто мука рассыпается красивее, чем мы её тщательно выложим. 63
64. Два пути • Идея → Модель/алгоритм → Исполнение • Эксперимент → Неожиданная идея 64
65. Что понадобится Любознательность и непреодолимая тяга Пригодятся • Основы логики • Математика: геометрия, тригонометрия, линейная алгебра • Основы информатики: пиксель, цветовые модели • Основы программирования: циклы, ветвление, структуры данных, ввод-вывод 65
66. Какие среды сейчас есть?
67. ИнДизайн • — Примеры работ воркшоп Typography and Automation Week • — Фреймворк Basil
68. Веб • Processing JS, • D3 • PaperJS exx Scriptographer для Illustrator 68
69. Веб: Песочницы • JS Fiddle • Dabblet • CodePen • другие... • Консоль разработчика в браузере 69
70. Самостоятельные • Процессинг (Java, JavaScript) • Нодбокс 3 (бокс-модель) • Нодбокс 1 (Python, only Mac OS X) • VVVV (бокс-модель) 70
71. Самостоятельные 2/2 • Resolume (бокс-модель) — генеративное видео • Madmapper (бокс-модель, Mac only) — инструмент проецирования • R, статистические вычисления и визуализация • Open Frameworks (C++) 71
72. перерыв
73. Практика
74. Знакомство с Nodebox Расщепление надписи на частицы 74
75. Nodebox. Инфографика Летняя температура в Челябинске. Цель — показать Южный Урал какой он есть. Данные из файла. 75
76. Знакомство с Процессинг Интерактивная кисть для быстрого рисования текстур. Кисть объём и, возможно цвет, которой изменяется при движении по холсту. 76
77. 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
78. Режим Tweak 78
79. Andrew@aShapiro.ru vk.com/ashapiro Спасибо! Большинство фоновых изображений сгенерированы Владимиром Тодоровичем