Orientação de programação de processamento interessante para designer - carregamento de mídia e evento: 13 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

O processamento pode ser carregado com muitos dados externos, entre os quais existem três tipos de uso comum. Eles são imagem, áudio e vídeo separadamente.

Neste capítulo, vamos falar sobre como carregar áudio e vídeo detalhadamente, combinando com eventos. No final, você pode criar seu próprio teclado musical ou paleta musical.

Etapa 1: ler a imagem

Antes de começar, vamos dar uma olhada no método de carregamento de imagens.

Etapa 2: funções relacionadas à imagem

Antes de usarmos essas funções, precisamos criar um objeto de imagem por meio do PImage. Então, podemos usar essas funções para definir todos os tipos de propriedades da imagem.

Não se esqueça de armazenar suas fontes de imagem em um arquivo de dados antes de executar seu programa.

Etapa 3: Carregar, reproduzir e parar a música

A seguir, começaremos a apresentar formalmente a invocação da música para você. Muito semelhante ao carregamento da imagem, você deve declarar um objeto de áudio no início. Você pode consultar o exemplo abaixo para a gramática real.

Exemplo de código (10-1):

[cceN_cpp theme = "dawn"] import processing.sound. *;

SoundFile sound;

void setup () {

tamanho (640, 360);

fundo (255);

sound = novo SoundFile (isto, "1.mp3");

}

void draw () {

}

void keyPressed () {

//Tocar música

if (chave == 'p') {

sound.play ();

}

// Pare o som

if (chave == 's') {

sound.stop ();

}

} [/cceN_cpp]

Preparação:

O processamento em si não carrega nenhuma biblioteca de som. Você precisa fazer o download sozinho. Portanto, antes de escrever seu código, é melhor você fazer os seguintes preparativos.

Adicione a biblioteca ao Processing. Aqui está a prática comum. Escolha na barra de menu "Ferramenta" - "Adicionar ferramenta" e, a seguir, mude para "Bibliotecas". Insira as palavras-chave da biblioteca na coluna de pesquisa para que você possa baixá-la e instalá-la diretamente.

