P5.js 日本語リファレンス

2024/05/10 更新: buildGeometry()を作成しました。
2024/05/08 更新: beginGeometry()、endGeometry()を作成しました。
2024/05/04 更新: normal()を作成しました。
2024/05/02 更新: beginClip()、endClip()、clip()を作成しました。
2024/05/02 更新: 3年半ぶりに更新を再開しました｡現時点での最新版であるv1.9.3までに追加されたAPIを一覧に追記しました｡内容については今後順次記載していきます｡

---

この記事は公式の p5.js Reference を日本語化し手直ししたものです。

このページは「P5.js 日本語リファレンス」のメインページ ( 目次 ) です。
API別に各々のページへリンクしています。

[3D]
[Color]
[Shape]
[Constants]
[Environment]
[Structure]
[DOM]
[Rendering]
[Foundation]
[Transform]
[Data]
[Events]
[Image]
[IO]
[Math]
[Typography]

1. Color

1-1 Creating & Reading

• alpha()：指定した色からアルファ値(透明度)を取得します。
• red()：指定した色から赤の値を取得します。
• green()：指定した色から緑の値を取得します。
• blue()：指定した色から青の値を取得します。
• hue()：指定した色から色相値を取得します。
• saturation()：指定した色から彩度値を抽出します。
• brightness()：指定した色からHSB輝度値を取得します。
• lightness()：指定した色からHSL明度値を取得します。
• lerpColor()：2つの色をブレンドしてそれらの間にある中間色を取得できます。
• color()：colorデータ型の変数に格納する色を作成します。
• p5.Color：カラーデータを扱います。

1-2 Setting

• beginClip() [v1.9.3]：描画内容の一部をマスクする(覆い隠す)ための形状を定義します。
• endClip() [v1.9.3]：描画内容の一部をマスクする(覆い隠す)ための形状を定義します。
• clip() [v1.9.3]：描画される内容の一部をマスクする(覆い隠す)ための形状をcallback関数で定義します。
• background( )：background() は p5.js キャンバスの背景に使用される色を設定します。
• clear( )：バッファ内のピクセルをクリアします。
• colorMode( )：colorMode() は p5.js がカラーデータを解釈する方法を変更します。
• fill( )：図形の塗りつぶしに使用する色を設定します。
• noFill( )：塗りつぶしを無効にします。
• noStroke( )：図形の周りに線や境界線の描画を無効にします。
• stroke( )：図形の周りに線や境界線を描くために使用する色を設定します。
• erase( )：erase() に続くすべての描画はキャンバスから差し引かれます。
• noErase( )：erase() で開始された消去(差し引き)を終了します。

2. Shape

2-1 2D Primitives

• arc( )：円弧を描画します。
• ellipse( )：楕円を描画します。
• circle( )：真円を描画します。
• line( )：線を描画します。
• point( )：点を描画します。
• quad( )：頂点の角度を90°に限定しない四角形を描画します。
• rect( )：長方形を描画します。
• square( )：正方形を描画します。
• triangle( )：三角形を描画します。

2-2 Attributes

• ellipseMode( )：楕円が描画される位置を変更します。
• noSmooth( )：すべてのジオメトリをギザギザのエッジで描画します。
• rectMode( )：長方形が描画される場所を変更します。
• smooth( )：すべてのジオメトリを滑らかなエッジで描画します。
• strokeCap( )：LINEの端形状を設定します。
• strokeJoin( )：LINE を接続するジョイントのスタイルを設定します。
• strokeWeight( )：線、点、図形の周囲の境界線に使用されるストロークの幅を設定します。

2-3 Curves

• bezier( )：3次ベジェ曲線を描画します。
• bezierDetail( )：bezier曲線が表示される解像度を設定します。
• bezierPoint( )：ポイント a、b、c、d の位置 t の bezier 値を算出します。
• bezierTangent( )：ポイント a、b、c、d の位置 t での bezier への接線を算出します。
• curve( )：中央の4つのパラメータとして指定された2点間に曲線を描画します。
• curveDetail( )：曲線が表示される解像度を設定します。
• curveTightness( )：curve() および curveVertex() で作成された曲線の曲率(カーブのきつさ)を変更します。
• curvePoint( )：ポイント a、b、c、d の位置 t の曲線の値を算出します。
• curveTangent( )：ポイント a、b、c、d の位置 t での曲線への接線を算出します。

