Это среднесрочное двухнедельное задание заключалось в том, чтобы разработать проект моделирования на основе того, что мы узнали за последние 6 недель. Я решил поработать над идеей, которую затронул в своем классе UX/UI, и сейчас работаю над курсом динамической веб-разработки.

Задний план

Я родом из России, и, на мой взгляд, в моей стране существует определенная проблема с тем, как те или иные данные или события преподносятся в СМИ. Точнее, они вообще не представлены или представлены так, что трудно сказать, достоверна информация или нет.

Я много думал о конкретной экологической проблеме, которая глубоко замалчивается в средствах массовой информации. В России есть места, которые стали, по сути, «маленькими Чернобылями», потому что годами используются как свалки отходов и/или химических отходов.

Эти места влияют на окружающую среду, воду, животных и людей вокруг них. Тем не менее информации о них в медиаландшафте почти НЕТ. Более того, исследуя эту тему, я понял, что экологические катастрофы замалчивались и во времена Советского Союза.

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

Для этого есть несколько чисто «художественных» причин.

  1. Я думаю, что работа над проектом о природе в рамках именно этого занятия (по моделированию природы на экране) могла бы привести к интересным результатам.
  2. Некоторые изображения этих чрезвычайно загрязненных и опасных «зон» выглядят удивительно красиво. Поработать над этим контрастом тоже было бы интересно.

3. Мне очень интересно изучать разные техники работы с пикселями, и я хотел бы изучить разные варианты смешивания техник частиц и техник рисования пикселей для одного проекта.

Проект

Для этого конкретного задания я выбрал работу Павла Отдельнова, художника, у которого недавно была выставка и фильм, посвященный проблеме, которую я описываю в этом посте. Я не мог пройти мимо этого изображения, которое уже пикселизировано и разбито на частицы.

«Эта фотография не была напечатана в газетах. Он был сделан с вертолета сразу после аварии на заводе «Капролактам», 12 февраля 1960 года. Утечка газа этилена вызвала взрыв, буквально разорвавший здание внутри. 24 человека погибли. Взрывная волна была такой силы, что даже в домах в 10 километрах от эпицентра были выбиты окна.

Однако СМИ не написали об инциденте ни строчки: разбирательство было секретным, а все сотрудники дали подписку о неразглашении. В день похорон кладбище было перекрыто охраной, а жертвы захоронены в разных его частях, чтобы не было скопления людей». "Источник"

Стоит отметить, что подобные трагедии вызывают экологические проблемы на месяцы, если не на годы вперед.

Процесс и эскизы

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

Что ж, это было грубо, потому что после просмотра учебника не менее 12 раз я не смог заставить его работать. После попытки исправить это самостоятельно и опроса более опытных друзей; связавшись с автором учебника (который очень помог), изменив функцию update() класса Particle{}, пытаясь загрузить разные изображения (которые должны были быть преобразованы в base64 - и это было проблемой, как я выяснил), я получил версию, которая меня устраивала.

КОД НА GITHUB

Однако, так как я не был до конца уверен, что разберусь с кодом выше, я сделал вторую версию своего скетча, которая сейчас является основной. Частицы здесь получают цвет от пикселей и отталкиваются от центра холста. Если нажать мышкой вы увидите дату трагического события на заводе (написано в русском формате). Здесь я использую поведение рулевого управления для имитации огня и тлеющих углей — я знаю, что это выглядит не очень естественно, однако мне нравится его художественный вид на данный момент.

КОД В ВЕБ-РЕДАКТОРЕ P5.JS

Наконец, я работал с поведением рулевого управления в еще одном скетче, также связанном с этим проектом. Я взял цитату Надежды Мандельштам — «Молчание есть настоящее преступление против человечества» и попытался смоделировать действие таких слов, как «помощь», «сочувствие», «правда», убегая от слова «молчание», которое в итоге остаться один на холсте. Эта часть все еще в процессе, вот где я приземлился на данный момент.

КОД В ВЕБ-РЕДАКТОРЕ P5.JS