​

let picture;

let wall;

​

let bubbles = [];

​

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

​

  // 初期のバブルを生成

  for (let i = 0; i < 10; i++) {

    let bubble = new Bubble(random(width), random(height));

    bubbles.push(bubble);

  }

}

​

function draw() {

  // 朝陽の色調に変更するフィルター

  tint(255, 255, 150, 255);

​

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

​

  if (picture === undefined) {

    return;

  }

  image(

    picture,

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

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

    (canvasWidth * pictureWidth) / wallWidth,

    (canvasHeight * pictureHeight) / wallHeight

  );

​

  // 各バブルを更新して表示

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

    bubbles[i].move();

    bubbles[i].display();

  }

​

  noTint();

}

​

function windowResized() {

  canvasWidth = windowWidth;

  canvasHeight = canvasWidth * wallHeight / wallWidth;

  resizeCanvas(canvasWidth, canvasHeight);

}

​

// バブルのクラス

class Bubble {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.radius = random(10, 20);

    this.speedX = random(-1, 1);

    this.speedY = random(-1, 1);

  }

​

  // バブルを動かすメソッド

  move() {

    this.x += this.speedX;

    this.y += this.speedY;

​

    // 画面外に出たら再配置

    if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {

      this.x = random(width);

      this.y = random(height);

    }

  }

​

  // バブルを表示するメソッド

  display() {

    noStroke();

​

    // バブルの本体（ラドリアル グラデーション）

    let radiusGradient = this.radius * 1.5;

    let bubbleColor = color(180, 230, 255, 100);

    let centerColor = color(180, 230, 255, 0);

    radialGradient(this.x, this.y, radiusGradient, bubbleColor, centerColor);

​

    // バブルの影

    let shadowColor = color(0, 20);

    let shadowRadius = this.radius * 1.5;

    let shadowBlur = 10;

    dropShadow(this.x, this.y, shadowRadius, shadowColor, shadowBlur);

  }

}

​

// ラドリアル グラデーションを描画する関数

function radialGradient(x, y, radius, c1, c2) {

  for (let r = radius; r > 0; r--) {

    let inter = map(r, 0, radius, 0, 1);

    let c = lerpColor(c1, c2, inter);

    fill(c);

    ellipse(x, y, r * 2);

  }

}

​

// 影を描画する関数

function dropShadow(x, y, radius, shadowColor, shadowBlur) {

  fill(shadowColor);

  noStroke();

  ellipse(x, y, radius * 2);

}

​