【p5.js】の練習！「クリエイティブコーディング」のソースコード！【学習メモ】

テクノロジー

2021.03.04 2020.01.31

マウスカーソルに合わせて、クリエイティブに動きます！

HTML

<!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="myscript.js"></script>
</body>
</html>

JavaScript

function setup() {
  createCanvas(600, 200);
  noStroke();
  fill(255);
  colorMode(HSB, 360, 100, 100, 255);
}

function draw() {
  background(0);

  const step = 30;

  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, 45);
      fill(map(sin(d * 0.05), -1, 1, 60, 320), 100, 100);
      rect(x, y, size, size);
    }
  }
}
function setup() {
  createCanvas(600, 200);
  noStroke();
  fill(255);
  colorMode(HSB, 360, 100, 100, 255);
}

function draw() {
  background(0);

  const step = 30;

  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, 45);
      fill(map(sin(d * 0.05), -1, 1, 60, 320), 100, 100);
      rect(x, y, size, size);
    }
  }
}

おさかなへの応援メッセージ！おさかなに聞きたい事、質問！記事にしてほしい内容！などを大募集中！
「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください！