Experimentos musicais interativos para web (2016)

Experimentos musicais interativos para web Interactive music experiments on web Stolfi, Ariane de Souza. LabVisual/FAU – Universidade de São Paulo arianestolfi@gmail.com 2015 Resumo A página "Chrome Experiments" (chromeexperiments.com) reúne mais de 1000 experimentos interativos, uma reunião de estudos de caso de programação criativa em HTML5 e ​JavaScript​, que são tecnologias abertas, com temas que vão de cartografia à jogos. Neste artigo, buscaremos categorizar e analisar alguns dos experimentos reunidos nessa página sob o tema "som e vídeo", mais especificamente aqueles que podem ser considerados como instrumentos musicais. Para tanto, fizemos um mapeamento geral de tecnologias e sistema de geração sonora, a partir do qual selecionamos nove experimentos para uma análise mais detalhada quanto aos aspectos de design, controle, capacidade de variação sonora e tecnologias envolvidas. Palavras Chave​: web, audio, interface. Abstract The page "Crome Expeiments (chromeexperiments.com) is been gathering more than 1000 interactive experiments, a showcase of creative coding in HTML 5 and JavaScript, open technologies in essence, under themes from cartography to games. In this article, we aim to categorize and analyze some of these experiments on "sound and video", more precisely those than can be considered musical instruments. For that, we did a global map of technologies and sound generation systems, from which we selected nine experiments for further analysis on design and control aspects, sound variation capacity and technologies involved. Keywords​: web, audio, interface. Introdução Desde que o ​World Wide Web Consortium (W3C) lançou os primeiros esboços do HTML5, trazendo novos recursos de interatividade como suporte a áudio, vídeo, gráficos SVG e WebGL, as empresas fabricantes de navegadores procuraram formas de dar suporte às suas recomendações e estimular os designers e programadores a explorarem essas novas potencialidades. Em 2009, a Google, que desenvolve o navegador Chrome, criou o ​Chrome Experiments​, um site voltado à demonstração das potencialidades de uso do HTML5, como forma de incentivar o trabalho de designers criativos: Em 2009, nós lançamos o ​Chrome Experiments para mostrar o trabalho de programadores criativos que levaram o HTML5 com JavaScript as seus limites para construir experiências belas e únicas. De início, o site tinha somente 19 experimentos, mas nós esperávamos que eles servissem como fonte de inspiração para programadores que fizessem arte com tecnologias abertas. Desde então, nós fomos humilhados pela quantidade e qualidade de novas submissões.1 A questão da programação criativa, que vem sendo tratada por autores como John Maeda, envolve em muitos casos formas de organização interativa de informações, que como aponta Bonsiepe(2011), "oferece um desafio para o design gráfico tradicional". Interação, para ele, é um "modo de apresentar informação não linar", "oferencendo alternativas para a navegação". Como ele mesmo nota, existe um amplo campo de pesquisa na área conhecida como design da informação, assim como no do design de interfaces e de interação, disciplinas distintas mas com uma série de pontos de contato. ​In 2​ 009​, we launched C ​ hrome Experiments​ to showcase the work of creative coders who pushed HTML5 and JavaScript to the limits in order to build beautiful, unique web experiences. At first, the site had only 19 experiments, but we hoped they would be a source of inspiration for programmers who made art with open web technologies. Since then, we’ve been humbled by the quantity and quality of new submissions. Today, we’ve reached a major milestone: 1,000 experiments. 1 Bonsiepe já apontava as novas possibilidades de atuação do designer aberta pelo "desenvolvimento tecnológico dos meios digitais" no desenvolvimento de sistemas interativos, mas até então, esses novos procedimentos ainda eram predominantemente baseados em texto. A programação criativa, que vem ganhando espaço conforme aumenta o acesso às tecnologias digitais, tem sido precursora no emprego de meios alternativo de informação como áudio e vídeo. Neste caso, vamos tratar especificamente de algumas ferramentas de organização de informação acústica de forma visual, através de interfaces para web, campo que vem ganhando espaç o nos últimos tempos, justamente em função do desenvolvimento dessas novas tecnologias. O interesse de pesquisadores com o tema, fez o IRCAM, por exemplo, abrir espaço neste ano para o primeiro congresso de WebAudio, o WAC 2015 : WAC é a primeira conferência internacional dedicada a tecnologias e aplicativos de web audio. A conferência dá boas vindas a desenvolvedores de pesquisa e invertigação web, cientistas de processamento de áudio, designers de aplicativos e pessoas envolvidas com padrões da web.2 O congresso trouxe uma série de palestras demonstrando aplicativos, plugins, ​frameworks e questões gerais sobre o estado do desenvolvimento das tecnologias de audio baseadas na web, que já estão em um estágio considerável, como apontam Saiz, Matuszewski e Goldszmidt (2015): De onde estamos hoje, vários dos requisitos que pareciam muito complexos de serem atingidos em um navegador da web se provaram ser cada vez mais possíveis graças aos esforços das empresas de navegadores e da comunidade JavaScript. (...) 3 ​"WAC is the first international conference dedicated to web audio technologies and applications. (IRCAN 2015) The conference welcomes web R&D developers, audio processing scientists, application designers and people involved in web standards. 3 ​From where we stand today, a lot of the requirements that seemed rather complex to achieve in a web browser have proven to be increasingly possible thanks to eforts of browser vendors and the Javascript community. (...) We are in the position to state nonetheless that the web platform today delivers a solid foundation to build complex and rich user interfaces on top of the the W3C standards specification. 2 Nós podemos dizer, no entanto que a plataforma web hoje carrega uma fundação sólida para a construção de interfaces para o usuário ricas e complexas sobre os padrões especificados pelo W3C. Metodologia Atualmente, a página conta com links para 1087 experimentos4 , organizados por tecnologias aplicadas e por tema (tabela 1). Inicialmente, fizemos uma filtragem para gerar uma tabela quantitativa de temas e tecnologias empregadas. Em seguida, fizemos um cruzamento entre os temas, para identificar interrelações. Tabela 1 ­ Chrome Experiments – Temas e tecnologias Entre os dias 1 e 9 de julho foram acrescentados nove novos links à página. Para o estudo estamos considerando os experimentos incluídos até o dia 31 de junho de 2015. 4 Procuramos em seguida fazer um mapeamento dos experimentos categorizados sob o tema som e música, e categorizá­los em subtipos, dependendo da finalidade e processos envolvidos. A primeira fase da análise então, foi abrir todos experimentos e clássificálos segundo o tipo de som gerado. Para tanto, utilizamos um computador com sistema operacional ​Mac OSX 10.10.2 e um navegador ​Chrome na versão mais atualizada5. Para tanto, classificamos os experimentos de 4 formas: ● ● 5 Interfaces musicais – 38 experimentos: permitem ao usuário controle sobre o processo sonoro, São sintetizadores, samplers, processadores de áudio e sequenciadores; Música generativa. – 17 experimentos: experimentos que são capazes de gerar som sem ou com mínima intervenção do usuário. São na sua maioria experimentos estéticos ou jogos sonoros; ​O navegador Chrome foi atualizado no dia 15 de julho para versão 4​ 4.0.2403.89 (64­bit). ● ● Música pré­determinada – 31 experimentos: aqueles experimentos que dependem de uma faixa de música pré­estabelecida, como videoclipes interativos, visualizadores de audio, mixers e tocadores de midi; Sem som – 19 experimentos: apesar de estarem categorizados como "som e vídeo", vários sites não foram capazes de gerar som nenhum. Alguns sites estão fora do ar, outros são baseados em tecnologias que já estão obsoletas no navegador Chrome, outros dependem de uma plataforma específica, como celulares, por exemplo. Optamos por investigar um pouco mais a fundo os 40 experimentos classificados como instrumentos musicais e fizemos também uma tabela cruzando os aplicativos e as tecnologias envolvidas, afim de identificar as tecnologias mais utilizadas e de selecionar exemplos significativos com cada uma, e procuramos organizá­los também segundo os tipos sistemas de geração sonora possíveis para instrumentos musicais digitais definidos por Iazzetta (1999): ● por transformação, que partem de um som pre existente para transformá­lo em outro, com aplficação de filtros ou processadores de efeito; ● por síntese, que produzem o sinal sonoro artificialmente e; ● por amostragem ou sampling, que armazenam e reproduzem amostras digitais de som. Com essas primeiras categorizações, construímos a tabela 2, que relaciona os instrumentos musicais com tecnologias envolvidas e sistemas de geração sonora. Testamos novamente cada um deles para identificar aspectos divergentes e selecionamos 9 websites para desenvolver uma análise mais detalhada, que constam na tabela abaixo em amarelo, procurando abarcar todas as tecnologias envolvidas e também os procedimentos para geração de som: ● ● ● 3d Tunes, por ser o único instrumento musical na categoria 3D; Hya.io, por sua complexidade e por permitir processamentos sonoros; Lalo.li, pelo processo de síntese de voz; ● ● ● ● ● ● Multiplayer piano, por ser uma experiência multiplayer com chat; Patatap, uma espécie de bateria eletrônica audiovisual; Plink, outra experiência multiplayer, mas sem contato entre usuários; Spectogram and oscillator, que oference uma análise espectrográfica do som e dá suporte para microfone; Tonehack, pela possibilidade de variação de timbre; Webcam music, por receber comandos através de interpretação da imagem da webcam; tabela 2 – Instrumentos musicais, tecnologias e sistemas de geração de som Para analisar os aplicativos selecionados, buscamos avaliá­los e descrevê­los sob três aspectos principais: design, acústica e tecnologia. Quanto à análise do design, partiremos de duas das classes de critérios definidos por Bonsiepe no texto Cognição e Design – o Papel da Visualização para a Socialização dos Conhecimentos: ● ● Apectos de controle ou sequências de ações e modos de interação do usuário: affordances, feedback, navegação, ajuda oferecida. Aspectos de aparência ou apresentação das sequências de ação, aspectos comunicativos e perceptivos: divisão e organização das zonas das interfaces, hieraquização, tipografia, layout, paletas cromáticas, posição dos elementos, tipos de ícones e forma geral de apresentação. Deixaremos de lado os aspectos que se referem às qualidades de agradabilidade, por entendermos que seriam melhor compreendidos com um experimentos que envolvessem grupos de usuários. Além disso, no que diz respeito a interfaces consideradas como instrumentos musicais, a usabilidade não é tão importante quanto a capacidade de variação e controle dos processos de produção sonora, como aponta Iazzetta (1999): Primeiramente, o instrumento musical não precisa ser fácil em termos de utilização. Como diz Tod Machover, compositor e designer de sistemas musicais interativos, “se o músico pode aprender um instrumento inteiro em 20 minutos, então nós não produzimos um instrumento, mas um brinquedo. Assim, um instrumento deve ser facilmente compreendido ​conceitualmente​, mas interessante e compensador para ser praticado de modo que o músico possa se aprimorar com o passar do tempo”. Um instrumento deve antes de tudo permitir um controle significativo dos processos de produção sonora. Ou ainda como aponta Overholt (1999): Designer de interfaces musicais devem fazer todo esforço para encontrar interfaces e métodos de geração sonoros que pela sua natureza tenham tanta riqueza de interação que o seu espaço não possa nunca ser completamente dominado, na essência levando a um jogo sem fim de prática musical.6 Assim, procuraremos levantar quais são os processos de geração sonora envolvido e também qual é o grau de controle e variação que os aplicativos permitem sobre os elementos básicos do som: frequência, timbre, e amplitude. Por fim, para reunir subsídios para o desenvolvimento futuro de novos experimentos, procuraremos fazer uma breve análise do código para identificar elementos principais da estrutura da arquitetura da informação, no código HTML e também investigar os ​frameworks7 utilizados por cada experimento. Análise dos Experimentos Selecionados 3D tunes http://playground.christianwannerstedt.com/projects/3d_tunes/ Autor:​ Christian Wannerstedt Figura1 – Interface do 3d Tunes – Tela única (screenshot do dia 22/07/2015) ​Musical interface designers should make every effort to find interfaces and sound­ generating methods that by their nature have so much richness of interaction that the space can never truly be fully mastered, in essence leading to a never­ending game of musical practice. (Overholt, 1999) 7 No caso, consideramos como frameworks as bibliotecas de código externas ao projeto. 6 Simula um teclado tradicional de 31 teclas, foi selecionado por ser o único instrumento musical categorizado como 3D. ● Aparência: Em primeiro plano existe um modelo 3D de piano, (figura 1) sobre um fundo escuro com ​degradé radial. A qualidade do modelo não é muito realistística. O menu superior é uma barra horizontal preta e as teclas são cor­de­rosa. ● Modo de controle da interface: Depois de esperar a página carregar, o usuário tem opção de clicar com o mouse sobre as teclas do modelo tridimensional. Ao clicar e arrastar, o piano gira no plano tridimensional. Ao clicar nas teclas, são disparadas as notas correspondentes, enquanto os botões disparam faixas de bateria em ​loop​. É possível também controlar volume e posição estéreo (​pan​) por um modelo 3D de ​slider​. No menu superior, existe a possibilidade de controlar alguns parâmetros da renderização 3d, como luz ou ​wireframe​, e também a velocidade das faixas de bateria. ● Sistema de geração de som:​ sampler; ● Variação de frequência: 31 notas controladas por teclado ou clique do mouse e 10 loops de bateria pré­determinados; ● Variação de timbre:​ não varia ● Variação de amplitude: slider vertical que controla todas as notas ao mesmo tempo; ● Elemento HTML principal:​ html canvas; ● Frameworks utilizados: ○ jquery.min.js ○ jquery­1.6.4.min.js ○ jquery­ui­1.8.16.custom.min.js ○ webgl­utils.js ○ three.min.js ○ Tween.js ○ Stats.js ○ utils.js ○ soundmanager2­nodebug­jsmin.js HYA.IO http://app.hya.io/ Autor:Hya.io Figura 2 – HYA.IO, tela inicial (screenshot do dia 22/07/2015) Figura 3 – HYA.IO, tela com módulos ligados. (screenshot do dia 22/07/2015) A mais complexa das ferramentas selecionadas, emula um ambiente de composição modular: recebe entradas de audio, arquivos ou MIDI, e permite que sejam aplicados processamentos clássicos de audio lineramente antes da a saída do som. ● Aparência: O site possui um fundo vermelho que simula um tecido antigo, (figura 2) o menu superior é uma barra horizontal preta, bem como o fundo dos módulos que podem ser acoplados (figura 3). O visual tem ● ● ● ● ● ● ● um aspecto realista, com imitação de botões físicos, tecladinhos com imitação de piano e de processos de síntese modular; Modo de controle da interface: Possui um menu superior com 3 submenus, o primeiro, ​Add Plugin​, fornece as alternativas de módulos de sintetizadores ou de processamento de audio, incluindo vários processos clássicos como: filtros, compressores, controle de ganho etc. O segundo submenu oferece opções de salvar, carregar e exportar o ​patch para uso e desenvolvimento posterior, e o terceiro permite o registro e ​login​. é possível conectar com o ​Facebook​. O usuário pode criar caminhos para o som da entrada até a saída, unindo os módulos por linhas flexíveis, mas cada módulo permite somente uma ligação com o próximo. Os botões dos módulos simulam potenciometros rotativos típicos de interfaces físicas de áudio, que não são muito práticos de se controlar com o mouse; Sistema de geração de som:​ sintese e transformação; Variação de frequência: variação ampla de frequência dos osciladores, controlados a partir de inputs de texto; . Variação de timbre: possibilidade de variação através da aplicação de filtros e efeitos; Variação de amplitude: controle através de simulação de potenciômetro rotativo. Aplicável em cada fluxo de som Elementos HTML principais: tabelas com campos dinâmicos (​angular.js​); Frameworks utilizados: ○ lodash.js ○ jquery.js ○ WebMIDIAPI.js ○ jquery­ui.min.js ○ lib­typedarrays.js ○ jquery.jsPlumb­1.3.16­all­min.js ○ parse­1.2.16.min.js ○ angular.min.js ○ angular­animate.min.js ○ bootstrap.min.js ○ jspm.io/system@0.6.js ○ offline.min.js ○ ngProgress.js ○ intro.min.js ○ intro.js ○ jQuery UI Touch Punch Lalo.li http://lalo.li/ Autor:Franz Enzenhofer Figura 4 Interface do lalo.li, tela única (screenshot do dia 22/07/2015) Apesar de não ser propriamente musical, o Lalo.li é um aplicativo capaz de gerar som a partir de uma entrada de texto dado pelo usuário. Similar aos sintetizadores de voz como os utilizados pelo google translator, mas permite o controle sobre certos parâmetros de audio como amplitude, altura, velocidade e espaçamento entre as palavras. ● Aparência: O layout centralizado, com a predominância do campo de texto lembra a página do google. Os botões de controle oferecem um feedback colorido dos valores registrados. Abaixo, links para ferramentas de compartilhamento e para o código­fonte do projeto no ​github​. (figura 4); ● Modo de controle da interface: O site oferece um campo de texto, onde o usuário pode escrever ou colar um texto. Ao lado, um botão de ​play​, que reproduz o texto através de um sintetizador de voz. Embaixo do campo de texto, existem controles de amplitude, tom (​pitch​), velocidade e espaçamento entre as palavras, or meio de botões radiais ou ​inputs de ● ● ● ● ● ● número. Além disso o site oferece ferramentas para compartilhamento nas redes sociais; Sistema de geração de som:​ síntese; Variação de frequência: possibilidade de variação de frequencia de 1 a 100 atráves de controle por botão giratório ou input de texto; Variação de timbre:​ não varia ; Variação de amplitude: controle por simulação de potenciômetro rotativo e input numérico; Elementos HTML principais:​ ​divs​ e ​input​ de texto; Framework utilizado:​ ​jquery.min.js Multiplayer piano http://www.multiplayerpiano.com/ Autor:​ Brandon Lockaby Figura 5 Interface do multiplayer piano, tela principal. (screenshot do dia 22/07/2015) O multiplayer piano é um piano ​online coletivo, onde se pode interagir com outros usuários por ​chat de texto ou tocando. Fornece suporte para entrada midi. Oferece suporte MIDI, com sensibilidade de velocidade; Possui 11,000 compartilhamentos no ​Facebook e é o único que carrega anúncios no campo principal. Parece ter uma comunidade de usuários ativa que inclui pianistas virtuoses. ● Aparência: A página traz em primeiro plano um desenho de teclas de piano. (figura 5). No topo, aparecem quadrados coloridos com o nome dos usuários online, cada um com uma cor diferente. A posição do mouse de cada um na tela aparece acompanhada do nome, e quadrados coloridos com a cor do respectivo usuário aparecem nas teclas quando são acionadas. O fundo é um tom esverdeado bem claro por onde acontece o chat o texto que cada um escreve aparece na cor pré­determinada. Quando se aciona a barra de ​chat​, o piano fica em segundo plano e o fundo fica escurecido. A aparência em geral é de um site antigo. Um gatinho no topo sinaliza a janela de contatos, ​links e apoio ao site. Uma barra horizontal inferior traz opções de sala e MIDI, assim como anúncios publicitários; ● Modo de controle da interface: O ​multiplayer piano é um serviço de chat e instrumento musical interativo coletivo. Quando entra, cada usuário online ganha uma cor, e pode escolher seu nome, ou permanecer como anônimous. Ele pode tocar, com o mouse, com o teclado ou com uma interface MIDI, teclas de uma simulação de piano, interagir com os demais usuários por chat ou simplesmente ouvir outras pessoas tocando ou conversando. Existe a possibilidade de trocar de sala ou de criar a própria sala, que pode ser compartilhada por link. Clicando sobre o nome dos usuários é possivel deixá­lo mudo no chat ou no piano. Também é possivel curtir a página do aplicativo e entrar em contato com o desenvolvedor, doar dinheiro e acessar fóruns de discussão. ● Sistema de geração de som:​ síntese; ● Variação de frequência: 88 notas controladas pelo teclado, pelo clique do mouse ou por controlador midi externo; ● Variação de timbre:​ não varia; ● Variação de amplitude:​ varia por MIDI e por controle tipo ​slider​; ● Elementos HTML principais:​ divs e canvas; ● Frameworks​ utilizados: ○ jquery.min.js ○ midibridge­0.5.3.min.js Patatap http://www.patatap.com/ Autor:​ Jono Brandel Figura 6 Interface do patatap, tela inicial. (screenshot do dia 22/07/2015) O site funciona como uma espécie de bateria eletrônica, acionado pelo teclado. Cada tecla dispara um sample diferente, e a barra de espaço muda o conjunto de samples. Conforme as teclas são acionadas, um filme é composto na tela. ● Aparência: minimalista; o menu horizontal inferior só aparece com o movimento do mouse para baixo. A base é uma tela monocromática, que serve de fundo para animações abstratas com formas geométricas sincronizadas com sons. A tela inicial é cinza, mas a barra de espaço alterna entre diferentes esquemas cromáticos; ● Modo de controle da interface: Após um tempo de espera, uma uma tela cinza inicial instrui o usuário a acionar as teclas de "A a Z" e também oferece links para o usuário baixar versões em aplicativo para IOS ou Android. Cada tecla aciona uma animação vetorial diferente, cada uma com seu som próprio, e a tecla de espaço alterna entre kits de ​samples audiovisuais. Sempre que o mouse é acionado para baixo, surge um menu horizontal na parte inferior, com link para contato por ​e­mail​, produtos dos autores à venda, link para embeber o aplicativo e página com exemplos de músicas feitas por terceiros; ● Sistema de geração de som:​ sampler; ● Variação de frequência: 156 (26x6) possibilidades diferentes pré­determinadas, a maioria de sons percussivos. As teclas de A­Z acionam samples e a barra de espaço alterna entre seis conjuntos de samples; ● Variação de timbre:​ não varia; ● Variação de amplitude:​ não varia; ● Elemento HTML principal:​ svg; ● Frameworks​ utilizados: ○ url.js ○ jquery.js ○ tween.js ○ two.js Plink http://dinahmoelabs.com/plink Autor:​ DinahMoe (empresa) Figura 8 – Plink, tela principal. (screenshot do dia 22/07/2015) É uma plataforma musical multiusuário. Ao entrar, o usuário pode escolher entre uma gama de instrumentos e pode clicar para soltar samples. Os demais usuários online aparecem como círculos coloridos na tela. (figura 7) ● Aparência: a tela inicial é uma galáxica com o logo da empresa, que desenvolveu o site, em seguida aparece uma tela com o nome do aplicativo e pequenos foguetes coloridos, com um botão ​Start​, como um jogo. Os menus são cinza e o fundo é escuro. As cores utilizadas por cada usuário variam de acordo com os jogos de timbre, mas são na maioria cores saturadas (menu à direita). A posição de cada usuário vai deixando faixas na tela conforme o tempo passa; ● Modo de controle da interface: a tela principal é formada por linhas paralelas horizontais em um fundo escuro, que é a área tocável do instrumento. Cada linha corresponde a uma nota, sendo que as frequências mais graves são as de baixo e as mais agudas as de cima, conforme a conveção musical estabelecida, não existe indicação de qual nota corresponde à cada linha. O ambiente é ​multiplayer​, então aparecem outros usuáros tocando simultaneamente. Um som pulsante de fundo serve de guia para o ritmo, e todos os sons disparados se encaixam em um grid temporal modular. É possivel interagir com o outro usuário somente tocando. Embaixo tem uma barra com instruções e com links para outros trabalhos da empresa, e em cima o título e botões para compartilhamento no twitter, facebook e Google+. A posição do mouse de cada usuário aparece como uma bolinha, que vai deixando um rastro. Com o clique o círculo fica preenchido, e um sample é disparado. Na lateral direita, o usuário pode escolher seu timbre a partir de uma cartela de cores; ● Sistema de geração de som:​ sampler; ● Variação de frequência: 16 faixas pré­estabelecidas controle a partir da posição vertical do mouse sobre a área de ação; ● Variação de timbre: 8 variações pré determinadas, selecionáveis a partir de um menu de cores; ● Variação de amplitude:​ não varia; ● Elemento HTML principal:​ hml canvas; ● Framework​ utilizado: ​platform.js. Spectogram and oscillator http://borismus.github.io/spectrogram/ Autor:​ Boris Smus Figura 9 Interface do Spectogram and oscillator. (screenshot do dia 22/07/2015) O aplicativo cria um spectrograma – gráfico de frequência por tempo – a partir do ​input do microfone ou do clique do mouse, que também aciona um oscilador, com frequência variável em função da posição do mouse na tela. É interessante por utilizar uma implementação de processo de transformada de Fourrier em ​web audio​. ● Aparência: e aparência é bastante minimalista, são poucos os controles e a tela é tomada pelo espectrográfico que se forma ao fundo. Existem duas opções de visualização, com as frequências em tons de cinza sobre fundo branco ou em vermelho sobre fundo amarelo. O menu possui alguns checkboxes, radio buttons e um slider, com cantos agudos, fundo translúcido e fonte monoespaçada. ● Controle: quando o usuário entra na página, o site requisita permissão para usar o microfone embutido. Se não houver microfone é possível ainda utilizar o oscilador. Existe um pequeno menu com opções de controle do gráfico como tipo de escala (logarítimica ou linear), cor, velocidade e a opção de ligar e desligar a régua lateral. Conforme o tempo passa, o fundo vai se movimentando e vão se formando os gráficos de espectro de frequência. O oscilador, cuja frequência aparece em vermelho, deixa uma faixa vermelha enquanto está ligado; ● Sistema de geração de som:​ síntese; ● Variação de frequência: variação ampla de frequência do oscilador, controlados a partir da posição vertical do mouse na tela; ● Variação de timbre:​ não varia; ● Variação de amplitude:​ não varia; ● Elemento HTML principal:​ ​html canvas​; ● Framework​ utilizado: ​polymer.js. Webcam music http://www.karenlabs.com/music/ Autora:​ Karen Peng Figura 10 – Interface do webcam music, tela única. (screenshot do dia 22/07/2015) O site utiliza a ​webcam do usuário como forma de input, quatro loops de audio são ligados e desligados de acordo com o movimento da imagem da câmera. ● Aparência: são poucos os elementos da interface: 4 círculos coloridos, com cores alegres, que mudam de tamanho e pulsam conforme são "acionados". O pequeno menu com ferramentas de compartilhamento tem bordas arredondadas e fica escondido, e só aparece quando se passa o mouse por cima. ● Modo de controle da interface: quando se entra no endereço, o aplicativo solicita acesso à webcam do usuário. O site reconhece quando acontece algum tipo de movimento em quatro áreas determinadas da tela, que disparam loops diferentes que podem se sobrepor. Além dos quatro círculos que circundam a imagem recebida pela câmera, existe somente um pequeno menu com ferramentas para divulgação nas redes sociais; ● ● ● ● ● ● Sistema de geração de som: ​sampler​; Variação de frequência:​ 4 conjuntos diferentes de ​loop​; Variação de timbre:​ não varia; Variação de amplitude:​ não varia; Elemento HTML principal:​ html ​canvas​; Frameworks utilizados: ○ jQuery­v1.8.3.min.js ○ processing­1.4.1.min.js Tonehack http://tonehack.com/ Autor:​ Murat Ayfer figura 11 – Tonehack, tela principal. Outra simulação de piano, mas baseado em por síntese a partir do desenho da onda (​waveshaping​). Permite a inclusão de harmônicos e o desenho do envelope de amplitude e frequência dos mesmos. ● Aparência: O fundo é escuro, no cabeçalho, tem um menu de abas, com fonte ​courrier​. Abaixo, um desenho de teclas de piano, com as letras do teclado correspondentes. Mais abaixo, pistas com desenhos de envelopes de onda sobre fundo quadriculado. O site é em geral escuro, com poucos elementos coloridos, em laranja e alguns em verde. quando as teclas são acionadas, elas ficam cor de laranja. Abaixo dos campos para desenho do timbre, pequenas linhas com instruções e no rodapé, informações e contato. Visual meio escuro, em geral. ● Controle: O usuário pode navegar entre páginas com informações, timpres pré­gravados e informações sobre o projeto. Clicar nas teclas de piano, dispara a nota correspondente. um segundo clique desliga a nota. Também é possível tocar com o teclado, e as teclas correspondentes às notas estão sinalizadas. Os campos de desenho de timbre permitem um desenho de envelope de volume e de ​pitch ao longo do tempo, e é possível desenhar com o clicar do mouse. A página também permite que se incluam novos harmônicos à frequência de base, que também podem ter seus próprios envelopes desenhados. Também é possível savar os resultados alcançados e utilizar timbres construídos por outros usuários; ● Sistema de geração de som:​ síntese; ● Variação de frequência: 60 notas, acionado por clique ou por teclas do teclado; ● Variação de timbre: possibilidade de desenho de timbre e inclusão de harmônicos. Possui uma grande variação de timbres pré­determinados; ● Variação de amplitude: permite variar o valor da amplitude cada harmônico, mas não das notas individualmente; ● Elementos HTML principais:​ ​divs​ e ​canvas​; ● Framework utilizado:​ ​jquery.min.js. Conclusões A partir da quantificação inicial, em que cruzamos os temas e tecnologias dos experimentos, podemos considerar que a área de som e vídeo para a web é de bastante interesse dos programadores criativos selecionados pela equipe de curadoria do CE. A área está em 4 lugar em número de colaborações, com 108 experimentos, atrás somente de exemplos 3d (324 experimentos), jogos (218) e mobile (154). Quando passamos à análise dos experimentos na área reunidos no site, pudemos notar que a maioria pode ser considerada instrumento musical (39), mas que existe também bastante interesse na construção de visualizadores para sons pré­determinados e experiências com formas mais interativas de videoclipe e música, partido de sons pré­gravados (30). Notamos também uma quantidade significativa de sites obsoletos, quebrados e não compatíveis com o equipamento e sistema utilizado na pesquisa, o que pode significar tanto a fragilidade da compatibilidade de alguns processos utilizados, quanto para a possível inviabilidade comercial de outros aplicativos. Apesar de haver uma produção extensa de sites e aplicativos com temática 3D, embasados principalmente nos padrões ​WebGl​, essa tendência ainda não está sendo aplicada na construção de instrumentos musicais. Dentro dos sites categorizados como "som e vídeo", a maioria dos que aplicam as tecnologias 3d são visualizadores de músicas, que criam efeitos especiais visuais para músicas pré­determinadas, e o único instrumento a utilizar interface 3d, faz um uso somente secundário, onde o controle do espaço não gera nenhum tipo de interação sonora. Dentre os experimentos classificados como instrumentos musicais, existe um equilíbribrio entre a quantidade dos que usam síntese como processo de geração de som (18) e os que funcionam a base de ​samples (16). Ainda são poucos (4), no entanto, os que trabalham com processos de transformação de audio. Quanto aos aplicativos selecionados, a análise da aparência mostrou que ainda existe uma grande tendência ao uso da metáfora dos instrumentos tradicionais, pelo menos quatro deles (3d tunes, multiplayer piano, tonehack e HYA.IO) cuja interface simulam pianos. Os ​layouts da maioria dos aplicativos selecionados tem os elementos principais de controle sonoro no centro da página, com excessão do webcam music, cujos acionadores se encontram nos cantos e do patatap, cuja interação acontece somente pelo teclado. A forma de controle predominate é pelo do clique do mouse, e muitos (6) oferecem também a possibilidade de acionamento do som atráves das teclas do teclado, que são os inputs presentes na maioria dos computadores pessoais. A maior parte dos aplicativos funciona com o disparamento de um som de acordo com um determinado clique, num sistema de mapeamento um­para­um. Apenas o HYA.IO e o ​multiplayer ​piano oferecem suporte para o acoplamento de interfaces MIDI. Quanto aos aspectos sonoros, pudemos notar que todos oferem algum tipo de variação de frequência, sendo que 4 deles se amparam no sistema tradicional de nota (3D ​tunes​, HYA.IO, ​multiplayer piano​, ​tonehack​), o Lalo.li e o ​Spectrogram and Oscilator oferem possibilidade de variação de frequência fora da escala musical tradicional. No ​plink​, cada posição do mouse gera uma nota, mas as notas não estão especificadas e os acordes são pré­determinados e no ​webcam ​music​, o controle é somente desligar e ligar 4 ​loops​ pré­determinados. Os timbres, em geral são pré­determinados, somente o ​Tonehack que possibilita uma variação complexa de timbres, através do desenho do envelope das ondas enquanto o HYA.IO permite a alteração do timbre atráves da aplicação de efeitos e os demais funcionam com timbres pré­determinados. A variação de amplitude, certamente um importante requisito para a geração de sons mais ricos, é alcaçada de forma restrita nos aplicativos. Apenas o multiplayer piano​, possui mecanismo para reconhecimento de variação de intensidade de acordo com a repetição de uma mesma tecla, ou via interface MIDI. Nos demais, só é possível alterar, quando muito o volume geral das notas, dificultando a geração de trilhas com variações de volume. Quanto à análise da estrutura HTML percebemos que a maioria dos sites emprega o elemento ​canvas​, que permite a renderização de código JavaScript direto na tela, mas também houve a presença de animações interativas por SVG (Patatap) e a utilização de sistemas de templates dinâmicos (HYA.IO). A análise dos ​frameworks revelou que enquanto programas mais complexos, como HYA.IO, são amplamente amparados por uma série de programas e aplicativos open­source desenvolvidos por terceiros, alguns são criações mais autorais e estão baseadas em códigos específicos. Em geral há um predomínio do emprego do ​jQuery​, que simplifica o uso de alguns processos comuns de ​JavaScript e é empregado em oito dos sites. A análise também revelou ferramentas interessantes em software livre, muitas das quais hospedadas no github que podem ser aplicadas em futuros aplicativos. O HYA.IO, por exemplo que é o mais complexo dos sites, faz uso de 17 bilbiotecas diferentes, para funções desde compatibilidade MIDI, através do ​WebMIDIAPI​, compatibilidade e processamento de audio multi­plataforma com ​SoundManager2​, e é construído baseado em templates baseados em ​Angular​, uma tecnologia desenvolvida pela ​Google em ​JavaScript que permite a fácil integração com sistemas dinâmicos. Para tratar do processamento gráfico, encontramos também uma série de frameworks interessantes como: ● Processing.js (​Webcam ​music​), que emula aplicativos desenvolvidos em ​Processing em linguagem ​JavaScript​, para que sejam interpretados diretamente pelo ​browser​; ● Tween.js, especialmente desenvolvido para animações de transição de movimento; ● Two.js, ferramenta para desenho bi­dimensional em HTML; ● Three.js​, biblioteca para desenhos 3D de baixa complexidade. No geral, notamos que existe uma grande potencialidade de utilização das tecnologias para geração de audio, que já permite um grau bastante significativo de variação e procedimentos clássicos de geração de áudio. Várias das tecnologias envolvidas são open­source, o que possibilita que sejam recombinadas e empregadas em novas experiências. Existe bastante espaço para o desenvolvimento de instrumentos com maior possibilidade de controle e variação dos processos de produçao sonora. Apesar de haver uma forte mediação com sistemas tradicionais de produção musical, no emprego de interfaces que simulam instrumentos tradicionais, alguns experimentos tem um grau mais avançado de desenvolvimento criativo, segundo o conceito de Guilford (Alencar), que considera "que o grau de criatividade seria diretamente proporcional ao grau de originalidade", e ainda existe um grande potencial de desenvolvimento nesse sentido. Referências AYFER, M. ​Tonehack​. Disponível em: http://tonehack.com/. Acesso dia 25 de julho de 2015. BRANDEL, Jono. ​Patatap​. Disponível em: http://www.patatap.com/. Acesso dia 25 de julho de 2015. ______. Two. ​In: Two.js​. Disponível em: h​ ttps://jonobr1.github.io/two.js/​. Acesso dia 25 de julho de 2015. BONSIEPE, G. Retórica Visual­verbal. IN: Design, cultura e sociedade. São Paulo: Edgard Blücher, 2011. 113­140. DOOB, Mr. Three.js – JavaScript 3D library. In: ​Three.js​, 2015. Disponível em: h​ ttps://github.com/mrdoob/three.js/​. Acesso em: 25 de julho de 2015 ENZENHOFER, F. ​Lalo.li​. Disponível em: http://lalo.li/. Acesso dia 25 de julho de 2015 GOOGLE. ​AngularJS — Superheroic JavaScript MVW Framework​. ​In: Angular.js​, 2015. Disponível em: h​ ttps://angularjs.org/​. Acesso em 25 de julho de 2015. ______. ​1,000 Chrome Experiments and counting…​In: Google Chrome Blog,​ 2015. Disponível em: h​ ttp://chrome.blogspot.com.br/2015/02/1000 ­chrome­experiments­and­counting.html.​Acesso em 25 de julho de 2015. ______. ​Chrome Experiments​. ​In: Chromeexperiments.com​, 2015. Disponível em: h​ ttps://www.chromeexperiments.com/​. Acesso em 25 de julho de 2015. HYA.IO. ​HYA.IO​. Disponível em: http://app.hya.io/. Acesso dia 25 de julho de 2015. IAZZETTA, Fernando. 1999. ​Interação, Interfaces e Instrumentos em Música Eletroacústica​. Disponível em: http://www.unicamp.br/~ihc99/Ihc99/AtasIHC99/​ ​AtasIHC98/Lazzetta.pdf. Acesso em: 22 de julho de 2015. IRCAN. WAC, 1st Web Audio Conference. ​In: Wac – IRCAN, 2015​. Disponível em: h​ ttp://wac.ircam.fr/program.html​. Acesso em 25 de julho de 2015. LOCKABY, B. ​Multiplayer piano​. Disponível em: http://www.multiplayerpiano.com/. Acesso dia 25 de julho de 2015. OVERHOLT, Dan. ​The Musical Interface Technology Design Space​. Organized Sound, volume 14, número 02, agosto de 2009, pp 217­226. PENG, K. ​Webcam music​. Disponível em: http://www.karenlabs.com/music/. Acesso dia 25 de julho de 2015. PEPPLER, Kylie e KAFAI, Yasmin. ​Creative Coding: Programming for personal Expression.​ Los Angeles: University of California, 2009. Disponível em: http://kpeppler.com/Docs/2009_Peppler_Creative_Coding_Personal.pdf Acesso em: 20 de julho de 2015. RESIG, ​J. A port of the Processing Visualization Language. ​Processing.js​. Disponível em: ​http://processingjs.org/​.Acesso em: 31 de julho de 2015. SAIZ,V.; MATUSZEWSKI, B; GOLDSZMIDT, S. ​Audio oriented UI components for the web platform.​ In: WAC 21015 – 1st Web Audio Conference, 26 de janeiro de 2015. IRCAM – Centre Pompidou, STMS lab IRCAM­CNRS­UPMC. Disponível em: http://wac.ircam.fr/pdf/wac15_submission_27.pdf​. Acesso em: 25 de julho de 2015 SMUS, B. ​Spectogram and oscillator​. Disponível em: http://borismus.github.io/spectrogram/. Acesso dia 25 de julho de 2015 WANNERSTEDT, C. 3d tunes​. Disponível em: http://playground.christianwannerstedt.com/projects/3d_tunes/. Acesso dia 25 de julho de 2015