Трудно точно определить, что означает «творческое кодирование». В широком смысле, это относится к производству чего-то, что является выразительным по своей природе, а не имеет чисто практическое использование. Это шанс узнать и изучить, как различные технологии могут объединиться для создания впечатляющих произведений искусства.
Какая форма принимает, полностью зависит от создателя. Все, от визуализации данных до манипулирования изображениями, можно считать «креативным кодированием». Сеть достаточно гибкая, чтобы открывать возможности в различных областях искусства и дизайна.
Здесь мы рассмотрим различные способы экспериментов с кодом и создания стимулирующих визуальных результатов.
Содержание статьи
01. Идите прямо к фреймворкам
Если вы знакомы с кодом и хорошо представляете, что вы хотите создать, зачем ждать? Вот четыре лучших фреймворка для креативных программистов; сделайте свой выбор!
p5.js дает вам мощь и простоту использования обработки, но в Интернете
Обработка — это Святой Грааль для творческих программистов. Он предоставляет язык и среду разработки, позволяющую дизайнерам и нетехническим специалистам создавать потрясающие визуализации, не погружаясь в технические аспекты.
Библиотека p5.js берет принципы обработки и применяет их в Интернете. Он предоставляет те же виды абстракций, которые обеспечивают простоту для начинающих и дают мощный контроль экспертам.
Основная часть работы выполняется в рамках двух функций — одна управляет настройкой проекта, а другая обращается к странице. в цикле для жизни этого проекта. Библиотека предоставляет множество глобальных методов и переменных для обновления страницы в этих функциях. Например, вызов frameRate (60) позволяет p5.js выполнять сложную работу по поддержанию постоянных 60 кадров в секунду.
sketch.js — это легкий, но мощный способ начать работу с JavaScript
Взвешивание файла менее 5 Кб, sketch.js — это небольшая структура, которая помогает разработчикам приступить к работе с творческим JavaScript. Он достаточно легок для встраивания в любой веб-сайт, но вместе с тем предоставляет множество функций.
Можно подключиться к методам, которые реагируют на события в проектах. Хотя это включает в себя обычные обратные вызовы, такие как цикл анимации, sketch.js также открывает такие события, как ввод с клавиатуры и изменение размера окна.
Сенсорный ввод и ввод с помощью мыши обрабатываются одинаково, что делает все проекты сенсорными по умолчанию. В то время как возможно нацеливание на любой тип ввода отдельно, это избавляет от беспокойства, связанного с небольшими различиями между двумя типами событий. Он также может автоматически вычислять дельты между этими точками, чтобы упростить физические расчеты.
В D3 есть нечто большее, чем диаграммы и графики
]
Несмотря на то, что D3 долгое время была популярной библиотекой для создания графиков и диаграмм, это еще не все, на что она способна. Его подход, основанный на данных, делает его великолепным для создания привлекательных визуализаций — информационных или абстрактных. В сочетании с богатым источником данных, таким как Twitter API, это упрощает создание инфографики.
Управляя такими элементами DOM, как SVG, D3 будет работать с любыми активами, уже являющимися частью приложения. Он предоставляет структуру, вокруг которой они могут быть преобразованы для выделения или анимации на экране.
Существует множество способов доступа к D3 через другие библиотеки и интегрированные среды. Например, легко доступны специально созданные компоненты для React, директивы для Angular и плагины для большинства других интерфейсных сред.
С помощью three.js вы можете легко создавать сглаживание 3D-взаимодействия с использованием WebGL
Работа в 3D с WebGL может быть сложной в лучшем случае. Выяснение того, как шейдеры и перспективы камеры работают в таком широкомасштабном API, может отвлечь от творческих аспектов проекта и замедлить все.
С Three.js можно обойти эти хитрые аспекты и сосредоточиться на визуальных Это библиотека 3D JavaScript, которая работает с WebGL, чтобы легко создавать красивые плавные взаимодействия с минимальными усилиями.
Библиотека предоставляет множество встроенных методов для создания объектов на сцене. Все может быть изменено, как и любой другой объект JavaScript, и будет обновляться соответствующим образом. Сложные методы, такие как наложение текстур, предоставляются «из коробки» и, как правило, представляют собой лишь случай установки соответствующей опции для объекта.
02. Умничайте с источниками данных и API
Существует множество общедоступных данных, с которыми вы можете поиграть, чтобы сохранить ваш проект свежим; посмотрите, что вы можете сделать с этими источниками.
Платформа для разработчиков в Твиттере — это клад для творческих программистов
Twitter — это огромное количество информации. Люди обсуждают все мыслимые темы, публикуя фотографии и видео вместе со своими нефильтрованными реакциями в режиме реального времени. Это делает его золотой жилой для творческого проекта кодирования. Официальный API может возвращать твиты в нужном формате вместе с другими метаданными, открытыми для анализа. Затем эти данные можно визуализировать новыми и интересными способами.
API Twitter предоставляет четыре определенных «объекта», которые можно извлечь — твиты, пользователи, местоположения и объекты. Объекты содержат дополнительную информацию, связанную с этими объектами, включая хэштеги и медиа. Значения в этих объектах являются фиксированными и будут расширены только при расширении, что означает, что вы никогда не потеряете доступ.
Сами по твитам можно искать с помощью запроса к одной конечной точке. Эти поиски могут быть либо для строки, либо могут быть более описательными, например, для изображений или твитов с позитивным настроением.
Визуализация данных Twitter может стать отличным элементом связанного дизайна. Объединение нескольких точек данных, таких как местоположение и настроение, может создать проект, который также является информативным, например, графическое отображение твитов в реальном времени по теме со всего мира.
Хотя существует множество возможностей использовать выходные данные из Twitter, API также позволяет приложениям публиковать сообщения в Twitter. Они могут поступать из любого источника при условии, что он подключен к API.
Все конечные точки в API требуют некоторой аутентификации. Для большинства проектов это только ключ приложения, но аутентификация может быть сложной, когда выполняется вручную. К счастью, есть несколько пакетов, которые немного облегчают работу с Twitter API.
Модуль npm 'twitter' — это универсальная клиентская библиотека при работе через Node. Он поддерживает обычные конечные точки, а также потоковую передачу, что может быть полезно для проектов в реальном времени.
Instagram и Flickr
API социальных сетей могут обеспечить отличные API источник для визуализации данных и гибридных приложений
Проекты творческого кодирования часто бывают визуальными, что делает API-интерфейсы для обмена изображениями и видео привлекательной перспективой для вдохновения. К счастью, такие сайты, как Instagram и Flickr, открывают свои данные и предоставляют разработчикам доступ к этому контенту, а также к окружающим метаданным.
Instagram стал одной из самых популярных веб-платформ для обмена изображениями. В результате это богатый источник изображений для использования в творческих проектах. API не отличается. Он предоставляет доступ к изображениям, видео, комментариям и тегам, а также способам поиска в этой информации, чтобы найти то, что необходимо для проекта.
Доступ в API будет изначально ограничен небольшим пулом учетных записей. и изображения. Чтобы снять некоторые из этих ограничений, Instagram должен будет самостоятельно рассмотреть проект, который может быть трудоемким и бесполезным для проектов творческого кодирования. В зависимости от проекта может быть достаточно начального режима песочницы.
Flickr имеет более доступный API. Это ресурс высококачественных изображений, доступных в нескольких разрешениях. Многим конечным точкам фотографий требуется только ключ приложения для работы, что значительно упрощает настройку и выборку.
Конечная точка 'flickr.photos.search' является наиболее часто используемой и дает доступ к большей части содержимого Flickr. , При необходимости он может быть отфильтрован и отсортирован по дате, местоположению и даже лицензии. Другие конечные точки могут получить более подробную информацию о фотографии, например, комментарии или данные EXIF
Привести API к работе точно так, как это требуется проекту, может быть сложно, особенно если записывать информацию обратно во Flickr. К счастью, существует множество пакетов, помогающих использовать его с JavaScript, в том числе собственный flickr-sdk компании на npm.
Важно отметить, что все изображения остаются собственностью их владельцев. Для личных проектов это не будет проблемой, но если он будет распространяться, обязательно либо запросите разрешение, либо укажите владельца, в зависимости от условий, установленных фотографом.
Камера и микрофон
Emoji Wall by Kitasenju Design берет изображение с камеры и перерисовывает его, используя emoji в трехмерном пространстве
Сеть обычно ограничена указывать и щелкать мышью, но это не единственный способ ввода. Современные браузеры оснащены новыми API-интерфейсами для извлечения данных из различных внешних источников, включая камеры и микрофоны.
Создание проектов с визуальным восприятием — отличный способ вовлечь пользователей. Используя зрение в качестве входа для традиционной клавиатуры и мыши, пользователи могут взаимодействовать различными способами, такими как отслеживание лица или распознавание изображения. Поскольку большинство устройств теперь оснащены встроенной камерой, это уже не тот барьер, каким он когда-то был, и он отлично работает для Интернета.
Прослушивание пользователя также является прекрасной альтернативой ручному вводу. Распознавание голоса может управлять навигацией, или пользователи могут предоставлять свои собственные аудиосэмплы для использования в рамках своего опыта. Это также может служить альтернативой нажатию кнопки. Извлекая высоту тона и громкость, они затем могут быть сопоставлены с тем, что обычно представляет собой нажатие кнопки, которое может использоваться для управления всем, от цвета до движения.
Доступ к камере и микрофону возможен через объект навигатора .
navigator.mediaDevices.getUserMedia ({audio: true, video: {width: 640, height: 480}}) .then (функция (поток) {// Доступ к вводу}) .catch (function (error) {// Обеспечить альтернативный вариант});
Код должен точно указывать, что требуется от устройств ввода. Вызов getUserMedia () вызовет диалоговое окно разрешений, которое пользователь должен принять перед продолжением. После принятия эти функции становятся доступны в виде потоков, что делает их более эффективными с точки зрения памяти.
Все основные браузеры поддерживают этот API, включая мобильный. Если браузер не может соответствовать точным требованиям, обещание будет отклонено и не будет работать. Важно предоставить альтернативный опыт, такой как форма загрузки изображения, где доступ невозможен.
03. Датчики мобильных устройств
Brick Street View покажут, как будет выглядеть ваше текущее окружение, если они сделаны из LEGO
] Мир мобильных устройств предоставляет совершенно иной набор возможностей, когда речь заходит о креативном кодировании. Широкий выбор форм-факторов и датчиков, открытых для использования в браузере, может создать особый опыт.
Мобильные устройства — это почти исключительно сенсорные интерфейсы. Браузеры имеют возможность обнаруживать и отслеживать несколько касаний одновременно. Это означает, что проекты не должны управляться одной точкой, и ими можно манипулировать гораздо более интуитивным способом.
window.addEventListener ("touchstart", e => {e.preventDefault ( ); const touches = e.changedTouches;});
Во всех событиях касания для события используется свойство changeTouches. Он содержит ссылку на все точки касания, которые изменились в зависимости от типа события, а не на отдельное событие для каждой точки касания. Отслеживая их, можно наносить на карту жесты или рисовать прикосновением.
Акселерометры и гироскопы в основном используются для перехода из портретного в ландшафтный режим, но они также подходят для интерпретации. Различные методы взаимодействия могут быть созданы с использованием самого устройства в качестве механизма управления — будь то в определенных движениях координат или в большей степени основанных на жестах, таких как встряхивание.
window.addEventListener (" deviceorientation ", e => {console.log (e.gamma);}); window.addEventListener ("devicemotion", e => {console.log (e.acceleration);});
API предоставляют доступ к этой информации, но возвращаемые значения будут зависеть от браузера, так как они не все используют одну и ту же систему координат. Библиотеки, такие как p5.js, предоставляют специальные значения и хуки, такие как 'translationX' или 'deviceShaken ()', чтобы помочь абстрагироваться от различий.
Мобильные устройства также имеют возможность определять свое точное местоположение с помощью геолокации. Возможность получить точное местоположение устройства может открыть новые возможности и сделать работу более удобной.
navigator.geolocation. getCurrentPosition (pos => {console.log (pos.coords);});
Доступ обеспечивается через объект навигатора. Возвращаемое значение — это координаты устройства в широтном направлении, а также другие данные, такие как высота или скорость, если устройство поддерживает это. Браузеры будут использовать самый быстрый метод определения местоположения, например, IP-адрес. Тем не менее, это не всегда может быть наиболее точным.
Творческое объединение этих входных данных является ключом к созданию чего-то особенного. Например, используя расположение и ориентацию устройства для создания виртуального наблюдения за звездами.
04. Работа на нескольких экранах
Bubbles — проект, созданный для Google I / O 2017 — позволяет пользователям передавать пузыри между собой со всего мира
Настольные браузеры обеспечивают уверенность в том, что касается творческих проектов. Но, экспериментируя с различными дисплеями, пользователи могут получить более персонализированный подход, который работает для них.
Принципы адаптивного дизайна остаются в силе и для творческих проектов кодирования. Пользователи должны иметь возможность наслаждаться ими независимо от устройства, будь то настольное, мобильное или проецируемое на гигантский экран.
Эти различия также могут быть использованы для дальнейшего улучшения проекта. Используя медиа-запросы в CSS, мобильные пользователи могут получить опыт, адаптированный к меньшему портативному форм-фактору. Поскольку мобильными пользователями, как правило, являются всего лишь один человек, этим посетителям может быть предложено более персонализированное представление, например, о более крупной платформе.
Бумажные самолеты, разработанные компанией Active Theory, рекомендовали пользователям создавать виртуальные самолеты на своих телефонах. , Затем их можно «выбросить» и показать на настольной версии сайта. Там посетители могли наблюдать, как самолеты летают по всему миру, и видеть, откуда они прилетели.
Подобные взаимодействия можно упростить с помощью WebSockets. Связь между браузером и сервером основана на событиях, избегая необходимости опрашивать сервер, что часто может быть расточительным и приводить к задержкам. Такие проекты, как Socket.io, могут упростить настройку протоколов WebSocket.
Прямая связь между устройствами также может иметь мощный эффект, когда пользователи находятся в одной комнате. Например, проект Себа Ли-Делайла PixelPhones превратил толпу экранов в импровизированный дисплей. Как только все были подключены, все стали частью опыта.
WebRTC — это набор JavaScript API, который облегчает взаимодействие между браузерами в режиме реального времени. Для установки соединения требуется сервер, мультимедиа отправляется напрямую между браузерами, что делает взаимодействие быстрым и простым для создания. Теперь он поддерживается всеми основными браузерами как на настольном, так и на мобильном устройствах.
05. Самогенерирующее искусство
Небольшая мастерская Infinitown создает процедурный город, уникальный при каждом посещении
] Даже самые креативные проекты могут через некоторое время устареть. Элемент случайности может поддерживать актуальность каждый раз, когда запускается фрагмент кода. Хотя это может исходить от пользовательского ввода, может быть интересно посмотреть, какой код способен отключить, когда он выпущен из поводка.
Вместо определения того, каким будет вывод блока кода, определите набор правил, которым он должен следовать. Когда случайная начальная позиция определена, конечные результаты будут полностью меняться.
Игра жизни Конвея — отличное место для старта. В определенной сетке каждый квадрат может быть «включен» или «выключен» в зависимости от квадратов вокруг него. Окрашивая квадраты в зависимости от их состояния, он генерирует изображение. Повторение процесса несколько раз показывает, как группы квадратов мутируют с течением времени. Изменение правил, по которым они меняются, может существенно изменить результат.
Использование JavaScript с элементом
06. WebVR и Bluetooth
Создание виртуальной реальности с помощью такой инфраструктуры, как A-Frame, намного меньше похоже на тяжелую работу
] Хотя браузеры становятся все более функциональными и мощными с каждым днем, есть только так много, что может обеспечить один видовой экран. К счастью, браузеры также расширяются из браузера.
Виртуальная реальность способна погрузить зрителя способами, которые раньше были невозможны. WebVR — это открытая спецификация, которая предоставляет доступ к этим захватывающим мирам в массы через браузер. Это также помогает преодолеть разрыв между различными типами устройств, такими как Google Cardboard и HTC Vive.
Каркасы, такие как A-Frame, могут помочь обойти любые сложности, предоставляя готовые строительные блоки для виртуальной реальности. опыт. Так как они созданы для обеспечения высокой производительности и надежности, они позволяют создателю создавать удобные пользовательские возможности.
Bluetooth — это еще один вариант и возможность полностью отказаться от экрана. Микросхемы легко доступны и могут комбинироваться с различными устройствами вывода для воспроизведения звука и света — все это контролируется браузером через API Web Bluetooth. Интерфейс основан на обещаниях, что несколько облегчает асинхронную связь.
Поддержка браузеров меняется по мере развития этих технологий. WebVR в настоящее время поддерживается в различных штатах разработками Edge, Firefox и Chrome. В настоящее время поддержка Web Bluetooth поддерживается только в Chrome, но другие рассматривают ее.
Эта статья была первоначально опубликована в Web Designer, журнале по креативному веб-дизайну. Подписаться на веб-дизайнера можно здесь .
Статьи по теме:
Загрузка...
