Алгоритмическая графика: история и технологии by Nina Moskaleva

/* Правительство Российской Федерации Федеральное Государственное Автономное Образовательное Учреждение Высшего Профессионального Образования Национальный Исследовательский Университет «Высшая Школа Экономики» Школа дизайна факультета коммуникаций, медиа и дизайна НИУ ВШЭ */

Выпускная квалификационная работа по направлению «Дизайн» студента группы No М18Д303 (образовательная программа «Дизайн») { Выпускная квалификационная работа на тему: { Проект на тему спокойствия } Визуальное исследование на тему: { Алгоритмическая графика: история и технологии } } // Автор: Москалева Нина Мерабовна // Рецензент: Бакина Татьяна Викторовна // Научный руководитель проекта: Мещеряков Арсений Владимирович // Кураторы: Якушев Иван Евгеньевич, Лашко Стефан Владимирович // 2019

АЛГОРИТМИЧЕСКАЯ ГРАФИКА: ИСТОРИЯ И ТЕХНОЛОГИИ

Концепция

История

Технологии

Статичная графика

Динамичная графика

125

Интерактивная графика

159

Интерфейс

159

Движение человека

189

Звук

217

Список иллюстраций

229

Список литературы

238

Исследование рассказывает об истории развития алгоритмической графики и различных технологиях, с помощью которых она создаётся. Алгоритмическая графика отличается от других графических техник тем, что в её основе лежит алгоритмическая повторяемость определённой структуры. Алгоритмом является набор заданных правил по которым производится решение задачи или совокупность инструкций, регламентирующих последовательность действий исполнителя необходимых для того, чтобы прийти к решению [2]. Часто в качестве исполнителя выступает компьютер, но понятие алгоритма не всегда связано с электронно-вычислительной техникой. Программирование в настоящее время является основным способом создания алгоритмической графики. Тема выбрана вследствие того, что в состав дипломного проекта автора исследования входит создание интерактивных изображений, написанных с помощью кода. В структуре исследования выделяются следующие разделы: «История», «Технологии», «Статичная графика», «Динамичная графика», «Интерактивная графика». В разделе «История» рассматриваются докомпьютерные примеры алгоритмической графики и первые графические эксперименты с помощью компьютеров от исламских узоров и опытов Макса Эрнста до художников-программистов 1960-х. Раздел «Технологии» знакомит с основными программами и языками программирования, с помощью которых создаётся современная алгоритмическая графика. Раздел «Статичная графика» состоит из работ, которые воспроизводятся в виде изображений на экранах устройств или наносятся на не цифровые носители и не имеют вариаций при отображении. Большая часть этих работ существует только в виртуальном пространстве и отображается на экранах интерфейсов. Также средства

ми воспроизведения кода могут стать программируемые устройства, например, такие как плоттер или автоматическая вязальная машинка. В разделе «Динамичная графика» собраны примеры работ, в которых появляется движение. Чаще всего такая графика документируется в видео или gif формате. За счёт усложнения алгоритмов появляется вариативность изображений, совокупность которых становится основой анимации. Раздел «Интерактивная графика» включает в себя проекты, где зритель взаимодействует с работой с помощью интерфейса (компьютера, экрана смартфона или иного устройства), с помощью движения (когда используются датчики, фиксирующие передвижение зрителей), звука (источником информации служит микрофон). Этот род графики используется в современном искусстве, становясь инсталляцией, в сфере развлечений, создавая пространство для игры или в рекламе, как метод привлечения внимания к продукту за счёт необычной для потребителя формы. Разделение на статичную, динамичную и интерактивную графику обусловлено тем, что в зависимости от типа графики существенно меняется восприятие её зрителем, степень его вовлечённости. Эти разделы, с одной стороны, не привязаны ко времени: в одном и том же разделе могут быть собраны работы из разных десятилетий, с другой стороны, показывают развитие графики от самой простой статичной до интерактивной, когда зритель становится соавтором графики, взаимодействуя с ней. При этом заметно, что часто усложнение технологий взаимодействия и воспроизведения приводят к упрощению графики. Исследование показало, что самые визуально интересные решения собраны в разделах со статичной и динамичной графикой. В разделах, связанных с интерактивной графикой, заметно повторение разными авторами одних и тех же визуальных ходов, более простые колористические решения. Возможно, это связано с тем, что интерактивная графика ещё развивается и с техническими ограничениями, накладываемыми устройствами, с помощью которых она воспроизводится. Анализ собранного материала, показал, что похожих визуальных решений можно добиться с использованием разных сред разработки. При этом большая часть рассматриваемых изображений создана, с помощью языка программирования Processing. Processing имеет большую теоретическую базу, постоянно дополняющуюся усилиями сообщества пользователей, поддерживается разными операционными системами и является лёгким в сравнении с другими языками. Возможно, этим объясняется его популярность среди медиахудожников и дизайнеров.

11_01_PR_2018 11_01

Manolo Gamboa Naon

Структура подписей изображений

12_

номер страницы

01_

номер иллюстрации на странице

PR_

название программы

2019

год создания

имя автора или название студии

Hiroshi Kawano

12_01_CS_1972

Hiroshi Kawano

Цветовая кодировка разделов

история технологии статичная графика динамичная графика интерактивная графика

Названия программ PR OF PY JS OP VV CS

Processing openFrameworks Python JavaScript Openrndr Vvvv Custom software

13_01_CS_1972

Hiroshi Kawano

Первые примеры алгоритмической графики появились задолго до изобретения компьютера. По мнению цифрового художника Романа Веростко, с использованием алгоритмов создавались исламские геометрические узоры, как и картины итальянского Ренессанса [3], в которых применялись математические методы, такие как линейная перспектива и пропорции. Кроме того, примерами ранней алгоритмической графики являются работы Макса Эрнста на основе Фигур Лиссажу.

15_01

Роспись в мечети Шейха Лютфуллы в Исфахане. Неизвестный автор, Иран 1564

https://commons.wikimedia. org/wiki/File:Isfahan_Lotfollah_mosque_ceiling_symmetric. jpg?uselang=ru

