大人になって気づいてしまった

私は毎日夢を見ます。

ほとんどの夢は、私が主役の物語です（笑）
脇役の夢は見たことがないと言っていいくらい
主役に憧れがあるんでしょうね・・・

私がよく見る夢

・魔法の絨毯にのって空を自由に飛びながら冒険する
・ヒーローになって困っている街のみんなを救う
・ほうきにのって登下校する　
→ 大体、授業中に悪役が現れるため、
　変身して悪役の心を救いにいく

など数え切れないほど様々な物語の夢を見ます。

しかし夢が覚めると気づいてしまうのです。
数秒前まで使えてた魔法が
現実に戻った時には使えないということを。

救世主が現れた！！

最近、p5.jsというものを知りました。
p5.js：https://editor.p5js.org/

これなら現実でも魔法が使えそう！！

仲良くChat GPTと一緒に作成してみました！

⇩矢印キーを使って空飛べるよ！ぜひやってみてね！

難易度が上がった！夜景バージョン

こちらから↓

かなりシュールですが
今回は自由に動くことができる朝ver.を一緒に作ってみましょう！

作ってみよう！

①　Chat GPTに作りたいことを伝えます

・魔法の絨毯にのって
　空を飛べるものを「p5.js」を使って作りたい
・絨毯の上に人を乗せたい
・雲を動かせるようにしたい

②　「index.html」と「sketch.js」のコードを
　　教えてもらいp5.js（https://editor.p5js.org/ ）に
　　それぞれ入力します

index.htmlのコードはこちら


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Magic Carpet with Moving Clouds</title>
  <!-- p5.js ライブラリの読み込み -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <!-- 自作の JavaScript ファイルの読み込み -->
  <script src="sketch.js" defer></script>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
</body>
</html>

sketch.jsのコードはこちら

// 魔法のじゅうたんのインスタンス
let magicCarpet;
// 絨毯の移動速度
let carpetSpeed = 5;

// 雲の位置と速度
let cloud1X, cloud2X;
let cloudSpeed1 = 1;
let cloudSpeed2 = 2;

function setup() {
  createCanvas(windowWidth, windowHeight);
  magicCarpet = new MagicCarpet(width / 2, height / 2);

  // 雲の初期位置
  cloud1X = -200;
  cloud2X = width + 100;
}

function draw() {
  drawBackground();

  // 雲を動かす
  cloud1X += cloudSpeed1;
  cloud2X -= cloudSpeed2;

  // 雲が画面外に出たら反対側から再度表示する
  if (cloud1X > width + 200) {
    cloud1X = -200;
  }
  if (cloud2X < -200) {
    cloud2X = width + 100;
  }

  // 矢印キーの入力を受け取り、絨毯を移動させる
  if (keyIsDown(LEFT_ARROW)) {
    magicCarpet.move(-carpetSpeed, 0);
  } else if (keyIsDown(RIGHT_ARROW)) {
    magicCarpet.move(carpetSpeed, 0);
  } else if (keyIsDown(UP_ARROW)) {
    magicCarpet.move(0, -carpetSpeed);
  } else if (keyIsDown(DOWN_ARROW)) {
    magicCarpet.move(0, carpetSpeed);
  }

  magicCarpet.display();
}

// 背景を描画する関数
function drawBackground() {
  // 空の描画
  let skyColor = color(135, 206, 235);
  background(skyColor);

  // 雲の描画
  fill(255);
  noStroke();
  ellipse(cloud1X, 150, 100, 60);
  ellipse(cloud1X + 60, 130, 120, 70);
  ellipse(cloud1X + 120, 150, 100, 60);

  ellipse(cloud2X, 100, 150, 80);
  ellipse(cloud2X - 100, 130, 120, 70);
  ellipse(cloud2X - 200, 100, 150, 80);

  // 街の風景を描画
  fill(50);
  rect(0, height - 100, width, 100); // 地面
  fill(100);
  rect(100, height - 200, 80, 100); // ビル1
  rect(300, height - 300, 120, 200); // ビル2
  rect(500, height - 250, 100, 150); // ビル3
  rect(700, height - 350, 150, 250); // ビル4
}

// 魔法のじゅうたんのクラス
class MagicCarpet {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 150; // じゅうたんの幅
    this.height = 100; // じゅうたんの高さ
    this.mainColor = color(138, 43, 226); // 紫色
    this.edgeColor = color(255, 255, 0); // 黄色
  }

  move(dx, dy) {
    // 絨毯を移動する
    this.x += dx;
    this.y += dy;

    // 画面端に到達したら反対側から出てくるようにする
    if (this.x > width) {
      this.x = 0;
    } else if (this.x < 0) {
      this.x = width;
    }

    if (this.y > height) {
      this.y = 0;
    } else if (this.y < 0) {
      this.y = height;
    }
  }

  display() {
    // 絨毯の基本形状
    noStroke();
    fill(this.mainColor);
    rect(this.x, this.y, this.width, this.height, 10); // 角を丸めた四角形

    // 絨毯の外側の縁
    strokeWeight(5);
    stroke(this.edgeColor);
    noFill();
    rect(this.x - 5, this.y - 5, this.width + 10, this.height + 10, 15); // 外側の縁

    // 絨毯の柄
    noStroke();
    fill(255, 0, 0);
    rect(this.x + 10, this.y + 10, this.width - 20, this.height - 20, 5); // 内側の四角形
    fill(0, 0, 255);
    ellipse(this.x + this.width / 2, this.y + this.height / 2, 20, 20); // 中央の円

    // 人の描画
    this.displayPerson();
  }

  displayPerson() {
    // 顔
    fill(255, 224, 189); // 肌色
    ellipse(this.x + this.width / 2, this.y + this.height / 2 - 20, 30, 30); // 頭
    fill(0);
    ellipse(this.x + this.width / 2 - 7, this.y + this.height / 2 - 25, 5, 5); // 左目
    ellipse(this.x + this.width / 2 + 7, this.y + this.height / 2 - 25, 5, 5); // 右目
    ellipse(this.x + this.width / 2, this.y + this.height / 2 - 15, 10, 5); // 鼻
    ellipse(this.x + this.width / 2, this.y + this.height / 2 - 10, 15, 7); // 口
    rect(this.x + this.width / 2 - 10, this.y + this.height / 2 - 5, 20, 40); // 体
    fill(0, 102, 153);
    rect(this.x + this.width / 2 - 15, this.y + this.height / 2 + 35, 10, 20); // 左足
    rect(this.x + this.width / 2 + 5, this.y + this.height / 2 + 35, 10, 20); // 右足
    fill(255, 204, 0); // 黄色
    rect(this.x + this.width / 2 - 25, this.y + this.height / 2 - 5, 10, 30); // 左腕
    rect(this.x + this.width / 2 + 15, this.y + this.height / 2 - 5, 10, 30); // 右腕
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

③　▶️を押したら 完成‼️

矢印キーを使って
魔法の絨毯を自由に動かすことができます。

空飛べちゃいましたね！！

リアリティを求めて

シュール過ぎますよね。思います。

このシンプルな作りから、
より現実に近づけるために
今後こだわりたい点がたくさんあります。

⇩NG集や今後の成長はこちらから見られます。

みんなで一緒に、空を飛べる日が来ますように！