目次
概要
本記事では、p5.jsでブラウザで動作するお絵描きアプリを作成します！
ネットで見かけて興味を持ち、少し試したらお絵描きアプリが作れてしまいました😎
- p5.jsとは
- 主な特徴
-
- Processingの精神: スケッチブックに絵を描くようにコードを書くコンセプト
- Webブラウザで動作: 特別な開発環境は不要
- 豊富な機能: 図形描画、アニメーション、画像処理、音声処理など
- 活発なコミュニティ: 情報交換や作品共有が盛ん
- できること
-
- ビジュアルアート: 図形や色を使った作品
- インタラクティブなアニメーション: マウスやキーボードに反応するアニメーション
- ゲーム: 簡単なものから凝ったものまで
- データビジュアライゼーション: データを視覚的に表現
成果物
右側にキー操作の説明を記述してます。
例
書いたやつを全て消したい時は、キーボードのcキー押してください！
それに加えて、画面左上には保存用のボタンを2つ用意しました。
Base64で保存...Base64形式でコンソールに表示します。
PNGで保存...即時ダウンロードフォルダに保存されます。
※注意 CSSによってはマウスカーソルの不自然な箇所から線画でます。
コード
ディレクトリ構成
your_project/
├── index.html
├── main.css
└── index.jsHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p5.jsでお絵描き</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
</head>
<script src="./index.js"></script>
<link rel="stylesheet" type="text/css" href="./main.css">
<body>
<h1>マウスでお絵描きできるよ</h1>
<input type="button" value="Base64で保存" onclick="getBase64()">
<input type="button" value="PNGで保存" onclick="save()">
<div id="body">
<main> </main>
<div id="descriptions">
<pre>
キー操作の説明
c: キャンバスをクリア
+: ブラシサイズを大きくする
-: ブラシサイズを小さくする
r: ブラシの色を赤にする
g: ブラシの色を緑にする
b: ブラシの色を青にする
k: ブラシの色を黒にする
s: 描画を保存
</pre>
</div>
</div>
</body>
</html>JavaScript
let canvas;
let brushSize = 10;
let brushColor = [0, 0, 0];
function setup() {
canvas = createCanvas( 724, 512);
background(255);
}
function draw() {
if (mouseIsPressed) {
strokeWeight(brushSize);
stroke(brushColor);
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
function keyPressed() {
if (key === 'c') {
background(255);
}
if (key === '+') {
brushSize = min(brushSize + 2, 50);
}
if (key === '-') {
brushSize = max(brushSize - 2, 2);
}
if (key === 'r') {
brushColor = [255, 0, 0];
}
if (key === 'g') {
brushColor = [0, 255, 0];
}
if (key === 'b') {
brushColor = [0, 0, 255];
}
if (key === 'k') {
brushColor = [0, 0, 0];
}
if (key === 's') {
saveCanvas('myDrawing', 'png');
}
}
function getBase64() {
if (canvas) {
// canvas が初期化されているか確認
let dataURL = canvas.elt.toDataURL("image/png");
let base64 = dataURL.split(',')[1];
console.log(base64);
return base64;
} else {
console.log("Canvas is not initialized yet.");
return null;
}
}CSS
body{
background-color: antiquewhite;
}
#body{
display: flex;
justify-self:flex-start;
}
main {
border: 20px solid rgb(203, 202, 202);
}
pre{
font-size: 24px;
}
input{
background-color: #4CAF50; /* 背景色 */
border: none; /* 枠線 */
color: white; /* 文字色 */
padding: 10px 20px; /* パディング */
text-align: center; /* 文字を中央に配置 */
text-decoration: none; /* 下線を消す */
display: inline-block; /* インライン要素にする */
font-size: 16px; /* フォントサイズ */
margin: 4px 2px; /* マージン */
cursor: pointer; /* カーソルを指の形にする */
border-radius: 5px; /* 角を丸くする */
}
まとめ
ブラウザ上の開発環境が用意されているので、すぐに試すことができます。
嬉しい！
しかも、使用時少ないコードで試すことができるので本当に簡単に試すことができます！
是非、試してみてね！
おまけ
おまけ１
let canvas;
let brushSize = 10;
function setup() {
canvas = createCanvas( 724, 512);
background(255);
}
function draw() {
let a = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
let c = Math.floor(Math.random() * 256);
let brushSize = (a*b)/1500;
let brushColor = [a, b, c];
if (mouseIsPressed) {
strokeWeight(brushSize);
stroke(brushColor);
point(mouseX, mouseY);
}
}
おまけ2
let canvas;
let brushSize = 10;
function setup() {
canvas = createCanvas( 724, 512);
background(255);
}
function draw() {
let randomNumber = Math.floor(Math.random() * 101);
let a = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
let c = Math.floor(Math.random() * 256);
let brushSize = (a*b)/1500;
let brushColor = [a, b, c];
if (mouseIsPressed) {
strokeWeight(brushSize);
stroke(brushColor);
circle(mouseX, mouseY,randomNumber);
}
}