17_01

Роспись в мечети Шейха Лютфуллы в Исфахане. Неизвестный автор, Иран 1564

https://commons.wikimedia. org/wiki/File:Isfahan_Lotfollah_mosque_ceiling_symmetric. jpg?uselang=ru

18_01

Фигура Лиссажу. Макс Эрнст, 1942

https://howlingpixel.com/i-en/ Mathematics_and_art

Компьютерный этап алгоритмического искусства начинается с 1960-х годов. В это время первые компьютеры оказались доступными не только для учёных, но и для художников. Огромные машины, занимающие целые комнаты, впервые стали использоваться не для математических расчётов в передовых отраслях науки, а для создания цифрового искусства. Для вывода графической информации обычно использовались следующие средства: аналоговый дисплей, плоттер и осциллограф.

1 Осцилограмма — построенная с помощью осциллографа кривая, отражающая параметры какого-либо колебательного процесса [5]

Американец Бен Лапоски стал известен, благодаря своим работам в области алгоритмической графики. Его основными инструментами были осциллограф и фотоаппарат, с помощью которого он фиксировал на плёнке свои осциллограммы1.

19_01

Осцилограмма. Бен Лапоски, 1952-56

http://www.lookatme.ru/flow/ posts/art-radar/61042-tsifrovoe-iskusstvo-v-epohu-zarozhdeniya-kompyuterov

Другим первопроходцем в данной области является немец Герберт Франке. Один из основоположников создания электрических абстрактных образов подкреплял своё творчество и теоретическими работами в области алгоритмической графики.

20_01

8 Rasterbilder. Герберт Франке, 1973

https://digitalartmuseum.org/franke/franke53-73_0069.

21_01

Projektionen/Rotationen. Герберт Франке, 1970

https://digitalartmuseum.org/franke/franke53-73_0069.html

.html

22_01 22_01

Gaussian Quadratic — это 99 линий соединяющих сто точек, горизонтальные координаты которых расположены по закону нормального распределения Гаусса. Михаэл Нолл, 1963 http://www.lookatme.ru/flow/ posts/art-radar/61042-tsifrovoe-iskusstvo-v-epohu-zarozhdeniya-kompyuterov

Медиахудожники 1960-х годов зачастую были инженерами. Один из них, Михаэл Нолл, получил докторскую степень по электротехнике. Глубокие знания в области математики позволили ему создавать работы, в основе которых лежали различные формулы.

23_01

3-Dimensional Projection of a Rotating 4-Dimensional Hypercube, — трёхмерная проекция вращающегося четырёхмерного гиперкуба. Михаэл Нолл, 1962

https://digitalartarchive. siggraph.org/artwork/a-michael-noll-rotating-four-dimensional-hyperobject/

4_01

24_01

Black-and-White Structure (Circles). Зденек Сикора, 1968 http://spalterdigital.com/artworks/black-and-white-structure-circles/

Одним из первых, кто решил генерировать изображения, используя программирование, стал Зденек Сикора из Чехии. В 1964 году он сотрудничал с математиком Ярославом Блазеком, чтобы создать свои первые работы с помощью компьютера, которые начали привлекать всё большее внимание международного сообщества. К 1970-м годам в работах Сикора был разработан характерный способ выражения: создание группы переплетенных изогнутых линий. Каждый аспект композиции, от цвета до длины, толщины и направления линий, определялся компьютером; алгоритм устанавливал математическую точность и величину случайности.

Вера Молнар — художница венгерского происхождения, родившаяся в Будапеште в 1924 году. Она считается одним из пионеров цифрового алгоритмического искусства. Начав свою карьеру как художник-абстракционист, затем стала экспериментировать с вычислительной техникой, как частью своей практики и получила звание первой женщины-цифрового художника.

25_01

A la Recherche de Paul Klee. Вера Молнар, 1970

spalterdigital.com/artworks/223/

Художник-алгоритмист и исследователь искусства Лилиан Шварц работала в Bell Labs с 1968 года в течение более 34 лет. Она была первой, кто создал генеративную работу, приобретенную MoMA, и ей, как и ее сотруднику Кену Ноултону, часто приписывают то, что они были первыми, кто продемонстрировал мультипликационные работы в качестве изобразительного искусства.

26_01

Pixillation, кадры с фотопленки. Лилиан Шварц, 1970 https://www.artnome.com/ 26_01 news/2018/8/8/why-love-generative-art

27_01 27_01

AI Infinity. Джон Маеда, 1994

https://www.artnome.com/ news/2018/8/8/why-love-generative-art

Джон Маеда известен как бывший президент Школы Дизайна в Род-Айленде и как автор книги «Законы простоты». Маеда начинал как студент инженерного факультета в Массачусетском технологическом институте. Получив степень бакалавра и магистра в области инженерии в Массачусетском технологическом институте, затем Маеда получил степень доктора философии в области дизайна в Школе искусства и дизайна при университете Цукуба в Японии. Маеда вернулся в Массачусетский технологический институт и создала Группу эстетики и вычислений (ACG) в Медиа лаборатории. Хотя Маэда является опытным генеративным художником, вставляющимся в крупных музеях, его величайшим вкладом в генеративное искусство стало изобретение платформы для художников и дизайнеров для изучения программирования под названием «Design By Numbers».

В конце 90-х Маеда пригласила нескольких ярких художников-технологов-единомышленников в Медиа-лабораторию для работы над «Design By Numbers», включая Бена Фрая и Кейси Реаса . Фрай и Реас внедрили «Design By Numbers» Маеды в учебные классы по всему миру и в итоге создали собственную бесплатную платформу, которую можно было бы использовать за пределами университетов, доступную любому, кто интересуется обучением рисованию с помощью кода. Они назвали эту платформу «Processing».

28_01

Без названия. Кейси Реас, 2006

28_01

28 http://reas.com/p8_images1_p/