2-4 Vertex

• beginContour( )：beginContour() と endContour() を使用して、"O" のような中抜き形状の図形を描画します。
• beginShape( )：beginShape() および endShape() を使用すると、より複雑な図形を作成できます。
• bezierVertex( )：ベジェ曲線の頂点座標を指定します。
• curveVertex()：曲線の頂点座標を指定します。
• endContour( )：beginContour() と endContour() を使用して、"O" のような中抜き形状の図形を描画します。
• endShape( )：endShape() はbeginShape() とペアであり、beginShape() の後でのみ呼び出すことができます。
• quadraticVertex()：2次ベジェ曲線の頂点座標を指定します。
• vertex()：すべての形状を一連の頂点を接続することによって構築します。
• normal() [v1.9.3] 形状の頂点の法線ベクトルを設定します。

2-5 3D Primitives

• beginGeometry()[v1.9.3] p5.Geometry オブジェクトへ図形の追加を開始します。

• endGeometry()[v1.9.3] p5.Geometry オブジェクトへ図形の追加を終了します。

• buildGeometry() [v1.9.3]単純な 3D 形状から複雑な 3D 形状を作成して p5.Geometryオブジェクトにすることができます。

• freeGeometry() [v1.9.3]

• plane()：指定した幅と高さで平面を描画します。

• box()：指定した幅、高さ、奥行きでボックスを描画します

• sphere()：指定した半径で球を描画します。

• cylinder()：指定した半径と高さで円柱を描画します。

• cone()：指定した半径と高さで円錐を描画します。

• ellipsoid()：指定した半径で楕円体を描画します。

• torus()：指定した半径とチューブ半径でトーラスを描画します。

• p5.Geometry() [v1.9.3]

2-6 3D Models

• loadModel()：OBJファイルまたはSTLファイルから3Dモデルをロードします。
• model()：3Dモデルを画面にレンダリングします。

3. Constants

• HALF_PI：π の半分を持つ数学定数です。
• PI：π を持つ数学定数です。
• QUARTER_PI：π の 1/4 を持つ数学定数です。
• TAU：2πを持つ数学定数TWO_PIのエイリアスです。
• TWO_PI：2π を持つ数学定数です。
• DEGREES：角度を 例えば円は０°〜３６０°で扱います。
• RADIANS：角度を 例えば円は 0.0 〜 2π (6.28318531)で扱います。

4. Environment

• describe() [v1.9.3]
• describeElement() [v1.9.3]
• textOutput() [v1.9.3]
• gridOutput() [v1.9.3]
• print()：print() はブラウザのコンソール領域に書き込みます。
• frameCount：システム変数 frameCount には、プログラムの開始以降に表示されたフレームの数が格納されています。
• deltaTime：システム変数 deltaTime には、前のフレームの開始と現在のフレームの開始の間の時間差がミリ秒単位で格納されています。
• focused：p5.j​​s プログラムが置かれているウィンドウが「フォーカスされている」かどうかを確認します。
• cursor()：カーソル形状を定義済みの記号または画像に設定するか、すでに非表示になっている場合はそれを表示します。
• frameRate()：毎秒表示するフレーム数を指定します。
• getTargetFrameRate() [v1.9.3]
• noCursor( )：カーソルを非表示にします。
• webglVersion() [v1.9.3]
• displayWidth：デフォルトの pixelDensity に従って画面表示の幅を格納するシステム変数。
• displayHeight：デフォルトの pixelDensity に従って画面表示の高さを格納するシステム変数。
• windowWidth：ブラウザなどのウィンドウの幅を格納するシステム変数。
• windowHeight：ブラウザなどのウィンドウの高さを格納するシステム変数。
• windowResized()：windowResized() は、ブラウザウィンドウのサイズが変更されるたびに1回呼び出されます。
• width：描画キャンバスの幅を格納するシステム変数。
• height：描画キャンバスの高さを格納するシステム変数。
• fullscreen()：引数の値に基づいてスケッチを全画面表示にするかどうかを設定します。
• pixelDensity()：高ピクセル密度ディスプレイのピクセルスケーリングを設定します。
• displayDensity()：スケッチが実行されている現在のディスプレイのピクセル密度を返します。
• getURL()：現在のURLを取得します。
• getURLPath()：現在のURLパスを配列として取得します。
• getURLParams( )：現在のURLパラメータをオブジェクトとして取得します。

