음악, 삶, 개발

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

아래 포스팅에서 60fps 로 계속 랜더링이 되는것이 많은 자원을 소모한다고 글을 썼었는데, 직접 manual 하게 랜더링할수있는 방법이 있다. 먼저 이야기하면 "필요한 부분만" 랜더링은 불가능하다. 무조건 전체를 다시 랜더링해야한다. (아래서 자세히 설명) PIXI.Application 클래스를 사용하는 대신 직접 PIXI.Renderer 인스턴스를 생성하는것이다. 간단히 버튼을 클릭했을때 색이 바뀌는 코드를 작성해보자. import { Renderer, Sprite, Texture } from 'pixi.js' const renderer = new Renderer({ width : window.innerWidth, height : window.innerHeight, backgroundColor : 0..

Pixi.js 란 라이브러리를 사용해보면서 느낀점을 정리해보려한다. 처음에는 희망에 찬 느낌으로 시작하였는데, 생각보다 매우 치명적인 단점들이 여기저기 존재하였다. 이 단점들을 어떻게 극복해내느냐에 따라 사용할지 말지가 결정될것같다.. 1. 굉장히 정적인 Bitmap 이며 svg 마냥 크기를 늘였다 줄였다하기 힘들다. (거의 불가능) 이것은 Dom 의 세계에서는 전혀 고민하지않았던 부분이다. Ctrl + 를 누르면 글자가 전혀 흐릿함없이 커지고, border radius 도 2rem 같은 단위에 기반하여 같이 자연스럽게 커진다. 하지만 Pixi 에서는 내가 그리는 순간 모든 크기는 고정되어버리며, 다시 그리던지 texture 라는 객체를 미리 준비하여 대비하여야한다. Vector..

html 처럼 자동으로 vector 스럽게 resizing 되는게 아니라, 레스터라이즈된다. https://github.com/pixijs/pixijs/issues/6265

https://www.mod-synth.io/ https://github.com/andrevenancio/mod-synth.io/tree/master/source/app/coffee

https://codepen.io/hz/full/vYNMxBj

https://www.npmjs.com/package/pixi-filters import './style.css' import * as PIXI from 'pixi.js' import { BevelFilter } from '@pixi/filter-bevel' import LeeRectangle from './helper/LeeRectangle' // Create canvas! const app = new PIXI.Application({ resizeTo: window, antialias: true, resolution: window.devicePixelRatio }) document.body.appendChild(app.view) const rects = LeeRectangle.fromBrowser()...