Processing сделал генеративное искусство доступным для всех. Больше не нужно дорогое оборудование, и что более важно, не нужно быть ученым, чтобы программировать и создавать произведения искусства. Язык, среда и сообщество с самого начала были тщательно проработаны, чтобы Processing был доступным для максимально широкой аудитории. Фрай и Реас работают над Processing в течение последних 17 лет, и он долгое время был предпочтительной платформой для самых известных цифровых художников. Processing является ключевым поворотным моментом в производстве и распространении алгоритмического искусства.

Основным способом создания алгоритмической графики является программирование. Такой вид программирования в среде дизайнеров и художников получил название «Creative coding» или «креативный/ творческий кодинг». Существует большое количество языков программирования. Их все можно разделить на три категории: текстовые (код представляет собой текстовый файл), визуальные (код собирается из готовых блоков как из конструктора), гибридные (в основе лежат готовые блоки, но можно добавить свой текстовый код). Как правило, визуальные и гибридные языки проще в освоении, но текстовые более гибкие и дают возможность получить более уникальный и близкий к задуманному результат. Для креативного кодинга могут использоваться любые, знакомые разработчику языки. Также существуют специально созданные для этого среды разработки. Такие как Max MSP, Pure Data, Processing, openFrameworks, OPENRNDR, TouchDesigner и vvvv. Max, также известный как Max / MSP / Jitter, является языком визуального программирования для музыки и мультимедиа. Он существует более тридцати лет. Он используется композиторами, исполнителями, дизайнерами программного обеспечения, исследователями и художниками для создания записей и инсталляций. Программа Max является модульной, с большим количеством подпрограмм, существующих как отдельные библиотеки. Pure Data — это язык визуального программирования, разработанный Миллером Пакеттом в 1990-х годах для создания интерактивных компьютерных музыкальных и мультимедийных произведений. JavaScript является одной из основных технологий Всемирной паутины . JavaScript поддерживает интерактивные веб-страницы и является неотъемлемой частью веб-приложений. Подавляющее боль

34 Processing

JavaScript

процесс создания алгоритмической графики с помощью компьютера

Pure Data

P5.JS

openFrameworks

программирование с помощью кода

** вид программирования, когда программа создаётся из комплекта готовых блоков

Max MSP

визуальное программирование**

Creative coding*

OPENRNDR

TouchDesigner

гибриды

Vvvv

шинство веб-сайтов используют его, и основные веб-браузеры имеют специальный механизм для выполнения этого языка. JavaScript не является специально созданным для создания алгоритмической графики, но на его основе создаются языки, широко применяемых в креативном кодинге, например Processing и P5.JS Processing — это гибкий язык для обучения программированию в контексте визуальных искусств. С 2001 года Processing продвигает технологическую грамотность в области визуальных искусств и визуальную грамотность в рамках технологий. Есть десятки тысяч студентов, художников, дизайнеров, исследователей и любителей, которые используют процессинг для обучения и создания прототипов. Анализируя, собранный во время исследования материал, можно заметить, что большинство работ, где известна среда разработки, созданы в Processing.

112_01 Processing

p5.js — это библиотека JavaScript для творческого кодирования с акцентом на то, чтобы сделать кодирование доступным для художников, дизайнеров, преподавателей, начинающих и всех остальных. p5.js является бесплатным и открытым исходным кодом. Используя метафору эскиза, p5.js обладает полным набором функций рисования. Скетчи, созданные на p5.js могут быть интегрированы в веб среду, использоваться с языком разметки веб страниц HTML5, работать с видео веб-камеры и звуком с микрофона.

openFrameworks — набор инструментов с открытым исходным кодом, разработанный для творческого программирования. OpenFrameworks написан на C ++ и построен на основе OpenGL. Эта среда разработки поддерживается Windows, MacOS, Linux, iOS, Android и Emscripten. PB_01 openFrameworks

OPENRNDR — это инструмент для создания инструментов. Это платформа с открытым исходным кодом для креативного кодирования, написанная на Kotlin для Java, которая упрощает написание интерактивного программного обеспечения в реальном времени. Он разработан как для создания прототипов, так и надежных и эффективных визуальных и интерактивных приложений.

210_01 OPENRNDR

TouchDesigner — это язык визуального программирования на основе блоков для создания интерактивного мультимедийного контента в реальном времени. Он используется художниками, программистами, дизайнерами программного обеспечения и исполнителями для создания спектаклей, инсталляций и медиа-работ.

224_01 vvvv

vvvv — это гибридная графическая/текстовая среда разработки предназначенная для программирования, совмещающего динамическую и интерактивную графику, видео и аудио данные в реальном времени. Работает под управлением Windows. vvvv использует визуальный интерфейс программирования для быстрого прототипирования и разработки.

41_01_CS_1972 41_01

Hiroshi Kawano http://dada.compart-bremen.de/

42_01_CS_1972

Hiroshi Kawano

42_01 http://dada.compart-bremen.de/

http://moussemagazine.it/johnmenick-ai-2-2016/

44_01_CS_1964

Michael Noll

http://moussemagazine.it/johnmenick-ai-2-2016/

45_01_CS_PD_1965

Michael Noll

46_01_PR_2018 46_01

Manolo Gamboa Naon https://www.behance.net/gallery/67371035/pppppdddd

Фигура Лиссажу, также называемая кривой Боудича, образуется при пересечении двух синусоидальных кривых, оси которых расположены под прямым углом друг к другу. Впервые изученные американским математиком Натаниэлем Боудичем в 1815 году, кривые были независимо исследованы французским математиком Жюлем-Антуаном Лиссажу в 1857–58. Лиссажу использовал узкий поток песка, льющийся из основания составного маятника, чтобы получить кривые [12].

Изображения на основе этого алгоритма 46_01_PR_2018https://ru.wikipedia.org/wiki/ %D0%A4%D0%B8%D0%B3%D1%83%D1%80 %D1%8B_%D0%9B%D0%B8%D1%81%D1%8 1%D0%B0%D0%B6%D1%83

49_01 49_01

Фигуры Лиссажу

https://www.erdavids.com/art/ cubo

50_01 50_01_PR_2019

Eric Davidson

