p5.js の仕様についてメモ

2022年3月19日 06:25

このnoteのメモは随時更新され書き足されていきます。
最終編集 : 2022/03/19

p5.Element

p5.jsはそもそもhtmlとDOM API, <canvas>の仕組みをうまく使って動いている。
htmlのDOM APIのHTMLElementをwrapperしたという形になっているのがp5.Element。
p5.jsでdomを変数に入れて扱いやすいようにできる。メソッドも用意されている。

createCanvas()
createDiv()
createImg()
createInput()

これらにより、<canvas>, <div>, <img>, <input>などのdomが作られる。

p5.js/src/core/p5.Element.js

基本構造

elt :
Underlying HTML element. All normal HTML methods can be called on this.
pInst :
P5 : pointer to p5 instance (Optional)

https://p5js.org/reference/#/p5.Element/elt

p5.MediaElement

p5.Element classをextendsしているのがp5.MediaElement。
もっと根本的にはDOM APIのHTMLElementをextendsしたHTMLMediaElementをwrapperしているもの。
<video></video><audio></audio>など
そのため、p5.elementと基本構造は一緒となっている。

videoやaudioなどように扱いやすいメソッドが用意されている

new p5.MediaElement(elt)

createVideo(src, [callback])

src
String|String[]: path to a video file, or array of paths for supporting different browsers

createVideo
createAudio
createCapture

HTML <canvas> canvasAPI

<canvas></canvas>タグを用いて、canvasAPIを使用してグラフィックを描画できる仕組み。
canvasはgetContext(context)メソッドを持っていて、contextという概念を持っている。
contextは
getContext('2d')でCanvasRenderingContext2Dが扱える。
getContext('webgl')でWebGLRenderingContextが扱える。これはOpenGL ES 2.0 graphics renderingで動く。2D/3Dのグラフィックが扱える。
getContext('webgl2')でWebGL2RenderingContextが扱える。これはOpenGL ES 3.0 renderingで動く。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d"); //2Dグラフィクの描画に適しているメソッドを使えるようになる。

それぞれのcontextがメソッドを持っていて、
p5.jsがwrapperしているメソッドが使える。

ctx.fillStyle = 'black'; 
ctx.fillRect(15, 10, 150, 100);

p5.Renderer

p5.Elementをextendsしたもの。

new p5.Renderer(elt, [pInst], [isMainCanvas])

elt String: DOM node that is wrapped
pInst P5: pointer to p5 instance (Optional)
isMainCanvas Boolean: whether we're using it as main canvas(Optional)

createGraphics
createCanvas

これらはreturnでp5.Rendererが返される。
基本的にはこれらは中身が空のbufferになっていて、ここに対して

cnv = createCanvas(w, h, [renderer])
graphics = createGraphics(w, h, [renderer])

cnv.rect(x,y,w,h);
graphics.ellipse(x,y,r,r);

renderer Constant:either P2D or WEBGL(Optional)

https://p5js.org/reference/#/p5/createCanvas

画像 / imageについて

p5で画像を扱うにはいくつか種類がある。

loadImage(filePath); return : p5.Image
createImg(src) : src=src path or url for image, return : p5.Element and <img>DOM
createImage();
createGraphics()

Data URLs

data:[<mediatype>][;base64],<data>

基本的に、base64のbinaryデータの形でエンコードされて変換される形式
画像データやhtmlなどといったテキストデータに関しても変換できる。
syntaxとして、data:~~~からはじまる。
[<mediatype>]のところには中身のデータが何が入っているかを表している
MIME types(IANA media types)というものおん定義されているルールで描かれる。jpg画像ならimage/jpeg、png画像ならimage/pngやhtmlならtext/htmlと記載されている。
<data>のところには中のbase64のbinaryデータが入る。

HTMLCanvasElement.toDataURL()

canvas.toDataURL(type, encoderOptions);

type : A DOMString indicating the image format. The default type is image/png; this image format will be also used if the specified type is not supported. Browsers are required to support image/png; many will support additional formats including image/jpg and image/webp.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

encoderOptions (Optional) : A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

p5.File

createFileInput()で作った時のreturnで帰ってくるフォーマットがp5.File

file
1. Underlying File object. All normal File methods can be called on this.
type
1. File type (image, text, etc.)
subtype
1. File subtype (usually the file extension jpg, png, xml, etc.)
name
1. File name
size
1. File size
data
1. URL string containing either image data, the text contents of the file or a parsed object if file is JSON and p5.XML if XML

p5()

p5のsketchごとinstance化して書くことができる。

 s = p => {
  let x = 100;
  let y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x, y, 50, 50);
  };
};

new p5(s); // invoke p5

p5(sketch, node)

sketch Object: a function containing a p5.js sketch
node String|Object: ID or pointer to HTML DOM node to contain sketch in

https://p5js.org/reference/#/p5/p5

The p5() constructor enables you to activate "instance mode" instead of normal "global mode". This is an advanced topic. A short description and example is included below. Please see Dan Shiffman's Coding Train video tutorial or this tutorial page for more info.

https://p5js.org/reference/#/p5/p5

Reference

reference | p5.Element

reference | elt

reference | createVideo()

How to get a P5 image into the DOM? - p5.js / Libraries - Processing Foundation

https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726

HTMLCanvasElement.toDataURL() - Web APIs | MDN

CanvasRenderingContext2D - Web API | MDN

p5.js Cheetsheet.pdf

https://andreasref.github.io/malmedkodning/cheatsheet.pdf