"
},
"class": "p5",
"static": false,
"module": "3D",
"submodule": "p5.strands",
"beta": true
},
{
"name": "perspective",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 2277,
"itemtype": "method",
"description": "Sets a perspective projection for the current camera in a 3D sketch.
\nIn a perspective projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes. It’s applied by default in\nWebGL mode.
\nperspective() changes the camera’s perspective by changing its viewing\nfrustum. The frustum is the volume of space that’s visible to the camera.\nIts shape is a pyramid with its top cut off. The camera is placed where\nthe top of the pyramid should be and views everything between the frustum’s\ntop (near) plane and its bottom (far) plane.
\nThe first parameter, fovy, is the camera’s vertical field of view. It’s\nan angle that describes how tall or narrow a view the camera has. For\nexample, calling perspective(0.5) sets the camera’s vertical field of\nview to 0.5 radians. By default, fovy is calculated based on the sketch’s\nheight and the camera’s default z-coordinate, which is 800. The formula for\nthe default fovy is 2 * atan(height / 2 / 800).
\nThe second parameter, aspect, is the camera’s aspect ratio. It’s a number\nthat describes the ratio of the top plane’s width to its height. For\nexample, calling perspective(0.5, 1.5) sets the camera’s field of view to\n0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner\non a square canvas. By default, aspect is set to width / height.
\nThe third parameter, near, is the distance from the camera to the near\nplane. For example, calling perspective(0.5, 1.5, 100) sets the camera’s\nfield of view to 0.5 radians, its aspect ratio to 1.5, and places the near\nplane 100 pixels from the camera. Any shapes drawn less than 100 pixels\nfrom the camera won’t be visible. By default, near is set to 0.1 * 800,\nwhich is 1/10th the default distance between the camera and the origin.
\nThe fourth parameter, far, is the distance from the camera to the far\nplane. For example, calling perspective(0.5, 1.5, 100, 10000) sets the\ncamera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the\nnear plane 100 pixels from the camera, and places the far plane 10,000\npixels from the camera. Any shapes drawn more than 10,000 pixels from the\ncamera won’t be visible. By default, far is set to 10 * 800, which is 10\ntimes the default distance between the camera and the origin.
\nNote: perspective() can only be used in WebGL mode.
\n",
"example": [
"// Double-click to squeeze the box.\n\nlet isSqueezed = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n if (isSqueezed === true) {\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n perspective(0.2, 1.5);\n }\n\n // Draw the box.\n box();\n}\n\n// Change the camera's perspective when the user double-clicks.\nfunction doubleClicked() {\n isSqueezed = true;\n}",
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n // Set near to 600.\n // Set far to 1200.\n perspective(0.2, 1.5, 600, 1200);\n\n // Move the origin away from the camera.\n let x = -frameCount;\n let y = frameCount;\n let z = -2 * frameCount;\n translate(x, y, z);\n\n // Draw the box.\n box();\n}"
],
"overloads": [
{
"params": [
{
"name": "fovy",
"description": "camera frustum vertical field of view. Defaults to\n2 * atan(height / 2 / 800).",
"optional": 1,
"type": "Number"
},
{
"name": "aspect",
"description": "camera frustum aspect ratio. Defaults to\nwidth / height.",
"optional": 1,
"type": "Number"
},
{
"name": "near",
"description": "distance from the camera to the near clipping plane.\nDefaults to 0.1 * 800.",
"optional": 1,
"type": "Number"
},
{
"name": "far",
"description": "distance from the camera to the far clipping plane.\nDefaults to 10 * 800.",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "baseStrokeShader",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 2302,
"itemtype": "method",
"description": "Returns the default shader used for strokes.
\nCalling buildStrokeShader(shaderFunction)\nis equivalent to calling baseStrokeShader().modify(shaderFunction).
\nRead the buildStrokeShader reference or\ncall baseStrokeShader().inspectHooks() for more information on what you can do with\nthe base material shader.
\n",
"example": [],
"overloads": [
{
"params": [],
"return": {
"description": "The base material shader.",
"type": "p5.Shader"
}
}
],
"return": {
"description": "The base material shader.",
"type": "p5.Shader"
},
"class": "p5",
"static": false,
"module": "3D",
"submodule": "p5.strands",
"beta": true
},
{
"name": "splineProperties",
"file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
"line": 2355,
"itemtype": "method",
"description": "Sets multiple properties for spline curves at once.
\nsplineProperties() accepts an object with key-value pairs to configure\nhow spline curves are drawn. This is a convenient way to set multiple\nspline properties with a single function call, rather than calling\nsplineProperty() multiple times.
\nThe properties object can include:
\ntightness: A number that controls how tightly the curve fits to the\nvertex points. The default value is 0. Positive values make the curve\ntighter (straighter), while negative values make it looser. Values\nbetween -5 and 5 work best.ends: Controls whether to draw the end segments of the spline. Set to\nEXCLUDE to skip drawing the segments between the first and second\npoints and between the second-to-last and last points. This is useful\nwhen you want to use the first and last points as control points only.
splineProperties() affects curves drawn with\nsplineVertex() within\nbeginShape() and\nendShape(), as well as curves drawn with\nspline(). The properties remain active until\nchanged by another call to splineProperties() or\nsplineProperty().
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n background(220);\n\n // Set spline tightness using splineProperties\n splineProperties({\n tightness: 0.5\n });\n\n // Draw a spline curve\n noFill();\n stroke(0);\n strokeWeight(2);\n\n beginShape();\n splineVertex(20, 80);\n splineVertex(30, 30);\n splineVertex(70, 30);\n splineVertex(80, 80);\n endShape();\n\n // Show vertex points\n fill(255, 0, 0);\n noStroke();\n circle(20, 80, 6);\n circle(30, 30, 6);\n circle(70, 30, 6);\n circle(80, 80, 6);\n\n describe('A smooth curved line with tightness 0.5 connecting four red points.');\n}",
"function setup() {\n createCanvas(100, 100);\n background(220);\n\n // Exclude end segments - first and last points become control points\n splineProperties({\n tightness: 0,\n ends: EXCLUDE\n });\n\n // Draw curve only between middle points\n noFill();\n stroke(0);\n strokeWeight(2);\n\n beginShape();\n splineVertex(10, 50); // Control point (affects curve but not drawn to)\n splineVertex(30, 20); // Start of visible curve\n splineVertex(70, 80); // End of visible curve\n splineVertex(90, 50); // Control point (affects curve but not drawn to)\n endShape();\n\n // Show all points\n fill(200, 0, 0);\n noStroke();\n circle(10, 50, 6); // Control point\n circle(90, 50, 6); // Control point\n\n fill(0, 0, 255);\n circle(30, 20, 6); // Visible curve point\n circle(70, 80, 6); // Visible curve point\n\n describe('A curved line between two blue points, with red control points at the ends.');\n}"
],
"overloads": [
{
"params": [
{
"name": "values",
"description": "an object containing spline property key-value pairs",
"type": "Object"
}
],
"return": {
"description": "",
"type": "Object"
},
"chainable": 1
}
],
"return": {
"description": "",
"type": "Object"
},
"class": "p5",
"static": false,
"module": "Shape",
"submodule": "Custom Shapes"
},
{
"name": "resetShader",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 2387,
"itemtype": "method",
"description": "Restores the default shaders.
\nresetShader() deactivates any shaders previously applied by\nshader(), strokeShader(),\nor imageShader().
\nNote: Shaders can only be used in WebGL mode.
\n",
"example": [
"// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uProjectionMatrix;\nuniform mat4 uModelViewMatrix;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 position = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * position;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n describe(\n 'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a box using the p5.Shader.\n // shader() sets the active shader to myShader.\n shader(myShader);\n push();\n translate(-25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n\n // Draw a box using the default fill shader.\n // resetShader() restores the default fill shader.\n resetShader();\n fill(255, 0, 0);\n push();\n translate(25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "linePerspective",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 2393,
"itemtype": "method",
"description": "Enables or disables perspective for lines in 3D sketches.
\nIn WebGL mode, lines can be drawn with a thinner stroke when they’re\nfurther from the camera. Doing so gives them a more realistic appearance.
\nBy default, lines are drawn differently based on the type of perspective\nbeing used:
\nperspective() and frustum() simulate a realistic perspective. In\nthese modes, stroke weight is affected by the line’s distance from the\ncamera. Doing so results in a more natural appearance. perspective() is\nthe default mode for 3D sketches.ortho() doesn’t simulate a realistic perspective. In this mode, stroke\nweights are consistent regardless of the line’s distance from the camera.\nDoing so results in a more predictable and consistent appearance.
linePerspective() can override the default line drawing mode.
\nThe parameter, enable, is optional. It’s a Boolean value that sets the\nway lines are drawn. If true is passed, as in linePerspective(true),\nthen lines will appear thinner when they are further from the camera. If\nfalse is passed, as in linePerspective(false), then lines will have\nconsistent stroke weights regardless of their distance from the camera. By\ndefault, linePerspective() is enabled.
\nCalling linePerspective() without passing an argument returns true if\nit's enabled and false if not.
\nNote: linePerspective() can only be used in WebGL mode.
\n",
"example": [
"// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}",
"// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Use an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}"
],
"overloads": [
{
"params": [
{
"name": "enable",
"description": "whether to enable line perspective.",
"type": "Boolean"
}
]
},
{
"params": [],
"return": {
"description": "whether line perspective is enabled.",
"type": "boolean"
}
}
],
"return": {
"description": "whether line perspective is enabled.",
"type": "boolean"
},
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "ortho",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 2498,
"itemtype": "method",
"description": "Sets an orthographic projection for the current camera in a 3D sketch.
\nIn an orthographic projection, shapes with the same size always appear the\nsame size, regardless of whether they are near or far from the camera.
\northo() changes the camera’s perspective by changing its viewing frustum\nfrom a truncated pyramid to a rectangular prism. The camera is placed in\nfront of the frustum and views everything between the frustum’s near plane\nand its far plane. ortho() has six optional parameters to define the\nfrustum.
\nThe first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\northo(-100, 100, 200, -200) creates a frustum that’s 200 pixels wide and\n400 pixels tall. By default, these coordinates are set based on the\nsketch’s width and height, as in\northo(-width / 2, width / 2, -height / 2, height / 2).
\nThe last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\northo(-100, 100, 200, 200, 50, 1000) creates a frustum that’s 200 pixels\nwide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000\npixels from the camera. By default, near and far are set to 0 and\nmax(width, height) + 800, respectively.
\nNote: ortho() can only be used in WebGL mode.
\n",
"example": [
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}",
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n // Center the frustum.\n // Set its width and height to 20.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n ortho(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "left",
"description": "x-coordinate of the frustum’s left plane. Defaults to -width / 2.",
"optional": 1,
"type": "Number"
},
{
"name": "right",
"description": "x-coordinate of the frustum’s right plane. Defaults to width / 2.",
"optional": 1,
"type": "Number"
},
{
"name": "bottom",
"description": "y-coordinate of the frustum’s bottom plane. Defaults to height / 2.",
"optional": 1,
"type": "Number"
},
{
"name": "top",
"description": "y-coordinate of the frustum’s top plane. Defaults to -height / 2.",
"optional": 1,
"type": "Number"
},
{
"name": "near",
"description": "z-coordinate of the frustum’s near plane. Defaults to 0.",
"optional": 1,
"type": "Number"
},
{
"name": "far",
"description": "z-coordinate of the frustum’s far plane. Defaults to max(width, height) + 800.",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "texture",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 2545,
"itemtype": "method",
"description": "Sets the texture that will be used on shapes.
\nA texture is like a skin that wraps around a shape. texture() works with\nbuilt-in shapes, such as square() and\nsphere(), and custom shapes created with\nfunctions such as buildGeometry(). To\ntexture a geometry created with beginShape(),\nuv coordinates must be passed to each\nvertex() call.
\nThe parameter, tex, is the texture to apply. texture() can use a range\nof sources including images, videos, and offscreen renderers such as\np5.Graphics and\np5.Framebuffer objects.
\nTo texture a geometry created with beginShape(),\nyou will need to specify uv coordinates in vertex().
\nNote: texture() can only be used in WebGL mode.
\n",
"example": [
"let img;\n\nasync function setup() {\n // Load an image and create a p5.Image object.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('A spinning cube with an image of a ceiling on each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the box.\n box(50);\n}",
"let pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n pg = createGraphics(100, 100);\n\n // Draw a circle to the p5.Graphics object.\n pg.background(200);\n pg.circle(50, 50, 30);\n\n describe('A spinning cube with circle at the center of each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the p5.Graphics object as a texture.\n texture(pg);\n\n // Draw the box.\n box(50);\n}",
"let vid;\n\nfunction setup() {\n // Load a video and create a p5.MediaElement object.\n vid = createVideo('assets/fingers.mov');\n\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw the rectangle.\n rect(-40, -40, 80, 80);\n}",
"let vid;\n\nfunction setup() {\n // Load a video and create a p5.MediaElement object.\n vid = createVideo('assets/fingers.mov');\n\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw a custom shape using uv coordinates.\n beginShape();\n vertex(-40, -40, 0, 0);\n vertex(40, -40, 1, 0);\n vertex(40, 40, 1, 1);\n vertex(-40, 40, 0, 1);\n endShape();\n}"
],
"overloads": [
{
"params": [
{
"name": "tex",
"description": "media to use as the texture.",
"type": "p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"
}
],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "vertex",
"file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
"line": 2563,
"itemtype": "method",
"description": "Adds a vertex to a custom shape.
\nvertex() sets the coordinates of vertices drawn between the\nbeginShape() and\nendShape() functions.
\nThe first two parameters, x and y, set the x- and y-coordinates of the\nvertex.
\nThe third parameter, z, is optional. It sets the z-coordinate of the\nvertex in WebGL mode. By default, z is 0.
\nThe fourth and fifth parameters, u and v, are also optional. They set\nthe u- and v-coordinates for the vertex’s texture when used with\nendShape(). By default, u and v are both 0.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n strokeWeight(3);\n\n // Start drawing the shape.\n // Only draw the vertices.\n beginShape(POINTS);\n\n // Add the vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four black dots that form a square are drawn on a gray background.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}",
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0);\n vertex(35, -30, 0);\n vertex(35, 25, 0);\n vertex(-20, 25, 0);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}",
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around slowly on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0);\n vertex(35, -30, 0);\n vertex(35, 25, 0);\n vertex(-20, 25, 0);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}",
"let img;\n\nasync function setup() {\n // Load an image to apply as a texture.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('A photograph of a ceiling rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the shape.\n noStroke();\n\n // Apply the texture.\n texture(img);\n textureMode(NORMAL);\n\n // Start drawing the shape\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0, 0, 0);\n vertex(35, -30, 0, 1, 0);\n vertex(35, 25, 0, 1, 1);\n vertex(-20, 25, 0, 0, 1);\n\n // Stop drawing the shape.\n endShape();\n}",
"let vid;\nfunction setup() {\n // Load a video and create a p5.MediaElement object.\n vid = createVideo('/assets/fingers.mov');\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw a custom shape using uv coordinates.\n beginShape();\n vertex(-40, -40, 0, 0);\n vertex(40, -40, 1, 0);\n vertex(40, 40, 1, 1);\n vertex(-40, 40, 0, 1);\n endShape();\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x-coordinate of the vertex.",
"type": "Number"
},
{
"name": "y",
"description": "y-coordinate of the vertex.",
"type": "Number"
}
]
},
{
"params": [
{
"name": "x",
"description": "",
"type": "Number"
},
{
"name": "y",
"description": "",
"type": "Number"
},
{
"name": "u",
"description": "u-coordinate of the vertex's texture.",
"optional": 1,
"type": "Number"
},
{
"name": "v",
"description": "v-coordinate of the vertex's texture.",
"optional": 1,
"type": "Number"
}
]
},
{
"params": [
{
"name": "x",
"description": "",
"type": "Number"
},
{
"name": "y",
"description": "",
"type": "Number"
},
{
"name": "z",
"description": "",
"type": "Number"
},
{
"name": "u",
"description": "u-coordinate of the vertex's texture.",
"optional": 1,
"type": "Number"
},
{
"name": "v",
"description": "v-coordinate of the vertex's texture.",
"optional": 1,
"type": "Number"
}
]
}
],
"class": "p5",
"static": false,
"module": "Shape",
"submodule": "Custom Shapes"
},
{
"name": "curveDetail",
"file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
"line": 2587,
"itemtype": "method",
"description": "Sets the number of segments used to draw spline curves in WebGL mode.
\nIn WebGL mode, smooth shapes are drawn using many flat segments. Adding\nmore flat segments makes shapes appear smoother.
\nThe parameter, detail, is the density of segments to use while drawing a\nspline curve.
\nNote: curveDetail() has no effect in 2D mode.
\n",
"example": [
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Set the curveDetail() to 0.5\n curveDetail(0.5);\n\n // Do not show all the vertices\n splineProperty('ends', EXCLUDE)\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n spline(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);\n\n // Draw red spline curves from the anchor points to the control points.\n spline(255, 0, 0);\n spline(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);\n spline(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(23, -26);\n point(23, 11);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(-45, -24);\n point(-35, 15);\n\n describe(\n 'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}"
],
"overloads": [
{
"params": [
{
"name": "resolution",
"description": "number of segments to use. Default is 1/4",
"type": "Number"
}
],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
"name": "frustum",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 2603,
"itemtype": "method",
"description": "Sets the frustum of the current camera in a 3D sketch.
\nIn a frustum projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes.
\nfrustum() changes the default camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.
\nThe first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\nfrustum(-100, 100, 200, -200) creates a frustum that’s 200 pixels wide\nand 400 pixels tall. By default, these coordinates are set based on the\nsketch’s width and height, as in\northo(-width / 20, width / 20, height / 20, -height / 20).
\nThe last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\northo(-100, 100, 200, -200, 50, 1000) creates a frustum that’s 200 pixels\nwide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000\npixels from the camera. By default, near is set to 0.1 * 800, which is\n1/10th the default distance between the camera and the origin. far is set\nto 10 * 800, which is 10 times the default distance between the camera\nand the origin.
\nNote: frustum() can only be used in WebGL mode.
\n",
"example": [
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of white cubes on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply the default frustum projection.\n frustum();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}",
"function setup() {\n createCanvas(100, 100, WEBGL);\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n frustum(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "left",
"description": "x-coordinate of the frustum’s left plane. Defaults to -width / 20.",
"optional": 1,
"type": "Number"
},
{
"name": "right",
"description": "x-coordinate of the frustum’s right plane. Defaults to width / 20.",
"optional": 1,
"type": "Number"
},
{
"name": "bottom",
"description": "y-coordinate of the frustum’s bottom plane. Defaults to height / 20.",
"optional": 1,
"type": "Number"
},
{
"name": "top",
"description": "y-coordinate of the frustum’s top plane. Defaults to -height / 20.",
"optional": 1,
"type": "Number"
},
{
"name": "near",
"description": "z-coordinate of the frustum’s near plane. Defaults to 0.1 * 800.",
"optional": 1,
"type": "Number"
},
{
"name": "far",
"description": "z-coordinate of the frustum’s far plane. Defaults to 10 * 800.",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "createCamera",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 2676,
"itemtype": "method",
"description": "Creates a new p5.Camera object.
\nThe new camera is initialized with a default position (0, 0, 800) and a\ndefault perspective projection. Its properties can be controlled with\np5.Camera methods such as\nmyCamera.lookAt(0, 0, 0).
\nNote: Every 3D sketch starts with a default camera initialized.\nThis camera can be controlled with the functions\ncamera(),\nperspective(),\northo(), and\nfrustum() if it's the only camera in the scene.
\nNote: createCamera() can only be used in WebGL mode.
\n",
"example": [
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "the new camera.",
"type": "p5.Camera"
}
}
],
"return": {
"description": "the new camera.",
"type": "p5.Camera"
},
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "beginContour",
"file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
"line": 2677,
"itemtype": "method",
"description": "Begins creating a hole within a flat shape.
\nThe beginContour() and endContour()\nfunctions allow for creating negative space within custom shapes that are\nflat. beginContour() begins adding vertices to a negative space and\nendContour() stops adding them.\nbeginContour() and endContour() must be\ncalled between beginShape() and\nendShape().
\nTransformations such as translate(),\nrotate(), and scale()\ndon't work between beginContour() and\nendContour(). It's also not possible to use\nother shapes, such as ellipse() or\nrect(), between beginContour() and\nendContour().
\nNote: The vertices that define a negative space must \"wind\" in the opposite\ndirection from the outer shape. First, draw vertices for the outer shape\nclockwise order. Then, draw vertices for the negative space in\ncounter-clockwise order.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(10, 10);\n vertex(90, 10);\n vertex(90, 90);\n vertex(10, 90);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(30, 30);\n vertex(30, 70);\n vertex(70, 70);\n vertex(70, 30);\n endContour(CLOSE);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(-40, -40);\n vertex(40, -40);\n vertex(40, 40);\n vertex(-40, 40);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(-20, -20);\n vertex(-20, 20);\n vertex(20, 20);\n vertex(20, -20);\n endContour(CLOSE);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5",
"static": false,
"module": "Shape",
"submodule": "Custom Shapes"
},
{
"name": "textureMode",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 2717,
"itemtype": "method",
"description": "Changes the coordinate system used for textures when they’re applied to\ncustom shapes.
\nIn order for texture() to work, a shape needs a\nway to map the points on its surface to the pixels in an image. Built-in\nshapes such as rect() and\nbox() already have these texture mappings based on\ntheir vertices. Custom shapes created with\nvertex() require texture mappings to be passed as\nuv coordinates.
\nEach call to vertex() must include 5 arguments,\nas in vertex(x, y, z, u, v), to map the vertex at coordinates (x, y, z)\nto the pixel at coordinates (u, v) within an image. For example, the\ncorners of a rectangular image are mapped to the corners of a rectangle by default:
\n// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nrect(0, 0, 30, 50);
If the image in the code snippet above has dimensions of 300 x 500 pixels,\nthe same result could be achieved as follows:
\n// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nbeginShape();\n\n// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);\n\n// Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);\n\n// Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);\n\n// Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);\n\nendShape();
textureMode() changes the coordinate system for uv coordinates.
\nThe parameter, mode, accepts two possible constants. If NORMAL is\npassed, as in textureMode(NORMAL), then the texture’s uv coordinates can\nbe provided in the range 0 to 1 instead of the image’s dimensions. This can\nbe helpful for using the same code for multiple images of different sizes.\nFor example, the code snippet above could be rewritten as follows:
\n// Set the texture mode to use normalized coordinates.\ntextureMode(NORMAL);\n\n// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nbeginShape();\n\n// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);\n\n// Top-right.\n// u: 1, v: 0\nvertex(30, 0, 0, 1, 0);\n\n// Bottom-right.\n// u: 1, v: 1\nvertex(30, 50, 0, 1, 1);\n\n// Bottom-left.\n// u: 0, v: 1\nvertex(0, 50, 0, 0, 1);\n\nendShape();
By default, mode is IMAGE, which scales uv coordinates to the\ndimensions of the image. Calling textureMode(IMAGE) applies the default.
\nNote: textureMode() can only be used in WebGL mode.
\n",
"example": [
"let img;\n\nasync function setup() {\n // Load an image and create a p5.Image object.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use the image's width and height as uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, img.width, 0);\n vertex(30, 30, img.width, img.height);\n vertex(-30, 30, 0, img.height);\n endShape();\n}",
"let img;\n\nasync function setup() {\n // Load an image and create a p5.Image object.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use normalized uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, 1, 0);\n vertex(30, 30, 1, 1);\n vertex(-30, 30, 0, 1);\n endShape();\n}"
],
"overloads": [
{
"params": [
{
"name": "mode",
"description": "either IMAGE or NORMAL.",
"type": "IMAGE|NORMAL"
}
]
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "setCamera",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 2739,
"itemtype": "method",
"description": "Sets the current (active) camera of a 3D sketch.
\nsetCamera() allows for switching between multiple cameras created with\ncreateCamera().
\nNote: setCamera() can only be used in WebGL mode.
\n",
"example": [
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "cam",
"description": "camera that should be made active.",
"type": "p5.Camera"
}
]
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "endContour",
"file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
"line": 2776,
"itemtype": "method",
"description": "Stops creating a hole within a flat shape.
\nThe beginContour() and endContour()\nfunctions allow for creating negative space within custom shapes that are\nflat. beginContour() begins adding vertices\nto a negative space and endContour() stops adding them.\nbeginContour() and endContour() must be\ncalled between beginShape() and\nendShape().
\nBy default,\nthe controur has an OPEN end, and to close it,\ncall endContour(CLOSE). The CLOSE contour mode closes splines smoothly.
\nTransformations such as translate(),\nrotate(), and scale()\ndon't work between beginContour() and\nendContour(). It's also not possible to use other shapes, such as\nellipse() or rect(),\nbetween beginContour() and endContour().
\nNote: The vertices that define a negative space must \"wind\" in the opposite\ndirection from the outer shape. First, draw vertices for the outer shape\nclockwise order. Then, draw vertices for the negative space in\ncounter-clockwise order.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(10, 10);\n vertex(90, 10);\n vertex(90, 90);\n vertex(10, 90);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(30, 30);\n vertex(30, 70);\n vertex(70, 70);\n vertex(70, 30);\n endContour(CLOSE);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(-40, -40);\n vertex(40, -40);\n vertex(40, 40);\n vertex(-40, 40);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(-20, -20);\n vertex(-20, 20);\n vertex(20, 20);\n vertex(20, -20);\n endContour(CLOSE);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}"
],
"overloads": [
{
"params": [
{
"name": "mode",
"description": "By default, the value is OPEN",
"optional": 1,
"type": "OPEN|CLOSE"
}
]
}
],
"class": "p5",
"static": false,
"module": "Shape",
"submodule": "Custom Shapes"
},
{
"name": "textureWrap",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 2980,
"itemtype": "method",
"description": "Changes the way textures behave when a shape’s uv coordinates go beyond the\ntexture.
\nIn order for texture() to work, a shape needs a\nway to map the points on its surface to the pixels in an image. Built-in\nshapes such as rect() and\nbox() already have these texture mappings based on\ntheir vertices. Custom shapes created with\nvertex() require texture mappings to be passed as\nuv coordinates.
\nEach call to vertex() must include 5 arguments,\nas in vertex(x, y, z, u, v), to map the vertex at coordinates (x, y, z)\nto the pixel at coordinates (u, v) within an image. For example, the\ncorners of a rectangular image are mapped to the corners of a rectangle by default:
\n// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nrect(0, 0, 30, 50);
If the image in the code snippet above has dimensions of 300 x 500 pixels,\nthe same result could be achieved as follows:
\n// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nbeginShape();\n\n// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);\n\n// Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);\n\n// Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);\n\n// Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);\n\nendShape();
textureWrap() controls how textures behave when their uv's go beyond the\ntexture. Doing so can produce interesting visual effects such as tiling.\nFor example, the custom shape above could have u-coordinates are greater\nthan the image’s width:
\n// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nbeginShape();\nvertex(0, 0, 0, 0, 0);\n\n// Top-right.\n// u: 600\nvertex(30, 0, 0, 600, 0);\n\n// Bottom-right.\n// u: 600\nvertex(30, 50, 0, 600, 500);\n\nvertex(0, 50, 0, 0, 500);\nendShape();
The u-coordinates of 600 are greater than the texture image’s width of 300.\nThis creates interesting possibilities.
\nThe first parameter, wrapX, accepts three possible constants. If CLAMP\nis passed, as in textureWrap(CLAMP), the pixels at the edge of the\ntexture will extend to the shape’s edges. If REPEAT is passed, as in\ntextureWrap(REPEAT), the texture will tile repeatedly until reaching the\nshape’s edges. If MIRROR is passed, as in textureWrap(MIRROR), the\ntexture will tile repeatedly until reaching the shape’s edges, flipping\nits orientation between tiles. By default, textures CLAMP.
\nThe second parameter, wrapY, is optional. It accepts the same three\nconstants, CLAMP, REPEAT, and MIRROR. If one of these constants is\npassed, as in textureWRAP(MIRROR, REPEAT), then the texture will MIRROR\nhorizontally and REPEAT vertically. By default, wrapY will be set to\nthe same value as wrapX.
\nNote: textureWrap() can only be used in WebGL mode.
\n",
"example": [
"let img;\n\nasync function setup() {\n img = await loadImage('assets/rockies128.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n // Note: CLAMP is the default mode.\n textureWrap(CLAMP);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}",
"let img;\n\nasync function setup() {\n img = await loadImage('assets/rockies128.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('Four identical images of a landscape arranged in a grid.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}",
"let img;\n\nasync function setup() {\n img = await loadImage('assets/rockies128.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}",
"let img;\n\nasync function setup() {\n img = await loadImage('assets/rockies128.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT, MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}"
],
"overloads": [
{
"params": [
{
"name": "wrapX",
"description": "either CLAMP, REPEAT, or MIRROR",
"type": "CLAMP|REPEAT|MIRROR"
},
{
"name": "wrapY",
"description": "either CLAMP, REPEAT, or MIRROR",
"optional": 1,
"type": "CLAMP|REPEAT|MIRROR"
}
]
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "normalMaterial",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 3023,
"itemtype": "method",
"description": "Sets the current material as a normal material.
\nA normal material sets surfaces facing the x-axis to red, those facing the\ny-axis to green, and those facing the z-axis to blue. Normal material isn't\naffected by light. It’s often used as a placeholder material when debugging.
\nNote: normalMaterial() can only be used in WebGL mode.
\n",
"example": [
"// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor torus drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the torus.\n normalMaterial();\n\n // Draw the torus.\n torus(30);\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "ambientMaterial",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 3229,
"itemtype": "method",
"description": "Sets the ambient color of shapes’ surface material.
\nThe ambientMaterial() color sets the components of the\nambientLight() color that shapes will\nreflect. For example, calling ambientMaterial(255, 255, 0) would cause a\nshape to reflect red and green light, but not blue light.
\nambientMaterial() can be called three ways with different parameters to\nset the material’s color.
\nThe first way to call ambientMaterial() has one parameter, gray.\nGrayscale values between 0 and 255, as in ambientMaterial(50), can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.
\nThe second way to call ambientMaterial() has one parameter, color. A\np5.Color object, an array of color values, or a\nCSS color string, as in ambientMaterial('magenta'), can be passed to set\nthe material’s color.
\nThe third way to call ambientMaterial() has three parameters, v1, v2,\nand v3. RGB, HSB, or HSL values, as in ambientMaterial(255, 0, 0), can\nbe passed to set the material’s colors. Color values will be interpreted\nusing the current colorMode().
\nNote: ambientMaterial() can only be used in WebGL mode.
\n",
"example": [
"// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A magenta cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Draw the box.\n box();\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A purple cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a dark gray ambient material.\n ambientMaterial(150);\n\n // Draw the box.\n box();\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using RGB values.\n ambientMaterial(255, 255, 0);\n\n // Draw the box.\n box();\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a p5.Color object.\n let c = color(255, 255, 0);\n ambientMaterial(c);\n\n // Draw the box.\n box();\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A yellow cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}"
],
"overloads": [
{
"params": [
{
"name": "v1",
"description": "red or hue value in the current\ncolorMode().",
"type": "Number"
},
{
"name": "v2",
"description": "green or saturation value in the\ncurrent colorMode().",
"type": "Number"
},
{
"name": "v3",
"description": "blue, brightness, or lightness value in the\ncurrent colorMode().",
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "gray",
"description": "grayscale value between 0 (black) and 255 (white).",
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "color",
"description": "color as a p5.Color object,\nan array of color values, or a CSS string.",
"type": "p5.Color|Number[]|String"
}
],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "emissiveMaterial",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 3321,
"itemtype": "method",
"description": "Sets the emissive color of shapes’ surface material.
\nThe emissiveMaterial() color sets a color shapes display at full\nstrength, regardless of lighting. This can give the appearance that a shape\nis glowing. However, emissive materials don’t actually emit light that\ncan affect surrounding objects.
\nemissiveMaterial() can be called three ways with different parameters to\nset the material’s color.
\nThe first way to call emissiveMaterial() has one parameter, gray.\nGrayscale values between 0 and 255, as in emissiveMaterial(50), can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.
\nThe second way to call emissiveMaterial() has one parameter, color. A\np5.Color object, an array of color values, or a\nCSS color string, as in emissiveMaterial('magenta'), can be passed to set\nthe material’s color.
\nThe third way to call emissiveMaterial() has four parameters, v1, v2,\nv3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be\npassed to set the material’s colors, as in emissiveMaterial(255, 0, 0) or\nemissiveMaterial(255, 0, 0, 30). Color values will be interpreted using\nthe current colorMode().
\nNote: emissiveMaterial() can only be used in WebGL mode.
\n",
"example": [
"// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a red emissive material using RGB values.\n emissiveMaterial(255, 0, 0);\n\n // Draw the box.\n box();\n}"
],
"overloads": [
{
"params": [
{
"name": "v1",
"description": "red or hue value in the current\ncolorMode().",
"type": "Number"
},
{
"name": "v2",
"description": "green or saturation value in the\ncurrent colorMode().",
"type": "Number"
},
{
"name": "v3",
"description": "blue, brightness, or lightness value in the\ncurrent colorMode().",
"type": "Number"
},
{
"name": "alpha",
"description": "alpha value in the current\ncolorMode().",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "gray",
"description": "grayscale value between 0 (black) and 255 (white).",
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "color",
"description": "color as a p5.Color object,\nan array of color values, or a CSS string.",
"type": "p5.Color|Number[]|String"
}
],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "specularMaterial",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 3561,
"itemtype": "method",
"description": "Sets the specular color of shapes’ surface material.
\nThe specularMaterial() color sets the components of light color that\nglossy coats on shapes will reflect. For example, calling\nspecularMaterial(255, 255, 0) would cause a shape to reflect red and\ngreen light, but not blue light.
\nUnlike ambientMaterial(),\nspecularMaterial() will reflect the full color of light sources including\ndirectionalLight(),\npointLight(),\nand spotLight(). This is what gives it shapes\ntheir \"shiny\" appearance. The material’s shininess can be controlled by the\nshininess() function.
\nspecularMaterial() can be called three ways with different parameters to\nset the material’s color.
\nThe first way to call specularMaterial() has one parameter, gray.\nGrayscale values between 0 and 255, as in specularMaterial(50), can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.
\nThe second way to call specularMaterial() has one parameter, color. A\np5.Color> object, an array of color values, or a CSS\ncolor string, as in specularMaterial('magenta'), can be passed to set the\nmaterial’s color.
\nThe third way to call specularMaterial() has four parameters, v1, v2,\nv3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be\npassed to set the material’s colors, as in specularMaterial(255, 0, 0) or\nspecularMaterial(255, 0, 0, 30). Color values will be interpreted using\nthe current colorMode().
\n",
"example": [
"// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(255);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}",
"// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(0, 255, 0);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}",
"// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n // Create a p5.Color object.\n let c = color('green');\n specularMaterial(c);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}",
"// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial('#00FF00');\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}"
],
"overloads": [
{
"params": [
{
"name": "gray",
"description": "grayscale value between 0 (black) and 255 (white).",
"type": "Number"
},
{
"name": "alpha",
"description": "alpha value in the current current\ncolorMode().",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "v1",
"description": "red or hue value in\nthe current colorMode().",
"type": "Number"
},
{
"name": "v2",
"description": "green or saturation value\nin the current colorMode().",
"type": "Number"
},
{
"name": "v3",
"description": "blue, brightness, or lightness value\nin the current colorMode().",
"type": "Number"
},
{
"name": "alpha",
"description": "",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "color",
"description": "color as a p5.Color object,\nan array of color values, or a CSS string.",
"type": "p5.Color|Number[]|String"
}
],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "shininess",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 3630,
"itemtype": "method",
"description": "Sets the amount of gloss (\"shininess\") of a\nspecularMaterial().
\nShiny materials focus reflected light more than dull materials.\nshininess() affects the way materials reflect light sources including\ndirectionalLight(),\npointLight(),\nand spotLight().
\nThe parameter, shine, is a number that sets the amount of shininess.\nshine must be greater than 1, which is its default value.
\n",
"example": [
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on a red ambient light.\n ambientLight(255, 0, 0);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the sphere.\n noStroke();\n\n // Add a specular material with a grayscale value.\n specularMaterial(255);\n\n // Draw the left sphere with low shininess.\n translate(-25, 0, 0);\n shininess(10);\n sphere(20);\n\n // Draw the right sphere with high shininess.\n translate(50, 0, 0);\n shininess(100);\n sphere(20);\n}"
],
"overloads": [
{
"params": [
{
"name": "shine",
"description": "amount of shine.",
"type": "Number"
}
],
"chainable": 1
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "metalness",
"file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
"line": 3739,
"itemtype": "method",
"description": "Sets the amount of \"metalness\" of a\nspecularMaterial().
\nmetalness() can make materials appear more metallic. It affects the way\nmaterials reflect light sources including\naffects the way materials reflect light sources including\ndirectionalLight(),\npointLight(),\nspotLight(), and\nimageLight().
\nThe parameter, metallic, is a number that sets the amount of metalness.\nmetallic must be greater than 1, which is its default value. Higher\nvalues, such as metalness(100), make specular materials appear more\nmetallic.
\n",
"example": [
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on an ambient light.\n ambientLight(200);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the spheres.\n noStroke();\n fill(30, 30, 255);\n specularMaterial(255);\n shininess(20);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\nasync function setup() {\n img = await loadImage('assets/outdoor_spheremap.jpg');\n\n createCanvas(100 ,100 ,WEBGL);\n\n describe(\n 'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'\n );\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the spheres.\n noStroke();\n specularMaterial(50);\n shininess(200);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}"
],
"overloads": [
{
"params": [
{
"name": "metallic",
"description": "amount of metalness.",
"type": "Number"
}
]
}
],
"class": "p5",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "remove",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 47,
"itemtype": "method",
"description": "Removes the element, stops all audio/video streams, and removes all\ncallback functions.",
"example": [
"let p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element.\n p = createP('p5*js');\n p.position(10, 10);\n\n describe('The text \"p5*js\" written at the center of a gray square. ');\n}\n\n// Remove the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.remove();\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "parent",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 205,
"itemtype": "method",
"description": "Attaches the element to a parent element.
\nFor example, a
\nThe parameter parent can have one of three types. parent can be a\nstring with the parent element's ID, as in\nmyElement.parent('container'). It can also be another\np5.Element object, as in\nmyElement.parent(myDiv). Finally, parent can be an HTMLElement\nobject, as in myElement.parent(anotherElement).
\nCalling myElement.parent() without an argument returns the element's\nparent.
\n",
"example": [
"function setup() {\n background(200);\n\n // Create a div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color to white\n div.style('background-color', 'white');\n\n // Align any text to the center.\n div.style('text-align', 'center');\n\n // Set its ID to \"container\".\n div.id('container');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent\n // using its ID \"container\".\n p.parent('container');\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}",
"function setup() {\n background(200);\n\n // Create rectangular div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color and align\n // any text to the center.\n div.style('background-color', 'white');\n div.style('text-align', 'center');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent.\n p.parent(div);\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}",
"function setup() {\n background(200);\n\n // Create rectangular div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color and align\n // any text to the center.\n div.style('background-color', 'white');\n div.style('text-align', 'center');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent\n // using the underlying\n // HTMLElement.\n p.parent(div.elt);\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}"
],
"overloads": [
{
"params": [
{
"name": "parent",
"description": "ID, p5.Element,\nor HTMLElement of desired parent element.",
"type": "String|p5.Element|Object"
}
],
"chainable": 1
},
{
"params": [],
"return": {
"description": "",
"type": "p5.Element"
}
}
],
"return": {
"description": "",
"type": "p5.Element"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "child",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 299,
"itemtype": "method",
"description": "Attaches the element as a child of another element.
\nmyElement.child() accepts either a string ID, DOM node, or\np5.Element. For example,\nmyElement.child(otherElement). If no argument is provided, an array of\nchildren DOM nodes is returned.
\n",
"example": [
"// META:norender\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n let div1 = createDiv('Child');\n\n // Make div1 the child of div0\n // using the p5.Element.\n div0.child(div1);\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}",
"// META:norender\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n let div1 = createDiv('Child');\n\n // Give div1 an ID.\n div1.id('apples');\n\n // Make div1 the child of div0\n // using its ID.\n div0.child('apples');\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}",
"// META:norender\n// This example assumes there is a div already on the page\n// with id \"myChildDiv\".\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n\n // Select the child element by its ID.\n let elt = document.getElementById('myChildDiv');\n\n // Make div1 the child of div0\n // using its HTMLElement object.\n div0.child(elt);\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "an array of child nodes.",
"type": "Node[]"
}
},
{
"params": [
{
"name": "child",
"description": "the ID, DOM node, or p5.Element\nto add to the current element",
"optional": 1,
"type": "String|p5.Element"
}
],
"chainable": 1
}
],
"return": {
"description": "an array of child nodes.",
"type": "Node[]"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "html",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 384,
"itemtype": "method",
"description": "Sets the inner HTML of the element, replacing any existing HTML.
\nThe second parameter, append, is optional. If true is passed, as in\nmyElement.html('hi', true), the HTML is appended instead of replacing\nexisting HTML.
\nIf no arguments are passed, as in myElement.html(), the element's inner\nHTML is returned.
\n",
"example": [
"// META:norender\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the div element and set its size.\n let div = createDiv('');\n div.size(100, 100);\n\n // Set the inner HTML to \"hi\".\n div.html('hi');\n\n describe('A gray square with the word \"hi\" written beneath it.');\n}",
"// META:norender\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element and set its size.\n let div = createDiv('Hello ');\n div.size(100, 100);\n\n // Append \"World\" to the div's HTML.\n div.html('World', true);\n\n describe('A gray square with the text \"Hello World\" written beneath it.');\n}",
"// META:norender\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element.\n let div = createDiv('Hello');\n\n // Prints \"Hello\" to the console.\n print(div.html());\n\n describe('A gray square with the word \"Hello!\" written beneath it.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "the inner HTML of the element",
"type": "String"
}
},
{
"params": [
{
"name": "html",
"description": "the HTML to be placed inside the element",
"optional": 1,
"type": "String"
},
{
"name": "append",
"description": "whether to append HTML to existing",
"optional": 1,
"type": "Boolean"
}
],
"chainable": 1
}
],
"return": {
"description": "the inner HTML of the element",
"type": "String"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "id",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 426,
"itemtype": "method",
"description": "Sets the element's ID using a given string.
\nCalling myElement.id() without an argument returns its ID as a string.
\n",
"example": [
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Set the canvas' ID\n // to \"mycanvas\".\n cnv.id('mycanvas');\n\n // Get the canvas' ID.\n let id = cnv.id();\n text(id, 24, 54);\n\n describe('The text \"mycanvas\" written in black on a gray background.');\n}"
],
"overloads": [
{
"params": [
{
"name": "id",
"description": "ID of the element.",
"type": "String"
}
],
"chainable": 1
},
{
"params": [],
"return": {
"description": "ID of the element.",
"type": "String"
}
}
],
"return": {
"description": "ID of the element.",
"type": "String"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "class",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 471,
"itemtype": "method",
"description": "Adds a\nclass attribute\nto the element using a given string.
\nCalling myElement.class() without an argument returns a string with its current classes.
\n",
"example": [
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Add the class \"small\" to the\n // canvas element.\n cnv.class('small');\n\n // Get the canvas element's class\n // and display it.\n let c = cnv.class();\n text(c, 35, 54);\n\n describe('The word \"small\" written in black on a gray canvas.');\n\n}"
],
"overloads": [
{
"params": [
{
"name": "class",
"description": "class to add.",
"type": "String"
}
],
"chainable": 1
},
{
"params": [],
"return": {
"description": "element's classes, if any.",
"type": "String"
}
}
],
"return": {
"description": "element's classes, if any.",
"type": "String"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "addClass",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 504,
"itemtype": "method",
"description": "Adds a class to the element.",
"example": [
"// META:norender\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n let div = createDiv('div');\n\n // Add a class to the div.\n div.addClass('myClass');\n\n describe('A gray square.');\n}"
],
"overloads": [
{
"params": [
{
"name": "class",
"description": "name of class to add.",
"type": "String"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "removeClass",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 548,
"itemtype": "method",
"description": "Removes a class from the element.",
"example": [
"// META:norender\n// In this example, a class is set when the div is created\n// and removed when mouse is pressed. This could link up\n// with a CSS style rule to toggle style properties.\n\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add a class to the div.\n div.addClass('myClass');\n\n describe('A gray square.');\n}\n\n// Remove 'myClass' from the div when the user presses the mouse.\nfunction mousePressed() {\n div.removeClass('myClass');\n}"
],
"overloads": [
{
"params": [
{
"name": "class",
"description": "name of class to remove.",
"type": "String"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "hasClass",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 587,
"itemtype": "method",
"description": "Checks if a class is already applied to element.",
"example": [
"// META:norender\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add the class 'show' to the div.\n div.addClass('show');\n\n describe('A gray square.');\n}\n\n// Toggle the class 'show' when the mouse is pressed.\nfunction mousePressed() {\n if (div.hasClass('show')) {\n div.addClass('show');\n } else {\n div.removeClass('show');\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "c",
"description": "{String} name of class to check."
}
],
"return": {
"description": "a boolean value if element has specified class.",
"type": "boolean"
}
}
],
"return": {
"description": "a boolean value if element has specified class.",
"type": "boolean"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "toggleClass",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 620,
"itemtype": "method",
"description": "Toggles whether a class is applied to the element.",
"example": [
"// META:norender\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add the 'show' class to the div.\n div.addClass('show');\n\n describe('A gray square.');\n}\n\n// Toggle the 'show' class when the mouse is pressed.\nfunction mousePressed() {\n div.toggleClass('show');\n}"
],
"overloads": [
{
"params": [
{
"name": "c",
"description": "{String} class name to toggle."
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "center",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 661,
"itemtype": "method",
"description": "Centers the element either vertically, horizontally, or both.
\ncenter() will center the element relative to its parent or according to\nthe page's body if the element has no parent.
\nIf no argument is passed, as in myElement.center() the element is aligned\nboth vertically and horizontally.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element and style it.\n let div = createDiv('');\n div.size(10, 10);\n div.style('background-color', 'orange');\n\n // Center the div relative to the page's body.\n div.center();\n\n describe('A gray square and an orange rectangle. The rectangle is at the center of the page.');\n}"
],
"overloads": [
{
"params": [
{
"name": "align",
"description": "passing 'vertical', 'horizontal' aligns element accordingly",
"optional": 1,
"type": "String"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "position",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 746,
"itemtype": "method",
"description": "Sets the element's position.
\nThe first two parameters, x and y, set the element's position relative\nto the top-left corner of the web page.
\nThe third parameter, positionType, is optional. It sets the element's\npositioning scheme.\npositionType is a string that can be either 'static', 'fixed',\n'relative', 'sticky', 'initial', or 'inherit'.
\nIf no arguments passed, as in myElement.position(), the method returns\nthe element's position in an object, as in { x: 0, y: 0 }.
\n",
"example": [
"// META:norender\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Positions the canvas 50px to the right and 100px\n // below the top-left corner of the window.\n cnv.position(50, 100);\n\n describe('A gray square that is 50 pixels to the right and 100 pixels down from the top-left corner of the web page.');\n}",
"// META:norender\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Positions the canvas at the top-left corner\n // of the window with a 'fixed' position type.\n cnv.position(0, 0, 'fixed');\n\n describe('A gray square in the top-left corner of the web page.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "object of form { x: 0, y: 0 } containing the element's position.",
"type": "Object"
}
},
{
"params": [
{
"name": "x",
"description": "x-position relative to top-left of window (optional)",
"optional": 1,
"type": "Number"
},
{
"name": "y",
"description": "y-position relative to top-left of window (optional)",
"optional": 1,
"type": "Number"
},
{
"name": "positionType",
"description": "it can be static, fixed, relative, sticky, initial or inherit (optional)",
"optional": 1,
"type": "String"
}
],
"chainable": 1
}
],
"return": {
"description": "object of form { x: 0, y: 0 } containing the element's position.",
"type": "Object"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "show",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 796,
"itemtype": "method",
"description": "Shows the current element.",
"example": [
"let p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and hide it.\n p = createP('p5*js');\n p.position(10, 10);\n p.hide();\n\n describe('A gray square. The text \"p5*js\" appears when the user double-clicks the square.');\n}\n\n// Show the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.show();\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "hide",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 826,
"itemtype": "method",
"description": "Hides the current element.",
"example": [
"let p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element.\n p = createP('p5*js');\n p.position(10, 10);\n\n describe('The text \"p5*js\" at the center of a gray square. The text disappears when the user double-clicks the square.');\n}\n\n// Hide the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.hide();\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "size",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 939,
"itemtype": "method",
"description": "Sets the element's width and height.
\nCalling myElement.size() without an argument returns the element's size\nas an object with the properties width and height. For example,\n{ width: 20, height: 10 }.
\nThe first parameter, width, is optional. It's a number used to set the\nelement's width. Calling myElement.size(10)
\nThe second parameter, 'height, is also optional. It's a\nnumber used to set the element's height. For example, calling\nmyElement.size(20, 10)` sets the element's width to 20 pixels and height\nto 10 pixels.
\nThe constant AUTO can be used to adjust one dimension at a time while\nmaintaining the aspect ratio, which is width / height. For example,\nconsider an element that's 200 pixels wide and 100 pixels tall. Calling\nmyElement.size(20, AUTO) sets the width to 20 pixels and height to 10\npixels.
\nNote: In the case of elements that need to load data, such as images, wait\nto call myElement.size() until after the data loads.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a pink div element and place it at the top-left corner.\n let div = createDiv();\n div.position(10, 10);\n div.style('background-color', 'deeppink');\n\n // Set the div's width to 80 pixels and height to 20 pixels.\n div.size(80, 20);\n\n describe('A gray square with a pink rectangle near its top.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a pink div element and place it at the top-left corner.\n let div = createDiv();\n div.position(10, 10);\n div.style('background-color', 'deeppink');\n\n // Set the div's width to 80 pixels and height to 40 pixels.\n div.size(80, 40);\n\n // Get the div's size as an object.\n let s = div.size();\n\n // Display the div's dimensions.\n div.html(`${s.width} x ${s.height}`);\n\n describe('A gray square with a pink rectangle near its top. The text \"80 x 40\" is written within the rectangle.');\n}",
"let img1;\nlet img2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Load an image of an astronaut on the moon\n // and place it at the top-left of the canvas.\n img1 = createImg(\n 'assets/moonwalk.jpg',\n 'An astronaut walking on the moon',\n ''\n );\n img1.position(0, 0);\n\n // Load an image of an astronaut on the moon\n // and place it at the top-left of the canvas.\n // Resize the image once it's loaded.\n img2 = createImg(\n 'assets/moonwalk.jpg',\n 'An astronaut walking on the moon',\n '',\n resizeImage\n );\n img2.position(0, 0);\n\n describe('A gray square two copies of a space image at the top-left. The copy in front is smaller.');\n}\n\n// Resize img2 and keep its aspect ratio.\nfunction resizeImage() {\n img2.size(50, AUTO);\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "width and height of the element in an object.",
"type": "Object"
}
},
{
"params": [
{
"name": "w",
"description": "width of the element, either AUTO, or a number.",
"optional": 1,
"type": "Number|AUTO"
},
{
"name": "h",
"description": "height of the element, either AUTO, or a number.",
"optional": 1,
"type": "Number|AUTO"
}
],
"chainable": 1
}
],
"return": {
"description": "width and height of the element in an object.",
"type": "Object"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "style",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1083,
"itemtype": "method",
"description": "Applies a style to the element by adding a\nCSS declaration.
\nThe first parameter, property, is a string. If the name of a style\nproperty is passed, as in myElement.style('color'), the method returns\nthe current value as a string or null if it hasn't been set. If a\nproperty:style string is passed, as in\nmyElement.style('color:deeppink'), the method sets the style property\nto value.
\nThe second parameter, value, is optional. It sets the property's value.\nvalue can be a string, as in\nmyElement.style('color', 'deeppink'), or a\np5.Color object, as in\nmyElement.style('color', myColor).
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its font color to \"deeppink\".\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color', 'deeppink');\n\n describe('The text p5*js written in pink on a gray background.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color('deeppink');\n\n // Create a paragraph element and set its font color using a p5.Color object.\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color', c);\n\n describe('The text p5*js written in pink on a gray background.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its font color to \"deeppink\"\n // using property:value syntax.\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color:deeppink');\n\n describe('The text p5*js written in pink on a gray background.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an empty paragraph element and set its font color to \"deeppink\".\n let p = createP();\n p.position(5, 5);\n p.style('color', 'deeppink');\n\n // Get the element's color as an RGB color string.\n let c = p.style('color');\n\n // Set the element's inner HTML using the RGB color string.\n p.html(c);\n\n describe('The text \"rgb(255, 20, 147)\" written in pink on a gray background.');\n}"
],
"overloads": [
{
"params": [
{
"name": "property",
"description": "style property to set.",
"type": "String"
}
],
"return": {
"description": "value of the property.",
"type": "String"
}
},
{
"params": [
{
"name": "property",
"description": "",
"type": "String"
},
{
"name": "value",
"description": "value to assign to the property.",
"type": "String|p5.Color"
}
],
"return": {
"description": "value of the property.",
"type": "String"
},
"chainable": 1
}
],
"return": {
"description": "value of the property.",
"type": "String"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "attribute",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1235,
"itemtype": "method",
"description": "Adds an\nattribute\nto the element.
\nThis method is useful for advanced tasks. Most commonly-used attributes,\nsuch as id, can be set with their dedicated methods. For example,\nnextButton.id('next') sets an element's id attribute. Calling\nnextButton.attribute('id', 'next') has the same effect.
\nThe first parameter, attr, is the attribute's name as a string. Calling\nmyElement.attribute('align') returns the attribute's current value as a\nstring or null if it hasn't been set.
\nThe second parameter, value, is optional. It's a string used to set the\nattribute's value. For example, calling\nmyElement.attribute('align', 'center') sets the element's horizontal\nalignment to center.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n // Create a container div element and place it at the top-left corner.\n let container = createDiv();\n container.position(0, 0);\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"left\".\n let p1 = createP('hi');\n p1.parent(container);\n p1.attribute('align', 'left');\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"center\".\n let p2 = createP('hi');\n p2.parent(container);\n p2.attribute('align', 'center');\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"right\".\n let p3 = createP('hi');\n p3.parent(container);\n p3.attribute('align', 'right');\n\n describe('A gray square with the text \"hi\" written on three separate lines, each placed further to the right.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "value of the attribute.",
"type": "String"
}
},
{
"params": [
{
"name": "attr",
"description": "attribute to set.",
"type": "String"
},
{
"name": "value",
"description": "value to assign to the attribute.",
"type": "String"
}
],
"chainable": 1
}
],
"return": {
"description": "value of the attribute.",
"type": "String"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "removeAttribute",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1290,
"itemtype": "method",
"description": "Removes an attribute from the element.
\nThe parameter attr is the attribute's name as a string. For example,\ncalling myElement.removeAttribute('align') removes its align\nattribute if it's been set.
\n",
"example": [
"let p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and place it in the center of the canvas.\n // Set its \"align\" attribute to \"center\".\n p = createP('hi');\n p.position(0, 20);\n p.attribute('align', 'center');\n\n describe('The text \"hi\" written in black at the center of a gray square. The text moves to the left edge when double-clicked.');\n}\n\n// Remove the 'align' attribute when the user double-clicks the paragraph.\nfunction doubleClicked() {\n p.removeAttribute('align');\n}"
],
"overloads": [
{
"params": [
{
"name": "attr",
"description": "attribute to remove.",
"type": "String"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "value",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1367,
"itemtype": "method",
"description": "Returns or sets the element's value.
\nCalling myElement.value() returns the element's current value.
\nThe parameter, value, is an optional number or string. If provided,\nas in myElement.value(123), it's used to set the element's value.
\n",
"example": [
"let input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a text input and place it beneath the canvas.\n // Set its default value to \"hello\".\n input = createInput('hello');\n input.position(0, 100);\n\n describe('The text from an input box is displayed on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input's value to display a message.\n let msg = input.value();\n text(msg, 0, 55);\n}",
"let input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a text input and place it beneath the canvas.\n // Set its default value to \"hello\".\n input = createInput('hello');\n input.position(0, 100);\n\n describe('The text from an input box is displayed on a gray square. The text resets to \"hello\" when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input's value to display a message.\n let msg = input.value();\n text(msg, 0, 55);\n}\n\n// Reset the input's value.\nfunction doubleClicked() {\n input.value('hello');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "value of the element.",
"type": "String|Number"
}
},
{
"params": [
{
"name": "value",
"description": "",
"type": "String|Number"
}
],
"chainable": 1
}
],
"return": {
"description": "value of the element.",
"type": "String|Number"
},
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "mousePressed",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1413,
"itemtype": "method",
"description": "Calls a function when the mouse is pressed over the element.
\nCalling myElement.mousePressed(false) disables the function.
\nNote: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.
\n",
"example": [
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the canvas\n // is pressed.\n cnv.mousePressed(randomColor);\n\n describe('A gray square changes color when the mouse is pressed.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the mouse is\npressed over the element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "doubleClicked",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1462,
"itemtype": "method",
"description": "Calls a function when the mouse is pressed twice over the element.
\nCalling myElement.doubleClicked(false) disables the function.
\n",
"example": [
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // canvas is double-clicked.\n cnv.doubleClicked(randomColor);\n\n describe('A gray square changes color when the user double-clicks the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the mouse is\ndouble clicked over the element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "mouseWheel",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1540,
"itemtype": "method",
"description": "Calls a function when the mouse wheel scrolls over the element.
\nThe callback function, fxn, is passed an event object. event has\ntwo numeric properties, deltaY and deltaX. event.deltaY is\nnegative if the mouse wheel rotates away from the user. It's positive if\nthe mouse wheel rotates toward the user. event.deltaX is positive if\nthe mouse wheel moves to the right. It's negative if the mouse wheel moves\nto the left.
\nCalling myElement.mouseWheel(false) disables the function.
\n",
"example": [
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse wheel moves.\n cnv.mouseWheel(randomColor);\n\n describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}",
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call changeBackground() when the\n // mouse wheel moves.\n cnv.mouseWheel(changeBackground);\n\n describe('A gray square. When the mouse wheel scrolls over the square, it changes color and displays shapes.');\n}\n\nfunction changeBackground(event) {\n // Change the background color\n // based on deltaY.\n if (event.deltaY > 0) {\n background('deeppink');\n } else if (event.deltaY < 0) {\n background('cornflowerblue');\n } else {\n background(200);\n }\n\n // Draw a shape based on deltaX.\n if (event.deltaX > 0) {\n circle(50, 50, 20);\n } else if (event.deltaX < 0) {\n square(40, 40, 20);\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the mouse wheel is\nscrolled over the element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "mouseReleased",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1580,
"itemtype": "method",
"description": "Calls a function when the mouse is released over the element.
\nCalling myElement.mouseReleased(false) disables the function.
\nNote: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.
\n",
"example": [
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when a\n // mouse press ends.\n cnv.mouseReleased(randomColor);\n\n describe('A gray square changes color when the user releases a mouse press.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the mouse is\npressed over the element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "mouseClicked",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1620,
"itemtype": "method",
"description": "Calls a function when the mouse is pressed and released over the element.
\nCalling myElement.mouseReleased(false) disables the function.
\nNote: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.
\n",
"example": [
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when a\n // mouse press ends.\n cnv.mouseClicked(randomColor);\n\n describe('A gray square changes color when the user releases a mouse press.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the mouse is\npressed and released over the element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "mouseMoved",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1657,
"itemtype": "method",
"description": "Calls a function when the mouse moves over the element.
\nCalling myElement.mouseMoved(false) disables the function.
\n",
"example": [
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves.\n cnv.mouseMoved(randomColor);\n\n describe('A gray square changes color when the mouse moves over the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the mouse\nmoves over the element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "mouseOver",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1694,
"itemtype": "method",
"description": "Calls a function when the mouse moves onto the element.
\nCalling myElement.mouseOver(false) disables the function.
\n",
"example": [
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves onto the canvas.\n cnv.mouseOver(randomColor);\n\n describe('A gray square changes color when the mouse moves onto the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the mouse\nmoves onto the element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "mouseOut",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1731,
"itemtype": "method",
"description": "Calls a function when the mouse moves off the element.
\nCalling myElement.mouseOut(false) disables the function.
\n",
"example": [
"function setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves off the canvas.\n cnv.mouseOut(randomColor);\n\n describe('A gray square changes color when the mouse moves off the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the mouse\nmoves off the element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "dragOver",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1768,
"itemtype": "method",
"description": "Calls a function when a file is dragged over the element.
\nCalling myElement.dragOver(false) disables the function.
\n",
"example": [
"// Drag a file over the canvas to test.\n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call helloFile() when a\n // file is dragged over\n // the canvas.\n cnv.dragOver(helloFile);\n\n describe('A gray square. The text \"hello, file\" appears when a file is dragged over the square.');\n}\n\nfunction helloFile() {\n text('hello, file', 50, 50);\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the file is\ndragged over the element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "dragLeave",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1805,
"itemtype": "method",
"description": "Calls a function when a file is dragged off the element.
\nCalling myElement.dragLeave(false) disables the function.
\n",
"example": [
"// Drag a file over, then off\n// the canvas to test.\n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call byeFile() when a\n // file is dragged over,\n // then off the canvas.\n cnv.dragLeave(byeFile);\n\n describe('A gray square. The text \"bye, file\" appears when a file is dragged over, then off the square.');\n}\n\nfunction byeFile() {\n text('bye, file', 50, 50);\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the file is\ndragged off the element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "changed",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1872,
"itemtype": "method",
"description": "Calls a function when the element changes.
\nCalling myElement.changed(false) disables the function.
\n",
"example": [
"let dropdown;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a dropdown menu and add a few color options.\n dropdown = createSelect();\n dropdown.position(0, 0);\n dropdown.option('red');\n dropdown.option('green');\n dropdown.option('blue');\n\n // Call paintBackground() when the color option changes.\n dropdown.changed(paintBackground);\n\n describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');\n}\n\n// Paint the background with the selected color.\nfunction paintBackground() {\n let c = dropdown.value();\n background(c);\n}",
"let checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox(' circle');\n checkbox.position(0, 100);\n\n // Call repaint() when the checkbox changes.\n checkbox.changed(repaint);\n\n describe('A gray square with a checkbox underneath it that says \"circle\". A white circle appears when the box is checked and disappears otherwise.');\n}\n\n// Paint the background gray and determine whether to draw a circle.\nfunction repaint() {\n background(200);\n if (checkbox.checked() === true) {\n circle(50, 50, 30);\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when the element changes.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "input",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 1937,
"itemtype": "method",
"description": "Calls a function when the element receives input.
\nmyElement.input() is often used to with text inputs and sliders. Calling\nmyElement.input(false) disables the function.
\n",
"example": [
"let slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a slider and place it beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n // Call repaint() when the slider changes.\n slider.input(repaint);\n\n describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');\n}\n\n// Paint the background using slider's value.\nfunction repaint() {\n let g = slider.value();\n background(g);\n}",
"let input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an input and place it beneath the canvas.\n input = createInput('');\n input.position(0, 100);\n\n // Call repaint() when input is detected.\n input.input(repaint);\n\n describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');\n}\n\n// Paint the background gray and display the input's value.\nfunction repaint() {\n background(200);\n let msg = input.value();\n text(msg, 5, 50);\n}"
],
"overloads": [
{
"params": [
{
"name": "fxn",
"description": "function to call when input is detected within\nthe element.\nfalse disables the function.",
"type": "Function|Boolean"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "drop",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 2044,
"itemtype": "method",
"description": "Calls a function when the user drops a file on the element.
\nThe first parameter, callback, is a function to call once the file loads.\nThe callback function should have one parameter, file, that's a\np5.File object. If the user drops multiple files on\nthe element, callback, is called once for each file.
\nThe second parameter, fxn, is a function to call when the browser detects\none or more dropped files. The callback function should have one\nparameter, event, that's a\nDragEvent.
\n",
"example": [
"// Drop an image on the canvas to view\n// this example.\nlet img;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n\n background(200);\n\n // Call handleFile() when a file that's dropped on the canvas has loaded.\n c.drop(handleFile);\n\n describe('A gray square. When the user drops an image on the square, it is displayed.');\n}\n\n// Remove the existing image and display the new one.\nfunction handleFile(file) {\n // Remove the current image, if any.\n if (img) {\n img.remove();\n }\n\n // Create an ![]()
element with the\n // dropped file.\n img = createImg(file.data, '');\n img.hide();\n\n // Draw the image.\n image(img, 0, 0, width, height);\n}",
"// Drop an image on the canvas to view\n// this example.\nlet img;\nlet msg;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n\n background(200);\n\n // Call functions when the user drops a file on the canvas\n // and when the file loads.\n c.drop(handleFile, handleDrop);\n\n describe('A gray square. When the user drops an image on the square, it is displayed. The id attribute of canvas element is also displayed.');\n}\n\n// Display the image when it loads.\nfunction handleFile(file) {\n // Remove the current image, if any.\n if (img) {\n img.remove();\n }\n\n // Create an img element with the dropped file.\n img = createImg(file.data, '');\n img.hide();\n\n // Draw the image.\n image(img, 0, 0, width, height);\n}\n\n// Display the file's name when it loads.\nfunction handleDrop(event) {\n // Remove current paragraph, if any.\n if (msg) {\n msg.remove();\n }\n\n // Use event to get the drop target's id.\n let id = event.target.id;\n\n // Write the canvas' id beneath it.\n msg = createP(id);\n msg.position(0, 100);\n\n // Set the font color randomly for each drop.\n let c = random(['red', 'green', 'blue']);\n msg.style('color', c);\n msg.style('font-size', '12px');\n}"
],
"overloads": [
{
"params": [
{
"name": "callback",
"description": "called when a file loads. Called once for each file dropped.",
"type": "Function"
},
{
"name": "fxn",
"description": "called once when any files are dropped.",
"optional": 1,
"type": "Function"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "draggable",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
"line": 2152,
"itemtype": "method",
"description": "Makes the element draggable.
\nThe parameter, elmnt, is optional. If another\np5.Element object is passed, as in\nmyElement.draggable(otherElement), the other element will become draggable.
\n",
"example": [
"let stickyNote;\nlet textInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element and style it.\n stickyNote = createDiv('Note');\n stickyNote.position(5, 5);\n stickyNote.size(80, 20);\n stickyNote.style('font-size', '16px');\n stickyNote.style('font-family', 'Comic Sans MS');\n stickyNote.style('background', 'orchid');\n stickyNote.style('padding', '5px');\n\n // Make the note draggable.\n stickyNote.draggable();\n\n // Create a panel div and style it.\n let panel = createDiv('');\n panel.position(5, 40);\n panel.size(80, 50);\n panel.style('background', 'orchid');\n panel.style('font-size', '16px');\n panel.style('padding', '5px');\n panel.style('text-align', 'center');\n\n // Make the panel draggable.\n panel.draggable();\n\n // Create a text input and style it.\n textInput = createInput('Note');\n textInput.size(70);\n\n // Add the input to the panel.\n textInput.parent(panel);\n\n // Call handleInput() when text is input.\n textInput.input(handleInput);\n\n describe(\n 'A gray square with two purple rectangles that move when dragged. The top rectangle displays the text that is typed into the bottom rectangle.'\n );\n}\n\n// Update stickyNote's HTML when text is input.\nfunction handleInput() {\n stickyNote.html(textInput.value());\n}"
],
"overloads": [
{
"params": [
{
"name": "elmnt",
"description": "another p5.Element.",
"optional": 1,
"type": "p5.Element"
}
],
"chainable": 1
}
],
"class": "p5.Element",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "getParent",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 57,
"itemtype": "method",
"description": "Returns the element's parent element as a new p5.XML\nobject.",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal elements.\n let mammals = myXML.getChildren('mammal');\n\n // Get the first mammal element.\n let firstMammal = mammals[0];\n\n // Get the parent element.\n let parent = firstMammal.getParent();\n\n // Get the parent element's name.\n let name = parent.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the parent element's name.\n text(name, 50, 50);\n\n describe('The word \"animals\" written in black on a gray background.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "parent element.",
"type": "p5.XML"
}
}
],
"return": {
"description": "parent element.",
"type": "p5.XML"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "getName",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 100,
"itemtype": "method",
"description": "Returns the element's name as a String.
\nAn XML element's name is given by its tag. For example, the element\nJavaScript has the name language.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal elements.\n let mammals = myXML.getChildren('mammal');\n\n // Get the first mammal element.\n let firstMammal = mammals[0];\n\n // Get the mammal element's name.\n let name = firstMammal.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's name.\n text(name, 50, 50);\n\n describe('The word \"mammal\" written in black on a gray background.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "name of the element.",
"type": "String"
}
}
],
"return": {
"description": "name of the element.",
"type": "String"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "setName",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 150,
"itemtype": "method",
"description": "Sets the element's tag name.
\nAn XML element's name is given by its tag. For example, the element\nJavaScript has the name language.
\nThe parameter, name, is the element's new name as a string. For example,\ncalling myXML.setName('planet') will make the element's new tag name\n
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the element's original name.\n let oldName = myXML.getName();\n\n // Set the element's name.\n myXML.setName('monsters');\n\n // Get the element's new name.\n let newName = myXML.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's names.\n text(oldName, 50, 33);\n text(newName, 50, 67);\n\n describe(\n 'The words \"animals\" and \"monsters\" written on separate lines. The text is black on a gray background.'\n );\n}"
],
"overloads": [
{
"params": [
{
"name": "name",
"description": "new tag name of the element.",
"type": "String"
}
]
}
],
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "hasChildren",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 196,
"itemtype": "method",
"description": "Returns true if the element has child elements and false if not.",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Check whether the element has child elements.\n let isParent = myXML.hasChildren();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Style the text.\n if (isParent === true) {\n text('Parent', 50, 50);\n } else {\n text('Not Parent', 50, 50);\n }\n\n describe('The word \"Parent\" written in black on a gray background.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "whether the element has children.",
"type": "boolean"
}
}
],
"return": {
"description": "whether the element has children.",
"type": "boolean"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "listChildren",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 240,
"itemtype": "method",
"description": "Returns an array with the names of the element's child elements as\nStrings.",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the names of the element's children as an array.\n let children = myXML.listChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the child element's name.\n text(children[i], 10, y);\n }\n\n describe(\n 'The words \"mammal\", \"mammal\", \"mammal\", and \"reptile\" written on separate lines. The text is black on a gray background.'\n );\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "names of the child elements.",
"type": "String[]"
}
}
],
"return": {
"description": "names of the child elements.",
"type": "String[]"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "getChildren",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 334,
"itemtype": "method",
"description": "Returns an array with the element's child elements as new\np5.XML objects.
\nThe parameter, name, is optional. If a string is passed, as in\nmyXML.getChildren('cat'), then the method will only return child elements\nwith the tag
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array of the child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", \"Zebra\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}",
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array of the child elements\n // that are mammals.\n let children = myXML.getChildren('mammal');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on separate lines. The text is black on a gray background.'\n );\n}"
],
"overloads": [
{
"params": [
{
"name": "name",
"description": "name of the elements to return.",
"optional": 1,
"type": "String"
}
],
"return": {
"description": "child elements.",
"type": "p5.XML[]"
}
}
],
"return": {
"description": "child elements.",
"type": "p5.XML[]"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "getChild",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 410,
"itemtype": "method",
"description": "Returns the first matching child element as a new\np5.XML object.
\nThe parameter, name, is optional. If a string is passed, as in\nmyXML.getChild('cat'), then the first child element with the tag\nmyXML.getChild(1), then the child element at that index will be returned.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element that is a mammal.\n let goat = myXML.getChild('mammal');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = goat.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Goat\" written in black on a gray background.');\n}",
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the child element at index 1.\n let leopard = myXML.getChild(1);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = leopard.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Leopard\" written in black on a gray background.');\n}"
],
"overloads": [
{
"params": [
{
"name": "name",
"description": "element name or index.",
"type": "String|Integer"
}
],
"return": {
"description": "child element.",
"type": "p5.XML"
}
}
],
"return": {
"description": "child element.",
"type": "p5.XML"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "addChild",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 470,
"itemtype": "method",
"description": "Adds a new child element and returns a reference to it.
\nThe parameter, child, is the p5.XML object to add\nas a child element. For example, calling myXML.addChild(otherXML) inserts\notherXML as a child element of myXML.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Create a new p5.XML object.\n let newAnimal = new p5.XML();\n\n // Set its properties.\n newAnimal.setName('hydrozoa');\n newAnimal.setAttribute('id', 4);\n newAnimal.setAttribute('species', 'Physalia physalis');\n newAnimal.setContent('Bluebottle');\n\n // Add the child element.\n myXML.addChild(newAnimal);\n\n // Get the first child element that is a hydrozoa.\n let blueBottle = myXML.getChild('hydrozoa');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = blueBottle.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Bluebottle\" written in black on a gray background.');\n}"
],
"overloads": [
{
"params": [
{
"name": "child",
"description": "child element to add.",
"type": "p5.XML"
}
],
"return": {
"description": "added child element.",
"type": "p5.XML"
}
}
],
"return": {
"description": "added child element.",
"type": "p5.XML"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "removeChild",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 569,
"itemtype": "method",
"description": "Removes the first matching child element.
\nThe parameter, name, is the child element to remove. If a string is\npassed, as in myXML.removeChild('cat'), then the first child element\nwith the tag myXML.removeChild(1), then the child element at that index will be\nremoved.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Remove the first mammal element.\n myXML.removeChild('mammal');\n\n // Get an array of child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Leopard\", \"Zebra\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}",
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Remove the element at index 2.\n myXML.removeChild(2);\n\n // Get an array of child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}"
],
"overloads": [
{
"params": [
{
"name": "name",
"description": "name or index of the child element to remove.",
"type": "String|Integer"
}
]
}
],
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "getAttributeCount",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 619,
"itemtype": "method",
"description": "Returns the number of attributes the element has.",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element.\n let first = myXML.getChild(0);\n\n // Get the number of attributes.\n let numAttributes = first.getAttributeCount();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the number of attributes.\n text(numAttributes, 50, 50);\n\n describe('The number \"2\" written in black on a gray background.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "number of attributes.",
"type": "Integer"
}
}
],
"return": {
"description": "number of attributes.",
"type": "Integer"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "listAttributes",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 660,
"itemtype": "method",
"description": "Returns an Array with the names of the element's attributes.
\nNote: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element.\n let first = myXML.getChild(0);\n\n // Get the number of attributes.\n let attributes = first.listAttributes();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's attributes.\n text(attributes, 50, 50);\n\n describe('The text \"id,species\" written in black on a gray background.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "attribute names.",
"type": "String[]"
}
}
],
"return": {
"description": "attribute names.",
"type": "String[]"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "hasAttribute",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 716,
"itemtype": "method",
"description": "Returns true if the element has a given attribute and false if not.
\nThe parameter, name, is a string with the name of the attribute being\nchecked.
\nNote: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first mammal child element.\n let mammal = myXML.getChild('mammal');\n\n // Check whether the element has an\n // species attribute.\n let hasSpecies = mammal.hasAttribute('species');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display whether the element has a species attribute.\n if (hasSpecies === true) {\n text('Species', 50, 50);\n } else {\n text('No species', 50, 50);\n }\n\n describe('The text \"Species\" written in black on a gray background.');\n}"
],
"overloads": [
{
"params": [
{
"name": "name",
"description": "name of the attribute to be checked.",
"type": "String"
}
],
"return": {
"description": "whether the element has the attribute.",
"type": "boolean"
}
}
],
"return": {
"description": "whether the element has the attribute.",
"type": "boolean"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "getNum",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 809,
"itemtype": "method",
"description": "Return an attribute's value as a Number.
\nThe first parameter, name, is a string with the name of the attribute\nbeing checked. For example, calling myXML.getNum('id') returns the\nelement's id attribute as a number.
\nThe second parameter, defaultValue, is optional. If a number is passed,\nas in myXML.getNum('id', -1), it will be returned if the attribute\ndoesn't exist or can't be converted to a number.
\nNote: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's ID.\n let id = reptile.getNum('id');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the ID attribute.\n text(`${content} is ${id + 1}th`, 5, 50, 90);\n\n describe(`The text \"${content} is ${id + 1}th\" written in black on a gray background.`);\n}",
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's size.\n let weight = reptile.getNum('weight', 135);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the ID attribute.\n text(`${content} is ${weight}kg`, 5, 50, 90);\n\n describe(\n `The text \"${content} is ${weight}kg\" written in black on a gray background.`\n );\n}"
],
"overloads": [
{
"params": [
{
"name": "name",
"description": "name of the attribute to be checked.",
"type": "String"
},
{
"name": "defaultValue",
"description": "value to return if the attribute doesn't exist.",
"optional": 1,
"type": "Number"
}
],
"return": {
"description": "attribute value as a number.",
"type": "Number"
}
}
],
"return": {
"description": "attribute value as a number.",
"type": "Number"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "getString",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 901,
"itemtype": "method",
"description": "Return an attribute's value as a string.
\nThe first parameter, name, is a string with the name of the attribute\nbeing checked. For example, calling myXML.getString('color') returns the\nelement's id attribute as a string.
\nThe second parameter, defaultValue, is optional. If a string is passed,\nas in myXML.getString('color', 'deeppink'), it will be returned if the\nattribute doesn't exist.
\nNote: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's species.\n let species = reptile.getString('species');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the species attribute.\n text(`${content}: ${species}`, 5, 50, 90);\n\n describe(`The text \"${content}: ${species}\" written in black on a gray background.`);\n}",
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's color.\n let attribute = reptile.getString('color', 'green');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n fill(attribute);\n\n // Display the element's content.\n text(content, 50, 50);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}"
],
"overloads": [
{
"params": [
{
"name": "name",
"description": "name of the attribute to be checked.",
"type": "String"
},
{
"name": "defaultValue",
"description": "value to return if the attribute doesn't exist.",
"optional": 1,
"type": "Number"
}
],
"return": {
"description": "attribute value as a string.",
"type": "String"
}
}
],
"return": {
"description": "attribute value as a string.",
"type": "String"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "setAttribute",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 960,
"itemtype": "method",
"description": "Sets an attribute to a given value.
\nThe first parameter, name, is a string with the name of the attribute\nbeing set.
\nThe second parameter, value, is the attribute's new value. For example,\ncalling myXML.setAttribute('id', 123) sets the id attribute to the\nvalue 123.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Set the reptile's color.\n reptile.setAttribute('color', 'green');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's color.\n let attribute = reptile.getString('color');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(`${content} is ${attribute}`, 5, 50, 90);\n\n describe(\n `The text \"${content} is ${attribute}\" written in green on a gray background.`\n );\n}"
],
"overloads": [
{
"params": [
{
"name": "name",
"description": "name of the attribute to be set.",
"type": "String"
},
{
"name": "value",
"description": "attribute's new value.",
"type": "Number|String|Boolean"
}
]
}
],
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "getContent",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 1026,
"itemtype": "method",
"description": "Returns the element's content as a String.
\nThe parameter, defaultValue, is optional. If a string is passed, as in\nmyXML.getContent('???'), it will be returned if the element has no\ncontent.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(content, 5, 50, 90);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.XML object.\n let blankSpace = new p5.XML();\n\n // Get the element's content and use a default value.\n let content = blankSpace.getContent('Your name');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(content, 5, 50, 90);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}"
],
"overloads": [
{
"params": [
{
"name": "defaultValue",
"description": "value to return if the element has no\ncontent.",
"optional": 1,
"type": "String"
}
],
"return": {
"description": "element's content as a string.",
"type": "String"
}
}
],
"return": {
"description": "element's content as a string.",
"type": "String"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "serialize",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
"line": 1132,
"itemtype": "method",
"description": "Returns the element as a String.
\nmyXML.serialize() is useful for sending the element over the network or\nsaving it to a file.
\n",
"example": [
"let myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n // Use the file format .xml.\n let myWriter = createWriter('animals', 'xml');\n\n // Serialize the XML data to a string.\n let data = myXML.serialize();\n\n // Write the data to the print stream.\n myWriter.write(data);\n\n // Save the file and close the print stream.\n myWriter.close();\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "element as a string.",
"type": "String"
}
}
],
"return": {
"description": "element as a string.",
"type": "String"
},
"class": "p5.XML",
"static": false,
"module": "IO",
"submodule": "Input"
},
{
"name": "set",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
"line": 60,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Set every row's \"name\" to \"Unicorn\"\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n // Convert the table to an array\n let tableArray = table.getArray();\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(12); // Set text size\n\n // Display each row of the table on the canvas\n let y = 20; // Starting y position\n for (let i = 0; i < tableArray.length; i++) {\n let rowText = tableArray[i].join(', ');\n text(rowText, 10, y * 2.5);\n y += 20; // Increment y position for the next row\n }\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "column",
"description": "Column ID (Number)\nor Title (String)",
"type": "String|Integer"
},
{
"name": "value",
"description": "The value to be stored",
"type": "String|Number"
}
]
}
],
"class": "p5.TableRow",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "setNum",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
"line": 127,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Update each row's \"id\" to (row index + 10)\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].setNum('id', r + 10);\n }\n\n // Convert the table to a 2D array for display\n let tableArray = table.getArray();\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display each row of the table on the canvas\n let y = 20; // Starting y position\n for (let i = 0; i < tableArray.length; i++) {\n // Join each row's values with a comma separator\n let rowText = tableArray[i].join(', ');\n text(rowText, 10, y * 2.5);\n y += 20; // Increment y for the next row\n }\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "column",
"description": "Column ID (Number)\nor Title (String)",
"type": "String|Integer"
},
{
"name": "value",
"description": "The value to be stored\nas a Float",
"type": "Number|String"
}
]
}
],
"class": "p5.TableRow",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "setString",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
"line": 177,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 300x200 canvas and set a white background\n createCanvas(300, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Update each row's \"name\" field\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n let name = rows[r].getString('name');\n rows[r].setString('name', 'A ' + name + ' named George');\n }\n\n // Convert the table to a 2D array for display\n let tableArray = table.getArray();\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display each row of the table on the canvas\n let y = 20; // Starting y position\n for (let i = 0; i < tableArray.length; i++) {\n let rowText = tableArray[i].join(', ');\n text(rowText, 10, y * 2.5);\n y += 20; // Increment y for the next row\n }\n\n // describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "column",
"description": "Column ID (Number)\nor Title (String)",
"type": "String|Integer"
},
{
"name": "value",
"description": "The value to be stored\nas a String",
"type": "String|Number|Boolean|Object"
}
]
}
],
"class": "p5.TableRow",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "get",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
"line": 220,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x100 canvas and set a white background\n createCanvas(200, 100);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Extract the names from each row and store them in an array\n let names = [];\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n names.push(rows[r].get('name'));\n }\n\n // Set text properties and display the names on the canvas\n fill(0); // Set text color to black\n textSize(12); // Set text size\n\n // Join names into a single string separated by commas\n let namesText = names.join(', ');\n text(namesText, 35, 50);\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "column",
"description": "columnName (string) or\nID (number)",
"type": "String|Integer"
}
],
"return": {
"description": "",
"type": "String|Number"
}
}
],
"return": {
"description": "",
"type": "String|Number"
},
"class": "p5.TableRow",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getNum",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
"line": 268,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 300x100 canvas and set a white background\n createCanvas(300, 100);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n let rows = table.getRows();\n let minId = Infinity;\n let maxId = -Infinity;\n\n for (let r = 0; r < rows.length; r++) {\n let id = rows[r].getNum('id');\n minId = min(minId, id);\n maxId = max(maxId, id);\n }\n\n let result = 'minimum id = ' + minId + ', maximum id = ' + maxId;\n\n // Set text properties and display the result on the canvas\n fill(0); // Set text color to black\n textSize(12); // Set text size\n text(result, 10, 50);\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "column",
"description": "columnName (string) or\nID (number)",
"type": "String|Integer"
}
],
"return": {
"description": "Float Floating point number",
"type": "Number"
}
}
],
"return": {
"description": "Float Floating point number",
"type": "Number"
},
"class": "p5.TableRow",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getString",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
"line": 322,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x100 canvas and set a white background\n createCanvas(200, 100);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n let rows = table.getRows();\n let longest = '';\n for (let r = 0; r < rows.length; r++) {\n let species = rows[r].getString('species');\n if (longest.length < species.length) {\n longest = species;\n }\n }\n\n let result = 'longest: ' + longest;\n\n // Set text properties and display the result on the canvas\n fill(0); // Set text color to black\n textSize(12); // Set text size\n text(result, 30, 50);\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "column",
"description": "columnName (string) or\nID (number)",
"type": "String|Integer"
}
],
"return": {
"description": "String",
"type": "String"
}
}
],
"return": {
"description": "String",
"type": "String"
},
"class": "p5.TableRow",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getValue",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 119,
"itemtype": "method",
"description": "Retrieves the value at the specified index from the vector.
\nThis method allows you to get the value of a specific component of the vector\nby providing its index. Think of the vector as a list of numbers, where each\nnumber represents a different direction (like x, y, or z). The index is just\nthe position of the number in that list.
\nFor example, if you have a vector with values 10, 20, 30 the index 0 would\ngive you the first value 10, index 1 would give you the second value 20,\nand so on.
\n",
"example": [],
"overloads": [
{
"params": [
{
"name": "index",
"description": "The position of the value you want to get from the vector.",
"type": "Number"
}
],
"return": {
"description": "The value at the specified position in the vector.",
"type": "Number"
}
}
],
"return": {
"description": "The value at the specified position in the vector.",
"type": "Number"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "setValue",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 144,
"itemtype": "method",
"description": "Sets the value at the specified index of the vector.
\nThis method allows you to change a specific component of the vector by providing its index and the new value you want to set.\nThink of the vector as a list of numbers, where each number represents a different direction (like x, y, or z).\nThe index is just the position of the number in that list.
\nFor example, if you have a vector with values [0, 20, 30], and you want to change the second value (20) to 50,\nyou would use this method with index 1 (since indexes start at 0) and value 50.
\n",
"example": [],
"overloads": [
{
"params": [
{
"name": "index",
"description": "The position in the vector where you want to set the new value.",
"type": "Number"
},
{
"name": "value",
"description": "The new value you want to set at the specified position.",
"type": "Number"
}
]
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "toString",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 271,
"itemtype": "method",
"description": "Returns a string representation of a vector.
\nCalling toString() is useful for printing vectors to the console while\ndebugging.
\n",
"example": [
"// META:norender\nfunction setup() {\n let v = createVector(20, 30);\n\n // Prints 'vector[20, 30, 0]'.\n print(v.toString());\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "string representation of the vector.",
"type": "String"
}
}
],
"return": {
"description": "string representation of the vector.",
"type": "String"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "set",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 328,
"itemtype": "method",
"description": "Sets the vector's x, y, and z components.
\nset() can use separate numbers, as in v.set(1, 2, 3), a\np5.Vector object, as in v.set(v2), or an\narray of numbers, as in v.set([1, 2, 3]).
\nIf a value isn't provided for a component, it will be set to 0. For\nexample, v.set(4, 5) sets v.x to 4, v.y to 5, and v.z to 0.\nCalling set() with no arguments, as in v.set(), sets all the vector's\ncomponents to 0.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top left.\n let pos = createVector(25, 25);\n point(pos);\n\n // Top right.\n // set() with numbers.\n pos.set(75, 25);\n point(pos);\n\n // Bottom right.\n // set() with a p5.Vector.\n let p2 = createVector(75, 75);\n pos.set(p2);\n point(pos);\n\n // Bottom left.\n // set() with an array.\n let arr = [25, 75];\n pos.set(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x component of the vector.",
"optional": 1,
"type": "Number"
},
{
"name": "y",
"description": "y component of the vector.",
"optional": 1,
"type": "Number"
},
{
"name": "z",
"description": "z component of the vector.",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "value",
"description": "vector to set.",
"type": "p5.Vector|Number[]"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "copy",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 364,
"itemtype": "method",
"description": "Returns a copy of the p5.Vector object.",
"example": [
"function setup() {\n createCanvas(100 ,100);\n\n background(200);\n\n // Create a p5.Vector object.\n let pos = createVector(50, 50);\n\n // Make a copy.\n let pc = pos.copy();\n\n // Draw the point.\n strokeWeight(5);\n point(pc);\n\n describe('A black point drawn in the middle of a gray square.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "copy of the p5.Vector object.",
"type": "p5.Vector"
}
}
],
"return": {
"description": "copy of the p5.Vector object.",
"type": "p5.Vector"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "add",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 496,
"itemtype": "method",
"description": "Adds to a vector's components.
\nadd() can use separate numbers, as in v.add(1, 2, 3),\nanother p5.Vector object, as in v.add(v2), or\nan array of numbers, as in v.add([1, 2, 3]).
\nIf a value isn't provided for a component, it won't change. For\nexample, v.add(4, 5) adds 4 to v.x, 5 to v.y, and 0 to v.z.\nCalling add() with no arguments, as in v.add(), has no effect.
\nThis method supports N-dimensional vectors.
\nThe static version of add(), as in p5.Vector.add(v2, v1), returns a new\np5.Vector object and doesn't change the\noriginals.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top left.\n let pos = createVector(25, 25);\n point(pos);\n\n // Top right.\n // Add numbers.\n pos.add(50, 0);\n point(pos);\n\n // Bottom right.\n // Add a p5.Vector.\n let p2 = createVector(0, 50);\n pos.add(p2);\n point(pos);\n\n // Bottom left.\n // Add an array.\n let arr = [-50, 0];\n pos.add(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top left.\n let p1 = createVector(25, 25);\n\n // Center.\n let p2 = createVector(50, 50);\n\n // Bottom right.\n // Add p1 and p2.\n let p3 = p5.Vector.add(p1, p2);\n\n // Draw the points.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots in a diagonal line from top left to bottom right.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Three arrows drawn on a gray square. A red arrow extends from the top left corner to the center. A blue arrow extends from the tip of the red arrow. A purple arrow extends from the origin to the tip of the blue arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(-30, 20);\n drawArrow(v1, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.add(v1, v2);\n drawArrow(origin, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x component of the vector to be added or an array of components.",
"type": "Number|Array"
},
{
"name": "y",
"description": "y component of the vector to be added.",
"optional": 1,
"type": "Number"
},
{
"name": "z",
"description": "z component of the vector to be added.",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "value",
"description": "The vector to add",
"type": "p5.Vector|Number[]"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "rem",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 615,
"itemtype": "method",
"description": "Performs modulo (remainder) division with a vector's x, y, and z\ncomponents.
\nrem() can use separate numbers, as in v.rem(1, 2, 3),\nanother p5.Vector object, as in v.rem(v2), or\nan array of numbers, as in v.rem([1, 2, 3]).
\nIf only one value is provided, as in v.rem(2), then all the components\nwill be set to their values modulo 2. If two values are provided, as in\nv.rem(2, 3), then v.z won't change. Calling rem() with no\narguments, as in v.rem(), has no effect.
\nThe static version of rem(), as in p5.Vector.rem(v2, v1), returns a\nnew p5.Vector object and doesn't change the\noriginals.
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2);\n\n // Prints 'p5.Vector Object : [1, 0, 1]'.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2, 3);\n\n // Prints 'p5.Vector Object : [1, 1, 5]'.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2, 3, 4);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4, 5);\n let v2 = createVector(2, 3, 4);\n\n // Divide a p5.Vector.\n v1.rem(v2);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v1.toString());\n}",
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide an array.\n let arr = [2, 3, 4];\n v.rem(arr);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4, 5);\n let v2 = createVector(2, 3, 4);\n\n // Divide without modifying the original vectors.\n let v3 = p5.Vector.rem(v1, v2);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v3.toString());\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x component of divisor vector.",
"type": "Number"
},
{
"name": "y",
"description": "y component of divisor vector.",
"type": "Number"
},
{
"name": "z",
"description": "z component of divisor vector.",
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "value",
"description": "divisor vector.",
"type": "p5.Vector|Number[]"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "sub",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 789,
"itemtype": "method",
"description": "Subtracts from a vector's x, y, and z components.
\nsub() can use separate numbers, as in v.sub(1, 2, 3), another\np5.Vector object, as in v.sub(v2), or an array\nof numbers, as in v.sub([1, 2, 3]).
\nIf a value isn't provided for a component, it won't change. For\nexample, v.sub(4, 5) subtracts 4 from v.x, 5 from v.y, and 0 from v.z.\nCalling sub() with no arguments, as in v.sub(), has no effect.
\nThe static version of sub(), as in p5.Vector.sub(v2, v1), returns a new\np5.Vector object and doesn't change the\noriginals.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom right.\n let pos = createVector(75, 75);\n point(pos);\n\n // Top right.\n // Subtract numbers.\n pos.sub(0, 50);\n point(pos);\n\n // Top left.\n // Subtract a p5.Vector.\n let p2 = createVector(50, 0);\n pos.sub(p2);\n point(pos);\n\n // Bottom left.\n // Subtract an array.\n let arr = [0, -50];\n pos.sub(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(75, 75);\n let p2 = createVector(50, 50);\n\n // Subtract with modifying the original vectors.\n let p3 = p5.Vector.sub(p1, p2);\n\n // Draw the points.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots in a diagonal line from top left to bottom right.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(20, 70);\n drawArrow(origin, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.sub(v2, v1);\n drawArrow(v1, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x component of the vector to subtract.",
"type": "Number"
},
{
"name": "y",
"description": "y component of the vector to subtract.",
"optional": 1,
"type": "Number"
},
{
"name": "z",
"description": "z component of the vector to subtract.",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "value",
"description": "the vector to subtract",
"type": "p5.Vector|Number[]"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "mult",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 980,
"itemtype": "method",
"description": "Multiplies a vector's x, y, and z components.
\nmult() can use separate numbers, as in v.mult(1, 2, 3), another\np5.Vector object, as in v.mult(v2), or an array\nof numbers, as in v.mult([1, 2, 3]).
\nIf only one value is provided, as in v.mult(2), then all the components\nwill be multiplied by 2. If a value isn't provided for a component, it\nwon't change. For example, v.mult(4, 5) multiplies v.x by, v.y by 5,\nand v.z by 1. Calling mult() with no arguments, as in v.mult(), has\nno effect.
\nThe static version of mult(), as in p5.Vector.mult(v, 2), returns a new\np5.Vector object and doesn't change the\noriginals.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Center.\n // Multiply all components by 2.\n p.mult(2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');\n}",
"function setup() {\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * 2 and p.y * 3\n p.mult(2, 3);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * 2 and p.y * 3\n let arr = [2, 3];\n p.mult(arr);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * p2.x and p.y * p2.y\n let p2 = createVector(2, 3);\n p.mult(p2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Create a new p5.Vector with\n // p3.x = p.x * p2.x\n // p3.y = p.y * p2.y\n let p2 = createVector(2, 3);\n let p3 = p5.Vector.mult(p, p2);\n point(p3);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extending from the top left corner. The blue arrow is twice the length of the red arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(25, 25);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = p5.Vector.mult(v1, 2);\n drawArrow(origin, v2, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "n",
"description": "The number to multiply with the vector",
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "x",
"description": "number to multiply with the x component of the vector.",
"type": "Number"
},
{
"name": "y",
"description": "number to multiply with the y component of the vector.",
"type": "Number"
},
{
"name": "z",
"description": "number to multiply with the z component of the vector.",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "arr",
"description": "array to multiply with the components of the vector.",
"type": "Number[]"
}
],
"chainable": 1
},
{
"params": [
{
"name": "v",
"description": "vector to multiply with the components of the original vector.",
"type": "p5.Vector"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "div",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 1196,
"itemtype": "method",
"description": "Divides a vector's x, y, and z components.
\ndiv() can use separate numbers, as in v.div(1, 2, 3), another\np5.Vector object, as in v.div(v2), or an array\nof numbers, as in v.div([1, 2, 3]).
\nIf only one value is provided, as in v.div(2), then all the components\nwill be divided by 2. If a value isn't provided for a component, it\nwon't change. For example, v.div(4, 5) divides v.x by, v.y by 5,\nand v.z by 1. Calling div() with no arguments, as in v.div(), has\nno effect.
\nThe static version of div(), as in p5.Vector.div(v, 2), returns a new\np5.Vector object and doesn't change the\noriginals.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Center.\n let p = createVector(50, 50);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 2\n p.div(2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n p.div(2, 3);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n let arr = [2, 3];\n p.div(arr);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n let p2 = createVector(2, 3);\n p.div(p2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}",
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Create a new p5.Vector with\n // p3.x = p.x / p2.x\n // p3.y = p.y / p2.y\n let p2 = createVector(2, 3);\n let p3 = p5.Vector.div(p, p2);\n point(p3);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}",
"function draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = p5.Vector.div(v1, 2);\n drawArrow(origin, v2, 'blue');\n\n describe('Two arrows extending from the top left corner. The blue arrow is half the length of the red arrow.');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "n",
"description": "The number to divide the vector by",
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "x",
"description": "number to divide with the x component of the vector.",
"type": "Number"
},
{
"name": "y",
"description": "number to divide with the y component of the vector.",
"type": "Number"
},
{
"name": "z",
"description": "number to divide with the z component of the vector.",
"optional": 1,
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "arr",
"description": "array to divide the components of the vector by.",
"type": "Number[]"
}
],
"chainable": 1
},
{
"params": [
{
"name": "v",
"description": "vector to divide the components of the original vector by.",
"type": "p5.Vector"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "mag",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 1283,
"itemtype": "method",
"description": "Calculates the magnitude (length) of the vector.
\nUse mag() to calculate the magnitude of a 2D vector\nusing components as in mag(x, y).
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector object.\n let p = createVector(30, 40);\n\n // Draw a line from the origin.\n line(0, 0, p.x, p.y);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the vector's magnitude.\n let m = p.mag();\n text(m, p.x, p.y);\n\n describe('A diagonal black line extends from the top left corner of a gray square. The number 50 is written at the end of the line.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "magnitude of the vector.",
"type": "Number"
}
}
],
"return": {
"description": "magnitude of the vector.",
"type": "Number"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "magSq",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 1314,
"itemtype": "method",
"description": "Calculates the magnitude (length) of the vector squared.",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector object.\n let p = createVector(30, 40);\n\n // Draw a line from the origin.\n line(0, 0, p.x, p.y);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the vector's magnitude squared.\n let m = p.magSq();\n text(m, p.x, p.y);\n\n describe('A diagonal black line extends from the top left corner of a gray square. The number 2500 is written at the end of the line.');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "squared magnitude of the vector.",
"type": "Number"
}
}
],
"return": {
"description": "squared magnitude of the vector.",
"type": "Number"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "dot",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 1417,
"itemtype": "method",
"description": "Calculates the dot product of two vectors.
\nThe dot product is a number that describes the overlap between two vectors.\nVisually, the dot product can be thought of as the \"shadow\" one vector\ncasts on another. The dot product's magnitude is largest when two vectors\npoint in the same or opposite directions. Its magnitude is 0 when two\nvectors form a right angle.
\nThe version of dot() with one parameter interprets it as another\np5.Vector object.
\nThe version of dot() with multiple parameters interprets them as the\nx, y, and z components of another vector.
\nThe static version of dot(), as in p5.Vector.dot(v1, v2), is the same\nas calling v1.dot(v2).
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4);\n let v2 = createVector(3, 0);\n\n // Calculate the dot product.\n let dp = v1.dot(v2);\n\n // Prints \"9\" to the console.\n print(dp);\n}",
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the dot product.\n let dp = p5.Vector.dot(v1, v2);\n\n // Prints \"0\" to the console.\n print(dp);\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Two arrows drawn on a gray square. A black arrow points to the right and a red arrow follows the mouse. The text \"v1 • v2 = something\" changes as the mouse moves.');\n}\n\nfunction draw() {\n background(200);\n\n // Center.\n let v0 = createVector(50, 50);\n\n // Draw the black arrow.\n let v1 = createVector(30, 0);\n drawArrow(v0, v1, 'black');\n\n // Draw the red arrow.\n let v2 = createVector(mouseX - 50, mouseY - 50);\n drawArrow(v0, v2, 'red');\n\n // Display the dot product.\n let dp = v2.dot(v1);\n text(`v2 • v1 = ${dp}`, 10, 20);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x component of the vector.",
"type": "Number"
},
{
"name": "y",
"description": "y component of the vector.",
"optional": 1,
"type": "Number"
},
{
"name": "z",
"description": "z component of the vector.",
"optional": 1,
"type": "Number"
}
],
"return": {
"description": "dot product.",
"type": "Number"
}
},
{
"params": [
{
"name": "v",
"description": "p5.Vector to be dotted.",
"type": "p5.Vector"
}
],
"return": {
"description": "",
"type": "Number"
}
}
],
"return": {
"description": "dot product.",
"type": "Number"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "cross",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 1467,
"itemtype": "method",
"description": "Calculates the cross product of two vectors.
\nThe cross product is a vector that points straight out of the plane created\nby two vectors. The cross product's magnitude is the area of the parallelogram\nformed by the original two vectors.
\nThe static version of cross(), as in p5.Vector.cross(v1, v2), is the same\nas calling v1.cross(v2).
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(3, 4);\n\n // Calculate the cross product.\n let cp = v1.cross(v2);\n\n // Prints \"p5.Vector Object : [0, 0, 4]\" to the console.\n print(cp.toString());\n}",
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(3, 4);\n\n // Calculate the cross product.\n let cp = p5.Vector.cross(v1, v2);\n\n // Prints \"p5.Vector Object : [0, 0, 4]\" to the console.\n print(cp.toString());\n}"
],
"overloads": [
{
"params": [
{
"name": "v",
"description": "p5.Vector to be crossed.",
"type": "p5.Vector"
}
],
"return": {
"description": "cross product as a p5.Vector.",
"type": "p5.Vector"
}
}
],
"return": {
"description": "cross product as a p5.Vector.",
"type": "p5.Vector"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "dist",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 1577,
"itemtype": "method",
"description": "Calculates the distance between two points represented by vectors.
\nA point's coordinates can be represented by the components of a vector\nthat extends from the origin to the point.
\nThe static version of dist(), as in p5.Vector.dist(v1, v2), is the same\nas calling v1.dist(v2).
\nUse dist() to calculate the distance between points\nusing coordinates as in dist(x1, y1, x2, y2).
\n",
"example": [
"// META:norender\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the distance between them.\n let d = v1.dist(v2);\n\n // Prints \"1.414...\" to the console.\n print(d);\n}",
"// META:norender\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the distance between them.\n let d = p5.Vector.dist(v1, v2);\n\n // Prints \"1.414...\" to the console.\n print(d);\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow. The number 36 is written in black near the purple arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(20, 70);\n drawArrow(origin, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.sub(v2, v1);\n drawArrow(v1, v3, 'purple');\n\n // Style the text.\n textAlign(CENTER);\n\n // Display the magnitude. The same as floor(v3.mag());\n let m = floor(p5.Vector.dist(v1, v2));\n text(m, 50, 75);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "v",
"description": "x, y, and z coordinates of a p5.Vector.",
"type": "p5.Vector"
}
],
"return": {
"description": "distance.",
"type": "Number"
}
}
],
"return": {
"description": "distance.",
"type": "Number"
},
"class": "p5.Vector",
"static": false,
"module": "Math",
"submodule": "p5.Vector"
},
{
"name": "normalize",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 1673,
"itemtype": "method",
"description": "Scales the components of a p5.Vector object so\nthat its magnitude is 1.
\nThe static version of normalize(), as in p5.Vector.normalize(v),\nreturns a new p5.Vector object and doesn't change\nthe original.
\n",
"example": [
"// META:norender\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector.\n let v = createVector(10, 20, 2);\n\n // Normalize.\n v.normalize();\n\n // Prints \"p5.Vector Object : [0.445..., 0.890..., 0.089...]\" to the console.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector.\n let v0 = createVector(10, 20, 2);\n\n // Create a normalized copy.\n let v1 = p5.Vector.normalize(v0);\n\n // Prints \"p5.Vector Object : [10, 20, 2]\" to the console.\n print(v0.toString());\n // Prints \"p5.Vector Object : [0.445..., 0.890..., 0.089...]\" to the console.\n print(v1.toString());\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe(\"A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow's length is fixed to the circle's radius.\");\n}\n\nfunction draw() {\n background(240);\n\n // Vector to the center.\n let v0 = createVector(50, 50);\n\n // Vector from the center to the mouse.\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n // Circle's radius.\n let r = 25;\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n v1.normalize();\n drawArrow(v0, v1.mult(r), 'blue');\n\n // Draw the circle.\n noFill();\n circle(50, 50, r * 2);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "normalized p5.Vector.",
"type": "p5.Vector"
}
}
],
"return": {
"description": "normalized p5.Vector.",
"type": "p5.Vector"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "limit",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 1761,
"itemtype": "method",
"description": "Limits a vector's magnitude to a maximum value.
\nThe static version of limit(), as in p5.Vector.limit(v, 5), returns a\nnew p5.Vector object and doesn't change the\noriginal.
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(10, 20, 2);\n\n // Limit its magnitude.\n v.limit(5);\n\n // Prints \"p5.Vector Object : [2.227..., 4.454..., 0.445...]\" to the console.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(10, 20, 2);\n\n // Create a copy an limit its magintude.\n let v1 = p5.Vector.limit(v0, 5);\n\n // Prints \"p5.Vector Object : [2.227..., 4.454..., 0.445...]\" to the console.\n print(v1.toString());\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe(\"A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow never crosses the circle's edge.\");\n}\nfunction draw() {\n background(240);\n\n // Vector to the center.\n let v0 = createVector(50, 50);\n\n // Vector from the center to the mouse.\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n // Circle's radius.\n let r = 25;\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v1.limit(r), 'blue');\n\n // Draw the circle.\n noFill();\n circle(50, 50, r * 2);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "max",
"description": "maximum magnitude for the vector.",
"type": "Number"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "setMag",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 1850,
"itemtype": "method",
"description": "Sets a vector's magnitude to a given value.
\nThe static version of setMag(), as in p5.Vector.setMag(v, 10), returns\na new p5.Vector object and doesn't change the\noriginal.
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 0);\n\n // Prints \"5\" to the console.\n print(v.mag());\n\n // Set its magnitude to 10.\n v.setMag(10);\n\n // Prints \"p5.Vector Object : [6, 8, 0]\" to the console.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 4, 0);\n\n // Create a copy with a magnitude of 10.\n let v1 = p5.Vector.setMag(v0, 10);\n\n // Prints \"5\" to the console.\n print(v0.mag());\n\n // Prints \"p5.Vector Object : [6, 8, 0]\" to the console.\n print(v1.toString());\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the top left corner of a square toward its center. The red arrow reaches the center and the blue arrow only extends part of the way.');\n}\n\nfunction draw() {\n background(240);\n\n let origin = createVector(0, 0);\n let v = createVector(50, 50);\n\n // Draw the red arrow.\n drawArrow(origin, v, 'red');\n\n // Set v's magnitude to 30.\n v.setMag(30);\n\n // Draw the blue arrow.\n drawArrow(origin, v, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "len",
"description": "new length for this vector.",
"type": "Number"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "heading",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 1947,
"itemtype": "method",
"description": "Calculates the angle a 2D vector makes with the positive x-axis.
\nBy convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.
\nIf the vector was created with\ncreateVector(), heading() returns angles\nin the units of the current angleMode().
\nThe static version of heading(), as in p5.Vector.heading(v), works the\nsame way.
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1);\n\n // Prints \"0.785...\" to the console.\n print(v.heading());\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Prints \"45\" to the console.\n print(v.heading());\n}",
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1);\n\n // Prints \"0.785...\" to the console.\n print(p5.Vector.heading(v));\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Prints \"45\" to the console.\n print(p5.Vector.heading(v));\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('A black arrow extends from the top left of a square to its center. The text \"Radians: 0.79\" and \"Degrees: 45\" is written near the tip of the arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n let v = createVector(50, 50);\n\n // Draw the black arrow.\n drawArrow(origin, v, 'black');\n\n // Use radians.\n angleMode(RADIANS);\n\n // Display the heading in radians.\n let h = round(v.heading(), 2);\n text(`Radians: ${h}`, 20, 70);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Display the heading in degrees.\n h = v.heading();\n text(`Degrees: ${h}`, 20, 85);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "angle of rotation.",
"type": "Number"
}
}
],
"return": {
"description": "angle of rotation.",
"type": "Number"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "setHeading",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2039,
"itemtype": "method",
"description": "Rotates a 2D vector to a specific angle without changing its magnitude.
\nBy convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.
\nIf the vector was created with\ncreateVector(), setHeading() uses\nthe units of the current angleMode().
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(v.heading());\n\n // Point to the left.\n v.setHeading(PI);\n\n // Prints \"3.141...\" to the console.\n print(v.heading());\n}",
"// META:norender\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(v.heading());\n\n // Point to the left.\n v.setHeading(180);\n\n // Prints \"180\" to the console.\n print(v.heading());\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the center of a gray square. The red arrow points to the right and the blue arrow points down.');\n}\n\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Point down.\n v1.setHeading(HALF_PI);\n\n // Draw the blue arrow.\n drawArrow(v0, v1, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "angle",
"description": "angle of rotation.",
"type": "Number"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "rotate",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2171,
"itemtype": "method",
"description": "Rotates a 2D vector by an angle without changing its magnitude.
\nBy convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.
\nIf the vector was created with\ncreateVector(), rotate() uses\nthe units of the current angleMode().
\nThe static version of rotate(), as in p5.Vector.rotate(v, PI),\nreturns a new p5.Vector object and doesn't change\nthe original.
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n\n // Rotate a quarter turn.\n v.rotate(HALF_PI);\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v = createVector(1, 0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n\n // Rotate a quarter turn.\n v.rotate(90);\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(1, 0);\n\n // Create a rotated copy.\n let v1 = p5.Vector.rotate(v0, HALF_PI);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v0.toString());\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v1.toString());\n}",
"// META:norender\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v0 = createVector(1, 0);\n\n // Create a rotated copy.\n let v1 = p5.Vector.rotate(v0, 90);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v0.toString());\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v1.toString());\n}",
"let v0;\nlet v1;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n v0 = createVector(50, 50);\n v1 = createVector(30, 0);\n\n describe('A black arrow extends from the center of a gray square. The arrow rotates clockwise.');\n}\n\nfunction draw() {\n background(240);\n\n // Rotate v1.\n v1.rotate(0.01);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "angle",
"description": "angle of rotation.",
"type": "Number"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "angleBetween",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2304,
"itemtype": "method",
"description": "Calculates the angle between two vectors.
\nThe angles returned are signed, which means that\nv1.angleBetween(v2) === -v2.angleBetween(v1).
\nIf the vector was created with\ncreateVector(), angleBetween() returns\nangles in the units of the current\nangleMode().
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(v0.angleBetween(v1));\n\n // Prints \"-1.570...\" to the console.\n print(v1.angleBetween(v0));\n}",
"// META:norender\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(v0.angleBetween(v1));\n\n // Prints \"-90\" to the console.\n print(v1.angleBetween(v0));\n}",
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(p5.Vector.angleBetween(v0, v1));\n\n // Prints \"-1.570...\" to the console.\n print(p5.Vector.angleBetween(v1, v0));\n}",
"// META:norender\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(p5.Vector.angleBetween(v0, v1));\n\n // Prints \"-90\" to the console.\n print(p5.Vector.angleBetween(v1, v0));\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the center of a gray square. A red arrow points to the right and a blue arrow points down. The text \"Radians: 1.57\" and \"Degrees: 90\" is written above the arrows.');\n}\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n let v2 = createVector(0, 30);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Use radians.\n angleMode(RADIANS);\n\n // Display the angle in radians.\n let angle = round(v1.angleBetween(v2), 2);\n text(`Radians: ${angle}`, 20, 20);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Display the angle in degrees.\n angle = round(v1.angleBetween(v2), 2);\n text(`Degrees: ${angle}`, 20, 35);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "value",
"description": "x, y, and z components of a p5.Vector.",
"type": "p5.Vector"
}
],
"return": {
"description": "angle between the vectors.",
"type": "Number"
}
}
],
"return": {
"description": "angle between the vectors.",
"type": "Number"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "lerp",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2428,
"itemtype": "method",
"description": "Calculates new x, y, and z components that are proportionally the\nsame distance between two vectors.
\nThe amt parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps all components equal to the old vector's, 0.5 is\nhalfway between, and 1.0 sets all components equal to the new vector's.
\nThe static version of lerp(), as in p5.Vector.lerp(v0, v1, 0.5),\nreturns a new p5.Vector object and doesn't change\nthe original.
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(1, 1, 1);\n let v1 = createVector(3, 3, 3);\n\n // Interpolate.\n v0.lerp(v1, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v0.toString());\n}",
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1, 1);\n\n // Interpolate.\n v.lerp(3, 3, 3, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 1, 1);\n let v1 = createVector(3, 3, 3);\n\n // Interpolate.\n let v2 = p5.Vector.lerp(v0, v1, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v2.toString());\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points down, and a purple arrow points to the bottom right.');\n}\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n let v2 = createVector(0, 30);\n\n // Interpolate.\n let v3 = p5.Vector.lerp(v1, v2, 0.5);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Draw the purple arrow.\n drawArrow(v0, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x component.",
"type": "Number"
},
{
"name": "y",
"description": "y component.",
"type": "Number"
},
{
"name": "z",
"description": "z component.",
"type": "Number"
},
{
"name": "amt",
"description": "amount of interpolation between 0.0 (old vector)\nand 1.0 (new vector). 0.5 is halfway between.",
"type": "Number"
}
],
"chainable": 1
},
{
"params": [
{
"name": "v",
"description": "p5.Vector to lerp toward.",
"type": "p5.Vector"
},
{
"name": "amt",
"description": "",
"type": "Number"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "slerp",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2565,
"itemtype": "method",
"description": "Calculates a new heading and magnitude that are between two vectors.
\nThe amt parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps the heading and magnitude equal to the old\nvector's, 0.5 sets them halfway between, and 1.0 sets the heading and\nmagnitude equal to the new vector's.
\nslerp() differs from lerp() because\nit interpolates magnitude. Calling v0.slerp(v1, 0.5) sets v0's\nmagnitude to a value halfway between its original magnitude and v1's.\nCalling v0.lerp(v1, 0.5) makes no such guarantee.
\nThe static version of slerp(), as in p5.Vector.slerp(v0, v1, 0.5),\nreturns a new p5.Vector object and doesn't change\nthe original.
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 0);\n\n // Prints \"3\" to the console.\n print(v0.mag());\n\n // Prints \"0\" to the console.\n print(v0.heading());\n\n // Create a p5.Vector object.\n let v1 = createVector(0, 1);\n\n // Prints \"1\" to the console.\n print(v1.mag());\n\n // Prints \"1.570...\" to the console.\n print(v1.heading());\n\n // Interpolate halfway between v0 and v1.\n v0.slerp(v1, 0.5);\n\n // Prints \"2\" to the console.\n print(v0.mag());\n\n // Prints \"0.785...\" to the console.\n print(v0.heading());\n}",
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 0);\n\n // Prints \"3\" to the console.\n print(v0.mag());\n\n // Prints \"0\" to the console.\n print(v0.heading());\n\n // Create a p5.Vector object.\n let v1 = createVector(0, 1);\n\n // Prints \"1\" to the console.\n print(v1.mag());\n\n // Prints \"1.570...\" to the console.\n print(v1.heading());\n\n // Create a p5.Vector that's halfway between v0 and v1.\n let v3 = p5.Vector.slerp(v0, v1, 0.5);\n\n // Prints \"2\" to the console.\n print(v3.mag());\n\n // Prints \"0.785...\" to the console.\n print(v3.heading());\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points to the left, and a purple arrow points down.');\n}\n\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(20, 0);\n let v2 = createVector(-40, 0);\n\n // Create a p5.Vector that's halfway between v1 and v2.\n let v3 = p5.Vector.slerp(v1, v2, 0.5);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Draw the purple arrow.\n drawArrow(v0, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "v",
"description": "p5.Vector to slerp toward.",
"type": "p5.Vector"
},
{
"name": "amt",
"description": "amount of interpolation between 0.0 (old vector)\nand 1.0 (new vector). 0.5 is halfway between.",
"type": "Number"
}
],
"return": {
"description": "",
"type": "p5.Vector"
}
}
],
"return": {
"description": "",
"type": "p5.Vector"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "reflect",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2731,
"itemtype": "method",
"description": "Reflects a vector about a line in 2D or a plane in 3D.
\nThe orientation of the line or plane is described by a normal vector that\npoints away from the shape.
\nThe static version of reflect(), as in p5.Vector.reflect(v, n),\nreturns a new p5.Vector object and doesn't change\nthe original.
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create a normal vector.\n let n = createVector(0, 1);\n // Create a vector to reflect.\n let v = createVector(4, 6);\n\n // Reflect v about n.\n v.reflect(n);\n\n // Prints \"p5.Vector Object : [4, -6, 0]\" to the console.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Create a normal vector.\n let n = createVector(0, 1);\n\n // Create a vector to reflect.\n let v0 = createVector(4, 6);\n\n // Create a reflected vector.\n let v1 = p5.Vector.reflect(v0, n);\n\n // Prints \"p5.Vector Object : [4, -6, 0]\" to the console.\n print(v1.toString());\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('Three arrows extend from the center of a gray square with a vertical line down its middle. A black arrow points to the right, a blue arrow points to the bottom left, and a red arrow points to the bottom right.');\n}\nfunction draw() {\n background(200);\n\n // Draw a vertical line.\n line(50, 0, 50, 100);\n\n // Create a normal vector.\n let n = createVector(1, 0);\n\n // Center.\n let v0 = createVector(50, 50);\n\n // Create a vector to reflect.\n let v1 = createVector(30, 40);\n\n // Create a reflected vector.\n let v2 = p5.Vector.reflect(v1, n);\n\n // Scale the normal vector for drawing.\n n.setMag(30);\n\n // Draw the black arrow.\n drawArrow(v0, n, 'black');\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "surfaceNormal",
"description": "p5.Vector\nto reflect about.",
"type": "p5.Vector"
}
],
"chainable": 1
}
],
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "array",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2750,
"itemtype": "method",
"description": "Returns the vector's components as an array of numbers.",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(20, 30);\n\n // Prints \"[20, 30, 0]\" to the console.\n print(v.array());\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "array with the vector's components.",
"type": "Number[]"
}
}
],
"return": {
"description": "array with the vector's components.",
"type": "Number[]"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "equals",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2823,
"itemtype": "method",
"description": "Checks whether all the vector's components are equal to another vector's.
\nequals() returns true if the vector's components are all the same as another\nvector's and false if not.
\nThe version of equals() with one parameter interprets it as another\np5.Vector object.
\nThe version of equals() with multiple parameters interprets them as the\ncomponents of another vector. Any missing parameters are assigned the value\n0.
\nThe static version of equals(), as in p5.Vector.equals(v0, v1),\ninterprets both parameters as p5.Vector objects.
\n",
"example": [
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(10, 20, 30);\n let v1 = createVector(10, 20, 30);\n let v2 = createVector(0, 0, 0);\n\n // Prints \"true\" to the console.\n print(v0.equals(v1));\n\n // Prints \"false\" to the console.\n print(v0.equals(v2));\n}",
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(5, 10, 20);\n let v1 = createVector(5, 10, 20);\n let v2 = createVector(13, 10, 19);\n\n // Prints \"true\" to the console.\n print(v0.equals(v1.x, v1.y, v1.z));\n\n // Prints \"false\" to the console.\n print(v0.equals(v2.x, v2.y, v2.z));\n}",
"// META:norender\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(10, 20, 30);\n let v1 = createVector(10, 20, 30);\n let v2 = createVector(0, 0, 0);\n\n // Prints \"true\" to the console.\n print(p5.Vector.equals(v0, v1));\n\n // Prints \"false\" to the console.\n print(p5.Vector.equals(v0, v2));\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x component of the vector.",
"optional": 1,
"type": "Number"
},
{
"name": "y",
"description": "y component of the vector.",
"optional": 1,
"type": "Number"
},
{
"name": "z",
"description": "z component of the vector.",
"optional": 1,
"type": "Number"
}
],
"return": {
"description": "whether the vectors are equal.",
"type": "Boolean"
}
},
{
"params": [
{
"name": "value",
"description": "vector to compare.",
"type": "p5.Vector|Array"
}
],
"return": {
"description": "",
"type": "Boolean"
}
}
],
"return": {
"description": "whether the vectors are equal.",
"type": "Boolean"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "clampToZero",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2853,
"itemtype": "method",
"description": "Replaces the components of a p5.Vector that are very close to zero with zero.
\nIn computers, handling numbers with decimals can give slightly imprecise answers due to the way those numbers are represented.\nThis can make it hard to check if a number is zero, as it may be close but not exactly zero.\nThis method rounds very close numbers to zero to make those checks easier
\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON
\n",
"example": [],
"overloads": [
{
"params": [],
"return": {
"description": "with components very close to zero replaced with zero.",
"type": "p5.Vector"
},
"chainable": 1
}
],
"return": {
"description": "with components very close to zero replaced with zero.",
"type": "p5.Vector"
},
"class": "p5.Vector",
"static": false,
"module": "Math"
},
{
"name": "fromAngle",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2932,
"itemtype": "method",
"description": "Creates a new 2D vector from an angle.",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngle(0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n}",
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngle(0, 30);\n\n // Prints \"p5.Vector Object : [30, 0, 0]\" to the console.\n print(v.toString());\n}",
"function setup() {\n createCanvas(100, 100);\n\n describe('A black arrow extends from the center of a gray square. It points to the right.');\n}\nfunction draw() {\n background(200);\n\n // Create a p5.Vector to the center.\n let v0 = createVector(50, 50);\n\n // Create a p5.Vector with an angle 0 and magnitude 30.\n let v1 = p5.Vector.fromAngle(0, 30);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [
{
"name": "angle",
"description": "desired angle, in radians. Unaffected by angleMode().",
"type": "Number"
},
{
"name": "length",
"description": "length of the new vector (defaults to 1).",
"optional": 1,
"type": "Number"
}
],
"return": {
"description": "new p5.Vector object.",
"type": "p5.Vector"
}
}
],
"return": {
"description": "new p5.Vector object.",
"type": "p5.Vector"
},
"class": "p5.Vector",
"static": 1,
"module": "Math"
},
{
"name": "fromAngles",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 2988,
"itemtype": "method",
"description": "Creates a new 3D vector from a pair of ISO spherical angles.",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngles(0, 0);\n\n // Prints \"p5.Vector Object : [0, -1, 0]\" to the console.\n print(v.toString());\n}",
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A light shines on a pink sphere as it orbits.');\n}\n\nfunction draw() {\n background(0);\n\n // Calculate the ISO angles.\n let theta = frameCount * 0.05;\n let phi = 0;\n\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngles(theta, phi, 100);\n\n // Create a point light using the p5.Vector.\n let c = color('deeppink');\n pointLight(c, v);\n\n // Style the sphere.\n fill(255);\n noStroke();\n\n // Draw the sphere.\n sphere(35);\n}"
],
"overloads": [
{
"params": [
{
"name": "theta",
"description": "polar angle in radians (zero is up).",
"type": "Number"
},
{
"name": "phi",
"description": "azimuthal angle in radians\n(zero is out of the screen).",
"type": "Number"
},
{
"name": "length",
"description": "length of the new vector (defaults to 1).",
"optional": 1,
"type": "Number"
}
],
"return": {
"description": "new p5.Vector object.",
"type": "p5.Vector"
}
}
],
"return": {
"description": "new p5.Vector object.",
"type": "p5.Vector"
},
"class": "p5.Vector",
"static": 1,
"module": "Math"
},
{
"name": "random2D",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 3061,
"itemtype": "method",
"description": "Creates a new 2D unit vector with a random heading.",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.random2D();\n\n // Prints \"p5.Vector Object : [x, y]\" to the console\n // where x and y are small random numbers.\n print(v.toString());\n}",
"function setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('A black arrow in extends from the center of a gray square. It changes direction once per second.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a p5.Vector to the center.\n let v0 = createVector(50, 50);\n\n // Create a random p5.Vector.\n let v1 = p5.Vector.random2D();\n\n // Scale v1 for drawing.\n v1.mult(30);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "new p5.Vector object.",
"type": "p5.Vector"
}
}
],
"return": {
"description": "new p5.Vector object.",
"type": "p5.Vector"
},
"class": "p5.Vector",
"static": 1,
"module": "Math"
},
{
"name": "random3D",
"file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
"line": 3081,
"itemtype": "method",
"description": "Creates a new 3D unit vector with a random heading.",
"example": [
"// META:norender\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.random3D();\n\n // Prints \"p5.Vector Object : [x, y, z]\" to the console\n // where x, y, and z are small random numbers.\n print(v.toString());\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "new p5.Vector object.",
"type": "p5.Vector"
}
}
],
"return": {
"description": "new p5.Vector object.",
"type": "p5.Vector"
},
"class": "p5.Vector",
"static": 1,
"module": "Math"
},
{
"name": "textToPaths",
"file": "src/scripts/parsers/in/p5.js/src/type/p5.Font.js",
"line": 193,
"itemtype": "method",
"description": "Returns a flat array of path commands that describe the outlines of a string of text.
\nEach command is represented as an array of the form [type, ...coords], where:
\ntype is one of 'M', 'L', 'Q', 'C', or 'Z',coords are the numeric values needed for that command.
'M' indicates a \"move to\" (starting a new contour),\n'L' a line segment,\n'Q' a quadratic bezier,\n'C' a cubic bezier, and\n'Z' closes the current path.
\nThe first two parameters, x and y, specify the baseline origin for the text.\nOptionally, you can provide a width and height for text wrapping; if you don't need\nwrapping, you can omit them and directly pass options as the fourth parameter.
\n",
"example": [
"let font;\n\nasync function setup() {\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(200, 200);\n background(220);\n noLoop();\n}\n\nfunction draw() {\n background(220);\n stroke(0);\n noFill();\n textSize(60);\n\n // Get path commands for \"Hello\" (drawn at baseline x=50, y=100):\n const pathCommands = font.textToPaths('Hello', 30, 110);\n\n beginShape();\n for (let i = 0; i < pathCommands.length; i++) {\n const cmd = pathCommands[i];\n const type = cmd[0];\n\n switch (type) {\n case 'M': {\n // Move to (start a new contour)\n const x = cmd[1];\n const y = cmd[2];\n endContour(); // In case we were already drawing\n beginContour();\n vertex(x, y);\n break;\n }\n case 'L': {\n // Line to\n const x = cmd[1];\n const y = cmd[2];\n vertex(x, y);\n break;\n }\n case 'Q': {\n // Quadratic bezier\n const cx = cmd[1];\n const cy = cmd[2];\n const x = cmd[3];\n const y = cmd[4];\n bezierOrder(2);\n bezierVertex(cx, cy);\n bezierVertex(x, y);\n break;\n }\n case 'C': {\n // Cubic bezier\n const cx1 = cmd[1];\n const cy1 = cmd[2];\n const cx2 = cmd[3];\n const cy2 = cmd[4];\n const x = cmd[5];\n const y = cmd[6];\n bezierOrder(3);\n bezierVertex(cx1, cy1);\n bezierVertex(cx2, cy2);\n bezierVertex(x, y);\n break;\n }\n case 'Z': {\n // Close path\n endContour(CLOSE);\n beginContour();\n break;\n }\n }\n }\n endContour();\n endShape();\n}"
],
"overloads": [
{
"params": [
{
"name": "str",
"description": "The text to convert into path commands.",
"type": "String"
},
{
"name": "x",
"description": "x‐coordinate of the text baseline.",
"type": "Number"
},
{
"name": "y",
"description": "y‐coordinate of the text baseline.",
"type": "Number"
},
{
"name": "width",
"description": "Optional width for text wrapping.",
"optional": 1,
"type": "Number"
},
{
"name": "height",
"description": "Optional height for text wrapping.",
"optional": 1,
"type": "Number"
}
],
"return": {
"description": "A flat array of path commands.",
"type": "Array[]"
}
}
],
"return": {
"description": "A flat array of path commands.",
"type": "Array[]"
},
"class": "p5.Font",
"static": false,
"module": "Typography"
},
{
"name": "textToPoints",
"file": "src/scripts/parsers/in/p5.js/src/type/p5.Font.js",
"line": 265,
"itemtype": "method",
"description": "Returns an array of points outlining a string of text written using the\nfont.
\nEach point object in the array has three properties that describe the\npoint's location and orientation, called its path angle. For example,\n{ x: 10, y: 20, alpha: 450 }.
\nThe first parameter, str, is a string of text. The second and third\nparameters, x and y, are the text's position. By default, they set the\ncoordinates of the bounding box's bottom-left corner. See\ntextAlign() for more ways to align text.
\nThe fourth parameter, options, is also optional. font.textToPoints()\nexpects an object with the following properties:
\nsampleFactor is the ratio of the text's path length to the number of\nsamples. It defaults to 0.1. Higher values produce more points along the\npath and are more precise.
\nsimplifyThreshold removes collinear points if it's set to a number other\nthan 0. The value represents the threshold angle in radians to use when determining\nwhether two edges are collinear.
\n",
"example": [
"let font;\n\nasync function setup() {\n createCanvas(100, 100);\n font = await loadFont('assets/inconsolata.otf');\n\n background(200);\n textSize(35);\n\n // Get the point array.\n let points = font.textToPoints('p5*js', 6, 60, { sampleFactor: 0.5 });\n\n // Draw a dot at each point.\n for (let p of points) {\n point(p.x, p.y);\n }\n\n describe('A set of black dots outlining the text \"p5*js\" on a gray background.');\n}"
],
"overloads": [
{
"params": [
{
"name": "str",
"description": "string of text.",
"type": "String"
},
{
"name": "x",
"description": "x-coordinate of the text.",
"type": "Number"
},
{
"name": "y",
"description": "y-coordinate of the text.",
"type": "Number"
},
{
"name": "options",
"description": "Configuration:",
"optional": 1,
"type": "Object"
}
],
"return": {
"description": "array of point objects, each with x, y, and alpha (path angle) properties.",
"type": "Object[]"
}
}
],
"return": {
"description": "array of point objects, each with x, y, and alpha (path angle) properties.",
"type": "Object[]"
},
"class": "p5.Font",
"static": false,
"module": "Typography"
},
{
"name": "textToContours",
"file": "src/scripts/parsers/in/p5.js/src/type/p5.Font.js",
"line": 341,
"itemtype": "method",
"description": "Returns an array of arrays of points outlining a string of text written using the\nfont. Each array represents a contour, so the letter O will have two outer arrays:\none for the outer edge of the shape, and one for the inner edge of the hole.
\nEach point object in a contour array has three properties that describe the\npoint's location and orientation, called its path angle. For example,\n{ x: 10, y: 20, alpha: 450 }.
\nThe first parameter, str, is a string of text. The second and third\nparameters, x and y, are the text's position. By default, they set the\ncoordinates of the bounding box's bottom-left corner. See\ntextAlign() for more ways to align text.
\nThe fourth parameter, options, is also optional. font.textToPoints()\nexpects an object with the following properties:
\nsampleFactor is the ratio of the text's path length to the number of\nsamples. It defaults to 0.1. Higher values produce more points along the\npath and are more precise.
\nsimplifyThreshold removes collinear points if it's set to a number other\nthan 0. The value represents the threshold angle in radians to use when determining\nwhether two edges are collinear.
\n",
"example": [
"let font;\n\nasync function setup() {\n createCanvas(100, 100);\n font = await loadFont('/assets/inconsolata.otf');\n}\n\nfunction draw() {\n background(200);\n textAlign(CENTER, CENTER);\n textSize(30);\n\n // Get the point array.\n let contours = font.textToContours('p5*js', width/2, height/2, { sampleFactor: 0.5 });\n\n beginShape();\n for (const pts of contours) {\n beginContour();\n for (const pt of pts) {\n vertex(pt.x + 5*sin(pt.y*0.1 + millis()*0.01), pt.y);\n }\n endContour(CLOSE);\n }\n endShape();\n\n describe('The text p5*js wobbling over time');\n}"
],
"overloads": [
{
"params": [
{
"name": "str",
"description": "string of text.",
"type": "String"
},
{
"name": "x",
"description": "x-coordinate of the text.",
"type": "Number"
},
{
"name": "y",
"description": "y-coordinate of the text.",
"type": "Number"
},
{
"name": "options",
"description": "Configuration options:",
"optional": 1,
"type": "Object"
}
],
"return": {
"description": "array of point objects, each with x, y, and alpha (path angle) properties.",
"type": "Object[][]"
}
}
],
"return": {
"description": "array of point objects, each with x, y, and alpha (path angle) properties.",
"type": "Object[][]"
},
"class": "p5.Font",
"static": false,
"module": "Typography"
},
{
"name": "textToModel",
"file": "src/scripts/parsers/in/p5.js/src/type/p5.Font.js",
"line": 518,
"itemtype": "method",
"description": "Converts text into a 3D model that can be rendered in WebGL mode.
\nThis method transforms flat text into extruded 3D geometry, allowing\nfor dynamic effects like depth, warping, and custom shading.
\nIt works by taking the outlines (contours) of each character in the\nprovided text string and constructing a 3D shape from them.
\nOnce your 3D text is ready, you can rotate it in 3D space using orbitControl()\n— just click and drag with your mouse to see it from all angles!
\nUse the extrude slider to give your letters depth: slide it up, and your\nflat text turns into a solid, multi-dimensional object.
\nYou can also choose from various fonts such as \"Anton\", \"Montserrat\", or \"Source Serif\",\nmuch like selecting fancy fonts in a word processor,
\nThe generated model (a Geometry object) can be manipulated further—rotated, scaled,\nor styled with shaders—to create engaging, interactive visual art.
\n",
"example": [
"let font;\nlet geom;\n\nasync function setup() {\n createCanvas(200, 200, WEBGL);\n font = await loadFont('https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf');\n\n geom = font.textToModel(\"Hello\", 50, 0, { sampleFactor: 2 });\n geom.clearColors();\n geom.normalize();\n}\n\nfunction draw() {\n background(255);\n orbitControl();\n fill(\"red\");\n strokeWeight(4);\n scale(min(width, height) / 300);\n model(geom);\n describe('A red non-extruded \"Hello\" in Anton on white canvas, rotatable via mouse.');\n}",
"let font;\nlet geom;\n\nasync function setup() {\n createCanvas(200, 200, WEBGL);\n\n // Alternative fonts:\n // Anton: 'https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf'\n // Montserrat: 'https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-Y3tcoqK5.ttf'\n // Source Serif: 'https://fonts.gstatic.com/s/sourceserif4/v8/vEFy2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6OAVIJmeUDygwjihdqrhxXD-wGvjU.ttf'\n\n // Using Source Serif for this example:\n font = await loadFont('https://fonts.gstatic.com/s/sourceserif4/v8/vEFy2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6OAVIJmeUDygwjihdqrhxXD-wGvjU.ttf');\n\n geom = font.textToModel(\"Hello\", 50, 0, { sampleFactor: 2, extrude: 5 });\n geom.clearColors();\n geom.normalize();\n}\n\nfunction draw() {\n background(255);\n orbitControl();\n fill(\"red\");\n strokeWeight(4);\n scale(min(width, height) / 300);\n model(geom);\n describe('3D red extruded \"Hello\" in Source Serif on white, rotatable via mouse.');\n}",
"let geom;\nlet activeFont;\nlet artShader;\nlet lineShader;\n\n// Define parameters as simple variables\nlet words = 'HELLO';\nlet warp = 1;\nlet extrude = 5;\nlet palette = [\"#ffe03d\", \"#fe4830\", \"#d33033\", \"#6d358a\", \"#1c509e\", \"#00953c\"];\n\nasync function setup() {\n createCanvas(200, 200, WEBGL);\n\n // Using Anton as the default font for this example:\n\n // Alternative fonts:\n // Anton: 'https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf'\n // Montserrat: 'https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-Y3tcoqK5.ttf'\n // Source Serif: 'https://fonts.gstatic.com/s/sourceserif4/v8/vEFy2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6OAVIJmeUDygwjihdqrhxXD-wGvjU.ttf'\n activeFont = await loadFont('https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf');\n\n geom = activeFont.textToModel(words, 0, 50, { sampleFactor: 2, extrude });\n geom.clearColors();\n geom.normalize();\n\n artShader = baseMaterialShader().modify({\n uniforms: {\n 'float time': () => millis(),\n 'float warp': () => warp,\n 'float numColors': () => palette.length,\n 'vec3[6] colors': () => palette.flatMap((c) => [red(c)/255, green(c)/255, blue(c)/255]),\n },\n vertexDeclarations: 'out vec3 vPos;',\n fragmentDeclarations: 'in vec3 vPos;',\n 'Vertex getObjectInputs': `(Vertex inputs) {\n vPos = inputs.position;\n inputs.position.x += 5. * warp * sin(inputs.position.y * 0.1 + time * 0.001) / (1. + warp);\n inputs.position.y += 5. * warp * sin(inputs.position.x * 0.1 + time * 0.0009) / (1. + warp);\n return inputs;\n }`,\n 'vec4 getFinalColor': `(vec4 _c) {\n float x = vPos.x * 0.005;\n float a = floor(fract(x) * numColors);\n float b = a == numColors - 1. ? 0. : a + 1.;\n float t = fract(x * numColors);\n vec3 c = mix(colors[int(a)], colors[int(b)], t);\n return vec4(c, 1.);\n }`\n });\n\n lineShader = baseStrokeShader().modify({\n uniforms: {\n 'float time': () => millis(),\n 'float warp': () => warp,\n },\n 'StrokeVertex getObjectInputs': `(StrokeVertex inputs) {\n inputs.position.x += 5. * warp * sin(inputs.position.y * 0.1 + time * 0.001) / (1. + warp);\n inputs.position.y += 5. * warp * sin(inputs.position.x * 0.1 + time * 0.0009) / (1. + warp);\n return inputs;\n }`,\n });\n}\n\nfunction draw() {\n background(255);\n orbitControl();\n shader(artShader);\n strokeShader(lineShader);\n strokeWeight(4);\n scale(min(width, height) / 210);\n model(geom);\n describe('3D wavy with different color sets \"Hello\" in Anton on white canvas, rotatable via mouse.');\n}"
],
"overloads": [
{
"params": [
{
"name": "str",
"description": "The text string to convert into a 3D model.",
"type": "String"
},
{
"name": "x",
"description": "The x-coordinate for the starting position of the text.",
"type": "Number"
},
{
"name": "y",
"description": "The y-coordinate for the starting position of the text.",
"type": "Number"
},
{
"name": "width",
"description": "Maximum width of the text block (wraps text if exceeded).",
"type": "Number"
},
{
"name": "height",
"description": "Maximum height of the text block.",
"type": "Number"
},
{
"name": "options",
"description": "Configuration options for the 3D text:",
"optional": 1,
"type": "Object"
}
],
"return": {
"description": "A geometry object representing the 3D model of the text.",
"type": "p5.Geometry"
}
}
],
"return": {
"description": "A geometry object representing the 3D model of the text.",
"type": "p5.Geometry"
},
"class": "p5.Font",
"static": false,
"module": "Typography"
},
{
"name": "version",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
"line": 73,
"itemtype": "method",
"description": "Shaders are written in GLSL, but\nthere are different versions of GLSL that it might be written in.
\nCalling this method on a p5.Shader will return the GLSL version it uses, either 100 es or 300 es.\nWebGL 1 shaders will only use 100 es, and WebGL 2 shaders may use either.
\n",
"example": [],
"overloads": [
{
"params": [],
"return": {
"description": "The GLSL version used by the shader.",
"type": "String"
}
}
],
"return": {
"description": "The GLSL version used by the shader.",
"type": "String"
},
"class": "p5.Shader",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "inspectHooks",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
"line": 145,
"itemtype": "method",
"description": "Logs the hooks available in this shader, and their current implementation.
\nEach shader may let you override bits of its behavior. Each bit is called\na hook. A hook is either for the vertex shader, if it affects the\nposition of vertices, or in the fragment shader, if it affects the pixel\ncolor. This method logs those values to the console, letting you know what\nyou are able to use in a call to\nmodify().
\nFor example, this shader will produce the following output:
\nmyShader = baseMaterialShader().modify({\n declarations: 'uniform float time;',\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n});\nmyShader.inspectHooks();
==== Vertex shader hooks: ====\nvoid beforeVertex() {}\nvec3 getLocalPosition(vec3 position) { return position; }\n[MODIFIED] vec3 getWorldPosition(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }\nvec3 getLocalNormal(vec3 normal) { return normal; }\nvec3 getWorldNormal(vec3 normal) { return normal; }\nvec2 getUV(vec2 uv) { return uv; }\nvec4 getVertexColor(vec4 color) { return color; }\nvoid afterVertex() {}\n\n==== Fragment shader hooks: ====\nvoid beforeFragment() {}\nInputs getPixelInputs(Inputs inputs) { return inputs; }\nvec4 combineColors(ColorComponents components) {\n vec4 color = vec4(0.);\n color.rgb += components.diffuse * components.baseColor;\n color.rgb += components.ambient * components.ambientColor;\n color.rgb += components.specular * components.specularColor;\n color.rgb += components.emissive;\n color.a = components.opacity;\n return color;\n }\nvec4 getFinalColor(vec4 color) { return color; }\nvoid afterFragment() {}
",
"example": [],
"overloads": [
{
"params": []
}
],
"class": "p5.Shader",
"static": false,
"module": "3D",
"submodule": "Material",
"beta": true
},
{
"name": "modify",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
"line": 368,
"itemtype": "method",
"description": "Returns a new shader, based on the original, but with custom snippets\nof shader code replacing default behaviour.
\nEach shader may let you override bits of its behavior. Each bit is called\na hook. For example, a hook can let you adjust positions of vertices, or\nthe color of a pixel. You can inspect the different hooks available by calling\nyourShader.inspectHooks(). You can\nalso read the reference for the default material, normal material, color, line, and point shaders to\nsee what hooks they have available.
\nmodify() can be passed a function as a parameter. Inside, you can override hooks\nby calling them as functions. Each hook will take in a callback that takes in inputs\nand is expected to return an output. For example, here is a function that changes the\nmaterial color to red:
\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify(() => {\n getPixelInputs((inputs) => {\n inputs.color = [inputs.texCoord, 0, 1];\n return inputs;\n });\n });\n}\n\nfunction draw() {\n background(255);\n noStroke();\n shader(myShader); // Apply the custom shader\n plane(width, height); // Draw a plane with the shader applied\n}
In addition to calling hooks, you can create uniforms, which are special variables\nused to pass data from p5.js into the shader. They can be created by calling uniform + the\ntype of the data, such as uniformFloat for a number or uniformVector2 for a two-component vector.\nThey take in a function that returns the data for the variable. You can then reference these\nvariables in your hooks, and their values will update every time you apply\nthe shader with the result of your function.
\nMove the mouse over this sketch to increase the moveCounter which will be passed to the shader as a uniform.
\nlet myShader;\n//count of frames in which mouse has been moved\nlet moveCounter = 0;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify(() => {\n // Get the move counter from our sketch\n let count = uniformFloat(() => moveCounter);\n\n getPixelInputs((inputs) => {\n inputs.color = [\n inputs.texCoord,\n sin(count/100) / 2 + 0.5,\n 1,\n ];\n return inputs;\n });\n });\n}\n\nfunction mouseDragged(){\n moveCounter += 1;\n}\n\nfunction draw() {\n background(255);\n noStroke(255);\n shader(myShader); // Apply the custom shader\n plane(width, height); // Draw a plane with the shader applied\n}
p5.strands functions are special, since they get turned into a shader instead of being\nrun like the rest of your code. They only have access to p5.js functions, and variables\nyou declare inside the modify callback. If you need access to local variables, you\ncan pass them into modify with an optional second parameter, variables. These will\nthen be passed into your function as an argument. If you are\nusing instance mode, you will need to pass your sketch object in this way.
\nIf you are also using a build system for your sketch, variable names may be changed as\npart of minification. When creating a uniform, you can pass the name of the uniform in\nas a first parameter to ensure it doesn't get changed.
\nnew p5((sketch) => {\n let myShader;\n\n sketch.setup = function() {\n sketch.createCanvas(200, 200, sketch.WEBGL);\n myShader = sketch.baseMaterialShader().modify(({ sketch }) => {\n let b = sketch.uniformFloat('b');\n sketch.getPixelInputs((inputs) => {\n inputs.color = [inputs.texCoord, b, 1];\n return inputs;\n });\n }, { sketch });\n }\n\n sketch.draw = function() {\n sketch.background(255);\n sketch.noStroke();\n myShader.setUniform('b', 0.5);\n sketch.shader(myShader); // Apply the custom shader\n sketch.plane(sketch.width, sketch.height); // Draw a plane with the shader applied\n }\n});
You can also write GLSL directly in modify if you need direct access. To do so,\nmodify() takes one parameter, hooks, an object with the hooks you want\nto override. Each key of the hooks object is the name\nof a hook, and the value is a string with the GLSL code for your hook.
\nIf you supply functions that aren't existing hooks, they will get added at the start of\nthe shader as helper functions so that you can use them in your hooks.
\nTo add new uniforms to your shader, you can pass in a uniforms object containing\nthe type and name of the uniform as the key, and a default value or function returning\na default value as its value. These will be automatically set when the shader is set\nwith shader(yourShader).
\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n uniforms: {\n 'float time': () => millis() // Uniform for time\n },\n 'Vertex getWorldInputs': `(Vertex inputs) {\n inputs.position.y +=\n 20. * sin(time * 0.001 + inputs.position.x * 0.05);\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader); // Apply the custom shader\n lights(); // Enable lighting\n noStroke(); // Disable stroke\n fill('red'); // Set fill color to red\n sphere(50); // Draw a sphere with the shader applied\n}
You can also add a declarations key, where the value is a GLSL string declaring\ncustom uniform variables, globals, and functions shared\nbetween hooks. To add declarations just in a vertex or fragment shader, add\nvertexDeclarations and fragmentDeclarations keys.
\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n // Manually specifying a uniform\n declarations: 'uniform float time;',\n 'Vertex getWorldInputs': `(Vertex inputs) {\n inputs.position.y +=\n 20. * sin(time * 0.001 + inputs.position.x * 0.05);\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n myShader.setUniform('time', millis());\n lights();\n noStroke();\n fill('red');\n sphere(50);\n}
",
"example": [],
"overloads": [
{
"params": [
{
"name": "callback",
"description": "A function with p5.strands code to modify the shader.",
"type": "Function"
},
{
"name": "variables",
"description": "An optional object with local variables p5.strands\nshould have access to.",
"optional": 1,
"type": "Object"
}
],
"return": {
"description": "",
"type": "p5.Shader"
}
},
{
"params": [
{
"name": "hooks",
"description": "The hooks in the shader to replace.",
"optional": 1,
"type": "Object"
}
],
"return": {
"description": "",
"type": "p5.Shader"
}
}
],
"return": {
"description": "",
"type": "p5.Shader"
},
"class": "p5.Shader",
"static": false,
"module": "3D",
"submodule": "Material",
"beta": true
},
{
"name": "copyToContext",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
"line": 641,
"itemtype": "method",
"description": "Copies the shader from one drawing context to another.
\nEach p5.Shader object must be compiled by calling\nshader() before it can run. Compilation happens\nin a drawing context which is usually the main canvas or an instance of\np5.Graphics. A shader can only be used in the\ncontext where it was compiled. The copyToContext() method compiles the\nshader again and copies it to another drawing context where it can be\nreused.
\nThe parameter, context, is the drawing context where the shader will be\nused. The shader can be copied to an instance of\np5.Graphics, as in\nmyShader.copyToContext(pg). The shader can also be copied from a\np5.Graphics object to the main canvas using\nthe p5.instance variable, as in myShader.copyToContext(p5.instance).
\nNote: A p5.Shader object created with\ncreateShader(),\ncreateFilterShader(), or\nloadShader()\ncan be used directly with a p5.Framebuffer\nobject created with\ncreateFramebuffer(). Both objects\nhave the same context as the main canvas.
\n",
"example": [
"// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\\\n}\n`;\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Shader object.\n let original = createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n shader(original);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50, WEBGL);\n\n // Copy the original shader to the p5.Graphics object.\n let copied = original.copyToContext(pg);\n\n // Apply the copied shader to the p5.Graphics object.\n pg.shader(copied);\n\n // Style the display surface.\n pg.noStroke();\n\n // Add a display surface for the shader.\n pg.plane(50, 50);\n\n describe('A square with purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the p5.Graphics object to the main canvas.\n image(pg, -25, -25);\n}",
"// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet copied;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n let pg = createGraphics(25, 25, WEBGL);\n\n // Create a p5.Shader object.\n let original = pg.createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n pg.shader(original);\n\n // Copy the original shader to the main canvas.\n copied = original.copyToContext(p5.instance);\n\n // Apply the copied shader to the main canvas.\n shader(copied);\n\n describe('A rotating cube with a purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the x-, y-, and z-axes.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n\n // Draw the box.\n box(50);\n}"
],
"overloads": [
{
"params": [
{
"name": "context",
"description": "WebGL context for the copied shader.",
"type": "p5|p5.Graphics"
}
],
"return": {
"description": "new shader compiled for the target context.",
"type": "p5.Shader"
}
}
],
"return": {
"description": "new shader compiled for the target context.",
"type": "p5.Shader"
},
"class": "p5.Shader",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "setUniform",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
"line": 1015,
"itemtype": "method",
"description": "Sets the shader’s uniform (global) variables.
\nShader programs run on the computer’s graphics processing unit (GPU).\nThey live in part of the computer’s memory that’s completely separate\nfrom the sketch that runs them. Uniforms are global variables within a\nshader program. They provide a way to pass values from a sketch running\non the CPU to a shader program running on the GPU.
\nThe first parameter, uniformName, is a string with the uniform’s name.\nFor the shader above, uniformName would be 'r'.
\nThe second parameter, data, is the value that should be used to set the\nuniform. For example, calling myShader.setUniform('r', 0.5) would set\nthe r uniform in the shader above to 0.5. data should match the\nuniform’s type. Numbers, strings, booleans, arrays, and many types of\nimages can all be passed to a shader with setUniform().
\n",
"example": [
"// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Set the r uniform to 0.5.\n myShader.setUniform('r', 0.5);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface for the shader.\n plane(100, 100);\n\n describe('A cyan square.');\n}",
"// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(myShader);\n\n describe('A square oscillates color between cyan and white.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the drawing surface.\n noStroke();\n\n // Update the r uniform.\n let nextR = 0.5 * (sin(frameCount * 0.01) + 1);\n myShader.setUniform('r', nextR);\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}",
"// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}"
],
"overloads": [
{
"params": [
{
"name": "uniformName",
"description": "name of the uniform. Must match the name\nused in the vertex and fragment shaders.",
"type": "String"
},
{
"name": "data",
"description": "value to assign to the uniform. Must match the uniform’s data type.",
"type": "Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture"
}
],
"chainable": 1
}
],
"class": "p5.Shader",
"static": false,
"module": "3D",
"submodule": "Material"
},
{
"name": "addRow",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 81,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Use addRow() to add a new row of data to a p5.Table object. By default,\nan empty row is created. Typically, you would store a reference to\nthe new row in a TableRow object (see newRow in the example above),\nand then set individual values using set().
\nIf a p5.TableRow object is included as a parameter, then that row is\nduplicated and added to the table.
\n",
"example": [
"// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nasync function setup() {\n // Create a 300x300 canvas\n createCanvas(300, 300);\n\n // Load the CSV file from the assets folder with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Add a new row for \"Wolf\"\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display the table data on the canvas\n // Each cell is positioned based on its row and column\n for (let r = 0; r < table.getRowCount(); r++) {\n for (let c = 0; c < table.getColumnCount(); c++) {\n let x = c * 50 + 10; // Horizontal spacing for each column\n let y = r * 30 + 20; // Vertical spacing for each row\n text(table.getString(r, c), x * c, y);\n }\n }\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "row",
"description": "row to be added to the table",
"optional": 1,
"type": "p5.TableRow"
}
],
"return": {
"description": "the row that was added",
"type": "p5.TableRow"
}
}
],
"return": {
"description": "the row that was added",
"type": "p5.TableRow"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "removeRow",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 133,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Removes a row from the table object.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Remove the first row from the table\n table.removeRow(0);\n\n // Set text properties for drawing on the canvas\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display the table values on the canvas:\n // Each row's cell values are joined into a single string and drawn on a new line.\n let y = 20; // Starting vertical position\n for (let r = 0; r < table.getRowCount(); r++) {\n let rowText = \"\";\n for (let c = 0; c < table.getColumnCount(); c++) {\n rowText += table.getString(r, c) + \" \";\n }\n text(rowText, 18, y * 3);\n y += 20;\n }\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "id",
"description": "ID number of the row to remove",
"type": "Integer"
}
]
}
],
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getRow",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 174,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Returns a reference to the specified p5.TableRow. The reference\ncan then be used to get and set values of the selected row.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Get the row at index 1 (second row)\n let row = table.getRow(1);\n\n // Set text properties for drawing on the canvas\n fill(0); // Set text color to black\n textSize(12); // Set the text size\n\n // Loop over each column in the row and display its value on the canvas\n for (let c = 0; c < table.getColumnCount(); c++) {\n text(row.getString(c), 10, 20 + c * 50 + 20);\n }\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "rowID",
"description": "ID number of the row to get",
"type": "Integer"
}
],
"return": {
"description": "p5.TableRow object",
"type": "p5.TableRow"
}
}
],
"return": {
"description": "p5.TableRow object",
"type": "p5.TableRow"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getRows",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 222,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Gets all rows from the table. Returns an array of p5.TableRows.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n let rows = table.getRows();\n\n // Warning: rows is an array of objects.\n // Set the 'name' of each row to 'Unicorn'\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display the modified table values on the canvas\n // We'll join each row's values with a space and display each row on a new line.\n let y = 20; // Starting y position\n for (let r = 0; r < table.getRowCount(); r++) {\n let rowText = \"\";\n for (let c = 0; c < table.getColumnCount(); c++) {\n rowText += table.getString(r, c) + \" \";\n }\n text(rowText, 10, y * 2);\n y += 20; // Move to next line\n }\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "Array of p5.TableRows",
"type": "p5.TableRow[]"
}
}
],
"return": {
"description": "Array of p5.TableRows",
"type": "p5.TableRow[]"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "findRow",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 264,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Finds the first row in the Table that contains the value\nprovided, and returns a reference to that row. Even if\nmultiple rows are possible matches, only the first matching\nrow is returned. The column to search may be specified by\neither its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 100x100 canvas\n createCanvas(100, 100);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Find the row with the animal named \"Zebra\"\n let row = table.findRow('Zebra', 'name');\n\n // Get the species from the found row\n let species = row.getString('species');\n\n // Set text properties and display the species on the canvas\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n text(species, 10, 30);\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "value",
"description": "The value to match",
"type": "String"
},
{
"name": "column",
"description": "ID number or title of the\ncolumn to search",
"type": "Integer|String"
}
],
"return": {
"description": "",
"type": "p5.TableRow"
}
}
],
"return": {
"description": "",
"type": "p5.TableRow"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "findRows",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 327,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Finds the rows in the Table that contain the value\nprovided, and returns references to those rows. Returns an\nArray, so for must be used to iterate through all the rows,\nas shown in the example above. The column to search may be\nspecified by either its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Add another goat entry\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Scape Goat');\n newRow.setString('name', 'Goat');\n\n // Find rows where the name is \"Goat\"\n let rows = table.findRows('Goat', 'name');\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display the result on the canvas\n text(rows.length + ' Goats found', 10, 30);\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "value",
"description": "The value to match",
"type": "String"
},
{
"name": "column",
"description": "ID number or title of the\ncolumn to search",
"type": "Integer|String"
}
],
"return": {
"description": "An Array of TableRow objects",
"type": "p5.TableRow[]"
}
}
],
"return": {
"description": "An Array of TableRow objects",
"type": "p5.TableRow[]"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "matchRow",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 384,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Finds the first row in the Table that matches the regular\nexpression provided, and returns a reference to that row.\nEven if multiple rows are possible matches, only the first\nmatching row is returned. The column to search may be\nspecified by either its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Search using the specified regex on column index 1 (species)\n let mammal = table.matchRow(new RegExp('ant'), 1);\n let species = mammal.getString(1); // \"Panthera pardus\"\n\n // Set text properties for drawing on the canvas\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display the species on the canvas\n text(species, 10, 30);\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "regexp",
"description": "The regular expression to match",
"type": "String|RegExp"
},
{
"name": "column",
"description": "The column ID (number) or\ntitle (string)",
"type": "String|Integer"
}
],
"return": {
"description": "TableRow object",
"type": "p5.TableRow"
}
}
],
"return": {
"description": "TableRow object",
"type": "p5.TableRow"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "matchRows",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 458,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Finds the rows in the Table that match the regular expression provided,\nand returns references to those rows. Returns an array, so for must be\nused to iterate through all the rows, as shown in the example. The\ncolumn to search may be specified by either its ID or title.",
"example": [
"let table;\n\nfunction setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Create a new p5.Table and add columns\n table = new p5.Table();\n table.addColumn('name');\n table.addColumn('type');\n\n // Add rows to the table\n let newRow = table.addRow();\n newRow.setString('name', 'Lion');\n newRow.setString('type', 'Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', 'Snake');\n newRow.setString('type', 'Reptile');\n\n newRow = table.addRow();\n newRow.setString('name', 'Mosquito');\n newRow.setString('type', 'Insect');\n\n newRow = table.addRow();\n newRow.setString('name', 'Lizard');\n newRow.setString('type', 'Reptile');\n\n // Search for rows where the \"type\" starts with \"R\"\n let rows = table.matchRows('R.*', 'type');\n\n // Set text properties for drawing on the canvas\n fill(0); // Text color: black\n textSize(12); // Text size\n\n // Display each matching row on the canvas\n let y = 20;\n for (let i = 0; i < rows.length; i++) {\n let output = rows[i].getString('name') + ': ' + rows[i].getString('type');\n text(output, 10, y);\n y += 20;\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "regexp",
"description": "The regular expression to match",
"type": "String"
},
{
"name": "column",
"description": "The column ID (number) or\ntitle (string)",
"optional": 1,
"type": "String|Integer"
}
],
"return": {
"description": "An Array of TableRow objects",
"type": "p5.TableRow[]"
}
}
],
"return": {
"description": "An Array of TableRow objects",
"type": "p5.TableRow[]"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getColumn",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 507,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.",
"example": [
"// META:norender\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nasync function setup() {\n // The table is comma separated value \"csv\"\n // and has a header specifying the columns labels.\n table = await loadTable('assets/mammals.csv', 'csv', 'header');\n\n //getColumn returns an array that can be printed directly\n print(table.getColumn('species'));\n //outputs [\"Capra hircus\", \"Panthera pardus\", \"Equus zebra\"]\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "column",
"description": "String or Number of the column to return",
"type": "String|Number"
}
],
"return": {
"description": "Array of column values",
"type": "Array"
}
}
],
"return": {
"description": "Array of column values",
"type": "Array"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "clearRows",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 559,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.",
"example": [
"// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Clear all rows from the table\n table.clearRows();\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display the number of rows and columns on the canvas\n text(table.getRowCount() + ' total rows in table', 10, 30);\n text(table.getColumnCount() + ' total columns in table', 10, 60);\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "addColumn",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 601,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Use addColumn() to add a new column to a Table object.\nTypically, you will want to specify a title, so the column\nmay be easily referenced later by name. (If no title is\nspecified, the new column's title will be null.)",
"example": [
"let table;\n\nasync function setup() {\n createCanvas(300, 300);\n table = await loadTable('/assets/mammals.csv', ',', 'header');\n\n table.addColumn('carnivore');\n table.set(0, 'carnivore', 'no');\n table.set(1, 'carnivore', 'yes');\n table.set(2, 'carnivore', 'no');\n\n fill(0); // Set text color to black\n textSize(11); // Adjust text size as needed\n\n for (let r = 0; r < table.getRowCount(); r++) {\n for (let c = 0; c < table.getColumnCount(); c++) {\n // Keep column spacing consistent (e.g. 80 pixels apart).\n let x = c * 80 + 10;\n let y = r * 30 + 20;\n // Use x directly, rather than multiplying by c again\n text(table.getString(r, c), x, y);\n }\n }\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "title",
"description": "title of the given column",
"optional": 1,
"type": "String"
}
]
}
],
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getColumnCount",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 632,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Returns the total number of columns in a Table.",
"example": [
"// given the cvs file \"blobs.csv\" in /assets directory\n// ID, Name, Flavor, Shape, Color\n// Blob1, Blobby, Sweet, Blob, Pink\n// Blob2, Saddy, Savory, Blob, Blue\n\nlet table;\n\nasync function setup() {\n table = await loadTable('assets/blobs.csv');\n\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n}\n\nfunction draw() {\n let numOfColumn = table.getColumnCount();\n text('There are ' + numOfColumn + ' columns in the table.', 100, 50);\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "Number of columns in this table",
"type": "Integer"
}
}
],
"return": {
"description": "Number of columns in this table",
"type": "Integer"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getRowCount",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 662,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Returns the total number of rows in a Table.",
"example": [
"// given the cvs file \"blobs.csv\" in /assets directory\n//\n// ID, Name, Flavor, Shape, Color\n// Blob1, Blobby, Sweet, Blob, Pink\n// Blob2, Saddy, Savory, Blob, Blue\n\nlet table;\n\nasync function setup() {\n table = await loadTable('assets/blobs.csv');\n\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n}\n\nfunction draw() {\n text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "Number of rows in this table",
"type": "Integer"
}
}
],
"return": {
"description": "Number of rows in this table",
"type": "Integer"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "removeTokens",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 702,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Removes any of the specified characters (or \"tokens\").
\nIf no column is specified, then the values in all columns and\nrows are processed. A specific column may be referenced by\neither its ID or title.
\n",
"example": [
"// META:norender\nfunction setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' $Lion ,');\n newRow.setString('type', ',,,Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', '$Snake ');\n newRow.setString('type', ',,,Reptile');\n\n table.removeTokens(',$ ');\n print(table.getArray());\n}\n\n// prints:\n// 0 \"Lion\" \"Mamal\"\n// 1 \"Snake\" \"Reptile\""
],
"overloads": [
{
"params": [
{
"name": "chars",
"description": "String listing characters to be removed",
"type": "String"
},
{
"name": "column",
"description": "Column ID (number)\nor name (string)",
"optional": 1,
"type": "String|Integer"
}
]
}
],
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "trim",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 770,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Trims leading and trailing whitespace, such as spaces and tabs,\nfrom String table values. If no column is specified, then the\nvalues in all columns and rows are trimmed. A specific column\nmay be referenced by either its ID or title.",
"example": [
"// META:norender\nfunction setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' Lion ,');\n newRow.setString('type', ' Mammal ');\n\n newRow = table.addRow();\n newRow.setString('name', ' Snake ');\n newRow.setString('type', ' Reptile ');\n\n table.trim();\n print(table.getArray());\n}\n\n// prints:\n// 0 \"Lion\" \"Mamal\"\n// 1 \"Snake\" \"Reptile\""
],
"overloads": [
{
"params": [
{
"name": "column",
"description": "Column ID (number)\nor name (string)",
"optional": 1,
"type": "String|Integer"
}
]
}
],
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "removeColumn",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 837,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Use removeColumn() to remove an existing column from a Table\nobject. The column to be removed may be identified by either\nits title (a String) or its index value (an int).\nremoveColumn(0) would remove the first column, removeColumn(1)\nwould remove the second column, and so on.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 100x100 canvas\n createCanvas(100, 100);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Remove the \"id\" column\n table.removeColumn('id');\n\n // Get the remaining column count\n let colCount = table.getColumnCount();\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display the column count on the canvas\n text(colCount, 40, 50);\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "column",
"description": "columnName (string) or ID (number)",
"type": "String|Integer"
}
]
}
],
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "set",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 907,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Stores a value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Update the first row: change species to \"Canis Lupus\" and name to \"Wolf\"\n table.set(0, 'species', 'Canis Lupus');\n table.set(0, 'name', 'Wolf');\n\n // Set text properties for drawing on the canvas\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display the table values on the canvas:\n // Each row's values are concatenated into a single string and displayed on a new line.\n let y = 20; // Starting vertical position\n for (let r = 0; r < table.getRowCount(); r++) {\n let rowText = \"\";\n for (let c = 0; c < table.getColumnCount(); c++) {\n rowText += table.getString(r, c) + \" \";\n }\n text(rowText, 10, y * 2.5);\n y += 20;\n }\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "row",
"description": "row ID",
"type": "Integer"
},
{
"name": "column",
"description": "column ID (Number)\nor title (String)",
"type": "String|Integer"
},
{
"name": "value",
"description": "value to assign",
"type": "String|Number"
}
]
}
],
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "setNum",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 948,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Stores a Float value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 100x100 canvas and set a white background\n createCanvas(100, 100);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Set the value in row 1, column \"id\" to the number 1\n table.setNum(1, 'id', 1);\n\n // Get the first column as an array and join its values into a string for display.\n let col0 = table.getColumn(0); // Expected output: [\"0\", 1, \"2\"]\n let output = col0.join(\", \");\n\n // Set text properties and display the output on the canvas\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n text(output, 30, 50);\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "row",
"description": "row ID",
"type": "Integer"
},
{
"name": "column",
"description": "column ID (Number)\nor title (String)",
"type": "String|Integer"
},
{
"name": "value",
"description": "value to assign",
"type": "Number"
}
]
}
],
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "setString",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 998,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Stores a String value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file from the assets folder with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Add a new row with the new animal data\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n // Convert the table to a 2D array\n let tableArray = table.getArray();\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display each row of the table on the canvas\n let y = 20; // Starting y position\n for (let i = 0; i < tableArray.length; i++) {\n // Join the values of each row with a comma separator\n let rowText = tableArray[i].join(', ');\n text(rowText, 15, y * 2);\n y += 20; // Increment y position for the next row\n }\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "row",
"description": "row ID",
"type": "Integer"
},
{
"name": "column",
"description": "column ID (Number)\nor title (String)",
"type": "String|Integer"
},
{
"name": "value",
"description": "value to assign",
"type": "String"
}
]
}
],
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "get",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 1039,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Retrieves a value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 100x100 canvas\n createCanvas(100, 100);\n background(255); // Set background to white\n\n // Load the CSV file from the assets folder with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Set text properties for drawing on the canvas\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Get the values from the table\n let value1 = table.get(0, 1); // Using column index (1) => \"Capra hircus\"\n let value2 = table.get(0, 'species'); // Using column name => \"Capra hircus\"\n\n // Display the values on the canvas\n text(value1, 10, 30);\n text(value2, 10, 60);\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "row",
"description": "row ID",
"type": "Integer"
},
{
"name": "column",
"description": "columnName (string) or\nID (number)",
"type": "String|Integer"
}
],
"return": {
"description": "",
"type": "String|Number"
}
}
],
"return": {
"description": "",
"type": "String|Number"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getNum",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 1080,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Retrieves a Float value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 100x100 canvas\n createCanvas(100, 100);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Compute the result: id at row 1, column 0 plus 100 (i.e. 1 + 100 = 101)\n let result = table.getNum(1, 0) + 100;\n\n // Set text properties and display the result on the canvas\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n text(result, 10, 30); // Display the result at position (10, 30)\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "row",
"description": "row ID",
"type": "Integer"
},
{
"name": "column",
"description": "columnName (string) or\nID (number)",
"type": "String|Integer"
}
],
"return": {
"description": "",
"type": "Number"
}
}
],
"return": {
"description": "",
"type": "Number"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getString",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 1134,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Retrieves a String value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display each table cell value on the canvas one below the other.\n // We use a variable 'y' to increment the vertical position.\n let y = 20;\n text(table.getString(0, 0), 10, y); // 0\n y += 20;\n text(table.getString(0, 1), 10, y); // Capra hircus\n y += 20;\n text(table.getString(0, 2), 10, y); // Goat\n y += 20;\n text(table.getString(1, 0), 10, y); // 1\n y += 20;\n text(table.getString(1, 1), 10, y); // Panthera pardus\n y += 20;\n text(table.getString(1, 2), 10, y); // Leopard\n y += 20;\n text(table.getString(2, 0), 10, y); // 2\n y += 20;\n text(table.getString(2, 1), 10, y); // Equus zebra\n y += 20;\n text(table.getString(2, 2), 10, y); // Zebra\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "row",
"description": "row ID",
"type": "Integer"
},
{
"name": "column",
"description": "columnName (string) or\nID (number)",
"type": "String|Integer"
}
],
"return": {
"description": "",
"type": "String"
}
}
],
"return": {
"description": "",
"type": "String"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getObject",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 1173,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Retrieves all table data and returns as an object. If a column name is\npassed in, each row object will be stored with that attribute as its\ntitle.",
"example": [
"// META:norender\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nasync function setup() {\n // The table is comma separated value \"csv\"\n // and has a header specifying the columns labels.\n table = await loadTable('assets/mammals.csv', 'csv', 'header');\n\n let tableObject = table.getObject();\n\n print(tableObject);\n //outputs an object\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [
{
"name": "headerColumn",
"description": "Name of the column which should be used to\ntitle each row object (optional)",
"optional": 1,
"type": "String"
}
],
"return": {
"description": "",
"type": "Object"
}
}
],
"return": {
"description": "",
"type": "Object"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "getArray",
"file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
"line": 1229,
"deprecated": true,
"deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
"description": "Retrieves all table data and returns it as a multidimensional array.",
"example": [
"let table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Get the CSV data as a 2D array\n let tableArray = table.getArray();\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display each row of the CSV on the canvas\n // Each row is displayed on a separate line\n for (let i = 0; i < tableArray.length; i++) {\n let rowText = tableArray[i].join(\", \");\n text(rowText, 10, 20 + i * 50 + 30);\n }\n\n describe('no image displayed');\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "",
"type": "Array"
}
}
],
"return": {
"description": "",
"type": "Array"
},
"class": "p5.Table",
"static": false,
"module": "IO",
"submodule": "Table"
},
{
"name": "play",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 112,
"itemtype": "method",
"description": "Plays audio or video from a media element.",
"example": [
"let beat;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display a message.\n text('Click to play', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. A beat plays when the user clicks the square.');\n}\n\n// Play the beat when the user presses the mouse.\nfunction mousePressed() {\n beat.play();\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "stop",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 190,
"itemtype": "method",
"description": "Stops a media element and sets its current time to 0.
\nCalling media.play() will restart playing audio/video from the beginning.
\n",
"example": [
"let beat;\nlet isStopped = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to start\" written in black on a gray background. The beat starts or stops when the user presses the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isStopped === true) {\n text('Click to start', 50, 50);\n } else {\n text('Click to stop', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isStopped === true) {\n // If the beat is stopped, play it.\n beat.play();\n isStopped = false;\n } else {\n // If the beat is playing, stop it.\n beat.stop();\n isStopped = true;\n }\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "pause",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 246,
"itemtype": "method",
"description": "Pauses a media element.
\nCalling media.play() will resume playing audio/video from the moment it paused.
\n",
"example": [
"let beat;\nlet isPaused = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. The beat plays or pauses when the user clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isPaused === true) {\n text('Click to play', 50, 50);\n } else {\n text('Click to pause', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isPaused === true) {\n // If the beat is paused,\n // play it.\n beat.play();\n isPaused = false;\n } else {\n // If the beat is playing,\n // pause it.\n beat.pause();\n isPaused = true;\n }\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "loop",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 299,
"itemtype": "method",
"description": "Plays the audio/video repeatedly in a loop.",
"example": [
"let beat;\nlet isLooping = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to loop\" written in black on a gray background. A beat plays repeatedly in a loop when the user clicks. The beat stops when the user clicks again.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isLooping === true) {\n text('Click to stop', 50, 50);\n } else {\n text('Click to loop', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isLooping === true) {\n // If the beat is looping, stop it.\n beat.stop();\n isLooping = false;\n } else {\n // If the beat is stopped, loop it.\n beat.loop();\n isLooping = true;\n }\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "noLoop",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 354,
"itemtype": "method",
"description": "Stops the audio/video from playing in a loop.
\nThe media will stop when it finishes playing.
\n",
"example": [
"let beat;\nlet isPlaying = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. A beat plays when the user clicks. The beat stops when the user clicks again.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isPlaying === true) {\n text('Click to stop', 50, 50);\n } else {\n text('Click to play', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isPlaying === true) {\n // If the beat is playing, stop it.\n beat.stop();\n isPlaying = false;\n } else {\n // If the beat is stopped, play it.\n beat.play();\n isPlaying = true;\n }\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "autoplay",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 432,
"itemtype": "method",
"description": "Sets the audio/video to play once it's loaded.
\nThe parameter, shouldAutoplay, is optional. Calling\nmedia.autoplay() without an argument causes the media to play\nautomatically. If true is passed, as in media.autoplay(true), the\nmedia will automatically play. If false is passed, as in\nmedia.autoPlay(false), it won't play automatically.
\n",
"example": [
"let video;\n\nfunction setup() {\n noCanvas();\n\n // Call handleVideo() once the video loads.\n video = createVideo('assets/fingers.mov', handleVideo);\n\n describe('A video of fingers walking on a treadmill.');\n}\n\n// Set the video's size and play it.\nfunction handleVideo() {\n video.size(100, 100);\n video.autoplay();\n}",
"function setup() {\n noCanvas();\n\n // Load a video, but don't play it automatically.\n let video = createVideo('assets/fingers.mov', handleVideo);\n\n // Play the video when the user clicks on it.\n video.mousePressed(handlePress);\n\n describe('An image of fingers on a treadmill. They start walking when the user double-clicks on them.');\n}\n\n// Set the video's size and playback mode.\nfunction handleVideo() {\n video.size(100, 100);\n video.autoplay(false);\n}\n\n// Play the video.\nfunction handleClick() {\n video.play();\n}"
],
"overloads": [
{
"params": [
{
"name": "shouldAutoplay",
"description": "whether the element should autoplay.",
"optional": 1,
"type": "Boolean"
}
],
"chainable": 1
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "volume",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 509,
"itemtype": "method",
"description": "Sets the audio/video volume.
\nCalling media.volume() without an argument returns the current volume\nas a number in the range 0 (off) to 1 (maximum).
\nThe parameter, val, is optional. It's a number that sets the volume\nfrom 0 (off) to 1 (maximum). For example, calling media.volume(0.5)\nsets the volume to half of its maximum.
\n",
"example": [
"let dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"Volume: V\" on a gray square with media controls beneath it. The number \"V\" oscillates between 0 and 1 as the music plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Produce a number between 0 and 1.\n let n = 0.5 * sin(frameCount * 0.01) + 0.5;\n\n // Use n to set the volume.\n dragon.volume(n);\n\n // Get the current volume and display it.\n let v = dragon.volume();\n\n // Round v to 1 decimal place for display.\n v = round(v, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the volume.\n text(`Volume: ${v}`, 50, 50);\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "current volume.",
"type": "Number"
}
},
{
"params": [
{
"name": "val",
"description": "volume between 0.0 and 1.0.",
"type": "Number"
}
],
"chainable": 1
}
],
"return": {
"description": "current volume.",
"type": "Number"
},
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "speed",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 574,
"itemtype": "method",
"description": "Sets the audio/video playback speed.
\nThe parameter, val, is optional. It's a number that sets the playback\nspeed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2\nplays it at double speed, and so on. -1 plays the media at normal speed\nin reverse.
\nCalling media.speed() returns the current speed as a number.
\nNote: Not all browsers support backward playback. Even if they do,\nplayback might not be smooth.
\n",
"example": [
"let dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"Speed: S\" on a gray square with media controls beneath it. The number \"S\" oscillates between 0 and 1 as the music plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Produce a number between 0 and 2.\n let n = sin(frameCount * 0.01) + 1;\n\n // Use n to set the playback speed.\n dragon.speed(n);\n\n // Get the current speed and display it.\n let s = dragon.speed();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the speed.\n text(`Speed: ${s}`, 50, 50);\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "current playback speed.",
"type": "Number"
}
},
{
"params": [
{
"name": "speed",
"description": "speed multiplier for playback.",
"type": "Number"
}
],
"chainable": 1
}
],
"return": {
"description": "current playback speed.",
"type": "Number"
},
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "time",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 667,
"itemtype": "method",
"description": "Sets the media element's playback time.
\nThe parameter, time, is optional. It's a number that specifies the\ntime, in seconds, to jump to when playback begins.
\nCalling media.time() without an argument returns the number of seconds\nthe audio/video has played.
\nNote: Time resets to 0 when looping media restarts.
\n",
"example": [
"let dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"S seconds\" on a gray square with media controls beneath it. The number \"S\" increases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the current playback time.\n let s = dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the playback time.\n text(`${s} seconds`, 50, 50);\n}",
"let dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n // Jump to 2 seconds to start.\n dragon.time(2);\n\n describe('The text \"S seconds\" on a gray square with media controls beneath it. The number \"S\" increases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the current playback time.\n let s = dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the playback time.\n text(`${s} seconds`, 50, 50);\n}"
],
"overloads": [
{
"params": [
{
"name": "time",
"description": "time to jump to (in seconds).",
"optional": 1,
"type": "Number"
}
],
"return": {
"description": "current time (in seconds).",
"type": "Number"
}
}
],
"return": {
"description": "current time (in seconds).",
"type": "Number"
},
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "duration",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 713,
"itemtype": "method",
"description": "Returns the audio/video's duration in seconds.",
"example": [
"let dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"S seconds left\" on a gray square with media controls beneath it. The number \"S\" decreases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the time remaining.\n let s = dragon.duration() - dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the time remaining.\n text(`${s} seconds left`, 50, 50);\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "duration (in seconds).",
"type": "Number"
}
}
],
"return": {
"description": "duration (in seconds).",
"type": "Number"
},
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "onended",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 889,
"itemtype": "method",
"description": "Calls a function when the audio/video reaches the end of its playback.
\nThe element is passed as an argument to the callback function.
\nNote: The function won't be called if the media is looping.
\n",
"example": [
"let beat;\nlet isPlaying = false;\nlet isDone = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n // Call handleEnd() when the beat finishes.\n beat.onended(handleEnd);\n\n describe('The text \"Click to play\" written in black on a gray square. A beat plays when the user clicks. The text \"Done!\" appears when the beat finishes playing.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different messages based on playback.\n if (isDone === true) {\n text('Done!', 50, 50);\n } else if (isPlaying === false) {\n text('Click to play', 50, 50);\n } else {\n text('Playing...', 50, 50);\n }\n}\n\n// Play the beat when the user presses the mouse.\nfunction mousePressed() {\n if (isPlaying === false) {\n isPlaying = true;\n beat.play();\n }\n}\n\n// Set isDone when playback ends.\nfunction handleEnd() {\n isDone = false;\n}"
],
"overloads": [
{
"params": [
{
"name": "callback",
"description": "function to call when playback ends.\nThe p5.MediaElement is passed as\nthe argument.",
"type": "Function"
}
],
"chainable": 1
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "connect",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 918,
"itemtype": "method",
"description": "Sends the element's audio to an output.
\nThe parameter, audioNode, can be an AudioNode or an object from the\np5.sound library.
\nIf no element is provided, as in myElement.connect(), the element\nconnects to the main output. All connections are removed by the\n.disconnect() method.
\nNote: This method is meant to be used with the p5.sound.js addon library.
\n",
"example": [],
"overloads": [
{
"params": [
{
"name": "audioNode",
"description": "AudioNode from the Web Audio API,\nor an object from the p5.sound library",
"type": "AudioNode|Object"
}
]
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "disconnect",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 962,
"itemtype": "method",
"description": "Disconnect all Web Audio routing, including to the main output.
\nThis is useful if you want to re-route the output through audio effects,\nfor example.
\n",
"example": [],
"overloads": [
{
"params": []
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "showControls",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 1001,
"itemtype": "method",
"description": "Show the default\nHTMLMediaElement\ncontrols.
\nNote: The controls vary between web browsers.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n background('cornflowerblue');\n\n // Style the text.\n textAlign(CENTER);\n textSize(50);\n\n // Display a dragon.\n text('🐉', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n let dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('A dragon emoji, 🐉, drawn in the center of a blue square. A song plays in the background. Audio controls are displayed beneath the canvas.');\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "hideControls",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 1053,
"itemtype": "method",
"description": "Hide the default\nHTMLMediaElement\ncontrols.",
"example": [
"let dragon;\nlet isHidden = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"Double-click to hide controls\" written in the middle of a gray square. A song plays in the background. Audio controls are displayed beneath the canvas. The controls appear/disappear when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n\n // Display a different message when controls are hidden or shown.\n if (isHidden === true) {\n text('Double-click to show controls', 10, 20, 80, 80);\n } else {\n text('Double-click to hide controls', 10, 20, 80, 80);\n }\n}\n\n// Show/hide controls based on a double-click.\nfunction doubleClicked() {\n if (isHidden === true) {\n dragon.showControls();\n isHidden = false;\n } else {\n dragon.hideControls();\n isHidden = true;\n }\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "addCue",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 1104,
"itemtype": "method",
"description": "Schedules a function to call when the audio/video reaches a specific time\nduring its playback.
\nThe first parameter, time, is the time, in seconds, when the function\nshould run. This value is passed to callback as its first argument.
\nThe second parameter, callback, is the function to call at the specified\ncue time.
\nThe third parameter, value, is optional and can be any type of value.\nvalue is passed to callback.
\nCalling media.addCue() returns an ID as a string. This is useful for\nremoving the cue later.
\n",
"example": [
"function setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n beat.addCue(6, changeBackground, 'lavender');\n\n describe('A red square with a beat playing in the background. Its color changes every 2 seconds while the audio plays.');\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}"
],
"overloads": [
{
"params": [
{
"name": "time",
"description": "cue time to run the callback function.",
"type": "Number"
},
{
"name": "callback",
"description": "function to call at the cue time.",
"type": "Function"
},
{
"name": "value",
"description": "object to pass as the argument to\ncallback.",
"optional": 1,
"type": "Object"
}
],
"return": {
"description": "id ID of this cue,\nuseful for media.removeCue(id).",
"type": "Number"
}
}
],
"return": {
"description": "id ID of this cue,\nuseful for media.removeCue(id).",
"type": "Number"
},
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "removeCue",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 1170,
"itemtype": "method",
"description": "Removes a callback based on its ID.",
"example": [
"let lavenderID;\nlet isRemoved = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n\n // Record the ID of the \"lavender\" callback.\n lavenderID = beat.addCue(6, changeBackground, 'lavender');\n\n describe('The text \"Double-click to remove lavender.\" written on a red square. The color changes every 2 seconds while the audio plays. The lavender option is removed when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Display different instructions based on the available callbacks.\n if (isRemoved === false) {\n text('Double-click to remove lavender.', 10, 10, 80, 80);\n } else {\n text('No more lavender.', 10, 10, 80, 80);\n }\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n// Remove the lavender color-change cue when the user double-clicks.\nfunction doubleClicked() {\n if (isRemoved === false) {\n beat.removeCue(lavenderID);\n isRemoved = true;\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "id",
"description": "ID of the cue, created by media.addCue().",
"type": "Number"
}
]
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "clearCues",
"file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
"line": 1233,
"itemtype": "method",
"description": "Removes all functions scheduled with media.addCue().",
"example": [
"let isChanging = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n beat.addCue(6, changeBackground, 'lavender');\n\n describe('The text \"Double-click to stop changing.\" written on a square. The color changes every 2 seconds while the audio plays. The color stops changing when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Display different instructions based on the available callbacks.\n if (isChanging === true) {\n text('Double-click to stop changing.', 10, 10, 80, 80);\n } else {\n text('No more changes.', 10, 10, 80, 80);\n }\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n// Remove cued functions and stop changing colors when the user\n// double-clicks.\nfunction doubleClicked() {\n if (isChanging === true) {\n beat.clearCues();\n isChanging = false;\n }\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.MediaElement",
"static": false,
"module": "DOM",
"submodule": "DOM"
},
{
"name": "calculateBoundingBox",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
"line": 167,
"itemtype": "method",
"description": "Calculates the position and size of the smallest box that contains the geometry.
\nA bounding box is the smallest rectangular prism that contains the entire\ngeometry. It's defined by the box's minimum and maximum coordinates along\neach axis, as well as the size (length) and offset (center).
\nCalling myGeometry.calculateBoundingBox() returns an object with four\nproperties that describe the bounding box:
\n// Get myGeometry's bounding box.\nlet bbox = myGeometry.calculateBoundingBox();\n\n// Print the bounding box to the console.\nconsole.log(bbox);\n\n// {\n// // The minimum coordinate along each axis.\n// min: { x: -1, y: -2, z: -3 },\n//\n// // The maximum coordinate along each axis.\n// max: { x: 1, y: 2, z: 3},\n//\n// // The size (length) along each axis.\n// size: { x: 2, y: 4, z: 6},\n//\n// // The offset (center) along each axis.\n// offset: { x: 0, y: 0, z: 0}\n// }
",
"example": [
"// Click and drag the mouse to view the scene from different angles.\n\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n\n describe('Ten white spheres placed randomly against a gray background. A box encloses the spheres.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n fill(255);\n\n // Draw the particles.\n model(particles);\n\n // Calculate the bounding box.\n let bbox = particles.calculateBoundingBox();\n\n // Translate to the bounding box's center.\n translate(bbox.offset.x, bbox.offset.y, bbox.offset.z);\n\n // Style the bounding box.\n stroke(255);\n noFill();\n\n // Draw the bounding box.\n box(bbox.size.x, bbox.size.y, bbox.size.z);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 10; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 15);\n let y = randomGaussian(0, 15);\n let z = randomGaussian(0, 15);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(3);\n pop();\n }\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "bounding box of the geometry.",
"type": "Object"
}
}
],
"return": {
"description": "bounding box of the geometry.",
"type": "Object"
},
"class": "p5.Geometry",
"static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
"name": "clearColors",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
"line": 311,
"itemtype": "method",
"description": "Removes the geometry’s internal colors.
\np5.Geometry objects can be created with \"internal colors\" assigned to\nvertices or the entire shape. When a geometry has internal colors,\nfill() has no effect. Calling\nmyGeometry.clearColors() allows the\nfill() function to apply color to the geometry.
\n",
"example": [
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Geometry object.\n // Set its internal color to red.\n let myGeometry = buildGeometry(function() {\n fill(255, 0, 0);\n plane(20);\n });\n\n // Style the shape.\n noStroke();\n\n // Draw the p5.Geometry object (center).\n model(myGeometry);\n\n // Translate the origin to the bottom-right.\n translate(25, 25, 0);\n\n // Try to fill the geometry with green.\n fill(0, 255, 0);\n\n // Draw the geometry again (bottom-right).\n model(myGeometry);\n\n // Clear the geometry's colors.\n myGeometry.clearColors();\n\n // Fill the geometry with blue.\n fill(0, 0, 255);\n\n // Translate the origin up.\n translate(0, -50, 0);\n\n // Draw the geometry again (top-right).\n model(myGeometry);\n\n describe(\n 'Three squares drawn against a gray background. Red squares are at the center and the bottom-right. A blue square is at the top-right.'\n );\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Geometry",
"static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
"name": "flipU",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
"line": 607,
"itemtype": "method",
"description": "Flips the geometry’s texture u-coordinates.
\nIn order for texture() to work, the geometry\nneeds a way to map the points on its surface to the pixels in a rectangular\nimage that's used as a texture. The geometry's vertex at coordinates\n(x, y, z) maps to the texture image's pixel at coordinates (u, v).
\nThe myGeometry.uvs array stores the\n(u, v) coordinates for each vertex in the order it was added to the\ngeometry. Calling myGeometry.flipU() flips a geometry's u-coordinates\nso that the texture appears mirrored horizontally.
\nFor example, a plane's four vertices are added clockwise starting from the\ntop-left corner. Here's how calling myGeometry.flipU() would change a\nplane's texture coordinates:
\n// Print the original texture coordinates.\n// Output: [0, 0, 1, 0, 0, 1, 1, 1]\nconsole.log(myGeometry.uvs);\n\n// Flip the u-coordinates.\nmyGeometry.flipU();\n\n// Print the flipped texture coordinates.\n// Output: [1, 0, 0, 0, 1, 1, 0, 1]\nconsole.log(myGeometry.uvs);\n\n// Notice the swaps:\n// Top vertices: [0, 0, 1, 0] --> [1, 0, 0, 0]\n// Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]
",
"example": [
"let img;\n\nasync function setup() {\n img = await loadImage('assets/laDefense.jpg');\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create p5.Geometry objects.\n let geom1 = buildGeometry(createShape);\n let geom2 = buildGeometry(createShape);\n\n // Flip geom2's U texture coordinates.\n geom2.flipU();\n\n // Left (original).\n push();\n translate(-25, 0, 0);\n texture(img);\n noStroke();\n model(geom1);\n pop();\n\n // Right (flipped).\n push();\n translate(25, 0, 0);\n texture(img);\n noStroke();\n model(geom2);\n pop();\n\n describe(\n 'Two photos of a ceiling on a gray background. The photos are mirror images of each other.'\n );\n}\n\nfunction createShape() {\n plane(40);\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Geometry",
"static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
"name": "computeFaces",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
"line": 827,
"itemtype": "method",
"description": "Computes the geometry's faces using its vertices.
\nAll 3D shapes are made by connecting sets of points called vertices. A\ngeometry's surface is formed by connecting vertices to form triangles that\nare stitched together. Each triangular patch on the geometry's surface is\ncalled a face. myGeometry.computeFaces() performs the math needed to\ndefine each face based on the distances between vertices.
\nThe geometry's vertices are stored as p5.Vector\nobjects in the myGeometry.vertices\narray. The geometry's first vertex is the\np5.Vector object at myGeometry.vertices[0],\nits second vertex is myGeometry.vertices[1], its third vertex is\nmyGeometry.vertices[2], and so on.
\nCalling myGeometry.computeFaces() fills the\nmyGeometry.faces array with three-element\narrays that list the vertices that form each face. For example, a geometry\nmade from a rectangle has two faces because a rectangle is made by joining\ntwo triangles. myGeometry.faces for a\nrectangle would be the two-dimensional array\n[[0, 1, 2], [2, 1, 3]]. The first face, myGeometry.faces[0], is the\narray [0, 1, 2] because it's formed by connecting\nmyGeometry.vertices[0], myGeometry.vertices[1],and\nmyGeometry.vertices[2]. The second face, myGeometry.faces[1], is the\narray [2, 1, 3] because it's formed by connecting\nmyGeometry.vertices[2], myGeometry.vertices[1], and\nmyGeometry.vertices[3].
\nNote: myGeometry.computeFaces() only works when geometries have four or more vertices.
\n",
"example": [
"// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to myGeometry's vertices array.\n myGeometry.vertices.push(v0, v1, v2, v3);\n\n // Compute myGeometry's faces array.\n myGeometry.computeFaces();\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the shape.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object using a callback function.\n myGeometry = new p5.Geometry(1, 1, createShape);\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the shape.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n this.vertices.push(v0, v1, v2, v3);\n\n // Compute the faces array.\n this.computeFaces();\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5.Geometry",
"static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
"name": "computeNormals",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
"line": 1156,
"itemtype": "method",
"description": "Calculates the normal vector for each vertex on the geometry.
\nAll 3D shapes are made by connecting sets of points called vertices. A\ngeometry's surface is formed by connecting vertices to create triangles\nthat are stitched together. Each triangular patch on the geometry's\nsurface is called a face. myGeometry.computeNormals() performs the\nmath needed to orient each face. Orientation is important for lighting\nand other effects.
\nA face's orientation is defined by its normal vector which points out\nof the face and is normal (perpendicular) to the surface. Calling\nmyGeometry.computeNormals() first calculates each face's normal vector.\nThen it calculates the normal vector for each vertex by averaging the\nnormal vectors of the faces surrounding the vertex. The vertex normals\nare stored as p5.Vector objects in the\nmyGeometry.vertexNormals array.
\nThe first parameter, shadingType, is optional. Passing the constant\nFLAT, as in myGeometry.computeNormals(FLAT), provides neighboring\nfaces with their own copies of the vertices they share. Surfaces appear\ntiled with flat shading. Passing the constant SMOOTH, as in\nmyGeometry.computeNormals(SMOOTH), makes neighboring faces reuse their\nshared vertices. Surfaces appear smoother with smooth shading. By\ndefault, shadingType is FLAT.
\nThe second parameter, options, is also optional. If an object with a\nroundToPrecision property is passed, as in\nmyGeometry.computeNormals(SMOOTH, { roundToPrecision: 5 }), it sets the\nnumber of decimal places to use for calculations. By default,\nroundToPrecision uses 3 decimal places.
\n",
"example": [
"// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(function() {\n torus();\n });\n\n // Compute the vertex normals.\n myGeometry.computeNormals();\n\n describe(\n \"A white torus drawn on a dark gray background. Red lines extend outward from the torus' vertices.\"\n );\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n stroke(0);\n\n // Display the helix.\n model(myGeometry);\n\n // Style the normal vectors.\n stroke(255, 0, 0);\n\n // Iterate over the vertices and vertexNormals arrays.\n for (let i = 0; i < myGeometry.vertices.length; i += 1) {\n\n // Get the vertex p5.Vector object.\n let v = myGeometry.vertices[i];\n\n // Get the vertex normal p5.Vector object.\n let n = myGeometry.vertexNormals[i];\n\n // Calculate a point along the vertex normal.\n let p = p5.Vector.mult(n, 5);\n\n // Draw the vertex normal as a red line.\n push();\n translate(v);\n line(0, 0, 0, p.x, p.y, p.z);\n pop();\n }\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object using a callback function.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n myGeometry.vertices.push(v0, v1, v2, v3);\n\n // Compute the faces array.\n myGeometry.computeFaces();\n\n // Compute the surface normals.\n myGeometry.computeNormals();\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a white point light.\n pointLight(255, 255, 255, 0, 0, 10);\n\n // Style the p5.Geometry object.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(createShape);\n\n // Compute normals using default (FLAT) shading.\n myGeometry.computeNormals(FLAT);\n\n describe('A white, helical structure drawn on a dark gray background. Its faces appear faceted.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n noStroke();\n\n // Display the helix.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create a helical shape.\n beginShape();\n for (let i = 0; i < TWO_PI * 3; i += 0.5) {\n let x = 30 * cos(i);\n let y = 30 * sin(i);\n let z = map(i, 0, TWO_PI * 3, -40, 40);\n vertex(x, y, z);\n }\n endShape();\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(createShape);\n\n // Compute normals using smooth shading.\n myGeometry.computeNormals(SMOOTH);\n\n describe('A white, helical structure drawn on a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n noStroke();\n\n // Display the helix.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create a helical shape.\n beginShape();\n for (let i = 0; i < TWO_PI * 3; i += 0.5) {\n let x = 30 * cos(i);\n let y = 30 * sin(i);\n let z = map(i, 0, TWO_PI * 3, -40, 40);\n vertex(x, y, z);\n }\n endShape();\n}",
"// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(createShape);\n\n // Create an options object.\n let options = { roundToPrecision: 5 };\n\n // Compute normals using smooth shading.\n myGeometry.computeNormals(SMOOTH, options);\n\n describe('A white, helical structure drawn on a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n noStroke();\n\n // Display the helix.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create a helical shape.\n beginShape();\n for (let i = 0; i < TWO_PI * 3; i += 0.5) {\n let x = 30 * cos(i);\n let y = 30 * sin(i);\n let z = map(i, 0, TWO_PI * 3, -40, 40);\n vertex(x, y, z);\n }\n endShape();\n}"
],
"overloads": [
{
"params": [
{
"name": "shadingType",
"description": "shading type. either FLAT or SMOOTH. Defaults to FLAT.",
"optional": 1,
"type": "FLAT|SMOOTH"
},
{
"name": "options",
"description": "shading options.",
"optional": 1,
"type": "Object"
}
],
"chainable": 1
}
],
"class": "p5.Geometry",
"static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
"name": "makeEdgesFromFaces",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
"line": 1345,
"itemtype": "method",
"description": "",
"example": [
"let tetrahedron;\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n describe('A rotating tetrahedron');\n\n tetrahedron = new p5.Geometry();\n\n // Give each geometry a unique gid\n tetrahedron.gid = 'tetrahedron';\n\n // Add four points of the tetrahedron\n\n let radius = 50;\n // A 2D triangle:\n tetrahedron.vertices.push(createVector(radius, 0, 0));\n tetrahedron.vertices.push(createVector(radius, 0, 0).rotate(TWO_PI / 3));\n tetrahedron.vertices.push(createVector(radius, 0, 0).rotate(TWO_PI * 2 / 3));\n // Add a tip in the z axis:\n tetrahedron.vertices.push(createVector(0, 0, radius));\n\n // Create the four faces by connecting the sets of three points\n tetrahedron.faces.push([0, 1, 2]);\n tetrahedron.faces.push([0, 1, 3]);\n tetrahedron.faces.push([0, 2, 3]);\n tetrahedron.faces.push([1, 2, 3]);\n tetrahedron.makeEdgesFromFaces();\n}\n\nfunction draw() {\n background(200);\n strokeWeight(2);\n orbitControl();\n rotateY(millis() * 0.001);\n model(tetrahedron);\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Geometry",
"static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
"name": "normalize",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
"line": 1667,
"itemtype": "method",
"description": "Transforms the geometry's vertices to fit snugly within a 100×100×100 box\ncentered at the origin.
\nCalling myGeometry.normalize() translates the geometry's vertices so that\nthey're centered at the origin (0, 0, 0). Then it scales the vertices so\nthat they fill a 100×100×100 box. As a result, small geometries will grow\nand large geometries will shrink.
\nNote: myGeometry.normalize() only works when called in the\nsetup() function.
\n",
"example": [
"let myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a very small torus.\n myGeometry = buildGeometry(function() {;\n torus(1, 0.25);\n });\n\n // Normalize the torus so its vertices fill\n // the range [-100, 100].\n myGeometry.normalize();\n\n describe('A white torus rotates slowly against a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Turn on the lights.\n lights();\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the torus.\n noStroke();\n\n // Draw the torus.\n model(myGeometry);\n}"
],
"overloads": [
{
"params": [],
"chainable": 1
}
],
"class": "p5.Geometry",
"static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
"name": "vertexProperty",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
"line": 1794,
"itemtype": "method",
"description": "Sets the shader's vertex property or attribute variables.
\nA vertex property, or vertex attribute, is a variable belonging to a vertex in a shader. p5.js provides some\ndefault properties, such as aPosition, aNormal, aVertexColor, etc. These are\nset using vertex(), normal()\nand fill() respectively. Custom properties can also\nbe defined within beginShape() and\nendShape().
\nThe first parameter, propertyName, is a string with the property's name.\nThis is the same variable name which should be declared in the shader, as in\nin vec3 aProperty, similar to .setUniform().
\nThe second parameter, data, is the value assigned to the shader variable. This value\nwill be pushed directly onto the Geometry object. There should be the same number\nof custom property values as vertices, this method should be invoked once for each\nvertex.
\nThe data can be a Number or an array of numbers. Tn the shader program the type\ncan be declared according to the WebGL specification. Common types include float,\nvec2, vec3, vec4 or matrices.
\nSee also the global vertexProperty() function.
\n",
"example": [
"let geo;\n\nfunction cartesianToSpherical(x, y, z) {\n let r = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));\n let theta = acos(z / r);\n let phi = atan2(y, x);\n return { theta, phi };\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Modify the material shader to display roughness.\n const myShader = baseMaterialShader().modify({\n vertexDeclarations:`in float aRoughness;\n out float vRoughness;`,\n fragmentDeclarations: 'in float vRoughness;',\n 'void afterVertex': `() {\n vRoughness = aRoughness;\n }`,\n 'vec4 combineColors': `(ColorComponents components) {\n vec4 color = vec4(0.);\n color.rgb += components.diffuse * components.baseColor * (1.0-vRoughness);\n color.rgb += components.ambient * components.ambientColor;\n color.rgb += components.specular * components.specularColor * (1.0-vRoughness);\n color.a = components.opacity;\n return color;\n }`\n });\n\n // Create the Geometry object.\n geo = buildGeometry(function() {\n fill('hotpink');\n sphere(45, 50, 50);\n });\n\n // Set the roughness value for every vertex.\n for (let v of geo.vertices){\n\n // convert coordinates to spherical coordinates\n let spherical = cartesianToSpherical(v.x, v.y, v.z);\n\n // Set the custom roughness vertex property.\n let roughness = noise(spherical.theta*5, spherical.phi*5);\n geo.vertexProperty('aRoughness', roughness);\n }\n\n // Use the custom shader.\n shader(myShader);\n\n describe('A rough pink sphere rotating on a blue background.');\n}\n\nfunction draw() {\n // Set some styles and lighting\n background('lightblue');\n noStroke();\n\n specularMaterial(255,125,100);\n shininess(2);\n\n directionalLight('white', -1, 1, -1);\n ambientLight(320);\n\n rotateY(millis()*0.001);\n\n // Draw the geometry\n model(geo);\n}"
],
"overloads": [
{
"params": [
{
"name": "propertyName",
"description": "the name of the vertex property.",
"type": "String"
},
{
"name": "data",
"description": "the data tied to the vertex property.",
"type": "Number|Number[]"
},
{
"name": "size",
"description": "optional size of each unit of data.",
"optional": 1,
"type": "Number"
}
]
}
],
"class": "p5.Geometry",
"static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
"name": "flipV",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
"line": 695,
"itemtype": "method",
"description": "Flips the geometry’s texture v-coordinates.
\nIn order for texture() to work, the geometry\nneeds a way to map the points on its surface to the pixels in a rectangular\nimage that's used as a texture. The geometry's vertex at coordinates\n(x, y, z) maps to the texture image's pixel at coordinates (u, v).
\nThe myGeometry.uvs array stores the\n(u, v) coordinates for each vertex in the order it was added to the\ngeometry. Calling myGeometry.flipV() flips a geometry's v-coordinates\nso that the texture appears mirrored vertically.
\nFor example, a plane's four vertices are added clockwise starting from the\ntop-left corner. Here's how calling myGeometry.flipV() would change a\nplane's texture coordinates:
\n// Print the original texture coordinates.\n// Output: [0, 0, 1, 0, 0, 1, 1, 1]\nconsole.log(myGeometry.uvs);\n\n// Flip the v-coordinates.\nmyGeometry.flipV();\n\n// Print the flipped texture coordinates.\n// Output: [0, 1, 1, 1, 0, 0, 1, 0]\nconsole.log(myGeometry.uvs);\n\n// Notice the swaps:\n// Left vertices: [0, 0] <--> [1, 0]\n// Right vertices: [1, 0] <--> [1, 1]
",
"example": [
"let img;\n\nasync function setup() {\n img = await loadImage('assets/laDefense.jpg');\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create p5.Geometry objects.\n let geom1 = buildGeometry(createShape);\n let geom2 = buildGeometry(createShape);\n\n // Flip geom2's V texture coordinates.\n geom2.flipV();\n\n // Left (original).\n push();\n translate(-25, 0, 0);\n texture(img);\n noStroke();\n model(geom1);\n pop();\n\n // Right (flipped).\n push();\n translate(25, 0, 0);\n texture(img);\n noStroke();\n model(geom2);\n pop();\n\n describe(\n 'Two photos of a ceiling on a gray background. The photos are mirror images of each other.'\n );\n}\n\nfunction createShape() {\n plane(40);\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Geometry",
"static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
"name": "resize",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
"line": 176,
"itemtype": "method",
"description": "Resizes the framebuffer to a given width and height.
\nThe parameters, width and height, set the dimensions of the\nframebuffer. For example, calling myBuffer.resize(300, 500) resizes\nthe framebuffer to 300×500 pixels, then sets myBuffer.width to 300\nand myBuffer.height 500.
\n",
"example": [
"let myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A multicolor sphere on a white surface. The image grows larger or smaller when the user moves the mouse, revealing a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(255);\n normalMaterial();\n sphere(20);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Resize the p5.Framebuffer object when the\n// user moves the mouse.\nfunction mouseMoved() {\n myBuffer.resize(mouseX, mouseY);\n}"
],
"overloads": [
{
"params": [
{
"name": "width",
"description": "width of the framebuffer.",
"type": "Number"
},
{
"name": "height",
"description": "height of the framebuffer.",
"type": "Number"
}
]
}
],
"class": "p5.Framebuffer",
"static": false,
"module": "Rendering"
},
{
"name": "pixelDensity",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
"line": 272,
"itemtype": "method",
"description": "Sets the framebuffer's pixel density or returns its current density.
\nComputer displays are grids of little lights called pixels. A display's\npixel density describes how many pixels it packs into an area. Displays\nwith smaller pixels have a higher pixel density and create sharper\nimages.
\nThe parameter, density, is optional. If a number is passed, as in\nmyBuffer.pixelDensity(1), it sets the framebuffer's pixel density. By\ndefault, the framebuffer's pixel density will match that of the canvas\nwhere it was created. All canvases default to match the display's pixel\ndensity.
\nCalling myBuffer.pixelDensity() without an argument returns its current\npixel density.
\n",
"example": [
"let myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe(\"A white circle on a gray canvas. The circle's edge become fuzzy while the user presses and holds the mouse.\");\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n circle(0, 0, 40);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Decrease the pixel density when the user\n// presses the mouse.\nfunction mousePressed() {\n myBuffer.pixelDensity(1);\n}\n\n// Increase the pixel density when the user\n// releases the mouse.\nfunction mouseReleased() {\n myBuffer.pixelDensity(2);\n}",
"let myBuffer;\nlet myFont;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n myFont = await loadFont('assets/inconsolata.otf');\n\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Get the p5.Framebuffer object's pixel density.\n let d = myBuffer.pixelDensity();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont(myFont);\n textSize(16);\n fill(0);\n\n // Display the pixel density.\n text(`Density: ${d}`, 0, 0);\n\n describe(`The text \"Density: ${d}\" written in black on a gray background.`);\n}"
],
"overloads": [
{
"params": [
{
"name": "density",
"description": "pixel density to set.",
"optional": 1,
"type": "Number"
}
],
"return": {
"description": "current pixel density.",
"type": "Number"
}
}
],
"return": {
"description": "current pixel density.",
"type": "Number"
},
"class": "p5.Framebuffer",
"static": false,
"module": "Rendering"
},
{
"name": "autoSized",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
"line": 337,
"itemtype": "method",
"description": "Toggles the framebuffer's autosizing mode or returns the current mode.
\nBy default, the framebuffer automatically resizes to match the canvas\nthat created it. Calling myBuffer.autoSized(false) disables this\nbehavior and calling myBuffer.autoSized(true) re-enables it.
\nCalling myBuffer.autoSized() without an argument returns true if\nthe framebuffer automatically resizes and false if not.
\n",
"example": [
"// Double-click to toggle the autosizing mode.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A multicolor sphere on a gray background. The image resizes when the user moves the mouse.');\n}\n\nfunction draw() {\n background(50);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n normalMaterial();\n sphere(width / 4);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -width / 2, -height / 2);\n}\n\n// Resize the canvas when the user moves the mouse.\nfunction mouseMoved() {\n let w = constrain(mouseX, 0, 100);\n let h = constrain(mouseY, 0, 100);\n resizeCanvas(w, h);\n}\n\n// Toggle autoSizing when the user double-clicks.\n// Note: opened an issue to fix(?) this.\nfunction doubleClicked() {\n let isAuto = myBuffer.autoSized();\n myBuffer.autoSized(!isAuto);\n}"
],
"overloads": [
{
"params": [
{
"name": "autoSized",
"description": "whether to automatically resize the framebuffer to match the canvas.",
"optional": 1,
"type": "Boolean"
}
],
"return": {
"description": "current autosize setting.",
"type": "Boolean"
}
}
],
"return": {
"description": "current autosize setting.",
"type": "Boolean"
},
"class": "p5.Framebuffer",
"static": false,
"module": "Rendering"
},
{
"name": "createCamera",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
"line": 641,
"itemtype": "method",
"description": "Creates a new\np5.Camera object to use with the framebuffer.
\nThe new camera is initialized with a default position (0, 0, 800) and a\ndefault perspective projection. Its properties can be controlled with\np5.Camera methods such as myCamera.lookAt(0, 0, 0).
\nFramebuffer cameras should be created between calls to\nmyBuffer.begin() and\nmyBuffer.end() like so:
\nlet myCamera;\n\nmyBuffer.begin();\n\n// Create the camera for the framebuffer.\nmyCamera = myBuffer.createCamera();\n\nmyBuffer.end();
Calling setCamera() updates the\nframebuffer's projection using the camera.\nresetMatrix() must also be called for the\nview to change properly:
\nmyBuffer.begin();\n\n// Set the camera for the framebuffer.\nsetCamera(myCamera);\n\n// Reset all transformations.\nresetMatrix();\n\n// Draw stuff...\n\nmyBuffer.end();
",
"example": [
"// Double-click to toggle between cameras.\n\nlet myBuffer;\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Create the cameras between begin() and end().\n myBuffer.begin();\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = myBuffer.createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = myBuffer.createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n myBuffer.end();\n\n describe(\n 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n\n // Set the camera.\n if (usingCam1 === true) {\n setCamera(cam1);\n } else {\n setCamera(cam2);\n }\n\n // Reset all transformations.\n resetMatrix();\n\n // Draw the box.\n box();\n\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n usingCam1 = false;\n } else {\n usingCam1 = true;\n }\n}"
],
"overloads": [
{
"params": [],
"return": {
"description": "new camera.",
"type": "p5.Camera"
}
}
],
"return": {
"description": "new camera.",
"type": "p5.Camera"
},
"class": "p5.Framebuffer",
"static": false,
"module": "Rendering"
},
{
"name": "remove",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
"line": 712,
"itemtype": "method",
"description": "Deletes the framebuffer from GPU memory.
\nCalling myBuffer.remove() frees the GPU memory used by the framebuffer.\nThe framebuffer also uses a bit of memory on the CPU which can be freed\nlike so:
\n// Delete the framebuffer from GPU memory.\nmyBuffer.remove();\n\n// Delete the framebuffer from CPU memory.\nmyBuffer = undefined;
Note: All variables that reference the framebuffer must be assigned\nthe value undefined to delete the framebuffer from CPU memory. If any\nvariable still refers to the framebuffer, then it won't be garbage\ncollected.
\n",
"example": [
"// Double-click to remove the p5.Framebuffer object.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create an options object.\n let options = { width: 60, height: 60 };\n\n // Create a p5.Framebuffer object and\n // configure it using options.\n myBuffer = createFramebuffer(options);\n\n describe('A white circle at the center of a dark gray square disappears when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Framebuffer object if\n // it's available.\n if (myBuffer) {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(100);\n circle(0, 0, 20);\n myBuffer.end();\n\n image(myBuffer, -30, -30);\n }\n}\n\n// Remove the p5.Framebuffer object when the\n// the user double-clicks.\nfunction doubleClicked() {\n // Delete the framebuffer from GPU memory.\n myBuffer.remove();\n\n // Delete the framebuffer from CPU memory.\n myBuffer = undefined;\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Framebuffer",
"static": false,
"module": "Rendering"
},
{
"name": "begin",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
"line": 764,
"itemtype": "method",
"description": "Begins drawing shapes to the framebuffer.
\nmyBuffer.begin() and myBuffer.end()\nallow shapes to be drawn to the framebuffer. myBuffer.begin() begins\ndrawing to the framebuffer and\nmyBuffer.end() stops drawing to the\nframebuffer. Changes won't be visible until the framebuffer is displayed\nas an image or texture.
\n",
"example": [
"let myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Framebuffer",
"static": false,
"module": "Rendering"
},
{
"name": "end",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
"line": 891,
"itemtype": "method",
"description": "Stops drawing shapes to the framebuffer.
\nmyBuffer.begin() and myBuffer.end()\nallow shapes to be drawn to the framebuffer.\nmyBuffer.begin() begins drawing to\nthe framebuffer and myBuffer.end() stops drawing to the framebuffer.\nChanges won't be visible until the framebuffer is displayed as an image\nor texture.
\n",
"example": [
"let myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Framebuffer",
"static": false,
"module": "Rendering"
},
{
"name": "draw",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
"line": 963,
"itemtype": "method",
"description": "Draws to the framebuffer by calling a function that contains drawing\ninstructions.
\nThe parameter, callback, is a function with the drawing instructions\nfor the framebuffer. For example, calling myBuffer.draw(myFunction)\nwill call a function named myFunction() to draw to the framebuffer.\nDoing so has the same effect as the following:
\nmyBuffer.begin();\nmyFunction();\nmyBuffer.end();
",
"example": [
"// Click the canvas to display the framebuffer.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.draw(bagel);\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}\n\n// Draw a rotating, multicolor torus.\nfunction bagel() {\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n}"
],
"overloads": [
{
"params": [
{
"name": "callback",
"description": "function that draws to the framebuffer.",
"type": "Function"
}
]
}
],
"class": "p5.Framebuffer",
"static": false,
"module": "Rendering"
},
{
"name": "loadPixels",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
"line": 1009,
"itemtype": "method",
"description": "Loads the current value of each pixel in the framebuffer into its\npixels array.
\nmyBuffer.loadPixels() must be called before reading from or writing to\nmyBuffer.pixels.
\n",
"example": [
"function setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Load the pixels array.\n myBuffer.loadPixels();\n\n // Get the number of pixels in the\n // top half of the framebuffer.\n let numPixels = myBuffer.pixels.length / 2;\n\n // Set the framebuffer's top half to pink.\n for (let i = 0; i < numPixels; i += 4) {\n myBuffer.pixels[i] = 255;\n myBuffer.pixels[i + 1] = 102;\n myBuffer.pixels[i + 2] = 204;\n myBuffer.pixels[i + 3] = 255;\n }\n\n // Update the pixels array.\n myBuffer.updatePixels();\n\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, -50, -50);\n\n describe('A pink rectangle above a gray rectangle.');\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Framebuffer",
"static": false,
"module": "Rendering"
},
{
"name": "get",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
"line": 1062,
"itemtype": "method",
"description": "Gets a pixel or a region of pixels from the framebuffer.
\nmyBuffer.get() is easy to use but it's not as fast as\nmyBuffer.pixels. Use\nmyBuffer.pixels to read many pixel\nvalues.
\nThe version of myBuffer.get() with no parameters returns the entire\nframebuffer as a a p5.Image object.
\nThe version of myBuffer.get() with two parameters interprets them as\ncoordinates. It returns an array with the [R, G, B, A] values of the\npixel at the given point.
\nThe version of myBuffer.get() with four parameters interprets them as\ncoordinates and dimensions. It returns a subsection of the framebuffer as\na p5.Image object. The first two parameters are\nthe coordinates for the upper-left corner of the subsection. The last two\nparameters are the width and height of the subsection.
\n",
"example": [],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x-coordinate of the pixel. Defaults to 0.",
"type": "Number"
},
{
"name": "y",
"description": "y-coordinate of the pixel. Defaults to 0.",
"type": "Number"
},
{
"name": "w",
"description": "width of the subsection to be returned.",
"type": "Number"
},
{
"name": "h",
"description": "height of the subsection to be returned.",
"type": "Number"
}
],
"return": {
"description": "subsection as a p5.Image object.",
"type": "p5.Image"
}
},
{
"params": [],
"return": {
"description": "entire framebuffer as a p5.Image object.",
"type": "p5.Image"
}
},
{
"params": [
{
"name": "x",
"description": "",
"type": "Number"
},
{
"name": "y",
"description": "",
"type": "Number"
}
],
"return": {
"description": "color of the pixel at (x, y) as an array of color values [R, G, B, A].",
"type": "Number[]"
}
}
],
"return": {
"description": "subsection as a p5.Image object.",
"type": "p5.Image"
},
"class": "p5.Framebuffer",
"static": false,
"module": "Rendering"
},
{
"name": "perspective",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 185,
"itemtype": "method",
"description": "Sets a perspective projection for the camera.
\nIn a perspective projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes. It’s applied by default in new\np5.Camera objects.
\nmyCamera.perspective() changes the camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.
\nThe first parameter, fovy, is the camera’s vertical field of view. It’s\nan angle that describes how tall or narrow a view the camera has. For\nexample, calling myCamera.perspective(0.5) sets the camera’s vertical\nfield of view to 0.5 radians. By default, fovy is calculated based on the\nsketch’s height and the camera’s default z-coordinate, which is 800. The\nformula for the default fovy is 2 * atan(height / 2 / 800).
\nThe second parameter, aspect, is the camera’s aspect ratio. It’s a number\nthat describes the ratio of the top plane’s width to its height. For\nexample, calling myCamera.perspective(0.5, 1.5) sets the camera’s field\nof view to 0.5 radians and aspect ratio to 1.5, which would make shapes\nappear thinner on a square canvas. By default, aspect is set to\nwidth / height.
\nThe third parameter, near, is the distance from the camera to the near\nplane. For example, calling myCamera.perspective(0.5, 1.5, 100) sets the\ncamera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places\nthe near plane 100 pixels from the camera. Any shapes drawn less than 100\npixels from the camera won’t be visible. By default, near is set to\n0.1 * 800, which is 1/10th the default distance between the camera and\nthe origin.
\nThe fourth parameter, far, is the distance from the camera to the far\nplane. For example, calling myCamera.perspective(0.5, 1.5, 100, 10000)\nsets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5,\nplaces the near plane 100 pixels from the camera, and places the far plane\n10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels\nfrom the camera won’t be visible. By default, far is set to 10 * 800,\nwhich is 10 times the default distance between the camera and the origin.
\n",
"example": [
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right.\n cam2.camera(400, -400, 800);\n\n // Set its fovy to 0.2.\n // Set its aspect to 1.5.\n // Set its near to 600.\n // Set its far to 1200.\n cam2.perspective(0.2, 1.5, 600, 1200);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between a frontal view and a skewed aerial view when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}",
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right.\n cam2.camera(400, -400, 800);\n\n // Set its fovy to 0.2.\n // Set its aspect to 1.5.\n // Set its near to 600.\n // Set its far to 1200.\n cam2.perspective(0.2, 1.5, 600, 1200);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube moves left and right on a gray background. The camera toggles between a frontal and a skewed aerial view when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin left and right.\n let x = 100 * sin(frameCount * 0.01);\n translate(x, 0, 0);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "fovy",
"description": "camera frustum vertical field of view. Defaults to\n2 * atan(height / 2 / 800).",
"optional": 1,
"type": "Number"
},
{
"name": "aspect",
"description": "camera frustum aspect ratio. Defaults to\nwidth / height.",
"optional": 1,
"type": "Number"
},
{
"name": "near",
"description": "distance from the camera to the near clipping plane.\nDefaults to 0.1 * 800.",
"optional": 1,
"type": "Number"
},
{
"name": "far",
"description": "distance from the camera to the far clipping plane.\nDefaults to 10 * 800.",
"optional": 1,
"type": "Number"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "ortho",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 402,
"itemtype": "method",
"description": "Sets an orthographic projection for the camera.
\nIn an orthographic projection, shapes with the same size always appear the\nsame size, regardless of whether they are near or far from the camera.
\nmyCamera.ortho() changes the camera’s perspective by changing its viewing\nfrustum from a truncated pyramid to a rectangular prism. The frustum is the\nvolume of space that’s visible to the camera. The camera is placed in front\nof the frustum and views everything within the frustum. myCamera.ortho()\nhas six optional parameters to define the viewing frustum.
\nThe first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\nmyCamera.ortho(-100, 100, 200, -200) creates a frustum that’s 200 pixels\nwide and 400 pixels tall. By default, these dimensions are set based on\nthe sketch’s width and height, as in\nmyCamera.ortho(-width / 2, width / 2, -height / 2, height / 2).
\nThe last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\nmyCamera.ortho(-100, 100, 200, -200, 50, 1000) creates a frustum that’s\n200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and\nends 1,000 pixels from the camera. By default, near and far are set to\n0 and max(width, height) + 800, respectively.
\n",
"example": [
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Apply an orthographic projection.\n cam2.ortho();\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A row of white cubes against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}",
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Apply an orthographic projection.\n cam2.ortho();\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A row of white cubes slither like a snake against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n push();\n // Calculate the box's coordinates.\n let x = 10 * sin(frameCount * 0.02 + i * 0.6);\n let z = -40 * i;\n // Translate the origin.\n translate(x, 0, z);\n // Draw the box.\n box(10);\n pop();\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "left",
"description": "x-coordinate of the frustum’s left plane. Defaults to -width / 2.",
"optional": 1,
"type": "Number"
},
{
"name": "right",
"description": "x-coordinate of the frustum’s right plane. Defaults to width / 2.",
"optional": 1,
"type": "Number"
},
{
"name": "bottom",
"description": "y-coordinate of the frustum’s bottom plane. Defaults to height / 2.",
"optional": 1,
"type": "Number"
},
{
"name": "top",
"description": "y-coordinate of the frustum’s top plane. Defaults to -height / 2.",
"optional": 1,
"type": "Number"
},
{
"name": "near",
"description": "z-coordinate of the frustum’s near plane. Defaults to 0.",
"optional": 1,
"type": "Number"
},
{
"name": "far",
"description": "z-coordinate of the frustum’s far plane. Defaults to max(width, height) + 800.",
"optional": 1,
"type": "Number"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "frustum",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 531,
"itemtype": "method",
"description": "Sets the camera's frustum.
\nIn a frustum projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes.
\nmyCamera.frustum() changes the camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.
\nThe first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\nmyCamera.frustum(-100, 100, 200, -200) creates a frustum that’s 200\npixels wide and 400 pixels tall. By default, these coordinates are set\nbased on the sketch’s width and height, as in\nmyCamera.frustum(-width / 20, width / 20, height / 20, -height / 20).
\nThe last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\nmyCamera.frustum(-100, 100, 200, -200, 50, 1000) creates a frustum that’s\n200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and ends\n1,000 pixels from the camera. By default, near is set to 0.1 * 800, which\nis 1/10th the default distance between the camera and the origin. far is\nset to 10 * 800, which is 10 times the default distance between the\ncamera and the origin.
\n",
"example": [
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n cam2.frustum(-10, 10, -10, 10, 300, 350);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera zooms in on one cube when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "left",
"description": "x-coordinate of the frustum’s left plane. Defaults to -width / 20.",
"optional": 1,
"type": "Number"
},
{
"name": "right",
"description": "x-coordinate of the frustum’s right plane. Defaults to width / 20.",
"optional": 1,
"type": "Number"
},
{
"name": "bottom",
"description": "y-coordinate of the frustum’s bottom plane. Defaults to height / 20.",
"optional": 1,
"type": "Number"
},
{
"name": "top",
"description": "y-coordinate of the frustum’s top plane. Defaults to -height / 20.",
"optional": 1,
"type": "Number"
},
{
"name": "near",
"description": "z-coordinate of the frustum’s near plane. Defaults to 0.1 * 800.",
"optional": 1,
"type": "Number"
},
{
"name": "far",
"description": "z-coordinate of the frustum’s far plane. Defaults to 10 * 800.",
"optional": 1,
"type": "Number"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "pan",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 750,
"itemtype": "method",
"description": "Rotates the camera left and right.
\nPanning rotates the camera without changing its position. The rotation\nhappens in the camera’s \"local\" space.
\nThe parameter, angle, is the angle the camera should rotate. Passing a\npositive angle, as in myCamera.pan(0.001), rotates the camera to the\nright. Passing a negative angle, as in myCamera.pan(-0.001), rotates the\ncamera to the left.
\nNote: Angles are interpreted based on the current\nangleMode().
\n",
"example": [
"let cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Pan with the camera.\n cam.pan(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}"
],
"overloads": [
{
"params": [
{
"name": "angle",
"description": "amount to rotate in the current\nangleMode().",
"type": "Number"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "tilt",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 811,
"itemtype": "method",
"description": "Rotates the camera up and down.
\nTilting rotates the camera without changing its position. The rotation\nhappens in the camera’s \"local\" space.
\nThe parameter, angle, is the angle the camera should rotate. Passing a\npositive angle, as in myCamera.tilt(0.001), rotates the camera down.\nPassing a negative angle, as in myCamera.tilt(-0.001), rotates the camera\nup.
\nNote: Angles are interpreted based on the current\nangleMode().
\n",
"example": [
"let cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera tilts up and down.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Pan with the camera.\n cam.tilt(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}"
],
"overloads": [
{
"params": [
{
"name": "angle",
"description": "amount to rotate in the current\nangleMode().",
"type": "Number"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "lookAt",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 893,
"itemtype": "method",
"description": "Points the camera at a location.
\nmyCamera.lookAt() changes the camera’s orientation without changing its\nposition.
\nThe parameters, x, y, and z, are the coordinates in \"world\" space\nwhere the camera should point. For example, calling\nmyCamera.lookAt(10, 20, 30) points the camera at the coordinates\n(10, 20, 30).
\n",
"example": [
"// Double-click to look at a different cube.\n\nlet cam;\nlet isLookingLeft = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(-30, 0, 0);\n\n describe(\n 'A red cube and a blue cube on a gray background. The camera switches focus between the cubes when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box on the left.\n push();\n // Translate the origin to the left.\n translate(-30, 0, 0);\n // Style the box.\n fill(255, 0, 0);\n // Draw the box.\n box(20);\n pop();\n\n // Draw the box on the right.\n push();\n // Translate the origin to the right.\n translate(30, 0, 0);\n // Style the box.\n fill(0, 0, 255);\n // Draw the box.\n box(20);\n pop();\n}\n\n// Change the camera's focus when the user double-clicks.\nfunction doubleClicked() {\n if (isLookingLeft === true) {\n cam.lookAt(30, 0, 0);\n isLookingLeft = false;\n } else {\n cam.lookAt(-30, 0, 0);\n isLookingLeft = true;\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x-coordinate of the position where the camera should look in \"world\" space.",
"type": "Number"
},
{
"name": "y",
"description": "y-coordinate of the position where the camera should look in \"world\" space.",
"type": "Number"
},
{
"name": "z",
"description": "z-coordinate of the position where the camera should look in \"world\" space.",
"type": "Number"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "camera",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 1068,
"itemtype": "method",
"description": "Sets the position and orientation of the camera.
\nmyCamera.camera() allows objects to be viewed from different angles. It\nhas nine parameters that are all optional.
\nThe first three parameters, x, y, and z, are the coordinates of the\ncamera’s position in \"world\" space. For example, calling\nmyCamera.camera(0, 0, 0) places the camera at the origin (0, 0, 0). By\ndefault, the camera is placed at (0, 0, 800).
\nThe next three parameters, centerX, centerY, and centerZ are the\ncoordinates of the point where the camera faces in \"world\" space. For\nexample, calling myCamera.camera(0, 0, 0, 10, 20, 30) places the camera\nat the origin (0, 0, 0) and points it at (10, 20, 30). By default, the\ncamera points at the origin (0, 0, 0).
\nThe last three parameters, upX, upY, and upZ are the components of\nthe \"up\" vector in \"local\" space. The \"up\" vector orients the camera’s\ny-axis. For example, calling\nmyCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0) places the camera at the\norigin (0, 0, 0), points it at (10, 20, 30), and sets the \"up\" vector\nto (0, -1, 0) which is like holding it upside-down. By default, the \"up\"\nvector is (0, 1, 0).
\n",
"example": [
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right: (1200, -600, 100)\n // Point it at the row of boxes: (-10, -10, 400)\n // Set its \"up\" vector to the default: (0, 1, 0)\n cam2.camera(1200, -600, 100, -10, -10, 400, 0, 1, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a frontal and an aerial view when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}",
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the right: (1200, 0, 100)\n // Point it at the row of boxes: (-10, -10, 400)\n // Set its \"up\" vector to the default: (0, 1, 0)\n cam2.camera(1200, 0, 100, -10, -10, 400, 0, 1, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a static frontal view and an orbiting view when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's position.\n let x = 1200 * cos(frameCount * 0.01);\n let y = -600 * sin(frameCount * 0.01);\n cam2.camera(x, y, 100, -10, -10, 400, 0, 1, 0);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x-coordinate of the camera. Defaults to 0.",
"optional": 1,
"type": "Number"
},
{
"name": "y",
"description": "y-coordinate of the camera. Defaults to 0.",
"optional": 1,
"type": "Number"
},
{
"name": "z",
"description": "z-coordinate of the camera. Defaults to 800.",
"optional": 1,
"type": "Number"
},
{
"name": "centerX",
"description": "x-coordinate of the point the camera faces. Defaults to 0.",
"optional": 1,
"type": "Number"
},
{
"name": "centerY",
"description": "y-coordinate of the point the camera faces. Defaults to 0.",
"optional": 1,
"type": "Number"
},
{
"name": "centerZ",
"description": "z-coordinate of the point the camera faces. Defaults to 0.",
"optional": 1,
"type": "Number"
},
{
"name": "upX",
"description": "x-component of the camera’s \"up\" vector. Defaults to 0.",
"optional": 1,
"type": "Number"
},
{
"name": "upY",
"description": "x-component of the camera’s \"up\" vector. Defaults to 1.",
"optional": 1,
"type": "Number"
},
{
"name": "upZ",
"description": "z-component of the camera’s \"up\" vector. Defaults to 0.",
"optional": 1,
"type": "Number"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "move",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 1203,
"itemtype": "method",
"description": "Moves the camera along its \"local\" axes without changing its orientation.
\nThe parameters, x, y, and z, are the distances the camera should\nmove. For example, calling myCamera.move(10, 20, 30) moves the camera 10\npixels to the right, 20 pixels down, and 30 pixels backward in its \"local\"\nspace.
\n",
"example": [
"// Click the canvas to begin detecting key presses.\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam.lookAt(0, 0, 0);\n\n // Set the camera.\n setCamera(cam);\n\n describe(\n 'A white cube drawn against a gray background. The cube appears to move when the user presses certain keys.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Move the camera along its \"local\" axes\n // when the user presses certain keys.\n\n // Move horizontally.\n if (keyIsDown(LEFT_ARROW)) {\n cam.move(-1, 0, 0);\n }\n if (keyIsDown(RIGHT_ARROW)) {\n cam.move(1, 0, 0);\n }\n\n // Move vertically.\n if (keyIsDown(UP_ARROW)) {\n cam.move(0, -1, 0);\n }\n if (keyIsDown(DOWN_ARROW)) {\n cam.move(0, 1, 0);\n }\n\n // Move in/out of the screen.\n if (keyIsDown('i')) {\n cam.move(0, 0, -1);\n }\n if (keyIsDown('o')) {\n cam.move(0, 0, 1);\n }\n\n // Draw the box.\n box();\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "distance to move along the camera’s \"local\" x-axis.",
"type": "Number"
},
{
"name": "y",
"description": "distance to move along the camera’s \"local\" y-axis.",
"type": "Number"
},
{
"name": "z",
"description": "distance to move along the camera’s \"local\" z-axis.",
"type": "Number"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "setPosition",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 1353,
"itemtype": "method",
"description": "Sets the camera’s position in \"world\" space without changing its\norientation.
\nThe parameters, x, y, and z, are the coordinates where the camera\nshould be placed. For example, calling myCamera.setPosition(10, 20, 30)\nplaces the camera at coordinates (10, 20, 30) in \"world\" space.
\n",
"example": [
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it closer to the origin.\n cam2.setPosition(0, 0, 600);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles the amount of zoom when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}",
"// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it closer to the origin.\n cam2.setPosition(0, 0, 600);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a static view and a view that zooms in and out when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's z-coordinate.\n let z = 100 * sin(frameCount * 0.01) + 700;\n cam2.setPosition(0, 0, z);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}"
],
"overloads": [
{
"params": [
{
"name": "x",
"description": "x-coordinate in \"world\" space.",
"type": "Number"
},
{
"name": "y",
"description": "y-coordinate in \"world\" space.",
"type": "Number"
},
{
"name": "z",
"description": "z-coordinate in \"world\" space.",
"type": "Number"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "set",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 1427,
"itemtype": "method",
"description": "Sets the camera’s position, orientation, and projection by copying another\ncamera.
\nThe parameter, cam, is the p5.Camera object to copy. For example, calling\ncam2.set(cam1) will set cam2 using cam1’s configuration.
\n",
"example": [
"// Double-click to \"reset\" the camera zoom.\n\nlet cam1;\nlet cam2;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n cam1 = createCamera();\n\n // Place the camera at the top-right.\n cam1.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam1.lookAt(0, 0, 0);\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Copy cam1's configuration.\n cam2.set(cam1);\n\n // Set the camera.\n setCamera(cam2);\n\n describe(\n 'A white cube drawn against a gray background. The camera slowly moves forward. The camera resets when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's position.\n cam2.move(0, 0, -1);\n\n // Draw the box.\n box();\n}\n\n// \"Reset\" the camera when the user double-clicks.\nfunction doubleClicked() {\n cam2.set(cam1);\n}"
],
"overloads": [
{
"params": [
{
"name": "cam",
"description": "camera to copy.",
"type": "p5.Camera"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "slerp",
"file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
"line": 1521,
"itemtype": "method",
"description": "Sets the camera’s position and orientation to values that are in-between\nthose of two other cameras.
\nmyCamera.slerp() uses spherical linear interpolation to calculate a\nposition and orientation that’s in-between two other cameras. Doing so is\nhelpful for transitioning smoothly between two perspectives.
\nThe first two parameters, cam0 and cam1, are the p5.Camera objects\nthat should be used to set the current camera.
\nThe third parameter, amt, is the amount to interpolate between cam0 and\ncam1. 0.0 keeps the camera’s position and orientation equal to cam0’s,\n0.5 sets them halfway between cam0’s and cam1’s , and 1.0 sets the\nposition and orientation equal to cam1’s.
\nFor example, calling myCamera.slerp(cam0, cam1, 0.1) sets cam’s position\nand orientation very close to cam0’s. Calling\nmyCamera.slerp(cam0, cam1, 0.9) sets cam’s position and orientation very\nclose to cam1’s.
\nNote: All of the cameras must use the same projection.
\n",
"example": [
"let cam;\nlet cam0;\nlet cam1;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the main camera.\n // Keep its default settings.\n cam = createCamera();\n\n // Create the first camera.\n // Keep its default settings.\n cam0 = createCamera();\n\n // Create the second camera.\n cam1 = createCamera();\n\n // Place it at the top-right.\n cam1.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam1.lookAt(0, 0, 0);\n\n // Set the current camera to cam.\n setCamera(cam);\n\n describe('A white cube drawn against a gray background. The camera slowly oscillates between a frontal view and an aerial view.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the amount to interpolate between cam0 and cam1.\n let amt = 0.5 * sin(frameCount * 0.01) + 0.5;\n\n // Update the main camera's position and orientation.\n cam.slerp(cam0, cam1, amt);\n\n box();\n}"
],
"overloads": [
{
"params": [
{
"name": "cam0",
"description": "first camera.",
"type": "p5.Camera"
},
{
"name": "cam1",
"description": "second camera.",
"type": "p5.Camera"
},
{
"name": "amt",
"description": "amount of interpolation between 0.0 (cam0) and 1.0 (cam1).",
"type": "Number"
}
]
}
],
"class": "p5.Camera",
"static": false,
"module": "3D",
"submodule": "Camera"
},
{
"name": "reset",
"file": "src/scripts/parsers/in/p5.js/src/core/p5.Graphics.js",
"line": 232,
"itemtype": "method",
"description": "Resets the graphics buffer's transformations and lighting.
\nBy default, the main canvas resets certain transformation and lighting\nvalues each time draw() executes. p5.Graphics\nobjects must reset these values manually by calling myGraphics.reset().
\n",
"example": [
"let pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n describe('A white circle moves downward slowly within a dark square. The circle resets at the top of the dark square when the user presses the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the p5.Graphics object's coordinate system.\n // The translation accumulates; the white circle moves.\n pg.translate(0, 0.1);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(30, 0, 10);\n\n // Display the p5.Graphics object.\n image(pg, 20, 20);\n\n // Translate the main canvas' coordinate system.\n // The translation doesn't accumulate; the dark\n // square is always in the same place.\n translate(0, 0.1);\n\n // Reset the p5.Graphics object when the\n // user presses the mouse.\n if (mouseIsPressed === true) {\n pg.reset();\n }\n}",
"let pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n describe('A white circle at the center of a dark gray square. The image is drawn on a light gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the p5.Graphics object's coordinate system.\n pg.translate(30, 30);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(0, 0, 10);\n\n // Display the p5.Graphics object.\n image(pg, 20, 20);\n\n // Reset the p5.Graphics object automatically.\n pg.reset();\n}",
"let pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n describe(\"A sphere lit from above with a red light. The sphere's surface becomes glossy while the user clicks and holds the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Add a red point light from the top-right.\n pg.pointLight(255, 0, 0, 50, -100, 50);\n\n // Style the sphere.\n // It should appear glossy when the\n // lighting values are reset.\n pg.noStroke();\n pg.specularMaterial(255);\n pg.shininess(100);\n\n // Draw the sphere.\n pg.sphere(30);\n\n // Display the p5.Graphics object.\n image(pg, -50, -50);\n\n // Reset the p5.Graphics object when\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n pg.reset();\n }\n}",
"let pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n describe('A sphere with a glossy surface is lit from the top-right by a red light.');\n}\n\nfunction draw() {\n background(200);\n\n // Add a red point light from the top-right.\n pg.pointLight(255, 0, 0, 50, -100, 50);\n\n // Style the sphere.\n pg.noStroke();\n pg.specularMaterial(255);\n pg.shininess(100);\n\n // Draw the sphere.\n pg.sphere(30);\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n\n // Reset the p5.Graphics object automatically.\n pg.reset();\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Graphics",
"static": false,
"module": "Rendering",
"submodule": "Rendering"
},
{
"name": "remove",
"file": "src/scripts/parsers/in/p5.js/src/core/p5.Graphics.js",
"line": 295,
"itemtype": "method",
"description": "Removes the graphics buffer from the web page.
\nCalling myGraphics.remove() removes the graphics buffer's\n
\n// Remove the graphics buffer from the web page.\nmyGraphics.remove();\n\n// Delete the graphics buffer from CPU memory.\nmyGraphics = undefined;
Note: All variables that reference the graphics buffer must be assigned\nthe value undefined to delete the graphics buffer from CPU memory. If any\nvariable still refers to the graphics buffer, then it won't be garbage\ncollected.
\n",
"example": [
"// Double-click to remove the p5.Graphics object.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(30, 30, 20);\n\n describe('A white circle at the center of a dark gray square disappears when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Graphics object if\n // it's available.\n if (pg) {\n image(pg, 20, 20);\n }\n}\n\n// Remove the p5.Graphics object when the\n// the user double-clicks.\nfunction doubleClicked() {\n // Remove the p5.Graphics object from the web page.\n pg.remove();\n pg = undefined;\n}"
],
"overloads": [
{
"params": []
}
],
"class": "p5.Graphics",
"static": false,
"module": "Rendering",
"submodule": "Rendering"
},
{
"name": "createFramebuffer",
"file": "src/scripts/parsers/in/p5.js/src/core/p5.Graphics.js",
"line": 544,
"itemtype": "method",
"description": "Creates a new p5.Framebuffer object with\nthe same WebGL context as the graphics buffer.
\np5.Framebuffer objects are separate drawing\nsurfaces that can be used as textures in WebGL mode. They're similar to\np5.Graphics objects and generally run much\nfaster when used as textures. Creating a\np5.Framebuffer object in the same context\nas the graphics buffer makes this speedup possible.
\nThe parameter, options, is optional. An object can be passed to configure\nthe p5.Framebuffer object. The available\nproperties are:
\nformat: data format of the texture, either UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. Default is UNSIGNED_BYTE.channels: whether to store RGB or RGBA color channels. Default is to match the graphics buffer which is RGBA.depth: whether to include a depth buffer. Default is true.depthFormat: data format of depth information, either UNSIGNED_INT or FLOAT. Default is FLOAT.stencil: whether to include a stencil buffer for masking. depth must be true for this feature to work. Defaults to the value of depth which is true.antialias: whether to perform anti-aliasing. If set to true, as in { antialias: true }, 2 samples will be used by default. The number of samples can also be set, as in { antialias: 4 }. Default is to match setAttributes() which is false (true in Safari).width: width of the p5.Framebuffer object. Default is to always match the graphics buffer width.height: height of the p5.Framebuffer object. Default is to always match the graphics buffer height.density: pixel density of the p5.Framebuffer object. Default is to always match the graphics buffer pixel density.textureFiltering: how to read values from the p5.Framebuffer object. Either LINEAR (nearby pixels will be interpolated) or NEAREST (no interpolation). Generally, use LINEAR when using the texture as an image and NEAREST if reading the texture as data. Default is LINEAR.
If the width, height, or density attributes are set, they won't\nautomatically match the graphics buffer and must be changed manually.
\n",
"example": [
"// Click and hold a mouse button to change shapes.\n\nlet pg;\nlet torusLayer;\nlet boxLayer;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n torusLayer = pg.createFramebuffer();\n boxLayer = pg.createFramebuffer();\n\n describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.');\n}\n\nfunction draw() {\n // Update and draw the layers offscreen.\n drawTorus();\n drawBox();\n\n // Choose the layer to display.\n let layer;\n if (mouseIsPressed === true) {\n layer = boxLayer;\n } else {\n layer = torusLayer;\n }\n\n // Draw to the p5.Graphics object.\n pg.background(50);\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the layer to the p5.Graphics object\n pg.image(layer, x, y, 25, 25);\n }\n }\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n}\n\n// Update and draw the torus layer offscreen.\nfunction drawTorus() {\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the torus.\n pg.noStroke();\n\n // Draw the torus.\n pg.torus(20);\n\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.end();\n}\n\n// Update and draw the box layer offscreen.\nfunction drawBox() {\n // Start drawing to the box p5.Framebuffer.\n boxLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the box.\n pg.noStroke();\n\n // Draw the box.\n pg.box(30);\n\n // Start drawing to the box p5.Framebuffer.\n boxLayer.end();\n}",
"// Click and hold a mouse button to change shapes.\n\nlet pg;\nlet torusLayer;\nlet boxLayer;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an options object.\n let options = { width: 25, height: 25 };\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n // Use options for configuration.\n torusLayer = pg.createFramebuffer(options);\n boxLayer = pg.createFramebuffer(options);\n\n describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.');\n}\n\nfunction draw() {\n // Update and draw the layers offscreen.\n drawTorus();\n drawBox();\n\n // Choose the layer to display.\n let layer;\n if (mouseIsPressed === true) {\n layer = boxLayer;\n } else {\n layer = torusLayer;\n }\n\n // Draw to the p5.Graphics object.\n pg.background(50);\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the layer to the p5.Graphics object\n pg.image(layer, x, y);\n }\n }\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n}\n\n// Update and draw the torus layer offscreen.\nfunction drawTorus() {\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the torus.\n pg.noStroke();\n\n // Draw the torus.\n pg.torus(5, 2.5);\n\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.end();\n}\n\n// Update and draw the box layer offscreen.\nfunction drawBox() {\n // Start drawing to the box p5.Framebuffer.\n boxLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the box.\n pg.noStroke();\n\n // Draw the box.\n pg.box(7.5);\n\n // Start drawing to the box p5.Framebuffer.\n boxLayer.end();\n}"
],
"overloads": [
{
"params": [
{
"name": "options",
"description": "configuration options.",
"optional": 1,
"type": "Object"
}
],
"return": {
"description": "new framebuffer.",
"type": "p5.Framebuffer"
}
}
],
"return": {
"description": "new framebuffer.",
"type": "p5.Framebuffer"
},
"class": "p5.Graphics",
"static": false,
"module": "Rendering",
"submodule": "Rendering"
},
{
"file": "src/analysis/Amplitude.js",
"line": 55,
"description": "Connect an audio source to the amplitude object.",
"itemtype": "method",
"name": "setInput",
"params": [
{
"name": "input",
"description": "- An object that has audio output.",
"type": "Object"
}
],
"class": "p5.Amplitude",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/analysis/Amplitude.js",
"line": 65,
"description": "Get the current amplitude value of a sound.",
"itemtype": "method",
"name": "getLevel",
"return": {
"description": "Amplitude level (volume) of a sound.",
"type": "Number"
},
"class": "p5.Amplitude",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/analysis/Amplitude.js",
"line": 75,
"description": "Get the current amplitude value of a sound.",
"itemtype": "method",
"name": "smooth",
"params": [
{
"name": "Smooth",
"description": "Amplitude analysis by averaging with the last analysis frame. Off by default.",
"type": "Number"
}
],
"class": "p5.Amplitude",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/analysis/FFT.js",
"line": 82,
"description": "Returns the frequency spectrum of the input signal.",
"itemtype": "method",
"name": "analyze",
"return": {
"description": "Array of amplitude values from 0 to 1.",
"type": "Array"
},
"class": "p5.FFT",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/analysis/FFT.js",
"line": 92,
"description": "Returns an array of sample values from the input audio.",
"itemtype": "method",
"name": "waveform",
"return": {
"description": "Array of sample values from -1 to -1.",
"type": "Array"
},
"class": "p5.FFT",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/core/Utils.js",
"line": 14,
"description": "Get the window's audio context.",
"itemtype": "method",
"name": "getAudioContext",
"return": {
"description": "the audio context",
"type": "AudioContext"
},
"class": "p5",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/core/Utils.js",
"line": 30,
"description": "Sets the AudioContext to a specified context to enable cross library compatibility.",
"itemtype": "method",
"name": "setAudioContext",
"params": [
{
"name": "the",
"description": "desired AudioContext.",
"type": "AudioContext"
}
],
"class": "p5",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/core/Utils.js",
"line": 39,
"description": "userStartAudio() starts the AudioContext on a user gesture. It can be placed in a specific interaction function, such as mousePressed().",
"itemtype": "method",
"name": "userStartAudio",
"class": "p5",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/core/Utils.js",
"line": 47,
"description": "userStopAudio() stops the AudioContext on a user gesture.",
"itemtype": "method",
"name": "userStopAudio",
"class": "p5",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/core/p5soundMixEffect.js",
"line": 21,
"description": "Set the wet/dry mix of the effect.",
"itemtype": "method",
"name": "wet",
"params": [
{
"name": "amount",
"description": "Between 0 (dry) and 1 (wet)",
"type": "Number"
}
],
"example": [
"\n\n\nlet osc, del\n\nfunction setup() {\n cnv = createCanvas(100, 100);\n background(220);\n osc = new p5.Oscillator();\n osc.disconnect();\n del = new p5.Delay();\n osc.connect(del);\n del.delayTime(0.25);\n del.feedback(0.5);\n del.wet(0.5);\n}\n\nfunction mousePressed() {\n osc.start();\n}\n\nfunction draw() {\n del.delayTime(map(mouseX, 0, width, 0.01, 0.5));\n del.wet(map(mouseY, 0, height, 0.1, 0.9));\n background(220);\n textAlign(CENTER);\n textSize(9);\n text('delay dry/wet: ' + del.wet().toFixed(2), width / 2, height / 2);\n}\n\n
"
],
"class": "p5.p5soundMixEffect",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/core/p5soundNode.js",
"line": 19,
"description": "Adjust the amplitude of the p5 sound node.",
"itemtype": "method",
"name": "amp",
"params": [
{
"name": "amplitude",
"description": "Set the amplitude between 0 and 1.0. Or, pass in an object such as an oscillator to modulate amplitude with an audio signal.",
"type": "Number"
}
],
"example": [
"\n\n\nlet osc, lfo;\nlet cnv;\n\nfunction setup() {\n describe(\"a sketch that demonstrates amplitude modulation with an LFO and sine tone\");\n cnv = createCanvas(100, 100);\n cnv.mousePressed(startSound);\n textAlign(CENTER);\n textWrap(WORD);\n textSize(10);\n \n osc = new p5.Oscillator('sine');\n lfo = new p5.Oscillator(1);\n lfo.disconnect();\n osc.amp(lfo);\n}\n\nfunction startSound() {\n lfo.start();\n osc.start();\n}\n\nfunction draw(){\n background(220);\n text('click to play sound', 0, height/2 - 20, 100);\n text('control lfo with mouseX position', 0, height/2, 100);\n\n let freq = map(mouseX, 0, width, 0, 10);\n lfo.freq(freq);\n}\n\n
"
],
"class": "p5.p5soundNode",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/core/p5soundSource.js",
"line": 19,
"description": "Starts the p5 sound source.",
"itemtype": "method",
"name": "start",
"class": "p5.p5soundSource",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/core/p5soundSource.js",
"line": 28,
"description": "Stops the p5 sound source.",
"itemtype": "method",
"name": "stop",
"class": "p5.p5soundSource",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Biquad.js",
"line": 81,
"description": "The filter's resonance factor.",
"itemtype": "method",
"name": "res",
"params": [
{
"name": "resonance",
"description": "resonance of the filter. A number between 0 and 100. Values closer to 100 can cause the filter to self-oscillate and become loud!",
"type": "Number"
}
],
"class": "p5.Biquad",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Biquad.js",
"line": 91,
"description": "The gain of the filter in dB units.",
"itemtype": "method",
"name": "gain",
"params": [
{
"name": "gain",
"description": "gain value in dB units. The gain is only used for lowshelf, highshelf, and peaking filters.",
"type": "Number"
}
],
"class": "p5.Biquad",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Biquad.js",
"line": 101,
"description": "Set the type of the filter.",
"itemtype": "method",
"name": "setType",
"params": [
{
"name": "type",
"description": "type of the filter. Options: \"lowpass\", \"highpass\", \"bandpass\", \"lowshelf\", \"highshelf\", \"notch\", \"allpass\", and \"peaking.\"",
"type": "String"
}
],
"class": "p5.Biquad",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Biquad.js",
"line": 111,
"description": "Set the cutoff frequency of the filter.",
"itemtype": "method",
"name": "freq",
"params": [
{
"name": "cutoffFrequency",
"description": "the cutoff frequency of the filter.",
"type": "Number"
}
],
"class": "p5.Biquad",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Delay.js",
"line": 57,
"description": "Set the delay time in seconds.",
"itemtype": "method",
"name": "delayTime",
"params": [
{
"name": "delayTime",
"description": "The delay time in seconds.",
"type": "Number"
},
{
"name": "rampTime",
"description": "The time in seconds it takes to ramp to the new delay time. \n By default it is 0.1 seconds. Setting it to 0 will change \n the delay time immediately and demonstrate legacy behavior.",
"type": "Number",
"optional": true
}
],
"example": [
"\n\n
\nlet osc, delay, env;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(9);\n text('click and drag mouse', width/2, height/2);\n\n osc = new p5.Oscillator('sawtooth');\n osc.amp(0.74);\n env = new p5.Envelope(0.01);\n delay = new p5.Delay(0.12, 0.7);\n \n osc.disconnect();\n osc.connect(env);\n env.disconnect();\n env.connect(delay);\n\n cnv.mousePressed(oscStart);\n cnv.mouseReleased(oscStop);\n cnv.mouseOut(oscStop);\n describe('Tap to play a square wave with delay effect.');\n}\n\nfunction oscStart() {\n background(0, 255, 255);\n text('release to hear delay', width/2, height/2);\n osc.start();\n env.triggerAttack();\n}\n\nfunction oscStop() {\n background(220);\n text('click and drag mouse', width/2, height/2);\n env.triggerRelease();\n} \n \nfunction draw() {\n \n let dtime = map(mouseX, 0, width, 0.1, 0.5);\n delay.delayTime(dtime);\n}"
],
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Delay.js",
"line": 122,
"description": "The amount of feedback in the delay line.",
"itemtype": "method",
"name": "feedback",
"params": [
{
"name": "feedbackAmount",
"description": "A number between 0 and 0.99.",
"type": "Number"
}
],
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Delay.js",
"line": 132,
"description": "Process an input signal with a delay effect.",
"itemtype": "method",
"name": "process",
"params": [
{
"name": "unit",
"description": "A p5.sound source such as an Oscillator, Soundfile, or AudioIn object.",
"type": "Object"
},
{
"name": "delayTime",
"description": "The amount of delay in seconds. A number between 0 and 1.",
"type": "Number"
},
{
"name": "feedback",
"description": "The amount of feedback. A number between 0 and 1.",
"type": "Number"
}
],
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Envelope.js",
"line": 43,
"description": "Trigger the envelope and release it after the sustain time.",
"itemtype": "method",
"name": "play",
"class": "p5.Envelope",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Envelope.js",
"line": 52,
"description": "Trigger the Attack, and Decay portion of the Envelope. Similar to holding\ndown a key on a piano, but it will hold the sustain level until you let go.",
"itemtype": "method",
"name": "triggerAttack",
"example": [
"\n\n\nlet osc, env;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n cnv.mousePressed(playSound);\n cnv.mouseReleased(stopSound);\n textAlign(CENTER);\n textSize(10);\n text('tap to triggerAttack', width/2, height/2);\n\n osc = new p5.Oscillator();\n osc.disconnect();\n env = new p5.Envelope();\n osc.connect(env);\n}\n\nfunction playSound() {\n background(0, 255, 255);\n text('release to release', width/2, height/2);\n osc.start();\n env.attackTime(random(0.00, 0.25));\n env.triggerAttack(0.5);\n}\n\nfunction stopSound() {\n background(220);\n text('tap to triggerAttack', width/2, height/2);\n env.releaseTime(random(0.1, 0.3));\n env.triggerRelease();\n}\n\n
"
],
"class": "p5.Envelope",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Envelope.js",
"line": 98,
"description": "Trigger the Release of the envelope. Similar to releasing the key on \na piano and letting the sound fade according to the release level and \nrelease time.",
"itemtype": "method",
"name": "triggerRelease",
"example": [
"\n\n\nlet osc, env;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n cnv.mousePressed(playSound);\n cnv.mouseReleased(stopSound);\n textAlign(CENTER);\n textSize(10);\n text('tap to triggerAttack', width/2, height/2);\n\n osc = new p5.Oscillator();\n osc.disconnect();\n env = new p5.Envelope();\n osc.connect(env);\n}\n\nfunction playSound() {\n background(0, 255, 255);\n text('release to release', width/2, height/2);\n osc.start();\n env.attackTime(random(0.00, 0.25));\n env.triggerAttack(0.5);\n}\n\nfunction stopSound() {\n background(220);\n text('tap to triggerAttack', width/2, height/2);\n env.releaseTime(random(0.1, 0.3));\n env.triggerRelease();\n}\n\n
"
],
"class": "p5.Envelope",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Envelope.js",
"line": 145,
"itemtype": "method",
"name": "setInput",
"params": [
{
"name": "unit",
"description": "A p5.sound Object",
"type": "Object"
}
],
"class": "p5.Envelope",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Envelope.js",
"line": 154,
"description": "Sets the attack, decay, sustain, and release times of the envelope.",
"itemtype": "method",
"name": "setADSR",
"params": [
{
"name": "attack",
"description": "how quickly the envelope reaches the maximum level",
"type": "Number"
},
{
"name": "decay",
"description": "how quickly the envelope reaches the sustain level",
"type": "Number"
},
{
"name": "sustain",
"description": "how long the envelope stays at the decay level",
"type": "Number"
},
{
"name": "release",
"description": "how quickly the envelope fades out after the sustain level",
"type": "Number"
}
],
"class": "p5.Envelope",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Envelope.js",
"line": 170,
"description": "Sets the release time of the envelope.",
"itemtype": "method",
"name": "releaseTime",
"params": [
{
"name": "releaseTime",
"description": "the release time in seconds",
"type": "Number"
}
],
"class": "p5.Envelope",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Envelope.js",
"line": 180,
"description": "Sets the attack time of the envelope.",
"itemtype": "method",
"name": "attackTime",
"params": [
{
"name": "attackTime",
"description": "the attack time in seconds",
"type": "Number"
}
],
"class": "p5.Envelope",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Panner.js",
"line": 55,
"description": "Pan a sound source left or right.",
"itemtype": "method",
"name": "pan",
"params": [
{
"name": "panAmount",
"description": "Sets the pan position of the sound source. Can be a value between -1 and 1 or an audio rate signal such as an LFO.",
"type": "Number, Object"
}
],
"class": "p5.Panner",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Panner3D.js",
"line": 118,
"description": "Connects an input source to the 3D panner.",
"itemtype": "method",
"name": "process",
"params": [
{
"name": "input",
"description": "an input source to process with the 3D panner.",
"type": "Object"
}
],
"class": "p5.Panner3D",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Panner3D.js",
"line": 128,
"description": "Set the x, y, and z position of the 3D panner.",
"itemtype": "method",
"name": "set",
"params": [
{
"name": "xPosition",
"description": "the x coordinate of the panner.",
"type": "Number"
},
{
"name": "yPosition",
"description": "the y coordinate of the panner.",
"type": "Number"
},
{
"name": "zPosition",
"description": "the z coordinate of the panner.",
"type": "Number"
}
],
"class": "p5.Panner3D",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Panner3D.js",
"line": 142,
"description": "The rolloff rate of the panner.",
"itemtype": "method",
"name": "setFalloff",
"params": [
{
"name": "rolloffFactor",
"description": "",
"type": "Number"
},
{
"name": "maxDistance",
"description": "",
"type": "Number"
}
],
"class": "p5.Panner3D",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Panner3D.js",
"line": 154,
"description": "Set the maximum distance of the panner.",
"itemtype": "method",
"name": "maxDist",
"params": [
{
"name": "distance",
"description": "the maximum distance that the sound source can be heard from.",
"type": "Number"
}
],
"class": "p5.Panner3D",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Panner3D.js",
"line": 164,
"description": "Set the rolloff rate of the panner.",
"itemtype": "method",
"name": "rolloff",
"params": [
{
"name": "r",
"description": "the rolloff rate of the panner.",
"type": "Number"
}
],
"class": "p5.Panner3D",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Panner3D.js",
"line": 174,
"description": "Set the X position of the sound source.",
"itemtype": "method",
"name": "positionX",
"params": [
{
"name": "positionX",
"description": "the x position of the sound source.",
"type": "Number"
}
],
"class": "p5.Panner3D",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Panner3D.js",
"line": 184,
"description": "Set the Y position of the sound source.",
"itemtype": "method",
"name": "positionY",
"params": [
{
"name": "positionY",
"description": "the y position of the sound source.",
"type": "Number"
}
],
"class": "p5.Panner3D",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Panner3D.js",
"line": 194,
"description": "Set the Z position of the sound source.",
"itemtype": "method",
"name": "positionZ",
"params": [
{
"name": "positionZ",
"description": "the z position of the sound source.",
"type": "Number"
}
],
"class": "p5.Panner3D",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/PitchShifter.js",
"line": 57,
"description": "Shift the pitch of the source audio.",
"itemtype": "method",
"name": "shift",
"params": [
{
"name": "pitchValue",
"description": "amount of semitones to shift the pitch",
"type": "Number"
}
],
"class": "p5.PitchShifter",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/effects/Reverb.js",
"line": 58,
"description": "Set the decay time of the reverb.",
"itemtype": "method",
"name": "set",
"params": [
{
"name": "time",
"description": "Decay time of the reverb in seconds.",
"type": "Number"
}
],
"class": "p5.Reverb",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/sources/AudioIn.js",
"line": 57,
"description": "Start the audio input.",
"itemtype": "method",
"name": "start",
"class": "p5.AudioIn",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/sources/AudioIn.js",
"line": 73,
"description": "Stop the audio input.",
"itemtype": "method",
"name": "stop",
"class": "p5.AudioIn",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/sources/Noise.js",
"line": 58,
"itemtype": "method",
"name": "type",
"params": [
{
"name": "type",
"description": "- the type of noise (white, pink, brown)",
"type": "String"
}
],
"class": "p5.Noise",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/sources/Oscillator.js",
"line": 84,
"description": "Adjusts the frequency of the oscillator.",
"itemtype": "method",
"name": "freq",
"params": [
{
"name": "frequency",
"description": "frequency of the oscillator in Hz (cycles per second).",
"type": "Number"
},
{
"name": "rampTime",
"description": "the time in seconds it takes to ramp to the new frequency (defaults to 0).",
"type": "Number",
"optional": true
}
],
"class": "p5.Oscillator",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/sources/Oscillator.js",
"line": 95,
"description": "Adjusts the phase of the oscillator.",
"itemtype": "method",
"name": "phase",
"params": [
{
"name": "phase",
"description": "phase of the oscillator in degrees (0-360).",
"type": "Number"
}
],
"class": "p5.Oscillator",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/sources/Oscillator.js",
"line": 105,
"description": "Sets the type of the oscillator.",
"itemtype": "method",
"name": "setType",
"params": [
{
"name": "type",
"description": "type of the oscillator. Options:\n 'sine' (default), 'triangle',\n 'sawtooth', 'square'",
"type": "String"
}
],
"class": "p5.Oscillator",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "src/sources/SoundFile.js",
"line": 11,
"description": "loadSound() returns a new SoundFile from a specified\npath. If called during preload(), the SoundFile will be ready\nto play in time for setup() and draw(). If called outside of\npreload, the SoundFile will not be ready immediately, so\nloadSound accepts a callback as the second parameter. Using a\n\nlocal server is recommended when loading external files.",
"itemtype": "method",
"name": "loadSound",
"params": [
{
"name": "path",
"description": "Path to the sound file, or an array with\n paths to soundfiles in multiple formats\n i.e. ['sound.ogg', 'sound.mp3'].\n Alternately, accepts an object: either\n from the HTML5 File API, or a p5.File.",
"type": "String|Array"
}
],
"return": {
"description": "Returns a SoundFile",
"type": "SoundFile"
},
"example": [
"\n\nlet mySound;\nfunction preload() {\n mySound = loadSound('/assets/doorbell.mp3');\n}\n\n function setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap here to play', 10, 20);\n }\n\n function canvasPressed() {\n // playing a sound file on a user gesture\n // is equivalent to `userStartAudio()`\n mySound.play();\n }\n
"
],
"class": "p5",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 125,
"description": "Start the soundfile.",
"itemtype": "method",
"name": "start",
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 138,
"description": "Start the soundfile.",
"itemtype": "method",
"name": "play",
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 151,
"description": "Stop the soundfile.",
"itemtype": "method",
"name": "stop",
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 161,
"description": "Pause the soundfile.",
"itemtype": "method",
"name": "pause",
"example": [
"\n\n\nlet player;\n\nfunction preload() {\n player = loadSound('/assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n describe('A sketch that pauses and resumes sound file playback.');\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n textAlign(CENTER);\n textWrap(WORD);\n textSize(10);\n background(220);\n text('click to play', 0, 20, 100);\n \n player.loop();\n}\n\nfunction playSound() {\n if (!player.isPlaying()) {\n player.play();\n background(220);\n text('click to pause', 0, 20, 100);\n }\n else {\n player.pause();\n background(220);\n text('click to play', 0, 20, 100);\n }\n}\n\n
"
],
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 210,
"description": "Loop the soundfile.",
"itemtype": "method",
"name": "loop",
"params": [
{
"name": "loopState",
"description": "Set to True or False in order to set the loop state.",
"type": "Boolean"
}
],
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 220,
"description": "Set a loop region. The loop() method must be set to true for this to work.",
"itemtype": "method",
"name": "setLoop",
"params": [
{
"name": "startTime",
"description": "The start time of the loop point in seconds.",
"type": "Number",
"optional": true
},
{
"name": "duration",
"description": "The duration of the loop point in seconds.",
"type": "Number",
"optional": true
}
],
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 232,
"description": "Change the path for the soundfile.",
"itemtype": "method",
"name": "setPath",
"params": [
{
"name": "path",
"description": "Path to the sound file.",
"type": "String"
},
{
"name": "successCallback",
"description": "Function to call when the sound file is loaded.",
"type": "Function",
"optional": true
}
],
"example": [
"\n\n\nlet soundSource, cnv, btn;\n\nfunction preload() {\n soundSource = loadSound('/assets/Damscray_-_Dancing_Tiger_01.mp3');\n}\n\nfunction setup() {\n describe(\n 'a sketch that says click to play sound. there is a button that says load sound. when you click the button, the path of the sound file player changes and the new sound plays.');\n cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n textAlign(CENTER);\n textWrap(WORD);\n textSize(10);\n text('click to play sound or the button to load a new sound', 0, 20, 100);\n btn = createButton('New Sound');\n btn.mousePressed(setNewPath);\n soundSource.loop(); \n}\n\nfunction playSound() {\n soundSource.play();\n}\n\nfunction setNewPath() {\n background(220);\n text('a new sound was loaded', 0, 20, 100);\n soundSource.setPath('/assets/Damscray_-_Dancing_Tiger_02.mp3', playSound); \n}\n\n
"
],
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 287,
"description": "Set the playback rate of the soundfile.",
"itemtype": "method",
"name": "rate",
"params": [
{
"name": "rate",
"description": "1 is normal speed, 2 is double speed. Negative values plays the soundfile backwards.",
"type": "Number"
}
],
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 302,
"description": "Returns the duration of a sound file in seconds.",
"itemtype": "method",
"name": "duration",
"return": {
"description": "duration",
"type": "Number"
},
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 312,
"description": "Return the sample rate of the sound file.",
"itemtype": "method",
"name": "sampleRate",
"return": {
"description": "sampleRate",
"type": "Number"
},
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 322,
"description": "Move the playhead of a soundfile that is currently playing to a new position.",
"itemtype": "method",
"name": "jump",
"params": [
{
"name": "timePoint",
"description": "Time to jump to in seconds.",
"type": "Number"
}
],
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 332,
"description": "Return the playback state of the soundfile.",
"itemtype": "method",
"name": "isPlaying",
"return": {
"description": "Playback state, true or false.",
"type": "Boolean"
},
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 342,
"description": "Return the playback state of the soundfile.",
"itemtype": "method",
"name": "isLooping",
"return": {
"description": "Looping State, true or false.",
"type": "Boolean"
},
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 352,
"description": "Define a function to call when the soundfile is done playing.",
"itemtype": "method",
"name": "onended",
"params": [
{
"name": "callback",
"description": "Name of a function that will be called when the soundfile is done playing.",
"type": "Function"
}
],
"example": [
"\n\n\nlet player;\n\nfunction preload() {\n player = loadSound('/assets/lucky_dragons_-_power_melody.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(10);\n text('click to play', width/2, height/2);\n cnv.mousePressed(playSound);\n player.onended(coolFunction);\n}\n\nfunction coolFunction() {\n background(220);\n text('sound is done', width/2, height/2);\n}\n\nfunction playSound() {\n background(0, 255, 255);\n text('sound is playing', width/2, height/2);\n if (!player.isPlaying()) {\n player.play();\n }\n}\n\n
"
],
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 395,
"description": "Return the number of samples in a sound file.",
"itemtype": "method",
"name": "frames",
"return": {
"description": "The number of samples in the sound file.",
"type": "Number"
},
"example": [
"\n\n\nlet player;\n\nfunction preload() {\n player = loadSound('/assets/lucky_dragons_-_power_melody.mp3');\n}\n\nfunction setup() {\n describe('A sketch that calculates and displays the length of a sound file using number of samples and sample rate.');\n createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textWrap(WORD);\n textSize(10);\n frames = player.frames();\n sampleRate = player.sampleRate();\n sampleLength = round((frames / sampleRate), 2);\n info = `sample is ${sampleLength} seconds long`;\n text(info, 0, 20, 100);\n}\n\n
"
],
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
},
{
"file": "src/sources/SoundFile.js",
"line": 429,
"description": "Gets the number of channels in the sound file.",
"itemtype": "method",
"name": "channels",
"return": {
"description": "Returns the number of channels in the sound file."
},
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "SoundFile"
}
],
"consts": {
"let": [],
"if": [],
"function": [],
"Boolean": [],
"String": [],
"Number": [],
"Object": [],
"async_await": [],
"Array": [],
"class": [],
"for": [],
"while": [],
"console": [],
"VIDEO": [],
"VERSION": [],
"RGB": [],
"AUDIO": [],
"RGBHDR": [],
"P2D": [],
"HSB": [],
"deviceOrientation": [],
"accelerationX": [],
"accelerationY": [],
"movedX": [],
"accelerationZ": [],
"pAccelerationX": [],
"pAccelerationY": [],
"movedY": [],
"pAccelerationZ": [],
"keyIsPressed": [],
"frameCount": [],
"rotationX": [],
"deltaTime": [],
"rotationY": [],
"key": [],
"focused": [],
"mouseX": [],
"rotationZ": [],
"pRotationX": [],
"pRotationY": [],
"mouseY": [],
"pRotationZ": [],
"pmouseX": [],
"code": [],
"turnAxis": [],
"pmouseY": [],
"winMouseX": [],
"keyCode": [],
"winMouseY": [],
"webglVersion": [],
"pwinMouseX": [],
"displayWidth": [],
"displayHeight": [],
"pwinMouseY": [],
"windowWidth": [],
"windowHeight": [],
"mouseButton": [],
"touches": [],
"mouseIsPressed": [],
"HSL": [],
"P2DHDR": [],
"HWB": [],
"DEGREES": [],
"LAB": [],
"LCH": [],
"OKLAB": [],
"WEBGL": [],
"OKLCH": [],
"WEBGL2": [],
"RGBA": [],
"WEBGPU": [],
"ARROW": [],
"RADIANS": [],
"SIMPLE": [],
"FULL": [],
"CROSS": [],
"HAND": [],
"MOVE": [],
"TEXT": [],
"WAIT": [],
"file": [],
"type": [],
"subtype": [],
"name": [],
"size": [],
"data": [],
"worldInputs": [],
"combineColors": [],
"pixelInputs": [],
"finalColor": [],
"filterColor": [],
"objectInputs": [],
"cameraInputs": [],
"HALF_PI": [],
"PI": [],
"QUARTER_PI": [],
"TAU": [],
"TWO_PI": [],
"DEG_TO_RAD": [],
"RAD_TO_DEG": [],
"CORNER": [],
"CORNERS": [],
"RADIUS": [],
"RIGHT": [],
"LEFT": [],
"CENTER": [],
"TOP": [],
"BOTTOM": [],
"drawingContext": [],
"BASELINE": [],
"POINTS": [],
"LINES": [],
"LINE_STRIP": [],
"LINE_LOOP": [],
"TRIANGLES": [],
"disableFriendlyErrors": [],
"TRIANGLE_FAN": [],
"TRIANGLE_STRIP": [],
"QUADS": [],
"QUAD_STRIP": [],
"TESS": [],
"EMPTY_PATH": [],
"PATH": [],
"CLOSE": [],
"OPEN": [],
"CHORD": [],
"PIE": [],
"PROJECT": [],
"SQUARE": [],
"ROUND": [],
"BEVEL": [],
"MITER": [],
"AUTO": [],
"ALT": [],
"BACKSPACE": [],
"CONTROL": [],
"DELETE": [],
"DOWN_ARROW": [],
"ENTER": [],
"ESCAPE": [],
"LEFT_ARROW": [],
"OPTION": [],
"RETURN": [],
"RIGHT_ARROW": [],
"SHIFT": [],
"TAB": [],
"UP_ARROW": [],
"BLEND": [],
"REMOVE": [],
"ADD": [],
"DARKEST": [],
"LIGHTEST": [],
"DIFFERENCE": [],
"SUBTRACT": [],
"EXCLUSION": [],
"MULTIPLY": [],
"pixels": [],
"SCREEN": [],
"REPLACE": [],
"OVERLAY": [],
"HARD_LIGHT": [],
"SOFT_LIGHT": [],
"DODGE": [],
"BURN": [],
"THRESHOLD": [],
"GRAY": [],
"OPAQUE": [],
"INVERT": [],
"POSTERIZE": [],
"DILATE": [],
"ERODE": [],
"BLUR": [],
"NORMAL": [],
"ITALIC": [],
"BOLD": [],
"BOLDITALIC": [],
"CHAR": [],
"WORD": [],
"LINEAR": [],
"QUADRATIC": [],
"BEZIER": [],
"CURVE": [],
"STROKE": [],
"FILL": [],
"TEXTURE": [],
"IMMEDIATE": [],
"IMAGE": [],
"NEAREST": [],
"REPEAT": [],
"CLAMP": [],
"MIRROR": [],
"FLAT": [],
"SMOOTH": [],
"LANDSCAPE": [],
"PORTRAIT": [],
"GRID": [],
"AXES": [],
"LABEL": [],
"FALLBACK": [],
"color": [],
"depth": [],
"width": [],
"height": [],
"CONTAIN": [],
"COVER": [],
"UNSIGNED_BYTE": [],
"UNSIGNED_INT": [],
"FLOAT": [],
"HALF_FLOAT": [],
"INCLUDE": [],
"EXCLUDE": [],
"columns": [],
"rows": [],
"src": [],
"vertices": [],
"vertexNormals": [],
"faces": [],
"uvs": [],
"gid": [],
"elt": [],
"eyeX": [],
"eyeY": [],
"eyeZ": [],
"centerX": [],
"centerY": [],
"centerZ": [],
"upX": [],
"upY": [],
"upZ": [],
"x": [],
"y": [],
"z": []
}
}![](\"assets/transformation-matrix.png\"\nalt=\"The){kind=spacer}
![](\"assets/transformation-matrix-4-4.png\"\nalt=\"The){kind=spacer}