51_01 51_01_PR_2019 https://www.erdavids.com/art/ cubo

Eric Davidson

https://www.erdavids.com/art/ circle-shadows

52_01 52_01_PR_2019

Eric Davidson

53_01 53_01_PR_2018 https://timrodenbroeker.de/ projects/the-bach-project/

Tim Rodendroeker

54_01_PR_2018 54_01

Tim Rodendroeker https://timrodenbroeker.de/ projects/the-bach-project/

56_01_CS_1973 56_01

http://spalterdigital.com/art-

57_01 58_01_CS_1973 â&#x2020;&#x2019; http://spalterdigital.com/artworks/untitled-36/

58_01_CS_1972

60_01 60_01_PR_2019

Eric Davidson

https://www.erdavids.com/art/ circle-shadows

62_01 62_01_PR_2018 https://timrodenbroeker.de/ projects/the-bach-project/

Tim Rodendroeker

63_01 63_01_PR_2018 https://timrodenbroeker.de/ projects/the-bach-project/

Tim Rodendroeker

64_01 64_01_PR_2018

Tim Rodendroeker https://timrodenbroeker.de/ projects/the-bach-project/

Марико Косака разработала программу Sweaterify, преобразующую изображения в узоры, которые можно вязать с помощью программируемой автоматической вязальной машинки

66_01_JS_2016 66_01

Mariko Kosaka

67_01_JS_2016 67_01

Mariko Kosaka https://twitter.com/kosamari

https://twitter.com/tylerxhobbs

68_01 68_01_PR_2019

Tyler Hobbs

https://twitter.com/tylerxhobbs

69_01 69_01_PR_2019

Tyler Hobbs

70_01_PR_2017 70_01

a. d. iovo https://www.flickr.com/photos/ iovo/37782989542

Шум Перлина — это тип градиентного шума, разработанный Кеном Перлином в 1983 году в результате его неудовлетворенности «машиноподобным» видом компьютерных изображений (CGI) того времени. В 1997 году Перлин был награжден премией Оскар за технические достижения за создание алгоритма [11]. Шум Перлина применяется для генерации эффектов огня, воды и облаков, пейзажей, органических текстур и других изображений. Алгоритм имеет псевдослучайный вид и при этом легко контролируем. Шум Перлина чаще всего реализуется в виде двух-, трехмерной или четырехмерной функции, но может быть определен для любого числа измерений. Реализация обычно включает три этапа: определение сетки со случайными векторами градиента, вычисление точечного произведения между векторами градиента расстояния и интерполяция между этими значениями.

Изображения на основе этого алгоритма 72_02_PR_2017 84_01_PR_2017 85_01_PR_2017 100_01_PR_2019 101_01_PR_2019

73_01

Шум Перлина

http://alerion.github.io/ lvivpy5-map/index.html

73_01

74_02_PR_2017 73_01

Manohar Vanga → https://sighack.com/post/ getting-creative-with-perlin-

74_01_PR_2017

Manohar Vanga

75 75_01

https://sighack.com/post/ getting-creative-with-perlin-

76_01_CS_2019 76_01

Sean Mullen https://twitter.com/srmullen

78_01_CS_2019 78_01

Sean Mullen https://twitter.com/srmullen

https://twitter.com/tylerxhobbs

80_01 80_01_PR_2019

Tyler Hobbs

https://twitter.com/tylerxhobbs

81_01 81_01_PR_2019

Tyler Hobbs

https://twitter.com/tylerxhobbs

82_01 82_01_PR_2019

Tyler Hobbs

83_01 83_01_PR_2019 https://twitter.com/tylerx-

Tyler Hobbs

84_01 84_01_PR_2017

Manohar Vanga https://sighack.com/post/ getting-creative-with-perlin-

85_01 85_02_PR_2017

Manohar Vanga https://sighack.com/post/ getting-creative-with-perlin-

87_01 87_01_PR_2019 https://twitter.com/tylerx-

Tyler Hobbs

88_02_PR_2019 https://twitter.com/tylerx-

Tyler Hobbs

90_01 90_01_PS_1996 https://maedastudio.com/morisawa-10-2016/

John Maeda

91_01 91_01_PS_1996 https://maedastudio.com/morisawa-10-2016/

John Maeda

92_01 92_01-07_PS_1996 https://maedastudio.com/mori-

John Maeda

Серия работ Джона Маеды 1996 года, переосмысливающая работу со шрифтом в цифровом пространстве. Удостоена золотого приза Tokyo Type Director’s Club и позднее включена в постоянную коллекцию Музея современного искусства в Нью-Йорке

94_01 94_01_PS_1996 https://maedastudio.com/morisawa-10-2016/

John Maeda

96_01 96_01_PR_2019

Manolo Gamboa Naon https://twitter.com/manoloidee

98_01 98_01_PR_2019

Manolo Gamboa Naon https://twitter.com/manoloidee

100_01 100_01_PR_2019

Manolo Gamboa Naon https://twitter.com/manoloidee

101_01 101_01_PR_2019

Manolo Gamboa Naon https://twitter.com/manoloidee

102_01_PR_2019

Manolo Gamboa Naon https://twitter.com/manoloidee

103

104_01_PR_2018

Manolo Gamboa Naon https://twitter.com/manoloidee

105_01_PR_2018

Manolo Gamboa Naon https://twitter.com/manoloidee

106

107_01_PR_2018

Manolo Gamboa Naon https://twitter.com/manoloidee

108_01_PR_2018

Manolo Gamboa Naon https://twitter.com/manoloidee

109_01 110_01_PR_2018

Manolo Gamboa Naon â&#x2020;&#x2019; https://twitter.com/manoloidee

112_01_PR_2018 112_01

Manolo Gamboa Naon https://twitter.com/manoloidee

113

http://reas.com/

114_01 114_01_PR_2005

Casey Reas

http://reas.com/

115_01 115_01_PR_2005

Casey Reas

116_01 116_01_PR_2005 http://reas.com/

Casey Reas

117

118_01 118_01_CS_PD_2018

Anders Hoff

