headタグの中に以下の2行を追加する。
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="sketch.js"></script>index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【p5.js】p5.jsをCDNから読み込む</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
sketch.js
function setup() {
let canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0, 0);
}
function draw() {
fill(0);
rect(0, 0, width, height/2);
fill(255);
rect(0, height/2, width, height/2);
arc(width/2, height/2, 300, 300, PI, TWO_PI);
fill(0);
arc(width/2, height/2, 300, 300, 0, PI);
arc(width/2, height/2, 290, 290, PI, TWO_PI);
fill(255);
arc(width/2, height/2, 290, 290, 0, PI);
}
今回の場合、境界線的な(？)スケッチが画面いっぱいに表示される。
