p5.jsを触ってみた
2020-06-29
2020-06-29
p5.jsとは
p5.jsは、webブラウザで描画などが容易に作れるJavaScriptライブラリです。今回はp5.jsのガイドに従って実行してみました。
p5.jsで描画してみた
まずはHTML内にp5.jsスクリプトを読み込みます。
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
```<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
つぎは四角形や三角形、丸形の図形を描画してみました。
```function setup() {
createCanvas(300, 300);
background(255, 250, 250);
}
function draw() {
stroke(0, 0, 255);
strokeWeight(2);
rect(10, 100, 80, 80);
triangle(120, 165, 148, 110, 176, 165);
ellipse(240, 140, 72, 72);
}
```createCanvas(300, 300);
background(255, 250, 250);
}
function draw() {
stroke(0, 0, 255);
strokeWeight(2);
rect(10, 100, 80, 80);
triangle(120, 165, 148, 110, 176, 165);
ellipse(240, 140, 72, 72);
}
実行結果は以下のようになります：
マウスをクリックしたら描画をする。
```function setup() {
createCanvas(300, 300);
background(255, 250, 250);
}
function draw() {
stroke(0, 0, 255);
strokeWeight(4);
if (mouseIsPressed === true) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
```createCanvas(300, 300);
background(255, 250, 250);
}
function draw() {
stroke(0, 0, 255);
strokeWeight(4);
if (mouseIsPressed === true) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
画像を表示させてみる。
```let img;
function setup() {
createCanvas(400, 400);
img = loadImage('./img_wordcloud.png');
}
function draw() {
image(img, 0, 0, width, height);
}
```function setup() {
createCanvas(400, 400);
img = loadImage('./img_wordcloud.png');
}
function draw() {
image(img, 0, 0, width, height);
}
画像ファイルをアップロードして表示させてみる。
```let input;
let img;
function setup() {
input = createFileInput(handleFile);
input.position(0, 0);
createCanvas(400, 400);
}
function draw() {
background(255);
if (img) {
image(img, 0, 0, width, height);
}
}
function handleFile(file) {
if (file.type === 'image') {
img = createImg(file.data, '');
img.hide();
} else {
img = null;
}
}
```let img;
function setup() {
input = createFileInput(handleFile);
input.position(0, 0);
createCanvas(400, 400);
}
function draw() {
background(255);
if (img) {
image(img, 0, 0, width, height);
}
}
function handleFile(file) {
if (file.type === 'image') {
img = createImg(file.data, '');
img.hide();
} else {
img = null;
}
}
実行結果は以下のようになります：
