動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Creative Coding</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
function setup() {
createCanvas(600, 200);
noStroke();
fill(255);
colorMode(HSB, 360, 100, 100, 255);
}
function draw() {
background(0);
const step = 20;
for (let y = 0; y <= height; y += step) {
for (let x = 0; x <= width; x += step) {
const d = dist(x, y, mouseX, mouseY);
const size = map(sin(d * 0.05), -1, 1, 0, 10);
fill(map(sin(d * 0.05), -1, 1, 60, 320), 100, 100);
ellipse(x, y, size, size);
}
}
}
サーバーとの接続が切断されました。ブラウザを再読込してみてください。
保存しました
ファイル構成
- index.html
- sketch.js
ブラウザ実行環境を使ってみよう！
このレッスンでは、こちらにコードを打ち込みながら学習を進めていくことができます。
手元で実際に動作を確認しながら理解を深めていくと良いでしょう。
この機能を利用するには無料のユーザー登録が必要です。
