04-03　写真をサムネイル表示

学習日

2025年7月1日

名前

樋口桜大

自分で作った図形（コードと画像）

✅ 例題 4-3-1

例題4-2-1の写真を使って、サムネイル表示した３枚の写真をクリックすると、

その写真が大きく表示されるようにしよう。

コード

let photo = [null, null, null];
let n = 0;

function preload() {
  photo[0] = loadImage('img/olive.jpg');
  photo[1] = loadImage('img/mint.jpg');
  photo[2] = loadImage('img/rukka.jpg');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  for (let i = 0; i<3; i++) {
    image(photo[i], 50*i +125, 10, 50, 65);
  }
  image(photo[n], 100, 80, 202, 268);
}

function mousePressed() {
  let x = Math.floor((mouseX - 125) / 50);
  if (0 <= x && x < 3)
    n = x;
}

📷 実行結果

上に三枚の写真、その写真をクリックすると、クリックした写真が真ん中に大きく表示されればOK！

✅ 練習問題 4-3-1

写真を５枚に増やして表示できるようにしよう。

📷 実行結果

ポイント：上の五枚の写真は、左右対称になるように配置する！

まとめ・感想

・繰り返しなどに使う式などで、どこの数字を変化させれば、写真の枚数を増やせるのかを考えて実行することができた。前の単元の復習ができた。

・上の五枚の写真の配置は、最初の時と一緒にすると左右非対称になってしまうため、座標をずらして、左右対称にするところはこれからも使えると思った。

・マウスでクリックした位置のｘ座標と、写真を配置する座標の変化の値と、写真の横幅の値を使って、出した答えから何番目の写真を表示するのかを求める式を理解することができた。これを踏まえて、これからは、一つ一つの命令の意味を順々に理解して取り組んでいきたいと思った。