let frame; //画像の変数imgを定義

​

let bubbles = [];

​

function preload() {

  frame = loadImage("frame.png");

  picture = loadImage("samoyed.png");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

//     const api_key = "SG_1a152342b25f06ca";

//     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: "10",

//       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) => {

//           console.log(response);

//           return response.blob();

//         }

//       ).then((data)=>{

//         console.log(data);

//         var reader = new FileReader();

//         reader.onload = function(evt) {

//           picture = loadImage(reader.result)

//           image(

//     picture,

//     windowWidth / 2 - (windowWidth * frameWidth) / wallWidth / 2,

//     windowHeight / 2 - (windowHeight * frameHeight) / wallHeight / 2,

//     (windowWidth * frameWidth) / wallWidth,

//     (windowHeight * frameHeight) / 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);

  }

}

​

const frameWidth = 1163;

const frameHeight = 1163;

const wallWidth = 4400;

const wallHeight = 2475;

​

function draw() {

  // フィルターをかける

  // ここでは、夕陽の色合いを持つオレンジ色のフィルターをかけています

  fullscreen();

  //　夕陽

  tint(255, 150, 0, 255);

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

  tint(255, 255, 150, 255);

  // 月光の色調に変更するフィルター（青みがかった色合い）

  tint(120, 150, 255, 255);

  // 昼間の光の色調に変更するフィルター（明るく、暖かみのある色合い）

  tint(255, 230, 180, 255);

  image(frame, 0, 0, windowWidth, windowHeight);

    // フィルターを解除

  if (picture === undefined) {

    return;

  }

  image(

    picture,

    windowWidth / 2 - (windowWidth * frameWidth) / wallWidth / 2,

    windowHeight / 2 - (windowHeight * frameHeight) / wallHeight / 2,

    (windowWidth * frameWidth) / wallWidth,

    (windowHeight * frameHeight) / wallHeight

  );

  noTint();

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

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

    bubbles[i].move();

    bubbles[i].display();

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

// バブルのクラス

class Bubble {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.radius = random(20, 50);

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

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

  }

​

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

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

}