Fab Lab Seoul과 서울 디자인재단 주최로 진행된 [2016 패션웨어러블 메이커톤]에 

개발자로 참가했었습니다.

옷에 달린 단추를 누르거나 소매에 달린 슬라이더를 조절하여 

스마트폰 뮤직플레이어를 컨트롤하는 웨어러블 디바이스를 개발하는 것이 저희 팀의 목표였고

옷과 스마트폰의 사이에 블루투스 통신할 수 있는 뮤직플레이어 App을 만드는 것이 제 역할이였습니다.



여기서 

▶MAKE A THON 이란? 

의상 제작이 가능한 패션 디자이너와 기획자, 개발자, 2D/3D 디자이너 등 다양한 분야의 메이커들이 팀을 이루어 사전행사와 무박2일의 본행사동안 “패션 웨어러블”을 주제로 Ideation부터 Prototyping 까지 진행하는 메이킹 마라톤입니다.



제가 만든 간단한 뮤직플레이어 App을 소개해드리겠습니다!



Unity3D로

 - 플레이리스트

 - 음악 재생/정지

 - 볼륨 조절

 - 재생 위치 조절


등의 기능이 구현된 간단한 뮤직플레이어를 만들었는데요.

그 중에, 현재 재생되고 있는 음악의 강약을 옷에 달린 LED에 그대로 표현해주기 위해 비쥬얼라이저를 구현했습니다.

화면 가운데에는 PointLight가 있고 하단에는 막대 그래프가 있는데

영상에서 보이는 것 처럼 재생 중인 음악의 세기에 따라 PointLight의 밝기가 반응하고 하단의 막대그래프도 요동치게끔 하였습니다.


이처럼 AudioListener.GetOutputData() 함수를 이용하면 사운드 비쥬얼라이저를 쉽게 구현할 수 있습니다.


https://docs.unity3d.com/ScriptReference/AudioListener.GetOutputData.html



아래는 코드의 일부입니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
using UnityEngine;
using System.Collections.Generic;
 
public class Visualizer : MonoBehaviour
{
    public List<UISprite> target_sprites;
 
    public Light pointLight;
 
    public int detail;
    public float amplitude;
    public float intensityFactor;
 
    private float baseIntensity = 0.1f;
 
    void Update()
    {
        GetOutputData();
    }
 
    private void GetOutputData()
    {
        float[] data = new float[detail];
        float packagedData = 0.0f;
 
        AudioListener.GetOutputData(data, 0);
 
        for (int i = 0; i < data.Length; ++i)
        {
            packagedData += Mathf.Abs(data[i]);
        }
 
        float resultHeight = packagedData * amplitude;
        float resultIntensity = baseIntensity + packagedData * amplitude;
 
        for (int i = 0; i < target_sprites.Count; ++i)
        {
            target_sprites[i].height = (int)(resultHeight * ((i + 1* 0.4f));
        }
 
        pointLight.intensity = (baseIntensity + packagedData) / (detail / intensityFactor);
    }
 
}
cs


여기서 target_sprites 는 아래의 5개 막대를 담은 변수이고

AudioListner.GetOutputData()로 추출된 데이터(packagedData)를 통해 막대그래프의 height와 PointLight의 밝기를 조절하는 코드입니다.




아래는 메이커톤 당시 시연영상입니다~



영상 초중반 부는 팀원의 프로젝터 맵핑 연출이고 후반부 조금은 음악에 LED가 반응하는 모습을 짧게! 볼 수 있습니다.

시연 영상을 제대로 찍지 못해서 아쉬움이 많이 남네요 ㅠㅠ


+ Recent posts