Интересное руководство по программированию обработки для дизайнера - загрузка носителя и событие: 13 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:53

Обработка может быть загружена большим количеством внешних данных, среди которых очень часто используются три типа. Это изображение, аудио и видео отдельно.

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

Шаг 1. Прочтите изображение

Прежде чем мы начнем, давайте вернемся к способу загрузки изображений.

Шаг 2. Функции, связанные с изображениями

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

Не забудьте сохранить источники изображений в файле данных перед запуском вашей программы.

Шаг 3. Загрузка музыки, воспроизведение и остановка

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

Пример кода (10-1):

[cceN_cpp theme = "dawn"] импорт processing.sound. *;

SoundFile звук;

void setup () {

размер (640, 360);

фон (255);

звук = новый звуковой файл (это "1.mp3");

}

void draw () {

}

void keyPressed () {

// Воспроизвести звук

if (key == 'p') {

sound.play ();

}

// Остановить звук

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Подготовка:

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

Добавить библиотеку в Processing. Вот обычная практика. Выберите в строке меню «Инструмент» - «Добавить инструмент», а затем перейдите к «Библиотеки». Введите ключевые слова библиотеки в столбец поиска, чтобы вы могли скачать и установить ее напрямую.

Однако, если мы используем эту функцию в нашей стране (в Китае), мы не сможем загрузить ее, подключившись напрямую к Интернету. Нам нужно запустить VPN. Даже если мы его запустим, будут нестабильные условия. Так что вам нужно набраться терпения, чтобы попробовать это несколько раз. Это наиболее удобный способ загрузки. Если не получается установить, придется скачать с официального сайта вручную. (https://processing.org/reference/libraries/) Поскольку метод ручной установки очень сложен, мы обсудим его более подробно в другой главе.

Код Exaplain:

Звуковая библиотека может работать нормально после завершения подготовки. Выполните приведенный выше код, нажмите RUN, и он будет работать. Нажмите кнопку «P», чтобы воспроизвести музыку, «S», чтобы остановить музыку.

Если он используется в программе, нам нужно сначала загрузить его. Вначале мы должны добавить предложение «import processing.sound. *». "импорт" - ключевое слово, буквально означающее "загрузка". Добавьте имя библиотеки после слова «import», тогда библиотека загрузится. Хвост обычно следует за знаком «*», поэтому он загружает в программу все классы, связанные с библиотекой, без необходимости добавлять их по одному вручную.

Во втором предложении «SoundFile sound;» объявлен аудиообъект. SoundFile похож на PImage.

В настройке функции "sound = new SoundFile (this," 1.mp3 ");" используется для создания объекта и определения пути его чтения. Здесь мы фактически уже начали использовать новую концепцию Class. Сейчас мы не обсуждаем это глубоко. Нам нужно только знать, что это фиксированный метод записи, а последний параметр предназначен для заполнения адреса источника музыки.

Среди событий keyPressed () «sound.play ()» и «sound.stop ()» относительно работают как эффект воспроизведения и остановки. "." в середине указывает функцию-член, воспроизведение и остановка которой принадлежит аудиообъектам. Мы можем рассматривать функцию-член как функцию, включенную в объект. Он принадлежит этому объекту, который определен заранее. Позже, когда нам нужно воспроизвести несколько аудиообъектов, нам нужно только добавить «.play ()» после имени относительной переменной.

Источники звука должны храниться в файле данных в том же каталоге скетч-файла (с суффиксом pde). Если его нет, вы можете создать его вручную.

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

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

Обработка поддерживает распространенные аудиоформаты, такие как mp3, wav, ogg и т. Д.

Шаг 4: регулировка скорости музыки

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

Видео-сайт:

Пример кода (10-2):

[cceN_cpp theme = "dawn"] импорт processing.sound. *;

SoundFile звук;

void setup () {

размер (640, 360);

фон (255);

звук = новый звуковой файл (это "1.mp3");

}

void draw () {

скорость float = mouseX / (float) width * 3;

sound.rate (скорость);

float vol = mouseY / (float) height * 4;

звук. усилитель (объем);

}

void keyPressed () {

// Воспроизвести звук

if (key == 'p') {

sound.play ();

}

// Остановить звук

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Объяснение кода:

Функция.rate () контролирует скорость воспроизведения звука. Значение в скобках определяет быструю и медленную скорость воспроизведения. Когда значение равно 1, скорость воспроизведения нормальная. Когда он больше 1, то разгонитесь; пока он ниже 1, затем снизьте скорость.

Функция.amp () регулирует громкость звука. Значение в скобках определяет значение громкости. Когда он равен 1, значение громкости нормальное. Когда он больше 1, увеличьте громкость; пока он меньше 1, уменьшите громкость.

Здесь мы создали две локальные переменные speed и vol в качестве параметров для загрузки. Поэтому горизонтальная координата мыши изменит музыкальный тон, а вертикальная координата изменит громкость музыки.

Шаг 5: воспроизведение и остановка видео

В обработке загрузка видео аналогична загрузке аудио. Сначала вам нужно скачать видеотеку. (https://processing.org/reference/libraries/video/index.html)

Пример кода (10-3):

[cceN_cpp theme = "dawn"] импорт processing.video. *;

Movie mov;

void setup () {

размер (640, 360);

фон (0);

mov = новый фильм (это, "1.mov");

}

void movieEvent (Фильм, фильм) {

mov.read ();

}

void draw () {

изображение (mov, 0, 0, 640, 360);

}

void keyPressed () {

if (key == 'p') {

mov.play ();

}

if (key == 's') {

mov.stop ();

}

if (key == 'd') {

mov.pause ();

}

} [/cceN_cpp]

Скриншот видео:

Объяснение кода:

Первое предложение «import processing.video. *;» Используется для загрузки видеотеки.

Второе предложение «Movie mov;» используется для объявления видеообъекта. Среди них функция «Фильм» аналогична PImage.

В настройке функции эффект "mov = new Movie (this," 1.mov ");" заключается в создании объекта и определении пути его чтения. Последний параметр должен быть заполнен адресом видеоисточника.

Behine setup, movieEvent представляет видео событие. Он используется для обновления и чтения видеоинформации. "mov.read ()" в событии означает чтение.

Кроме отображения изображений, функция изображения также может отображать видео. Мы можем рассматривать видеообъект как динамическую картинку. Первым параметром мы заполняем имя переменной видеообъекта. Второй и третий параметры - это координаты по горизонтали и вертикали, нарисованные видео. Четвертый и пятый параметры определяют длину и ширину видеодисплея.

Функция.play () означает игру. Функция.stop () означает остановку и сбросит видео. Функция.pause () означает паузу. Это прервет текущее воспроизведение, которое будет продолжаться до тех пор, пока не будет вызвана функция.play ().

Шаг 6: Контроль скорости видео

Пример кода (10-4):

[cceN_cpp theme = "dawn"] импорт processing.video. *;

Movie mov;

void setup () {

размер (640, 360);

фон (0);

mov = новый фильм (это, "transit.mov");

}

void movieEvent (Фильм, фильм) {

mov.read ();

}

void draw () {

изображение (mov, 0, 0, ширина, высота);

float newSpeed = mouseX / (float) width * 4;

mov.speed (newSpeed);

}

void keyPressed () {

if (key == 'p') {

mov.play ();

}

if (key == 's') {

mov.stop ();

}

if (key == 'd') {

mov.pause ();

}

}

[/cceN_cpp]

Объяснение кода:

Функция.speed () может использоваться для управления скоростью воспроизведения видео. Когда значение параметра равно 1, скорость воспроизведения нормальная. Когда значение больше 1, то разгонитесь; пока он ниже 1, затем уменьшите скорость.

Поскольку мы создали локальную переменную newSpeed и импортировали ее в функцию setSpeed (), координата мыши будет напрямую влиять на скорость воспроизведения видео.

Что касается дополнительных примеров видео, вы можете обратиться к Библиотекам - Видео в библиотеке кейсов.

Шаг 7: Обработка общих событий

Ранее мы ввели только событие keyPressed (). Он сработает после нажатия на клавиатуру. Далее мы познакомим вас с другими распространенными событиями в обработке.

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

Поток событий

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

Пример кода (10-5):

[cceN_cpp theme = "dawn"] void setup () {

frameRate (2);

println (1);

}

void draw () {

println (2);

}

void mousePressed () {

println (3);

}

void mouseMoved () {

println (4);

}

void mouseReleased () {

println (5);

}

void keyPressed () {

println (6);

}

void keyReleased () {

println (7);

} [/cceN_cpp]

Объяснение кода:

При настройке функции функция frameRate () установила скорость работы программы равной 2 кадрам в секунду. Снижение частоты кадров может помочь нам наблюдать за выводом в консоли в случае, если инициированные события будут немедленно смещены новыми данными на задний план.

Попробуйте переместить мышь, щелкнуть мышью, отпустить ее и наблюдать результат вывода. Узнайте порядок выполнения событий через println.

На что стоит обратить внимание, так это то, что функции рисования не могут быть записаны в другие события, кроме функции draw, или они не могут отображаться. Если мы хотим управлять скрытием и отображением графических компонентов с помощью таких событий, как keyPressed, мы можем рассмотреть возможность создания переменной типа bool как medium.

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

Шаг 8: Комплексный пример - Музыкальная клавиатура

Комбинируя с недавно обнаруженными событиями, мы можем добавлять новые взаимодействия в нашу программу. Затем, всего за несколько минут, мы можем легко создать аналог музыкальной клавиатуры.

Видео-сайт:

Пример кода (10-6):

[cceN_cpp theme = "dawn"] импорт processing.sound. *;

SoundFile звук1, звук2, звук3, звук4, звук5;

логический ключ1, ключ2, ключ3, ключ4, ключ5;

void setup () {

размер (640, 360);

фон (255);

noStroke ();

sound1 = новый звуковой файл (это, "do.wav");

sound2 = новый звуковой файл (это, "re.wav");

sound3 = новый звуковой файл (это "mi.wav");

sound4 = новый звуковой файл (это, "fa.wav");

sound5 = новый звуковой файл (это, "so.wav");

}

void draw () {

фон (255, 214, 79);

rectMode (ЦЕНТР);

поплавок w = ширина * 0,1;

поплавок h = высота * 0,8;

if (key1) {

заполнить (255);

} еще {

заполнить (238, 145, 117);

}

прямоугольник (ширина / 6, высота / 2, ширина, высота);

if (key2) {

заполнить (255);

} еще {

заполнить (246, 96, 100);

}

прямоугольник (ширина / 6 * 2, высота / 2, ширина, высота);

if (key3) {

заполнить (255);

} еще {

заполнить (214, 86, 113);

}

прямоугольник (ширина / 6 * 3, высота / 2, ширина, высота);

if (key4) {

заполнить (255);

} еще {

заполнить (124, 60, 131);

}

прямоугольник (ширина / 6 * 4, высота / 2, ширина, высота);

if (key5) {

заполнить (255);

} еще {

заполнить (107, 27, 157);

}

прямоугольник (ширина / 6 * 5, высота / 2, ширина, высота);

}

void keyPressed () {

if (key == 'a') {

sound1.play ();

key1 = true;

}

if (key == 's') {

sound2.play ();

key2 = true;

}

if (key == 'd') {

sound3.play ();

key3 = true;

}

if (key == 'f') {

sound4.play ();

key4 = true;

}

if (key == 'g') {

sound5.play ();

key5 = true;

}

}

void keyReleased () {

if (key == 'a') {

key1 = false;

}

if (key == 's') {

ключ2 = ложь;

}

if (key == 'd') {

key3 = false;

}

if (key == 'f') {

key4 = false;

}

if (key == 'g') {

key5 = false;

}

} [/cceN_cpp]

Объяснение кода:

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

Здесь мы используем новое событие keyReleased (). Функция этого события - восстановить исходный цвет клавиатуры. Когда отпустите клавишу, она сработает.

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

Шаг 9: Исчерпывающий пример - Музыкальная палитра 1

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

Видео-сайт:

Пример кода (10-7):

[cceN_cpp theme = "dawn"] импорт processing.sound. *;

SoundFile звук1, звук2, звук3, звук4, звук5;

логическое isDragging;

void setup () {

размер (640, 360);

фон (255, 214, 79);

noStroke ();

sound1 = новый звуковой файл (это, "do.wav");

sound2 = новый звуковой файл (это, "re.wav");

sound3 = новый звуковой файл (это "mi.wav");

sound4 = новый звуковой файл (это, "fa.wav");

sound5 = новый звуковой файл (это, "so.wav");

}

void draw () {

if (isDragging) {

заполнить (107, 27, 157, 100);

эллипс (mouseX, mouseY, 16, 16);

}

}

void mouseDragged () {

isDragging = true;

if (mouseX> 100 && mouseX <105) {

sound1.play ();

}

if (mouseX> 200 && mouseX <205) {

sound2.play ();

}

if (mouseX> 300 && mouseX <305) {

sound3.play ();

}

if (mouseX> 400 && mouseX <405) {

sound4.play ();

}

if (mouseX> 500 && mouseX <505) {

sound5.play ();

}

}

void mouseReleased () {

isDragging = false;

} [/cceN_cpp]

Объяснение кода:

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

При перетаскивании мыши isDragging становится истинным значением, поэтому функции рисования в Draw будут выполняться. Это оставит следы на экране. Когда мы отпускаем мышь, isDragging принимает значение false. Таким образом, функции рисования в функции draw прекратят выполнение.

Мы разработали несколько условий срабатывания при перетаскивании мышью. Например, если горизонтальная координата мыши находится в диапазоне от 100 до 105 пикселей, музыка будет воспроизводиться автоматически. Это заставляет экран создавать несколько невидимых строк. Только если мышь пройдет через определенные области, она вызовет соответствующую музыку.

Шаг 10: Исчерпывающий пример - Музыкальная палитра 2 (обновленная версия)

Эффект от приведенного выше примера уже достаточно хорош. Но если внимательно посмотреть, то проблем будет много. Например, когда мышь движется очень быстро, она будет оставлять круглую точку на экране при каждом движении. Это не связная прямая линия. Между тем, это также вызывает утечку музыки. В то время как, когда мышь движется очень медленно, проходя через положение, когда горизонтальная координата находится между 100 и 105, она будет транслировать музыку несколько раз за очень короткое время, что дает вам ощущение застревания. Все эти проблемы мы можем решить на примере ниже.

Вы можете посмотреть видео по ссылке ниже:

v.qq.com/x/page/w03226o4y4l.html

Пример кода (10-8):

[cceN_cpp theme = "dawn"] импорт processing.sound. *;

SoundFile звук1, звук2, звук3, звук4, звук5;

логическое isDragging;

void setup () {

размер (640, 360);

фон (255, 214, 79);

noStroke ();

sound1 = новый звуковой файл (это, "do.wav");

sound2 = новый звуковой файл (это, "re.wav");

sound3 = новый звуковой файл (это, "mi.wav");

sound4 = новый звуковой файл (это, "fa.wav");

sound5 = новый звуковой файл (это, "so.wav");

}

void draw () {

if (isDragging) {

инсульт (107, 27, 157, 100);

strokeWeight (10);

линия (mouseX, mouseY, pmouseX, pmouseY);

}

}

void mouseDragged () {

isDragging = true;

if ((mouseX - 100) * (pmouseX - 100) <0) {

sound1.play ();

}

if ((mouseX - 200) * (pmouseX - 200) <0) {

sound2.play ();

}

if ((mouseX - 300) * (pmouseX - 300) <0) {

sound3.play ();

}

if ((mouseX - 400) * (pmouseX - 400) <0) {

sound4.play ();

}

if ((mouseX - 500) * (pmouseX - 500) <0) {

sound5.play ();

}

}

void mouseReleased () {

isDragging = false;

} [/cceN_cpp]

Объяснение кода:

Здесь мы использовали две переменные pmouseX и pmouseY, которые хранятся в самой системе обработки. Они похожи на mouseX и mouseY, но получают координаты мыши в последнем кадре.

В функции рисования мы использовали функцию line (), чтобы заменить исходную функцию ellipse (). Таким образом, координата последнего кадра напрямую связана с координатой текущего кадра. Таким образом, мы можем рисовать последовательные прямые или кривые.

Для события mouseDragged мы разработали новое условие срабатывания. Посредством определения того, находятся ли координаты последнего кадра и текущего кадра на одной стороне, можно узнать, пересекается ли определенная координата. В качестве примера возьмем это условие: «if ((mouseX - 100) * (pmouseX - 100) <0)». Среди них, по положительному и отрицательному значению, полученному в результате «mouseX - 100», мы можем узнать, находится ли mouseX справа или слева от горизонтальной координаты 100. Аналогично «pmouseX - 100». Следовательно, когда две точки спереди и сзади не находятся на одной стороне, положительное число умножается на отрицательное, и получается новое отрицательное число. Таким образом, условие выполнения выполнено.

Вышеупомянутое упрощенное выражение, в котором был умно использован определенный математический алгоритм: умножение двух отрицательных чисел дает положительный результат. Вы также можете разделить это на две ситуации, чтобы обсудить отдельно. Однако гораздо сложнее написать условия суждения. Условия оценки «if ((mouseX = 100) || (mouseX> 100 && pmouseX <= 100))» эквивалентны определяющим условиям исходного кода.

Шаг 11: Относительные функции управления аудио и видео

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

Для получения дополнительной информации вы можете обратиться к документам с официального сайта.

Аудио (https://processing.org/reference/libraries/sound/index.html)

Видео (https://processing.org/reference/libraries/video/index.html)

Эта статья написана дизайнером Вензи.

Шаг 12: относительные показания:

Интересное руководство по программированию для дизайнера - обработка начального прикосновения

Интересное руководство по программированию для дизайнера - создайте свою первую программу обработки

Интересное руководство по программированию для дизайнера - запустите свою картинку (часть первая)

Интересное руководство по программированию для дизайнера - запустите свою картинку (часть вторая)

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

Интересное руководство по программированию для дизайнера - Управление программным процессом - Заявление о состоянии (часть первая)

Интересное руководство по программированию для дизайнера - Управление программным процессом - Заявление о состоянии (часть вторая)

Интересное руководство по программированию для дизайнера - пользовательские функции и фрактальная рекурсия

Интересное руководство по программированию для дизайнера - пользовательские функции и фрактальная рекурсия

Интересное руководство по программированию обработки для дизайнера - Управление цветом

Шаг 13: Источник

Эта статья взята из:

Если у вас есть какие-либо вопросы, вы можете связаться с ： [email protected].