5. Structure

• preload( )
• setup( )
• draw( )
• remove( )
• disableFriendlyErrors
• noLoop( )
• loop( )
• isLooping() [v1.9.3]
• push( )
• pop( )
• redraw( )
• p5( )

6. DOM

• p5.Element
• select( )
• selectAll( )
• removeElements( )
• changed( )
• input( )
• createDiv( )
• createP( )
• createSpan( )
• createImg( )
• createA( )
• createSlider( )
• createButton( )
• createCheckbox( )
• createSelect( )
• createRadio( )
• createColorPicker( )
• createInput( )
• createFileInput( )
• createVideo( )
• createAudio( )
• createCapture( )
• createElement( )
• p5.MediaElement
• p5.File

7. Rendering

• p5.Graphics：Graphics バッファオブジェクトの作成に使用されます。

• createCanvas()：スケッチにキャンバス要素を作成してその寸法をピクセル単位で設定します。

• resizeCanvas()：キャンバスを指定した幅と高さにサイズ変更します。

• noCanvas()：キャンバスを必要としないp5スケッチのデフォルトのキャンバスを削除します

• createGraphics()：新しい p5.Graphics オブジェクト(グラフィックスバッファオブジェクト)を作成して返します。

• createFramebuffer() [v1.9.3]

• clearDepth() [v1.9.3]

• blendMode()：指定したモードに従って表示ウィンドウのピクセルをブレンドします。

• drawingContext：ネイティブな HTML5 Canvas 機能をdrawingContext を使用して呼び出します。

• setAttributes()：WebGL描画コンテキストの属性を設定します。

• p5.FrameBuffer() [v1.9.3]

8. Foundation

• let
• const
• ===
• >
• >=
• <
• <=
• if-else
• function
• return
• boolean
• string
• number
• object
• Array [v1.9.3]
• class
• for
• while
• JSON
• console
• JSON [v1.9.3]
• console [v1.9.3]
• === [v1.9.3]
• ＞ [v1.9.3]
• ＞= [v1.9.3]
• ＜= [v1.9.3]
• const [v1.9.3]
• return [v1.9.3]

9. Transform

• applyMatrix( )：現在の行列にパラメータで指定された行列を乗算します。
• resetMatrix( )：現在の行列を単位行列に置き換えます。
• rotate( )：角度パラメータで指定された量だけ形状を回転させます。
• rotateX( )：X軸を中心に回転します。
• rotateY( )：Y軸を中心に回転します。
• rotateZ( )：Z軸を中心に回転します。
• scale( )：頂点を拡大および縮小することにより、形状のサイズを拡大または縮小します。
• shearX( )：角度パラメータで指定された量だけ X軸を中心に形状をせん断変形します。
• shearY( )：角度パラメータで指定された量だけ Y軸を中心に形状をせん断変形します。
• translate( )：表示ウィンドウ内のオブジェクトを移動する量を指定します。

10. Data

10-1 LocalStorage

• storeItem()：キー名でローカルストレージに値を格納します。
• getItem()：storeItem() を使用してローカルストレージに保存したアイテムの値を取得します。
• clearStorage()：storeItem() で保存したすべてのローカルストレージアイテムをクリアします。
• removeItem()：storeItem() で保存したローカルストレージアイテムを削除します。

10-2 Dictionary

• createStringDict()：指定したキーと値のペアまたはオブジェクトを使用して p5.StringDict の新しいオブジェクトを作成します。
• createNumberDict()：指定したキーと値のペアまたはオブジェクトを使用して p5.NumberDict の新しいオブジェクトを作成します。
• p5.TypedDict：すべての p5.Dictionary タイプの基底クラス。
• p5.NumberDict：Numbers の単純な Dictionary クラス。

10-3 Array Functions

