0. 準備

完成版の「study.json」ファイル

以下のファイルを右クリックでダウンロードしてください。このファイルをBuilderで読み込めば，完成した状態の実験プログラムを確認することが出来ます。

左側のメニューのフロッピーアイコンの▼をクリック→ Open で以下のファイルを指定

osg-p5+lab-demo2-2020-05-02--15_11.study.json

1. 画像の描画

1.1. 画像を非同期で読み込み，使えるようにする

「p.setup」内で画像をロードします。その際に，p.loadImage関数により非同期で読み込み，成功したら画像を使えるようにします。

画像は，以下のリンゴの画像「1.jpg」を使います。以下のサイトからリンゴの画像（1.jpg）をダウンロードし，「static」フォルダに入れてください。

評定課題（多肢選択・Screen使用）

以下のように画像ファイルをアップロードしておきます。

また，プログラムの冒頭に「img」を定義しておきます。

const component = this;
let img = null;

「setup」内に以下のように「loadImage」関数を定義します。この関数の２つ目の引数は，「読み込み成功時に呼ばれる関数（コールバック）」です。つまり，読み込みが成功した場合に，「img」に読み込み済の画像オブジェクト「lordedImg」を入力します。

 p.setup = function () {
    p.createCanvas(
      component.options.el.clientWidth,
      component.options.el.clientHeight
    );
    p.loadImage("static/1.jpg", (loadedImg) => {
      img = loadedImg;
    });
  };