学習日
2025年6月24日
名前
樋口桜大
自分で作った図形（コードと画像）
✅ 例題 4-2-1
1秒ごとに画像が1枚ずつ切り替わるスライドショーを作ろう。
コード
let photo = [];
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(202, 268);
frameRate(1); // 1秒に1回
}
function draw() {
background(220);
image(photo[n], 0, 0, 202, 268);
n = (n + 1) % 3;
}📷 実行結果
順番に出てくるようになればOK！
✅ 練習問題 4-2-1
上の例題を参考にして、1秒ごとに切り替わるスライドショーとして、
表示される写真を5枚に増やそう。
コード
let photo = [];
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(202, 268);
frameRate(1); // 1秒に1回
}
function draw() {
background(220);
image(photo[n], 0, 0, 202, 268);
n = (n + 1) % 5;
}📷 実行結果
さっきの三枚の写真のあとに、今の二枚の写真が連続して映ればOK!
まとめ・感想
・繰り返し映るように、「％」を使った式でどうすれば、何回も繰り返して映すことができるかを考えるのが難しかった。