• append()：配列の最後に値を追加します。配列の長さを1だけ拡張します。
• arrayCopy()：配列(または配列の一部)を別の配列にコピーします。
• concat()：引数で指定した2つの配列を連結します。
• reverse()：配列の順序を逆にします。
• shorten()：配列を1要素だけ減らし、短縮された配列を返します。
• shuffle()：配列の要素の順序をランダム化します。
• sort()：数値の配列を最小から最大にソートするか、単語の配列をアルファベット順に並べます。
• splice()：値または値の配列を既存の配列に挿入します。
• subset()：既存の配列から要素の配列を抽出します。

10-4 Conversion

• float( )：文字列をその浮動小数点表現に変換します。
• int( )：ブール値、文字列、または浮動小数点数をその整数表現に変換します。
• str( )：ブール、文字列、または数値をその文字列表現に変換します。
• boolean：ブール値は true(真) または false(偽) のみの値を持ちます。
• byte( )：数値、数値の文字列表現、またはブール値をそのバイト表現に変換します。
• char( )：数値または文字列を対応する単一文字の文字列表現に変換します。
• unchar( )：単一文字の文字列を対応する整数表現に変換します。
• hex( )：数値を同等の16進表記の文字列に変換します。
• unhex( )：16進数の文字列表現を同等の整数値に変換します。

10-5 String Functions

• join( )
• match( )
• matchAll( )
• nf( )
• nfc( )
• nfp( )
• nfs( )
• split( )
• splitTokens( )
• trim( )

11. Events

11-1 Acceleration

• deviceOrientation
• accelerationX
• accelerationY
• accelerationZ
• pAccelerationX
• pAccelerationY
• pAccelerationZ
• rotationX
• rotationY
• rotationZ
• pRotationX
• pRotationY
• pRotationZ
• turnAxis
• setMoveThreshold( )
• setShakeThreshold( )
• deviceMoved( )
• deviceTurned( )
• deviceShaken( )

11-2 Keyboard

• keyIsPressed
• key
• keyCode
• keyPressed( )
• keyReleased( )
• keyTyped( )
• keyIsDown( )

11-3 Mouse

• movedX
• movedY
• mouseX
• mouseY
• pmouseX
• pmouseY
• winMouseX
• winMouseY
• pwinMouseX
• pwinMouseY
• mouseButton
• mouseIsPressed
• mouseMoved( )
• mouseDragged( )
• mousePressed( )
• mouseReleased( )
• mouseClicked( )
• doubleClicked( )
• mouseWheel( )
• requestPointerLock( )
• exitPointerLock( )

11-4 Touch

• touches
• touchStarted( )
• touchMoved( )
• touchEnded( )

12. Image

• createImage()：新しい p5.Image (画像を格納するためのデータ型)を作成します。これは、操作するピクセルの新しいバッファを提供します。
• saveCanvas()：現在のキャンバスを画像として保存します。
• saveFrames()：ムービーの作成に使用できる一連のフレームをキャプチャします。
• p5.Image：新しいp5.Imageを作成します。

12-1 Loading & Displaying

• loadImage()：パスから画像を読み込み、そこからp5.Imageを作成します。
• saveGif() [v1.9.3]
• image()：画像を p5.js キャンバスに描画します。
• tint()：画像を表示するための塗りつぶしの値を設定します。
• noTint()：画像を表示するための現在の塗りつぶしの値を削除し、元の色相の画像の表示に戻します。
• imageMode()：画像モードを設定します。 image() に指定されたパラメータが解釈される方法を変更することにより、画像が描画される場所を変更します。

12-2 Pixels

• pixels()：表示ウィンドウのすべてのピクセルの値を含む配列。1ピクセルは[R、G、B、A]で表現します。
• blend()：指定されたブレンドモードを使用して、ある画像から別の画像にピクセルの領域をコピーして操作を実行します。
• copy()：キャンバスの領域の一部をキャンバスの別の領域にコピーします。
• filter()：フィルターをキャンバスに適用します。
• get()：キャンバスからピクセルの領域または単一のピクセルを取得します。
• loadPixels()：表示ウィンドウのピクセルデータをpixels配列に読み込みます。
• set()：任意のピクセルの色を変更するか、画像をキャンバスに直接書き込みます。
• updatePixels()：表示ウィンドウを pixels配列のデータで更新します。

