p5.jsをWebページの背景にする

p5.jsをwebの背景にする方法

サンプル

クリックすると円を描きます

やり方

JavaScript

function setup() {
  let canvas = createCanvas(300, 300);
  // canvasの位置を指定
  canvas.position(0, 0);
  // canvasを背面に移動
  canvas.style('z-index','-1');
・・・
}

ソース

sketch.js

'use strict';

let obj = [];

function setup() {
  let canvas = createCanvas(300, 300);
  // canvasの位置を指定
  canvas.position(0, 0);
  // canvasを背面に移動
  canvas.style('z-index','-1');
  background(0);
  noFill();
  strokeWeight(5);
  colorMode(HSB);
}

function draw() {
  background(0);
  for(let i = 0; i < obj.length; i++) {
    obj[i].draw();
    if(obj[i].size > width * 2.5) {
      obj.splice(i, 1);
    }
  }
}

function mouseClicked() {
  obj.push(new Shape(mouseX, mouseY));
}

class Shape {
  x;
  y;
  size;
  color;
  speed;

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 10;
    this.color = color(random(0,360), 100, 100);
    this.speed = parseInt(random(1, 10));
  }

  draw() {
    stroke(this.color);
    ellipse(this.x, this.y, this.size, this.size);
    this.size += this.speed;
  }
}

main.html

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>p5.jsを背景にする</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="../../../../lib/p5.js"></script>
  <script src="./sketch.js"></script>
</head>
<body>
  <button onclick="alert('ボタンクリック');">ボタンサンプル</button>
  <input type='test' value='あいうえお'/>
</body>
</html>

参考

https://freyjasrm.com/2020/01/06/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%ABp5-js%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です