119

Процесс рисования, с помощью программируемого плоттера

120_01 120_01_CS_PD_2018

Anders Hoff https://twitter.com/inconvergent

121_01 121_01_CS_PD_2018

Anders Hoff https://twitter.com/inconvergent

125_01_CS_2017

Joshua Davis

125_01

https://www.behance.net/josh-

126_01-09_PR_2017

Joshua Davis

126_01-09

https://www.behance.net/josh-

128_01_PR_2016

Joshua Davis â&#x2020;&#x2019;

127_01

https://www.behance.net/josh-

130_01-09_PR_2016

Joshua Davis

130_01-09

https://www.behance.net/josh-

131

Клеточные автоматы (Cellular Automata) — это вычислительные модели, которые обычно представлены сеткой со значениями (ячейками). Каждая ячейка в сетке развивается на основе своих соседей и некоторого правила. Клеточные автоматы широко используются в физике, химии и биологии для моделирования многих типов природных явлений: от рисунков на шкурах животных до бактериальных инфекций. Концепция клеточных автоматов была разработана в 1940-х годах Станиславом Уламом и Джоном фон Нейманом, когда они находились в Лос-Аламосской национальной лаборатории. В 1970-х годах «Игра жизни» Конвея, двумерный клеточный автомат, привела к интересу к ним, который расширился за пределы академических кругов и превратился в развлекательную математику после того, как он был популяризирован в Scientific American [6].

Изображения на основе этого алгоритма 128_01_PR_2016 130_01-09_PR_2016

132

133_01

Клеточный автомат

133_01

https://jeremykun.com/tag/cellular-automata/ 133

134_01 134_01_CS_2012

Matthew Biederman http://www.mbiederman.com/ Event-Horizon

135

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

136_01-04 136_01-04_CS_2012

Matthew Biederman http://www.mbiederman.com/ Event-Horizon

137_01 138_01_PR_2018 →

Manolo Gamboa Naon → https://twitter.com/manoloidee

140_01-08

Manolo Gamboa Naon â&#x2020;&#x2019; https://twitter.com/manoloidee

141

142_01-05 142_01-05_PR_2018

Manolo Gamboa Naon

https://twitter.com/manoloidee

143

144_01-09 144_01-09_PR_2018

Manolo Gamboa Naon

https://twitter.com/manoloidee

145

146_01-05

146_01-05_PR_2015

Lei Zou http://scholar.pku.edu.cn/ leizou/home

147

148_01-04 148_01-04_OF_2019

Zach Lieberman

https://twitter.com/zachlieberman

149

http://reas.com/

150_01-07 150_01-07_PR_2018

Casey Reas

151

http://reas.com/ 152_01-29 152_01-13_PR_2014

Casey Reas

153

154_01-05 154_01-05_PR_2017

Manolo Gamboa Naon

https://twitter.com/manoloidee

155

интерфейс

159_01 159_01_PR_2014 https://timrodenbroeker.de/ projects/la-luz-negra/

Tim Rodenbrรถker

160

Приложение для выставки «La Luz Negra» в «Современном центре Барселоны». Приложение позволяет посетителям создавать индивидуальные цветочные узоры на основе строгих правил оформления визуальной идентичности

161_01-12 161_01-08_PR_2018 https://timrodenbroeker.de/ projects/la-luz-negra/

Tim Rodenbröker

162_01-11_JS_2017 162_01-11

Google http://googlecreativelab. github.io/anypixel/

Дисплей в офисе Google, для которого использовали 5880 готовых кнопок со светодиодами внутри них в качестве пикселей

163

Кил Данжер считает, что будущее графического дизайна в проектировании инструментов, а не конструкций. Его работа Space Type Generator — серия генераторов шрифтов, которые позволяют создавать экспериментальные анимационные шрифты в браузере

164_01-07_JS_2019 164_01-07

Kiel Danger

https://www.itsnicethat.com/articles/ki mutschelknaus-space-type-generator-grap

ielph-

166_01_JS_2019 165_01

Kiel Danger â&#x2020;&#x2019; https://www.itsnicethat.com/articles/kielmutschelknaus-space-type-generator-graph-

168_01_CS_2016

Laurent Battheu http://battheulaurent.be/Giro. html

169

170_01-11_CS_2016 170_01-11

Laurent Battheu http://battheulaurent.be/Giro. html

Интерактивная инсталяция: поэма, реагирующая на прикосновения

171

Processing синхронизирован с Ableton Live для визуализации в реальном времени. При нажатии кнопок контроллера меняются фигуры и характер их движения

172_01-09_PR_2013

Tomash Ghzegovsky

172_01-09

https://www.youtube.

173

174_01-14_PR_2019

Steve Curtis

174_01-14

https://www.youtube.com/ watch?v=D8mP-nqLMb4

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

175

176_01-03_PR_2019 176_01-03

Steve Curtis https://www.youtube.com/ watch?v=D8mP-nqLMb4

177

Интерактивный сайт, где графика меняется, в зависимости от положения курсора мыши

178_01-06_PR_2019

Tim Rodenbröker

178_01-06

https://timrodenbroeker. github.io/reflect/

179

180_01_PR_2019

Tim Rodenbrรถker

180_01

https://timrodenbroeker. github.io/reflect/

181

182_01-06_PR_2009 182_01-06

everyware http://everyware.kr/home/portfolio/light-spray/

«Light Spray» — это интерактивная инсталляция, где зритель может рисовать на стене при помощи света. Прежде чем рисовать что-либо, люди должны встряхнуть устройство, как будто они рисуют баллончиком с краской. Эти устройства в форме аэрозольных баллончиков заряжаются при встряхивании. С помощью этого устройства люди могут распылять свет, который проецируется на стену, создавая «легкое граффити».

183

184_01-05_PR_2013 184_01-05

Aaron Sherwood https://www.designboom.com/ art/firewall/

185

движение

189_01-05_CS_2019

FACTORY FIFTEEN

189_01-05 https://www.behance.net/gal-

