비동기 데이터가로드 된 후 콜백에서 setup() 및 graw() 호출

Question

내 프로젝트에 p5.js를 사용하려하지만 setup() 및 draw() 함수를 호출하는 방법을 알아내는 데 문제가 있습니다. 콜백 함수에서.

내 코드는 다음과 같은 : 당신이, 내가, 그 이미지가 캔버스에 표시려고 다음 이미지 경로를 기능과의 배열을 만드는 5P를 사용하고 볼 수 있듯이

const sentence = "was a French statesman and military leader who rose led several successful close" 
let formats = ["jpg", "png", "gif", "jpeg"] 
let images = [] 

const separate_words = (sentence) => sentence.split(" ") 

const width = window.innerWidth 

const imageExists = (url, callback) => { 
    var img = new Image(); 
    img.src = url; 
    img.onload =() => { callback(true); }; 
    img.onerror =() => { callback(false); }; 
} 


const build_canvas = (array_of_img_urls) =>{ 
    function setup() { 
    createCanvas(width, 300); 
    images = array_of_img_urls.map(url => loadImage(url)) 
    } 

    function draw() { 
    images.forEach(img => { 
     image(img, 0, 0, img.width/images.length, img.height/images.length); 
    }) 
    } 
} 

let items_processed = 0 

formats.forEach((format, indexFormat, arrayFormat) => { 
    separate_words(sentence).forEach((name, indexWord, arrayWords) => { 
    imageExists(`./images/${name}.${format}`, (exists) => { 
     if(exists) 
     images.push(`./images/${name}.${format}`) 

     items_processed++ 
     if(items_processed === (arrayWords.length * arrayFormat.length)){ 
     build_canvas(images) 
     } 
    }) 
    }) 
}) 

.js 라이브러리.

내 질문에, 거기에 콜백 함수를 호출 할 수 있습니다, 또는 노드에서 일부 백 엔드 할 것이다 및 해당로드 된 일단 데이터를 삽입 할?

Answer 1

setup() 또는 draw()으로 직접 전화하지 않아야합니다. P5.js가 자동으로 호출하도록해야합니다. 일반적으로 P5.js 라이브러리가로드 될 때 자연스럽게 발생합니다.

setup() 또는 draw() 함수를 호출 할 필요가 없도록 코드를 리팩토링해야합니다. 여기에 대략적인 아이디어가 있습니다 :

var images = []; 

function setup(){ 
    // load images 
} 

function draw(){ 
    // draw images 
}