let img; // 表示する画像

let img_background; // 背景画像

​

function preload() {

  img = loadImage("img.jpeg");

  img_background = loadImage("background.jpg");

}

​

function setup() {

  createCanvas(200, 200, WEBGL);

  textureMode(NORMAL);

}

​

function draw() {

  background(0);

  image(img_background, -width/2, -height/2, width, height);

  for (i = 0; i < corners.length; i++) {

    circle(corners[i].x, corners[i].y, 10);

  }

  if (corners.length === 4) {

    texture(img);

    beginShape();

​

    vertex(corners[0].x, corners[0].y, 0, 0);

    vertex(corners[1].x, corners[1].y, 1, 0);

    vertex(corners[2].x, corners[2].y, 1, 1);

    vertex(corners[3].x, corners[3].y, 0, 1);

​

    endShape();

     let tempGraphics = createGraphics(100, 100); // 仮のグラフィックスコンテキストを作成

  tempGraphics.background(255); // グラフィックスコンテキストを白で塗りつぶす

  texture(tempGraphics); // 仮のグラフィックスコンテキストをテクスチャとして使用

  }

}

function mousePressed() {

  // クリックした座標をリストに追加

  corners.push(createVector(mouseX - width / 2, mouseY - height / 2));

​

  // 四隅が4つ以上あれば最初の座標を削除してリストを維持

  if (corners.length > 4) {

    corners.shift();

  }

}

​