Touchable Sounds

Revisão das 07h16min de 5 de Fevereiro de 2013

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.

Diário

24 de Janeiro de 2013: Decisão do tema da aplicação.

25 de Janeiro de 2013: Criação da página na Wiki do projecto. Anotação do resumo das ideias. Criação do esboço da aplicação.

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.

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

//IMAGEM

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

//V1 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.

//V2 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.

//V3 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

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. 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();