A class to describe a color.<\/p>\n
Each Color is stored internally as an array of ideal RGBA values in floating\npoint form, normalized from 0 to 1. These values are used to calculate the\nclosest screen colors, which are RGBA levels from 0 to 255. Screen colors\nare sent to the renderer.<\/p>\n When different color representations are calculated, the results are cached\nfor performance. These values are normalized, floating-point numbers.<\/p>\n Note: color()<\/a> is the recommended way to create an\ninstance of this class.<\/p>\n"},"Setting":{"name":"Setting","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Color","namespace":"","file":"src\/color\/setting.js","line":1,"requires":["core","constants"]},"Shape":{"name":"Shape","submodules":{"2D Primitives":1,"Curves":1,"Vertex":1,"3D Primitives":1,"3D Models":1},"elements":{},"classes":{"p5.Geometry":1,"p5.Matrix":1},"fors":{"p5":1,"p5.Geometry":1},"namespaces":{},"file":"src\/webgl\/p5.Matrix.js","line":19},"2D Primitives":{"name":"2D Primitives","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src\/core\/shape\/2d_primitives.js","line":1,"requires":["core","constants"]},"Attributes":{"name":"Attributes","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Typography","namespace":"","file":"src\/core\/shape\/attributes.js","line":1,"requires":["core","constants"]},"Curves":{"name":"Curves","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src\/core\/shape\/curves.js","line":1,"requires":["core"]},"Vertex":{"name":"Vertex","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src\/core\/shape\/vertex.js","line":1,"requires":["core","constants"]},"Constants":{"name":"Constants","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Constants","file":"src\/core\/constants.js","line":1},"Structure":{"name":"Structure","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"IO","file":"src\/core\/main.js","line":1,"requires":["constants"]},"DOM":{"name":"DOM","submodules":{},"elements":{},"classes":{"p5.Element":1,"p5.MediaElement":1,"p5.File":1},"fors":{"p5.Element":1,"p5":1},"namespaces":{},"module":"DOM","file":"src\/dom\/dom.js","line":5482,"description":" The web is much more than just canvas and the DOM functionality 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<\/a> that supports a range of HTML elements. See the\n\nbeyond the canvas tutorial<\/a> for a full overview of how this addon works.<\/p>\n See tutorial: beyond the canvas<\/a>\nfor more info on how to use this library.<\/a><\/p>\n","requires":["p5"]},"Rendering":{"name":"Rendering","submodules":{},"elements":{},"classes":{"p5.Graphics":1,"p5.Renderer":1,"p5.FramebufferCamera":1,"p5.FramebufferTexture":1,"p5.Framebuffer":1,"p5.RendererGL":1},"fors":{"p5":1,"p5.Framebuffer":1},"namespaces":{},"module":"Rendering","file":"src\/webgl\/p5.RendererGL.js","line":1102,"tag":"module","description":" A class to describe a drawing surface that's separate from the main canvas.<\/p>\n Each Note: createGraphics()<\/a> is the recommended\nway to create an instance of this class.<\/p>\n","requires":["constants"]},"Foundation":{"name":"Foundation","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Foundation","file":"src\/core\/reference.js","line":1},"Transform":{"name":"Transform","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Transform","file":"src\/core\/transform.js","line":1,"requires":["core","constants"]},"Data":{"name":"Data","submodules":{"LocalStorage":1,"Dictionary":1,"Array Functions":1,"Conversion":1,"String Functions":1},"elements":{},"classes":{"p5.TypedDict":1,"p5.StringDict":1,"p5.NumberDict":1},"fors":{"p5":1,"p5.TypedDict":1},"namespaces":{},"file":"src\/data\/p5.TypedDict.js","line":415},"LocalStorage":{"name":"LocalStorage","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src\/data\/local_storage.js","line":1,"requires":["core\n\nThis module defines the p5 methods for working with local storage"]},"Dictionary":{"name":"Dictionary","submodules":{},"elements":{},"classes":{"p5.TypedDict":1,"p5.StringDict":1,"p5.NumberDict":1},"fors":{"p5.TypedDict":1,"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src\/data\/p5.TypedDict.js","line":415,"requires":["core\n\nThis module defines the p5 methods for the p5 Dictionary classes.\nThe classes StringDict and NumberDict are for storing and working\nwith key-value pairs."],"description":" Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.<\/p>\n"},"Events":{"name":"Events","submodules":{"Acceleration":1,"Keyboard":1,"Mouse":1,"Touch":1},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"file":"src\/events\/acceleration.js","line":1,"requires":["core"],"tag":"main","itemtype":"main"},"Acceleration":{"name":"Acceleration","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src\/events\/acceleration.js","line":1,"requires":["core"],"tag":"main","itemtype":"main"},"Keyboard":{"name":"Keyboard","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src\/events\/keyboard.js","line":1,"requires":["core"]},"Mouse":{"name":"Mouse","submodules":{},"elements":{},"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":{},"elements":{},"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},"elements":{},"classes":{"p5.Image":1},"fors":{"p5":1},"namespaces":{},"module":"Image","file":"src\/image\/p5.Image.js","line":21,"requires":["core"],"description":" A class to describe an image.<\/p>\n Images are rectangular grids of pixels that can be displayed and modified.<\/p>\n Existing images can be loaded by calling\nloadImage()<\/a>. Blank images can be created by\ncalling createImage()<\/a>. This module defines the p5.Font<\/a> class and functions for\ndrawing text to the display canvas.<\/p>\n"},"Pixels":{"name":"Pixels","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Image","namespace":"","file":"src\/image\/pixels.js","line":1,"requires":["core"]},"IO":{"name":"IO","submodules":{"Structure":1,"Input":1,"Output":1,"Table":1,"Time & Date":1},"elements":{},"classes":{"p5":1,"p5.PrintWriter":1,"p5.Table":1,"p5.TableRow":1,"p5.XML":1},"fors":{"p5":1},"namespaces":{},"file":"src\/io\/p5.XML.js","line":9},"Input":{"name":"Input","submodules":{},"elements":{},"classes":{"p5.XML":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src\/io\/p5.XML.js","line":9,"requires":["core"],"description":" A class to describe an XML object.<\/p>\n Each Note: Use loadXML()<\/a> to load external XML files.<\/p>\n"},"Output":{"name":"Output","submodules":{},"elements":{},"classes":{"p5":1,"p5.PrintWriter":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src\/io\/files.js","line":1565,"description":" This is the p5 instance constructor.<\/p>\n A p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload()<\/a>,\nsetup()<\/a>, and\/or\ndraw()<\/a> properties on it for running a sketch.<\/p>\n A p5 sketch can run in \"global\" or \"instance\" mode:\n\"global\" - all properties and methods are attached to the window\n\"instance\" - all properties and methods are bound to this p5 object<\/p>\n"},"Table":{"name":"Table","submodules":{},"elements":{},"classes":{"p5.Table":1,"p5.TableRow":1},"fors":{},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src\/io\/p5.TableRow.js","line":9,"requires":["core"],"description":" Table<\/a> 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.<\/p>\n"},"Math":{"name":"Math","submodules":{"Calculation":1,"Vector":1,"Noise":1,"Random":1,"Trigonometry":1,"Quaternion":1},"elements":{},"classes":{"p5.Vector":1,"p5.Quat":1},"fors":{"p5":1},"namespaces":{},"file":"src\/webgl\/p5.Quat.js","line":8},"Calculation":{"name":"Calculation","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src\/math\/calculation.js","line":1,"requires":["core"]},"Vector":{"name":"Vector","submodules":{},"elements":{},"classes":{"p5.Vector":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src\/math\/p5.Vector.js","line":11,"requires":["core"],"description":" A class to describe a two or three-dimensional vector.<\/p>\n A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection.<\/p>\n Note: createVector()<\/a> is the recommended way\nto make an instance of this class.<\/p>\n"},"Noise":{"name":"Noise","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src\/math\/noise.js","line":14,"requires":["core"]},"Random":{"name":"Random","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src\/math\/random.js","line":1,"requires":["core"]},"Trigonometry":{"name":"Trigonometry","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src\/math\/trigonometry.js","line":1,"requires":["core","constants"]},"Typography":{"name":"Typography","submodules":{"Attributes":1,"Loading & Displaying":1},"elements":{},"classes":{"p5.Font":1},"fors":{"p5":1},"namespaces":{},"file":"src\/typography\/p5.Font.js","line":13},"Array Functions":{"name":"Array Functions","submodules":{},"elements":{},"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":{},"elements":{},"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":{},"elements":{},"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":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src\/utilities\/time_date.js","line":1,"requires":["core"]},"3D Primitives":{"name":"3D Primitives","submodules":{},"elements":{},"classes":{"p5.Geometry":1},"fors":{"p5":1,"p5.Geometry":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src\/webgl\/p5.Geometry.js","line":13,"requires":["core","p5.Geometry"],"description":" A class to describe a 3D shape.<\/p>\n Each The first parameter, The second parameter, The third parameter, This module defines the p5.Shader class<\/p>\n"},"Camera":{"name":"Camera","submodules":{},"elements":{},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src\/webgl\/p5.Camera.js","line":723,"requires":["core"],"description":" A class to describe a camera for viewing a 3D sketch.<\/p>\n Each In WebGL mode, the default camera is a Note: A class to describe a Quaternion\nfor vector rotations in the p5js webgl renderer.\nPlease refer the following link for details on the implementation\nhttps:\/\/danceswithcode.net\/engineeringnotes\/quaternions\/quaternions.html<\/a><\/p>\n"},"p5.sound":{"name":"p5.sound","submodules":{},"elements":{},"classes":{"p5.sound":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.Envelope":1,"p5.Noise":1,"p5.Pulse":1,"p5.AudioIn":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.PeakDetect":1,"p5.SoundRecorder":1,"p5.Distortion":1,"p5.Gain":1,"p5.AudioVoice":1,"p5.MonoSynth":1,"p5.OnsetDetect":1,"p5.PolySynth":1},"fors":{"p5.sound":1,"p5":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Oscillator":1,"p5.Envelope":1,"p5.AudioIn":1,"p5.Effect":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.Distortion":1,"p5.Gain":1,"p5.AudioVoice":1,"p5.MonoSynth":1,"p5.PolySynth":1},"namespaces":{},"module":"p5.sound","file":"lib\/addons\/p5.sound.js","line":11691,"description":" p5.sound extends p5 with Web Audio<\/a> functionality including audio input,\nplayback, analysis and synthesis.\n<\/p>\n p5.sound is on GitHub<\/a>.\nDownload the latest version\nhere<\/a>.<\/p>","tag":"main","itemtype":"main"}},"classes":{"p5":{"name":"p5","shortname":"p5","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Output","namespace":"","file":"src\/core\/main.js","line":12,"description":" This is the p5 instance constructor.<\/p>\n A p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload()<\/a>,\nsetup()<\/a>, and\/or\ndraw()<\/a> properties on it for running a sketch.<\/p>\n A p5 sketch can run in \"global\" or \"instance\" mode:\n\"global\" - all properties and methods are attached to the window\n\"instance\" - all properties and methods are bound to this p5 object<\/p>\n","is_constructor":1,"params":[{"name":"sketch","description":" a closure that can set optional preload()<\/a>,\n setup()<\/a>, and\/or draw()<\/a> properties on the\n given p5 instance<\/p>\n","type":"Function(p5)"},{"name":"node","description":" element to attach canvas to<\/p>\n","type":"HTMLElement","optional":true}],"return":{"description":"a p5 instance","type":"P5"}},"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":318,"description":" A class to describe a color.<\/p>\n Each Color is stored internally as an array of ideal RGBA values in floating\npoint form, normalized from 0 to 1. These values are used to calculate the\nclosest screen colors, which are RGBA levels from 0 to 255. Screen colors\nare sent to the renderer.<\/p>\n When different color representations are calculated, the results are cached\nfor performance. These values are normalized, floating-point numbers.<\/p>\n Note: color()<\/a> is the recommended way to create an\ninstance of this class.<\/p>\n","is_constructor":1,"params":[{"name":"pInst","description":" pointer to p5 instance.<\/p>\n","type":"P5","optional":true},{"name":"vals","description":" an array containing the color values\n for red, green, blue and alpha channel\n or CSS color.<\/p>\n","type":"Number[]|String"}]},"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":" A class to describe an\nHTML element<\/a>.<\/p>\n Sketches can use many elements. Common elements include the drawing canvas,\nbuttons, sliders, webcam feeds, and so on.<\/p>\n All elements share the methods of the wrapped DOM element.<\/p>\n","type":"HTMLElement"},{"name":"pInst","description":" pointer to p5 instance.<\/p>\n","type":"P5","optional":true}],"example":["\n A class to describe a drawing surface that's separate from the main canvas.<\/p>\n Each Note: createGraphics()<\/a> is the recommended\nway to create an instance of this class.<\/p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"width","description":" width of the graphics buffer in pixels.<\/p>\n","type":"Number"},{"name":"height","description":" height of the graphics buffer in pixels.<\/p>\n","type":"Number"},{"name":"renderer","description":" renderer to use, either P2D or WEBGL.<\/p>\n","type":"Constant"},{"name":"pInst","description":" sketch instance.<\/p>\n","type":"P5","optional":true},{"name":"canvas","description":" existing 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, respectively.<\/p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"elt","description":" DOM node that is wrapped<\/p>\n","type":"HTMLElement"},{"name":"pInst","description":" pointer to p5 instance<\/p>\n","type":"P5","optional":true},{"name":"isMainCanvas","description":" whether we're using it as main canvas<\/p>\n","type":"Boolean","optional":true}]},"p5.TypedDict":{"name":"p5.TypedDict","shortname":"p5.TypedDict","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Data","submodule":"Dictionary","namespace":"","file":"src\/data\/p5.TypedDict.js","line":82,"description":" Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.<\/p>\n","is_constructor":1},"p5.StringDict":{"name":"p5.StringDict","shortname":"p5.StringDict","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Data","submodule":"Dictionary","namespace":"","file":"src\/data\/p5.TypedDict.js","line":397,"description":" A simple Dictionary class for Strings.<\/p>\n","extends":"p5.TypedDict"},"p5.NumberDict":{"name":"p5.NumberDict","shortname":"p5.NumberDict","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Data","submodule":"Dictionary","namespace":"","file":"src\/data\/p5.TypedDict.js","line":415,"description":" A simple Dictionary class for Numbers.<\/p>\n","is_constructor":1,"extends":"p5.TypedDict"},"p5.MediaElement":{"name":"p5.MediaElement","shortname":"p5.MediaElement","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src\/dom\/dom.js","line":4099,"description":" A class to handle audio and video.<\/p>\n DOM node that is wrapped<\/p>\n","type":"String"}],"extends":"p5.Element","example":["\n A class to describe a file.<\/p>\n wrapped file.<\/p>\n","type":"File"}],"example":["\n A class to describe an image.<\/p>\n Images are rectangular grids of pixels that can be displayed and modified.<\/p>\n Existing images can be loaded by calling\nloadImage()<\/a>. Blank images can be created by\ncalling createImage()<\/a>. A class to describe a print stream.<\/p>\n Each Note: createWriter()<\/a> is the recommended way\nto make an instance of this class.<\/p>\n","params":[{"name":"filename","description":" name of the file to create.<\/p>\n","type":"String"},{"name":"extension","description":" format to use for the file.<\/p>\n","type":"String","optional":true}],"example":["\n Table<\/a> 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.<\/p>\n","is_constructor":1,"params":[{"name":"rows","description":" An array of p5.TableRow objects<\/p>\n","type":"p5.TableRow[]","optional":true}]},"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":9,"description":" A TableRow object represents a single row of data values,\nstored in columns, from a table.<\/p>\n A Table Row contains both an ordered array, and an unordered\nJSON object.<\/p>\n","is_constructor":1,"params":[{"name":"str","description":" optional: populate the row with a\n string of values, separated by the\n separator<\/p>\n","type":"String","optional":true},{"name":"separator","description":" comma separated values (csv) by default<\/p>\n","type":"String","optional":true}]},"p5.XML":{"name":"p5.XML","shortname":"p5.XML","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Input","namespace":"","file":"src\/io\/p5.XML.js","line":9,"description":" A class to describe an XML object.<\/p>\n Each Note: Use loadXML()<\/a> to load external XML files.<\/p>\n","is_constructor":1,"example":["\n A class to describe a two or three-dimensional vector.<\/p>\n A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection.<\/p>\n Note: createVector()<\/a> is the recommended way\nto make an instance of this class.<\/p>\n","is_constructor":1,"params":[{"name":"x","description":" x component of the vector.<\/p>\n","type":"Number","optional":true},{"name":"y","description":" y component of the vector.<\/p>\n","type":"Number","optional":true},{"name":"z","description":" z component of the vector.<\/p>\n","type":"Number","optional":true}],"example":["\n A class to describe fonts.<\/p>\n","is_constructor":1,"params":[{"name":"pInst","description":" pointer to p5 instance.<\/p>\n","type":"P5","optional":true}],"example":["\n A class to describe a camera for viewing a 3D sketch.<\/p>\n Each In WebGL mode, the default camera is a Note: instance of WebGL renderer<\/p>\n","type":"RendererGL"}],"example":["\n A class to describe a high-performance drawing surface for textures.<\/p>\n Each p5.Color<\/code> object stores the color mode\nand level maxes that were active during its construction. These values are\nused to interpret the arguments passed to the object's constructor. They\nalso determine output formatting such as when\nsaturation()<\/a> is called.<\/p>\np5.Graphics<\/code> object provides a dedicated drawing surface called a\ngraphics buffer<\/em>. Graphics buffers are helpful when drawing should happen\noffscreen. For example, separate scenes can be drawn offscreen and\ndisplayed only when needed.<\/p>\np5.Graphics<\/code> objects have nearly all the drawing features of the main\ncanvas. For example, calling the method myGraphics.circle(50, 50, 20)<\/code>\ndraws to the graphics buffer. The resulting image can be displayed on the\nmain canvas by passing the p5.Graphics<\/code> object to the\nimage()<\/a> function, as in image(myGraphics, 0, 0)<\/code>.<\/p>\np5.Image<\/code> objects\nhave methods for common tasks such as applying filters and modifying\npixel values.<\/p>\n"},"Loading & Displaying":{"name":"Loading & Displaying","submodules":{},"elements":{},"classes":{"p5.Font":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Typography","namespace":"","file":"src\/typography\/p5.Font.js","line":13,"requires":["core"],"description":"p5.XML<\/code> object provides an easy way to interact with XML data.\nExtensible Markup Language\n(XML<\/a>)\nis a standard format for sending data between applications. Like HTML, the\nXML format is based on tags and attributes, as in\n<time units=\"s\">1234<\/time><\/code>.<\/p>\np5.Vector<\/code> objects are often used to program motion because they simplify\nthe math. For example, a moving ball has a position and a velocity.\nPosition describes where the ball is in space. The ball's position vector\nextends from the origin to the ball's center. Velocity describes the ball's\nspeed and the direction it's moving. If the ball is moving straight up, its\nvelocity vector points straight up. Adding the ball's velocity vector to\nits position vector moves it, as in pos.add(vel)<\/code>. Vector math relies on\nmethods inside the p5.Vector<\/code> class.<\/p>\np5.Geometry<\/code> object represents a 3D shape as a set of connected\npoints called vertices<\/em>. All 3D shapes are made by connecting vertices to\nform triangles that are stitched together. Each triangular patch on the\ngeometry's surface is called a face<\/em>. The geometry stores information\nabout its vertices and faces for use with effects such as lighting and\ntexture mapping.<\/p>\ndetailX<\/code>, is optional. If a number is passed, as in\nnew p5.Geometry(24)<\/code>, it sets the number of triangle subdivisions to use\nalong the geometry's x-axis. By default, detailX<\/code> is 1.<\/p>\ndetailY<\/code>, is also optional. If a number is passed,\nas in new p5.Geometry(24, 16)<\/code>, it sets the number of triangle\nsubdivisions to use along the geometry's y-axis. By default, detailX<\/code> is\n1.<\/p>\ncallback<\/code>, is also optional. If a function is passed,\nas in new p5.Geometry(24, 16, createShape)<\/code>, it will be called once to add\nvertices to the new 3D shape.<\/p>\n"},"3D":{"name":"3D","submodules":{"Interaction":1,"Lights":1,"Material":1,"Camera":1},"elements":{},"classes":{"p5.Camera":1,"p5.Shader":1,"p5.Texture":1,"ImageInfos":1,"FontInfo":1,"Cubic":1},"fors":{"p5":1,"p5.Camera":1},"namespaces":{},"file":"src\/webgl\/text.js","line":279},"Interaction":{"name":"Interaction","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src\/webgl\/interaction.js","line":1,"requires":["core"]},"Lights":{"name":"Lights","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src\/webgl\/light.js","line":1,"requires":["core"]},"3D Models":{"name":"3D Models","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src\/webgl\/loading.js","line":1,"requires":["core","p5.Geometry"]},"Material":{"name":"Material","submodules":{},"elements":{},"classes":{"p5.Shader":1,"p5.Texture":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src\/webgl\/p5.Texture.js","line":12,"requires":["core"],"description":"p5.Camera<\/code> object represents a camera that views a section of 3D\nspace. It stores information about the camera\u2019s position, orientation, and\nprojection.<\/p>\np5.Camera<\/code> object that can be\ncontrolled with the camera()<\/a>,\nperspective()<\/a>,\northo()<\/a>, and\nfrustum()<\/a> functions. Additional cameras can be\ncreated with createCamera()<\/a> and activated\nwith setCamera()<\/a>.<\/p>\np5.Camera<\/code>\u2019s methods operate in two coordinate systems:<\/p>\n\n
myCamera.setPosition()<\/code> places the camera in 3D space using\n\"world\" coordinates.<\/li>\nmyCamera.move()<\/code> moves the camera along its own axes.<\/li>\n<\/ul>\n"},"Quaternion":{"name":"Quaternion","submodules":{},"elements":{},"classes":{"p5.Quat":1},"fors":{},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src\/webgl\/p5.Quat.js","line":8,"description":"\n
p5.Color<\/code> object stores the color mode\nand level maxes that were active during its construction. These values are\nused to interpret the arguments passed to the object's constructor. They\nalso determine output formatting such as when\nsaturation()<\/a> is called.<\/p>\np5.Element<\/code> class. They're created\nwith functions such as createCanvas()<\/a> and\ncreateButton()<\/a>.<\/p>\n","is_constructor":1,"params":[{"name":"elt","description":"\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n \/\/ Create a button element and\n \/\/ place it beneath the canvas.\n let btn = createButton('change');\n btn.position(0, 100);\n\n \/\/ Call randomColor() when\n \/\/ the button is pressed.\n btn.mousePressed(randomColor);\n\n describe('A gray square with a button that says \"change\" beneath it. The square changes color when the user presses the button.');\n}\n\n\/\/ Paint the background either\n\/\/ red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n<\/code>\n<\/div>"]},"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":"p5.Graphics<\/code> object provides a dedicated drawing surface called a\ngraphics buffer<\/em>. Graphics buffers are helpful when drawing should happen\noffscreen. For example, separate scenes can be drawn offscreen and\ndisplayed only when needed.<\/p>\np5.Graphics<\/code> objects have nearly all the drawing features of the main\ncanvas. For example, calling the method myGraphics.circle(50, 50, 20)<\/code>\ndraws to the graphics buffer. The resulting image can be displayed on the\nmain canvas by passing the p5.Graphics<\/code> object to the\nimage()<\/a> function, as in image(myGraphics, 0, 0)<\/code>.<\/p>\n<canvas><\/code> element to use.<\/p>\n","type":"HTMLCanvasElement","optional":true}],"example":["\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n \/\/ Create a p5.Graphics object.\n pg = createGraphics(50, 50);\n\n \/\/ Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(25, 25, 20);\n\n describe('A dark gray square with a white circle at its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n \/\/ Display the p5.Graphics object.\n image(pg, 25, 25);\n}\n<\/code>\n<\/div>\n\n\n\/\/ Click the canvas to display the graphics buffer.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n \/\/ Create a p5.Graphics object.\n pg = createGraphics(50, 50);\n\n describe('A square appears on a gray background when the user presses the mouse. The square cycles between white and black.');\n}\n\nfunction draw() {\n background(200);\n\n \/\/ Calculate the background color.\n let bg = frameCount % 255;\n\n \/\/ Draw to the p5.Graphics object.\n pg.background(bg);\n\n \/\/ Display the p5.Graphics object while\n \/\/ the user presses the mouse.\n if (mouseIsPressed === true) {\n image(pg, 25, 25);\n }\n}\n<\/code>\n<\/div>"]},"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":"p5.MediaElement<\/code> extends p5.Element<\/a> with\nmethods to handle audio and video. p5.MediaElement<\/code> objects are created by\ncalling createVideo<\/a>,\ncreateAudio<\/a>, and\ncreateCapture<\/a>.<\/p>\n","is_constructor":1,"params":[{"name":"elt","description":"\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n \/\/ Create a p5.MediaElement using createCapture().\n capture = createCapture(VIDEO);\n capture.hide();\n\n describe('A webcam feed with inverted colors.');\n}\n\nfunction draw() {\n \/\/ Display the video stream and invert the colors.\n image(capture, 0, 0, width, width * capture.height \/ capture.width);\n filter(INVERT);\n}\n<\/code>\n<\/div>"]},"p5.File":{"name":"p5.File","shortname":"p5.File","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src\/dom\/dom.js","line":5482,"description":"p5.File<\/code> objects are used by\nmyElement.drop()<\/a> and\ncreated by\ncreateFileInput<\/a>.<\/p>\n","is_constructor":1,"params":[{"name":"file","description":"\n\/\/ Use the file input to load a\n\/\/ file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n \/\/ Create a file input and place it beneath the canvas.\n \/\/ Call displayInfo() when the file loads.\n let input = createFileInput(displayInfo);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');\n}\n\n\/\/ Display the p5.File's info once it loads.\nfunction displayInfo(file) {\n background(200);\n\n \/\/ Display the p5.File's name.\n text(file.name, 10, 10, 80, 40);\n\n \/\/ Display the p5.File's type and subtype.\n text(`${file.type}\/${file.subtype}`, 10, 70);\n\n \/\/ Display the p5.File's size in bytes.\n text(file.size, 10, 90);\n}\n<\/code>\n<\/div>\n\n\n\/\/ Use the file input to select an image to\n\/\/ load and display.\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n \/\/ Create a file input and place it beneath the canvas.\n \/\/ Call handleImage() when the file image loads.\n let input = createFileInput(handleImage);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');\n}\n\nfunction draw() {\n background(200);\n\n \/\/ Draw the image if it's ready.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n\/\/ Use the p5.File's data once it loads.\nfunction handleImage(file) {\n \/\/ Check the p5.File's type.\n if (file.type === 'image') {\n \/\/ Create an image using using the p5.File's data.\n img = createImg(file.data, '');\n\n \/\/ Hide the image element so it doesn't appear twice.\n img.hide();\n } else {\n img = null;\n }\n}\n<\/code>\n<\/div>"]},"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":21,"description":"p5.Image<\/code> objects\nhave methods for common tasks such as applying filters and modifying\npixel values.<\/p>\n","example":["\n\nlet img;\n\n\/\/ Load the image.\nfunction preload() {\n img = loadImage('assets\/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n \/\/ Display the image.\n image(img, 0, 0);\n\n describe('An image of a brick wall.');\n}\n<\/code>\n<\/div>\n\n\nlet img;\n\n\/\/ Load the image.\nfunction preload() {\n img = loadImage('assets\/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n \/\/ Apply the GRAY filter.\n img.filter(GRAY);\n\n \/\/ Display the image.\n image(img, 0, 0);\n\n describe('A grayscale image of a brick wall.');\n}\n<\/code>\n<\/div>\n\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n \/\/ Create a p5.Image object.\n let img = createImage(66, 66);\n\n \/\/ Load the image's pixels.\n img.loadPixels();\n\n \/\/ Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n \/\/ Update the image.\n img.updatePixels();\n\n \/\/ Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n<\/code>\n<\/div>"],"is_constructor":1,"params":[{"name":"width","description":"","type":"Number"},{"name":"height","description":"","type":"Number"}]},"p5.PrintWriter":{"name":"p5.PrintWriter","shortname":"p5.PrintWriter","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Output","namespace":"","file":"src\/io\/files.js","line":1565,"description":"p5.PrintWriter<\/code> object provides a way to save a sequence of text\ndata, called the print stream<\/em>, to the user's computer. It's a low-level\nobject that enables precise control of text output. Functions such as\nsaveStrings()<\/a> and\nsaveJSON()<\/a> are easier to use for simple file\nsaving.<\/p>\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n \/\/ Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n \/\/ Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n\/\/ Save the file when the user double-clicks.\nfunction doubleClicked() {\n \/\/ Create a p5.PrintWriter object.\n let myWriter = createWriter('xo.txt');\n\n \/\/ Add some lines to the print stream.\n myWriter.print('XOO');\n myWriter.print('OXO');\n myWriter.print('OOX');\n\n \/\/ Save the file and close the print stream.\n myWriter.close();\n}\n<\/code>\n<\/div>"]},"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":33,"description":"p5.XML<\/code> object provides an easy way to interact with XML data.\nExtensible Markup Language\n(XML<\/a>)\nis a standard format for sending data between applications. Like HTML, the\nXML format is based on tags and attributes, as in\n<time units=\"s\">1234<\/time><\/code>.<\/p>\n\nlet myXML;\n\n\/\/ Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets\/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n \/\/ Get an array with all mammal tags.\n let mammals = myXML.getChildren('mammal');\n\n \/\/ Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n \/\/ Iterate over the mammals array.\n for (let i = 0; i < mammals.length; i += 1) {\n\n \/\/ Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n \/\/ Get the mammal's common name.\n let name = mammals[i].getContent();\n\n \/\/ Display the mammal's name.\n text(name, 20, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on three separate lines. The text is black on a gray background.'\n );\n}\n<\/code>\n<\/div>"]},"p5.Vector":{"name":"p5.Vector","shortname":"p5.Vector","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Math","submodule":"Vector","namespace":"","file":"src\/math\/p5.Vector.js","line":11,"description":"p5.Vector<\/code> objects are often used to program motion because they simplify\nthe math. For example, a moving ball has a position and a velocity.\nPosition describes where the ball is in space. The ball's position vector\nextends from the origin to the ball's center. Velocity describes the ball's\nspeed and the direction it's moving. If the ball is moving straight up, its\nvelocity vector points straight up. Adding the ball's velocity vector to\nits position vector moves it, as in pos.add(vel)<\/code>. Vector math relies on\nmethods inside the p5.Vector<\/code> class.<\/p>\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n \/\/ Create p5.Vector objects.\n let p1 = createVector(25, 25);\n let p2 = createVector(75, 75);\n\n \/\/ Style the points.\n strokeWeight(5);\n\n \/\/ Draw the first point using a p5.Vector.\n point(p1);\n\n \/\/ Draw the second point using a p5.Vector's components.\n point(p2.x, p2.y);\n\n describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');\n}\n<\/code>\n<\/div>\n\n\nlet pos;\nlet vel;\n\nfunction setup() {\n createCanvas(100, 100);\n\n \/\/ Create p5.Vector objects.\n pos = createVector(50, 100);\n vel = createVector(0, -1);\n\n describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');\n}\n\nfunction draw() {\n background(200);\n\n \/\/ Add velocity to position.\n pos.add(vel);\n\n \/\/ If the dot reaches the top of the canvas,\n \/\/ restart from the bottom.\n if (pos.y < 0) {\n pos.y = 100;\n }\n\n \/\/ Draw the dot.\n strokeWeight(5);\n point(pos);\n}\n<\/code>\n<\/div>"]},"p5.Font":{"name":"p5.Font","shortname":"p5.Font","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Typography","submodule":"Loading & Displaying","namespace":"","file":"src\/typography\/p5.Font.js","line":13,"description":"\nlet font;\n\nfunction preload() {\n \/\/ Creates a p5.Font object.\n font = loadFont('assets\/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n \/\/ Style the text.\n fill('deeppink');\n textFont(font);\n textSize(36);\n\n \/\/ Display the text.\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a gray background.');\n}\n<\/code>\n<\/div>"]},"p5.Camera":{"name":"p5.Camera","shortname":"p5.Camera","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"3D","submodule":"Camera","namespace":"","file":"src\/webgl\/p5.Camera.js","line":723,"description":"p5.Camera<\/code> object represents a camera that views a section of 3D\nspace. It stores information about the camera\u2019s position, orientation, and\nprojection.<\/p>\np5.Camera<\/code> object that can be\ncontrolled with the camera()<\/a>,\nperspective()<\/a>,\northo()<\/a>, and\nfrustum()<\/a> functions. Additional cameras can be\ncreated with createCamera()<\/a> and activated\nwith setCamera()<\/a>.<\/p>\np5.Camera<\/code>\u2019s methods operate in two coordinate systems:<\/p>\n\n
myCamera.setPosition()<\/code> places the camera in 3D space using\n\"world\" coordinates.<\/li>\nmyCamera.move()<\/code> moves the camera along its own axes.<\/li>\n<\/ul>\n","is_constructor":1,"params":[{"name":"rendererGL","description":"\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n \/\/ Create a p5.Camera object.\n cam = createCamera();\n\n \/\/ Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n \/\/ Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n \/\/ Turn the camera left and right, called \"panning\".\n cam.pan(delta);\n\n \/\/ Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n \/\/ Draw the box.\n box();\n}\n<\/code>\n<\/div>\n\n\n\/\/ Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n \/\/ Create the first camera.\n \/\/ Keep its default settings.\n cam1 = createCamera();\n\n \/\/ Create the second camera.\n \/\/ Place it at the top-left.\n \/\/ Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n \/\/ Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n \/\/ Draw the box.\n box();\n}\n\n\/\/ Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n<\/code>\n<\/div>"]},"p5.Framebuffer":{"name":"p5.Framebuffer","shortname":"p5.Framebuffer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","namespace":"","file":"src\/webgl\/p5.Framebuffer.js","line":76,"description":"p5.Framebuffer<\/code> object provides a dedicated drawing surface called\na framebuffer<\/em>. They're similar to\np5.Graphics<\/a> objects but can run much faster.\nPerformance is improved because the framebuffer shares the same WebGL\ncontext as the canvas used to create it.<\/p>\np5.Framebuffer<\/code> objects have all the drawing features of the main\ncanvas. Drawing instructions meant for the framebuffer must be placed\nbetween calls to\nmyBuffer.begin()<\/a> and\nmyBuffer.end()<\/a>. The resulting image\ncan be applied as a texture by passing the p5.Framebuffer<\/code> object to the\ntexture()<\/a> function, as in texture(myBuffer)<\/code>.\nIt can also be displayed on the main canvas by passing it to the\nimage()<\/a> function, as in image(myBuffer, 0, 0)<\/code>.<\/p>\n