Интересно ръководство за програмиране за обработка за дизайнер-зареждане на медии и събитие: 13 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:54

Обработката може да бъде заредена с много външни данни, сред които има три вида, които се използват много често. Те са изображения, аудио и видео отделно.

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

Стъпка 1: Прочетете изображението

Преди да започнем, нека да погледнем назад към начина на зареждане на изображението.

Стъпка 2: Свързани с изображението функции

Преди да използваме тези функции, трябва да създадем обект на изображение чрез PImage. След това можем да използваме тези функции, за да дефинираме всички видове свойства на изображението.

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

Стъпка 3: Зареждане на музика, възпроизвеждане и спиране

По -долу започваме официално да ви представяме извикването на музика. Много подобно на зареждането на изображения, трябва да декларирате аудио обект в началото. Можете да се обърнете към примера по -долу от действителната граматика.

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

[cceN_cpp theme = "зори"] импортиране на обработка.звук.*;

SoundFile звук;

void setup () {

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

фон (255);

звук = нов SoundFile (това, "1.mp3");

}

void draw () {

}

void keyPressed () {

//Пусни звук

if (key == 'p') {

sound.play ();

}

// Спиране на звука

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Подготовка:

Самата обработка не носи звукова библиотека. Трябва да го изтеглите сами. Така че, преди да напишете кода си, по -добре направете следните подготовки.

Добавяне на библиотека към Обработка. Ето обичайната практика. Изберете от лентата с менюта за „Инструмент“- „Добавяне на инструмент“и след това преминете към „Библиотеки“. Въведете ключовите думи на библиотеката в колоната за търсене, за да можете да я изтеглите и инсталирате директно.

Ако обаче използваме тази функция в нашата родна страна (в Китай), не можем да я изтеглим чрез директно свързване на мрежата. Трябва да стартираме VPN. Въпреки че го стартираме, ще има нестабилни условия. Така че трябва да сте търпеливи, за да опитате няколко пъти. Това е най -удобният метод за зареждане. Ако не можете да инсталирате, трябва да изтеглите от официалния уебсайт с ръководство. (https://processing.org/reference/libraries/) Тъй като методът на ръчна инсталация е много сложен, ще го обсъдим допълнително в другата глава.

Кодът е обяснен:

Фонотеката може да работи правилно след приключване на подготовката. Копирайте горния код, щракнете върху RUN, след което той ще работи. Натиснете клавиша "P", за да пуснете музика, "S", за да спрете музиката.

Ако е свикнал с програмата, първо трябва да я заредим. В началото трябва да добавим изречение „импортиране на обработка.звук.*“. „импорт“е ключовата дума, което означава буквално зареждане. Добавете името на библиотеката зад „import“, след което тя ще зареди библиотеката. Опашката обикновено следва знак „*“, като по този начин ще зареди всички свързани с библиотеката класове в програмата, без да се налага да ги добавяте един по един ръчно.

Във второто изречение „SoundFile sound;“е декларирало аудио обект. SoundFile е подобен на PImage.

В рамките на настройката на функцията "sound = new SoundFile (this," 1.mp3 ");" се използва за създаване на обект и определяне на неговия път за четене. Тук всъщност вече започнахме да използваме нова концептуална класа. В момента не го обсъждаме задълбочено. Трябва само да знаем, че това е фиксиран метод на писане и последният параметър е за попълване на адреса на източника на музика.

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

Аудиоизточниците се съхраняват във файл с данни под същия каталог на sketchfile (с pfi суфикс). Ако няма такъв, можете да го създадете ръчно.

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

Горната процедура изглежда доста сложна, но трябва да добавите само няколко изречения код, след което можете да реализирате функция за възпроизвеждане. Много е удобно.

Обработката поддържа често срещани аудио формати като mp3, wav, ogg и др.

Стъпка 4: Контрол на скоростта на музиката

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

Видео уебсайт:

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

[cceN_cpp theme = "зори"] импортиране на обработка.звук.*;

SoundFile звук;

void setup () {

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

фон (255);

звук = нов SoundFile (това, "1.mp3");

}

void draw () {

скорост на плаване = mouseX/(float) ширина * 3;

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

float vol = mouseY/(float) височина * 4;

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

}

void keyPressed () {

//Пусни звук

if (key == 'p') {

sound.play ();

}

// Спиране на звука

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Код Обяснете:

Функция.rate () контролира скоростта на възпроизвеждане на аудио. Стойността в скобите определя бързата и бавната скорост на възпроизвеждане. Когато стойността е 1, скоростта на възпроизвеждане е нормална. Когато е отвъд 1, тогава ускорете; докато е под 1, след това се забавя.

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

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

Стъпка 5: Възпроизвеждане на видео и спиране

В Processing зареждането на видео е подобно на зареждането на аудио. Първо трябва да изтеглите видеотека. (https://processing.org/reference/libraries/video/index.html)

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

[cceN_cpp theme = "dawn"] импортиране на обработка.видео.*;

Филм 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]

Видео екранна снимка:

Код Обяснете:

Първото изречение „импортиране на обработка.видео.*;“Се използва за зареждане на видеотека.

Второто изречение „Movie mov;“се използва за деклариране на видео обект. Сред него функцията на "Movie" е подобна на PImage.

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

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

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

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

Стъпка 6: Контрол на скоростта на видеото

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

[cceN_cpp theme = "dawn"] импортиране на обработка.видео.*;

Филм 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.

Това, което си струва да се обърне внимание, е, че функциите за рисуване не могат да бъдат записани в други събития, освен функцията за рисуване, или не могат да се показват. Ако искаме да контролираме скриването и показването на графични компоненти чрез събития като keyPressed, може да помислим за изграждане на bool променлива като среда.

Събитията ще се изпълняват по ред. Едва след като целият код в текущото събитие бъде приложен, той ще изпълни кода в следващото събитие.

Стъпка 8: Изчерпателен пример-Музикална клавиатура

В комбинация с новоприетите събития можем да добавим нови взаимодействия към нашата програма. След това само с няколко минути можем лесно да анализираме музикална клавиатура.

Видео уебсайт:

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

[cceN_cpp theme = "зори"] импортиране на обработка.звук.*;

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

булев ключ1, ключ2, ключ3, ключ4, ключ5;

void setup () {

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

фон (255);

noStroke ();

sound1 = нов SoundFile (this, "do.wav");

sound2 = нов SoundFile (this, "re.wav");

sound3 = нов SoundFile (this, "mi.wav");

sound4 = нов SoundFile (this, "fa.wav");

sound5 = нов SoundFile (this, "so.wav");

}

void draw () {

фон (255, 214, 79);

rectMode (ЦЕНТЪР);

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

поплавък h = височина * 0,8;

if (key1) {

попълнете (255);

} else {

попълнете (238, 145, 117);

}

правоъгълна (ширина/6, височина/2, ш, в);

if (key2) {

попълнете (255);

} else {

попълнете (246, 96, 100);

}

правоъгълна (ширина/6 * 2, височина/2, w, h);

if (key3) {

попълнете (255);

} else {

попълнете (214, 86, 113);

}

правоъгълна (ширина/6 * 3, височина/2, w, h);

if (key4) {

попълнете (255);

} else {

попълнете (124, 60, 131);

}

правоъгълна (ширина/6 * 4, височина/2, w, h);

if (key5) {

попълнете (255);

} else {

попълнете (107, 27, 157);

}

правоъгълна (ширина/6 * 5, височина/2, w, h);

}

void keyPressed () {

if (key == 'a') {

sound1.play ();

key1 = true;

}

if (key == 's') {

sound2.play ();

ключ2 = вярно;

}

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]

Код Обяснете:

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

Тук използваме нов ключ за събитиеReleased (). Функцията на това събитие е да възстанови цвета на клавиатурата до първоначалния й цвят. Когато освободите ключа, той ще се задейства.

Декларираните в главата 5 булеви стойности се използват за откриване на състоянието на ключа.

Стъпка 9: Изчерпателен пример-Музикална палитра 1

Освен събитие на клавиатурата, събитието на мишката е хубаво, че трябва да го използваме гъвкаво. Следващият пример е за нас да създадем музикална палитра, сред която сме използвали две събития, свързани с мишката.

Видео уебсайт:

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

[cceN_cpp theme = "зори"] импортиране на обработка.звук.*;

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

логическо isDragging;

void setup () {

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

фон (255, 214, 79);

noStroke ();

sound1 = нов SoundFile (this, "do.wav");

sound2 = нов SoundFile (this, "re.wav");

sound3 = нов SoundFile (this, "mi.wav");

sound4 = нов SoundFile (this, "fa.wav");

sound5 = нов SoundFile (this, "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 става невярна стойност. Така че функциите за рисуване във функция draw ще спрат изпълнението.

Ние сме проектирали няколко условия за задействане при събитие с плъзгане на мишката. Например, когато хоризонталната координата на мишката е сред 100 и 105 пиксела, музиката ще се възпроизвежда автоматично. Това прави екрана създаден няколко невидими низове. Само ако мишката премине през определени области, тя ще задейства относителната музика.

Стъпка 10: Изчерпателен пример-Музикална палитра 2 (актуализирана версия)

Ефектът от горния пример вече е достатъчно добър. Но ако го гледаме внимателно, ще открием много проблеми. Например, когато мишката се движи много бързо, тя ще оставя кръгла точка на екрана всеки път, когато се движи. Това не е последователна права линия. Междувременно това също причинява известно изтичане на музика. Докато когато мишката се движи много бавно, преминавайки през позицията, когато хоризонталната координата е между 100 и 105, тя ще излъчва музика няколко пъти в рамките на много кратко време, което ви създава усещане, че сте заседнали. Всички тези проблеми можем да ги разрешим чрез примера по -долу.

Можете да гледате видеоклипове на връзката по -долу:

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

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

[cceN_cpp theme = "зори"] импортиране на обработка.звук.*;

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

логическо isDragging;

void setup () {

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

фон (255, 214, 79);

noStroke ();

sound1 = нов SoundFile (this, "do.wav");

sound2 = нов SoundFile (this, "re.wav");

sound3 = нов SoundFile (this, "mi.wav");

sound4 = нов SoundFile (this, "fa.wav");

sound5 = нов SoundFile (this, "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)

Тази статия идва от дизайнера Wenzy.

Стъпка 12: Относителни показания:

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

Интересно ръководство за програмиране за дизайнер - създайте първата си програма за обработка

Интересни ръководства за програмиране за дизайнер-стартирайте снимката си (първа част)

Интересни ръководства за програмиране за дизайнер-стартирайте снимката си (втора част)

Интересни ръководства за програмиране за дизайнер- Контрол на процесите на програмата- Изявление за цикъл

Интересни ръководства за програмиране за дизайнер-Контрол на програмния процес-Декларация за състоянието (първа част)

Интересно ръководство за програмиране за дизайнер-Контрол на програмния процес-Декларация за състоянието (втора част)

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

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

Интересно ръководство за програмиране за обработка за дизайнер-Контрол на цветовете

Стъпка 13: Източник

Тази статия е от:

Ако имате въпроси, можете да се свържете с: [email protected].