По заказу Nissan создана инсталяция E-Brush при взаимодействии с человеком. Датчики движения реагируют на присутствие зрителя, что позволяет создавать в рамках алгоритма в реальном времени случайную графику

190_01_CS_2019

FACTORY FIFTEEN

190_01

https://www.behance.net/gallery/79341981/E-Brush?track-

191

192_01-13_CS_2019 192_01-13

FACTORY FIFTEEN https://www.behance.net/gallery/79341981/E-Brush?track-

193

Интерактивная интерпретация логотипа, реагирующая на движение зрителя

https://www.instagram.com/p/ B5K9pzHgjBk/

194_01-05_CS_2018 194_01-05

Tool of North America

195

«Body Paint» в 2009 году экспонировалась в музее Виктории и Альберта как часть кураторской выставки Decode V & A

https://vimeo.com/3576457

196_01-16_CS_2009 196_01-16

Memo Akten

197

Art-i — это интерактивная инсталляция, представленная на Vivid Festival 2012 в Сиднее, Австралия. Art-i исследует подсознательные образы через цвет, форму и текстуру. Публике было предложено исследовать эти темы, рисуя цифровые холсты, используя движения тела и рук. В течение 18-дневного фестиваля, 94 часа и 46 минут взаимодействия привели к созданию 2843 произведений искусства.

198_01-06_CS_2012 198_01-06

Trent Brooks

199

Digital Forest — это интерактивная анимация, в которой растения и существа леса реагируют на присутствие и движение посетителей. Инсталляция Digital Forest была создана для Provinssi 2017, музыкального фестиваля, организованного летом в Сейняйоки, Финляндия.

200_01-07_CS_2017 200_01-07

Sofia Pusa

201

202_01-04_CS_2015 202_01-04

Charles Bail

https://www.behance. net/gallery/16967583/ Wall-of-Rain-10-Interactive-installation

203

«L’Origine du Monde» — это интерактивная инсталляция, навеянная биологией, микроорганизмами и клеточными автоматами. Изображение на полу меняется в зависимости от передвижения зрителей

204_01-10_CS_2019

Miguel Chevalier

204_01-10

https://www.digitalmeetsculture.net/article/pix-

205 205_01

https://www.digitalmeetsculture.net/article/pix-

206_01-10_CS_2019

Miguel Chevalier

206_01-10

https://www.digitalmeetsculture.net/article/pix-

207 207_01

https://www.digitalmeetsculture.net/article/pix-

Puppet Parade — это интерактивная инсталляция, которая позволяет детям использовать свои руки, чтобы управлять существами, которые спроецированы на стену перед ними

208_01-06_CS_2011 208_01-06

DESIGN I/O https://www.design-io.com/ projects/puppetparade

209

https://www.designboom.com/ design/typedynamics-by-jurriaan-schroferlust-12-24-2013/

210_01-10_OP_2014 210_01-10

LUST

Интерактивная работа студии LUST, которой было предложено переосмыслить наследие шрифтового дизайнера Юрриана Шрофера. Инсталляция реагирует на передвижение зрителей: абстрактная композиция при приближении к ней складывается в текст, который можно прочитать

211

С помощью камеры и датчиков движения создаётся пространство, в котором зритель может управлять природными явлениями, такими как снег, гроза и радуга

212_01-10_CS_2013

DESIGN I/O

212_01

https://newmediaarthistory. wordpress.com/2015/05/10/

213

звук

217_01_OF_2016 217_01

Andreas Refsgaard http://andreasrefsgaard.dk/ audio-reactive-graphics-exper-

218_01-10_OF_2016 218_01-10

Andreas Refsgaard

219 http://andreasrefsgaard.dk/ audio-reactive-graphics-exper-

220_01-16_CS_2014

220_01-16

Baran Gulesen https://www.youtube.com/ watch?v=ofo37AptB9Y

221

Инсталяция, в которой в зависимости от громкости звука изменяется цвет светодиодных полос

222_01-09_CS_2013 222_01-09

Artec3 https://vimeo.com/70172750

223

Графика инсталяции изменяется в зависимости от звука, улавливаемого подвешенными внутри пространства микрофонами

224_01-12_VV_2010

Quadrature

224_01-12

https://quadrature.co/work/ simple-audio-reactive-instal-

225

источник

дата

11_01*

https://twitter.com/manoloidee

25.11.2019

17_01

https://commons.wikimedia.org/wiki/ File:Isfahan_Lotfollah_mosque_ceiling_ symmetric.jpg?uselang=ru

25.11.2019

18_01

https://howlingpixel.com/i-en/Mathematics_and_art

25.11.2019

19_01

http://www.lookatme.ru/flow/posts/ art-radar/61042-tsifrovoe-iskusstvo-v-epohu-zarozhdeniya-kompyuterov

25.11.2019

20_01

https://digitalartmuseum.org/franke/ franke53-73_0069.html

04.12.2019

21_01

https://digitalartmuseum.org/franke/ franke53-73_0069.html

02.12.2019

22_01

http://www.lookatme.ru/flow/posts/ art-radar/61042-tsifrovoe-iskusstvo-v-epohu-zarozhdeniya-kompyuterov

10.11.2019

23_01

https://digitalartarchive.siggraph. org/artwork/a-michael-noll-rotating-four-dimensional-hyperobject/

08.12.2019

24_01

http://spalterdigital.com/artworks/ black-and-white-structure-circles/

08.12.2019

25_01

spalterdigital.com/artworks/223/

04.12.2019

26_01

https://www.artnome.com/news/2018/8/8/ why-love-generative-art

08.12.2019

27_01

https://www.artnome.com/news/2018/8/8/ why-love-generative-art

25.11.2019

28_01

http://reas.com/p8_images1_p/

08.12.2019

41_01

http://dada.compart-bremen.de/item/ artwork/1081

25.11.2019

42_01

http://dada.compart-bremen.de/item/ artwork/1081

08.12.2019

227

источник

дата

11_01*

https://twitter.com/manoloidee

25.11.2019

17_01

