let wall;

​

function preload() {

  picture = loadImage("white_image.png");

  wall = loadImage("frame.png");

}

​

// 壁画像のサイズ

const wallWidth = 4400;

const wallHeight = 2475;

​

// 壁画像の中にある額縁のサイズ

const pictureWidth = 1750;

const pictureHeight = 1750;

​

// 画面幅に応じてキャンバスの大きさが変わるため不要

let canvasWidth;

let canvasHeight;

​

function setup() {

  canvasWidth = windowWidth;

  canvasHeight = canvasWidth * wallHeight / wallWidth;

  createCanvas(canvasWidth, canvasHeight);

​

  const api_key = "SG_****************";

  const url = "https://api.segmind.com/v1/ssd-1b";

​

  const data = {

    prompt: "Samoyed dog playing club DJ.",

    negative_prompt: "painting",

    samples: 1,

    scheduler: "UniPC",

    num_inference_steps: 20,

    guidance_scale: 9,

    img_width: 1024,

    img_height: 1024,

    base64: false,

  };

​

  fetch(url, {

    method: "POST",

    headers: {

      "Content-Type": "application/json",

      "x-api-key": api_key,

    },

    body: JSON.stringify(data),

  })

    .then((response) => {

      return response.blob();

    })

    .then((data) => {

      var reader = new FileReader();

      reader.onload = function (evt) {

        picture = loadImage(reader.result);

        image(

          picture,

          canvasWidth / 2 - (canvasWidth * pictureWidth) / wallWidth / 2,

          canvasHeight / 2 - (canvasHeight * pictureHeight) / wallHeight / 2,

          (canvasWidth * pictureWidth) / wallWidth,

          (canvasHeight * pictureHeight) / wallHeight

        );

      };

      reader.readAsDataURL(data);

    })

    .catch((error) => console.log("error", error));

}

​

function draw() {

  image(wall, 0, 0, canvasWidth, canvasHeight);

​

  if (picture === undefined) {

    return;

  }

  // 色合いを変更するフィルター

  tint(255, 150, 150, 255);

  image(

    picture,

    canvasWidth / 2 - (canvasWidth * pictureWidth) / wallWidth / 2,

    canvasHeight / 2 - (canvasHeight * pictureHeight) / wallHeight / 2,

    (canvasWidth * pictureWidth) / wallWidth,

    (canvasHeight * pictureHeight) / wallHeight

  );

  noTint();

}

​

// ウィンドウサイズ変更時にキャンバスのサイズを変更

function windowResized() {

  canvasWidth = windowWidth;

  canvasHeight = canvasWidth * wallHeight / wallWidth;

​

  resizeCanvas(canvasWidth, canvasHeight);

}