Программирование и мемы

Программирование — процесс на грани науки и творчества. Без грамотно составленной программы компьютер — беспомощный агрегат, тратящий электроэнергию. Большинство современных специалистов работают с декларативными символьными языками — составляют программы из текстовых команд: простых — присваивание, умножение; и сложных — проверка условия, выполнения подпрограммы в цикле.

Но не все языки программирования предназначены для решения системных задач. Некоторые создаются в целях обучения, проведения презентаций и цифровых шоу. Когда производительность и функциональность отходят на второй план, на свет появляются такие оригинальные решения, как среда визуального программирования Pure Data.

В 2020-ом году танец из архивного видео похоронной церемонии агентства Dada awu из Ганы стал самым популярным мемом в России. Сегодня нам предстоит пошагово воссоздать легендарную музыкальную тему Coffin Dance, используя среду алгоритмического описания звука Pure Data.

Статья изначально возникла в двухпоточном, как бы полосатом варианте. Как мог, попытался воспроизвести оригинальную верстку тут. В общем то, что отчеркнуто — это практичная полоса. Итак…

Видимые вычисления

или… О пользе бесполезного

Люди спорят.
Люди любят спорить.
Они спорят об искусстве, еде, фильмах, работе, предметах, явлениях, людях и о том, как лучше спорить.
Если не с кем поспорить снаружи, спорят с тем, кто внутри.

Есть люди, которые не спорят, которые молчат… Это временно. Это люди под впечатлением. Потом, как очухаются, они найдут привычные точки опоры для критики, они снова заспорят. То, о чем люди молчат — недолговечно, но только как акт чистого восприятия. Оно не исчезает. Будут другие, будут молчать, будут потом говорить…

Однажды фронтендеру позвонил дизайнер и попросил сделать «паутинку» за запотевшим стеклом. Но потом оказалось, что это не «паутинка», а гексагональная сетка, и не за стеклом, а она уходит вдаль, и с WebGL фронтендер не знаком, а всей анимации пришлось учиться в процессе рисования. Тем фронтендером был Юрий Артюх (akella).



Юрий давно занимается версткой, а по воскресеньям записывает стримы с разбором реальных проектов. Он не профи в WebGL, не делает на нем карты, не пишет на Web-ассемблере, но ему нравится учиться чему-то новому. На FrontendConf РИТ++ Юрий рассказал, как провести одну анимацию от макета до сдачи клиенту так, чтобы все были довольны, и по дороге изучить WebGL. История идет от первого лица и включает в себя: Three.js, GLSL, Canvas 2D, графы и немного математики.

Вот в этом комменте я похвастался, что в своё время написал программу, создающую рендер «пристойно выглядящего» леса в двести строк кода. К сожалению, реальность оказалась немного большей по размеру — раскопанные исходники содержат примерно 2100 строк кода, из которых где-то 700 — комментарии, мысли вслух, старый отброшенный код и попытки документации методов. Размер исполняемого файла SWF, впрочем, оказался 13112 байт.

Началось всё с того, что на форуме Kongregate.com, где я в то время активно тусил, один из участников предложил посостязаться в процедурной генерации чего-либо, первой темой стал «Лес».

Generative art (генеративное или процедуральное искусство) может отпугнуть, если вы никогда с ним раньше не сталкивались. Если коротко, то это концепция искусства, которое буквально создает само себя и не требует хардкорных знаний программирования для первого раза. Поэтому я решил немного разбавить нашу ленту, погнали.

Я уже более 5 лет являюсь фронт енд разработчиком и всегда пытаюсь быть в курсе всех новостей. Помню что два года назад я заинтересовался графикой в JavaScript. И тут за пару месяцев я начал делать исследование про графику в JavaScript, так как у меня был тогда проект на D3.js. Во первых я начал изучать Canvas и SVG что является частью HTML5 но тоже нужно писать код в JS, например у меня проект был кустомизировать дорогие часы на Canvas. Следующий проект с графикой был с D3.js он был довольно прост, там нужно было на базе данных всех продаж компании показать графики в D3.js. Последний мои проект на базе гафики будет на p5.js и я решил узнать всё про него, и в этой публикации я хочу поделится своим исследованием про этот p5.js.

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

Processing был создан в 2001 году с целью обучить программированию непрограммистов, но с тех пор он стал основным языком для десятков тысяч художников и дизайнеров. P5.js делает рендеринг файлов PDE с исходным кодом Processing. При использовании этой библиотеки программист может вообще не знать JavaScript. Детально об отличиях Processing и p5 можно почитать в этой статье.

Для рендеринга используется canvas, а также p5.js поддерживает работу со звуком и видео. P5.js включает в себя совокупность обьектов, функций, констант с помощью которых можно создавать произвольные формы. Весь ряд возможностей p5.js можно найти в справочнике на официальном сайте.