Touchable Sounds
Índice |
Sobre:
Área de conteúdos: Entretenimento
Plataforma: Offline
Paradigma de interacção: Ambiente
Autoria: Paulo Neves | 59734
Memória descritiva
Este projecto foi desenvolvido no âmbito da disciplica de Laboratório Multimédia I para e época de recurso e consiste numa aplicação multimédia interactiva focada no som. Esta aplicação teve como objectivo estudar um conceito para um reprodutor de pequenos Loops de Som podendo assim ajudar a combater uma lacuna ao nível da facilidade de interacção e percepção em equipamentos para o efeito. O conceito principal desta aplicação seria a utilização de um tablet com a aplicação para completar os equipamentos que acompanham um DJ.
Análise e Planeamento
Para perceber como deveria de construir a aplicação falei com um DJ e apliquei conhecimentos ao nível da interactividade e facilidade de utilização em dispositivos com ecrã táctil.
Foi também estudado um projecto da Universidade de Barcelona que explora um conceito semelhante: http://www.dailymotion.com/video/xr3ye_demo-reactable_music#.URCXsKXNnax
Foi decidido então que a aplicação iria disponibilizar um conjunto de loops de som e um "prato" onde esses loops seriam reproduzidos.
A distribuição seria para ser feita na Windows Store e Android Play Store. Não foi possível pois para este efeito seria necessário utilizar a tecnologia Adobe Air que está limitada a Actions Script 3.0.
Desenho Funcional
Utilizando conceitos ligados ao mundo da música e um Paradigma Ambiente foi decidido que os pequenos loops estariam em círculos parecidos com CD's e a stage de reprodução seria um prato de um gira discos. Esta aplicação convida o utilizador a criar a sua própria música, estando apenas limitado aos sons existentes, de uma forma simples, perceptíveis e fácil de aprender baseando-se no minimalismo visual com cores claras e pouco contraste.
Estrutura Arborescente
A aplicação apresenta uma estrutura linear obrigando o utilizador a seguir para a "stage" após a introdução e sem mais conteúdo a ser apresentado.
Usabilidade
A aplicação assenta no Paradigma Ambiente e não contém informação para além da necessária para a utilização da aplicação. Foi desenhada para uma interacção intuitiva e com um mínimo de necessidade de aprendizagem para a sua utilização.
A simplicidade da aplicação dá liberdade a que o utilizador se foque nos sons que cria abstraindo-se de informação desnecessária e que iria atrapalhar o ponto essencial da aplicação que é a criação de música.
A evolução da Stage
Baseada no conceito do projecto Reactable Music da Universidade de Barcelona, foi desenhada a primeira versão do design da aplicação. Nesta versão a aplicação teria a possibilidade de criação e personalização de quatro sons (no interior do rectângulo à direita) que poderiam ser arrastados para a linha central que iria reproduzir os sons nela contida de forma linear e sequencial ou poderia adicionar os sons ao circulo que teria um som central reproduzido em Loop e oito sons reproduzidos de forma sequencial e também linear.
Foi abandonado pelo limite de sons a ser utilizado.
Esta versão adicionou ao ecrã um disco onde iriam ser colocados os sons que iriam ser reproduzidos ao toque pela barra que circula pelo disco. Esta versão deu origem à versão final do projecto. Foi abandonada pois arrastar os "CD's" para o disco ocuparia muito espaço e limitaria o número de CD's a serem utilizados ou criaria confusão visual.
A versão final do design do projecto, criou pequenas bolas no disco que podem ser arrastadas para os CD's ganhando assim as suas propriedades e quando a barra de reprodução passa por elas, as mesmas são dão ordem de reprodução do som associado ao CD com as suas propriedades.
Foram adicionadas também a este design mais opções para a aplicação que não foram implementadas: Repetição, play/stop da barra de reprodução, criação de CD's (os CD's já estão na stage e podem ser personalizados ao nível do volume balance e sons a reproduzir).
Produção do Projecto
Legenda
loop
CD
Disco
Barra de Reprodução
Barra BPM (foi rodada)
Desenvolvimento
O projecto baseou-se na utilização de código para reduzir o número de movie clips e botões necessários na sua concepção incluindo algumas animações como por exemplo o loop a voltar ao seu ponto inicial após ter sido arrastado para um CD ou a rotação da Barra de Reprodução.
O projecto inicia-se com a criação de um array com 8 arrays no seu interior. Este array principal tem como objectivo armazenar as propriedades de cada bola. As propriedades utilizadas na aplicação são a cor do CD, o ID do som, o volume e o balanceamento, estando o código do arraypreparado para adicionar play/pause ao CD e repeat. Foi criado outro array com 48 entradas que irá armazenar o ID do CD associado a cada Loop. A cor dos Loops e dos CD’s, música inicial predefinida dos CD’s, inexistência de CD’s associados aos Loops, volume dos CD’s e balanceamento dos CD’s são definidos inicialmente através do código:
count=0;
if(count==0)
{
count++;
//Código das definições
}
Este pequeno código verifica se é a primeira execução da frame e adiciona as propriedades se a condição se verificar. Este código foi criado por precaução para a inexistência de conflitos com a aplicação das definições iniciais. O Volume e Balanceamento são aplicados no array dado que existe uma função que reproduz os CD’s e essa mesma função aplica estas propriedades aos sons a reproduzir. A cor é aplicada através do código:
var cor = new Color(instanceName); cor.setRGB(0xFFFFFF);
Loops
O código dos Loops é baseado num conjunto de verificação e execução de funções escritas na raiz da aplicação. Essas funções estão distribuídas por 3 funções principais executadas quando o rato clica no Loop, quando o rato larga o Loop e uma função executada à frame rate definida no flash (onEnterFrame). Quando se clica no Loop ele guarda em duas variáveis as suas coordenadas X e Y e inicia o drag para se poder arrastar o Loop até um CD e ele ganhar as suas propriedades. Guarda também numa outra variável (ball_move) a indicação desta acção.
Quando o utilizador larga a bola, o drag é parado e a variável de verificação de movimento por parte do utilizador é alterada, indicando assim que o utilizador já não está a fazer drag a um função explicada a seguir. Ao largar a bola, a aplicação verifica através da função checkSample(), que verifica se o rato se encontra em cima de um dos CD’s através das coordenadas do rato e das coordenadas dos vários CD’s. Se o rato se encontrar em cima de um CD ela executa a função set_balls_color() - ver a seguir - passando por argumento o Instance Name do loop em questão e o CD em no qual o loop se encontra. Caso insto não se verifique passará por argumentação à função set_balls_color() o instance name do loop e o código 10 que representa a ausência de propriedades para o loop.
Como é referido mais atrás, é utilizada a função onEnterFrame do flash que executa uma acção por cada frame do flash. Esta função é utilizada no loop sempre o utilizador larga o loop após um drag o que vai colocar o loop em movimento para a sua localização inicial utilizando as variáveis com a localização do loop e através os seguinte código:
this._x -= (this._x - ball_x) / 2; this._y -= (this._y - ball_y) / 2;
Quando o loop se encontra no seu ponto inicial a variável de indicação de movimento é trocada, e embora não exista movimento como esta mesma variável foi trocada, esta função de movimentação do loop para de ser executada, librando o dispositivo que executa a aplicação de processamento desnecessário.
set_balls_color(instanceName, PropertyID)
function set_balls_color(instanceName, ballColor){
var ID=instanceNameToID(instanceName);
//guarda o ID do som a reproduzir
ballsSample[ID]=ballColor;
//retorno da nova cor no array à bola
if (ballColor<10)
return samples[0][ballColor];
else return 0x888888;
return 0x000000;
}
Esta função recebe por argumento o nome do loop que necessita de novas propriedades, separa o texto do número no nome (“ball_11” passa a “ball_” e a “11”), guarda o número numa variável e acede ao array dos loops à variável correspondente ao seu número, guardando nele o código da cor que recebeu que será a cor do CD onde foi largado ou o código 10 para a ausência de informação.
Caso o código seja o código 10, irá retornar a cor 0x888888, cinzento dos loops sem propriedades. Caso exista um código válido, a função acede ao array dos CD’s através do ID que recebeu por argumentação e retorna a cor correspondente a esse mesmo CD.
Sempre que esta função é executada, aplica propriedades aos loops e retorna uma cor que será utilizada para alterar a cor do loop em questão.
Quando existe um erro nas verificações da função, ela retorna o código 0x000000 que corresponde à cor preto.
Existe um erro nos loops que pode causar uma descoordenação da sua posição original. Ficando o loop a movimentar-se com o rato quando é largado com o rato em movimento (este erro foi verificado também em dispositivos tácteis). Poderá ser solucionado utilizando a função onMouseUp, mas esta função aplica as propriedades de um CD a todos os loops quando clicado, mesmo sem se estar a arrastar o Loop, ou através da criação de um array que contém as coordenadas X e Y (sendo que actualmente essas coordenadas são acedidas através de código Action Script 2.0 e podem ser alteradas quando este erro acontece) de cada Loop e a reutilização da função criada para que o loop volte à sua localização inicial. Este código não foi criado por limitações de tempo.
Barra de Reprodução
A animação da barra de rotação é controlada através da propriedade _rotate. Através desta propriedade consegue-se o total controlo da velocidade de rotação da barra, o que não seria possível com tanta facilidade de tivesse sido utilizado um Movie Clip.
O Código de rotação utiliza uma função matemática que define a velocidade de rotação que utiliza valores necessário para aproximar a velocidade dos valores de BPM definidos, que mesmo assim podem sofrer de pequenos atrasos não controlado influenciados por atraso no processamento da aplicação:
num+=(Math.PI/12)*(velocity)/2;
A variável velocity é controlada pela barra BPM explicada a seguir.
Os valores de cada Batida correspondem a uma volta de 90 graus da barra, ou seja, para 60 BPM's, a barra dá 60 voltas de 90 graus num minuto, o que totaliza 15 voltas de 360 graus num minuto.
Como a propriedade _rotate define uma rotação em graus (entre 0 e 360) quando a variável num ultrapassa os 360 é executado o código “num=num-360;” que permite que a barra continue a sua rotação sem interrupções e sem deixar uma variável ficar sempre a somar sobre ela.
Após a soma da rotação da barra e utilizando o ângulo dela, é executado código que verifica a localização da barra nos sectores dos loops. Quando isso se verifica, é executada a função que ordena a reprodução dos sons dos loops em questão - playSound(loop) - e uma verificação de reprodução do sector, evitando assim a reprodução de um sector inúmeras vezes enquanto a barra passa nele. Este código consiste na alteração de uma variável de verificação para do sector para falso após a primeira reprodução. Essa variável volta a verdadeiro após a reprodução do sector seguinte.
Existe um erro em velocidades altas que faz com que a rotação seja superior à passagem por um sector ou o processamento do computador não acompanhar a execução da função, criando assim por vezes a falha da reprodução de sons. Esta erro poderia ser parcialmente resolvido com uma framerate superior evitando uma variação grande do ângulo entre frames.
Barra BPM
Esta barra existe para a alteração da velocidade da barra de rotação.
É criado o Drag do rectângulo branco da barra BPM e através da função setBpm() é acedido à coordenada Y deste mesmo rectângulo que através do código velocity=int((bpm_value._y-39)/8)+30 devolve à variável velocity um valor entre 30 e 105. Esta função foi baseada nas coordenadas limite da barra e nos valores mínimos e máximos pretendidos para a velocidade.
CD
Quando se carrega no botão touch no CD é reproduzido um movie clip que contém um esquema das propriedades que podem ser alteradas no CD: Balanceamento, Volume e a música.
A alteração destas propriedades é alterada através da função setProperties() que recebe por argumento o Instance Name do CD a ser alterado.
Esta função tem como objectivo aceder às coordenadas do rato e baseando-se no centro da do CD que recebe por argumento detecta a propriedade que vai ser alterada quando o utilizador larga o botão do rato (que num dispositivo touch seria representado por retirar o dedo do ecrã, funcionalidade que foi testada).
Quando o utilizador mantém o rato clicado (ou o dedo no ecrã) é acompanhado por uma representação de uma palheta que lhe mostra que opção vai ser alterada e para que valores. Estas definições são alteradas constantemente pela função set_sample_info() baseada na estrutura da função setProperties().
setSampleName()
Esta função atribui ao texto dos CD’s o nome da música associada ao mesmo. Utiliza para o efeito a função getSampleName() que recebe por argumentação o ID do CD a alterar o som e acede ao array onde estão guardados os nomes das músicas devolvendo a String com o nome.
Movie Clip autoRefresh
Esta aplicação não funcionaria sem este movie clip. Dado que a função onEnterFrame é limitada e falível, foi utilizado um movie clip sem conteúdo, apenas com código replicado em duas frames. Com isto consegue-se com que ao ritmo dos fps definidos na aplicação exista uma execução de certas função.
Essas funções são:
sample_info_set(_root.sample_info_sample);
barRotate();
setBpm();
setSamplesName();
Som
Sendo a aplicação uma aplicação relacionada com a música todos os sons foram editados com uma taxa de amostragem de 44100Hz, 32 bits e 128kbps.
Opções por implementar
Dadas as limitações de tempo existiram demasiadas ideias para a aplicação que não foram implementadas:
sistema de repetições
Existiria uma função que guardaria o valor inicial e final da repetição e reproduziria o som entre esses valores assim como o Disco também estaria limitado por um sistema semelhante reproduzindo apenas alguns sectores seleccionados do mesmo.
Play, Stop e Rewind
Existiria uma função que pararia a rotação da barra de reprodução e um botão que levaria essa mesma barra para os 0 graus. O código foi inicializado mas não foi concluído.
Criação de CD's
A criação de CD's seria feita pelo utilizador com um toque numa zona reservada e propriedades definidas na sua criação.
Futuro da aplicação
Dado o potencial do conceito, o futuro da aplicação passaria por uma conversão do código para Action Script 3.0 permitindo assim a utilização da aplicação em tablet's Android mais recentes de uma forma mais fluída e eficaz. A aplicação teria também uma pasta associada com sons adicionados pelo utilizador e uma barra (com drag para quantidade avultadas de sons) de sons do lado esquerdo dos CD's para que o utilizador possa adicionar esses mesmos sons através de arrastamento aos CD's evitando assim as limitações de espaço do ecrã.