13. IO

13-1 Input

• loadJSON( )
• loadStrings( )
• loadTable( )
• loadXML( )
• loadBytes( )
• httpGet( )
• httpPost( )
• httpDo( )
• p5.XML

13-2 Output

• createWriter( )
• p5.PrintWriter
• save( )
• saveJSON( )
• saveStrings( )
• saveTable( )

13-3 Table

• p5.Table
• p5.TableRow

13-4 Time & Date

• day( )
• hour( )
• minute( )
• millis( )
• month( )
• second( )
• year( )

14. Math

14-1 Calculation

• abs( )
• ceil( )
• constrain( )
• dist( )
• exp( )
• floor( )
• lerp( )
• log( )
• mag( )
• map( )
• max( )
• min( )
• norm( )
• pow( )
• round( )
• sq( )
• sqrt( )
• fract( )

14-2 Vector

• createVector( )
• p5.Vector

14-3 Noise

• noise()：指定された座標での Perlin ノイズ値を返します。
• noiseDetail()：Perlin ノイズ関数によって生成される特性と詳細レベルを調整します。
• noiseSeed()：noise() のシード値を設定します。

14-4 Random

• randomSeed()：random() のシード値を設定します。
• random()：ランダムな浮動小数点数を返します。
• randomGaussian()：ガウスまたは正規分布に適合する乱数を返します。

14-5 Trigonometry

• acos()：
• asin()：
• atan()：
• atan2()：
• cos()：
• sin()：
• tan()：
• degrees()：
• radians()：
• angleMode()：

15. Typography

15-1 Attributes

• textAlign()：テキストを描画するための現在の配置を設定します。
• textLeading()：テキストの行間の間隔をピクセル単位で設定/取得します。
• textSize()：現在のフォントサイズを設定/取得します。
• textStyle()：システムフォントのテキストスタイルを NORMAL、ITALIC、BOLD または BOLDITALIC に設定または取得します。
• textWidth()：文字または文字列の幅(ピクセル単位)を計算して返します。
• textAscent()：現在のフォントの現在のサイズでアセントを返します。
• textDescent()：現在のフォントの現在のサイズでディセントを返します。
• textWrap() [v1.9.3]

15-2 Loading & Displaying

• loadFont()：ファイルまたはURLからフォントファイルを読み込み、PFontオブジェクトを返します。
• text()：画面にテキストを描画します。
• textFont()：text() で描画される現在のフォントを設定します。
• p5.Font：フォントの基本クラス

16. 3D

16-1 Interaction

• orbitControl()：X軸とY軸に沿ったマウスの動きに対する感度を指定します。
• debugMode()：「地面」がスケッチのどこにあるかを示すグリッドと +X、+Y および +Z 方向を示す軸アイコンを表示します。
• noDebugMode()：debugMode() をオフにします。

16-2 Lights

• ambientLight()：環境光を作成します。
• specularColor( )
• directionalLight()：色と方向を持つ指向性ライトを作成します。
• pointLight()：色とライトの位置で点光源を作成します。
• imageLight() [v1.9.3]
• panorama() [v1.9.3]
• lights()：デフォルトの環境光と指向性ライトを設定します。
• lightFalloff( )
• spotLight( )
• noLights( )

16-3 Material

• loadShader()
• createShader()
• createFilterShader() [v1.9.3]
• shader()
• resetShader()
• normalMaterial()
• texture()
• textureMode()：テクスチャマッピングの座標空間を設定します。
• textureWrap()
• normalMaterial() [v1.9.3]
• ambientMaterial()：オブジェクトに使用するマテリアル(素材)の反射色を定義します。
• emissiveMaterial()：オブジェクトに使用するマテリアル(素材)の放射色を設定します。
• specularMaterial()：オブジェクトに鏡面素材を設定します。
• shininess()
• p5.Geometry
• p5.Shader

16-4 Camera

• camera()
• perspective()
• linePerspective() [v1.9.3]
• ortho()
• frustum()
• createCamera()
• p5.Camera
• setCamera()

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons ( CC BY-NC-SA 4.0 ) に従います。