https://commons.wikimedia.org/wiki/ File:Isfahan_Lotfollah_mosque_ceiling_ symmetric.jpg?uselang=ru

25.11.2019

18_01

https://howlingpixel.com/i-en/Mathematics_and_art

25.11.2019

19_01

http://www.lookatme.ru/flow/posts/ art-radar/61042-tsifrovoe-iskusstvo-v-epohu-zarozhdeniya-kompyuterov

25.11.2019

20_01

https://digitalartmuseum.org/franke/ franke53-73_0069.html

04.12.2019

21_01

https://digitalartmuseum.org/franke/ franke53-73_0069.html

02.12.2019

22_01

http://www.lookatme.ru/flow/posts/ art-radar/61042-tsifrovoe-iskusstvo-v-epohu-zarozhdeniya-kompyuterov

10.11.2019

23_01

https://digitalartarchive.siggraph. org/artwork/a-michael-noll-rotating-four-dimensional-hyperobject/

08.12.2019

24_01

http://spalterdigital.com/artworks/ black-and-white-structure-circles/

08.12.2019

25_01

spalterdigital.com/artworks/223/

04.12.2019

26_01

https://www.artnome.com/news/2018/8/8/ why-love-generative-art

08.12.2019

27_01

https://www.artnome.com/news/2018/8/8/ why-love-generative-art

25.11.2019

28_01

http://reas.com/p8_images1_p/

08.12.2019

41_01

http://dada.compart-bremen.de/item/ artwork/1081

25.11.2019

42_01

http://dada.compart-bremen.de/item/ artwork/1081

08.12.2019

229

источник

дата

44_01

http://moussemagazine.it/john-menick -ai-2-2016/

08.12.2019

45_01

http://moussemagazine.it/john-menickai-2-2016/

08.12.2019

46_01

https://www.behance.net/gallery/67371035/pppppdddd

25.11.2019

49_01

https://ru.wikipedia.org/wiki/%D0%A4%D 0%B8%D0%B3%D1%83%D1%80%D1%8B_%D0%9B%D0 %B8%D1%81%D1%81%D0%B0%D0%B6%D1%83

25.11.2019

50_01

https://www.erdavids.com/art/cubo

04.12.2019

51_01

https://www.erdavids.com/art/cubo

25.11.2019

52_01

https://www.erdavids.com/art/circle-shadows

02.12.2019

53_01

https://timrodenbroeker.de/projects/ the-bach-project/

10.11.2019

54_01

https://timrodenbroeker.de/projects/ the-bach-project/

04.12.2019

56_01

http://spalterdigital.com/artworks/ les-cashiers-sesa-no-5-art-magazine/

10.11.2019

57_01

http://spalterdigital.com/artworks/untitled-36/

04.12.2019

60_01

https://www.erdavids.com/art/circle-shadows

10.11.2019

62_01

https://timrodenbroeker.de/projects/ the-bach-project/

04.12.2019

63_01

https://timrodenbroeker.de/projects/ the-bach-project/

04.12.2019

64_01

https://timrodenbroeker.de/projects/ the-bach-project/

04.12.2019

66_01

https://twitter.com/kosamari

02.12.2019

230

источник

дата

67_01

https://twitter.com/kosamari

10.11.2019

68_01

https://twitter.com/tylerxhobbs

04.12.2019

69_01

https://twitter.com/tylerxhobbs

10.11.2019

70_01

https://www.flickr.com/photos/ iovo/37782989542

04.12.2019

73_01

http://alerion.github.io/lvivpy5-map/ index.html

10.11.2019

73_01

https://sighack.com/post/getting-creative-with-perlin-noise-fields

10.11.2019

76_01

https://twitter.com/srmullen

10.11.2019

78_01

https://twitter.com/srmullen

10.11.2019

80_01

https://twitter.com/tylerxhobbs

10.11.2019

81_01

https://twitter.com/tylerxhobbs

10.11.2019

82_01

https://twitter.com/tylerxhobbs

10.11.2019

83_01

https://twitter.com/tylerxhobbs

10.11.2019

84_01

https://sighack.com/post/getting-creative-with-perlin-noise-fields

10.11.2019

85_01

https://sighack.com/post/getting-creative-with-perlin-noise-fields

10.11.2019

87_01

https://twitter.com/tylerxhobbs

10.11.2019

90_01

https://twitter.com/tylerxhobbs

10.11.2019

91_01

https://maedastudio.com/morisawa-10-2016/

10.11.2019

92_01

https://maedastudio.com/morisawa-10-2016/

10.11.2019

94_01

https://maedastudio.com/morisawa-10-2016/

10.11.2019

231

источник

дата

96_01

https://maedastudio.com/morisawa-10-2016/

10.11.2019

98_01

https://twitter.com/manoloidee

10.11.2019

100_01

https://twitter.com/manoloidee

10.11.2019

101_01

https://twitter.com/manoloidee

10.11.2019

102_01

https://twitter.com/manoloidee

10.11.2019

104_01

https://twitter.com/manoloidee

10.11.2019

105_01

https://twitter.com/manoloidee

10.11.2019

106_01

https://twitter.com/manoloidee

11.11.2019

107_01

https://twitter.com/manoloidee

11.11.2019

108_01

https://twitter.com/manoloidee

11.11.2019

109_01

https://twitter.com/manoloidee

11.11.2019

112_01

https://twitter.com/manoloidee

10.11.2019

114_01

http://reas.com/

10.11.2019

115_01

http://reas.com/

10.11.2019

116_01

http://reas.com/

10.11.2019

118_01

https://twitter.com/inconvergent

10.11.2019

120_01

https://twitter.com/inconvergent

10.11.2019

121_01

https://www.behance.net/joshuadavis

10.11.2019

125_01

https://www.behance.net/joshuadavis

08.11.2019

126_01- https://www.behance.net/joshuadavis 09

08.11.2019

https://www.behance.net/joshuadavis

27.11.2019

127_01

130_01- https://jeremykun.com/tag/ 09 cellular-automata/

232

27.11.2019

источник

дата

134_01

http://www.mbiederman.com/ Event-Horizon

