非同期データがロードされた後にコールバックでsetup（）とgraw（）を呼び出す

Question

プロジェクトにp5.jsを使用しようとしていますが、setup()とdraw()の関数を呼び出す方法がわかりませんコールバック関数で

私のコードは次のようなものになります。あなたが見ることができるように

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) 
     } 
    }) 
    }) 
}) 

を、私は、画像に機能しているルートの配列を作成し、それらのイメージがキャンバスに表示されるように取得しようと、5Pを使用しています.jsライブラリ。

私の質問は、コールバックでこれらの関数を呼び出す方法はありますか、またはNodeでバックエンドを行い、ロードしたらデータを挿入しますか？

Answer 1

自分でsetup()またはdraw()に電話しないでください。 P5.jsがあなたに自動的に呼び出させるようにしてください。通常、これはP5.jsライブラリがロードされたときに自然に発生します。

setup()またはdraw()関数を呼び出す必要がないように、コードをリファクタリングする必要があるようです。

var images = []; 

function setup(){ 
    // load images 
} 

function draw(){ 
    // draw images 
}