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

学習日

8月5日 火曜日

名前

中村 結

✅ 練習問題 4-3-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');
  photo[3] = loadImage('img/yuichi.jpg');
  photo[4] = loadImage('img/kaori.jpg');
}

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

function draw() {
  background(220);

  for (let i = 0; i<5; i++) {
    image(photo[i], 50*i +80, 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;
}

📷 実行結果

写真が5枚になって表示される

まとめ

image( 表示する画像の種類、画像の左上の端のx座標、画像の左端のy座標 )を表せる

コメントする