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

この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

p5.js/p5.Element.js at v1.4.1 · processing/p5.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

reference | p5.js

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 API - Web API | MDN

<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

reference | p5.js

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 URLs - HTTP | MDN

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

reference | p5.js

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()

reference | p5.js

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 | p5.js

reference | elt

reference | p5.js

reference | createVideo()

reference | p5.js

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

HTMLCanvasElement.toDataURL() - Web APIs | MDN

CanvasRenderingContext2D - Web API | MDN

CanvasRenderingContext2D - Web API | MDN

p5.js Cheetsheet.pdf

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