var refData = {
"project": {
"name": "p5",
"description": "",
"version": "0.4.23",
"url": ""
},
"files": {
"src/3d/3d_primitives.js": {
"name": "src/3d/3d_primitives.js",
"modules": {
"3D Primitives": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/3d/camera.js": {
"name": "src/3d/camera.js",
"modules": {
"Camera": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/3d/light.js": {
"name": "src/3d/light.js",
"modules": {
"Lights": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/3d/material.js": {
"name": "src/3d/material.js",
"modules": {
"Material": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/3d/p5.Geometry3D.js": {
"name": "src/3d/p5.Geometry3D.js",
"modules": {},
"classes": {},
"fors": {},
"namespaces": {}
},
"src/3d/p5.Matrix.js": {
"name": "src/3d/p5.Matrix.js",
"modules": {},
"classes": {},
"fors": {},
"namespaces": {}
},
"src/3d/p5.Renderer3D.js": {
"name": "src/3d/p5.Renderer3D.js",
"modules": {},
"classes": {},
"fors": {},
"namespaces": {}
},
"src/3d/retainedMode3D.js": {
"name": "src/3d/retainedMode3D.js",
"modules": {},
"classes": {},
"fors": {},
"namespaces": {}
},
"src/color/color_conversion.js": {
"name": "src/color/color_conversion.js",
"modules": {},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/color/creating_reading.js": {
"name": "src/color/creating_reading.js",
"modules": {
"Creating & Reading": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/color/p5.Color.js": {
"name": "src/color/p5.Color.js",
"modules": {},
"classes": {
"p5.Color": 1
},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/color/setting.js": {
"name": "src/color/setting.js",
"modules": {
"Setting": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/2d_primitives.js": {
"name": "src/core/2d_primitives.js",
"modules": {
"2D Primitives": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/attributes.js": {
"name": "src/core/attributes.js",
"modules": {
"Attributes": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/canvas.js": {
"name": "src/core/canvas.js",
"modules": {},
"classes": {},
"fors": {},
"namespaces": {}
},
"src/core/constants.js": {
"name": "src/core/constants.js",
"modules": {
"Constants": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/core.js": {
"name": "src/core/core.js",
"modules": {
"Structure": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/curves.js": {
"name": "src/core/curves.js",
"modules": {
"Curves": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/environment.js": {
"name": "src/core/environment.js",
"modules": {
"Environment": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/error_helpers.js": {
"name": "src/core/error_helpers.js",
"modules": {},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/p5.Element.js": {
"name": "src/core/p5.Element.js",
"modules": {
"DOM": 1
},
"classes": {
"p5.Element": 1
},
"fors": {
"p5.Element": 1
},
"namespaces": {}
},
"src/core/p5.Graphics.js": {
"name": "src/core/p5.Graphics.js",
"modules": {
"Rendering": 1
},
"classes": {
"p5.Graphics": 1
},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/p5.Renderer.js": {
"name": "src/core/p5.Renderer.js",
"modules": {},
"classes": {
"p5.Renderer": 1
},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/p5.Renderer2D.js": {
"name": "src/core/p5.Renderer2D.js",
"modules": {},
"classes": {},
"fors": {},
"namespaces": {}
},
"src/core/rendering.js": {
"name": "src/core/rendering.js",
"modules": {},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/shim.js": {
"name": "src/core/shim.js",
"modules": {},
"classes": {},
"fors": {},
"namespaces": {}
},
"src/core/structure.js": {
"name": "src/core/structure.js",
"modules": {},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/transform.js": {
"name": "src/core/transform.js",
"modules": {
"Transform": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/core/vertex.js": {
"name": "src/core/vertex.js",
"modules": {
"Vertex": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/events/acceleration.js": {
"name": "src/events/acceleration.js",
"modules": {
"Acceleration": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/events/keyboard.js": {
"name": "src/events/keyboard.js",
"modules": {
"Keyboard": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/events/mouse.js": {
"name": "src/events/mouse.js",
"modules": {
"Mouse": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/events/touch.js": {
"name": "src/events/touch.js",
"modules": {
"Touch": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/image/filters.js": {
"name": "src/image/filters.js",
"modules": {},
"classes": {},
"fors": {},
"namespaces": {}
},
"src/image/image.js": {
"name": "src/image/image.js",
"modules": {
"Image": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/image/loading_displaying.js": {
"name": "src/image/loading_displaying.js",
"modules": {
"Loading & Displaying": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/image/p5.Image.js": {
"name": "src/image/p5.Image.js",
"modules": {},
"classes": {
"p5.Image": 1
},
"fors": {},
"namespaces": {}
},
"src/image/pixels.js": {
"name": "src/image/pixels.js",
"modules": {
"Pixels": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/io/files.js": {
"name": "src/io/files.js",
"modules": {
"Input": 1,
"Output": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/io/p5.Table.js": {
"name": "src/io/p5.Table.js",
"modules": {
"Table": 1
},
"classes": {
"p5.Table": 1
},
"fors": {},
"namespaces": {}
},
"src/io/p5.TableRow.js": {
"name": "src/io/p5.TableRow.js",
"modules": {},
"classes": {
"p5.TableRow": 1
},
"fors": {},
"namespaces": {}
},
"src/math/calculation.js": {
"name": "src/math/calculation.js",
"modules": {
"Calculation": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/math/math.js": {
"name": "src/math/math.js",
"modules": {
"Math": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/math/noise.js": {
"name": "src/math/noise.js",
"modules": {
"Noise": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/math/p5.Vector.js": {
"name": "src/math/p5.Vector.js",
"modules": {},
"classes": {
"p5.Vector": 1
},
"fors": {},
"namespaces": {}
},
"src/math/random.js": {
"name": "src/math/random.js",
"modules": {
"Random": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/math/trigonometry.js": {
"name": "src/math/trigonometry.js",
"modules": {
"Trigonometry": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/typography/attributes.js": {
"name": "src/typography/attributes.js",
"modules": {},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/typography/loading_displaying.js": {
"name": "src/typography/loading_displaying.js",
"modules": {},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/typography/p5.Font.js": {
"name": "src/typography/p5.Font.js",
"modules": {
"Font": 1
},
"classes": {
"p5.Font": 1
},
"fors": {},
"namespaces": {}
},
"src/utilities/array_functions.js": {
"name": "src/utilities/array_functions.js",
"modules": {
"Array Functions": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/utilities/conversion.js": {
"name": "src/utilities/conversion.js",
"modules": {
"Conversion": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/utilities/string_functions.js": {
"name": "src/utilities/string_functions.js",
"modules": {
"String Functions": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/utilities/time_date.js": {
"name": "src/utilities/time_date.js",
"modules": {
"Time & Date": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"src/app.js": {
"name": "src/app.js",
"modules": {},
"classes": {},
"fors": {},
"namespaces": {}
},
"lib/addons/p5.dom.js": {
"name": "lib/addons/p5.dom.js",
"modules": {
"p5.dom": 1
},
"classes": {
"p5.MediaElement": 1,
"p5.File": 1
},
"fors": {
"p5.dom": 1,
"p5.Element": 1
},
"namespaces": {}
},
"lib/addons/p5.sound.js": {
"name": "lib/addons/p5.sound.js",
"modules": {
"p5.sound": 1
},
"classes": {
"p5.SoundFile": 1,
"p5.Amplitude": 1,
"p5.FFT": 1,
"p5.Signal": 1,
"p5.Oscillator": 1,
"p5.Env": 1,
"p5.Pulse": 1,
"p5.Noise": 1,
"p5.AudioIn": 1,
"p5.Filter": 1,
"p5.Delay": 1,
"p5.Reverb": 1,
"p5.Convolver": 1,
"p5.Phrase": 1,
"p5.Part": 1,
"p5.Score": 1,
"p5.SoundRecorder": 1,
"p5.PeakDetect": 1,
"p5.Gain": 1
},
"fors": {
"p5.sound": 1
},
"namespaces": {}
}
},
"modules": {
"Shape": {
"name": "Shape",
"submodules": {
"2D Primitives": 1,
"Curves": 1,
"Vertex": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"3D Primitives": {
"name": "3D Primitives",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "IO",
"namespace": "",
"file": "src/3d/3d_primitives.js",
"line": 1,
"requires": [
"core",
"p5.Geometry3D"
]
},
"Lights, Camera": {
"name": "Lights, Camera",
"submodules": {
"Camera": 1,
"Lights": 1,
"Material": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"Camera": {
"name": "Camera",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Lights, Camera",
"namespace": "",
"file": "src/3d/camera.js",
"line": 1,
"requires": [
"core"
]
},
"Lights": {
"name": "Lights",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Lights, Camera",
"namespace": "",
"file": "src/3d/light.js",
"line": 1,
"requires": [
"core"
]
},
"Material": {
"name": "Material",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Lights, Camera",
"namespace": "",
"file": "src/3d/material.js",
"line": 1,
"requires": [
"core"
]
},
"Color": {
"name": "Color",
"submodules": {
"Creating & Reading": 1,
"Setting": 1
},
"classes": {
"p5.Color": 1
},
"fors": {
"p5": 1
},
"namespaces": {},
"file": "src/color/p5.Color.js",
"line": 14
},
"Creating & Reading": {
"name": "Creating & Reading",
"submodules": {},
"classes": {
"p5.Color": 1
},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Color",
"namespace": "",
"file": "src/color/p5.Color.js",
"line": 14,
"requires": [
"core",
"constants"
],
"description": "We define colors to be immutable objects. Each color stores the color mode\nand level maxes that applied at the time of its construction. These are\nused to interpret the input arguments and to format the output e.g. when\nsaturation() is requested.\n\nInternally we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.\n\nWe also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed."
},
"Setting": {
"name": "Setting",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Color",
"namespace": "",
"file": "src/color/setting.js",
"line": 1,
"requires": [
"core",
"constants"
]
},
"2D Primitives": {
"name": "2D Primitives",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Shape",
"namespace": "",
"file": "src/core/2d_primitives.js",
"line": 1,
"requires": [
"core",
"constants"
]
},
"Attributes": {
"name": "Attributes",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Typography",
"namespace": "",
"file": "src/core/attributes.js",
"line": 1,
"requires": [
"core",
"constants"
]
},
"Constants": {
"name": "Constants",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {},
"module": "Constants",
"file": "src/core/constants.js",
"line": 1
},
"Structure": {
"name": "Structure",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {},
"module": "Structure",
"file": "src/core/core.js",
"line": 1,
"requires": [
"constants"
]
},
"Curves": {
"name": "Curves",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Shape",
"namespace": "",
"file": "src/core/curves.js",
"line": 1,
"requires": [
"core"
]
},
"Environment": {
"name": "Environment",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {},
"module": "Environment",
"file": "src/core/environment.js",
"line": 1,
"requires": [
"core",
"constants"
]
},
"DOM": {
"name": "DOM",
"submodules": {},
"classes": {
"p5.Element": 1
},
"fors": {
"p5.Element": 1
},
"namespaces": {},
"module": "DOM",
"file": "src/core/p5.Element.js",
"line": 9,
"description": "Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. Methods in blue are\nincluded in the core functionality, methods in brown are added\nwith the p5.dom library.\nIt is not called directly, but p5.Element\nobjects are created by calling createCanvas, createGraphics,\nor in the p5.dom library, createDiv, createImg, createInput, etc."
},
"Rendering": {
"name": "Rendering",
"submodules": {},
"classes": {
"p5.Graphics": 1,
"p5.Renderer": 1
},
"fors": {
"p5": 1
},
"namespaces": {},
"module": "Rendering",
"file": "src/core/p5.Renderer.js",
"line": 10,
"description": "Thin wrapper around a renderer, to be used for creating a\ngraphics buffer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels. The fields and methods for this class are\nextensive, but mirror the normal drawing API for p5."
},
"Transform": {
"name": "Transform",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {},
"module": "Transform",
"file": "src/core/transform.js",
"line": 1,
"requires": [
"core",
"constants"
]
},
"Vertex": {
"name": "Vertex",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Shape",
"namespace": "",
"file": "src/core/vertex.js",
"line": 1,
"requires": [
"core",
"constants"
]
},
"Events": {
"name": "Events",
"submodules": {
"Acceleration": 1,
"Keyboard": 1,
"Mouse": 1,
"Touch": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"Acceleration": {
"name": "Acceleration",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Events",
"namespace": "",
"file": "src/events/acceleration.js",
"line": 1,
"requires": [
"core"
]
},
"Keyboard": {
"name": "Keyboard",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Events",
"namespace": "",
"file": "src/events/keyboard.js",
"line": 1,
"requires": [
"core"
]
},
"Mouse": {
"name": "Mouse",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Events",
"namespace": "",
"file": "src/events/mouse.js",
"line": 1,
"requires": [
"core",
"constants"
]
},
"Touch": {
"name": "Touch",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Events",
"namespace": "",
"file": "src/events/touch.js",
"line": 1,
"requires": [
"core"
]
},
"Image": {
"name": "Image",
"submodules": {
"Pixels": 1
},
"classes": {
"p5.Image": 1
},
"fors": {
"p5": 1
},
"namespaces": {},
"module": "Image",
"file": "src/image/p5.Image.js",
"line": 23,
"requires": [
"core"
],
"description": "Creates a new p5.Image. A p5.Image is a canvas backed representation of an\nimage.\n
\np5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\nloadImage() function. The p5.Image class contains fields for the width and\nheight of the image, as well as an array called pixels[] that contains the\nvalues for every pixel in the image.\n
\nThe methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.\n
\nBefore using the pixels[] array, be sure to use the loadPixels() method on\nthe image to make sure that the pixel data is properly loaded."
},
"Loading & Displaying": {
"name": "Loading & Displaying",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Typography",
"namespace": "",
"file": "src/image/loading_displaying.js",
"line": 1,
"requires": [
"core"
]
},
"Pixels": {
"name": "Pixels",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Image",
"namespace": "",
"file": "src/image/pixels.js",
"line": 1,
"requires": [
"core"
]
},
"IO": {
"name": "IO",
"submodules": {
"3D Primitives": 1,
"Input": 1,
"Output": 1,
"Table": 1
},
"classes": {
"p5": 1,
"p5.Table": 1,
"p5.TableRow": 1
},
"fors": {
"p5": 1
},
"namespaces": {},
"file": "src/io/p5.TableRow.js",
"line": 11
},
"Input": {
"name": "Input",
"submodules": {
"Time & Date": 1
},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "IO",
"namespace": "",
"file": "src/io/files.js",
"line": 1,
"requires": [
"core",
"reqwest"
]
},
"Output": {
"name": "Output",
"submodules": {},
"classes": {
"p5": 1
},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "IO",
"namespace": "",
"file": "src/io/files.js",
"line": 869
},
"Table": {
"name": "Table",
"submodules": {},
"classes": {
"p5.Table": 1,
"p5.TableRow": 1
},
"fors": {},
"is_submodule": 1,
"namespaces": {},
"module": "IO",
"namespace": "",
"file": "src/io/p5.TableRow.js",
"line": 11,
"requires": [
"core"
],
"description": "Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file."
},
"Math": {
"name": "Math",
"submodules": {
"Calculation": 1,
"Noise": 1,
"Random": 1,
"Trigonometry": 1
},
"classes": {
"p5.Vector": 1
},
"fors": {
"p5": 1
},
"namespaces": {},
"module": "Math",
"file": "src/math/p5.Vector.js",
"line": 13,
"requires": [
"core"
],
"description": "A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods mag() and heading().\n
\nIn many of the p5.js examples, you will see p5.Vector used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).\n
\nSince vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the p5.Vector class."
},
"Calculation": {
"name": "Calculation",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Math",
"namespace": "",
"file": "src/math/calculation.js",
"line": 1,
"requires": [
"core"
]
},
"Noise": {
"name": "Noise",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Math",
"namespace": "",
"file": "src/math/noise.js",
"line": 14,
"requires": [
"core"
]
},
"Random": {
"name": "Random",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Math",
"namespace": "",
"file": "src/math/random.js",
"line": 1,
"requires": [
"core"
]
},
"Trigonometry": {
"name": "Trigonometry",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Math",
"namespace": "",
"file": "src/math/trigonometry.js",
"line": 1,
"requires": [
"core",
"polargeometry",
"constants"
]
},
"Typography": {
"name": "Typography",
"submodules": {
"Attributes": 1,
"Loading & Displaying": 1,
"Font": 1
},
"classes": {
"p5.Font": 1
},
"fors": {
"p5": 1
},
"namespaces": {},
"file": "src/typography/p5.Font.js",
"line": 32
},
"Font": {
"name": "Font",
"submodules": {},
"classes": {
"p5.Font": 1
},
"fors": {},
"is_submodule": 1,
"namespaces": {},
"module": "Typography",
"namespace": "",
"file": "src/typography/p5.Font.js",
"line": 32,
"description": "This module defines the p5.Font class and functions for\ndrawing text to the display canvas.",
"requires": [
"core",
"constants"
]
},
"Data": {
"name": "Data",
"submodules": {
"Array Functions": 1,
"Conversion": 1,
"String Functions": 1
},
"classes": {},
"fors": {
"p5": 1
},
"namespaces": {}
},
"Array Functions": {
"name": "Array Functions",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Data",
"namespace": "",
"file": "src/utilities/array_functions.js",
"line": 1,
"requires": [
"core"
]
},
"Conversion": {
"name": "Conversion",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Data",
"namespace": "",
"file": "src/utilities/conversion.js",
"line": 1,
"requires": [
"core"
]
},
"String Functions": {
"name": "String Functions",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Data",
"namespace": "",
"file": "src/utilities/string_functions.js",
"line": 1,
"requires": [
"core"
]
},
"Time & Date": {
"name": "Time & Date",
"submodules": {},
"classes": {},
"fors": {
"p5": 1
},
"is_submodule": 1,
"namespaces": {},
"module": "Input",
"namespace": "",
"file": "src/utilities/time_date.js",
"line": 1,
"requires": [
"core"
]
},
"p5.dom": {
"name": "p5.dom",
"submodules": {},
"classes": {
"p5.dom": 1,
"p5.MediaElement": 1,
"p5.File": 1
},
"fors": {
"p5.dom": 1,
"p5.Element": 1
},
"namespaces": {},
"module": "p5.dom",
"file": "lib/addons/p5.dom.js",
"line": 1979,
"description": "
The web is much more than just canvas and p5.dom makes it easy to interact\nwith other HTML5 objects, including text, hyperlink, image, input, video,\naudio, and webcam.
\nThere is a set of creation methods, DOM manipulation methods, and\nan extended p5.Element that supports a range of HTML elements. See the\n\nbeyond the canvas tutorial for a full overview of how this addon works.\n\n
Methods and properties shown in black are part of the p5.js core, items in\nblue are part of the p5.dom library. You will need to include an extra file\nin order to access the blue functions. See the\nusing a library\nsection for information on how to include this library. p5.dom comes with\np5 complete or you can download the single file\n\nhere.
\nSee tutorial: beyond the canvas\nfor more info on how to use this libary.",
"tag": "main",
"itemtype": "main"
},
"p5.sound": {
"name": "p5.sound",
"submodules": {},
"classes": {
"p5.sound": 1,
"p5.SoundFile": 1,
"p5.Amplitude": 1,
"p5.FFT": 1,
"p5.Signal": 1,
"p5.Oscillator": 1,
"p5.Env": 1,
"p5.Pulse": 1,
"p5.Noise": 1,
"p5.AudioIn": 1,
"p5.Filter": 1,
"p5.Delay": 1,
"p5.Reverb": 1,
"p5.Convolver": 1,
"p5.Phrase": 1,
"p5.Part": 1,
"p5.Score": 1,
"p5.SoundRecorder": 1,
"p5.PeakDetect": 1,
"p5.Gain": 1
},
"fors": {
"p5.sound": 1
},
"namespaces": {},
"module": "p5.sound",
"file": "lib/addons/p5.sound.js",
"line": 8897,
"description": "p5.sound extends p5 with Web Audio functionality including audio input,\nplayback, analysis and synthesis.\n
\np5.SoundFile: Load and play sound files.
\np5.Amplitude: Get the current volume of a sound.
\np5.AudioIn: Get sound from an input source, typically\n a computer microphone.
\np5.FFT: Analyze the frequency of sound. Returns\n results from the frequency spectrum or time domain (waveform).
\np5.Oscillator: Generate Sine,\n Triangle, Square and Sawtooth waveforms. Base class of\n p5.Noise and p5.Pulse.\n
\np5.Env: An Envelope is a series\n of fades over time. Often used to control an object's\n output gain level as an \"ADSR Envelope\" (Attack, Decay,\n Sustain, Release). Can also modulate other parameters.
\np5.Delay: A delay effect with\n parameters for feedback, delayTime, and lowpass filter.
\np5.Filter: Filter the frequency range of a\n sound.\n
\np5.Reverb: Add reverb to a sound by specifying\n duration and decay.
\np5.Convolver: Extends\np5.Reverb to simulate the sound of real\n physical spaces through convolution.
\np5.SoundRecorder: Record sound for playback \n / save the .wav file.\np5.Phrase, p5.Part and\np5.Score: Compose musical sequences.\n
\np5.sound is on GitHub.\nDownload the latest version \nhere.",
"tag": "main",
"itemtype": "main"
}
},
"classes": {
"p5": {
"name": "p5",
"shortname": "p5",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "IO",
"submodule": "Output",
"namespace": ""
},
"p5.Color": {
"name": "p5.Color",
"shortname": "p5.Color",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Color",
"submodule": "Creating & Reading",
"namespace": "",
"file": "src/color/p5.Color.js",
"line": 14,
"description": "We define colors to be immutable objects. Each color stores the color mode\nand level maxes that applied at the time of its construction. These are\nused to interpret the input arguments and to format the output e.g. when\nsaturation() is requested.\n\nInternally we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.\n\nWe also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.",
"is_constructor": 1
},
"p5.Element": {
"name": "p5.Element",
"shortname": "p5.Element",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "DOM",
"submodule": "DOM",
"namespace": "",
"file": "src/core/p5.Element.js",
"line": 9,
"description": "Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. Methods in blue are\nincluded in the core functionality, methods in brown are added\nwith the p5.dom library.\nIt is not called directly, but p5.Element\nobjects are created by calling createCanvas, createGraphics,\nor in the p5.dom library, createDiv, createImg, createInput, etc.",
"is_constructor": 1,
"params": [
{
"name": "elt",
"description": "DOM node that is wrapped",
"type": "String"
},
{
"name": "pInst",
"description": "pointer to p5 instance",
"type": "Object",
"optional": true
}
]
},
"p5.Graphics": {
"name": "p5.Graphics",
"shortname": "p5.Graphics",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Rendering",
"submodule": "Rendering",
"namespace": "",
"file": "src/core/p5.Graphics.js",
"line": 10,
"description": "Thin wrapper around a renderer, to be used for creating a\ngraphics buffer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels. The fields and methods for this class are\nextensive, but mirror the normal drawing API for p5.",
"is_constructor": 1,
"extends": "p5.Element",
"params": [
{
"name": "elt",
"description": "DOM node that is wrapped",
"type": "String"
},
{
"name": "pInst",
"description": "pointer to p5 instance",
"type": "Object",
"optional": true
},
{
"name": "whether",
"description": "we're using it as main canvas",
"type": "Boolean"
}
]
},
"p5.Renderer": {
"name": "p5.Renderer",
"shortname": "p5.Renderer",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Rendering",
"submodule": "Rendering",
"namespace": "",
"file": "src/core/p5.Renderer.js",
"line": 10,
"description": "Main graphics and rendering context, as well as the base API\nimplementation for p5.js \"core\". To be used as the superclass for\nRenderer2D and Renderer3D classes, respecitvely.",
"is_constructor": 1,
"extends": "p5.Element",
"params": [
{
"name": "elt",
"description": "DOM node that is wrapped",
"type": "String"
},
{
"name": "pInst",
"description": "pointer to p5 instance",
"type": "Object",
"optional": true
},
{
"name": "whether",
"description": "we're using it as main canvas",
"type": "Boolean"
}
]
},
"p5.Image": {
"name": "p5.Image",
"shortname": "p5.Image",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Image",
"submodule": "Image",
"namespace": "",
"file": "src/image/p5.Image.js",
"line": 23,
"description": "Creates a new p5.Image. A p5.Image is a canvas backed representation of an\nimage.\n
\np5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\nloadImage() function. The p5.Image class contains fields for the width and\nheight of the image, as well as an array called pixels[] that contains the\nvalues for every pixel in the image.\n
\nThe methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.\n
\nBefore using the pixels[] array, be sure to use the loadPixels() method on\nthe image to make sure that the pixel data is properly loaded.",
"is_constructor": 1,
"params": [
{
"name": "width",
"description": "",
"type": "Number"
},
{
"name": "height",
"description": "",
"type": "Number"
},
{
"name": "pInst",
"description": "An instance of a p5 sketch.",
"type": "Object"
}
]
},
"p5.Table": {
"name": "p5.Table",
"shortname": "p5.Table",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "IO",
"submodule": "Table",
"namespace": "",
"file": "src/io/p5.Table.js",
"line": 36,
"description": "Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.",
"is_constructor": 1,
"params": [
{
"name": "rows",
"description": "An array of p5.TableRow objects",
"type": "Array",
"optional": true
}
],
"return": {
"description": "p5.Table generated",
"type": "p5.Table"
}
},
"p5.TableRow": {
"name": "p5.TableRow",
"shortname": "p5.TableRow",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "IO",
"submodule": "Table",
"namespace": "",
"file": "src/io/p5.TableRow.js",
"line": 11,
"description": "A TableRow object represents a single row of data values,\nstored in columns, from a table.\n\nA Table Row contains both an ordered array, and an unordered\nJSON object.",
"is_constructor": 1,
"params": [
{
"name": "str",
"description": "optional: populate the row with a\n string of values, separated by the\n separator",
"type": "String",
"optional": true
},
{
"name": "separator",
"description": "comma separated values (csv) by default",
"type": "String",
"optional": true
}
]
},
"p5.Vector": {
"name": "p5.Vector",
"shortname": "p5.Vector",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Math",
"submodule": "Math",
"namespace": "",
"file": "src/math/p5.Vector.js",
"line": 13,
"description": "A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods mag() and heading().\n
\nIn many of the p5.js examples, you will see p5.Vector used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).\n
\nSince vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the p5.Vector class.",
"is_constructor": 1,
"params": [
{
"name": "x",
"description": "x component of the vector",
"type": "Number",
"optional": true
},
{
"name": "y",
"description": "y component of the vector",
"type": "Number",
"optional": true
},
{
"name": "z",
"description": "z component of the vector",
"type": "Number",
"optional": true
}
],
"example": [
"\n
\nvar v1 = createVector(40, 50);\nvar v2 = createVector(40, 50);\n\nellipse(v1.x, v1.y, 50, 50);\nellipse(v2.x, v2.y, 50, 50);\nv1.add(v2);\nellipse(v1.x, v1.y, 50, 50);\n
\nSoundFile object with a path to a file.
\n\nThe p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.
\n \nTo do something with the sound as soon as it loads\npass the name of a function as the second parameter.
\n\nOnly one file path is required. However, audio file formats \n(i.e. mp3, ogg, wav and m4a/aac) are not supported by all\nweb browsers. If you want to ensure compatability, instead of a single\nfile path, you may include an Array of filepaths, and the browser will\nchoose a format that works.
", "is_constructor": 1, "params": [ { "name": "path", "description": "path to a sound file (String). Optionally,\n you may include multiple file formats in\n an array. Alternately, accepts an object\n from the HTML5 File API, or a p5.File.", "type": "String/Array" }, { "name": "successCallback", "description": "Name of a function to call once file loads", "type": "Function", "optional": true }, { "name": "errorCallback", "description": "Name of a function to call if file fails to\n load. This function will receive an error or\n XMLHttpRequest object with information\n about what went wrong.", "type": "Function", "optional": true }, { "name": "whileLoadingCallback", "description": "Name of a function to call while file\n is loading. That function will\n receive percentage loaded\n (between 0 and 1) as a\n parameter.", "type": "Function", "optional": true } ], "return": { "description": "p5.SoundFile Object", "type": "Object" }, "example": [ " \n\n\nfunction preload() {\n mySound = loadSound('assets/doorbell.mp3');\n}\n\nfunction setup() {\n mySound.setVolume(0.1);\n mySound.play();\n}\n \n
\nvar sound, amplitude, cnv;\n\nfunction preload(){\n sound = loadSound('assets/beat.mp3');\n}\nfunction setup() {\n cnv = createCanvas(100,100);\n amplitude = new p5.Amplitude();\n\n // start / stop the sound when canvas is clicked\n cnv.mouseClicked(function() {\n if (sound.isPlaying() ){\n sound.stop();\n } else {\n sound.play();\n }\n });\n}\nfunction draw() {\n background(0);\n fill(255);\n var level = amplitude.getLevel();\n var size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\n
FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n\naudio frequencies within a waveform.
\n\nOnce instantiated, a p5.FFT object can return an array based on\ntwo types of analyses:
• FFT.waveform()
computes\namplitude values along the time domain. The array indices correspond\nto samples across a brief moment in time. Each value represents\namplitude of the waveform at that sample of time.
\n• FFT.analyze()
computes amplitude values along the\nfrequency domain. The array indices correspond to frequencies (i.e.\npitches), from the lowest to the highest that humans can hear. Each\nvalue represents amplitude at that slice of the frequency spectrum.\nUse with getEnergy()
to measure amplitude at specific\nfrequencies, or within a range of frequencies.
FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as bins
. The array is 1024 bins long by default.\nYou can change the bin array length, but it must be a power of 2\nbetween 16 and 1024 in order for the FFT algorithm to function\ncorrectly. The actual size of the FFT buffer is twice the \nnumber of bins, so given a standard sample rate, the buffer is\n2048/44100 seconds long.
\nfunction preload(){\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup(){\n var cnv = createCanvas(100,100);\n cnv.mouseClicked(togglePlay);\n fft = new p5.FFT();\n sound.amp(0.2);\n}\n\nfunction draw(){\n background(0);\n\n var spectrum = fft.analyze(); \n noStroke();\n fill(0,255,0); // spectrum is green\n for (var i = 0; i< spectrum.length; i++){\n var x = map(i, 0, spectrum.length, 0, width);\n var h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width / spectrum.length, h )\n }\n\n var waveform = fft.waveform();\n noFill();\n beginShape();\n stroke(255,0,0); // waveform is red\n strokeWeight(1);\n for (var i = 0; i< waveform.length; i++){\n var x = map(i, 0, waveform.length, 0, width);\n var y = map( waveform[i], -1, 1, 0, height);\n vertex(x,y);\n }\n endShape();\n\n text('click to play/pause', 4, 10);\n}\n\n// fade sound if mouse is over canvas\nfunction togglePlay() {\n if (sound.isPlaying()) {\n sound.pause();\n } else {\n sound.loop();\n }\n}\n
p5.Signal is a constant audio-rate signal used by p5.Oscillator\nand p5.Envelope for modulation math.
\n\nThis is necessary because Web Audio is processed on a seprate clock.\nFor example, the p5 draw loop runs about 60 times per second. But\nthe audio clock must process samples 44100 times per second. If we\nwant to add a value to each of those samples, we can't do it in the\ndraw loop, but we can do it by adding a constant-rate audio signal.This class mostly functions behind the scenes in p5.sound, and returns\na Tone.Signal from the Tone.js library by Yotam Mann.\nIf you want to work directly with audio signals for modular\nsynthesis, check out\ntone.js.
", "is_constructor": 1, "return": { "description": "A Signal object from the Tone.js library", "type": "Tone.Signal" }, "example": [ "\n\nfunction setup() {\n carrier = new p5.Oscillator('sine');\n carrier.amp(1); // set amplitude\n carrier.freq(220); // set frequency\n carrier.start(); // start oscillating\n \n modulator = new p5.Oscillator('sawtooth');\n modulator.disconnect();\n modulator.amp(1);\n modulator.freq(4);\n modulator.start();\n\n // Modulator's default amplitude range is -1 to 1.\n // Multiply it by -200, so the range is -200 to 200\n // then add 220 so the range is 20 to 420\n carrier.freq( modulator.mult(-200).add(220) );\n}\n
Creates a signal that oscillates between -1.0 and 1.0.\nBy default, the oscillation takes the form of a sinusoidal\nshape ('sine'). Additional types include 'triangle',\n'sawtooth' and 'square'. The frequency defaults to\n440 oscillations per second (440Hz, equal to the pitch of an\n'A' note).
\n\nSet the type of oscillation with setType(), or by creating a\nspecific oscillator.
For example:\nnew p5.SinOsc(freq)
\nnew p5.TriOsc(freq)
\nnew p5.SqrOsc(freq)
\nnew p5.SawOsc(freq)
.\n",
"is_constructor": 1,
"params": [
{
"name": "freq",
"description": "frequency defaults to 440Hz",
"type": "Number",
"optional": true
},
{
"name": "type",
"description": "type of oscillator. Options:\n 'sine' (default), 'triangle',\n 'sawtooth', 'square'",
"type": "String",
"optional": true
}
],
"return": {
"description": "Oscillator object",
"type": "Object"
},
"example": [
"\n\nvar osc;\nvar playing = false;\n\nfunction setup() {\n backgroundColor = color(255,0,255);\n textAlign(CENTER);\n \n osc = new p5.Oscillator();\n osc.setType('sine');\n osc.freq(240);\n osc.amp(0);\n osc.start();\n}\n\nfunction draw() {\n background(backgroundColor)\n text('click to play', width/2, height/2);\n}\n\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0) {\n if (!playing) {\n // ramp amplitude to 0.5 over 0.1 seconds\n osc.amp(0.5, 0.05);\n playing = true;\n backgroundColor = color(0,255,255);\n } else {\n // ramp amplitude to 0 over 0.5 seconds\n osc.amp(0, 0.5);\n playing = false;\n backgroundColor = color(255,0,255);\n }\n }\n}\n
Envelopes are pre-defined amplitude distribution over time.\nTypically, envelopes are used to control the output volume\nof an object, a series of fades referred to as Attack, Decay,\nSustain and Release (\nADSR\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Env can \ncontrol an Oscillator's frequency like this: osc.freq(env)
.
Use setRange
to change the attack/release level.\nUse setADSR
to change attackTime, decayTime, sustainPercent and releaseTime.
Use the play
method to play the entire envelope,\nthe ramp
method for a pingable trigger,\nor triggerAttack
/\ntriggerRelease
to trigger noteOn/noteOff.
\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.2;\nvar susPercent = 0.2;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n var cnv = createCanvas(100, 100);\n\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Env();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(playEnv);\n}\n\nfunction playEnv(){\n env.play();\n}\n
p5.Oscillator
for a full list of methods.",
"is_constructor": 1,
"params": [
{
"name": "freq",
"description": "Frequency in oscillations per second (Hz)",
"type": "Number",
"optional": true
},
{
"name": "w",
"description": "Width between the pulses (0 to 1.0,\n defaults to 0)",
"type": "Number",
"optional": true
}
],
"example": [
"\n\nvar pulse;\nfunction setup() {\n background(0);\n \n // Create and start the pulse wave oscillator\n pulse = new p5.Pulse();\n pulse.amp(0.5);\n pulse.freq(220);\n pulse.start();\n}\n\nfunction draw() {\n var w = map(mouseX, 0, width, 0, 1);\n w = constrain(w, 0, 1);\n pulse.width(w)\n}\n
Get audio from an input, i.e. your computer's microphone.
\n\nTurn the mic on/off with the start() and stop() methods. When the mic\nis on, its volume can be measured with getLevel or by connecting an\nFFT object.
\n\nIf you want to hear the AudioIn, use the .connect() method. \nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.
\n\nNote: This uses the getUserMedia/\nStream API, which is not supported by certain browsers.
", "is_constructor": 1, "return": { "description": "AudioIn", "type": "Object" }, "example": [ "\n\nvar mic;\nfunction setup(){\n mic = new p5.AudioIn()\n mic.start();\n}\nfunction draw(){\n background(0);\n micLevel = mic.getLevel();\n ellipse(width/2, constrain(height-micLevel*height*5, 0, height), 10, 10);\n}\n
p5.LowPass
- allows frequencies below\nthe cutoff frequency to pass through, and attenuates\nfrequencies above the cutoff.p5.HighPass
- the opposite of a lowpass\nfilter. p5.BandPass
- allows a range of\nfrequencies to pass through and attenuates the frequencies\nbelow and above this frequency range..res()
method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.",
"is_constructor": 1,
"params": [
{
"name": "type",
"description": "'lowpass' (default), 'highpass', 'bandpass'",
"type": "[String]"
}
],
"return": {
"description": "p5.Filter",
"type": "Object"
},
"example": [
"\n\nvar fft, noise, filter;\n\nfunction setup() {\n fill(255, 40, 255);\n\n filter = new p5.BandPass();\n\n noise = new p5.Noise();\n // disconnect unfiltered noise,\n // and connect to filter\n noise.disconnect();\n noise.connect(filter);\n noise.start();\n\n fft = new p5.FFT();\n}\n\nfunction draw() {\n background(30);\n\n // set the BandPass frequency based on mouseX\n var freq = map(mouseX, 0, width, 20, 10000);\n filter.freq(freq);\n // give the filter a narrow band (lower res = wider bandpass)\n filter.res(50);\n\n // draw filtered spectrum\n var spectrum = fft.analyze();\n noStroke();\n for (var i = 0; i < spectrum.length; i++) {\n var x = map(i, 0, spectrum.length, 0, width);\n var h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width/spectrum.length, h);\n }\n \n isMouseOverCanvas();\n}\n\nfunction isMouseOverCanvas() {\n var mX = mouseX, mY = mouseY;\n if (mX > 0 && mX < width && mY < height && mY > 0) {\n noise.amp(0.5, 0.2);\n } else {\n noise.amp(0, 0.2);\n }\n}\n
\nvar noise, env, delay;\n\nfunction setup() {\n background(0);\n noStroke();\n fill(255);\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n \n noise = new p5.Noise('brown');\n noise.amp(0);\n noise.start();\n \n delay = new p5.Delay();\n\n // delay.process() accepts 4 parameters:\n // source, delayTime, feedback, filter frequency\n // play with these numbers!!\n delay.process(noise, .12, .7, 2300);\n \n // play the noise with an envelope,\n // a series of fades ( time / value pairs )\n env = new p5.Env(.01, 0.2, .2, .1);\n}\n\n// mouseClick triggers envelope\nfunction mouseClicked() {\n // is mouse over canvas?\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n env.play(noise);\n }\n}\n
\nvar soundFile, reverb;\nfunction preload() {\n soundFile = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n reverb = new p5.Reverb();\n soundFile.disconnect(); // so we'll only hear reverb...\n\n // connect soundFile to reverb, process w/\n // 3 second reverbTime, decayRate of 2%\n reverb.process(soundFile, 3, 2);\n soundFile.play();\n}\n
p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called \nconvolution.
\n\nConvolution multiplies any audio input by an \"impulse response\"\nto simulate the dispersion of sound over time. The impulse response is\ngenerated from an audio file that you provide. One way to\ngenerate an impulse response is to pop a balloon in a reverberant space\nand record the echo. Convolution can also be used to experiment with\nsound.
\n\nUse the method createConvolution(path)
to instantiate a\np5.Convolver with a path to your impulse response audio file.
\nvar cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n \n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n // disconnect from master output...\n sound.disconnect();\n \n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n \n sound.play();\n}\n
A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.
\n\nPhrases must be added to a p5.Part for playback, and\neach part can play multiple phrases at the same time.\nFor example, one Phrase might be a kick drum, another\ncould be a snare, and another could be the bassline.
\n\nThe first parameter is a name so that the phrase can be\nmodified or deleted later. The callback is a a function that\nthis phrase will call at every step—for example it might be\ncalled playNote(value){}
. The array determines\nwhich value is passed into the callback at each step of the\nphrase. It can be numbers, an object with multiple numbers,\nor a zero (0) indicates a rest so the callback won't be called).
\nvar mySound, myPhrase, myPart;\nvar pattern = [1,0,0,2,0,2,0,0];\nvar msg = 'click to play';\n\nfunction preload() {\n mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n noStroke();\n fill(255);\n textAlign(CENTER);\n masterVolume(0.1);\n \n myPhrase = new p5.Phrase('bbox', makeSound, pattern);\n myPart = new p5.Part();\n myPart.addPhrase(myPhrase);\n myPart.setBPM(60);\n}\n\nfunction draw() {\n background(0);\n text(msg, width/2, height/2);\n}\n\nfunction makeSound(time, playbackRate) {\n mySound.rate(playbackRate);\n mySound.play(time);\n}\n\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n myPart.start();\n msg = 'playing pattern';\n }\n}\n\n
A p5.Part plays back one or more p5.Phrases. Instantiate a part\nwith steps and tatums. By default, each step represents 1/16th note.
\n\nSee p5.Phrase for more about musical timing.
", "is_constructor": 1, "params": [ { "name": "steps", "description": "Steps in the part", "type": "Number", "optional": true }, { "name": "tatums", "description": "Divisions of a beat (default is 1/16, a quarter note)", "type": "Number", "optional": true } ], "example": [ "\n\nvar box, drum, myPart;\nvar boxPat = [1,0,0,2,0,2,0,0];\nvar drumPat = [0,1,1,0,2,0,1,0];\nvar msg = 'click to play';\n\nfunction preload() {\n box = loadSound('assets/beatbox.mp3');\n drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n noStroke();\n fill(255);\n textAlign(CENTER);\n masterVolume(0.1);\n\n var boxPhrase = new p5.Phrase('box', playBox, boxPat);\n var drumPhrase = new p5.Phrase('drum', playDrum, drumPat);\n myPart = new p5.Part();\n myPart.addPhrase(boxPhrase);\n myPart.addPhrase(drumPhrase);\n myPart.setBPM(60);\n masterVolume(0.1);\n}\n\nfunction draw() {\n background(0);\n text(msg, width/2, height/2);\n}\n\nfunction playBox(time, playbackRate) {\n box.rate(playbackRate);\n box.play(time);\n}\n\nfunction playDrum(time, playbackRate) {\n drum.rate(playbackRate);\n drum.play(time);\n}\n\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n myPart.start();\n msg = 'playing part';\n }\n}\n
new p5.Score(a, a, b, a, c)
",
"is_constructor": 1,
"params": [
{
"name": "part(s)",
"description": "One or multiple parts, to be played in sequence.",
"type": "p5.Part"
}
],
"return": {
"description": "",
"type": "p5.Score"
}
},
"p5.SoundRecorder": {
"name": "p5.SoundRecorder",
"shortname": "p5.SoundRecorder",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "p5.sound",
"submodule": "p5.sound",
"namespace": "",
"file": "lib/addons/p5.sound.js",
"line": 8391,
"description": "Record sounds for playback and/or to save as a .wav file.\nThe p5.SoundRecorder records all sound output from your sketch,\nor can be assigned a specific source with setInput().
\nThe record() method accepts a p5.SoundFile as a parameter.\nWhen playback is stopped (either after the given amount of time,\nor with the stop() method), the p5.SoundRecorder will send its\nrecording to that p5.SoundFile for playback.
", "is_constructor": 1, "example": [ "\n\nvar mic, recorder, soundFile;\nvar state = 0;\n\nfunction setup() {\n background(200);\n // create an audio in\n mic = new p5.AudioIn();\n \n // prompts user to enable their browser mic\n mic.start();\n \n // create a sound recorder\n recorder = new p5.SoundRecorder();\n \n // connect the mic to the recorder\n recorder.setInput(mic);\n \n // this sound file will be used to\n // playback & save the recording\n soundFile = new p5.SoundFile();\n\n text('keyPress to record', 20, 20);\n}\n\nfunction keyPressed() {\n // make sure user enabled the mic\n if (state === 0 && mic.enabled) {\n \n // record to our p5.SoundFile\n recorder.record(soundFile);\n \n background(255,0,0);\n text('Recording!', 20, 20);\n state++;\n }\n else if (state === 1) {\n background(0,255,0);\n\n // stop recorder and\n // send result to soundFile\n recorder.stop(); \n \n text('Stopped', 20, 20);\n state++;\n }\n \n else if (state === 2) {\n soundFile.play(); // play the result!\n save(soundFile, 'mySound.wav');\n state++;\n }\n}\n
PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n
\n\nTo use p5.PeakDetect, call update
in the draw loop\nand pass in a p5.FFT object.\n
\nYou can listen for a specific part of the frequency spectrum by\nsetting the range between freq1
and freq2
.\n
threshold
is the threshold for detecting a peak,\nscaled between 0 and 1. It is logarithmic, so 0.1 is half as loud\nas 1.0.
\nThe update method is meant to be run in the draw loop, and\nframes determines how many loops must pass before\nanother peak can be detected.\nFor example, if the frameRate() = 60, you could detect the beat of a\n120 beat-per-minute song with this equation:\n framesPerPeak = 60 / (estimatedBPM / 60 );
\n
\nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by Felix Turner.\n
", "is_constructor": 1, "params": [ { "name": "freq1", "description": "lowFrequency - defaults to 20Hz", "type": "Number", "optional": true }, { "name": "freq2", "description": "highFrequency - defaults to 20000 Hz", "type": "Number", "optional": true }, { "name": "threshold", "description": "Threshold for detecting a beat between 0 and 1\n scaled logarithmically where 0.1 is 1/2 the loudness\n of 1.0. Defaults to 0.35.", "type": "Number", "optional": true }, { "name": "framesPerPeak", "description": "Defaults to 20.", "type": "Number", "optional": true } ], "example": [ "\n\n\nvar cnv, soundFile, fft, peakDetect;\nvar ellipseWidth = 10;\n\nfunction setup() {\n background(0);\n noStroke();\n fill(255);\n textAlign(CENTER);\n\n soundFile = loadSound('assets/beat.mp3');\n\n // p5.PeakDetect requires a p5.FFT\n fft = new p5.FFT();\n peakDetect = new p5.PeakDetect();\n\n}\n\nfunction draw() {\n background(0);\n text('click to play/pause', width/2, height/2);\n\n // peakDetect accepts an fft post-analysis\n fft.analyze();\n peakDetect.update(fft);\n\n if ( peakDetect.isDetected ) {\n ellipseWidth = 50;\n } else {\n ellipseWidth *= 0.95;\n }\n\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// toggle play/stop when canvas is clicked\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n if (soundFile.isPlaying() ) {\n soundFile.stop();\n } else {\n soundFile.play();\n }\n }\n}\n
\n\n // load two soundfile and crossfade beetween them\n var sound1,sound2;\n var gain1, gain2, gain3;\n \n function preload(){\n soundFormats('ogg', 'mp3');\n sound1 = loadSound('../_files/Damscray_-_Dancing_Tiger_01');\n sound2 = loadSound('../_files/beat.mp3');\n }\n\n function setup() {\n createCanvas(400,200);\n\n // create a 'master' gain to which we will connect both soundfiles\n gain3 = new p5.Gain();\n gain3.connect();\n\n // setup first sound for playing\n sound1.rate(1);\n sound1.loop();\n sound1.disconnect(); // diconnect from p5 output\n\n gain1 = new p5.Gain(); // setup a gain node\n gain1.setInput(sound1); // connect the first sound to its input\n gain1.connect(gain3); // connect its output to the 'master'\n\n sound2.rate(1);\n sound2.disconnect();\n sound2.loop();\n\n gain2 = new p5.Gain();\n gain2.setInput(sound2);\n gain2.connect(gain3);\n\n }\n\n function draw(){\n background(180);\n\n // calculate the horizontal distance beetween the mouse and the right of the screen\n var d = dist(mouseX,0,width,0);\n\n // map the horizontal position of the mouse to values useable for volume control of sound1\n var vol1 = map(mouseX,0,width,0,1); \n var vol2 = 1-vol1; // when sound1 is loud, sound2 is quiet and vice versa\n\n gain1.amp(vol1,0.5,0);\n gain2.amp(vol2,0.5,0);\n\n // map the vertical position of the mouse to values useable for 'master volume control'\n var vol3 = map(mouseY,0,height,0,1); \n gain3.amp(vol3,0.5,0);\n }\n
\n//draw a plane with width 200 and height 200\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(200);\n plane(200, 200);\n}\n
\n\n// draw a sphere with radius 200\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(200);\n sphere(200);\n}\n
\n\n// draw an ellipsoid with radius 200, 300 and 400\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(200);\n ellipsoid(200,300,400);\n}\n
\n\n//draw a spinning cylinder with radius 200 and height 200\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(200);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n cylinder(200, 200);\n}\n
\n\n//draw a spinning cone with radius 200 and height 200\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(200);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n cone(200, 200);\n}\n
\n\n//draw a spinning torus with radius 200 and tube radius 60\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n torus(200, 60);\n}\n
\n\n//draw a spinning box with width, height and depth 200\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(200, 200, 200);\n}\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\nfunction draw(){\n //move the camera away from the plane by a sin wave\n camera(0, 0, sin(frameCount * 0.01) * 100);\n plane(120, 120);\n}\n
\n\n//drag mouse to toggle the world!\n//you will see there's a vanish point\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n perspective(60 / 180 * PI, width/height, 0.1, 100);\n}\nfunction draw(){\n background(200);\n orbitControl();\n for(var i = -1; i < 2; i++){\n for(var j = -2; j < 3; j++){\n push();\n translate(i*160, 0, j*160);\n box(40, 40, 40);\n pop();\n }\n }\n}\n
\n\n//drag mouse to toggle the world!\n//there's no vanish point\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n ortho(-width/2, width/2, height/2, -height/2, 0.1, 100);\n}\nfunction draw(){\n background(200);\n orbitControl();\n for(var i = -1; i < 2; i++){\n for(var j = -2; j < 3; j++){\n push();\n translate(i*160, 0, j*160);\n box(40, 40, 40);\n pop();\n }\n }\n}\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\nfunction draw(){\n background(0);\n ambientLight(150);\n ambientMaterial(250);\n sphere(200);\n}\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\nfunction draw(){\n background(0);\n //move your mouse to change light direction\n var dirX = (mouseX / width - 0.5) *2;\n var dirY = (mouseY / height - 0.5) *(-2);\n directionalLight(250, 250, 250, dirX, dirY, 0.25);\n ambientMaterial(250);\n sphere(200);\n}\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\nfunction draw(){\n background(0);\n //move your mouse to change light position\n var locY = (mouseY / height - 0.5) *(-2);\n var locX = (mouseX / width - 0.5) *2;\n //to set the light position,\n //think of the world's coordinate as:\n // -1,1 -------- 1,1\n // | |\n // | |\n // | |\n // -1,-1---------1,-1\n pointLight(250, 250, 250, locX, locY, 0);\n ambientMaterial(250);\n sphere(200);\n}\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(0);\n normalMaterial();\n sphere(200);\n}\n
\n\nvar img;\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n img = loadImage(\"assets/laDefense.jpg\");\n}\n\nfunction draw(){\n background(0);\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n //pass image as texture\n texture(img);\n box(200, 200, 200);\n}\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(0);\n basicMaterial(250, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n box(200, 200, 200);\n}\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\nfunction draw(){\n background(0);\n ambientLight(100);\n pointLight(250, 250, 250, 100, 100, 0);\n ambientMaterial(250);\n sphere(200);\n}\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\nfunction draw(){\n background(0);\n ambientLight(100);\n pointLight(250, 250, 250, 100, 100, 0);\n specularMaterial(250);\n sphere(200);\n}\n
\n\nnoStroke();\nc = color(0, 126, 255, 102);\nfill(c);\nrect(15, 15, 35, 70);\nvalue = alpha(c); // Sets 'value' to 102\nfill(value);\nrect(50, 15, 35, 70);\n
\n\nc = color(175, 100, 220); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nblueValue = blue(c); // Get blue in 'c'\nprintln(blueValue); // Prints \"220.0\"\nfill(0, 0, blueValue); // Use 'blueValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n
\n\nnoStroke();\ncolorMode(HSB, 255);\nc = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nvalue = brightness(c); // Sets 'value' to 255\nfill(value);\nrect(50, 20, 35, 60);\n
\n\nvar c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nnoStroke(); // Don't draw a stroke around shapes\nrect(30, 20, 55, 55); // Draw rectangle\n
\n\nvar c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nnoStroke(); // Don't draw a stroke around shapes\nellipse(25, 25, 80, 80); // Draw left circle\n\n// Using only one value with color()\n// generates a grayscale value.\nvar c = color(65); // Update 'c' with grayscale value\nfill(c); // Use updated 'c' as fill color\nellipse(75, 75, 80, 80); // Draw right circle\n
\n\n// Named SVG & CSS colors may be used,\nvar c = color('magenta');\nfill(c); // Use 'c' as fill color\nnoStroke(); // Don't draw a stroke around shapes\nrect(20, 20, 60, 60); // Draw rectangle\n
\n\n// as can hex color codes:\nnoStroke(); // Don't draw a stroke around shapes\nvar c = color('#0f0');\nfill(c); // Use 'c' as fill color\nrect(0, 10, 45, 80); // Draw rectangle\n\nc = color('#00ff00');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw rectangle\n
\n\n// RGB and RGBA color strings are also supported:\n// these all set to the same color (solid blue)\nvar c;\nnoStroke(); // Don't draw a stroke around shapes\nc = color('rgb(0,0,255)');\nfill(c); // Use 'c' as fill color\nrect(10, 10, 35, 35); // Draw rectangle\n\nc = color('rgb(0%, 0%, 100%)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 35, 35); // Draw rectangle\n\nc = color('rgba(0, 0, 255, 1)');\nfill(c); // Use updated 'c' as fill color\nrect(10, 55, 35, 35); // Draw rectangle\n\nc = color('rgba(0%, 0%, 100%, 1)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 55, 35, 35); // Draw rectangle\n
\n\n// HSL color is also supported and can be specified\n// by value\nvar c;\nnoStroke(); // Don't draw a stroke around shapes\nc = color('hsl(160, 100%, 50%)');\nfill(c); // Use 'c' as fill color\nrect(0, 10, 45, 80); // Draw rectangle\n\nc = color('hsla(160, 100%, 50%, 0.5)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw rectangle\n
\n\n// HSB color is also supported and can be specified\n// by value\nvar c;\nnoStroke(); // Don't draw a stroke around shapes\nc = color('hsb(160, 100%, 50%)');\nfill(c); // Use 'c' as fill color\nrect(0, 10, 45, 80); // Draw rectangle\n\nc = color('hsba(160, 100%, 50%, 0.5)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw rectangle\n
\n\nvar c; // Declare color 'c'\nnoStroke(); // Don't draw a stroke around shapes\n\n// If no colorMode is specified, then the\n// default of RGB with scale of 0-255 is used.\nc = color(50, 55, 100); // Create a color for 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(0, 10, 45, 80); // Draw left rect\n\ncolorMode(HSB, 100); // Use HSB with scale of 0-100\nc = color(50, 55, 100); // Update 'c' with new color\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw right rect\n
\n\nc = color(20, 75, 200); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\ngreenValue = green(c); // Get green in 'c'\nprintln(greenValue); // Print \"75.0\"\nfill(0, greenValue, 0); // Use 'greenValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n
\n\nnoStroke();\ncolorMode(HSB, 255);\nc = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nvalue = hue(c); // Sets 'value' to \"0\"\nfill(value);\nrect(50, 20, 35, 60);\n
\n\ncolorMode(RGB);\nstroke(255);\nbackground(51);\nfrom = color(218, 165, 32);\nto = color(72, 61, 139);\ncolorMode(RGB); // Try changing to HSB.\ninterA = lerpColor(from, to, .33);\ninterB = lerpColor(from, to, .66);\nfill(from);\nrect(10, 20, 20, 60);\nfill(interA);\nrect(30, 20, 20, 60);\nfill(interB);\nrect(50, 20, 20, 60);\nfill(to);\nrect(70, 20, 20, 60);\n
\n\nnoStroke();\ncolorMode(HSL);\nc = color(156, 100, 50, 1);\nfill(c);\nrect(15, 20, 35, 60);\nvalue = lightness(c); // Sets 'value' to 50\nfill(value);\nrect(50, 20, 35, 60);\n
\n\nc = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nredValue = red(c); // Get red in 'c'\nprintln(redValue); // Print \"255.0\"\nfill(redValue, 0, 0); // Use 'redValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n
\n\ncolorMode(RGB, 255);\nvar c = color(127, 255, 0);\ncolorMode(RGB, 1);\nvar myColor = red(c);\nprint(myColor);\n
\n\nnoStroke();\ncolorMode(HSB, 255);\nc = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nvalue = saturation(c); // Sets 'value' to 126\nfill(value);\nrect(50, 20, 35, 60);\n
\n\n// todo\n
\n\n// Grayscale integer value\nbackground(51);\n
\n\n// R, G & B integer values\nbackground(255, 204, 0);\n
\n\n// H, S & B integer values\ncolorMode(HSB);\nbackground(255, 204, 100);\n
\n\n// Named SVG/CSS color string\nbackground('red');\n
\n\n// three-digit hexadecimal RGB notation\nbackground('#fae');\n
\n\n// six-digit hexadecimal RGB notation\nbackground('#222222');\n
\n\n// integer RGB notation\nbackground('rgb(0,255,0)');\n
\n\n// integer RGBA notation\nbackground('rgba(0,255,0, 0.25)');\n
\n\n// percentage RGB notation\nbackground('rgb(100%,0%,10%)');\n
\n\n// percentage RGBA notation\nbackground('rgba(100%,0%,100%,0.5)');\n
\n\n// p5 Color object\nbackground(color(0, 0, 255));\n
\n\n// Clear the screen on mouse press.\nfunction setup() {\n createCanvas(100, 100);\n}\n\nfunction draw() {\n ellipse(mouseX, mouseY, 20, 20);\n}\n\nfunction mousePressed() {\n clear();\n}\n
\n\nnoStroke();\ncolorMode(RGB, 100);\nfor (i = 0; i < 100; i++) {\n for (j = 0; j < 100; j++) {\n stroke(i, j, 0);\n point(i, j);\n }\n}\n
\n\nnoStroke();\ncolorMode(HSB, 100);\nfor (i = 0; i < 100; i++) {\n for (j = 0; j < 100; j++) {\n stroke(i, j, 100);\n point(i, j);\n }\n}\n
\n\ncolorMode(RGB, 255);\nvar c = color(127, 255, 0);\n\ncolorMode(RGB, 1);\nvar myColor = c._getRed();\ntext(myColor, 10, 10, 80, 80);\n
\n\nnoFill();\ncolorMode(RGB, 255, 255, 255, 1);\nbackground(255);\n\nstrokeWeight(4);\nstroke(255, 0 , 10, 0.3);\nellipse(40, 40, 50, 50);\nellipse(50, 50, 40, 40);\n
\n\n// Grayscale integer value\nfill(51);\nrect(20, 20, 60, 60);\n
\n\n// R, G & B integer values\nfill(255, 204, 0);\nrect(20, 20, 60, 60);\n
\n\n// H, S & B integer values\ncolorMode(HSB);\nfill(255, 204, 100);\nrect(20, 20, 60, 60);\n
\n\n// Named SVG/CSS color string\nfill('red');\nrect(20, 20, 60, 60);\n
\n\n// three-digit hexadecimal RGB notation\nfill('#fae');\nrect(20, 20, 60, 60);\n
\n\n// six-digit hexadecimal RGB notation\nfill('#222222');\nrect(20, 20, 60, 60);\n
\n\n// integer RGB notation\nfill('rgb(0,255,0)');\nrect(20, 20, 60, 60);\n
\n\n// integer RGBA notation\nfill('rgba(0,255,0, 0.25)');\nrect(20, 20, 60, 60);\n
\n\n// percentage RGB notation\nfill('rgb(100%,0%,10%)');\nrect(20, 20, 60, 60);\n
\n\n// percentage RGBA notation\nfill('rgba(100%,0%,100%,0.5)');\nrect(20, 20, 60, 60);\n
\n\n// p5 Color object\nfill(color(0, 0, 255));\nrect(20, 20, 60, 60);\n
\n\nrect(15, 10, 55, 55);\nnoFill();\nrect(20, 20, 60, 60);\n
\n\nnoStroke();\nrect(20, 20, 60, 60);\n
\n\n// Grayscale integer value\nstrokeWeight(4);\nstroke(51);\nrect(20, 20, 60, 60);\n
\n\n// R, G & B integer values\nstroke(255, 204, 0);\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n
\n\n// H, S & B integer values\ncolorMode(HSB);\nstrokeWeight(4);\nstroke(255, 204, 100);\nrect(20, 20, 60, 60);\n
\n\n// Named SVG/CSS color string\nstroke('red');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n
\n\n// three-digit hexadecimal RGB notation\nstroke('#fae');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n
\n\n// six-digit hexadecimal RGB notation\nstroke('#222222');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n
\n\n// integer RGB notation\nstroke('rgb(0,255,0)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n
\n\n// integer RGBA notation\nstroke('rgba(0,255,0,0.25)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n
\n\n// percentage RGB notation\nstroke('rgb(100%,0%,10%)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n
\n\n// percentage RGBA notation\nstroke('rgba(100%,0%,100%,0.5)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n
\n\n// p5 Color object\nstroke(color(0, 0, 255));\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n
\n\narc(50, 55, 50, 50, 0, HALF_PI);\nnoFill();\narc(50, 55, 60, 60, HALF_PI, PI);\narc(50, 55, 70, 70, PI, PI+QUARTER_PI);\narc(50, 55, 80, 80, PI+QUARTER_PI, TWO_PI);\n
\n\narc(50, 50, 80, 80, 0, PI+QUARTER_PI, OPEN);\n
\n\narc(50, 50, 80, 80, 0, PI+QUARTER_PI, CHORD);\n
\n\narc(50, 50, 80, 80, 0, PI+QUARTER_PI, PIE);\n
\n\nellipse(56, 46, 55, 55);\n
\n\nline(30, 20, 85, 75);\n
\n\nline(30, 20, 85, 20);\nstroke(126);\nline(85, 20, 85, 75);\nstroke(255);\nline(85, 75, 30, 75);\n
\n\npoint(30, 20);\npoint(85, 20);\npoint(85, 75);\npoint(30, 75);\n
\n\nquad(38, 31, 86, 20, 69, 63, 30, 76);\n
\n\n// Draw a rectangle at location (30, 20) with a width and height of 55.\nrect(30, 20, 55, 55);\n
\n\n// Draw a rectangle with rounded corners, each having a radius of 20.\nrect(30, 20, 55, 55, 20);\n
\n\n// Draw a rectangle with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nrect(30, 20, 55, 55, 20, 15, 10, 5)\n
\n\ntriangle(30, 75, 58, 20, 86, 75);\n
\n\nellipseMode(RADIUS); // Set ellipseMode to RADIUS\nfill(255); // Set fill to white\nellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode\n\nellipseMode(CENTER); // Set ellipseMode to CENTER\nfill(100); // Set fill to gray\nellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode\n
\n\nellipseMode(CORNER); // Set ellipseMode is CORNER\nfill(255); // Set fill to white\nellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode\n\nellipseMode(CORNERS); // Set ellipseMode to CORNERS\nfill(100); // Set fill to gray\nellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode\n
\n\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n
\n\nrectMode(CORNER); // Default rectMode is CORNER\nfill(255); // Set fill to white\nrect(25, 25, 50, 50); // Draw white rect using CORNER mode\n\nrectMode(CORNERS); // Set rectMode to CORNERS\nfill(100); // Set fill to gray\nrect(25, 25, 50, 50); // Draw gray rect using CORNERS mode\n
\n\nrectMode(RADIUS); // Set rectMode to RADIUS\nfill(255); // Set fill to white\nrect(50, 50, 30, 30); // Draw white rect using RADIUS mode\n\nrectMode(CENTER); // Set rectMode to CENTER\nfill(100); // Set fill to gray\nrect(50, 50, 30, 30); // Draw gray rect using CENTER mode\n
\n\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n
\n\nstrokeWeight(12.0);\nstrokeCap(ROUND);\nline(20, 30, 80, 30);\nstrokeCap(SQUARE);\nline(20, 50, 80, 50);\nstrokeCap(PROJECT);\nline(20, 70, 80, 70);\n
\n\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(MITER);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n
\n\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(BEVEL);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n
\n\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(ROUND);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n
\n\nstrokeWeight(1); // Default\nline(20, 20, 80, 20);\nstrokeWeight(4); // Thicker\nline(20, 40, 80, 40);\nstrokeWeight(10); // Beastly\nline(20, 70, 80, 70);\n
\n\narc(50, 50, 80, 80, 0, HALF_PI);\n
\narc(50, 50, 80, 80, 0, PI);\n
\narc(50, 50, 80, 80, 0, QUARTER_PI);\n
\narc(50, 50, 80, 80, 0, TAU);\n
\narc(50, 50, 80, 80, 0, TWO_PI);\n
\nvar img;\nvar c;\nfunction preload() { // preload() runs once\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() { // setup() waits until preload() is done\n img.loadPixels();\n // get color of middle pixel\n c = img.get(img.width/2, img.height/2);\n}\n\nfunction draw() {\n background(c);\n image(img, 25, 25, 50, 50);\n}\n
\nvar a = 0;\n\nfunction setup() {\n background(0);\n noStroke();\n fill(102);\n}\n\nfunction draw() {\n rect(a++%width, 10, 2, 80);\n}\n
\nvar yPos = 0;\nfunction setup() { // setup() runs once\n frameRate(30);\n}\nfunction draw() { // draw() loops forever, until stopped\n background(204);\n yPos = yPos - 1;\n if (yPos < 0) {\n yPos = height;\n }\n line(0, yPos, width, yPos);\n}\n
\nfunction draw() {\n ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n remove(); // remove whole sketch on mouse press\n}\n
\nnoFill();\nstroke(255, 102, 0);\nline(85, 20, 10, 10);\nline(90, 90, 15, 80);\nstroke(0, 0, 0);\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\n
\n\nbackground(204);\nbezierDetail(50);\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\n
\n\nnoFill();\nx1 = 85, x2 = 10, x3 = 90, x4 = 15;\ny1 = 20, y2 = 10, y3 = 90, y4 = 80;\nbezier(x1, y1, x2, y2, x3, y3, x4, y4);\nfill(255);\nsteps = 10;\nfor (i = 0; i <= steps; i++) {\n t = i / steps;\n x = bezierPoint(x1, x2, x3, x4, t);\n y = bezierPoint(y1, y2, y3, y4, t);\n ellipse(x, y, 5, 5);\n}\n
\n\nnoFill();\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\nsteps = 6;\nfill(255);\nfor (i = 0; i <= steps; i++) {\n t = i / steps;\n // Get the location of the point\n x = bezierPoint(85, 10, 90, 15, t);\n y = bezierPoint(20, 10, 90, 80, t);\n // Get the tangent points\n tx = bezierTangent(85, 10, 90, 15, t);\n ty = bezierTangent(20, 10, 90, 80, t);\n // Calculate an angle from the tangent points\n a = atan2(ty, tx);\n a += PI;\n stroke(255, 102, 0);\n line(x, y, cos(a)*30 + x, sin(a)*30 + y);\n // The following line of code makes a line\n // inverse of the above line\n //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);\n stroke(0);\n ellipse(x, y, 5, 5);\n}\n
\n\nnoFill();\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\nstroke(255, 102, 0);\nsteps = 16;\nfor (i = 0; i <= steps; i++) {\n t = i / steps;\n x = bezierPoint(85, 10, 90, 15, t);\n y = bezierPoint(20, 10, 90, 80, t);\n tx = bezierTangent(85, 10, 90, 15, t);\n ty = bezierTangent(20, 10, 90, 80, t);\n a = atan2(ty, tx);\n a -= HALF_PI;\n line(x, y, cos(a)*8 + x, sin(a)*8 + y);\n}\n
\n\nnoFill();\nstroke(255, 102, 0);\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\nstroke(0);\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nstroke(255, 102, 0);\ncurve(73, 24, 73, 61, 15, 65, 15, 65);\n
\n\n// Define the curve points as JavaScript objects\np1 = {x: 5, y: 26}, p2 = {x: 73, y: 24}\np3 = {x: 73, y: 61}, p4 = {x: 15, y: 65}\nnoFill();\nstroke(255, 102, 0);\ncurve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y)\nstroke(0);\ncurve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y)\nstroke(255, 102, 0);\ncurve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y)\n
\n\nbackground(204);\ncurveDetail(20);\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\n
\n\n// Move the mouse left and right to see the curve change\n\nfunction setup() {\n createCanvas(100, 100);\n noFill();\n}\n\nfunction draw() {\n background(204);\n var t = map(mouseX, 0, width, -5, 5);\n curveTightness(t);\n beginShape();\n curveVertex(10, 26);\n curveVertex(10, 26);\n curveVertex(83, 24);\n curveVertex(83, 61);\n curveVertex(25, 65);\n curveVertex(25, 65);\n endShape();\n}\n
\n\nnoFill();\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nfill(255);\nellipseMode(CENTER);\nsteps = 6;\nfor (i = 0; i <= steps; i++) {\n t = i / steps;\n x = curvePoint(5, 5, 73, 73, t);\n y = curvePoint(26, 26, 24, 61, t);\n ellipse(x, y, 5, 5);\n x = curvePoint(5, 73, 73, 15, t);\n y = curvePoint(26, 24, 61, 65, t);\n ellipse(x, y, 5, 5);\n}\n
\n\nnoFill();\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nsteps = 6;\nfor (i = 0; i <= steps; i++) {\n t = i / steps;\n x = curvePoint(5, 73, 73, 15, t);\n y = curvePoint(26, 24, 61, 65, t);\n //ellipse(x, y, 5, 5);\n tx = curveTangent(5, 73, 73, 15, t);\n ty = curveTangent(26, 24, 61, 65, t);\n a = atan2(ty, tx);\n a -= PI/2.0;\n line(x, y, cos(a)*8 + x, sin(a)*8 + y);\n}\n
\n\nvar x = 10;\nprint(\"The value of x is \" + x);\n// prints \"The value of x is 10\"\n
\n function setup() {\n frameRate(30);\n textSize(20);\n textSize(30);\n textAlign(CENTER);\n }\n\n function draw() {\n background(200);\n text(frameCount, width/2, height/2);\n }\n
\n// To demonstrate, put two windows side by side.\n// Click on the window that the p5 sketch isn't in!\nfunction draw() {\n if (focused) { // or \"if (focused === true)\"\n noStroke();\n fill(0, 200, 0);\n ellipse(25, 25, 50, 50);\n } else {\n stroke(200,0,0);\n line(0, 0, 100, 100);\n line(100, 0, 0, 100);\n }\n}\n\n
\n// Move the mouse left and right across the image\n// to see the cursor change from a cross to a hand\nfunction draw() {\n line(width/2, 0, width/2, height);\n if (mouseX < 50) {\n cursor(CROSS);\n } else {\n cursor(HAND);\n }\n}\n
\nvar rectX = 0;\nvar fr = 30; //starting FPS\nvar clr;\n\nfunction setup() {\n background(200);\n frameRate(fr); // Attempt to refresh at starting FPS\n clr = color(255,0,0);\n}\n\nfunction draw() {\n background(200);\n rectX = rectX += 1; // Move Rectangle\n\n if (rectX >= width) { // If you go off screen.\n if (fr == 30) {\n clr = color(0,0,255);\n fr = 10;\n frameRate(fr); // make frameRate 10 FPS\n } else {\n clr = color(255,0,0);\n fr = 30;\n frameRate(fr); // make frameRate 30 FPS\n }\n rectX = 0;\n }\n fill(clr);\n rect(rectX, 40, 20,20);\n}\n
\nfunction setup() {\n noCursor();\n}\n\nfunction draw() {\n background(200);\n ellipse(mouseX, mouseY, 10, 10);\n}\n
\ncreateCanvas(displayWidth, displayHeight);\n
\ncreateCanvas(displayWidth, displayHeight);\n
\ncreateCanvas(windowWidth, windowHeight);\n
\ncreateCanvas(windowWidth, windowHeight);\n
\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n background(0, 100, 200);\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n
\n// Clicking in the box toggles fullscreen on and off.\nfunction setup() {\n background(200);\n}\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n var fs = fullscreen();\n fullscreen(!fs);\n }\n}\n
\n\nfunction setup() {\n pixelDensity(1);\n createCanvas(100, 100);\n background(200);\n ellipse(width/2, height/2, 50, 50);\n}\n
\n\nfunction setup() {\n pixelDensity(3.0);\n createCanvas(100, 100);\n background(200);\n ellipse(width/2, height/2, 50, 50);\n}\n
\n\nfunction setup() {\n var density = displayDensity();\n pixelDensity(density);\n createCanvas(100, 100);\n background(200);\n ellipse(width/2, height/2, 50, 50);\n}\n
\n\nvar url;\nvar x = 100;\n\nfunction setup() {\n fill(0);\n noStroke();\n url = getURL();\n}\n\nfunction draw() {\n background(200);\n text(url, x, height/2);\n x--;\n}\n
\n\nfunction setup() {\n var urlPath = getURLPath();\n for (var i=0; i<urlPath.length; i++) {\n text(urlPath[i], 10, i*20+20);\n }\n}\n
\n// Example: http://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n var params = getURLParams();\n text(params.day, 10, 20);\n text(params.month, 10, 40);\n text(params.year, 10, 60);\n}\n
\n\n // in the html file:\n <div id=\"myContainer\"></div>\n // in the js file:\n var cnv = createCanvas(100, 100);\n cnv.parent(\"myContainer\");\n
\n var div0 = createDiv('this is the parent');\n var div1 = createDiv('this is the child');\n div1.parent(div0); // use p5.Element\n
\n var div0 = createDiv('this is the parent');\n div0.id('apples');\n var div1 = createDiv('this is the child');\n div1.parent('apples'); // use id\n
\n var elt = document.getElementById('myParentDiv');\n var div1 = createDiv('this is the child');\n div1.parent(elt); // use element from page\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mousePressed(changeGray); // attach listener for\n // canvas click only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width/2, height/2, d, d);\n}\n\n// this function fires with any click anywhere\nfunction mousePressed() {\n d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n g = random(0, 255);\n}\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseWheel(changeSize); // attach listener for\n // activity on canvas only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width/2, height/2, d, d);\n}\n\n// this function fires with mousewheel movement\n// anywhere on screen\nfunction mouseWheel() {\n g = g + 10;\n}\n\n// this function fires with mousewheel movement\n// over canvas only\nfunction changeSize() {\n if (event.wheelDelta > 0) {\n d = d + 10;\n } else {\n d = d - 10;\n }\n}\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseReleased(changeGray); // attach listener for\n // activity on canvas only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width/2, height/2, d, d);\n}\n\n// this function fires after the mouse has been\n// released\nfunction mouseReleased() {\n d = d + 10;\n}\n\n// this function fires after the mouse has been\n// released while on canvas\nfunction changeGray() {\n g = random(0, 255);\n}\n
\nvar cnv;\nvar d = 30;\nvar g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseMoved(changeSize); // attach listener for\n // activity on canvas only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n fill(200);\n ellipse(width/2, height/2, d, d);\n}\n\n// this function fires when mouse moves anywhere on\n// page\nfunction mouseMoved() {\n g = g + 5;\n if (g > 255) {\n g = 0;\n }\n}\n\n// this function fires when mouse moves over canvas\nfunction changeSize() {\n d = d + 2;\n if (d > 100) {\n d = 0;\n }\n}\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseOver(changeGray);\n d = 10;\n}\n\nfunction draw() {\n ellipse(width/2, height/2, d, d);\n}\n\nfunction changeGray() {\n d = d + 10;\n if (d > 100) {\n d = 0;\n }\n}\n
\nvar sel;\n\nfunction setup() {\n textAlign(CENTER);\n background(200);\n sel = createSelect();\n sel.position(10, 10);\n sel.option('pear');\n sel.option('kiwi');\n sel.option('grape');\n sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n var item = sel.value();\n background(200);\n text(\"it's a \"+item+\"!\", 50, 50);\n}\n
\nvar checkbox;\nvar cnv;\n\nfunction setup() {\n checkbox = createCheckbox(\" fill\");\n checkbox.changed(changeFill);\n cnv = createCanvas(100, 100);\n cnv.position(0, 30);\n noFill();\n}\n\nfunction draw() {\n background(200);\n ellipse(50, 50, 50, 50);\n}\n\nfunction changeFill() {\n if (checkbox.checked()) {\n fill(0);\n } else {\n noFill();\n }\n}\n
\n// Open your console to see the output\nfunction setup() {\n var inp = createInput('');\n inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n console.log('you are typing: ', this.value());\n}\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseOut(changeGray);\n d = 10;\n}\n\nfunction draw() {\n ellipse(width/2, height/2, d, d);\n}\n\nfunction changeGray() {\n d = d + 10;\n if (d > 100) {\n d = 0;\n }\n}\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.touchStarted(changeGray); // attach listener for\n // canvas click only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width/2, height/2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchStarted() {\n d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n g = random(0, 255);\n}\n
\nvar cnv;\nvar g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.touchMoved(changeGray); // attach listener for\n // canvas click only\n g = 100;\n}\n\nfunction draw() {\n background(g);\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n g = random(0, 255);\n}\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.touchEnded(changeGray); // attach listener for\n // canvas click only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width/2, height/2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchEnded() {\n d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n g = random(0, 255);\n}\n
\nfunction setup() {\n createCanvas(100, 50);\n background(153);\n line(0, 0, width, height);\n}\n
\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n background(0, 100, 200);\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n
\nfunction setup() {\n noCanvas();\n}\n
\n\nvar pg;\nfunction setup() {\n createCanvas(100, 100);\n pg = createGraphics(100, 100);\n}\nfunction draw() {\n background(200);\n pg.background(100);\n pg.noStroke();\n pg.ellipse(pg.width/2, pg.height/2, 50, 50);\n image(pg, 50, 50);\n image(pg, 0, 0, 50, 50);\n}\n
\nBLEND
- linear interpolation of colours: C =\nA*factor + B. This is the default blending mode.ADD
- sum of A and BDARKEST
- only the darkest colour succeeds: C =\nmin(A*factor, B).LIGHTEST
- only the lightest colour succeeds: C =\nmax(A*factor, B).DIFFERENCE
- subtract colors from underlying image.EXCLUSION
- similar to DIFFERENCE
, but less\nextreme.MULTIPLY
- multiply the colors, result will always be\ndarker.SCREEN
- opposite multiply, uses inverse values of the\ncolors.REPLACE
- the pixels entirely replace the others and\ndon't utilize alpha (transparency) values.OVERLAY
- mix of MULTIPLY
and SCREEN\n
. Multiplies dark values, and screens light values.HARD_LIGHT
- SCREEN
when greater than 50%\ngray, MULTIPLY
when lower.SOFT_LIGHT
- mix of DARKEST
and\nLIGHTEST
. Works like OVERLAY
, but not as harsh.\nDODGE
- lightens light tones and increases contrast,\nignores darks.BURN
- darker areas are applied, increasing contrast,\nignores lights.\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n
\n\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n
\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n noLoop();\n}\n\nfunction draw() {\n line(10, 10, 90, 90);\n}\n
\nvar x = 0;\nfunction setup() {\n createCanvas(100, 100);\n}\n\nfunction draw() {\n background(204);\n x = x + 0.1;\n if (x > width) {\n x = 0;\n }\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n noLoop();\n}\n\nfunction mouseReleased() {\n loop();\n}\n
\nvar x = 0;\nfunction setup() {\n createCanvas(100, 100);\n noLoop();\n}\n\nfunction draw() {\n background(204);\n x = x + 0.1;\n if (x > width) {\n x = 0;\n }\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n loop();\n}\n\nfunction mouseReleased() {\n noLoop();\n}\n
\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\ntranslate(50, 0);\nellipse(0, 50, 33, 33); // Middle circle\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n
\n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(33, 50, 33, 33); // Left-middle circle\n\npush(); // Start another new drawing state\nstroke(0, 102, 153);\nellipse(66, 50, 33, 33); // Right-middle circle\npop(); // Restore previous state\n\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n
\n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\ntranslate(50, 0);\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(0, 50, 33, 33); // Middle circle\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n
\n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(33, 50, 33, 33); // Left-middle circle\n\npush(); // Start another new drawing state\nstroke(0, 102, 153);\nellipse(66, 50, 33, 33); // Right-middle circle\npop(); // Restore previous state\n\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n
\n\n var x = 0;\n function setup() {\n createCanvas(100, 100);\n noLoop();\n }\n function draw() {\n background(204);\n line(x, 0, x, height);\n }\n function mousePressed() {\n x += 1;\n redraw();\n }\n
\n// Example in the works.\n
\n\n// Example in the works.\n
\n\ntranslate(width/2, height/2);\nrotate(PI/3.0);\nrect(-26, -26, 52, 52);\n
\n\ntranslate(width/2, height/2);\nrotate(PI/3.0);\nrect(-26, -26, 52, 52);\n
\n\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n
\n\ntranslate(width/4, height/4);\nshearX(PI/4.0);\nrect(0, 0, 30, 30);\n
\n\ntranslate(width/4, height/4);\nshearY(PI/4.0);\nrect(0, 0, 30, 30);\n
\n\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n
\n\nrect(0, 0, 55, 55); // Draw rect at original 0,0\ntranslate(30, 20);\nrect(0, 0, 55, 55); // Draw rect at new 0,0\ntranslate(14, 14);\nrect(0, 0, 55, 55); // Draw rect at new 0,0\n
\n\ntranslate(50, 50);\nstroke(255, 0, 0);\nbeginShape();\n// Exterior part of shape, clockwise winding\nvertex(-40, -40);\nvertex(40, -40);\nvertex(40, 40);\nvertex(-40, 40);\n// Interior part of shape, counter-clockwise winding\nbeginContour();\nvertex(-20, -20);\nvertex(-20, 20);\nvertex(20, 20);\nvertex(20, -20);\nendContour();\nendShape(CLOSE);\n
\n\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n
\n\n// currently not working\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n
\n\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n
\n\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n
\n\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n
\n\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n
\n\nbeginShape(TRIANGLE_STRIP);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nvertex(90, 75);\nendShape();\n
\n\nbeginShape(TRIANGLE_FAN);\nvertex(57.5, 50);\nvertex(57.5, 15);\nvertex(92, 50);\nvertex(57.5, 85);\nvertex(22, 50);\nvertex(57.5, 15);\nendShape();\n
\n\nbeginShape(QUADS);\nvertex(30, 20);\nvertex(30, 75);\nvertex(50, 75);\nvertex(50, 20);\nvertex(65, 20);\nvertex(65, 75);\nvertex(85, 75);\nvertex(85, 20);\nendShape();\n
\n\nbeginShape(QUAD_STRIP);\nvertex(30, 20);\nvertex(30, 75);\nvertex(50, 20);\nvertex(50, 75);\nvertex(65, 20);\nvertex(65, 75);\nvertex(85, 20);\nvertex(85, 75);\nendShape();\n
\n\nbeginShape();\nvertex(20, 20);\nvertex(40, 20);\nvertex(40, 40);\nvertex(60, 40);\nvertex(60, 60);\nvertex(20, 60);\nendShape(CLOSE);\n
\n\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n
\n\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n
\n\nnoFill();\nbeginShape();\ncurveVertex(84, 91);\ncurveVertex(84, 91);\ncurveVertex(68, 19);\ncurveVertex(21, 17);\ncurveVertex(32, 100);\ncurveVertex(32, 100);\nendShape();\n
\n\ntranslate(50, 50);\nstroke(255, 0, 0);\nbeginShape();\n// Exterior part of shape, clockwise winding\nvertex(-40, -40);\nvertex(40, -40);\nvertex(40, 40);\nvertex(-40, 40);\n// Interior part of shape, counter-clockwise winding\nbeginContour();\nvertex(-20, -20);\nvertex(-20, 20);\nvertex(20, 20);\nvertex(20, -20);\nendContour();\nendShape(CLOSE);\n
\n\nnoFill();\n\nbeginShape();\nvertex(20, 20);\nvertex(45, 20);\nvertex(45, 80);\nendShape(CLOSE);\n\nbeginShape();\nvertex(50, 20);\nvertex(75, 20);\nvertex(75, 80);\nendShape();\n
\n\nnoFill();\nstrokeWeight(4);\nbeginShape();\nvertex(20, 20);\nquadraticVertex(80, 20, 50, 50);\nendShape();\n
\n\nnoFill();\nstrokeWeight(4);\nbeginShape();\nvertex(20, 20);\nquadraticVertex(80, 20, 50, 50);\nquadraticVertex(20, 80, 80, 80);\nvertex(80, 60);\nendShape();\n
\n\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(200);\n //rotateZ(radians(rotationZ));\n rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n}\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(200);\n //rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n rotateY(radians(rotationY));\n box(200, 200, 200);\n}\n
\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw(){\n background(200);\n rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n}\n
\n\n// A simple if statement looking at whether\n// rotationX - pRotationX < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nvar rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely neccessary but the logic\n// will be different in that case.\n\nvar rX = rotationX + 180;\nvar pRX = pRotationX + 180;\n\nif ((rX - pRX > 0 && rX - pRX < 270)|| rX - pRX < -270){\n rotateDirection = 'clockwise';\n} else if (rX - pRX < 0 || rX - pRX > 270){\n rotateDirection = 'counter-clockwise';\n}\n
\n\n// A simple if statement looking at whether\n// rotationY - pRotationY < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nvar rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely neccessary but the logic\n// will be different in that case.\n\nvar rY = rotationY + 180;\nvar pRY = pRotationY + 180;\n\nif ((rY - pRY > 0 && rY - pRY < 270)|| rY - pRY < -270){\n rotateDirection = 'clockwise';\n} else if (rY - pRY < 0 || rY - pRY > 270){\n rotateDirection = 'counter-clockwise';\n}\n
\n\n// A simple if statement looking at whether\n// rotationZ - pRotationZ < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nvar rotateDirection = 'clockwise';\n\nif ((rotationZ - pRotationZ > 0 &&\n rotationZ - pRotationZ < 270)||\n rotationZ - pRotationZ < -270){\n\n rotateDirection = 'clockwise';\n\n} else if (rotationZ - pRotationZ < 0 ||\n rotationZ - pRotationZ > 270){\n\n rotateDirection = 'counter-clockwise';\n\n}\n
\n\n// Run this example on a mobile device\n// Move the device around\n// to change the value.\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n
\n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees\n// to change the value.\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceTurned() {\n if (value == 0){\n value = 255\n } else if (value == 255) {\n value = 0;\n }\n}\n
\n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceTurned() {\n if (turnAxis == 'X'){\n if (value == 0){\n value = 255\n } else if (value == 255) {\n value = 0;\n }\n }\n}\n
\n\n// Run this example on a mobile device\n// Shake the device to change the value.\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceShaken() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n
\n\nvar value = 0;\nfunction draw() {\n if (keyIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n rect(25, 25, 50, 50);\n}\n
\n\n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n fill(245, 123, 158);\n textSize(50);\n}\n\nfunction draw() {\n background(200);\n text(key, 33,65); // Display last key pressed.\n}\n
\nvar fillVal = 126;\nfunction draw() {\n fill(fillVal);\n rect(25, 25, 50, 50);\n}\n\nfunction keyPressed() {\n if (keyCode == UP_ARROW) {\n fillVal = 255;\n } else if (keyCode == DOWN_ARROW) {\n fillVal = 0;\n }\n return false; // prevent default\n}\n
\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n
\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW) {\n value = 255;\n } else if (keyCode === RIGHT_ARROW) {\n value = 0;\n }\n}\n
\n\nfunction keyPressed(){\n // Do something\n return false; // prevent any default behaviour\n}\n
\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n return false; // prevent any default behavior\n}\n
\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n return false; // prevent any default behavior\n}\n
\n\nvar x = 100;\nvar y = 100;\n\nfunction setup() {\n createCanvas(512, 512);\n}\n\nfunction draw() {\n if (keyIsDown(LEFT_ARROW))\n x-=5;\n\n if (keyIsDown(RIGHT_ARROW))\n x+=5;\n\n if (keyIsDown(UP_ARROW))\n y-=5;\n\n if (keyIsDown(DOWN_ARROW))\n y+=5;\n\n clear();\n fill(255, 0, 0);\n ellipse(x, y, 50, 50);\n}\n
\n// Move the mouse across the canvas\nfunction draw() {\n background(244, 248, 252);\n line(mouseX, 0, mouseX, 100);\n}\n
\n\n// Move the mouse across the canvas\nfunction draw() {\n background(244, 248, 252);\n line(0, mouseY, 100, mouseY);\n}\n
\n\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n //slow down the frameRate to make it more visible\n frameRate(10);\n}\n\nfunction draw() {\n background(244, 248, 252);\n line(mouseX, mouseY, pmouseX, pmouseY);\n print(pmouseX + \" -> \" + mouseX);\n}\n\n
\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n //draw a square only if the mouse is not moving\n if(mouseY == pmouseY && mouseX == pmouseX)\n rect(20,20,60,60);\n\n print(pmouseY + \" -> \" + mouseY);\n}\n\n
\n\nvar myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n}\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n //move the canvas to the horizontal mouse position\n //relative to the window\n myCanvas.position(winMouseX+1, windowHeight/2);\n\n //the y of the square is relative to the canvas\n rect(20,mouseY,60,60);\n}\n\n
\n\nvar myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n}\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n //move the canvas to the vertical mouse position\n //relative to the window\n myCanvas.position(windowWidth/2, winMouseY+1);\n\n //the x of the square is relative to the canvas\n rect(mouseX,20,60,60);\n}\n\n
\n\n\nvar myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n noStroke();\n fill(237, 34, 93);\n }\n\nfunction draw() {\n clear();\n //the difference between previous and\n //current x position is the horizontal mouse speed\n var speed = abs(winMouseX-pwinMouseX);\n //change the size of the circle\n //according to the horizontal speed\n ellipse(50, 50, 10+speed*5, 10+speed*5);\n //move the canvas to the mouse position\n myCanvas.position( winMouseX+1, winMouseY+1);\n}\n\n
\n\n\nvar myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n noStroke();\n fill(237, 34, 93);\n }\n\nfunction draw() {\n clear();\n //the difference between previous and\n //current y position is the vertical mouse speed\n var speed = abs(winMouseY-pwinMouseY);\n //change the size of the circle\n //according to the vertical speed\n ellipse(50, 50, 10+speed*5, 10+speed*5);\n //move the canvas to the mouse position\n myCanvas.position( winMouseX+1, winMouseY+1);\n}\n\n
\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n if (mouseIsPressed) {\n if (mouseButton == LEFT)\n ellipse(50, 50, 50, 50);\n if (mouseButton == RIGHT)\n rect(25, 25, 50, 50);\n if (mouseButton == CENTER)\n triangle(23, 75, 50, 20, 78, 75);\n }\n\n print(mouseButton);\n}\n
\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n if (mouseIsPressed)\n ellipse(50, 50, 50, 50);\n else\n rect(25, 25, 50, 50);\n\n print(mouseIsPressed);\n}\n
\n\n// Move the mouse across the page\n// to change its value\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction mouseMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n
\n\nfunction mouseMoved() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n
\n\n// Drag the mouse across the page\n// to change its value\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction mouseDragged() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n
\n\nfunction mouseDragged() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n
\n\n// Click within the image to change\n// the value of the rectangle\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction mousePressed() {\n if (value == 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n
\n\nfunction mousePressed() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n
\n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been clicked\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction mouseReleased() {\n if (value == 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n
\n\nfunction mouseReleased() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n
\n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been clicked\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction mouseClicked() {\n if (value == 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n
\n\nfunction mouseClicked() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n
\n\nvar pos = 25;\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n rect(25, pos, 50, 50);\n}\n\nfunction mouseWheel(event) {\n print(event.delta);\n //move the square according to the vertical scroll amount\n pos += event.delta;\n //uncomment to block page scrolling\n //return false;\n}\n
\n\n// Touch within the image to change\n// the value of the rectangle\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction touchStarted() {\n if (value == 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n
\n\nfunction touchStarted() {\n ellipse(touchX, touchY, 5, 5);\n // prevent default\n return false;\n}\n
\n\n// Move your finger across the page\n// to change its value\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction touchMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n
\n\nfunction touchMoved() {\n ellipse(touchX, touchY, 5, 5);\n // prevent default\n return false;\n}\n
\n\n// Release touch within the image to\n// change the value of the rectangle\n\nvar value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction touchEnded() {\n if (value == 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n
\n\nfunction touchEnded() {\n ellipse(touchX, touchY, 5, 5);\n // prevent default\n return false;\n}\n
\n\nimg = createImage(66, 66);\nimg.loadPixels();\nfor (i = 0; i < img.width; i++) {\n for (j = 0; j < img.height; j++) {\n img.set(i, j, color(0, 90, 102));\n }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n
\n\nimg = createImage(66, 66);\nimg.loadPixels();\nfor (i = 0; i < img.width; i++) {\n for (j = 0; j < img.height; j++) {\n img.set(i, j, color(0, 90, 102, i % img.width * 2));\n }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n
\n\nvar pink = color(255, 102, 204);\nimg = createImage(66, 66);\nimg.loadPixels();\nvar d = pixelDensity;\nvar halfImage = 4 * (width * d) * (height/2 * d);\nfor (var i = 0; i < halfImage; i+=4) {\n img.pixels[i] = red(pink);\n img.pixels[i+1] = green(pink);\n img.pixels[i+2] = blue(pink);\n img.pixels[i+3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n
\n\nfunction setup() {\n var c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas(c, 'myCanvas', 'jpg');\n}\n
\n// note that this example has the same result as above\n// if no canvas is specified, defaults to main canvas\nfunction setup() {\n createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas('myCanvas', 'jpg');\n}\n
\n// all of the following are valid\nsaveCanvas(c, 'myCanvas', 'jpg');\nsaveCanvas(c, 'myCanvas');\nsaveCanvas(c);\nsaveCanvas('myCanvas', 'png');\nsaveCanvas('myCanvas');\nsaveCanvas();\n
\nvar img;\nfunction preload() {\n img = loadImage(\"assets/laDefense.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n}\n
\n\nfunction setup() {\n // here we use a callback to display the image after loading\n loadImage(\"assets/laDefense.jpg\", function(img) {\n image(img, 0, 0);\n });\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/laDefense.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n image(img, 0, 0, 100, 100);\n image(img, 0, 0, 100, 100, 0, 0, 100, 100);\n}\n
\n\nfunction setup() {\n // here we use a callback to display the image after loading\n loadImage(\"assets/laDefense.jpg\", function(img) {\n image(img, 0, 0);\n });\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/laDefense.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n tint(0, 153, 204); // Tint blue\n image(img, 50, 0);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/laDefense.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n tint(0, 153, 204, 126); // Tint blue and set transparency\n image(img, 50, 0);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/laDefense.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n tint(255, 126); // Apply transparency without changing color\n image(img, 50, 0);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n tint(0, 153, 204); // Tint blue\n image(img, 0, 0);\n noTint(); // Disable tint\n image(img, 50, 0);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n imageMode(CORNER);\n image(img, 10, 10, 50, 50);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n imageMode(CORNERS);\n image(img, 10, 10, 90, 40);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n imageMode(CENTER);\n image(img, 50, 50, 80, 80);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction setup() {\n createCanvas(100, 100);\n image(img, 0, 0);\n for (var i=0; i < img.width; i++) {\n var c = img.get(i, img.height/2);\n stroke(c);\n line(i, height/2, i, height);\n }\n}\n
\nvar img;\nfunction preload() {\n img = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction setup() {\n createCanvas(100, 100);\n image(img, 0, 0);\n for (var i=0; i < img.height; i++) {\n var c = img.get(img.width/2, i);\n stroke(c);\n line(0, i, width/2, i);\n }\n}\n
var d = pixelDensity;\nfor (var i = 0; i < d; i++) {\n for (var j = 0; j < d; j++) {\n // loop over\n idx = 4*((y * d + j) * width * d + (x * d + i));\n pixels[idx] = r;\n pixels[idx+1] = g;\n pixels[idx+2] = b;\n pixels[idx+3] = a;\n }\n}\n
\n\nimg = createImage(66, 66);\nimg.loadPixels();\nfor (i = 0; i < img.width; i++) {\n for (j = 0; j < img.height; j++) {\n img.set(i, j, color(0, 90, 102));\n }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n
\n\nvar pink = color(255, 102, 204);\nimg = createImage(66, 66);\nimg.loadPixels();\nfor (var i = 0; i < 4*(width*height/2); i+=4) {\n img.pixels[i] = red(pink);\n img.pixels[i+1] = green(pink);\n img.pixels[i+2] = blue(pink);\n img.pixels[i+3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n
\n\nvar myImage;\nvar halfImage;\n\nfunction preload() {\n myImage = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction setup() {\n myImage.loadPixels();\n halfImage = 4 * width * height/2;\n for(var i = 0; i < halfImage; i++){\n myImage.pixels[i+halfImage] = myImage.pixels[i];\n }\n myImage.updatePixels();\n}\n\nfunction draw() {\n image(myImage, 0, 0);\n}\n
\nvar myImage;\nvar halfImage;\n\nfunction preload() {\n myImage = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction setup() {\n myImage.loadPixels();\n halfImage = 4 * width * height/2;\n for(var i = 0; i < halfImage; i++){\n myImage.pixels[i+halfImage] = myImage.pixels[i];\n }\n myImage.updatePixels();\n}\n\nfunction draw() {\n image(myImage, 0, 0);\n}\n
\nvar myImage;\nvar c;\n\nfunction preload() {\n myImage = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction setup() {\n background(myImage);\n noStroke();\n c = myImage.get(60, 90);\n fill(c);\n rect(25, 25, 50, 50);\n}\n\n//get() returns color here\n
\nimg = createImage(66, 66);\nimg.loadPixels();\nfor (i = 0; i < img.width; i++) {\n for (j = 0; j < img.height; j++) {\n img.set(i, j, color(0, 90, 102, i % img.width * 2));\n }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n
\n\nvar img;\n\nfunction setup() {\n img = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction draw() {\n image(img, 0, 0);\n}\n\nfunction mousePressed() {\n img.resize(50, 100);\n}\n
\nvar photo;\nvar bricks;\nvar x;\nvar y;\n\nfunction preload() {\n photo = loadImage(\"assets/rockies.jpg\");\n bricks = loadImage(\"assets/bricks.jpg\");\n}\n\nfunction setup() {\n x = bricks.width/2;\n y = bricks.height/2;\n photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n image(photo, 0, 0);\n}\n
\nvar photo, maskImage;\nfunction preload() {\n photo = loadImage(\"assets/rockies.jpg\");\n maskImage = loadImage(\"assets/mask2.png\");\n}\n\nfunction setup() {\n createCanvas(100, 100);\n photo.mask(maskImage);\n image(photo, 0, 0);\n}\n
\nvar photo1;\nvar photo2;\n\nfunction preload() {\n photo1 = loadImage(\"assets/rockies.jpg\");\n photo2 = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction setup() {\n photo2.filter(\"gray\");\n image(photo1, 0, 0);\n image(photo2, width/2, 0);\n}\n
\nvar photo;\n\nfunction preload() {\n photo = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction draw() {\n image(photo, 0, 0);\n}\n\nfunction keyTyped() {\n if (key == 's') {\n photo.save(\"photo\", \"png\");\n }\n}\n
\nvar d = pixelDensity;\nfor (var i = 0; i < d; i++) {\n for (var j = 0; j < d; j++) {\n // loop over\n idx = 4 * ((y * d + j) * width * d + (x * d + i));\n pixels[idx] = r;\n pixels[idx+1] = g;\n pixels[idx+2] = b;\n pixels[idx+3] = a;\n }\n}\n
\n\nWhile the above method is complex, it is flexible enough to work with\nany pixelDensity. Note that set() will automatically take care of\nsetting all the appropriate values in pixels[] for a given (x, y) at\nany pixelDensity, but the performance may not be as fast when lots of\nmodifications are made to the pixel array.\n
\nBefore accessing this array, the data must loaded with the loadPixels()\nfunction. After the array data has been modified, the updatePixels()\nfunction must be run to update the changes.\n
\nNote that this is not a standard javascript array. This means that\nstandard javascript functions such as slice()
or\narrayCopy()
do not\nwork.
\nvar pink = color(255, 102, 204);\nloadPixels();\nvar d = pixelDensity();\nvar halfImage = 4 * (width * d) * (height/2 * d);\nfor (var i = 0; i < halfImage; i+=4) {\n pixels[i] = red(pink);\n pixels[i+1] = green(pink);\n pixels[i+2] = blue(pink);\n pixels[i+3] = alpha(pink);\n}\nupdatePixels();\n
\n\nvar img0;\nvar img1;\n\nfunction preload() {\n img0 = loadImage(\"assets/rockies.jpg\");\n img1 = loadImage(\"assets/bricks_third.jpg\");\n}\n\nfunction setup() {\n background(img0);\n image(img1, 0, 0);\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n}\n
\nvar img0;\nvar img1;\n\nfunction preload() {\n img0 = loadImage(\"assets/rockies.jpg\");\n img1 = loadImage(\"assets/bricks_third.jpg\");\n}\n\nfunction setup() {\n background(img0);\n image(img1, 0, 0);\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n}\n
\nvar img0;\nvar img1;\n\nfunction preload() {\n img0 = loadImage(\"assets/rockies.jpg\");\n img1 = loadImage(\"assets/bricks_third.jpg\");\n}\n\nfunction setup() {\n background(img0);\n image(img1, 0, 0);\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n}\n
\nvar img;\n\nfunction preload() {\n img = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction setup() {\n background(img);\n copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n stroke(255);\n noFill();\n // Rectangle shows area being copied\n rect(7, 22, 10, 10);\n}\n
\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n filter(THRESHOLD);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n filter(GRAY);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n filter(OPAQUE);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n filter(INVERT);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n filter(POSTERIZE,3);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n filter(DILATE);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n filter(BLUR,3);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/bricks.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n filter(ERODE);\n}\n
\n[pixels[(y*width*d+x)*d],\npixels[(y*width*d+x)*d+1],\npixels[(y*width*d+x)*d+2],\npixels[(y*width*d+x)*d+3]]
.\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/rockies.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n var c = get();\n image(c, width/2, 0);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/rockies.jpg\");\n}\nfunction setup() {\n image(img, 0, 0);\n var c = get(50, 90);\n fill(c);\n noStroke();\n rect(25, 25, 50, 50);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction setup() {\n image(img, 0, 0);\n var d = pixelDensity();\n var halfImage = 4 * (img.width * d) *\n (img.height/2 * d);\n loadPixels();\n for (var i = 0; i < halfImage; i++) {\n pixels[i+halfImage] = pixels[i];\n }\n updatePixels();\n}\n
\nChanges the color of any pixel, or writes an image directly to the\ndisplay window.
\nThe x and y parameters specify the pixel to change and the c parameter\nspecifies the color value. This can be a p5.Color object, or [R, G, B, A]\npixel array. It can also be a single grayscale value.\nWhen setting an image, the x and y parameters define the coordinates for\nthe upper-left corner of the image, regardless of the current imageMode().\n
\n\nAfter using set(), you must call updatePixels() for your changes to\nappear. This should be called once all pixels have been set.\n
\nSetting the color of a single pixel with set(x, y) is easy, but not as\nfast as putting the data directly into pixels[]. Setting the pixels[]\nvalues directly may be complicated when working with a retina display,\nbut will perform better when lots of pixels need to be set directly on\nevery loop.
\nSee the reference for pixels[] for more information.
", "itemtype": "method", "name": "set", "params": [ { "name": "x", "description": "x-coordinate of the pixel", "type": "Number" }, { "name": "y", "description": "y-coordinate of the pixel", "type": "Number" }, { "name": "c", "description": "insert a grayscale value | a pixel array |\n a p5.Color object | a p5.Image to copy", "type": "Number|Array|Object" } ], "example": [ "\n\nvar black = color(0);\nset(30, 20, black);\nset(85, 20, black);\nset(85, 75, black);\nset(30, 75, black);\nupdatePixels();\n
\n\nfor (var i = 30; i < width-15; i++) {\n for (var j = 20; j < height-25; j++) {\n var c = color(204-j, 153-i, 0);\n set(i, j, c);\n }\n}\nupdatePixels();\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction setup() {\n set(0, 0, img);\n updatePixels();\n line(0, 0, width, height);\n line(0, height, width, 0);\n}\n
\n\nvar img;\nfunction preload() {\n img = loadImage(\"assets/rockies.jpg\");\n}\n\nfunction setup() {\n image(img, 0, 0);\n var halfImage = 4 * (img.width * pixelDensity()) *\n (img.height * pixelDensity()/2);\n loadPixels();\n for (var i = 0; i < halfImage; i++) {\n pixels[i+halfImage] = pixels[i];\n }\n updatePixels();\n}\n
\nCalling loadFont() inside preload() guarantees that the load\noperation will have completed before setup() and draw() are called.
\n\n\nvar myFont;\nfunction preload() {\n myFont = loadFont('assets/AvenirNextLTPro-Demi.otf');\n}\n\nfunction setup() {\n fill('#ED225D');\n textFont(myFont);\n textSize(36);\n text('p5*js', 10, 50);\n}\n
Outside of preload(), you may supply a callback function to handle the\nobject:
\n\n\nfunction setup() {\n loadFont('assets/AvenirNextLTPro-Demi.otf', drawText);\n}\n\nfunction drawText(font) {\n fill('#ED225D');\n textFont(font, 36);\n text('p5*js', 10, 50);\n}\n\n
You can also use the string name of the font to style other HTML\nelements.
\n\n\nvar myFont;\n\nfunction preload() {\n myFont = loadFont('assets/Avenir.otf');\n}\n\nfunction setup() {\n var myDiv = createDiv('hello there');\n myDiv.style('font-family', 'Avenir');\n}\n
Calling loadJSON() inside preload() guarantees to complete the\noperation before setup() and draw() are called.
\n\n\nvar weather;\nfunction preload() {\n var url = 'http://api.openweathermap.org/data/2.5/weather?q=London,UK'+\n '&APPID=7bbbb47522848e8b9c26ba35c226c734';\n weather = loadJSON(url);\n}\n\nfunction setup() {\n noLoop();\n}\n\nfunction draw() {\n background(200);\n // get the humidity value out of the loaded JSON\n var humidity = weather.main.humidity;\n fill(0, humidity); // use the humidity value to set the alpha\n ellipse(width/2, height/2, 50, 50);\n}\n
Outside of preload(), you may supply a callback function to handle the\nobject:
\n\nfunction setup() {\n noLoop();\n var url = 'http://api.openweathermap.org/data/2.5/weather?q=NewYork'+\n '&APPID=7bbbb47522848e8b9c26ba35c226c734';\n loadJSON(url, drawWeather);\n}\n\nfunction draw() {\n background(200);\n}\n\nfunction drawWeather(weather) {\n // get the humidity value out of the loaded JSON\n var humidity = weather.main.humidity;\n fill(0, humidity); // use the humidity value to set the alpha\n ellipse(width/2, height/2, 50, 50);\n}\n
Calling loadStrings() inside preload() guarantees to complete the\noperation before setup() and draw() are called.
\n\n\nvar result;\nfunction preload() {\n result = loadStrings('assets/test.txt');\n}\n\nfunction setup() {\n background(200);\n var ind = floor(random(result.length));\n text(result[ind], 10, 10, 80, 80);\n}\n
Outside of preload(), you may supply a callback function to handle the\nobject:
\n\n\nfunction setup() {\n loadStrings('assets/test.txt', pickString);\n}\n\nfunction pickString(result) {\n background(200);\n var ind = floor(random(result.length));\n text(result[ind], 10, 10, 80, 80);\n}\n
Reads the contents of a file or URL and creates a p5.Table object with\nits values. If a file is specified, it must be located in the sketch's\n\"data\" folder. The filename parameter can also be a URL to a file found\nonline. By default, the file is assumed to be comma-separated (in CSV\nformat). Table only looks for a header row if the 'header' option is\nincluded.
\n\nPossible options include:\n
When passing in multiple options, pass them in as separate parameters,\nseperated by commas. For example:\n
\n\n loadTable(\"my_csv_file.csv\", \"csv\", \"header\")\n
\n
All files loaded and saved use UTF-8 encoding.
\n\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadTable() inside preload()\nguarantees to complete the operation before setup() and draw() are called.\n
Outside of preload(), you may supply a callback function to handle the\nobject:
\n", "itemtype": "method", "name": "loadTable", "params": [ { "name": "filename", "description": "name of the file or URL to load", "type": "String" }, { "name": "options", "description": "\"header\" \"csv\" \"tsv\"", "type": "String|Strings", "optional": true }, { "name": "callback", "description": "function to be executed after\n loadTable() completes, Table object is\n passed in as first argument", "type": "Function", "optional": true } ], "return": { "description": "Table object containing data", "type": "Object" }, "example": [ "\n\n// Given the following CSV file called \"mammals.csv\"\n// located 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\nvar table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n //the file can be remote\n //table = loadTable(\"http://p5js.org/reference/assets/mammals.csv\",\n // \"csv\", \"header\");\n}\n\nfunction setup() {\n //count the columns\n print(table.getRowCount() + \" total rows in table\");\n print(table.getColumnCount() + \" total columns in table\");\n\n print(table.getColumn(\"name\"));\n //[\"Goat\", \"Leopard\", \"Zebra\"]\n\n //cycle through the table\n for (var r = 0; r < table.getRowCount(); r++)\n for (var c = 0; c < table.getColumnCount(); c++) {\n print(table.getString(r, c));\n }\n}\n
\nSave an image, text, json, csv, wav, or html. Prompts download to\nthe client's computer. Note that it is not recommended to call save()\nwithin draw if it's looping, as the save() function will open a new save\ndialog every frame.
\nThe default behavior is to save the canvas as an image. You can\noptionally specify a filename.\nFor example:
\n\nsave();\nsave('myCanvas.jpg'); // save a specific canvas with a filename\n
\n\nAlternately, the first parameter can be a pointer to a canvas\np5.Element, an Array of Strings,\nan Array of JSON, a JSON object, a p5.Table, a p5.Image, or a\np5.SoundFile (requires p5.sound). The second parameter is a filename\n(including extension). The third parameter is for options specific\nto this type of object. This method will save a file that fits the\ngiven paramaters. For example:
\n\n\n\nsave('myCanvas.jpg'); // Saves canvas as an image\n\nvar cnv = createCanvas(100, 100);\nsave(cnv, 'myCanvas.jpg'); // Saves canvas as an image\n\nvar gb = createGraphics(100, 100);\nsave(gb, 'myGraphics.jpg'); // Saves p5.Renderer object as an image\n\nsave(myTable, 'myTable.html'); // Saves table as html file\nsave(myTable, 'myTable.csv',); // Comma Separated Values\nsave(myTable, 'myTable.tsv'); // Tab Separated Values\n\nsave(myJSON, 'my.json'); // Saves pretty JSON\nsave(myJSON, 'my.json', true); // Optimizes JSON filesize\n\nsave(img, 'my.png'); // Saves pImage as a png image\n\nsave(arrayOfStrings, 'my.txt'); // Saves strings to a text file with line\n // breaks after each item in the array\n
",
"itemtype": "method",
"name": "save",
"params": [
{
"name": "objectOrFilename",
"description": "If filename is provided, will\n save canvas as an image with\n either png or jpg extension\n depending on the filename.\n If object is provided, will\n save depending on the object\n and filename (see examples\n above).",
"type": "[Object|String]"
},
{
"name": "filename",
"description": "If an object is provided as the first\n parameter, then the second parameter\n indicates the filename,\n and should include an appropriate\n file extension (see examples above).",
"type": "[String]"
},
{
"name": "options",
"description": "Additional options depend on\n filetype. For example, when saving JSON,\n true
indicates that the\n output will be optimized for filesize,\n rather than readability.",
"type": "[Boolean/String]"
}
],
"class": "p5",
"module": "IO",
"submodule": "Output"
},
{
"file": "src/io/files.js",
"line": 1084,
"description": "Writes the contents of an Array or a JSON object to a .json file.\nThe file saving process and location of the saved file will\nvary between web browsers.",
"itemtype": "method",
"name": "saveJSON",
"params": [
{
"name": "json",
"description": "",
"type": "Array|Object"
},
{
"name": "filename",
"description": "",
"type": "String"
},
{
"name": "optimize",
"description": "If true, removes line breaks\n and spaces from the output\n file to optimize filesize\n (but not readability).",
"type": "Boolean",
"optional": true
}
],
"example": [
"\n\nvar json;\n\nfunction setup() {\n\n json = {}; // new JSON Object\n\n json.id = 0;\n json.species = 'Panthera leo';\n json.name = 'Lion';\n\n// To save, un-comment the line below, then click 'run'\n// saveJSONObject(json, 'lion.json');\n}\n\n// Saves the following to a file called \"lion.json\":\n// {\n// \"id\": 0,\n// \"species\": \"Panthera leo\",\n// \"name\": \"Lion\"\n// }\n
\nvar words = 'apple bear cat dog';\n\n// .split() outputs an Array\nvar list = split(words, ' ');\n\n// To save the file, un-comment next line and click 'run'\n// saveStrings(list, 'nouns.txt');\n\n// Saves the following to a file called 'nouns.txt':\n//\n// apple\n// bear\n// cat\n// dog\n
\nvar table;\n\nfunction setup() {\n table = new p5.Table();\n\n table.addColumn('id');\n table.addColumn('species');\n table.addColumn('name');\n\n var newRow = table.addRow();\n newRow.setNum('id', table.getRowCount() - 1);\n newRow.setString('species', 'Panthera leo');\n newRow.setString('name', 'Lion');\n\n // To save, un-comment next line then click 'run'\n // saveTable(table, 'new.csv');\n }\n\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n
Generic class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.
\nCSV files are\n\ncomma separated values, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don't bother with the\nquotes.
\nFile names should end with .csv if they're comma separated.
\nA rough \"spec\" for CSV can be found\nhere.
\nTo load files, use the loadTable method.
\nTo save tables to your computer, use the save method\n or the saveTable method.
\n\nPossible options include:\n\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\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n }\n\n function setup() {\n //add a row\n var newRow = table.addRow();\n newRow.setString(\"id\", table.getRowCount() - 1);\n newRow.setString(\"species\", \"Canis Lupus\");\n newRow.setString(\"name\", \"Wolf\");\n\n //print the results\n for (var r = 0; r < table.getRowCount(); r++)\n for (var c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n }\n
\n \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\nvar table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n}\n\nfunction setup() {\n //remove the first row\n var r = table.removeRow(0);\n\n //print the results\n for (var r = 0; r < table.getRowCount(); r++)\n for (var c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n}\n
\n\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\nvar table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n}\n\nfunction setup() {\n var row = table.getRow(1);\n //print it column by column\n //note: a row is an object, not an array\n for (var c = 0; c < table.getColumnCount(); c++)\n print(row.getString(c));\n}\n
\n\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\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n }\n\n function setup() {\n var rows = table.getRows();\n\n //warning: rows is an array of objects\n for (var r = 0; r < rows.length; r++)\n rows[r].set(\"name\", \"Unicorn\");\n\n //print the results\n for (var r = 0; r < table.getRowCount(); r++)\n for (var c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n }\n
\n \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\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n }\n\n function setup() {\n //find the animal named zebra\n var row = table.findRow(\"Zebra\", \"name\");\n //find the corresponding species\n print(row.getString(\"species\"));\n }\n
\n \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\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n }\n\n function setup() {\n //add another goat\n var newRow = table.addRow();\n newRow.setString(\"id\", table.getRowCount() - 1);\n newRow.setString(\"species\", \"Scape Goat\");\n newRow.setString(\"name\", \"Goat\");\n\n //find the rows containing animals named Goat\n var rows = table.findRows(\"Goat\", \"name\");\n print(rows.length + \" Goats found\");\n }\n
\n \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\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n }\n\n function setup() {\n //getColumn returns an array that can be printed directly\n print(table.getColumn(\"species\"));\n //outputs [\"Capra hircus\", \"Panthera pardus\", \"Equus zebra\"]\n }\n
\n \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\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n }\n\n function setup() {\n table.clearRows();\n print(table.getRowCount() + \" total rows in table\");\n print(table.getColumnCount() + \" total columns in table\");\n }\n
\n \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\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n }\n\n function setup() {\n table.addColumn(\"carnivore\");\n table.set(0, \"carnivore\", \"no\");\n table.set(1, \"carnivore\", \"yes\");\n table.set(2, \"carnivore\", \"no\");\n\n //print the results\n for (var r = 0; r < table.getRowCount(); r++)\n for (var c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n }\n
\n Removes any of the specified characters (or \"tokens\").
\n\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.
", "itemtype": "method", "name": "removeTokens", "params": [ { "name": "chars", "description": "String listing characters to be removed", "type": "String" }, { "name": "column", "description": "Column ID (number)\n or name (string)", "type": "String|Number", "optional": true } ], "class": "p5.Table", "module": "IO", "submodule": "Table" }, { "file": "src/io/p5.Table.js", "line": 648, "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.", "itemtype": "method", "name": "trim", "params": [ { "name": "column", "description": "Column ID (number)\n or name (string)", "type": "String|Number" } ], "class": "p5.Table", "module": "IO", "submodule": "Table" }, { "file": "src/io/p5.Table.js", "line": 690, "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.", "itemtype": "method", "name": "removeColumn", "params": [ { "name": "column", "description": "columnName (string) or ID (number)", "type": "String|Number" } ], "example": [ "\n\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\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n }\n\n function setup() {\n table.removeColumn(\"id\");\n print(table.getColumnCount());\n }\n
\n \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\nvar table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n}\n\nfunction setup() {\n table.set(0, \"species\", \"Canis Lupus\");\n table.set(0, \"name\", \"Wolf\");\n\n //print the results\n for (var r = 0; r < table.getRowCount(); r++)\n for (var c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n}\n
\n\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\nvar table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n}\n\nfunction setup() {\n table.setNum(1, \"id\", 1);\n\n print(table.getColumn(0));\n //[\"0\", 1, \"2\"]\n}\n
\n\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\nvar table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n}\n\nfunction setup() {\n print(table.get(0, 1));\n //Capra hircus\n print(table.get(0, \"species\"));\n //Capra hircus\n}\n
\n\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\nvar table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n}\n\nfunction setup() {\n print(table.getNum(1, 0) + 100);\n //id 1 + 100 = 101\n}\n
\n\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\nvar table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n}\n\nfunction setup() {\n var tableArray = table.getArray();\n\n //output each row as array\n for (var i = 0; i < tableArray.length; i++)\n print(tableArray[i]);\n}\n
\n\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\nvar table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable(\"assets/mammals.csv\", \"csv\", \"header\");\n}\n\nfunction setup() {\n var tableObject = table.getObject();\n\n print(tableObject);\n //outputs an object\n}\n
\n\nfunction setup() {\n var x = -3;\n var y = abs(x);\n\n print(x); // -3\n print(y); // 3\n}\n
\nfunction draw() {\n background(200);\n // map, mouseX between 0 and 5.\n var ax = map(mouseX, 0, 100, 0, 5);\n var ay = 66;\n\n //Get the ceiling of the mapped number.\n var bx = ceil(map(mouseX, 0, 100, 0,5));\n var by = 33;\n\n // Multiply the mapped numbers by 20 to more easily\n // see the changes.\n stroke(0);\n fill(0);\n line(0, ay, ax * 20, ay);\n line(0, by, bx * 20, by);\n\n // Reformat the float returned by map and draw it.\n noStroke();\n text(nfc(ax, 2,2), ax, ay - 5);\n text(nfc(bx,1,1), bx, by - 5);\n}\n
\nfunction draw() {\n background(200);\n\n var leftWall = 25;\n var rightWall = 75;\n\n // xm is just the mouseX, while\n // xc is the mouseX, but constrained\n // between the leftWall and rightWall!\n var xm = mouseX;\n var xc = constrain(mouseX, leftWall, rightWall);\n\n // Draw the walls.\n stroke(150);\n line(leftWall, 0, leftWall, height);\n line(rightWall, 0, rightWall, height);\n\n // Draw xm and xc as circles.\n noStroke();\n fill(150);\n ellipse(xm, 33, 9,9); // Not Constrained\n fill(0);\n ellipse(xc, 66, 9,9); // Constrained\n}\n
\n// Move your mouse inside the canvas to see the\n// change in distance between two points!\nfunction draw() {\n background(200);\n fill(0);\n\n var x1 = 10;\n var y1 = 90;\n var x2 = mouseX;\n var y2 = mouseY;\n\n line(x1, y1, x2, y2);\n ellipse(x1, y1, 7, 7);\n ellipse(x2, y2, 7, 7);\n\n // d is the length of the line\n // the distance from point 1 to point 2.\n var d = int(dist(x1, y1, x2, y2));\n\n // Let's write d along the line we are drawing!\n push();\n translate( (x1+x2)/2, (y1+y2)/2 );\n rotate( atan2(y2-y1,x2-x1) );\n text(nfc(d,1,1), 0, -5);\n pop();\n // Fancy!\n}\n
\nfunction draw() {\n background(200);\n\n // Compute the exp() function with a value between 0 and 2\n var xValue = map(mouseX, 0, width, 0, 2);\n var yValue = exp(xValue);\n\n var y = map(yValue, 0, 8, height, 0);\n\n var legend = \"exp (\" + nfc(xValue, 3) +\")\\n= \" + nf(yValue, 1, 4);\n stroke(150);\n line(mouseX, y, mouseX, height);\n fill(0);\n text(legend, 5, 15);\n noStroke();\n ellipse (mouseX,y, 7, 7);\n\n // Draw the exp(x) curve,\n // over the domain of x from 0 to 2\n noFill();\n stroke(0);\n beginShape();\n for (var x = 0; x < width; x++) {\n xValue = map(x, 0, width, 0, 2);\n yValue = exp(xValue);\n y = map(yValue, 0, 8, height, 0);\n vertex(x, y);\n }\n\n endShape();\n line(0, 0, 0, height);\n line(0, height-1, width, height-1);\n}\n
\nfunction draw() {\n background(200);\n //map, mouseX between 0 and 5.\n var ax = map(mouseX, 0, 100, 0, 5);\n var ay = 66;\n\n //Get the floor of the mapped number.\n var bx = floor(map(mouseX, 0, 100, 0,5));\n var by = 33;\n\n // Multiply the mapped numbers by 20 to more easily\n // see the changes.\n stroke(0);\n fill(0);\n line(0, ay, ax * 20, ay);\n line(0, by, bx * 20, by);\n\n // Reformat the float returned by map and draw it.\n noStroke();\n text(nfc(ax, 2,2), ax, ay - 5);\n text(nfc(bx,1,1), bx, by - 5);\n}\n
\nfunction setup() {\n background(200);\n var a = 20;\n var b = 80;\n var c = lerp(a,b, .2);\n var d = lerp(a,b, .5);\n var e = lerp(a,b, .8);\n\n var y = 50\n\n strokeWeight(5);\n stroke(0); // Draw the original points in black\n point(a, y);\n point(b, y);\n\n stroke(100); // Draw the lerp points in gray\n point(c, y);\n point(d, y);\n point(e, y);\n}\n
\nfunction draw() {\n background(200);\n var maxX = 2.8;\n var maxY = 1.5;\n\n // Compute the natural log of a value between 0 and maxX\n var xValue = map(mouseX, 0, width, 0, maxX);\n if (xValue > 0) { // Cannot take the log of a negative number.\n var yValue = log(xValue);\n var y = map(yValue, -maxY, maxY, height, 0);\n\n // Display the calculation occurring.\n var legend = \"log(\" + nf(xValue, 1, 2) + \")\\n= \" + nf(yValue, 1, 3);\n stroke(150);\n line(mouseX, y, mouseX, height);\n fill(0);\n text (legend, 5, 15);\n noStroke();\n ellipse (mouseX, y, 7, 7);\n }\n\n // Draw the log(x) curve,\n // over the domain of x from 0 to maxX\n noFill();\n stroke(0);\n beginShape();\n for(var x=0; x < width; x++) {\n xValue = map(x, 0, width, 0, maxX);\n yValue = log(xValue);\n y = map(yValue, -maxY, maxY, height, 0);\n vertex(x, y);\n }\n endShape();\n line(0,0,0,height);\n line(0,height/2,width, height/2);\n}\n
\nfunction setup() {\n var x1 = 20;\n var x2 = 80;\n var y1 = 30;\n var y2 = 70;\n\n line(0, 0, x1, y1);\n print(mag(x1, y1)); // Prints \"36.05551\"\n line(0, 0, x2, y1);\n print(mag(x2, y1)); // Prints \"85.44004\"\n line(0, 0, x1, y2);\n print(mag(x1, y2)); // Prints \"72.8011\"\n line(0, 0, x2, y2);\n print(mag(x2, y2)); // Prints \"106.30146\"\n}\n
\n var value = 25;\n var m = map(value, 0, 100, 0, width);\n ellipse(m, 50, 10, 10);\n
\n function setup() {\n noStroke();\n }\n\n function draw() {\n background(204);\n var x1 = map(mouseX, 0, width, 25, 75);\n ellipse(x1, 25, 25, 25);\n var x2 = map(mouseX, 0, width, 0, 100);\n ellipse(x2, 75, 25, 25);\n }\n
\nfunction setup() {\n // Change the elements in the array and run the sketch\n // to show how max() works!\n numArray = new Array(2,1,5,4,8,9);\n fill(0);\n noStroke();\n text(\"Array Elements\", 0, 10);\n // Draw all numbers in the array\n var spacing = 15;\n var elemsY = 25;\n for(var i = 0; i < numArray.length; i++) {\n text(numArray[i], i * spacing, elemsY);\n }\n maxX = 33;\n maxY = 80;\n // Draw the Maximum value in the array.\n textSize(32);\n text(max(numArray), maxX, maxY);\n}\n
\nfunction setup() {\n // Change the elements in the array and run the sketch\n // to show how min() works!\n numArray = new Array(2,1,5,4,8,9);\n fill(0);\n noStroke();\n text(\"Array Elements\", 0, 10);\n // Draw all numbers in the array\n var spacing = 15;\n var elemsY = 25;\n for(var i = 0; i < numArray.length; i++) {\n text(numArray[i], i * spacing, elemsY);\n }\n maxX = 33;\n maxY = 80;\n // Draw the Minimum value in the array.\n textSize(32);\n text(min(numArray), maxX, maxY);\n}\n
\nfunction draw() {\n background(200);\n currentNum = mouseX;\n lowerBound = 0;\n upperBound = width; //100;\n normalized = norm(currentNum, lowerBound, upperBound);\n lineY = 70\n line(0, lineY, width, lineY);\n //Draw an ellipse mapped to the non-normalized value.\n noStroke();\n fill(50)\n var s = 7; // ellipse size\n ellipse(currentNum, lineY, s, s);\n\n // Draw the guide\n guideY = lineY + 15;\n text(\"0\", 0, guideY);\n textAlign(RIGHT);\n text(\"100\", width, guideY);\n\n // Draw the normalized value\n textAlign(LEFT);\n fill(0);\n textSize(32);\n normalY = 40;\n normalX = 20;\n text(normalized, normalX, normalY);\n}\n
\nfunction setup() {\n //Exponentially increase the size of an ellipse.\n eSize = 3; // Original Size\n eLoc = 10; // Original Location\n\n ellipse(eLoc, eLoc, eSize, eSize);\n\n ellipse(eLoc*2, eLoc*2, pow(eSize, 2), pow(eSize, 2));\n\n ellipse(eLoc*4, eLoc*4, pow(eSize, 3), pow(eSize, 3));\n\n ellipse(eLoc*8, eLoc*8, pow(eSize, 4), pow(eSize, 4));\n}\n
\nfunction draw() {\n background(200);\n //map, mouseX between 0 and 5.\n var ax = map(mouseX, 0, 100, 0, 5);\n var ay = 66;\n\n // Round the mapped number.\n var bx = round(map(mouseX, 0, 100, 0,5));\n var by = 33;\n\n // Multiply the mapped numbers by 20 to more easily\n // see the changes.\n stroke(0);\n fill(0);\n line(0, ay, ax * 20, ay);\n line(0, by, bx * 20, by);\n\n // Reformat the float returned by map and draw it.\n noStroke();\n text(nfc(ax, 2,2), ax, ay - 5);\n text(nfc(bx,1,1), bx, by - 5);\n}\n
\nfunction draw() {\n background(200);\n eSize = 7;\n x1 = map(mouseX, 0, width, 0, 10);\n y1 = 80;\n x2 = sq(x1);\n y2 = 20;\n\n // Draw the non-squared.\n line(0, y1, width, y1);\n ellipse(x1, y1, eSize, eSize);\n\n // Draw the squared.\n line(0, y2, width, y2);\n ellipse(x2, y2, eSize, eSize);\n\n // Draw dividing line.\n stroke(100)\n line(0, height/2, width, height/2);\n\n // Draw text.\n var spacing = 15;\n noStroke();\n fill(0);\n text(\"x = \" + x1, 0, y1 + spacing);\n text(\"sq(x) = \" + x2, 0, y2 + spacing);\n}\n
\nfunction draw() {\n background(200);\n eSize = 7;\n x1 = mouseX;\n y1 = 80;\n x2 = sqrt(x1);\n y2 = 20;\n\n // Draw the non-squared.\n line(0, y1, width, y1);\n ellipse(x1, y1, eSize, eSize);\n\n // Draw the squared.\n line(0, y2, width, y2);\n ellipse(x2, y2, eSize, eSize);\n\n // Draw dividing line.\n stroke(100)\n line(0, height/2, width, height/2);\n\n // Draw text.\n noStroke();\n fill(0);\n var spacing = 15;\n text(\"x = \" + x1, 0, y1 + spacing);\n text(\"sqrt(x) = \" + x2, 0, y2 + spacing);\n}\n
var xoff = 0.0;\n\nfunction draw() {\n background(204);\n xoff = xoff + .01;\n var n = noise(xoff) * width;\n line(n, 0, n, height);\n}\n
\nvar noiseScale=0.02;\n\nfunction draw() {\n background(0);\n for (var x=0; x < width; x++) {\n var noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\n stroke(noiseVal*255);\n line(x, mouseY+noiseVal*80, x, height);\n }\n}\n
\n\nvar noiseVal;\n var noiseScale=0.02;\nfunction setup() {\n createCanvas(100,100);\n }\nfunction draw() {\n background(0);\n for (var y = 0; y < height; y++) {\n for (var x = 0; x < width/2; x++) {\n noiseDetail(2,0.2);\n noiseVal = noise((mouseX+x) * noiseScale,\n (mouseY+y) * noiseScale);\n stroke(noiseVal*255);\n point(x,y);\n noiseDetail(8,0.65);\n noiseVal = noise((mouseX + x + width/2) * noiseScale,\n (mouseY + y) * noiseScale);\n stroke(noiseVal*255);\n point(x + width/2, y);\n }\n }\n }\n
\n var xoff = 0.0;\n\nfunction setup() {\n noiseSeed(99);\n stroke(0, 10);\n}\n\nfunction draw() {\n xoff = xoff + .01;\n var n = noise(xoff) * width;\n line(n, 0, n, height);\n}\n
\n\nfunction setup() {\n var v = createVector(20,30);\n print(String(v)); // prints \"p5.Vector Object : [20, 30, 0]\"\n}\n
\nfunction setup() {\n var v = createVector(1, 2, 3);\n v.set(4,5,6); // Sets vector to [4, 5, 6]\n\n var v1 = createVector(0, 0, 0);\n var arr = [1, 2, 3];\n v1.set(arr); // Sets vector to [1, 2, 3]\n}\n
\n\nvar v1 = createVector(1, 2, 3);\nvar v2 = v.copy();\nprint(v1.x == v2.x && v1.y == v2.y && v1.z == v2.z);\n// Prints \"true\"\n
\n\nvar v = createVector(1, 2, 3);\nv.add(4,5,6);\n// v's compnents are set to [5, 7, 9]\n
\n\n// Static method\nvar v1 = createVector(1, 2, 3);\nvar v2 = createVector(2, 3, 4);\n\nvar v3 = p5.Vector.add(v1, v2);\n// v3 has components [3, 5, 7]\n
\n\nvar v = createVector(4, 5, 6);\nv.sub(1, 1, 1);\n// v's compnents are set to [3, 4, 5]\n
\n\n// Static method\nvar v1 = createVector(2, 3, 4);\nvar v2 = createVector(1, 2, 3);\n\nvar v3 = p5.Vector.sub(v1, v2);\n// v3 has compnents [1, 1, 1]\n
\n\nvar v = createVector(1, 2, 3);\nv.mult(2);\n// v's compnents are set to [2, 4, 6]\n
\n\n// Static method\nvar v1 = createVector(1, 2, 3);\nvar v2 = p5.Vector.mult(v1, 2);\n// v2 has compnents [2, 4, 6]\n
\n\nvar v = createVector(6, 4, 2);\nv.div(2); //v's compnents are set to [3, 2, 1]\n
\n\n// Static method\nvar v1 = createVector(6, 4, 2);\nvar v2 = p5.Vector.div(v, 2);\n// v2 has compnents [3, 2, 1]\n
\n\nvar v = createVector(20.0, 30.0, 40.0);\nvar m = v.mag(10);\nprint(m); // Prints \"53.85164807134504\"\n
\n\n// Static method\nvar v1 = createVector(6, 4, 2);\nprint(v1.magSq()); // Prints \"56\"\n
\n\nvar v1 = createVector(1, 2, 3);\nvar v2 = createVector(2, 3, 4);\n\nprint(v1.dot(v2)); // Prints \"20\"\n
\n\n//Static method\nvar v1 = createVector(1, 2, 3);\nvar v2 = createVector(3, 2, 1);\nprint (p5.Vector.dot(v1, v2)); // Prints \"10\"\n
\n\nvar v1 = createVector(1, 2, 3);\nvar v2 = createVector(1, 2, 3);\n\nv1.cross(v2); // v's components are [0, 0, 0]\n
\n\n// Static method\nvar v1 = createVector(1, 0, 0);\nvar v2 = createVector(0, 1, 0);\n\nvar crossProduct = p5.Vector.cross(v1, v2);\n// crossProduct has components [0, 0, 1]\n
\n\nvar v1 = createVector(1, 0, 0);\nvar v2 = createVector(0, 1, 0);\n\nvar distance = v1.dist(v2); // distance is 1.4142...\n
\n\n// Static method\nvar v1 = createVector(1, 0, 0);\nvar v2 = createVector(0, 1, 0);\n\nvar distance = p5.Vector.dist(v1,v2);\n// distance is 1.4142...\n
\n\nvar v = createVector(10, 20, 2);\n// v has compnents [10.0, 20.0, 2.0]\nv.normalize();\n// v's compnents are set to\n// [0.4454354, 0.8908708, 0.089087084]\n
\n\nvar v = createVector(10, 20, 2);\n// v has compnents [10.0, 20.0, 2.0]\nv.limit(5);\n// v's compnents are set to\n// [2.2271771, 4.4543543, 0.4454354]\n
\n\nvar v1 = createVector(10, 20, 2);\n// v has compnents [10.0, 20.0, 2.0]\nv1.setMag(10);\n// v's compnents are set to [6.0, 8.0, 0.0]\n
\n\nfunction setup() {\n var v1 = createVector(30,50);\n print(v1.heading()); // 1.0303768265243125\n\n var v1 = createVector(40,50);\n print(v1.heading()); // 0.8960553845713439\n\n var v1 = createVector(30,70);\n print(v1.heading()); // 1.1659045405098132\n}\n
\nvar v = createVector(10.0, 20.0);\n// v has compnents [10.0, 20.0, 0.0]\nv.rotate(HALF_PI);\n// v's compnents are set to [-20.0, 9.999999, 0.0]\n
\n\nvar v = createVector(1, 1, 0);\n\nv.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\n
\n\nvar v1 = createVector(0, 0, 0);\nvar v2 = createVector(100, 100, 0);\n\nvar v3 = p5.Vector.lerp(v1, v2, 0.5);\n// v3 has components [50,50,0]\n
\n\nfunction setup() {\n var v = createVector(20,30);\n print(v.array()); // Prints : Array [20, 30, 0]\n}\n
\nvar v = createVector(10.0, 20.0, 30.0);\nvar f = v.array();\nprint(f[0]); // Prints \"10.0\"\nprint(f[1]); // Prints \"20.0\"\nprint(f[2]); // Prints \"30.0\"\n
\n\nv1 = createVector(5,10,20);\nv2 = createVector(5,10,20);\nv3 = createVector(13,10,19);\n\nprint(v1.equals(v2.x,v2.y,v2.z)); // true\nprint(v1.equals(v3.x,v3.y,v3.z)); // false\n
\nvar v1 = createVector(10.0, 20.0, 30.0);\nvar v2 = createVector(10.0, 20.0, 30.0);\nvar v3 = createVector(0.0, 0.0, 0.0);\nprint (v1.equals(v2)) // true\nprint (v1.equals(v3)) // false\n
\n\nfunction draw() {\n background (200);\n\n // Create a variable, proportional to the mouseX,\n // varying from 0-360, to represent an angle in degrees.\n angleMode(DEGREES);\n var myDegrees = map(mouseX, 0,width, 0,360);\n\n // Display that variable in an onscreen text.\n // (Note the nfc() function to truncate additional decimal places,\n // and the \"\\xB0\" character for the degree symbol.)\n var readout = \"angle = \" + nfc(myDegrees,1,1) + \"\\xB0\"\n noStroke();\n fill (0);\n text (readout, 5, 15);\n\n // Create a p5.Vector using the fromAngle function,\n // and extract its x and y components.\n var v = p5.Vector.fromAngle(radians(myDegrees));\n var vx = v.x;\n var vy = v.y;\n\n push();\n translate (width/2, height/2);\n noFill();\n stroke (150);\n line (0,0, 30,0);\n stroke (0);\n line (0,0, 30*vx, 30*vy);\n pop()\n}\n
\n\nvar v = p5.Vector.random2D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.0] or\n// [-0.4695841, -0.14366731, 0.0] or\n// [0.6091097, -0.22805278, 0.0]\n
\n\nvar v = p5.Vector.random3D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.599168] or\n// [-0.4695841, -0.14366731, -0.8711202] or\n// [0.6091097, -0.22805278, -0.7595902]\n
\n\nvar v1 = createVector(1, 0, 0);\nvar v2 = createVector(0, 1, 0);\n\nvar angle = p5.Vector.angleBetween(v1, v2);\n// angle is PI/2\n
\n\nrandomSeed(99);\nfor (var i=0; i < 100; i++) {\n var r = random(0, 255);\n stroke(r);\n line(i, 0, i, 100);\n}\n
\n\nfor (var i = 0; i < 100; i++) {\n var r = random(50);\n stroke(r*5);\n line(50, i, 50+r, i);\n}\n
\n\nfor (var i = 0; i < 100; i++) {\n var r = random(-50, 50);\n line(50,i,50+r,i);\n}\n
\n\n// Get a random element from an array\nvar words = [ \"apple\", \"bear\", \"cat\", \"dog\" ];\nvar index = floor(random(words.length)); // Convert to integer\ntext(words[index],10,50); // Displays one of the four words\n
\nfor (var y = 0; y < 100; y++) {\n var x = randomGaussian(50,15);\n line(50, y, x, y);\n}\n
\n \nvar distribution = new Array(360);\n\nfunction setup() {\n createCanvas(100, 100);\n for (var i = 0; i < distribution.length; i++) {\n distribution[i] = floor(randomGaussian(0,15));\n }\n}\n\nfunction draw() {\n background(204);\n translate(width/2, width/2);\n for (var i = 0; i < distribution.length; i++) {\n rotate(TWO_PI/distribution.length);\n stroke(0);\n var dist = abs(distribution[i]);\n line(0, 0, dist, 0);\n }\n}\n
\n \nvar a = PI;\nvar c = cos(a);\nvar ac = acos(c);\n// Prints: \"3.1415927 : -1.0 : 3.1415927\"\nprintln(a + \" : \" + c + \" : \" + ac);\n
\n\nvar a = PI + PI/4.0;\nvar c = cos(a);\nvar ac = acos(c);\n// Prints: \"3.926991 : -0.70710665 : 2.3561943\"\nprintln(a + \" : \" + c + \" : \" + ac);\n
\n\nvar a = PI + PI/3;\nvar s = sin(a);\nvar as = asin(s);\n// Prints: \"1.0471976 : 0.86602545 : 1.0471976\"\nprintln(a + \" : \" + s + \" : \" + as);\n
\n\nvar a = PI + PI/3.0;\nvar s = sin(a);\nvar as = asin(s);\n// Prints: \"4.1887903 : -0.86602545 : -1.0471976\"\nprintln(a + \" : \" + s + \" : \" + as);\n
\n\nvar a = PI + PI/3;\nvar t = tan(a);\nvar at = atan(t);\n// Prints: \"1.0471976 : 1.7320509 : 1.0471976\"\nprintln(a + \" : \" + t + \" : \" + at);\n
\n\nvar a = PI + PI/3.0;\nvar t = tan(a);\nvar at = atan(t);\n// Prints: \"4.1887903 : 1.7320513 : 1.0471977\"\nprintln(a + \" : \" + t + \" : \" + at);\n
\n\nfunction draw() {\n background(204);\n translate(width/2, height/2);\n var a = atan2(mouseY-height/2, mouseX-width/2);\n rotate(a);\n rect(-30, -5, 60, 10);\n}\n
\n\nvar a = 0.0;\nvar inc = TWO_PI/25.0;\nfor (var i = 0; i < 25; i++) {\n line(i*4, 50, i*4, 50+cos(a)*40.0);\n a = a + inc;\n}\n
\n\nvar a = 0.0;\nvar inc = TWO_PI/25.0;\nfor (var i = 0; i < 25; i++) {\n line(i*4, 50, i*4, 50+sin(a)*40.0);\n a = a + inc;\n}\n
\n\n var a = 0.0;\n var inc = TWO_PI/50.0;\n for (var i = 0; i < 100; i = i+2) {\n line(i, 50, i, 50+tan(a)*2.0);\n a = a + inc;\n }\n
\n\nvar rad = PI/4;\nvar deg = degrees(rad);\nprintln(rad + \" radians is \" + deg + \" degrees\");\n// Prints: 45 degrees is 0.7853981633974483 radians\n
\n\nvar deg = 45.0;\nvar rad = radians(deg);\nprintln(deg + \" degrees is \" + rad + \" radians\");\n// Prints: 45 degrees is 0.7853981633974483 radians\n
\n\nfunction draw(){\n background(204);\n angleMode(DEGREES); // Change the mode to DEGREES\n var a = atan2(mouseY-height/2, mouseX-width/2);\n translate(width/2, height/2);\n push();\n rotate(a);\n rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\n pop();\n angleMode(RADIANS); // Change the mode to RADIANS\n rotate(a); // var a stays the same\n rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\n}\n
\n\ntextSize(16);\ntextAlign(RIGHT);\ntext(\"ABCD\", 50, 30);\ntextAlign(CENTER);\ntext(\"EFGH\", 50, 50);\ntextAlign(LEFT);\ntext(\"IJKL\", 50, 70);\n
\n\n// Text to display. The \"\\n\" is a \"new line\" character\nlines = \"L1\\nL2\\nL3\";\ntextSize(12);\n\ntextLeading(10); // Set leading to 10\ntext(lines, 10, 25);\n\ntextLeading(20); // Set leading to 20\ntext(lines, 40, 25);\n\ntextLeading(30); // Set leading to 30\ntext(lines, 70, 25);\n
\n\ntextSize(12);\ntext(\"Font Size 12\", 10, 30);\ntextSize(14);\ntext(\"Font Size 14\", 10, 60);\ntextSize(16);\ntext(\"Font Size 16\", 10, 90);\n
\n\nstrokeWeight(0);\ntextSize(12);\ntextStyle(NORMAL);\ntext(\"Font Style Normal\", 10, 30);\ntextStyle(ITALIC);\ntext(\"Font Style Italic\", 10, 60);\ntextStyle(BOLD);\ntext(\"Font Style Bold\", 10, 90);\n
\n\ntextSize(28);\n\nvar aChar = 'P';\nvar cWidth = textWidth(aChar);\ntext(aChar, 0, 40);\nline(cWidth, 0, cWidth, 50);\n\nvar aString = \"p5.js\";\nvar sWidth = textWidth(aString);\ntext(aString, 0, 85);\nline(sWidth, 50, sWidth, 100);\n
\n\nvar base = height * 0.75;\nvar scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nvar asc = textAscent() * scalar; // Calc ascent\nline(0, base - asc, width, base - asc);\ntext(\"dp\", 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\nasc = textAscent() * scalar; // Recalc ascent\nline(40, base - asc, width, base - asc);\ntext(\"dp\", 40, base); // Draw text on baseline\n
\n\nvar base = height * 0.75;\nvar scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nvar desc = textDescent() * scalar; // Calc ascent\nline(0, base+desc, width, base+desc);\ntext(\"dp\", 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\ndesc = textDescent() * scalar; // Recalc ascent\nline(40, base + desc, width, base + desc);\ntext(\"dp\", 40, base); // Draw text on baseline\n
\n\ntextSize(32);\ntext(\"word\", 10, 30);\nfill(0, 102, 153);\ntext(\"word\", 10, 60);\nfill(0, 102, 153, 51);\ntext(\"word\", 10, 90);\n
\n\ns = \"The quick brown fox jumped over the lazy dog.\";\nfill(50);\ntext(s, 10, 10, 70, 80); // Text wraps within text box\n
\n\nfill(0);\ntextSize(12);\ntextFont(\"Georgia\");\ntext(\"Georgia\", 12, 30);\ntextFont(\"Helvetica\");\ntext(\"Helvetica\", 12, 60);\n
\n\nvar fontRegular, fontItalic, fontBold;\nfunction preload() {\n fontRegular = loadFont(\"assets/Regular.otf\");\n fontItalic = loadFont(\"assets/Italic.ttf\");\n fontBold = loadFont(\"assets/Bold.ttf\");\n}\nfunction setup() {\n background(210);\n fill(0).strokeWeight(0).textSize(10);\n textFont(fontRegular);\n text(\"Font Style Normal\", 10, 30);\n textFont(fontItalic);\n text(\"Font Style Italic\", 10, 50);\n textFont(fontBold);\n text(\"Font Style Bold\", 10, 70);\n}\n
\n\nvar font;\nvar textString = 'Lorem ipsum dolor sit amet.';\nfunction preload() {\n font = loadFont('./assets/Regular.otf');\n};\nfunction setup() {\n background(210);\n\n var bbox = font.textBounds(textString, 10, 30, 12);\n fill(255);\n stroke(0);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n fill(0);\n noStroke();\n\n textFont(font);\n textSize(12);\n text(textString, 10, 30);\n};\n
\n\nfunction setup() {\n\nvar myArray = new Array(\"Mango\", \"Apple\", \"Papaya\")\nprint(myArray) // [\"Mango\", \"Apple\", \"Papaya\"]\n\nappend(myArray, \"Peach\")\nprint(myArray) // [\"Mango\", \"Apple\", \"Papaya\", \"Peach\"]\n\n}\n
\n function setup() {\n\n var src = new Array(\"A\", \"B\", \"C\");\n var dst = new Array( 1 , 2 , 3 );\n var srcPosition = 1;\n var dstPosition = 0;\n var length = 2;\n\n print(src); // [\"A\", \"B\", \"C\"]\n print(dst); // [ 1 , 2 , 3 ]\n\n arrayCopy(src, srcPosition, dst, dstPosition, length);\n print(dst); // [\"B\", \"C\", 3]\n\n }\n
\nfunction setup() {\n var arr1 = new Array(\"A\", \"B\", \"C\");\n var arr2 = new Array( 1 , 2 , 3 );\n\n print(arr1); // [\"A\",\"B\",\"C\"]\n print(arr2); // [1,2,3]\n\n var arr3 = concat(arr1, arr2);\n\n print(arr1); // [\"A\",\"B\",\"C\"]\n print(arr2); // [1,2,3]\n print(arr3); // [\"A\",\"B\",\"C\",1,2,3]\n\n}\n
\nfunction setup() {\n var myArray = new Array(\"A\", \"B\", \"C\");\n print(myArray); // [\"A\",\"B\",\"C\"]\n\n reverse(myArray);\n print(myArray); // [\"C\",\"B\",\"A\"]\n}\n
\nfunction setup() {\n var myArray = new Array(\"A\", \"B\", \"C\");\n print(myArray); // [\"A\",\"B\",\"C\"]\n\n var newArray = shorten(myArray);\n print(myArray); // [\"A\",\"B\",\"C\"]\n print(newArray); // [\"A\",\"B\"]\n}\n
\nfunction setup() {\n var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];\n print(regularArr);\n shuffle(regularArr, true); // force modifications to passed array\n print(regularArr);\n\n // By default shuffle() returns a shuffled cloned array:\n var newArr = shuffle(regularArr);\n print(regularArr);\n print(newArr);\n}\n
\nfunction setup() {\n var words = new Array(\"banana\", \"apple\", \"pear\",\"lime\");\n print(words); // [\"banana\", \"apple\", \"pear\", \"lime\"]\n var count = 4; // length of array\n\n sort(words, count);\n print(words); // [\"apple\", \"banana\", \"lime\", \"pear\"]\n}\n
\nfunction setup() {\n var numbers = new Array(2,6,1,5,14,9,8,12);\n print(numbers); // [2,6,1,5,14,9,8,12]\n var count = 5; // Less than the length of the array\n\n sort(numbers, count);\n print(numbers); // [1,2,5,6,14,9,8,12]\n}\n
\nfunction setup() {\n var myArray = new Array(0,1,2,3,4);\n var insArray = new Array(\"A\",\"B\",\"C\");\n print(myArray); // [0,1,2,3,4]\n print(insArray); // [\"A\",\"B\",\"C\"]\n\n splice(myArray, insArray, 3);\n print(myArray); // [0,1,2,\"A\",\"B\",\"C\",3,4]\n}\n
\nfunction setup() {\n var myArray = new Array(1,2,3,4,5);\n print(myArray); // [1,2,3,4,5]\n\n var sub1 = subset(myArray, 0, 3);\n var sub2 = subset(myArray, 2, 2);\n print(sub1); // [1,2,3]\n print(sub2); // [3,4]\n}\n
\nvar str = '20';\nvar diameter = float(str);\nellipse(width/2, height/2, diameter, diameter);\n
\nprint(int(\"10\")); // 10\nprint(int(10.31)); // 10\nprint(int(-10)); // -10\nprint(int(true)); // 1\nprint(int(false)); // 0\nprint(int([false, true, \"10.3\", 9.8])); // [0, 1, 10, 9]\n
\nprint(str(\"10\")); // \"10\"\nprint(str(10.31)); // \"10.31\"\nprint(str(-10)); // \"-10\"\nprint(str(true)); // \"true\"\nprint(str(false)); // \"false\"\nprint(str([true, \"10.3\", 9.8])); // [ \"true\", \"10.3\", \"9.8\" ]\n
\nprint(boolean(0)); // false\nprint(boolean(1)); // true\nprint(boolean(\"true\")); // true\nprint(boolean(\"abcd\")); // false\nprint(boolean([0, 12, \"true\"])); // [false, true, false]\n
\nprint(byte(127)); // 127\nprint(byte(128)); // -128\nprint(byte(23.4)); // 23\nprint(byte(\"23.4\")); // 23\nprint(byte(true)); // 1\nprint(byte([0, 255, \"100\"])); // [0, -1, 100]\n
\nprint(char(65)); // \"A\"\nprint(char(\"65\")); // \"A\"\nprint(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\nprint(join(char([65, 66, 67]), '')); // \"ABC\"\n
\nprint(unchar(\"A\")); // 65\nprint(unchar([\"A\", \"B\", \"C\"])); // [ 65, 66, 67 ]\nprint(unchar(split(\"ABC\", \"\"))); // [ 65, 66, 67 ]\n
\nprint(hex(255)); // \"000000FF\"\nprint(hex(255, 6)); // \"0000FF\"\nprint(hex([0, 127, 255], 6)); // [ \"000000\", \"00007F\", \"0000FF\" ]\n
\nprint(unhex(\"A\")); // 10\nprint(unhex(\"FF\")); // 255\nprint(unhex([\"FF\", \"AA\", \"00\"])); // [ 255, 170, 0 ]\n
\nvar array = [\"Hello\", \"world!\"]\nvar separator = \" \"\nvar message = join(array, separator);\ntext(message, 5, 50);\n
\n\nvar string = \"Hello p5js*!\"\nvar regexp = \"p5js\\\\*\"\nvar match = match(string, regexp);\ntext(match, 5, 50);\n
\n\nvar string = \"Hello p5js*! Hello world!\"\nvar regexp = \"Hello\"\nmatchAll(string, regexp);\n
\n\nfunction setup() {\n background(200);\n var num = 112.53106115;\n\n noStroke();\n fill(0);\n textSize(14);\n // Draw formatted numbers\n text(nf(num, 5, 2), 10, 20);\n\n text(nf(num, 4, 3), 10, 55);\n\n text(nf(num, 3, 6), 10, 85);\n\n // Draw dividing lines\n stroke(120);\n line(0, 30, width, 30);\n line(0, 65, width, 65);\n}\n
\n\nfunction setup() {\n background(200);\n var num = 11253106.115;\n var numArr = new Array(1,1,2);\n\n noStroke();\n fill(0);\n textSize(12);\n\n // Draw formatted numbers\n text(nfc(num, 4, 2), 10, 30);\n text(nfc(numArr, 2, 1), 10, 80);\n\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n}\n
\n\nfunction setup() {\n background(200);\n var num1 = 11253106.115;\n var num2 = -11253106.115;\n\n noStroke();\n fill(0);\n textSize(12);\n\n // Draw formatted numbers\n text(nfp(num1, 4, 2), 10, 30);\n text(nfp(num2, 4, 2), 10, 80);\n\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n}\n
\n\nfunction setup() {\n background(200);\n var num1 = 11253106.115;\n var num2 = -11253106.115;\n\n noStroke();\n fill(0);\n textSize(12);\n // Draw formatted numbers\n text(nfs(num1, 4, 2), 10, 30);\n\n text(nfs(num2, 4, 2), 10, 80);\n\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n}\n
\n\nvar names = \"Pat,Xio,Alex\"\nvar splitString = split(names, \",\");\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\n
\n\nfunction setup() {\n var myStr = \"Mango, Banana, Lime\";\n var myStrArr = splitTokens(myStr, \",\");\n\n print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n}\n
\n\nvar string = trim(\" No new lines\\n \");\ntext(string +\" here\", 2, 50);\n
\n\nvar day = day();\ntext(\"Current day: \\n\" + day, 5, 50);\n
\n\nvar hour = hour();\ntext(\"Current hour:\\n\" + hour, 5, 50);\n
\n\nvar minute = minute();\ntext(\"Current minute: \\n\" + minute, 5, 50);\n
\n\nvar millisecond = millis();\ntext(\"Milliseconds \\nrunning: \\n\" + millisecond, 5, 40);\n
\n\nvar month = month();\ntext(\"Current month: \\n\" + month, 5, 50);\n
\n\nvar second = second();\ntext(\"Current second: \\n\" + second, 5, 50);\n
\n\nvar year = year();\ntext(\"Current year: \\n\" + year, 5, 50);\n
\n\nfunction setup() {\n createCanvas(100,100);\n //translates canvas 50px down\n select('canvas').position(100, 100);\n}\n
\n// these are all valid calls to select()\nvar a = select('#moo');\nvar b = select('#blah', '#myContainer');\nvar c = select('#foo', b);\nvar d = document.getElementById('beep');\nvar e = select('p', d);\n
\nfunction setup() {\n createButton('btn');\n createButton('2nd btn');\n createButton('3rd btn');\n var buttons = selectAll('button');\n\n for (var i = 0; i < buttons.length; i++){\n buttons[i].size(100,100);\n }\n}\n
\n// these are all valid calls to selectAll()\nvar a = selectAll('.moo');\nvar b = selectAll('div');\nvar c = selectAll('button', '#myContainer');\nvar d = select('#container');\nvar e = selectAll('p', d);\nvar f = document.getElementById('beep');\nvar g = select('.blah', f);\n
\nfunction setup() {\n createCanvas(100, 100);\n createDiv('this is some text');\n createP('this is a paragraph');\n}\nfunction mousePressed() {\n removeElements(); // this will remove the div and p, not canvas\n}\n
\nvar myDiv;\nfunction setup() {\n myDiv = createDiv('this is some text');\n}\n
\nvar myP;\nfunction setup() {\n myP = createP('this is some text');\n}\n
\nvar mySpan;\nfunction setup() {\n mySpan = createSpan('this is some text');\n}\n
\nvar img;\nfunction setup() {\n img = createImg('http://p5js.org/img/asterisk-01.png');\n}\n
\nvar myLink;\nfunction setup() {\n myLink = createA('http://p5js.org/', 'this is a link');\n}\n
\nvar slider;\nfunction setup() {\n slider = createSlider(0, 255, 100);\n slider.position(10, 10);\n slider.style('width', '80px');\n}\n\nfunction draw() {\n var val = slider.value();\n background(val);\n}\n
\nvar button;\nfunction setup() {\n createCanvas(100, 100);\n background(0);\n button = createButton('click me');\n button.position(19, 19);\n button.mousePressed(changeBG);\n}\n\nfunction changeBG() {\n var val = random(255);\n background(val);\n}\n
\nvar checkbox;\n\nfunction setup() {\n checkbox = createCheckbox('label', false);\n checkbox.changed(myCheckedEvent);\n}\n\nfunction myCheckedEvent() {\n if (this.checked()) {\n console.log(\"Unchecking!\");\n } else {\n console.log(\"Checking!\");\n }\n\n
\nvar sel;\n\nfunction setup() {\n textAlign(CENTER);\n background(200);\n sel = createSelect();\n sel.position(10, 10);\n sel.option('pear');\n sel.option('kiwi');\n sel.option('grape');\n sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n var item = sel.value();\n background(200);\n text(\"it's a \"+item+\"!\", 50, 50);\n}\n
\nfunction setup(){\n var inp = createInput('');\n inp.input(myInputEvent);\n}\n\nfunction myInputEvent(){\n console.log('you are typing: ', this.value());\n}\n\n
\nvar capture;\n\nfunction setup() {\n createCanvas(480, 120);\n capture = createCapture(VIDEO);\n}\n\nfunction draw() {\n image(capture, 0, 0, width, width*capture.height/capture.width);\n filter(INVERT);\n}\n
\nfunction setup() {\n createCanvas(480, 120);\n var constraints = {\n video: {\n mandatory: {\n minWidth: 1280,\n minHeight: 720\n },\n optional: [\n { maxFrameRate: 10 }\n ]\n },\n audio: true\n };\n createCapture(constraints, function(stream) {\n console.log(stream);\n });\n}\n
\nvar h2 = createElement('h2','im an h2 p5.element!');\n
\n var div = createDiv('div');\n div.addClass('myClass');\n
\n var div0 = createDiv('this is the parent');\n var div1 = createDiv('this is the child');\n div0.child(div1); // use p5.Element\n
\n var div0 = createDiv('this is the parent');\n var div1 = createDiv('this is the child');\n div1.id('apples');\n div0.child('apples'); // use id\n
\n var div0 = createDiv('this is the parent');\n var elt = document.getElementById('myChildDiv');\n div0.child(elt); // use element from page\n
\nfunction setup() {\n var div = createDiv('').size(10,10);\n div.style('background-color','orange');\n div.center();\n\n}\n
\n var div = createDiv('').size(100,100);\n div.style('background-color','orange');\n div.html('hi');\n
\n function setup() {\n var cnv = createCanvas(100, 100);\n // positions canvas 50px to the right and 100px\n // below upper left corner of the window\n cnv.position(50, 100);\n }\n
\nvar myDiv = createDiv(\"I like pandas.\");\nmyDiv.style(\"font-size\", \"18px\");\nmyDiv.style(\"color\", \"#ff0000\");\n
\nvar col = color(25,23,200,50);\nvar button = createButton(\"button\");\nbutton.style(\"background-color\", col);\nbutton.position(10, 10);\n
\nvar myDiv = createDiv(\"I like lizards.\");\nmyDiv.style(\"position\", 20, 20);\nmyDiv.style(\"rotate\", 45);\n
\nvar myDiv;\nfunction setup() {\n background(200);\n myDiv = createDiv(\"I like gray.\");\n myDiv.position(20, 20);\n}\n\nfunction draw() {\n myDiv.style(\"font-size\", mouseX+\"px\");\n}\n
\n var myDiv = createDiv(\"I like pandas.\");\n myDiv.attribute(\"align\", \"center\");\n
\n// gets the value\nvar inp;\nfunction setup() {\n inp = createInput('');\n}\n\nfunction mousePressed() {\n print(inp.value());\n}\n
\n// sets the value\nvar inp;\nfunction setup() {\n inp = createInput('myValue');\n}\n\nfunction mousePressed() {\n inp.value(\"myValue\");\n}\n
\n var div = createDiv('div');\n div.attribute(\"display\", \"none\");\n div.show(); // turns display to block\n
\nvar div = createDiv('this is a div');\ndiv.hide();\n
\n var div = createDiv('this is a div');\n div.size(100, 100);\n
\nvar myDiv = createDiv('this is some text');\nmyDiv.remove();\n
\nfunction setup() {\n audioEl = createAudio('assets/beat.mp3');\n audioEl.showControls(true);\n audioEl.onended(sayDone);\n}\n\nfunction sayDone(elt) {\n alert('done playing ' + elt.src );\n}\n
\nfunction setup() {\n background(255,255,255);\n\n audioEl = createAudio('assets/beat.mp3');\n audioEl.showControls();\n\n // schedule three calls to changeBackground\n audioEl.addCue(0.5, changeBackground, color(255,0,0) );\n audioEl.addCue(1.0, changeBackground, color(0,255,0) );\n audioEl.addCue(2.5, changeBackground, color(0,0,255) );\n audioEl.addCue(3.0, changeBackground, color(0,255,255) );\n audioEl.addCue(4.2, changeBackground, color(255,255,0) );\n audioEl.addCue(5.0, changeBackground, color(255,255,0) );\n}\n\nfunction changeBackground(val) {\n background(val);\n}\n
Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the Web Audio API\n.
", "itemtype": "method", "name": "getAudioContext", "return": { "description": "AudioContext for this sketch", "type": "Object" }, "class": "p5.sound", "module": "p5.sound", "submodule": "p5.sound" }, { "file": "lib/addons/p5.sound.js", "line": 221, "description": "Determine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats", "class": "p5.sound", "module": "p5.sound", "submodule": "p5.sound" }, { "file": "lib/addons/p5.sound.js", "line": 288, "description": "Master contains AudioContext and the master sound output.", "class": "p5.sound", "module": "p5.sound", "submodule": "p5.sound" }, { "file": "lib/addons/p5.sound.js", "line": 323, "description": "Returns a number representing the master amplitude (volume) for sound \nin this sketch.", "itemtype": "method", "name": "getMasterVolume", "return": { "description": "Master amplitude (volume) for sound in this sketch.\n Should be between 0.0 (silence) and 1.0.", "type": "Number" }, "class": "p5.sound", "module": "p5.sound", "submodule": "p5.sound" }, { "file": "lib/addons/p5.sound.js", "line": 334, "description": "Scale the output of all sound in this sketch
\nScaled between 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide arampTime
parameter. For more\ncomplex fades, see the Env class.\n\nAlternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.\n\nHow This Works: When you load the p5.sound module, it\ncreates a single instance of p5sound. All sound objects in this\nmodule output to p5sound before reaching your computer's output.\nSo if you change the amplitude of p5sound, it impacts all of the\nsound in this module.
\n\nIf no value is provided, returns a Web Audio API Gain Node
", "itemtype": "method", "name": "masterVolume", "params": [ { "name": "volume", "description": "Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator", "type": "Number|Object" }, { "name": "rampTime", "description": "Fade for t seconds", "type": "Number", "optional": true }, { "name": "timeFromNow", "description": "Schedule this event to happen at\n t seconds in the future", "type": "Number", "optional": true } ], "class": "p5.sound", "module": "p5.sound", "submodule": "p5.sound" }, { "file": "lib/addons/p5.sound.js", "line": 376, "description": "p5.soundOut is the p5.sound master output. It sends output to\nthe destination of this window's web audio context. It contains \nWeb Audio API nodes including a dyanmicsCompressor (.limiter
),\nand Gain Nodes for .input
and .output
.",
"itemtype": "property",
"name": "p5.soundOut",
"type": "{Object}",
"class": "p5.sound",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 386,
"description": "a silent connection to the DesinationNode\nwhich will ensure that anything connected to it\nwill not be garbage collected",
"access": "private",
"tagname": "",
"class": "p5.sound",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 402,
"description": "Returns a number representing the sample rate, in samples per second,\nof all sound objects in this audio context. It is determined by the\nsampling rate of your operating system's sound card, and it is not\ncurrently possile to change.\nIt is often 44100, or twice the range of human hearing.",
"itemtype": "method",
"name": "sampleRate",
"return": {
"description": "samplerate samples per second",
"type": "Number"
},
"class": "p5.sound",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 415,
"description": "Returns the closest MIDI note value for\na given frequency.",
"params": [
{
"name": "frequency",
"description": "A freqeuncy, for example, the \"A\"\n above Middle C is 440Hz",
"type": "Number"
}
],
"return": {
"description": "MIDI note value",
"type": "Number"
},
"class": "p5.sound",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 428,
"description": "Returns the frequency value of a MIDI note value.\nGeneral MIDI treats notes as integers where middle C\nis 60, C# is 61, D is 62 etc. Useful for generating\nmusical frequencies with oscillators.",
"itemtype": "method",
"name": "midiToFreq",
"params": [
{
"name": "midiNote",
"description": "The number of a MIDI note",
"type": "Number"
}
],
"return": {
"description": "Frequency value of the given MIDI note",
"type": "Number"
},
"example": [
"\n\nvar notes = [60, 64, 67, 72];\nvar i = 0;\n\nfunction setup() {\n osc = new p5.Oscillator('Triangle');\n osc.start();\n frameRate(1);\n}\n\nfunction draw() {\n var freq = midiToFreq(notes[i]);\n osc.freq(freq);\n i++;\n if (i >= notes.length){\n i = 0;\n }\n}\n
\nfunction preload() {\n // set the global sound formats\n soundFormats('mp3', 'ogg');\n \n // load either beatbox.mp3, or .ogg, depending on browser\n mySound = loadSound('../sounds/beatbox.mp3');\n}\n\nfunction setup() {\n mySound.play();\n}\n
\nfunction preload() {\n mySound = loadSound('assets/doorbell.mp3');\n}\n\nfunction setup() {\n mySound.setVolume(0.1);\n mySound.play();\n}\n
restart
and\nsustain
. Play Mode determines what happens to a\np5.SoundFile if it is triggered while in the middle of playback.\nIn sustain mode, playback will continue simultaneous to the\nnew playback. In restart mode, play() will stop playback\nand start over. Sustain is the default mode.",
"itemtype": "method",
"name": "playMode",
"params": [
{
"name": "str",
"description": "'restart' or 'sustain'",
"type": "String"
}
],
"example": [
"\n\nfunction setup(){\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\nfunction mouseClicked() {\n mySound.playMode('sustain');\n mySound.play();\n}\nfunction keyPressed() {\n mySound.playMode('restart');\n mySound.play();\n}\n \n
\nvar soundFile;\n\nfunction preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');\n}\nfunction setup() {\n background(0, 255, 0);\n soundFile.setVolume(0.1);\n soundFile.loop();\n}\nfunction keyTyped() {\n if (key == 'p') {\n soundFile.pause();\n background(255, 0, 0);\n }\n}\n\nfunction keyReleased() {\n if (key == 'p') {\n soundFile.play();\n background(0, 255, 0);\n }\n
\nrampTime
parameter. For more\ncomplex fades, see the Env class.\n\nAlternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.",
"itemtype": "method",
"name": "setVolume",
"params": [
{
"name": "volume",
"description": "Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator",
"type": "Number|Object"
},
{
"name": "rampTime",
"description": "Fade for t seconds",
"type": "Number",
"optional": true
},
{
"name": "timeFromNow",
"description": "Schedule this event to happen at\n t seconds in the future",
"type": "Number",
"optional": true
}
],
"class": "p5.SoundFile",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 1365,
"description": "Set the stereo panning of a p5.sound object to\na floating point number between -1.0 (left) and 1.0 (right).\nDefault is 0.0 (center).",
"itemtype": "method",
"name": "pan",
"params": [
{
"name": "panValue",
"description": "Set the stereo panner",
"type": "Number",
"optional": true
},
{
"name": "timeFromNow",
"description": "schedule this event to happen\n seconds from now",
"type": "Number"
}
],
"example": [
"\n\n\n var ball = {};\n var soundFile;\n\n function setup() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/beatbox.mp3');\n }\n \n function draw() {\n background(0);\n ball.x = constrain(mouseX, 0, width);\n ellipse(ball.x, height/2, 20, 20)\n }\n \n function mousePressed(){\n // map the ball's x location to a panning degree \n // between -1.0 (left) and 1.0 (right)\n var panning = map(ball.x, 0., width,-1.0, 1.0);\n soundFile.pan(panning);\n soundFile.play();\n }\n
\nvar song;\n\nfunction preload() {\n song = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n song.loop();\n}\n\nfunction draw() {\n background(200);\n \n // Set the rate to a range between 0.1 and 4\n // Changing the rate also alters the pitch\n var speed = map(mouseY, 0.1, height, 0, 2);\n speed = constrain(speed, 0.01, 4);\n song.rate(speed);\n \n // Draw a circle to show what is going on\n stroke(0);\n fill(51, 100);\n ellipse(mouseX, 100, 48, 48);\n}\n\n
\n \nvar drum;\n\nfunction preload() {\n drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n drum.reverseBuffer();\n drum.play();\n}\n\n
\n \nfunction setup() {\n background(0);\n noStroke();\n fill(255);\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n \n mySound = loadSound('assets/beat.mp3');\n\n // schedule calls to changeText\n mySound.addCue(0.50, changeText, \"hello\" );\n mySound.addCue(1.00, changeText, \"p5\" );\n mySound.addCue(1.50, changeText, \"what\" );\n mySound.addCue(2.00, changeText, \"do\" );\n mySound.addCue(2.50, changeText, \"you\" );\n mySound.addCue(3.00, changeText, \"want\" );\n mySound.addCue(4.00, changeText, \"to\" );\n mySound.addCue(5.00, changeText, \"make\" );\n mySound.addCue(6.00, changeText, \"?\" );\n}\n\nfunction changeText(val) {\n background(0);\n text(val, width/2, height/2);\n}\n\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n if (mySound.isPlaying() ) {\n mySound.stop();\n } else {\n mySound.play();\n }\n }\n}\n
\nfunction preload(){\n sound1 = loadSound('assets/beat.mp3');\n sound2 = loadSound('assets/drum.mp3');\n}\nfunction setup(){\n amplitude = new p5.Amplitude();\n sound1.play();\n sound2.play();\n amplitude.setInput(sound2);\n}\nfunction draw() {\n background(0);\n fill(255);\n var level = amplitude.getLevel();\n var size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\nfunction mouseClicked(){\n sound1.stop();\n sound2.stop();\n}\n
\nfunction preload(){\n sound = loadSound('assets/beat.mp3');\n}\nfunction setup() { \n amplitude = new p5.Amplitude();\n sound.play();\n}\nfunction draw() {\n background(0);\n fill(255);\n var level = amplitude.getLevel();\n var size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\nfunction mouseClicked(){\n sound.stop();\n}\n
getEnergy()
.",
"itemtype": "method",
"name": "analyze",
"params": [
{
"name": "bins",
"description": "Must be a power of two between\n 16 and 1024. Defaults to 1024.",
"type": "Number",
"optional": true
},
{
"name": "scale",
"description": "If \"dB,\" returns decibel\n float measurements between\n -140 and 0 (max).\n Otherwise returns integers from 0-255.",
"type": "Number",
"optional": true
}
],
"return": {
"description": "spectrum Array of energy (amplitude/volume)\n values across the frequency spectrum.\n Lowest energy (silence) = 0, highest\n possible is 255.",
"type": "Array"
},
"example": [
"\n\nvar osc;\nvar fft;\n\nfunction setup(){\n createCanvas(100,100);\n osc = new p5.Oscillator();\n osc.amp(0);\n osc.start();\n fft = new p5.FFT();\n}\n\nfunction draw(){\n background(0);\n\n var freq = map(mouseX, 0, 800, 20, 15000);\n freq = constrain(freq, 1, 20000);\n osc.freq(freq);\n\n var spectrum = fft.analyze(); \n noStroke();\n fill(0,255,0); // spectrum is green\n for (var i = 0; i< spectrum.length; i++){\n var x = map(i, 0, spectrum.length, 0, width);\n var h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width / spectrum.length, h );\n }\n\n stroke(255);\n text('Freq: ' + round(freq)+'Hz', 10, 10); \n\n isMouseOverCanvas();\n}\n\n// only play sound when mouse is over canvas\nfunction isMouseOverCanvas() {\n var mX = mouseX, mY = mouseY;\n if (mX > 0 && mX < width && mY < height && mY > 0) {\n osc.amp(0.5, 0.2);\n } else {\n osc.amp(0, 0.2);\n }\n}\n
\n\n\nfunction setup(){\ncnv = createCanvas(800,400);\nsound = new p5.AudioIn();\nsound.start();\nfft = new p5.FFT();\nsound.connect(fft);\n}\n\n\nfunction draw(){\n\nvar centroidplot = 0.0;\nvar spectralCentroid = 0;\n\n\nbackground(0);\nstroke(0,255,0);\nvar spectrum = fft.analyze(); \nfill(0,255,0); // spectrum is green\n\n//draw the spectrum\n\nfor (var i = 0; i< spectrum.length; i++){\n var x = map(log(i), 0, log(spectrum.length), 0, width);\n var h = map(spectrum[i], 0, 255, 0, height);\n var rectangle_width = (log(i+1)-log(i))*(width/log(spectrum.length));\n rect(x, height, rectangle_width, -h )\n}\n\nvar nyquist = 22050;\n\n// get the centroid\nspectralCentroid = fft.getCentroid();\n\n// the mean_freq_index calculation is for the display.\nvar mean_freq_index = spectralCentroid/(nyquist/spectrum.length);\n\ncentroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, width);\n\n\nstroke(255,0,0); // the line showing where the centroid is will be red\n\nrect(centroidplot, 0, width / spectrum.length, height)\nnoStroke();\nfill(255,255,255); // text is white\ntextSize(40);\ntext(\"centroid: \"+round(spectralCentroid)+\" Hz\", 10, 40);\n}\n
\nvar osc = new p5.Oscillator(300);\nosc.start();\nosc.freq(40, 10);\n
new p5.SinOsc()
.\nThis creates a Sine Wave Oscillator and is\nequivalent to new p5.Oscillator('sine')\n
or creating a p5.Oscillator and then calling\nits method setType('sine')
.\nSee p5.Oscillator for methods.",
"itemtype": "method",
"name": "p5.SinOsc",
"params": [
{
"name": "freq",
"description": "Set the frequency",
"type": "[Number]"
}
],
"class": "p5.Oscillator",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 4760,
"description": "Constructor: new p5.TriOsc()
.\nThis creates a Triangle Wave Oscillator and is\nequivalent to new p5.Oscillator('triangle')\n
or creating a p5.Oscillator and then calling\nits method setType('triangle')
.\nSee p5.Oscillator for methods.",
"itemtype": "method",
"name": "p5.TriOsc",
"params": [
{
"name": "freq",
"description": "Set the frequency",
"type": "[Number]"
}
],
"class": "p5.Oscillator",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 4775,
"description": "Constructor: new p5.SawOsc()
.\nThis creates a SawTooth Wave Oscillator and is\nequivalent to new p5.Oscillator('sawtooth')\n
or creating a p5.Oscillator and then calling\nits method setType('sawtooth')
.\nSee p5.Oscillator for methods.",
"itemtype": "method",
"name": "p5.SawOsc",
"params": [
{
"name": "freq",
"description": "Set the frequency",
"type": "[Number]"
}
],
"class": "p5.Oscillator",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 4790,
"description": "Constructor: new p5.SqrOsc()
.\nThis creates a Square Wave Oscillator and is\nequivalent to new p5.Oscillator('square')\n
or creating a p5.Oscillator and then calling\nits method setType('square')
.\nSee p5.Oscillator for methods.",
"itemtype": "method",
"name": "p5.SqrOsc",
"params": [
{
"name": "freq",
"description": "Set the frequency",
"type": "[Number]"
}
],
"class": "p5.Oscillator",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 4806,
"class": "p5.Oscillator",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 4992,
"class": "p5.Oscillator",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 5217,
"description": "Time until envelope reaches attackLevel",
"itemtype": "property",
"name": "attackTime",
"class": "p5.Env",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 5222,
"description": "Level once attack is complete.",
"itemtype": "property",
"name": "attackLevel",
"class": "p5.Env",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 5227,
"description": "Time until envelope reaches decayLevel.",
"itemtype": "property",
"name": "decayTime",
"class": "p5.Env",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 5232,
"description": "Level after decay. The envelope will sustain here until it is released.",
"itemtype": "property",
"name": "decayLevel",
"class": "p5.Env",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 5237,
"description": "Duration of the release portion of the envelope.",
"itemtype": "property",
"name": "releaseTime",
"class": "p5.Env",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 5242,
"description": "Level at the end of the release.",
"itemtype": "property",
"name": "releaseLevel",
"class": "p5.Env",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 5278,
"description": "Reset the envelope with a series of time/value pairs.",
"itemtype": "method",
"name": "set",
"params": [
{
"name": "attackTime",
"description": "Time (in seconds) before level\n reaches attackLevel",
"type": "Number"
},
{
"name": "attackLevel",
"description": "Typically an amplitude between\n 0.0 and 1.0",
"type": "Number"
},
{
"name": "decayTime",
"description": "Time",
"type": "Number"
},
{
"name": "decayLevel",
"description": "Amplitude (In a standard ADSR envelope,\n decayLevel = sustainLevel)",
"type": "Number"
},
{
"name": "releaseTime",
"description": "Release Time (in seconds)",
"type": "Number"
},
{
"name": "releaseLevel",
"description": "Amplitude",
"type": "Number"
}
],
"class": "p5.Env",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 5302,
"description": "Set values like a traditional\n\nADSR envelope\n.",
"itemtype": "method",
"name": "setADSR",
"params": [
{
"name": "attackTime",
"description": "Time (in seconds before envelope\n reaches Attack Level",
"type": "Number"
},
{
"name": "decayTime",
"description": "Time (in seconds) before envelope\n reaches Decay/Sustain Level",
"type": "Number",
"optional": true
},
{
"name": "susRatio",
"description": "Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange
),\n then decayLevel would increase proportionally, to become 0.5.",
"type": "Number",
"optional": true
},
{
"name": "releaseTime",
"description": "Time in seconds from now (defaults to 0)",
"type": "Number",
"optional": true
}
],
"example": [
"\n\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.2;\nvar susPercent = 0.2;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n var cnv = createCanvas(100, 100);\n\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Env();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(playEnv);\n}\n\nfunction playEnv(){\n env.play();\n}\n
\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.2;\nvar susPercent = 0.2;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n var cnv = createCanvas(100, 100);\n\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Env();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(playEnv);\n}\n\nfunction playEnv(){\n env.play();\n}\n
\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.2;\nvar susPercent = 0.2;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n var cnv = createCanvas(100, 100);\n\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Env();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(playEnv);\n}\n\nfunction playEnv(){\n // trigger env on triOsc, 0 seconds from now\n // After decay, sustain for 0.2 seconds before release\n env.play(triOsc, 0, 0.2);\n}\n
\n\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.3;\nvar susPercent = 0.4;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n var cnv = createCanvas(100, 100);\n background(200);\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Env();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(envAttack);\n}\n\nfunction envAttack(){\n console.log('trigger attack');\n env.triggerAttack();\n\n background(0,255,0);\n text('attack!', width/2, height/2);\n}\n\nfunction mouseReleased() {\n env.triggerRelease();\n\n background(200);\n text('click to play', width/2, height/2);\n}\n
\n\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.3;\nvar susPercent = 0.4;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n var cnv = createCanvas(100, 100);\n background(200);\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Env();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(envAttack);\n}\n\nfunction envAttack(){\n console.log('trigger attack');\n env.triggerAttack();\n\n background(0,255,0);\n text('attack!', width/2, height/2);\n}\n\nfunction mouseReleased() {\n env.triggerRelease();\n\n background(200);\n text('click to play', width/2, height/2);\n}\n
setADSR(attackTime, decayTime)
\nas \ntime constants for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.",
"itemtype": "method",
"name": "ramp",
"params": [
{
"name": "unit",
"description": "p5.sound Object or Web Audio Param",
"type": "Object"
},
{
"name": "secondsFromNow",
"description": "When to trigger the ramp",
"type": "Number"
},
{
"name": "v",
"description": "Target value",
"type": "Number"
},
{
"name": "v2",
"description": "Second target value (optional)",
"type": "Number",
"optional": true
}
],
"example": [
"\n\nvar env, osc, amp, cnv;\n\nvar attackTime = 0.001;\nvar decayTime = 0.2;\nvar attackLevel = 1;\nvar decayLevel = 0;\n\nfunction setup() {\n cnv = createCanvas(100, 100);\n fill(0,255,0);\n noStroke();\n\n env = new p5.Env();\n env.setADSR(attackTime, decayTime);\n\n osc = new p5.Oscillator();\n osc.amp(env);\n osc.start();\n\n amp = new p5.Amplitude();\n\n cnv.mousePressed(triggerRamp);\n}\n\nfunction triggerRamp() {\n env.ramp(osc, 0, attackLevel, decayLevel);\n}\n\nfunction draw() {\n background(20,20,20);\n text('click me', 10, 20);\n var h = map(amp.getLevel(), 0, 0.4, 0, height);;\n\n rect(0, height, width, -h);\n}\n
\n var audiograb;\n \n function setup(){\n //new audioIn\n audioGrab = new p5.AudioIn();\n \n audioGrab.getSources(function(sourceList) {\n //print out the array of available sources\n console.log(sourceList);\n //set the source to the first item in the inputSources array\n audioGrab.setSource(0);\n });\n }\n
new p5.LowPass()
Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('lowpass')
.\nSee p5.Filter for methods.",
"itemtype": "method",
"name": "p5.LowPass",
"class": "p5.Filter",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 6836,
"description": "Constructor: new p5.HighPass()
Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('highpass')
.\nSee p5.Filter for methods.",
"itemtype": "method",
"name": "p5.HighPass",
"class": "p5.Filter",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 6848,
"description": "Constructor: new p5.BandPass()
Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('bandpass')
.\nSee p5.Filter for methods.",
"itemtype": "method",
"name": "p5.BandPass",
"class": "p5.Filter",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 6922,
"description": "The p5.Delay is built with two\n\nWeb Audio Delay Nodes, one for each stereo channel.",
"itemtype": "property",
"name": "leftDelay",
"type": "{Object} Web Audio Delay Node",
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 6931,
"description": "The p5.Delay is built with two\n\nWeb Audio Delay Nodes, one for each stereo channel.",
"itemtype": "property",
"name": "rightDelay",
"type": "{Object} Web Audio Delay Node",
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 6964,
"description": "Add delay to an audio signal according to a set\nof delay parameters.",
"itemtype": "method",
"name": "process",
"params": [
{
"name": "Signal",
"description": "An object that outputs audio",
"type": "Object"
},
{
"name": "delayTime",
"description": "Time (in seconds) of the delay/echo.\n Some browsers limit delayTime to\n 1 second.",
"type": "Number",
"optional": true
},
{
"name": "feedback",
"description": "sends the delay back through itself\n in a loop that decreases in volume\n each time.",
"type": "Number",
"optional": true
},
{
"name": "lowPass",
"description": "Cutoff frequency. Only frequencies\n below the lowPass will be part of the\n delay.",
"type": "Number",
"optional": true
}
],
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 6999,
"description": "Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.",
"itemtype": "method",
"name": "delayTime",
"params": [
{
"name": "delayTime",
"description": "Time (in seconds) of the delay",
"type": "Number"
}
],
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7018,
"description": "Feedback occurs when Delay sends its signal back through its input\nin a loop. The feedback amount determines how much signal to send each\ntime through the loop. A feedback greater than 1.0 is not desirable because\nit will increase the overall output each time through the loop,\ncreating an infinite feedback loop.",
"itemtype": "method",
"name": "feedback",
"params": [
{
"name": "feedback",
"description": "0.0 to 1.0, or an object such as an\n Oscillator that can be used to\n modulate this param",
"type": "Number|Object"
}
],
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7042,
"description": "Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.",
"itemtype": "method",
"name": "filter",
"params": [
{
"name": "cutoffFreq",
"description": "A lowpass filter will cut off any \n frequencies higher than the filter frequency.",
"type": "Number|Object"
},
{
"name": "res",
"description": "Resonance of the filter frequency\n cutoff, or an object (i.e. a p5.Oscillator)\n that can be used to modulate this parameter.\n High numbers (i.e. 15) will produce a resonance,\n low numbers (i.e. .2) will produce a slope.",
"type": "Number|Object"
}
],
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7059,
"description": "Choose a preset type of delay. 'pingPong' bounces the signal\nfrom the left to the right channel to produce a stereo effect.\nAny other parameter will revert to the default delay setting.",
"itemtype": "method",
"name": "setType",
"params": [
{
"name": "type",
"description": "'pingPong' (1) or 'default' (0)",
"type": "String|Number"
}
],
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7091,
"description": "Set the output level of the delay effect.",
"itemtype": "method",
"name": "amp",
"params": [
{
"name": "volume",
"description": "amplitude between 0 and 1.0",
"type": "Number"
},
{
"name": "rampTime",
"description": "create a fade that lasts rampTime",
"type": "Number",
"optional": true
},
{
"name": "timeFromNow",
"description": "schedule this event to happen\n seconds from now",
"type": "Number",
"optional": true
}
],
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7109,
"description": "Send output to a p5.sound or web audio object",
"itemtype": "method",
"name": "connect",
"params": [
{
"name": "unit",
"description": "",
"type": "Object"
}
],
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7119,
"description": "Disconnect all output.",
"itemtype": "method",
"name": "disconnect",
"class": "p5.Delay",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7204,
"description": "Connect a source to the reverb, and assign reverb parameters.",
"itemtype": "method",
"name": "process",
"params": [
{
"name": "src",
"description": "p5.sound / Web Audio object with a sound\n output.",
"type": "Object"
},
{
"name": "seconds",
"description": "Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.",
"type": "Number",
"optional": true
},
{
"name": "decayRate",
"description": "Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.",
"type": "Number",
"optional": true
},
{
"name": "reverse",
"description": "Play the reverb backwards or forwards.",
"type": "Boolean",
"optional": true
}
],
"class": "p5.Reverb",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7233,
"description": "Set the reverb settings. Similar to .process(), but without\nassigning a new input.",
"itemtype": "method",
"name": "set",
"params": [
{
"name": "seconds",
"description": "Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.",
"type": "Number",
"optional": true
},
{
"name": "decayRate",
"description": "Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.",
"type": "Number",
"optional": true
},
{
"name": "reverse",
"description": "Play the reverb backwards or forwards.",
"type": "Boolean",
"optional": true
}
],
"class": "p5.Reverb",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7260,
"description": "Set the output level of the delay effect.",
"itemtype": "method",
"name": "amp",
"params": [
{
"name": "volume",
"description": "amplitude between 0 and 1.0",
"type": "Number"
},
{
"name": "rampTime",
"description": "create a fade that lasts rampTime",
"type": "Number",
"optional": true
},
{
"name": "timeFromNow",
"description": "schedule this event to happen\n seconds from now",
"type": "Number",
"optional": true
}
],
"class": "p5.Reverb",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7278,
"description": "Send output to a p5.sound or web audio object",
"itemtype": "method",
"name": "connect",
"params": [
{
"name": "unit",
"description": "",
"type": "Object"
}
],
"class": "p5.Reverb",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7288,
"description": "Disconnect all output.",
"itemtype": "method",
"name": "disconnect",
"class": "p5.Reverb",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7296,
"description": "Inspired by Simple Reverb by Jordan Santell\nhttps://github.com/web-audio-components/simple-reverb/blob/master/index.js\n \nUtility function for building an impulse response\nbased on the module parameters.",
"access": "private",
"tagname": "",
"class": "p5.Reverb",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7394,
"description": "Internally, the p5.Convolver uses the a\n\nWeb Audio Convolver Node.",
"itemtype": "property",
"name": "convolverNode",
"type": "{Object} Web Audio Convolver Node",
"class": "p5.Convolver",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7424,
"description": "Create a p5.Convolver. Accepts a path to a soundfile \nthat will be used to generate an impulse response.",
"itemtype": "method",
"name": "createConvolver",
"params": [
{
"name": "path",
"description": "path to a sound file",
"type": "String"
},
{
"name": "callback",
"description": "function to call if loading is successful.\n The object will be passed in as the argument\n to the callback function.",
"type": "Function",
"optional": true
},
{
"name": "errorCallback",
"description": "function to call if loading is not successful.\n A custom error will be passed in as the argument\n to the callback function.",
"type": "Function",
"optional": true
}
],
"return": {
"description": "",
"type": "p5.Convolver"
},
"example": [
"\n\nvar cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n \n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n // disconnect from master output...\n sound.disconnect();\n \n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n \n sound.play();\n}\n
\nvar cVerb, sound;\nfunction preload() {\n soundFormats('ogg', 'mp3');\n \n cVerb = createConvolver('assets/concrete-tunnel.mp3');\n\n sound = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n // disconnect from master output...\n sound.disconnect();\n \n // ...and process with (i.e. connect to) cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n \n sound.play();\n}\n
toggleImpulse(id)
method.",
"itemtype": "property",
"name": "impulses",
"type": "{Array} Array of Web Audio Buffers",
"class": "p5.Convolver",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7581,
"description": "Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the .impulses
array. Previous\nimpulses can be accessed with the .toggleImpulse(id)
\nmethod.",
"itemtype": "method",
"name": "addImpulse",
"params": [
{
"name": "path",
"description": "path to a sound file",
"type": "String"
},
{
"name": "callback",
"description": "function (optional)",
"type": "Function"
},
{
"name": "errorCallback",
"description": "function (optional)",
"type": "Function"
}
],
"class": "p5.Convolver",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7599,
"description": "Similar to .addImpulse, except that the .impulses
\nArray is reset to save memory. A new .impulses
\narray is created with this impulse as the only item.",
"itemtype": "method",
"name": "resetImpulse",
"params": [
{
"name": "path",
"description": "path to a sound file",
"type": "String"
},
{
"name": "callback",
"description": "function (optional)",
"type": "Function"
},
{
"name": "errorCallback",
"description": "function (optional)",
"type": "Function"
}
],
"class": "p5.Convolver",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7617,
"description": "If you have used .addImpulse()
to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the .impulses
Array. Accepts a parameter\nto identify which impulse you wish to use, identified either by its\noriginal filename (String) or by its position in the .impulses\n
Array (Number)..audioBuffer
(type:\nWeb Audio \nAudioBuffer) and a .name
, a String that corresponds\nwith the original filename.",
"itemtype": "method",
"name": "toggleImpulse",
"params": [
{
"name": "id",
"description": "Identify the impulse by its original filename\n (String), or by its position in the\n .impulses
Array (Number).",
"type": "String|Number"
}
],
"class": "p5.Convolver",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7666,
"class": "p5.Convolver",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7691,
"class": "p5.Convolver",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7910,
"description": "Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.",
"params": [
{
"name": "BPM",
"description": "Beats Per Minute",
"type": "Number"
},
{
"name": "rampTime",
"description": "Seconds from now",
"type": "Number"
}
],
"class": "p5.Convolver",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 7997,
"description": "Array of values to pass into the callback\nat each step of the phrase. Depending on the callback\nfunction's requirements, these values may be numbers,\nstrings, or an object with multiple parameters.\nZero (0) indicates a rest.",
"itemtype": "property",
"name": "sequence",
"type": "{Array}",
"class": "p5.Phrase",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8090,
"description": "Set the tempo of this part, in Beats Per Minute.",
"itemtype": "method",
"name": "setBPM",
"params": [
{
"name": "BPM",
"description": "Beats Per Minute",
"type": "Number"
},
{
"name": "rampTime",
"description": "Seconds from now",
"type": "Number",
"optional": true
}
],
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8100,
"description": "Returns the Beats Per Minute of this currently part.",
"itemtype": "method",
"name": "getBPM",
"return": {
"description": "",
"type": "Number"
},
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8109,
"description": "Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.",
"itemtype": "method",
"name": "start",
"params": [
{
"name": "time",
"description": "seconds from now",
"type": "Number",
"optional": true
}
],
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8125,
"description": "Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.",
"itemtype": "method",
"name": "loop",
"params": [
{
"name": "time",
"description": "seconds from now",
"type": "Number",
"optional": true
}
],
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8142,
"description": "Tell the part to stop looping.",
"itemtype": "method",
"name": "noLoop",
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8154,
"description": "Stop the part and cue it to step 0.",
"itemtype": "method",
"name": "stop",
"params": [
{
"name": "time",
"description": "seconds from now",
"type": "Number",
"optional": true
}
],
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8164,
"description": "Pause the part. Playback will resume\nfrom the current step.",
"itemtype": "method",
"name": "pause",
"params": [
{
"name": "time",
"description": "seconds from now",
"type": "Number"
}
],
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8176,
"description": "Add a p5.Phrase to this Part.",
"itemtype": "method",
"name": "addPhrase",
"params": [
{
"name": "phrase",
"description": "reference to a p5.Phrase",
"type": "p5.Phrase"
}
],
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8197,
"description": "Remove a phrase from this part, based on the name it was\ngiven when it was created.",
"itemtype": "method",
"name": "removePhrase",
"params": [
{
"name": "phraseName",
"description": "",
"type": "String"
}
],
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8211,
"description": "Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.",
"itemtype": "method",
"name": "getPhrase",
"params": [
{
"name": "phraseName",
"description": "",
"type": "String"
}
],
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8225,
"description": "Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.",
"itemtype": "method",
"name": "replaceSequence",
"params": [
{
"name": "phraseName",
"description": "",
"type": "String"
},
{
"name": "sequence",
"description": "Array of values to pass into the callback\n at each step of the phrase.",
"type": "Array"
}
],
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8253,
"description": "Fire a callback function at every step.",
"itemtype": "method",
"name": "onStep",
"params": [
{
"name": "callback",
"description": "The name of the callback\n you want to fire\n on every beat/tatum.",
"type": "Function"
}
],
"class": "p5.Part",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8305,
"description": "Start playback of the score.",
"itemtype": "method",
"name": "start",
"class": "p5.Score",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8314,
"description": "Stop playback of the score.",
"itemtype": "method",
"name": "stop",
"class": "p5.Score",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8324,
"description": "Pause playback of the score.",
"itemtype": "method",
"name": "pause",
"class": "p5.Score",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8332,
"description": "Loop playback of the score.",
"itemtype": "method",
"name": "loop",
"class": "p5.Score",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8341,
"description": "Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.",
"itemtype": "method",
"name": "noLoop",
"class": "p5.Score",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8363,
"description": "Set the tempo for all parts in the score",
"params": [
{
"name": "BPM",
"description": "Beats Per Minute",
"type": "Number"
},
{
"name": "rampTime",
"description": "Seconds from now",
"type": "Number"
}
],
"class": "p5.Score",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8469,
"description": "callback invoked when the recording is over",
"access": "private",
"tagname": "",
"type": "{function(Float32Array)}",
"class": "p5.SoundRecorder",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8482,
"description": "Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.",
"itemtype": "method",
"name": "setInput",
"params": [
{
"name": "unit",
"description": "p5.sound object or a web audio unit\n that outputs sound",
"type": "Object",
"optional": true
}
],
"class": "p5.SoundRecorder",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8503,
"description": "Start recording. To access the recording, provide\na p5.SoundFile as the first parameter. The p5.SoundRecorder\nwill send its recording to that p5.SoundFile for playback once\nrecording is complete. Optional parameters include duration\n(in seconds) of the recording, and a callback function that\nwill be called once the complete recording has been\ntransfered to the p5.SoundFile.",
"itemtype": "method",
"name": "record",
"params": [
{
"name": "soundFile",
"description": "p5.SoundFile",
"type": "p5.SoundFile"
},
{
"name": "duration",
"description": "Time (in seconds)",
"type": "Number",
"optional": true
},
{
"name": "callback",
"description": "The name of a function that will be\n called once the recording completes",
"type": "Function",
"optional": true
}
],
"class": "p5.SoundRecorder",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8536,
"description": "Stop the recording. Once the recording is stopped,\nthe results will be sent to the p5.SoundFile that\nwas given on .record(), and if a callback function\nwas provided on record, that function will be called.",
"itemtype": "method",
"name": "stop",
"class": "p5.SoundRecorder",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8555,
"description": "internal method called on audio process",
"access": "private",
"tagname": "",
"params": [
{
"name": "event",
"description": "",
"type": "AudioProcessorEvent"
}
],
"class": "p5.SoundRecorder",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8609,
"description": "Save a p5.SoundFile as a .wav audio file.",
"itemtype": "method",
"name": "saveSound",
"params": [
{
"name": "soundFile",
"description": "p5.SoundFile that you wish to save",
"type": "p5.SoundFile"
},
{
"name": "name",
"description": "name of the resulting .wav file.",
"type": "String"
}
],
"class": "p5.SoundRecorder",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8781,
"description": "isDetected is set to true when a peak is detected.",
"itemtype": "attribute",
"name": "isDetected",
"type": "{Boolean}",
"default": "false",
"class": "p5.PeakDetect",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8795,
"description": "The update method is run in the draw loop.\n\nAccepts an FFT object. You must call .analyze()\non the FFT object prior to updating the peakDetect\nbecause it relies on a completed FFT analysis.",
"itemtype": "method",
"name": "update",
"params": [
{
"name": "fftObject",
"description": "A p5.FFT object",
"type": "p5.FFT"
}
],
"class": "p5.PeakDetect",
"module": "p5.sound",
"submodule": "p5.sound"
},
{
"file": "lib/addons/p5.sound.js",
"line": 8826,
"description": "onPeak accepts two arguments: a function to call when\na peak is detected. The value of the peak,\nbetween 0.0 and 1.0, is passed to the callback.",
"itemtype": "method",
"name": "onPeak",
"params": [
{
"name": "callback",
"description": "Name of a function that will\n be called when a peak is\n detected.",
"type": "Function"
},
{
"name": "val",
"description": "Optional value to pass\n into the function when\n a peak is detected.",
"type": "Object",
"optional": true
}
],
"example": [
"\n\nvar cnv, soundFile, fft, peakDetect;\nvar ellipseWidth = 0;\n\nfunction setup() {\n cnv = createCanvas(100,100);\n textAlign(CENTER);\n\n soundFile = loadSound('assets/beat.mp3');\n fft = new p5.FFT();\n peakDetect = new p5.PeakDetect();\n\n setupSound();\n\n // when a beat is detected, call triggerBeat()\n peakDetect.onPeak(triggerBeat);\n}\n\nfunction draw() {\n background(0);\n fill(255);\n text('click to play', width/2, height/2);\n\n fft.analyze();\n peakDetect.update(fft);\n\n ellipseWidth *= 0.95;\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// this function is called by peakDetect.onPeak\nfunction triggerBeat() {\n ellipseWidth = 50;\n}\n\n// mouseclick starts/stops sound\nfunction setupSound() {\n cnv.mouseClicked( function() {\n if (soundFile.isPlaying() ) {\n soundFile.stop();\n } else {\n soundFile.play();\n }\n });\n}\n
Generic class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.
\nCSV files are\n\ncomma separated values, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don't bother with the\nquotes.
\nFile names should end with .csv if they're comma separated.
\nA rough \"spec\" for CSV can be found\nhere.
\nTo load files, use the loadTable method.
\nTo save tables to your computer, use the save method\n or the saveTable method.
\n\nPossible options include:\n