2017-05-09 3 views
0

나는 오디오 파일의 진폭 데이터를 확인하고 이미지에서, 당신은 여기에 조각 여기 http://www.vtxfactory.org/p5/empty-example/자바 스크립트 진폭 이미지

를 볼 수 재현 p5.js로 구축이 스크립트는 JS입니다있다 :

var song, analyzer; 

function preload() { 
    img = loadImage("http://www.vtxfactory.org/images/vtxlogovnl.png");  
    song = loadSound("http://www.vtxfactory.org/sounds/masterflash.mp3"); 
} 

function setup() { 
    createCanvas(250, 250); 
    song.loop(); 

    // create a new Amplitude analyzer 
    analyzer = new p5.Amplitude(); 

    // Patch the input to an volume analyzer 
    analyzer.setInput(song); 
} 

function draw() { 
    background(0, 0, 0, 0) 

    // Get the average (root mean square) amplitude 
    var rms = analyzer.getLevel(); 
    fill(0, 0, 0, 20); 
    stroke(255, 255, 255); 

    image(img, width/3, height/3, 10+rms*200, 10+rms*200); 

} 

어떻게 애니메이션의 축을 이미지의 중간으로 변경할 수 있습니까?

또한 이미지가 증폭되어 정상 크기로 돌아 가면 길을 따라 일부 프레임이 생겨 어떤 방법 으로든 개선됩니다. 투명하게 형식화 된 배경과 관련이있을 수 있지만이 스크립트를 이미지 위에 배치하고 싶습니다.

나는 여기에 내가 https://p5js.org/reference/#/p5/image

감사를 달성하기 위해 노력하고있어 코드에 대한 몇 가지 참조가 있습니다.

답변

0

필자는 p5.js를 많이 사용하지 않았지만 "translate (x, y)"함수를 사용하여 이미지의 중간에서 변환 할 수 있다고 확신합니다. 번역은 너비 (x)의 절반과 높이 (y)의 절반에 해당합니다. 나중에 코딩을 해줄 수도 있습니다. 직접 해결하면 알려주세요.

+0

안녕하세요, 답장을 보내 주셔서 감사합니다. 그것을 시도했지만 결과가 변경되지 않았습니다, 나는 translate (x, y)를 draw() 함수에 두었습니다. –