No entanto, se usarmos essa função em nosso país (na China), não poderemos baixá-la conectando-se diretamente à web. Temos que iniciar a VPN. Mesmo que o iniciemos, haverá condições instáveis. Portanto, é preciso ter paciência para tentar várias vezes. Este é o método de carregamento mais conveniente. Se não conseguir instalar, você deve fazer o download do site oficial pelo manual. (https://processing.org/reference/libraries/) Como o método de instalação manual é muito complicado, iremos discuti-lo com mais detalhes no outro capítulo.

Explique o código:

A biblioteca de som pode funcionar corretamente após a conclusão da preparação. Resolva o código acima, clique em EXECUTAR e então ele funcionará. Pressione a tecla "P" para tocar música, "S" para parar a música.

Se for usado para o programa, precisamos carregá-lo primeiro. No início, temos que adicionar uma frase "import processing.sound. *". "importar" é a palavra-chave, significando literalmente carregar. Adicione o nome da biblioteca atrás de "import", então ele irá carregar a biblioteca. O final geralmente segue uma marca de "*", portanto, ele carregará todas as classes relacionadas à biblioteca no programa sem ter que adicioná-las uma por uma manualmente.

Na segunda frase, "SoundFile sound;" declarou um objeto de áudio. SoundFile é semelhante ao PImage.

Na configuração da função, "sound = new SoundFile (this," 1.mp3 ");" é usado para criar um objeto e definir seu caminho de leitura. Aqui, na verdade, já começamos a usar um novo conceito de Classe. No momento, não o discutimos profundamente. Só precisamos saber que é um método de escrita fixo e o último parâmetro é para preencher o endereço da fonte da música.

Entre os eventos keyPressed (), "sound.play ()" e "sound.stop ()" funcionam relativamente como o efeito de reproduzir e parar. "." no meio indica uma função de membro que reproduz e pára pertencem a objetos de áudio. Podemos considerar a função de membro como a função incluída no objeto. É pertencer a este objeto, que é definido de antemão. Posteriormente, quando precisarmos reproduzir vários objetos de áudio, só precisaremos adicionar ".play ()" atrás do nome da variável relativa.

As fontes de áudio devem ser armazenadas em um arquivo de dados no mesmo catálogo do sketchfile (com sufixo pde). Se não houver nenhum, você pode criar um manualmente.

Não se esqueça de escrever desenho de função. Embora você não tenha desenhado nenhum gráfico, é necessário tocar música com sucesso.

O procedimento acima parece bastante complexo, mas você precisa adicionar várias frases de código apenas, então você pode realizar a função de reprodução. É muito conveniente.

O processamento suporta formatos de áudio comuns como mp3, wav, ogg, etc.

Etapa 4: controle de velocidade da música

Os exemplos a seguir começarão a se tornar muito interessantes. O processamento forneceu algumas funções que podem controlar a velocidade de reprodução da música. Ao mesmo tempo, os tons mudarão com a velocidade de reprodução da música. Quando usamos o mouse para controlar, ele vai gerar um efeito muito psicodélico.

Site de vídeo:

Exemplo de código (10-2):

[cceN_cpp theme = "dawn"] import processing.sound. *;

SoundFile sound;

void setup () {

tamanho (640, 360);

fundo (255);

sound = novo SoundFile (isto, "1.mp3");

}

void draw () {

velocidade de flutuação = mouseX / (flutuação) largura * 3;

taxa de som (velocidade);

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

sound.amp (vol);

}

void keyPressed () {

//Tocar música

if (chave == 'p') {

sound.play ();

}

// Pare o som

if (chave == 's') {

sound.stop ();

}

} [/cceN_cpp]

Explique o código:

A função.rate () controla a velocidade de reprodução do áudio. O valor entre parênteses determina a velocidade de reprodução rápida e lenta. Quando o valor é 1, a velocidade de reprodução é normal. Quando estiver além de 1, acelere; enquanto estiver abaixo de 1, desacelere.

A função.amp () controla o volume do áudio. O valor entre parênteses determina o valor do volume. Quando é 1, o valor do volume é normal. Quando estiver além de 1, aumente o volume; enquanto estiver abaixo de 1, diminua o volume.

Aqui, construímos duas variáveis locais speed e vol como parâmetros a serem carregados. Portanto, a coordenada horizontal do mouse mudará o tom da música e a coordenada vertical mudará o volume da música.

Etapa 5: reproduzir e parar o vídeo

No Processing, o carregamento do vídeo é semelhante ao carregamento do áudio. Você tem que baixar a biblioteca de vídeo primeiro. (https://processing.org/reference/libraries/video/index.html)

Exemplo de código (10-3):

[cceN_cpp theme = "dawn"] import processing.video. *;

Movie mov;

void setup () {

tamanho (640, 360);

fundo (0);

mov = novo filme (isto, "1.mov");

}

void movieEvent (filme de filme) {

mov.read ();

}

void draw () {

imagem (mov, 0, 0, 640, 360);

}

void keyPressed () {

if (chave == 'p') {

mov.play ();

}

if (chave == 's') {

mov.stop ();

}

if (chave == 'd') {

mov.pause ();

}

} [/cceN_cpp]

Captura de tela do vídeo:

Explique o código:

A primeira frase "import processing.video. *;" É usada para carregar a biblioteca de vídeo.

A segunda frase "Movie mov;" é usada para declarar o objeto de vídeo. Entre eles, a função de "Filme" é semelhante a PImage.

Na configuração da função, o efeito de "mov = new Movie (this," 1.mov ");" é criar o objeto e definir seu caminho de leitura. O último parâmetro deve ser preenchido com o endereço da fonte de vídeo.

Configuração de Behine, movieEvent representa evento de vídeo. É usado para atualizar e ler as informações do vídeo. "mov.read ()" no evento significa lido.

Exceto para exibir imagens, a imagem de função também pode exibir vídeo. Podemos considerar o objeto de vídeo como uma imagem dinâmica. O primeiro parâmetro, preenchemos o nome da variável do objeto de vídeo. O segundo e o terceiro parâmetros são as coordenadas horizontal e vertical desenhadas pelo vídeo. O quarto e o quinto parâmetros decidem o comprimento e a largura da exibição do vídeo.

A função.play () significa jogar. A função.stop () significa parar e redefinirá o vídeo. Função.pause () significa pausa. Isso interromperá a reprodução atual, que continuará até que a função.play () seja chamada.

Etapa 6: Controle de velocidade do vídeo

Exemplo de código (10-4):

[cceN_cpp theme = "dawn"] import processing.video. *;

Movie mov;

void setup () {

tamanho (640, 360);

fundo (0);

mov = novo filme (isto, "transit.mov");

}

void movieEvent (filme de filme) {

mov.read ();

}

void draw () {

imagem (mov, 0, 0, largura, altura);

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

mov.speed (newSpeed);

}

void keyPressed () {

if (chave == 'p') {

mov.play ();

}

if (chave == 's') {

mov.stop ();

}

if (chave == 'd') {

mov.pause ();

}

}

[/cceN_cpp]

Explique o código:

A função.speed () pode ser usada para controlar a velocidade de reprodução do vídeo. Quando o valor do parâmetro é 1, a velocidade de reprodução é normal. Quando o valor ultrapassar 1, acelere; enquanto estiver abaixo de 1, então desacelerar.

Como construímos a variável local newSpeed e a importamos para a função setSpeed (), a coordenada do mouse influenciará diretamente a velocidade de reprodução do vídeo.

Quanto a mais exemplos sobre vídeo, você pode consultar Bibliotecas - Vídeo na biblioteca de casos.

Etapa 7: Processamento de eventos comuns

Anteriormente, apresentamos apenas o evento keyPressed (). Ele será acionado depois que o teclado for pressionado. A seguir, apresentaremos outros eventos comuns em Processing para você.

Os usos dos eventos acima são semelhantes a keyPressed. Eles não têm sequência na escrita do código. Em outras palavras, não importa qual evento você colocou antes ou atrás da configuração da função, você obtém o mesmo resultado. A ordem de execução está relacionada apenas à condição de disparo do próprio evento. Somente se a condição for atendida, ele será executado. Os eventos acima são todos muito fáceis de entender. Você só precisa fazer um pequeno experimento para entender rapidamente seus usos.

Fluxo de Eventos

Podemos usar um exemplo para saber a ordem de execução dos eventos.

Exemplo de código (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]

Explique o código:

Na configuração da função, a função frameRate () definiu a taxa de velocidade de operação do programa para 2 quadros por segundo. Reduzir a taxa de quadros pode nos ajudar a observar a saída no console, caso os eventos acionados sejam imediatamente transferidos por novos dados para o fundo.

Tente mover o mouse, clique, solte o mouse e observe o resultado da saída. Conheça a ordem de execução do evento através do println.

O que vale a pena prestar atenção é que as funções de desenho não podem ser escritas em outros eventos, exceto desenho de função, ou não podem ser exibidas. Se quisermos controlar a ocultação e exibição de componentes gráficos por meio de eventos como keyPressed, podemos considerar construir a variável bool como meio.

Os eventos serão executados em ordem. Somente depois que todo o código no evento atual for implementado, ele executará o código no próximo evento.

Etapa 8: Exemplo abrangente - teclado musical

Combinando com os eventos recém-captados, podemos adicionar novas interações ao nosso programa. Em seguida, em apenas alguns minutos, podemos facilmente analizar um teclado musical.

Site de vídeo:

Exemplo de código (10-6):

[cceN_cpp theme = "dawn"] import processing.sound. *;

SoundFile sound1, sound2, sound3, sound4, sound5;

boolean key1, key2, key3, key4, key5;

void setup () {

tamanho (640, 360);

fundo (255);

noStroke ();

sound1 = novo SoundFile (isto, "do.wav");

sound2 = novo SoundFile (isto, "re.wav");

sound3 = novo SoundFile (isto, "mi.wav");

sound4 = novo SoundFile (isto, "fa.wav");

sound5 = novo SoundFile (isto, "so.wav");

}

void draw () {

fundo (255, 214, 79);

rectMode (CENTER);

flutuação w = largura * 0,1;

flutuação h = altura * 0,8;

if (chave1) {

preencher (255);

} outro {

encher (238, 145, 117);

}

rect (largura / 6, altura / 2, w, h);

if (chave2) {

preencher (255);

} outro {

encher (246, 96, 100);

}

rect (largura / 6 * 2, altura / 2, w, h);

if (chave3) {

preencher (255);

} outro {

encher (214, 86, 113);

}

rect (largura / 6 * 3, altura / 2, w, h);

if (chave4) {

preencher (255);

} outro {

encher (124, 60, 131);

}

rect (largura / 6 * 4, altura / 2, w, h);

if (chave 5) {

preencher (255);

} outro {

encher (107, 27, 157);

}

rect (largura / 6 * 5, altura / 2, w, h);

}

void keyPressed () {

if (chave == 'a') {

sound1.play ();

chave1 = verdadeiro;

}

if (chave == 's') {

sound2.play ();

chave2 = verdadeiro;

}

if (chave == 'd') {

sound3.play ();

chave3 = verdadeiro;

}

if (chave == 'f') {

sound4.play ();

chave4 = verdadeiro;

}

if (chave == 'g') {

sound5.play ();

chave5 = verdadeiro;

}

}

void keyReleased () {

if (chave == 'a') {

chave1 = falso;

}

if (chave == 's') {

chave2 = falso;

}

if (chave == 'd') {

chave3 = falso;

}

if (chave == 'f') {

chave4 = falso;

}

if (chave == 'g') {

chave5 = falso;

}

} [/cceN_cpp]

Explique o código:

Precisamos criar vários objetos de áudio para ler as informações de som relativas de modo a reproduzir sons diferentes quando diferentes teclas são acionadas.

Aqui usamos um novo evento keyReleased (). A função deste evento é restaurar a cor do teclado à sua cor original. Ao soltar a tecla, ela será acionada.

Os 5 valores booleanos declarados no cabeçalho são usados para detectar o status da chave.

Etapa 9: Exemplo abrangente - Paleta musical 1

Além do evento de teclado, o evento de mouse é uma boa coisa que temos que usar de forma flexível. O exemplo a seguir é para criarmos uma paleta de música, entre a qual usamos dois eventos relacionados ao mouse.

Site de vídeo:

Exemplo de código (10-7):

[cceN_cpp theme = "dawn"] import processing.sound. *;

SoundFile sound1, sound2, sound3, sound4, sound5;

boolean isDragging;

void setup () {

tamanho (640, 360);

fundo (255, 214, 79);

noStroke ();

sound1 = novo SoundFile (isto, "do.wav");

sound2 = novo SoundFile (isto, "re.wav");

sound3 = novo SoundFile (isto, "mi.wav");

sound4 = novo SoundFile (isto, "fa.wav");

sound5 = novo SoundFile (isto, "so.wav");

}

void draw () {

if (isDragging) {

encher (107, 27, 157, 100);

elipse (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]

Explique o código:

Esperamos que apenas quando tivermos pressionado e arrastado o mouse, possamos fazer desenhos. Portanto, precisamos construir uma variável booleana isDragging para obter o status atual.

Ao arrastar o mouse, isDragging se torna o valor verdadeiro para que as funções de desenho dentro do Draw sejam executadas. Isso deixará rastros na tela. Quando liberamos o mouse, isDragging se torna um valor falso. Portanto, as funções de desenho na função draw interromperão a execução.

Projetamos várias condições de acionamento no evento de arrastar do mouse. Por exemplo, quando a coordenada horizontal do mouse está entre 100 e 105 pixels, a música será reproduzida automaticamente. Isso faz com que a tela crie várias strings invisíveis. Somente se o mouse passar por certas áreas, ele acionará a música relativa.

Etapa 10: Exemplo abrangente - Paleta musical 2 (versão atualizada)

O efeito do exemplo acima já é bom o suficiente. Mas se observarmos com atenção, encontraremos muitos problemas. Por exemplo, quando o mouse se move muito rápido, ele deixará um ponto redondo na tela toda vez que se mover. Não é uma linha reta coerente. Enquanto isso, também causa vazamento de música. Quando o mouse se move muito lentamente, passando pela posição em que a coordenada horizontal está entre 100 e 105, ele irá transmitir música várias vezes em um período muito curto, o que lhe dá a sensação de estar travado. Todos esses problemas, podemos resolvê-los através do exemplo abaixo.

Você pode assistir aos vídeos no link abaixo:

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

Exemplo de código (10-8):

[cceN_cpp theme = "dawn"] import processing.sound. *;

SoundFile sound1, sound2, sound3, sound4, sound5;

boolean isDragging;

void setup () {

tamanho (640, 360);

fundo (255, 214, 79);

noStroke ();

sound1 = novo SoundFile (isto, "do.wav");

sound2 = novo SoundFile (isto, "re.wav");

sound3 = novo SoundFile (isto, "mi.wav");

sound4 = novo SoundFile (isto, "fa.wav");

sound5 = novo SoundFile (isto, "so.wav");

}

void draw () {

if (isDragging) {

curso (107, 27, 157, 100);

strokeWeight (10);

linha (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]

Explique o código:

Aqui usamos duas variáveis pmouseX e pmouseY carregadas no próprio sistema de processamento. Eles são semelhantes a mouseX e mouseY, mas o que eles obtiveram são as coordenadas do mouse no último quadro.

Em Function draw, usamos a função line () para substituir a função original ellipse (). Isso torna a coordenada do último quadro conectada diretamente com a coordenada do quadro atual. Assim, podemos desenhar linhas retas ou curvas coerentes.

No evento mouseDragged, projetamos uma nova condição de acionamento. Ao julgar se a coordenada do último quadro e o quadro atual estão do mesmo lado para saber se uma determinada coordenada foi cruzada. Tome esta condição como exemplo: "if ((mouseX - 100) * (pmouseX - 100) <0)". Dentre eles, a partir dos valores positivos e negativos resultantes de "mouseX - 100", podemos saber se mouseX está à direita ou à esquerda do coodinate horizontal 100. Semelhante a "pmouseX - 100". Portanto, quando os dois pontos na frente e atrás não estão no mesmo lado, um positivo multiplica um negativo, ele obterá um novo número negativo. Assim, a condição de execução é satisfeita.

A expressão acima é uma expressão simplificada, que usou habilmente um certo algoritmo matemático - A multiplicação de dois negativos criará um positivo. Você também pode dividi-lo em duas situações para discutir separadamente. No entanto, é muito mais complicado escrever condições de julgamento. As condições de julgamento "if ((mouseX = 100) || (mouseX> 100 && pmouseX <= 100))" é equivalente às condições determinantes do código-fonte.

Etapa 11: Funções relativas ao controle de áudio e vídeo

As funções mencionadas acima são suficientes para cenários de uso geral. Se você quiser se aprofundar, aqui eu coletei algumas funções comuns relativas a áudio e vídeo para você. Você pode explorar seus usos de acordo com suas próprias necessidades.

Para obter mais introdução, você pode consultar os documentos do site oficial.

Áudio (https://processing.org/reference/libraries/sound/index.html)

Vídeo (https://processing.org/reference/libraries/video/index.html)

Este artigo é do designer Wenzy.

Etapa 12: Leituras relativas:

Orientação de programação interessante para designer - Processamento do toque inicial

Orientação de programação interessante para designer - crie seu primeiro programa de processamento

Orientação de programação interessante para designer - Faça sua imagem funcionar (parte um)

Orientação de programação interessante para designer - Faça sua imagem funcionar (parte dois)

Orientação de Programação Interessante para Projetista - Controle de Processo do Programa - Declaração de Loop

Orientação de Programação Interessante para Designer - Controle de Processo do Programa - Declaração de Condição (Parte Um)

Orientação de Programação Interessante para Designer - Controle de Processo do Programa - Declaração de Condição (Parte Dois)

Orientação de programação interessante para designer - funções personalizadas e recursão fractal

Orientação de programação interessante para designer - funções personalizadas e recursão fractal

Orientação de programação de processamento interessante para Designer - Controle de cores

Etapa 13: Fonte

Este artigo é de:

Se você tiver alguma dúvida, pode entrar em contato com ： [email protected].