情報学基礎実習 「p5.js」(2025)

https://gyazo.com/d773bde7497431a88c6dc08b20c46204

授業の目的

コーディングによる画像/映像表現を学ぶ

参考

次年度以降に学習する、ArduinoやProcessingの敷居を下げる

はじめに

OpenProcessingのアカウントを作る

ユーザーネーム、プロフィール画像は匿名でも良い

作成したコードは、すべからくインターネット上に公開されるため

メールアドレスは大学のものでなくても構わない

教材

p5.js 基礎編

p5.js 発展編

映像教材

p5.js reference (関数一覧)

課題

p5.jsで時計を作る

サンプル

code: digital.js

function setup() {

createCanvas(400, 200);

textAlign(CENTER, CENTER);

textSize(48);

}

function draw() {

background(30);

fill(255);

let hr = nf(hour(), 2); // nfで2桁ゼロ埋め

let mn = nf(minute(), 2);

let sc = nf(second(), 2);

text(hr + ":" + mn + ":" + sc, width / 2, height / 2);

}

code:analog.js

function setup() {

createCanvas(400, 400);

angleMode(DEGREES); // 角度を度数法で扱う

}

function draw() {

background(240);

translate(width / 2, height / 2);

rotate(-90); // 12時を上に合わせる

let hr = hour();

let mn = minute();

let sc = second();

// 秒針

let scAngle = map(sc, 0, 60, 0, 360);

stroke(255, 0, 0);

strokeWeight(2);

line(0, 0, 120 * cos(scAngle), 120 * sin(scAngle));

// 分針

let mnAngle = map(mn, 0, 60, 0, 360);

stroke(0);

strokeWeight(4);

line(0, 0, 100 * cos(mnAngle), 100 * sin(mnAngle));

// 時針

let hrAngle = map(hr % 12 + mn / 60, 0, 12, 0, 360);

stroke(0);

strokeWeight(6);

line(0, 0, 70 * cos(hrAngle), 70 * sin(hrAngle));

// 時計の外枠

noFill();

stroke(0);

strokeWeight(8);

ellipse(0, 0, 300, 300);

}

ルール

コードは50行程度(多いぶんにはOKです)

加点条件

乱数を使用している

インタラクションがある

マウスのカーソル移動、キーボードの入力

授業資料の内容を超越しても構いません

ただし参照したWEBや文献等がある場合は、出典をコード中にコメントしましょう

〆切は授業翌週の金曜日終日

ヒント

サンプルをカスタムするところから始めると楽

例) 色を変えてみる、フォントを変えてみる

うまくできたら乱数要素を入れてみる

例) 背景色が変化する、秒針のかたちがグネグネになる

うまくできたら、インタラクションをいれてみる

例) マウスをクリックすると12時間表示/24時間表示を切り替える

課題の提出方法

1. OpenProcessingでプロジェクトをSave->Submitする

必ずやる

サムネイルを作る

Tagsに isd2025 を入れる

https://gyazo.com/d1500da457fc4ced0c1adecfb78e1e8b

2. 自分のプロジェクトが表示されているか確認する

表示されていない作品は評価対象外になることがある

もし表示されていない場合は Tagsにisd2025が入っているか確認する

3. プロジェクトのURLとコードを提出する

9月26日(金) 15時00分〜10月3日(金) 23時59分まで

留意事項

提出されたコードは第三者からも閲覧可能になる

成績が確定するまで、提出したコードをOpenProcessingから削除してはいけない

2026年4月1日以降は自由