Зачем, как, когда применять алгоритмическую графику в вебе, интерфейсах и графдизайне.

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. Суперформула — обощённая формула овала

38. 38

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. void setup() {
size(600, 600); // ширина и высота листа
background(255); // очистить экран белым
noStroke(); // без обводки
fill(0); // заливать формы чёрным
}
void draw() {
}
77

78. Режим Tweak
78

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