05.11.2019

136_01- http://www.mbiederman.com/ 04 Event-Horizon

11.11.2019

137_01

https://twitter.com/manoloidee

10.11.2019

140_01- https://twitter.com/manoloidee 08

10.11.2019

142_01- https://twitter.com/manoloidee 05

15.11.2019

144_01- https://twitter.com/manoloidee 09

10.11.2019

146_01- http://scholar.pku.edu.cn/leizou/home 05

10.11.2019

148_01- https://twitter.com/zachlieberman 04

10.11.2019

150_01- http://reas.com/ 07

10.11.2019

152_01- http://reas.com/ 29

10.11.2019

154_01- https://twitter.com/manoloidee 05

15.11.2019

159_01

https://timrodenbroeker.de/ projects/la-luz-negra/

15.11.2019

161_01- https://timrodenbroeker.de/projects/ 12 la-luz-negra/

15.11.2019

162_01- http://googlecreativelab.github.io/ 11 anypixel/

15.11.2019

164_01- https://www.itsnicethat.com/articles/ 07 kiel-mutschelknaus-space-type-genera tor-graphic-design-digital-160519

15.11.2019

233

источник

дата

165_01

https://www.itsnicethat.com/articles/ kiel-mutschelknaus-space-type-genera tor-graphic-design-digital-160519

08.12.2019

168_01

http://battheulaurent.be/Giro.html

08.12.2019

170_01- http://battheulaurent.be/Giro.html 11

25.11.2019

172_01- https://www.youtube.com/ 09 watch?v=gWU7VIrzYlQ

25.11.2019

174_01- https://www.youtube.com/ 14 watch?v=D8mP-nqLMb4

04.12.2019

176_01- https://www.youtube.com/ 03 watch?v=D8mP-nqLMb4

25.11.2019

178_01- https://timrodenbroeker.github.io/ 06 reflect/

02.12.2019

https://timrodenbroeker.github.io/ reflect/

10.11.2019

180_01

182_01- http://everyware.kr/home/portfolio/ 06 light-spray/

04.12.2019

184_01- https://www.designboom.com/art/ 05 firewall/

10.11.2019

189_01- https://www.behance.net/gal05 lery/79341981/E-Brush?tracking_ source=best_of_behance

04.12.2019

https://www.behance.net/gallery/79341981/E-Brush?tracking_ source=best_of_behance

10.11.2019

192_01- https://www.behance.net/gal13 lery/79341981/E-Brush?tracking_ source=best_of_behance

04.12.2019

194_01- https://www.instagram.com/p/B5K9p 05 zHgjBk/

04.12.2019

196_01- https://vimeo.com/3576457 16

04.12.2019

190_01

234

источник

дата

198_01- https://www.behance.net/gal06 lery/4533145/Art-i-exploring-subliminal-imagery-2012

02.12.2019

200_01- https://www.sofiapusa.com/projects/ 07 provinssi-festival

10.11.2019

202_01- https://www.behance.net/gal04 lery/16967583/Wall-of-Rain-10-Interactive-installation

11.11.2019

204_01- https://www.digitalmeetsculture.net/ 10 article/pixels-noir-lumiere-new-digital-exhibition-by-miguel-chevalier/

10.11.2019

205_01

04.12.2019

https://www.digitalmeetsculture.net/ article/pixels-noir-lumiere-new-digital-exhibition-by-miguel-chevalier/

208_01- https://www.design-io.com/ 06 projects/puppetparade

25.11.2019

210_01- https://www.designboom.com/design/ 10 typedynamics-by-jurriaan-schroferlust-12-24-2013/

02.12.2019

212_01

https://newmediaarthistory.wordpress. com/2015/05/10/weather-worlds-children-weather-controlling-superpowers/

10.11.2019

217_01

http://andreasrefsgaard.dk/audio-reactive-graphics-experiments/

04.12.2019

218_01- http://andreasrefsgaard.dk/audio-reac10 tive-graphics-experiments/

10.11.2019

220_01- https://www.youtube.com/watch?v=o16 fo37AptB9Y

04.12.2019

222_01- https://vimeo.com/70172750 09

10.11.2019

224_01- https://quadrature.co/work/simple-au12 dio-reactive-installation/

04.12.2019

235

1. Лукичев, Р. Игра случая в истории искусства : генерируй то, генерируй это : [монография] - Санкт-Петербург : Алетейя : Историческая книга, 2017 2. Шауцукова Л.З. Информатика. Теория (с задачами и решениями): Информатика 10 - 11.— М.: Просвещение, 2000 3. Алгоритмическое искусство https://ru.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%8 0%D0%B8%D1%82%D0%BC%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0 %B5_%D0%B8%D1%81%D0%BA%D1%83%D1%81%D1%81%D1%82%D0%B2%D0%BE (30.11.2019) 4. Кейси Риас: софт как искусство https://habr.com/ru/post/405551/ (30.11.2019) 5. Осциллограмма https://ru.wiktionary.org/wiki/%D0%BE%D1%81%D1 %86%D0%B8%D0%BB%D0%BB%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0 %B0 (30.11.2019) 6. Цифровое искусство в эпоху зарождения компьютеров, 2009 http://www.lookatme.ru/flow/postsart-radar/61042-tsifrovoeiskusstvo-v-epohu-zarozhdeniya-kompyuterov (30.11.2019) 7. Franke W. Herbert. Computer Graphics-Computer Art, 1985 8. Lansdown John. Computers in Art, Design and Animation, 1989 9. Mealing Stuart. Computers and Art: Second Edition 2nd Edition, 2008 10. Budd Chris. Cellular automatahttps://plus.maths.org/content/ cellular-automata (30.11.2019) 11. Getting Creative with Perlin Noise Fields https:// sighack.com/post/getting-creative-with-perlin-noise-fields (30.11.2019) 12. Lissajous figure https://britannica.com/science/Lissajous-figure (30.11.2019) 13. Understanding Perlin Noise https://flafla2.github.io/2014/08/09/perlinnoise.html (30.11.2019)

237

239