음악, 삶, 개발

앞서 addevent 를 사용하여 이벤트를 추가하는 방법을 배웠다. addevent 가 가장 기본적인 방법이긴하나, 동시에 수십개의 이벤트를 한번에 집어넣고싶다던지 한다면 결국 js 를 통해 루프를 만들어야할텐데 꽤나 귀찮은 작업일수있다. addevent 를 여러번 호출해서 이벤트를 추가하는 방법보다, 한번에 객체를 [mtr] 에 할당하는 방식으로 [dict] 를 넘길수있다. 먼저 [dict] 에 이벤트들을 작성한다. /* [dict] 안에 들어갈 데이터 */ { "tracks":[ { "events":[ { "time":0.0, "message":"list", "args":[ 1000.0, "two" ] }, { "time":0.0, "message":"list", "args":[ 0.0, "one" ..

addevent 라는 메세지를 통해서 [mtr] 에 특정 시점에 이벤트를 추가할수있다. 이 시점은 ms 또는 @sync 1 일 경우 tick 으로 정의된다. tick 으로 정의되는 경우는 추후 다른 포스팅에서 설명하도록 하고, 먼저 ms 로 event 를 추가하는 방법을 알아보겠다. addevent 메세지는 기본적으로 2개의 인자를 받게되는데, 첫번째는 어느 시점에 추가할지 ms인 float 이고, 두번째는 이벤트명이다. 하지만 이벤트명만으로는 이벤트를 추가하는데에 충분하지않다. 우리는 다양한 정보들 (velocity, pitch 등등) 을 저장하고싶을것이다. 이때는 길이의 제약없이 $3 $4 $5... 계속 늘려나갈수있고 이는 array 가 된다. ..

위와 같이 myFunction 이라는 함수를 한 파일안에서 만들었고, 이를 여러 파일에서 불러서 사용하는 상황을 생각해보자. 개발을 하다보면 여러 helper 함수나 클래스를 만들게되기때문에 이와 같은 상황은 무조건 일어난다고 보면 된다. 이때 내가 만든 myFunction 이라는 함수명을 변경했을때, 이를 사용하는 나머지 파일의 함수명이 변경되지않는다면 에러가 발생한다. 애초에 default export 를 하면 되지않느냐고 반문할수있으나, 이렇게 pure function 인 경우는 가능하지만, 클래스를 만들었고, 함수들이 그안에 존재하고있다면 어짜피 named export 인 셈이다. 다행히도 VSCode 자체에서 해당 프로젝트안에 모든 파일에 해당 이름을 찾아 한번에 변경하는 방법이 존재한다. Cm..

객체는 복사하지않는 이상, 대입할 경우 reference 임을 우리는 알고있다. 하지만 막상 개발을 하고 앱이 굉장히 커지면 reference 를 value 라고 착각하는 바보같은 실수를 하게된다. 방금 내가 한 실수로 인해, 3시간동안 디버깅한 결과 경우 실수를 찾아냈다. 아래와 같은 경우였다. const DEFAULT_VALUES = [1, 2, 3] class Foo { public values = DEFAULT_VALUES // 여기가 문제!!!!!!!!!!! public setValue(index: number, value: number): void { this.values[index] = value } } const f1 = new Fo..

https://stackoverflow.com/questions/26663494/algorithm-to-draw-waveform-from-audio https://matt.aimonetti.net/posts/2015-12-audio-dsp-demystified-sampling/ https://matt.aimonetti.net/posts/2019-06-generating-waveform-data-audio-representation/ https://matt.aimonetti.net/posts/2019-07-drawing-waveforms-in-flutter/ https://github.com/bbc/audiowaveform https://pudding.cool/2018/02/wav..

https://www.npmjs.com/package/tonal https://github.com/tonaljs/tonal 음악 관련 패키지가 그리 많지는 않지만 쓸만한 라이브러리이다. 노트를 이것저것 변환할때 유용하다.

https://www.npmjs.com/package/fdir fdir The fastest directory crawler & globbing alternative to glob, fast-glob, & tiny-glob. Crawls 1m files in < 1s www.npmjs.com 이 라이브러리를 꽤 오래전에 사용했었는데, 겨우 다시 찾았다. 만약 샘플 브라우저를 만들게된다면, 사용자의 폴더안에 있는 모든 샘플들의 경로를 다 가져올수있어야한다. (빠른 시간안에) 이때 이 fdir 라이브러리를 사용하여 Node For Max 에서 구현했었는데, 정말 빨랐다. 몇십만개 샘플이 들어가 있는 폴더를 테스트했었는데, 정말 몇초 걸리지않았다. 반면에 C 로 구현된 Max 의 [folder] 객체를 사용할..

일단 관련 자료들을 검색중이다. https://www.html5gamedevs.com/topic/33044-pixi-sprites-are-blurry-on-mobile-devices/ https://www.html5gamedevs.com/topic/42955-solved-how-to-scale-the-pixijs-view-without-making-the-game-blurry/ https://bleepcoder.com/pixi-js/579640185/i-want-to-make-a-responsive-screen-like-a-demo https://www.html5gamedevs.com/topic/26880-blurry-text-in-pixijs/ https://github.com/pixijs/pixijs..

먼저 코드를 보자. // https://pixijs.download/dev/docs/PIXI.BitmapFont.html BitmapFont.from("LeeFont", { fontFamily: 'sans-serif', fontSize: 100, fontWeight : '700', fill: 'white', }, { chars : [ ...BitmapFont.ALPHANUMERIC, // 모든 알파벳, 숫자 포함. (특수기호 제외) '△', '#', '(', ')', ',', '-' // 여기 직접 특수기호들 추가 ]}) const bitmapText = new BitmapText(text, {fontName : 'LeeFont', fontSize : 14 }) this.stage.addChild(bit..

여러가지 랜더링 방안을 생각해봤으나, 내가 만드는건 게임이 아니기에, 이벤트가 발생될 경우에만 랜더링을 하도록하였고, CPU 사용량을 굉장히 줄일수있었다. PIXI.Ticker 는 심지어 blank canvas 에서도, gpu 와 cpu 를 20프로씩 소모한다. 하나의 인스턴스로 보통 로딩되는 게임과 달리, 여러개의 플러그인창이 열리는 음악 제작 환경에서는 Ticker 보다는 이벤트가 발생할때만 render 함수를 호출하도록 클래스를 만들었다. import { Renderer, Container } from 'pixi.js' import LeeColor from './LeeColor' const BROWSER_WIDTH = window.innerWidth const BROWSER_HEIGHT = wind..