diff --git a/.gitignore b/.gitignore index 5747a6ac..686f83cd 100644 --- a/.gitignore +++ b/.gitignore @@ -48,6 +48,7 @@ miktest.c upx/ cylindrix/ build/ +capture/ p5.js-master/ tests/p5.js/ .vscode/ipch diff --git a/CHANGELOG.md b/CHANGELOG.md index 245c9f39..faa4cc2c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +**Version 0.9.7 (the late lament)** +* fixed rect(). +* added Bitmap.DrawTrans() for 32bit TGA images w/ alpha. +* Added Cut, Copy & Paste to the editor. +* Added auto indent and backtab handling. +* Started working on allegro 3D fuctions (unfinished, untested)! + **Version 0.9.6 (the crashing creation)** * Fixed massive crash when using the builtin font in p5 compatibility layer * Some API improvements diff --git a/DOjS.c b/DOjS.c index 4ffeb223..12760ef9 100644 --- a/DOjS.c +++ b/DOjS.c @@ -30,6 +30,7 @@ SOFTWARE. #include #include "DOjS.h" +#include "a3d.h" #include "bitmap.h" #include "color.h" #include "edit.h" @@ -71,6 +72,12 @@ BITMAP *cur; volatile unsigned long sys_ticks; +/************************ +** function prototypes ** +************************/ +static void tick_handler(void); +static void tick_handler_end(void); + /********************* ** static functions ** *********************/ @@ -279,6 +286,7 @@ static void run_script(char *script, int width, int bpp, bool no_sound, bool no_ init_bitmap(J); init_font(J); init_file(J); + init_a3d(J); // create canvas set_color_depth(bpp); @@ -303,6 +311,7 @@ static void run_script(char *script, int width, int bpp, bool no_sound, bool no_ js_dofile(J, JSINC_COLOR); js_dofile(J, JSINC_FILE); js_dofile(J, JSINC_IPX); + js_dofile(J, JSINC_A3D); // load main file lastError = NULL; diff --git a/DOjS.h b/DOjS.h index 90bbc981..d11efeb7 100644 --- a/DOjS.h +++ b/DOjS.h @@ -38,8 +38,8 @@ SOFTWARE. #define SYSINFO ">>> " //!< logfile line prefix for system messages -#define DOSJS_VERSION 0.96 //!< version number -#define DOSJS_VERSION_STR "V0.96" //!< version number as string +#define DOSJS_VERSION 0.97 //!< version number +#define DOSJS_VERSION_STR "V0.97" //!< version number as string #define BOOT_DIR "JSBOOT/" //!< directory with boot files. @@ -148,6 +148,6 @@ extern volatile unsigned long sys_ticks; //!< tick counter /*********************** ** exported functions ** ***********************/ -extern void update_transparency(); +extern void update_transparency(void); #endif // __DOJS_H__ diff --git a/Makefile b/Makefile index 9f05d0cb..912ecfef 100644 --- a/Makefile +++ b/Makefile @@ -12,7 +12,7 @@ ALLEGRO=allegro-4.2.2-xc-master INCLUDES=-I$(MUJS) -I$(ALLEGRO)/include LIBS=-lalleg -lmujs -lm -lemu -CFLAGS=-MMD -Wall -O2 -march=i386 -mtune=i586 -ffast-math $(INCLUDES) -DPLATFORM_MSDOS -fgnu89-inline #-DDEBUG_ENABLED +CFLAGS=-MMD -Wall -Wmissing-prototypes -O2 -march=i386 -mtune=i586 -ffast-math $(INCLUDES) -DPLATFORM_MSDOS -fgnu89-inline #-DDEBUG_ENABLED LDFLAGS=-L$(MUJS)/build/release -L$(ALLEGRO)/lib/djgpp EXE=DOJS.EXE @@ -47,7 +47,8 @@ PARTS= \ $(BUILDDIR)/funcs.o \ $(BUILDDIR)/gfx.o \ $(BUILDDIR)/sound.o \ - $(BUILDDIR)/util.o + $(BUILDDIR)/util.o \ + $(BUILDDIR)/a3d.o all: init libmujs liballegro $(EXE) diff --git a/a3d.c b/a3d.c new file mode 100644 index 00000000..9a5e109f --- /dev/null +++ b/a3d.c @@ -0,0 +1,251 @@ +/* +MIT License + +Copyright (c) 2019 Andre Seidelt + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ + +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include + +#include "DOjS.h" +#include "a3d.h" +#include "bitmap.h" + +/********************* +** static functions ** +*********************/ +/** + * expects an array w/ 5 elements on the stack and returns a V3D. + */ +static V3D_f *array_to_v3d(js_State *J, int idx) { + V3D_f *v = malloc(sizeof(V3D_f)); + if (!v) { + return NULL; + } + + js_getindex(J, idx, 0); + v->x = js_tonumber(J, -1); + js_pop(J, 1); + js_getindex(J, idx, 1); + v->y = js_tonumber(J, -1); + js_pop(J, 1); + js_getindex(J, idx, 2); + v->z = js_tonumber(J, -1); + js_pop(J, 1); + js_getindex(J, idx, 3); + v->u = js_tonumber(J, -1); + js_pop(J, 1); + js_getindex(J, idx, 4); + v->v = js_tonumber(J, -1); + js_pop(J, 1); + + js_getindex(J, idx, 5); + v->c = js_toint32(J, -1); + js_pop(J, 1); + + return v; +} + +static V3D_f **v3d_array(js_State *J, int idx, int *vc) { + if (!js_isarray(J, idx)) { + *vc = 0; + js_error(J, "Array expected"); + return NULL; + } else { + int len = js_getlength(J, idx); + V3D_f **array = malloc(len * sizeof(V3D_f *)); + if (!array) { + return NULL; + } + for (int i = 0; i < len; i++) { + js_getindex(J, idx, i); + { + int vlen = js_getlength(J, -1); + if (vlen < 6) { + js_error(J, "V3D must have 6 values"); + free(array); + *vc = 0; + return NULL; + } + + array[i] = array_to_v3d(J, -1); + } + js_pop(J, 1); + } + *vc = len; + return array; + } +} + +static void free_v3d(V3D_f **v, int vc) { + if (v) { + for (int i = 0; i < vc; i++) { + free(v[i]); + } + + free(v); + } +} + +static BITMAP *bitmap_or_null(js_State *J, int idx) { + BITMAP *texture = NULL; + if (js_isuserdata(J, idx, TAG_BITMAP)) { + texture = js_touserdata(J, idx, TAG_BITMAP); + } + return texture; +} + +static void f_Triangle3D(js_State *J) { + int type = js_toint16(J, 1); + BITMAP *texture = bitmap_or_null(J, 2); + + V3D_f *v1 = array_to_v3d(J, 3); + V3D_f *v2 = array_to_v3d(J, 4); + V3D_f *v3 = array_to_v3d(J, 5); + + if (v1 && v2 && v3) { + triangle3d_f(cur, type, texture, v1, v2, v3); + } else { + js_error(J, "Cannot convert vertex"); + } + + if (v1) { + free(v1); + } + if (v2) { + free(v2); + } + if (v3) { + free(v3); + } +} + +static void f_Quad3D(js_State *J) { + int type = js_toint16(J, 1); + BITMAP *texture = bitmap_or_null(J, 2); + + V3D_f *v1 = array_to_v3d(J, 3); + V3D_f *v2 = array_to_v3d(J, 4); + V3D_f *v3 = array_to_v3d(J, 5); + V3D_f *v4 = array_to_v3d(J, 6); + + if (v1 && v2 && v3 && v4) { + quad3d_f(cur, type, texture, v1, v2, v3, v4); + } else { + js_error(J, "Cannot convert vertex"); + } + + if (v1) { + free(v1); + } + if (v2) { + free(v2); + } + if (v3) { + free(v3); + } + if (v4) { + free(v4); + } +} + +static void f_RenderScene(js_State *J) { render_scene(); } + +static void f_DestroyScene(js_State *J) { destroy_scene(); } + +static void f_ClearScene(js_State *J) { clear_scene(cur); } + +static void f_CreateScene(js_State *J) { + int nedge = js_toint16(J, 1); + int npoly = js_toint16(J, 2); + + if (create_scene(nedge, npoly) < 0) { + js_error(J, "Cannot allocate scene"); + return; + } +} + +static void f_Polygon3D(js_State *J) { + int type = js_toint16(J, 1); + BITMAP *texture = bitmap_or_null(J, 2); + + int vc = 0; + V3D_f **vtx = v3d_array(J, 3, &vc); + if (vtx) { + polygon3d_f(cur, type, texture, vc, vtx); + } else { + js_error(J, "Cannot convert vertices"); + } + + free_v3d(vtx, vc); +} + +static void f_VDebug(js_State *J) { + int vc = 0; + V3D_f **vtx = v3d_array(J, 1, &vc); + if (vtx) { + fprintf(LOGSTREAM, "Number of entries=%d\n", vc); + for (int i = 0; i < vc; i++) { + fprintf(LOGSTREAM, " v[%d] = {x=%f, y=%f, z=%f, u=%f, v=%f, c=0x%X}\n", i, vtx[i]->x, vtx[i]->y, vtx[i]->z, vtx[i]->u, vtx[i]->v, vtx[i]->c); + } + } else { + js_error(J, "Cannot convert vertices"); + } + fflush(LOGSTREAM); + + free_v3d(vtx, vc); +} + +// static void f_(js_State *J) {} + +/*********************** +** exported functions ** +***********************/ +/** + * @brief initialize a3d subsystem. + * + * @param J VM state. + */ +void init_a3d(js_State *J) { + // define global functions + FUNCDEF(J, f_RenderScene, "RenderScene", 0); + FUNCDEF(J, f_DestroyScene, "DestroyScene", 0); + FUNCDEF(J, f_ClearScene, "ClearScene", 0); + FUNCDEF(J, f_CreateScene, "CreateScene", 2); + + FUNCDEF(J, f_Polygon3D, "Polygon3D", 3); + FUNCDEF(J, f_Triangle3D, "Triangle3D", 5); + FUNCDEF(J, f_Quad3D, "Quad3D", 6); + + FUNCDEF(J, f_VDebug, "VDebug", 1); +} + +/** + int clip3d_f(int type, float min_z, float max_z, int vc, const V3D_f *vtx[], V3D_f *vout[], V3D_f *vtmp[], int out[]); +zbuffer? + + */ \ No newline at end of file diff --git a/a3d.h b/a3d.h new file mode 100644 index 00000000..a41d4861 --- /dev/null +++ b/a3d.h @@ -0,0 +1,39 @@ +/* +MIT License + +Copyright (c) 2019 Andre Seidelt + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ + +#ifndef __A3D_H__ +#define __A3D_H__ + +#include +#include "DOjS.h" + +/************ +** defines ** +************/ +#define JSINC_A3D BOOT_DIR "a3d.js" //!< boot script for a3d subsystem + +/*********************** +** exported functions ** +***********************/ +extern void init_a3d(js_State *J); + +#endif // __A3D_H__ diff --git a/bitmap.c b/bitmap.c index 9951caab..ffd6c9bc 100644 --- a/bitmap.c +++ b/bitmap.c @@ -87,6 +87,19 @@ static void Bitmap_Draw(js_State *J) { blit(bm, cur, 0, 0, x, y, bm->w, bm->h); } +/** + * @brief draw the image to the canvas. + * img.DrawTrans(x, y) + * + * @param J VM state. + */ +static void Bitmap_DrawTrans(js_State *J) { + BITMAP *bm = js_touserdata(J, 0, TAG_BITMAP); + int x = js_toint16(J, 1); + int y = js_toint16(J, 2); + draw_trans_sprite(cur, bm, x, y); +} + /** * @brief get the color of an image pixel. * img.GetPixel(x, y):Color @@ -115,6 +128,7 @@ void init_bitmap(js_State *J) { js_newobject(J); { PROTDEF(J, Bitmap_Draw, TAG_BITMAP, "Draw", 2); + PROTDEF(J, Bitmap_DrawTrans, TAG_BITMAP, "DrawTrans", 2); PROTDEF(J, Bitmap_GetPixel, TAG_BITMAP, "GetPixel", 2); } js_newcconstructor(J, new_Bitmap, new_Bitmap, TAG_BITMAP, 1); diff --git a/doc/classes.js b/doc/classes.js index 97f6a55e..2a44b6eb 100644 --- a/doc/classes.js +++ b/doc/classes.js @@ -66,6 +66,13 @@ Bitmap.height = null; */ Bitmap.prototype.Draw = function (x, y) { }; +/** + * Draw the image to the canvas at given coordinates using the alpha channel transparency. Only works for 32bit TGA with alpha channel information. + * @param {number} x position to draw to. + * @param {number} y position to draw to. + */ +Bitmap.prototype.DrawTrans = function (x, y) { }; + /** * Get the color of a pixel of this image. * @param {number} x position. diff --git a/doc/html/ArcInfo.html b/doc/html/ArcInfo.html deleted file mode 100644 index 0be3e89f..00000000 --- a/doc/html/ArcInfo.html +++ /dev/null @@ -1,363 +0,0 @@ - - - - - Class: ArcInfo | Class: ArcInfo - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

ArcInfo()

- -
An object with coordinates of a drawn arc.
- - -
- -
- -
- - - -
- -

- - new ArcInfo() - - -
- doc/objects.js, - line 21 -
- -

- - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
centerX - - -number - - - - center x coordinate of the arc.
centerY - - -number - - - - center y coordinate of the arc.
startX - - -number - - - - x coordinate of the arc start.
startY - - -number - - - - y coordinate of the arc start.
endX - - -number - - - - x coordinate of the arc end.
endY - - -number - - - - y coordinate of the arc end.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/Bitmap.html b/doc/html/Bitmap.html deleted file mode 100644 index 2dce294b..00000000 --- a/doc/html/Bitmap.html +++ /dev/null @@ -1,808 +0,0 @@ - - - - - Class: Bitmap | Class: Bitmap - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

Bitmap(filename)

- - -
- -
- -
- - - -
- -

- - new Bitmap(filename) - - -
- doc/classes.js, - line 48 -
- -

- - - -
-
- - -
- Load a BMP, TGA or PCX image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -string - - - - name of the BMP or PNG file.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- static filename - -
- doc/classes.js, - line 52 -
- -

- - -
-
- -
- Name of the file. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static height - -
- doc/classes.js, - line 60 -
- -

- - -
-
- -
- Height in pixels -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static width - -
- doc/classes.js, - line 56 -
- -

- - -
-
- -
- Width in pixels -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - Draw(x, y) - - -
- doc/classes.js, - line 67 -
- -

- - - -
-
- - -
- Draw the image to the canvas at given coordinates. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - position to draw to.
y - - -number - - - - position to draw to.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - GetPixel(x, y) → {number} - - -
- doc/classes.js, - line 75 -
- -

- - - -
-
- - -
- Get the color of a pixel of this image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - position.
y - - -number - - - - position.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the color of the pixel. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/Event.html b/doc/html/Event.html deleted file mode 100644 index 02096d2a..00000000 --- a/doc/html/Event.html +++ /dev/null @@ -1,338 +0,0 @@ - - - - - Class: Event | Class: Event - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

Event()

- - -
- -
- -
- - - -
- -

- - new Event() - - -
- doc/objects.js, - line 9 -
- -

- - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - mouse X coordinate.
y - - -number - - - - mouse X coordinate.
buttons - - -number - - - - mouse buttons, see MOUSE
key - - -number - - - - key code, see KEY
ticks - - -number - - - - event time.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/File.html b/doc/html/File.html deleted file mode 100644 index 78f62ae5..00000000 --- a/doc/html/File.html +++ /dev/null @@ -1,951 +0,0 @@ - - - - - Class: File | Class: File - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

File(filename, mode)

- - -
- -
- -
- - - -
- -

- - new File(filename, mode) - - -
- doc/classes.js, - line 10 -
- -

- - - -
-
- - -
- Open a file, for file modes see FILE. Files can only either be read or written, never both.Writing to a closed file throws an exception. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -string - - - - the name of the file.
mode - - -string - - - - READ, WRITE or APPEND.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - - - -

Methods

- -
- - -
- -

- - Close() - - -
- doc/classes.js, - line 38 -
- -

- - - -
-
- - -
- Close the file. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - ReadByte() → {number} - - -
- doc/classes.js, - line 15 -
- -

- - - -
-
- - -
- Read a single byte from file and return it as number. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the byte as a number or null for EOF. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - ReadLine() → {string} - - -
- doc/classes.js, - line 24 -
- -

- - - -
-
- - -
- Read a line of text from file. The maximum line length is 4096 byte. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -string - - - - - -- the next line or null for EOF. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - WriteByte() - - -
- doc/classes.js, - line 19 -
- -

- - - -
-
- - -
- Write a single byte to a file. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - WriteLine(txt) - - -
- doc/classes.js, - line 29 -
- -

- - - -
-
- - -
- Write a NEWLINE terminated string to a file. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
txt - - -string - - - - the string to write.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - WriteString(txt) - - -
- doc/classes.js, - line 34 -
- -

- - - -
-
- - -
- Write a string to a file. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
txt - - -string - - - - the string to write.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/Font.html b/doc/html/Font.html deleted file mode 100644 index c02f8c57..00000000 --- a/doc/html/Font.html +++ /dev/null @@ -1,1338 +0,0 @@ - - - - - Class: Font | Class: Font - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

Font(filename)

- - -
- -
- -
- - - -
- -

- - new Font(filename) - - -
- doc/classes.js, - line 85 -
- -

- - - -
-
- - -
- Load a '.FNT' file for GRX. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -* - - - - name of the font file.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- static filename - -
- doc/classes.js, - line 89 -
- -

- - -
-
- -
- Name of the FNT file. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static height - -
- doc/classes.js, - line 93 -
- -

- - -
-
- -
- Font height -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - DrawStringCenter(x, y, foreground, background) - - -
- doc/classes.js, - line 109 -
- -

- - - -
-
- - -
- Draw a center aligned string to the canvas. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x position
y - - -number - - - - y position.
foreground - - -Color - - - - foreground color.
background - - -Color - - - - background color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - DrawStringLeft(x, y, foreground, background) - - -
- doc/classes.js, - line 101 -
- -

- - - -
-
- - -
- Draw a left aligned string to the canvas. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x position
y - - -number - - - - y position.
foreground - - -Color - - - - foreground color.
background - - -Color - - - - background color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - DrawStringRight(x, y, foreground, background) - - -
- doc/classes.js, - line 117 -
- -

- - - -
-
- - -
- Draw a right aligned string to the canvas. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x position
y - - -number - - - - y position.
foreground - - -Color - - - - foreground color.
background - - -Color - - - - background color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - StringHeight(the) → {number} - - -
- doc/classes.js, - line 129 -
- -

- - - -
-
- - -
- Calculate string height for this font. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
the - - -string - - - - string to check.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the height in pixels. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - StringWidth(the) → {number} - - -
- doc/classes.js, - line 123 -
- -

- - - -
-
- - -
- Calculate string width for this font. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
the - - -string - - - - string to check.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the width in pixels. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/IpxAddress.html b/doc/html/IpxAddress.html deleted file mode 100644 index 8eed606d..00000000 --- a/doc/html/IpxAddress.html +++ /dev/null @@ -1,196 +0,0 @@ - - - - - Class: IpxAddress | Class: IpxAddress - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

IpxAddress()

- -
Node addresses are arrays of 6 numbers between 0-255.
- - -
- -
- -
- - - -
- -

- - new IpxAddress() - - -
- doc/objects.js, - line 27 -
- -

- - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/IpxPacket.html b/doc/html/IpxPacket.html deleted file mode 100644 index 2fcd02aa..00000000 --- a/doc/html/IpxPacket.html +++ /dev/null @@ -1,271 +0,0 @@ - - - - - Class: IpxPacket | Class: IpxPacket - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

IpxPacket()

- -
received IPX data packet.
- - -
- -
- -
- - - -
- -

- - new IpxPacket() - - -
- doc/objects.js, - line 35 -
- -

- - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
data - - -string - - - - the received data.
source - - -IpxAddress - - - - address of the sending node.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/MemInfo.html b/doc/html/MemInfo.html deleted file mode 100644 index a2ae9eb7..00000000 --- a/doc/html/MemInfo.html +++ /dev/null @@ -1,269 +0,0 @@ - - - - - Class: MemInfo | Class: MemInfo - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

MemInfo()

- - -
- -
- -
- - - -
- -

- - new MemInfo() - - -
- doc/objects.js, - line 58 -
- -

- - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
total - - -number - - - - total amount of memory in the system.
remaining - - -number - - - - number of available bytes.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/Midi.html b/doc/html/Midi.html deleted file mode 100644 index 752d1187..00000000 --- a/doc/html/Midi.html +++ /dev/null @@ -1,341 +0,0 @@ - - - - - Class: Midi | Class: Midi - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

Midi(filename)

- - -
- -
- -
- - - -
- -

- - new Midi(filename) - - -
- doc/classes.js, - line 173 -
- -

- - - -
-
- - -
- Load a midi file. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -string - - - - the name of the MIDI file.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - - - -

Methods

- -
- - -
- -

- - Play() - - -
- doc/classes.js, - line 177 -
- -

- - - -
-
- - -
- Play the midi file. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/Sample.html b/doc/html/Sample.html deleted file mode 100644 index 78255660..00000000 --- a/doc/html/Sample.html +++ /dev/null @@ -1,737 +0,0 @@ - - - - - Class: Sample | Class: Sample - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

Sample(filename)

- - -
- -
- -
- - - -
- -

- - new Sample(filename) - - -
- doc/classes.js, - line 140 -
- -

- - - -
-
- - -
- Load a WAV-file. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -string - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- static filename - -
- doc/classes.js, - line 144 -
- -

- - -
-
- -
- Name of the WAV. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static frequency - -
- doc/classes.js, - line 152 -
- -

- - -
-
- -
- Sound frequency. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static length - -
- doc/classes.js, - line 148 -
- -

- - -
-
- -
- Sound length. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - Play(volume, panning, loop) - - -
- doc/classes.js, - line 159 -
- -

- - - -
-
- - -
- Play the WAV. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
volume - - -number - - - - between 0-255.
panning - - -number - - - - between (left) 0-255 (right).
loop - - -boolean - - - - true := sample will loop, false := sample will only be played once.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - Stop() - - -
- doc/classes.js, - line 163 -
- -

- - - -
-
- - -
- Stop playing. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/StatInfo.html b/doc/html/StatInfo.html deleted file mode 100644 index 8cb51315..00000000 --- a/doc/html/StatInfo.html +++ /dev/null @@ -1,476 +0,0 @@ - - - - - Class: StatInfo | Class: StatInfo - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

StatInfo()

- - -
- -
- -
- - - -
- -

- - new StatInfo() - - -
- doc/objects.js, - line 51 -
- -

- - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
atime - - -string - - - - file access timestamp.
ctime - - -string - - - - file creation time.
mtime - - -string - - - - file modification time.
blksize - - -number - - - - file size in blocks.
size - - -number - - - - file size in bytes.
nlink - - -number - - - - number of sub entries.
drive - - -string - - - - drive letter for the entry.
is_blockdev - - -boolean - - - - true if this is a block device.
is_chardev - - -boolean - - - - true if this is a character device.
is_directory - - -boolean - - - - true if this is a directory.
is_regular - - -boolean - - - - true if this is a regular file.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/doc_classes.js.html b/doc/html/doc_classes.js.html deleted file mode 100644 index dda4bd8d..00000000 --- a/doc/html/doc_classes.js.html +++ /dev/null @@ -1,255 +0,0 @@ - - - - - - - Source: doc/classes.js | Source: doc/classes.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/********
- * File
- */
-/**
- * Open a file, for file modes see {@link FILE}. Files can only either be read or written, never both.Writing to a closed file throws an exception.
- * @class
- * @param {string} filename the name of the file.
- * @param {string} mode READ, WRITE or APPEND.
- */
-function File(filename, mode) { }
-/**
- * Read a single byte from file and return it as number.
- * @returns {number} the byte as a number or null for EOF.
- */
-File.prototype.ReadByte = function () { };
-/**
- * Write a single byte to a file.
- */
-File.prototype.WriteByte = function (ch) { };
-/**
- * Read a line of text from file. The maximum line length is 4096 byte.
- * @returns {string} the next line or null for EOF.
- */
-File.prototype.ReadLine = function () { };
-/**
- * Write a NEWLINE terminated string to a file.
- * @param {string} txt the string to write.
- */
-File.prototype.WriteLine = function (txt) { };
-/**
- * Write a string to a file.
- * @param {string} txt the string to write.
- */
-File.prototype.WriteString = function (txt) { };
-/**
- * Close the file.
- */
-File.prototype.Close = function () { };
-
-/********
- * Bitmap
- */
-/**
- * Load a BMP, TGA or PCX image.
- * @class
- * @param {string} filename name of the BMP or PNG file.
- */
-function Bitmap(filename) { };
-/**
- * Name of the file.
- */
-Bitmap.filename = null;
-/**
- * Width in pixels
- */
-Bitmap.width = null;
-/**
- * Height in pixels
- */
-Bitmap.height = null;
-
-/**
- * Draw the image to the canvas at given coordinates.
- * @param {number} x position to draw to.
- * @param {number} y position to draw to.
- */
-Bitmap.prototype.Draw = function (x, y) { };
-
-/**
- * Get the color of a pixel of this image.
- * @param {number} x position.
- * @param {number} y position.
- * @returns {number} the color of the pixel.
- */
-Bitmap.prototype.GetPixel = function (x, y) { };
-
-/********
- * Font
- */
-/**
- * Load a '.FNT' file for GRX.
- * @class
- * @param {*} filename name of the font file.
- */
-function Font(filename) { }
-/**
- * Name of the FNT file.
- */
-Font.filename = null;
-/**
- * Font height
- */
-Font.height = null;
-/**
- * Draw a left aligned string to the canvas.
- * @param {number} x x position
- * @param {number} y y position.
- * @param {Color} foreground foreground color.
- * @param {Color} background background color.
- */
-Font.prototype.DrawStringLeft = function (x, y, text, foreground, background) { };
-/**
- * Draw a center aligned string to the canvas.
- * @param {number} x x position
- * @param {number} y y position.
- * @param {Color} foreground foreground color.
- * @param {Color} background background color.
- */
-Font.prototype.DrawStringCenter = function (x, y, text, foreground, background) { };
-/**
- * Draw a right aligned string to the canvas.
- * @param {number} x x position
- * @param {number} y y position.
- * @param {Color} foreground foreground color.
- * @param {Color} background background color.
- */
-Font.prototype.DrawStringRight = function (x, y, text, foreground, background) { };
-/**
- * Calculate string width for this font.
- * @param {string} the string to check.
- * @returns {number} the width in pixels.
- */
-Font.prototype.StringWidth = function (text) { };
-/**
- * Calculate string height for this font.
- * @param {string} the string to check.
- * @returns {number} the height in pixels.
- */
-Font.prototype.StringHeight = function (text) { };
-
-
-/********
- * Sample/Module
- */
-/**
- * Load a WAV-file.
- * @class
- * @param {string} filename 
- */
-function Sample(filename) { }
-/**
- * Name of the WAV.
- */
-Sample.filename = null;
-/**
- * Sound length.
- */
-Sample.length = null;
-/**
- * Sound frequency.
- */
-Sample.frequency = null;
-/**
- * Play the WAV.
- * @param {number} volume between 0-255.
- * @param {number} panning between (left) 0-255 (right).
- * @param {boolean} loop true := sample will loop, false := sample will only be played once.
- */
-Sample.prototype.Play = function (volume, panning, loop) { };
-/**
- * Stop playing.
- */
-Sample.prototype.Stop = function () { };
-
-/********
- * MIDI
- */
-/**
- * Load a midi file.
- * @class
- * @param {string} filename the name of the MIDI file.
- */
-function Midi(filename) { }
-/**
- * Play the midi file.
- */
-Midi.prototype.Play = function () { };
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/doc_internal.js.html b/doc/html/doc_internal.js.html deleted file mode 100644 index eb154935..00000000 --- a/doc/html/doc_internal.js.html +++ /dev/null @@ -1,588 +0,0 @@ - - - - - - - Source: doc/internal.js | Source: doc/internal.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/********
- * Script definition
- */
-
-/**
- * This function is called once at startup. It can initialize variables, setup hardware, etc.
- */
-function Setup() { }
-
-/**
- * This function is called after setup repeatedly until {@link Stop} is called. After calling {@link Stop} the program ends when {@link Loop} exits.
- */
-function Loop() { }
-
-/**
- * This function is called whenever mouse / keyboard input happens.
- * @param {Event} event the current event.
- */
-function Input(event) { }
-
-/**
- * @property {object} global the global context.
- */
-global = null;
-
-/********
- * Other properties
- * 
- * @module other
- */
-/**
- * @property {boolean} SOUND_AVAILABLE true if sound is available.
- */
-SOUND_AVAILABLE = null;
-
-/**
- * @property {boolean} MOUSE_AVAILABLE true if mouse is available.
- */
-MOUSE_AVAILABLE = true;
-
-/**
- * @property {boolean} IPX_AVAILABLE true if networking is available.
- */
-IPX_AVAILABLE = true;
-
-/**
- * @property {number} DOJS_VERSION the version
- */
-DOJS_VERSION = 0.0;
-
-/**
- * IPX network functions.
- * 
- * @module ipx
- */
-/**
- * Open an IPX socket. See {@link IPX} for DEFAULT_SOCKET.
- * @param {*} num the socket number to use.
- * 
- */
-function IpxSocketOpen(num) { }
-
-/**
- * Close IPX socket (if any).
- */
-function IpxSocketClose() { }
-
-/**
- * Send packet via IPX. Max length 79 byte. Node addresses are arrays of 6 numbers between 0-255. See {@link IPX} for BROADCAST address.
- * @param {string} data data to send.
- * @param {IpxAddress} dest destination address.
- */
-function IpxSend(data, dest) { }
-
-/**
- * Check for packet in receive buffer.
- * @returns {boolean} true if a packet is available.
- */
-function IpxCheckPacket() { }
-
-/**
- * Get packet from receive buffer(or NULL).
- * @returns {IpxPacket} a data packet or null if none available.
- */
-function IpxGetPacket() { }
-
-/**
- * Get the local address.
- * @returns {IpxAddress} an array containing the own address.
- */
-function IpxGetLocalAddress() { }
-
-/**
- * MIDI music functions. See {@link Midi} on how to load MIDI files.
- * 
- * @module midi
- */
-/**
- * Check if the file is still playing.
- * @returns {boolean} true if the file is still playing.
- */
-function MidiIsPlaying() { }
-
-/**
- * Stop playing midi.
- */
-function MidiStop() { }
-
-/**
- * Pause playing midi.
- */
-function MidiPause() { }
-
-/**
- * Resume playing midi after MidiPause().
- */
-function MidiResume() { }
-
-/**
- * Get song position.
- * @returns {number} current song position in seconds.
- */
-function MidiGetTime() { }
-
-/**
- * Send MIDI commands to output.
- * @param {number[]} data an array of midi commands.
- */
-function MidiOut(data) { }
-
-/**
- * All graphics functions.
- * 
- * @module gfx
- */
-/**
- * get the width of the drawing area.
- * @returns {number} the width of the drawing area.
- */
-function SizeX() { }
-
-/**
- * get the height of the drawing area.
- * @returns {number} the height of the drawing area.
- */
-function SizeY() { }
-
-/**
- * Get color depth info.
- * @returns {number} bits per pixel.
- */
-function GetScreenMode() { }
-
-/**
- * clear the screen with given color.
- * @param {number} c the color.
- */
-function ClearScreen(c) { }
-
-/**
- * draw a point.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} c color.
- */
-function Plot(x, y, c) { }
-
-/**
- * draw a line.
- * @param {number} x1 start x coordinate.
- * @param {number} y1 start y coordinate.
- * @param {number} x2 end x coordinate.
- * @param {number} y2 end y coordinate.
- * @param {number} c color.
- */
-function Line(x1, y1, x2, y2, c) { }
-
-/**
- * draw a line with given width.
- * @param {number} x1 start x coordinate.
- * @param {number} y1 start y coordinate.
- * @param {number} x2 end x coordinate.
- * @param {number} y2 end y coordinate.
- * @param {number} w line width.
- * @param {number} c color.
- */
-function CustomLine(x1, y1, x2, y2, w, c) { }
-
-/**
- * draw a box.
- * @param {number} x1 start x coordinate.
- * @param {number} y1 start y coordinate.
- * @param {number} x2 end x coordinate.
- * @param {number} y2 end y coordinate.
- * @param {number} c color.
- */
-function Box(x1, y1, x2, y2, c) { }
-
-/**
- * draw a circle.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} r radius.
- * @param {number} c color.
- */
-function Circle(x, y, r, c) { }
-
-/**
- * draw a circle with given width.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} r radius.
- * @param {number} w line width.
- * @param {number} c color.
- */
-function CustomCircle(x, y, r, w, c) { }
-
-/**
- * draw a ellipse.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} xr radius.
- * @param {number} yr radius.
- * @param {number} c color.
- */
-function Ellipse(x, y, xr, yr, c) { }
-
-/**
- * draw a ellipse with given width.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} xr radius.
- * @param {number} yr radius.
- * @param {number} w line width.
- * @param {number} c color.
- */
-function CustomEllipse(x, y, xr, yr, w, c) { }
-
-/**
- * Draw a circle arc.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} r radius.
- * @param {number} start start angle in tenths of degrees.
- * @param {number} end end angle in tenths of degrees.
- * @param {*} style value from {@link ARC}.
- * @param {number} c color.
- * @returns {ArcInfo} detailed info about the drawn arc.
- */
-function CircleArc(x, y, r, start, end, style, c) { }
-
-/**
- * Draw a circle arc with given width.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} r radius.
- * @param {number} start start angle in tenths of degrees.
- * @param {number} end end angle in tenths of degrees.
- * @param {*} style value from {@link ARC}.
- * @param {number} w line width.
- * @param {number} c color.
- * @returns {ArcInfo} detailed info about the drawn arc.
- */
-function CustomCircleArc(x, y, r, start, end, style, w, c) { }
-
-/**
- * draw a filled box.
- * @param {number} x1 start x coordinate.
- * @param {number} y1 start y coordinate.
- * @param {number} x2 end x coordinate.
- * @param {number} y2 end y coordinate.
- * @param {number} c color.
- */
-function FilledBox(x1, y1, x2, y2, c) { }
-
-/**
- * draw a filled circle.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} r radius.
- * @param {number} c color.
- */
-function FilledCircle(x, y, r, c) { }
-
-/**
- * draw a filled ellipse.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} xr radius.
- * @param {number} yr radius.
- * @param {number} c color.
- */
-function FilledEllipse(x, y, rx, ry, c) { }
-
-/**
- * do a flood fill.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} bound bound color.
- * @param {number} c fill color.
- */
-function FloodFill(x, y, bound, c) { }
-
-/**
- * draw a filled polygon.
- * @param {number} c color.
- * @param {number[][]} points an array of arrays with two coordinates (e.g. [[1, 1], [1, 10], [10, 10], [10, 1]]).
- */
-function FilledPolygon(points, c) { }
-
-/**
- * Draw a text with the default font.
-* @param {number} x x coordinate.
-* @param {number} y y coordinate.
-* @param {*} text the text to display.
-* @param {number} fg foreground color.
-* @param {number} bg background color.
-*/
-function TextXY(x, y, text, fg, bg) { }
-
-/**
- * Save current screen to BMP file.
- * @param {string} fname filename.
- */
-function SaveBmpImage(fname) { }
-
-/**
- * Save current screen to PCX file.
- * @param {string} fname filename.
- */
-function SavePcxImage(fname) { }
-
-/**
- * Save current screen to TGA file.
- * @param {string} fname filename.
- */
-function SaveTgaImage(fname) { }
-
-/**
- * get color of on-screen pixel.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @returns {number} pixel color.
- */
-function GetPixel(x, y) { }
-
-/**
- * Enable/disable the transparency when drawing.
- * @param {boolean} en true to enable transparency when drawing (might slow down drawing).
- */
-function TransparencyEnabled(en) { }
-
-/**
- * @module other
- */
-/**
- * Set mouse speed.
- * @param {number} x horizontal speed.
- * @param {number} y vertical speed.
- */
-function MouseSetSpeed(x, y) { }
-
-/**
- * Limit mouse movement.
- * @param {number} x1 start x coordinate.
- * @param {number} y1 start y coordinate.
- * @param {number} x2 end x coordinate.
- * @param {number} y2 end y coordinate.
- */
-function MouseSetLimits(x1, y1, x2, y2) { }
-
-/**
- * Move mouse cursor.
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- */
-function MouseWarp(x, y) { }
-
-/**
- * Show hide mouse cursor.
- * @param {boolean} b true or false.
- */
-function MouseShowCursor(b) { }
-
-/**
- * Change mode of the mouse cursor.
- * @param {*} mode a mode from {@link MOUSE}.
- */
-function MouseSetCursorMode(mode) { }
-
-/**
- * Write data to JSLOG.TXT logfile.
- * @param {string} s the string to print.
- */
-function Print(s) { }
-/**
- * Write data to JSLOG.TXT logfile with a newline.
- * @param {string} s the string to print.
- */
-function Println(s) { }
-
-/**
- * DOjS will exit after the current call to {@link Loop}.
- */
-function Stop() { }
-
-/**
- * Sleep for the given number of ms.
- * @param {number} ms time to sleep.
- */
-function Sleep(ms) { }
-
-/**
- * Get ms timestamp.
- * @return {number} ms time.
- */
-function MsecTime() { }
-
-/**
- * Load the contents of a file into a string. Throws exception if loading fails.
- * @param {string} filename name of file to read.
- * @returns {string} the contents of the file.
- */
-function Read(filename) { }
-
-/**
- * Get directory listing.
- * @param {string} dname name of directory to list.
- * @returns {string[]} array of entry names.
- */
-function List(dname) { }
-
-/**
- * Get information about a file / directory.
- * @param {string} name name of the file to get info for.
- * @returns {StatInfo} an info object.
- */
-function Stat(name) { }
-
-/**
- * Run garbage collector, print statistics to logfile if 'info==true'.
- * @param {boolean} info true to print collection stats to logfile.
- */
-function Gc(info) { }
-
-/**
- * Get information system memory.
- * @returns {MemInfo} an info object.
- */
-function MemoryInfo() { }
-
-/**
- * Set maximum frame rate. If {@link Loop} takes longer than '1/rate' seconds then the framerate will not be reached.
- * @param {number} rate max frame rate wanted.
- */
-function SetFramerate(rate) { }
-
-/**
- * Current frame rate.
- * @returns {number} current framerate.
- */
-function GetFramerate() { }
-
-/**
- * Change the exit key from ESCAPE to any other keycode from {@link KEY}}.
- * @param {number} key 
- */
-function SetExitKey(key) { }
-
-/** @module color */
-
-/**
- * create RGBA color.
- * 
- * @param {number} r red (0-255)
- * @param {number} g green (0-255)
- * @param {number} b blue (0-255)
- * @param {number} a alpha (0-255)
- * @returns {number} a color.
- */
-function Color(r, g, b, a) { }
-
-/**
- * get red part of color.
- * @param {number} c a color
- * @returns {number} the red part.
- */
-function GetRed(c) { }
-
-/**
- * get green part of color.
- * @param {number} c a color
- * @returns {number} the green part.
- */
-function GetGreen(c) { }
-
-/**
- * get blue part of color.
- * @param {number} c a color
- * @returns {number} the blue part.
- */
-function GetBlue(c) { }
-
-/**
- * get alpha part of color.
- * @param {number} c a color
- * @returns {number} the alpha part.
- */
-function GetAlpha(c) { }
-
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/doc_objects.js.html b/doc/html/doc_objects.js.html deleted file mode 100644 index 0a20b3f6..00000000 --- a/doc/html/doc_objects.js.html +++ /dev/null @@ -1,136 +0,0 @@ - - - - - - - Source: doc/objects.js | Source: doc/objects.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/**
- * @type Event
- * @property {number} x mouse X coordinate.
- * @property {number} y mouse X coordinate.
- * @property {number} buttons mouse buttons, see {@link MOUSE}
- * @property {number} key key code, see {@link KEY}
- * @property {number} ticks event time.
- */
-class Event { }
-
-/**
- * An object with coordinates of a drawn arc.
- * @type ArcInfo
- * @property {number} centerX center x coordinate of the arc.
- * @property {number} centerY center y coordinate of the arc.
- * @property {number} startX x coordinate of the arc start.
- * @property {number} startY y coordinate of the arc start.
- * @property {number} endX x coordinate of the arc end.
- * @property {number} endY y coordinate of the arc end.
- */
-class ArcInfo { }
-
-/**
- * Node addresses are arrays of 6 numbers between 0-255.
- * @type IpcAddress
- */
-class IpxAddress { }
-
-/**
- * received IPX data packet.
- * @type IpxPacket
- * @property {string} data the received data.
- * @property {IpxAddress} source address of the sending node.
- */
-class IpxPacket { }
-
-/**
- * @type StatInfo
- * @property {string} atime file access timestamp.
- * @property {string} ctime file creation time.
- * @property {string} mtime file modification time.
- * @property {number} blksize file size in blocks.
- * @property {number} size file size in bytes.
- * @property {number} nlink number of sub entries.
- * @property {string} drive drive letter for the entry.
- * @property {boolean} is_blockdev true if this is a block device.
- * @property {boolean} is_chardev true if this is a character device.
- * @property {boolean} is_directory true if this is a directory.
- * @property {boolean} is_regular true if this is a regular file.
- */
-class StatInfo { }
-
-/**
- * @type MemInfo
- * @property {number} total total amount of memory in the system.
- * @property {number} remaining number of available bytes.
- */
-class MemInfo { }
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/fonts/glyphicons-halflings-regular.eot b/doc/html/fonts/glyphicons-halflings-regular.eot deleted file mode 100644 index b93a4953..00000000 Binary files a/doc/html/fonts/glyphicons-halflings-regular.eot and /dev/null differ diff --git a/doc/html/fonts/glyphicons-halflings-regular.svg b/doc/html/fonts/glyphicons-halflings-regular.svg deleted file mode 100644 index 94fb5490..00000000 --- a/doc/html/fonts/glyphicons-halflings-regular.svg +++ /dev/null @@ -1,288 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/doc/html/fonts/glyphicons-halflings-regular.ttf b/doc/html/fonts/glyphicons-halflings-regular.ttf deleted file mode 100644 index 1413fc60..00000000 Binary files a/doc/html/fonts/glyphicons-halflings-regular.ttf and /dev/null differ diff --git a/doc/html/fonts/glyphicons-halflings-regular.woff b/doc/html/fonts/glyphicons-halflings-regular.woff deleted file mode 100644 index 9e612858..00000000 Binary files a/doc/html/fonts/glyphicons-halflings-regular.woff and /dev/null differ diff --git a/doc/html/fonts/glyphicons-halflings-regular.woff2 b/doc/html/fonts/glyphicons-halflings-regular.woff2 deleted file mode 100644 index 64539b54..00000000 Binary files a/doc/html/fonts/glyphicons-halflings-regular.woff2 and /dev/null differ diff --git a/doc/html/global.html b/doc/html/global.html deleted file mode 100644 index 5a14c29a..00000000 --- a/doc/html/global.html +++ /dev/null @@ -1,1014 +0,0 @@ - - - - - Global | Global - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

Global

- -
- -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- DOJS_VERSION - -
- doc/internal.js, - line 49 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
DOJS_VERSION - - -number - - - - the version
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- global - -
- doc/internal.js, - line 24 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
global - - -object - - - - the global context.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- IPX_AVAILABLE - -
- doc/internal.js, - line 44 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
IPX_AVAILABLE - - -boolean - - - - true if networking is available.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- MOUSE_AVAILABLE - -
- doc/internal.js, - line 39 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
MOUSE_AVAILABLE - - -boolean - - - - true if mouse is available.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- SOUND_AVAILABLE - -
- doc/internal.js, - line 34 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
SOUND_AVAILABLE - - -boolean - - - - true if sound is available.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - Input(event) - - -
- doc/internal.js, - line 19 -
- -

- - - -
-
- - -
- This function is called whenever mouse / keyboard input happens. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
event - - -Event - - - - the current event.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - Loop() - - -
- doc/internal.js, - line 13 -
- -

- - - -
-
- - -
- This function is called after setup repeatedly until Stop is called. After calling Stop the program ends when Loop exits. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - Setup() - - -
- doc/internal.js, - line 8 -
- -

- - - -
-
- - -
- This function is called once at startup. It can initialize variables, setup hardware, etc. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/img/toast-ui.png b/doc/html/img/toast-ui.png deleted file mode 100644 index e7efc57d..00000000 Binary files a/doc/html/img/toast-ui.png and /dev/null differ diff --git a/doc/html/index.html b/doc/html/index.html deleted file mode 100644 index f4abc5b4..00000000 --- a/doc/html/index.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - Home | Home - - - - - - - - - - - - - -
- -
- - - - - - - - - - - - - - - - - - - - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/jsboot_color.js.html b/doc/html/jsboot_color.js.html deleted file mode 100644 index 786f948c..00000000 --- a/doc/html/jsboot_color.js.html +++ /dev/null @@ -1,150 +0,0 @@ - - - - - - - Source: jsboot/color.js | Source: jsboot/color.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-MIT License
-
-Copyright (c) 2019 Andre Seidelt <superilu@yahoo.com>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-*/
-
-/** 
- * Color definition.
- * @module color */
-
-/**
- * EGA Color definition.
- * @property {Color} BLACK EGA color.
- * @property {Color} BLUE EGA color.
- * @property {Color} GREEN EGA color.
- * @property {Color} CYAN EGA color.
- * @property {Color} RED EGA color.
- * @property {Color} MAGENTA EGA color.
- * @property {Color} BROWN EGA color.
- * @property {Color} LIGHT_GRAY EGA color.
- * @property {Color} LIGHT_GREY EGA color.
- * @property {Color} DARK_GRAY EGA color.
- * @property {Color} DARK_GREY EGA color.
- * @property {Color} LIGHT_BLUE EGA color.
- * @property {Color} LIGHT_GREEN EGA color.
- * @property {Color} LIGHT_CYAN EGA color.
- * @property {Color} LIGHT_RED EGA color.
- * @property {Color} LIGHT_MAGENTA EGA color.
- * @property {Color} YELLOW EGA color.
- * @property {Color} WHITE EGA color.
- */
-EGA = {
-	BLACK: Color(0, 0, 0, 255),
-	BLUE: Color(0, 0, 170, 255),
-	GREEN: Color(0, 170, 0, 255),
-	CYAN: Color(0, 170, 170, 255),
-	RED: Color(170, 0, 0, 255),
-	MAGENTA: Color(170, 0, 170, 255),
-	BROWN: Color(170, 85, 0, 255),
-	LIGHT_GRAY: Color(170, 170, 170, 255),
-	DARK_GRAY: Color(85, 85, 85, 255),
-	LIGHT_GREY: Color(170, 170, 170, 255),
-	DARK_GREY: Color(85, 85, 85, 255),
-	LIGHT_BLUE: Color(85, 85, 255, 255),
-	LIGHT_GREEN: Color(85, 255, 85, 255),
-	LIGHT_CYAN: Color(85, 255, 255, 255),
-	LIGHT_RED: Color(255, 85, 85, 255),
-	LIGHT_MAGENTA: Color(255, 85, 255, 255),
-	YELLOW: Color(255, 255, 85, 255),
-	WHITE: Color(255, 255, 255, 254)
-};
-
-/**
-* @property {Color} NO_COLOR the transparent Color.
-*/
-NO_COLOR = -1;
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_file.js.html b/doc/html/jsboot_file.js.html deleted file mode 100644 index d6519c4f..00000000 --- a/doc/html/jsboot_file.js.html +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - Source: jsboot/file.js | Source: jsboot/file.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-MIT License
-
-Copyright (c) 2019 Andre Seidelt <superilu@yahoo.com>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-*/
-
-/** @module other */
-
-/**
- * file mode definition.
- * @property {*} READ open file in read mode.
- * @property {*} WRITE open file in write mode (truncating existing contents)
- * @property {*} APPEND open file in append mode.
- */
-FILE = {
-	READ: "rb",
-	WRITE: "wb",
-	APPEND: "ab"
-};
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_func.js.html b/doc/html/jsboot_func.js.html deleted file mode 100644 index 9ce757f6..00000000 --- a/doc/html/jsboot_func.js.html +++ /dev/null @@ -1,414 +0,0 @@ - - - - - - - Source: jsboot/func.js | Source: jsboot/func.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-MIT License
-
-Copyright (c) 2019 Andre Seidelt <superilu@yahoo.com>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-*/
-
-/** @module other */
-
-/**
- * @property {boolean} DEBUG enable/disable Debug() output.
- */
-DEBUG = false;
-
-/**
- * @property {boolean} REMOTE_DEBUG enable/disable Debug() sending via IPX.
- */
-REMOTE_DEBUG = false;
-
-/**
- * print javascript debug output if DEBUG is true.
- * 
- * @param {string} str the message to print.
- */
-function Debug(str) {
-	_Debug(str);
-	if (REMOTE_DEBUG) {
-		IpxDebug(str + "\n");
-	}
-}
-
-/**
- * Internal debug which does not redirect to IPX if enabled.
- * 
- * @param {string} str the message to print.
- */
-function _Debug(str) {
-	if (DEBUG) {
-		Println("-=> ", str);
-	}
-}
-
-/**
- * import a module.
- * @param {string} name module file name.
- * @returns the imported module.
- */
-function Require(name) {
-	// look in cache
-	if (name in Require.cache) {
-		Debug("Require(cached) " + name);
-		return Require.cache[name];
-	}
-
-	var names = [name, name + '.JS', 'JSBOOT/' + name, 'JSBOOT/' + name + '.JS'];
-	Debug("Require(names) " + JSON.stringify(names));
-
-	for (var i = 0; i < names.length; i++) {
-		var n = names[i];
-		Debug("Require() Trying '" + n + "'");
-		var content;
-		try {
-			content = Read(n);
-		} catch (e) {
-			Debug("Require() " + n + " Not found");
-			continue;
-		}
-		var exports = {};
-		Require.cache[name] = exports;
-		Function('exports', content)(exports);
-		return exports;
-	};
-
-
-	throw 'Could not load "' + name + '"';
-}
-Require.cache = Object.create(null);
-
-/**
- * include a module. The exported functions are copied into global scope.
- * 
- * @param {string} name module file name.
- */
-function Include(name) {
-	var e = Require(name);
-	for (var key in e) {
-		Debug("Include(toGlobal) " + key);
-		global[key] = e[key];
-	}
-}
-
-/**
- * add toString() to Error class.
- */
-Error.prototype.toString = function () {
-	if (this.stackTrace) { return this.name + ': ' + this.message + this.stackTrace; }
-	return this.name + ': ' + this.message;
-};
-
-/**
- * print startup info with screen details.
- */
-function StartupInfo() {
-	var mode = GetScreenMode();
-	var width = SizeX();
-	var height = SizeY();
-
-	if (DEBUG) {
-		_Debug("Screen size=" + width + "x" + height + "x" + mode);
-		_Debug("Memory=" + JSON.stringify(MemoryInfo()));
-
-		var funcs = [];
-		var other = [];
-		for (var e in global) {
-			if (typeof global[e] === "function") {
-				funcs.push(e + "()");
-			} else {
-				other.push(e);
-			}
-		}
-		funcs.sort();
-		other.sort();
-		_Debug("Known globals:");
-		for (var i = 0; i < other.length; i++) {
-			_Debug("    " + other[i]);
-		}
-		_Debug("Known functions:");
-		for (var i = 0; i < funcs.length; i++) {
-			_Debug("    " + funcs[i]);
-		}
-	}
-}
-StartupInfo();
-
-/**
- * get char code.
- * 
- * @param {string} s a string
- * @returns the ASCII-code of the first character.
- */
-function CharCode(s) {
-	return s.charCodeAt(0);
-}
-
-/**
- * compare a keycode with a character.
- * 
- * @param {number} k keycode from an Event
- * @param {string} s a string with one char
- */
-function CompareKey(k, s) {
-	return (k & 0xFF) == CharCode(s);
-}
-
-/**
- * event interface.
- * @property {*} Mode.NONE no cursor
- * @property {*} Mode.ARROW arrow cursor
- * @property {*} Mode.BUSY busy cursor
- * @property {*} Mode.QUESTION questionmark cursor
- * @property {*} Mode.CURSOR_EDIT edit cursor
- * @property {*} Buttons mouse button definitions
- * @property {*} Buttons.LEFT
- * @property {*} Buttons.RIGHT
- * @property {*} Buttons.MIDDLE
- */
-MOUSE = {
-	Mode: {
-		NONE: 0,
-		ARROW: 2,
-		BUSY: 3,
-		QUESTION: 4,
-		CURSOR_EDIT: 5
-	},
-	Buttons: {
-		LEFT: 0x01,
-		RIGHT: 0x02,
-		MIDDLE: 0x04
-	}
-};
-
-/**
- * keyboard input.
- * @property {*} Code key definitions.
- */
-KEY = {
-	Code: {
-		NoKey: -1,		/* no key available */
-		/* Letters and numbers are missing from the definitions but can be obtained by e.g. CharCode('A'). */
-
-		KEY_A: 1,
-		KEY_B: 2,
-		KEY_C: 3,
-		KEY_D: 4,
-		KEY_E: 5,
-		KEY_F: 6,
-		KEY_G: 7,
-		KEY_H: 8,
-		KEY_I: 9,
-		KEY_J: 10,
-		KEY_K: 11,
-		KEY_L: 12,
-		KEY_M: 13,
-		KEY_N: 14,
-		KEY_O: 15,
-		KEY_P: 16,
-		KEY_Q: 17,
-		KEY_R: 18,
-		KEY_S: 19,
-		KEY_T: 20,
-		KEY_U: 21,
-		KEY_V: 22,
-		KEY_W: 23,
-		KEY_X: 24,
-		KEY_Y: 25,
-		KEY_Z: 26,
-		KEY_0: 27,
-		KEY_1: 28,
-		KEY_2: 29,
-		KEY_3: 30,
-		KEY_4: 31,
-		KEY_5: 32,
-		KEY_6: 33,
-		KEY_7: 34,
-		KEY_8: 35,
-		KEY_9: 36,
-		KEY_0_PAD: 37,
-		KEY_1_PAD: 38,
-		KEY_2_PAD: 39,
-		KEY_3_PAD: 40,
-		KEY_4_PAD: 41,
-		KEY_5_PAD: 42,
-		KEY_6_PAD: 43,
-		KEY_7_PAD: 44,
-		KEY_8_PAD: 45,
-		KEY_9_PAD: 46,
-		KEY_F1: 47,
-		KEY_F2: 48,
-		KEY_F3: 49,
-		KEY_F4: 50,
-		KEY_F5: 51,
-		KEY_F6: 52,
-		KEY_F7: 53,
-		KEY_F8: 54,
-		KEY_F9: 55,
-		KEY_F10: 56,
-		KEY_F11: 57,
-		KEY_F12: 58,
-		KEY_ESC: 59,
-		KEY_TILDE: 60,
-		KEY_MINUS: 61,
-		KEY_EQUALS: 62,
-		KEY_BACKSPACE: 63,
-		KEY_TAB: 64,
-		KEY_OPENBRACE: 65,
-		KEY_CLOSEBRACE: 66,
-		KEY_ENTER: 67,
-		KEY_COLON: 68,
-		KEY_QUOTE: 69,
-		KEY_BACKSLASH: 70,
-		KEY_BACKSLASH2: 71,
-		KEY_COMMA: 72,
-		KEY_STOP: 73,
-		KEY_SLASH: 74,
-		KEY_SPACE: 75,
-		KEY_INSERT: 76,
-		KEY_DEL: 77,
-		KEY_HOME: 78,
-		KEY_END: 79,
-		KEY_PGUP: 80,
-		KEY_PGDN: 81,
-		KEY_LEFT: 82,
-		KEY_RIGHT: 83,
-		KEY_UP: 84,
-		KEY_DOWN: 85,
-		KEY_SLASH_PAD: 86,
-		KEY_ASTERISK: 87,
-		KEY_MINUS_PAD: 88,
-		KEY_PLUS_PAD: 89,
-		KEY_DEL_PAD: 90,
-		KEY_ENTER_PAD: 91,
-		KEY_PRTSCR: 92,
-		KEY_PAUSE: 93,
-		KEY_ABNT_C1: 94,
-		KEY_YEN: 95,
-		KEY_KANA: 96,
-		KEY_CONVERT: 97,
-		KEY_NOCONVERT: 98,
-		KEY_AT: 99,
-		KEY_CIRCUMFLEX: 100,
-		KEY_COLON2: 101,
-		KEY_KANJI: 102,
-		KEY_EQUALS_PAD: 103,  /* MacOS X */
-		KEY_BACKQUOTE: 104,  /* MacOS X */
-		KEY_SEMICOLON: 105,  /* MacOS X */
-		KEY_COMMAND: 106,  /* MacOS X */
-		KEY_UNKNOWN1: 107,
-		KEY_UNKNOWN2: 108,
-		KEY_UNKNOWN3: 109,
-		KEY_UNKNOWN4: 110,
-		KEY_UNKNOWN5: 111,
-		KEY_UNKNOWN6: 112,
-		KEY_UNKNOWN7: 113,
-		KEY_UNKNOWN8: 114,
-
-		KEY_MODIFIERS: 115,
-
-		KEY_LSHIFT: 115,
-		KEY_RSHIFT: 116,
-		KEY_LCONTROL: 117,
-		KEY_RCONTROL: 118,
-		KEY_ALT: 119,
-		KEY_ALTGR: 120,
-		KEY_LWIN: 121,
-		KEY_RWIN: 122,
-		KEY_MENU: 123,
-		KEY_SCRLOCK: 124,
-		KEY_NUMLOCK: 125,
-		KEY_CAPSLOCK: 126
-	}
-};
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_ipx.js.html b/doc/html/jsboot_ipx.js.html deleted file mode 100644 index 18b79ac1..00000000 --- a/doc/html/jsboot_ipx.js.html +++ /dev/null @@ -1,246 +0,0 @@ - - - - - - - Source: jsboot/ipx.js | Source: jsboot/ipx.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-MIT License
-
-Copyright (c) 2019 Andre Seidelt <superilu@yahoo.com>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-*/
-
-/** @module ipx */
-
-/**
- * IPX definitions.
- * @property {*} DEFAULT_SOCKET default socket number for DOjS.
- * @property {*} BROADCAST broadcast address
- */
-IPX = {
-	MAX: 80,
-	DEFAULT_SOCKET: 0x2342,
-	DEBUG_SOCKET: 0x1234,
-	BROADCAST: [0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF],
-	HELLO: "_$HELLO="
-};
-
-/**
- * Convert a node address to a string.
- * 
- * @param {IpxAddress} addr a node address.
- */
-function IpxAddressToString(addr) {
-	if (addr.length != 6) {
-		throw "Node address length does not match";
-	}
-
-	return addr[0].toString(16) + ":" +
-		addr[1].toString(16) + ":" +
-		addr[2].toString(16) + ":" +
-		addr[3].toString(16) + ":" +
-		addr[4].toString(16) + ":" +
-		addr[5].toString(16);
-}
-
-/**
- * Convert an address in hex-string notation back to an JS array.
- * 
- * @param {*} addr a string of 6 hex numbers separated by ':'.
- * @returns {IpxAddress} An array of six numbers.
- */
-function IpxStringToAddress(addr) {
-	var parts = addr.split(":");
-	if (parts.length != 6) {
-		throw "Node address length does not match";
-	}
-
-	return [
-		parseInt(parts[0], 16),
-		parseInt(parts[1], 16),
-		parseInt(parts[2], 16),
-		parseInt(parts[3], 16),
-		parseInt(parts[4], 16),
-		parseInt(parts[5], 16)
-	];
-}
-
-/**
- * discover nodes on the network.
- * 
- * @param {integer} num total number of nodes to search for (including the local node).
- * @param {IpxAddress[]} nodes an array to store the discovered nodes in.
- * 
- * @returns {boolean} true if the wanted number of nodes was discovered, else false. The nodes array will contain the addresses of all found nodes.
- */
-function IpxFindNodes(num, nodes) {
-	var searchAddress = function (nodes, addr) {
-		var addrStr = IpxAddressToString(addr);
-		for (var i = 0; i < nodes.length; ++i) {
-			var str = IpxAddressToString(nodes[i]);
-			if (str === addrStr) {
-				return true;
-			}
-		}
-		return false;
-	};
-
-	if (nodes.length < num - 1) {
-		IpxSend(IPX.HELLO + MsecTime(), IPX.BROADCAST);
-
-		if (IpxCheckPacket()) {
-			var pck = IpxGetPacket();
-			if (pck.data.lastIndexOf(IPX.HELLO, 0) === 0) {
-				if (searchAddress(nodes, pck.source)) {
-					_Debug("Node " + JSON.stringify(pck.source) + " already known.");
-				} else {
-					nodes.push(pck.source);
-					_Debug("Node found " + JSON.stringify(pck.source));
-				}
-			}
-		}
-	} else {
-		return true;
-	}
-	return false;
-}
-
-/**
- * Send data to all nodes in array.
- * 
- * @param {string} data the data to send
- * @param {IpxAddress[]} nodes the node addresses to send to.
- */
-function IpxAllNodes(data, nodes) {
-	for (var i = 0; i < nodes.length; i++) {
-		IpxSend(data, nodes[i]);
-	}
-}
-
-/**
- * @property {string} _ipxLogData remaining data to send to log viewer.
- */
-_ipxLogData = "";
-
-/**
- * @property {boolean} _ipxLogInit indicates if the IPX socket was already opened.
- */
-_ipxLogInit = false;
-
-/**
- * @property {IpxAddress[]} _ipxDebugNodes node list with the logviewer entry.
- */
-_ipxDebugNodes = [];
-
-/**
- * Send logmessages to logviewer using IPX networking.
- * 
- * @param {string} str logmessage to send.
- */
-function IpxDebug(str) {
-	_ipxLogData += str;
-
-	if (!_ipxLogInit) {
-		// init
-		IpxSocketOpen(IPX.DEBUG_SOCKET);
-		_ipxLogInit = true;
-	}
-	if (_ipxLogInit && _ipxDebugNodes.length < 1) {
-		var success = IpxFindNodes(2, _ipxDebugNodes);
-	} else {
-		while (_ipxLogData.length > 0) {
-			var part = _ipxLogData.substring(0, IPX.MAX - 1);
-			_ipxLogData = _ipxLogData.slice(IPX.MAX);
-
-			IpxSend(part, _ipxDebugNodes[0]);
-		}
-	}
-}
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_p5.js.html b/doc/html/jsboot_p5.js.html deleted file mode 100644 index e7ab796b..00000000 --- a/doc/html/jsboot_p5.js.html +++ /dev/null @@ -1,766 +0,0 @@ - - - - - - - Source: jsboot/p5.js | Source: jsboot/p5.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-	This file was derived from the p5.js source code at
-	https://github.com/processing/p5.js
-
-	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>
-
-    This library is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Lesser General Public
-    License as published by the Free Software Foundation; either
-    version 2.1 of the License, or (at your option) any later version.
-
-    This library is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-    Lesser General Public License for more details.
-
-    You should have received a copy of the GNU Lesser General Public
-    License along with this library; if not, write to the Free Software
-    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-/**
- * This module provides compatibility with p5js. Use Include('p5'); on the first line of your script to activate.
- * 
- * @module p5compat
- */
-
-Include('jsboot/p5const.js');
-Include('jsboot/p5color.js');
-Include('jsboot/p5env.js');
-Include('jsboot/p5input.js');
-Include('jsboot/p5math.js');
-Include('jsboot/p5shape.js');
-Include('jsboot/p5typo.js');
-Include('jsboot/p5util.js');
-Include('jsboot/p5vect.js');
-Include('jsboot/p5trans.js');
-
-exports._loop = true;
-exports._lastButtons = 0;
-
-exports._env = [];
-exports._currentEnv = {
-	_fill: EGA.WHITE,
-	_stroke: EGA.BLACK,
-	_colorMode: RGB,
-	_colorMaxes: {
-		rgb: [255, 255, 255, 255],
-		hsb: [360, 100, 100, 1],
-		hsl: [360, 100, 100, 1]
-	},
-	_txtAlignX: LEFT,
-	_txtAlignY: TOP,
-	_font: new Font(),
-	_rectMode: CORNER,
-	_ellipseMode: CENTER,
-	_imageMode: CORNER,
-	_strokeWeight: 1,
-	_matrix: null
-};
-
-// TODO: implement matrix preservation for setup() and draw()
-
-/**
- * deep copy the current environment.
- */
-exports._cloneEnv = function () {
-	if (_currentEnv._matrix) {
-		// deep copy matrix
-		var matrix = [
-			_currentEnv._matrix[0].slice(0),
-			_currentEnv._matrix[1].slice(0),
-			_currentEnv._matrix[2].slice(0)
-		]
-	} else {
-		var matrix = null;
-	}
-
-	return {
-		_fill: _currentEnv._fill,
-		_stroke: _currentEnv._stroke,
-		_colorMode: _currentEnv._colorMode,
-		_colorMaxes: {
-			// deep copy color settings
-			rgb: _currentEnv._colorMaxes.rgb.slice(0),
-			hsb: _currentEnv._colorMaxes.hsb.slice(0),
-			hsl: _currentEnv._colorMaxes.hsl.slice(0)
-		},
-		_txtAlignX: _currentEnv._txtAlignX,
-		_txtAlignY: _currentEnv._txtAlignY,
-		_font: _currentEnv._font,
-		_rectMode: _currentEnv._rectMode,
-		_ellipseMode: _currentEnv._ellipseMode,
-		_imageMode: _currentEnv._imageMode,
-		_strokeWeight: _currentEnv._strokeWeight,
-		_matrix: matrix
-	};
-}
-
-/*
- * not documented here.
- */
-exports.Setup = function () {
-	windowWidth = displayWidth = width = SizeX();
-	windowHeight = displayHeight = height = SizeY();
-	frameCount = 0;
-	_hasMouseInteracted = false;
-	mouseX = pmouseX = winMouseX = pwinMouseX = SizeX();
-	mouseY = pmouseY = winMouseY = pwinMouseY = SizeY();
-	MouseWarp(mouseX, mouseY);
-	frameRate(60);
-	setup();
-};
-
-/*
- * not documented here.
- */
-exports.Loop = function () {
-	if (_loop) {
-		redraw();
-	}
-	if (keyIsPressed) {
-		keyIsPressed = false;
-		if (typeof global['keyReleased'] != 'undefined') {
-			keyReleased();
-		}
-	}
-};
-
-/*
- * not documented here.
- */
-exports.Input = function (e) {
-	// update mouse coordinates
-	pwinMouseX = pmouseX = mouseX;
-	pwinMouseY = pmouseY = mouseY;
-
-	winMouseX = mouseX = e.x;
-	winMouseY = mouseY = e.y;
-
-	_hasMouseInteracted = true;
-
-	if (typeof global['mouseMoved'] != 'undefined') {
-		mouseMoved(e);
-	}
-	if (mouseIsPressed) {
-		if (typeof global['mouseDragged'] != 'undefined') {
-			mouseDragged(e);
-		}
-	}
-
-	if (e.buttons > _lastButtons) {
-		if (typeof global['mousePressed'] != 'undefined') {
-			mousePressed(e);
-		}
-		mouseIsPressed = true;
-		if (e.button & MOUSE.Buttons.LEFT) {
-			mouseButton = LEFT;
-		}
-		if (e.button & MOUSE.Buttons.MIDDLE) {
-			mouseButton = MIDDLE;
-		}
-		if (e.button & MOUSE.Buttons.RIGHT) {
-			mouseButton = RIGHT;
-		}
-	}
-	if (e.buttons < _lastButtons) {
-		mouseButton = 0;
-		if (mouseIsPressed && typeof global['mouseReleased'] != 'undefined') {
-			mouseReleased(e);
-		}
-		if (mouseIsPressed && typeof global['mouseClicked'] != 'undefined') {
-			mouseClicked(e);
-		}
-		mouseIsPressed = false;
-	}
-	_lastButtons = e.buttons;
-
-	// this does not work like with p5 as we don't get a key release
-	if (e.key != -1) {
-		key = e.key & 0xFF;	// TODO:
-		keyCode = e.key;	// TODO:
-		if (typeof global['keyPressed'] != 'undefined') {
-			keyPressed(e);
-		}
-		if (typeof global['keyTyped'] != 'undefined') {
-			keyTyped(e);
-		}
-		keyIsPressed = true;
-	}
-};
-
-/**
- * ignored
- */
-exports.size = function () { };
-
-/**
- * ignored
- */
-exports.createCanvas = function () { };
-
-/**
- * ignored
- */
-exports.smooth = function () { };
-
-/**
- * ignored
- */
-exports.noSmooth = function () { };
-
-/**
- * ignored
- */
-exports.settings = function () { };
-
-/**
- * ignored
- */
-exports.tint = function () { };
-
-/**
- * ignored
- */
-exports.noTint = function () { };
-
-/**
- * exit the script after the current Loop().
- */
-exports.exit = function () {
-	Stop();
-};
-
-/**
- * By default, p5.js loops through draw() continuously, executing the code
- * within it. However, the draw() loop may be stopped by calling noLoop().
- * In that case, the draw() loop can be resumed with loop().
- *
- * Avoid calling loop() from inside setup().
- *
- * @method loop
- * @example
- * let x = 0;
- * function setup() {
- *   createCanvas(100, 100);
- *   noLoop();
- * }
- *
- * function draw() {
- *   background(204);
- *   x = x + 0.1;
- *   if (x > width) {
- *     x = 0;
- *   }
- *   line(x, 0, x, height);
- * }
- *
- * function mousePressed() {
- *   loop();
- * }
- *
- * function mouseReleased() {
- *   noLoop();
- * }
- */
-exports.loop = function () {
-	_loop = true;
-};
-
-/**
- * Stops p5.js from continuously executing the code within draw().
- * If loop() is called, the code in draw() begins to run continuously again.
- * If using noLoop() in setup(), it should be the last line inside the block.
- * <br><br>
- * When noLoop() is used, it's not possible to manipulate or access the
- * screen inside event handling functions such as mousePressed() or
- * keyPressed(). Instead, use those functions to call redraw() or loop(),
- * which will run draw(), which can update the screen properly. This means
- * that when noLoop() has been called, no drawing can happen, and functions
- * like saveFrame() or loadPixels() may not be used.
- * <br><br>
- * Note that if the sketch is resized, redraw() will be called to update
- * the sketch, even after noLoop() has been specified. Otherwise, the sketch
- * would enter an odd state until loop() was called.
- *
- * @method noLoop
- * @example
- * function setup() {
- *   createCanvas(100, 100);
- *   background(200);
- *   noLoop();
- * }
- * 
- * function draw() {
- *   line(10, 10, 90, 90);
- * }
- *
- * let x = 0;
- * function setup() {
- *   createCanvas(100, 100);
- * }
- *
- * function draw() {
- *   background(204);
- *   x = x + 0.1;
- *   if (x > width) {
- *     x = 0;
- *   }
- *   line(x, 0, x, height);
- * }
- *
- * function mousePressed() {
- *   noLoop();
- * }
- *
- * function mouseReleased() {
- *   loop();
- * }
- */
-exports.noLoop = function () {
-	_loop = false;
-};
-
-/**
- *
- * Executes the code within draw() one time. This functions allows the
- * program to update the display window only when necessary, for example
- * when an event registered by mousePressed() or keyPressed() occurs.
- * <br><br>
- * In structuring a program, it only makes sense to call redraw() within
- * events such as mousePressed(). This is because redraw() does not run
- * draw() immediately (it only sets a flag that indicates an update is
- * needed).
- * <br><br>
- * The redraw() function does not work properly when called inside draw().
- * To enable/disable animations, use loop() and noLoop().
- * <br><br>
- * In addition you can set the number of redraws per method call. Just
- * add an integer as single parameter for the number of redraws.
- *
- * @method redraw
- * @param  {Integer} [n] Redraw for n-times. The default value is 1.
- * @example
- * let x = 0;
- *
- * function setup() {
- *   createCanvas(100, 100);
- *   noLoop();
- * }
- *
- * function draw() {
- *   background(204);
- *   line(x, 0, x, height);
- * }
- *
- * function mousePressed() {
- *   x += 1;
- *   redraw();
- * }
- *
- * let x = 0;
- *
- * function setup() {
- *   createCanvas(100, 100);
- *   noLoop();
- * }
- *
- * function draw() {
- *   background(204);
- *   x += 1;
- *   line(x, 0, x, height);
- * }
- *
- * function mousePressed() {
- *   redraw(5);
- * }
- */
-exports.redraw = function () {
-	resetMatrix();	// TODO: fix!
-	draw();
-	frameCount++;
-};
-
-/**
- * Returns the pixel density of the current display the sketch is running on (always 1 for DOjS).
- *
- * @method displayDensity
- * @returns {Number} current pixel density of the display
- * @example
- * function setup() {
- *   let density = displayDensity();
- *   pixelDensity(density);
- *   createCanvas(100, 100);
- *   background(200);
- *   ellipse(width / 2, height / 2, 50, 50);
- * }
- */
-exports.displayDensity = function () {
-	return 1;
-};
-
-
-exports.cursor = function () {
-	MouseShowCursor(true);
-};
-
-/**
- * Hides the cursor from view.
- *
- * @method noCursor
- * @example
- * function setup() {
- *   noCursor();
- * }
- *
- * function draw() {
- *   background(200);
- *   ellipse(mouseX, mouseY, 10, 10);
- * }
- */
-exports.noCursor = function () {
-	MouseShowCursor(false);
-};
-
-exports.delay = function (ms) {
-	Sleep(ms);
-};
-
-exports.printArray = function (what) {
-	for (var i = 0; i < what.length; i++) {
-		Println("[" + i + "] " + what[i]);
-	}
-};
-
-/**
- *  Writes an array of Strings to a text file, one line per String.
- *  The file saving process and location of the saved file will
- *  vary between web browsers.
- *
- *  @method saveStrings
- *  @param  {String[]} list   string array to be written
- *  @param  {String} filename filename for output
- *  @param  {String} [extension] the filename's extension
- *  @example
- * let words = 'apple bear cat dog';
- *
- * // .split() outputs an Array
- * let list = split(words, ' ');
- *
- * function setup() {
- *   createCanvas(100, 100);
- *   background(200);
- *   text('click here to save', 10, 10, 70, 80);
- * }
- *
- * function mousePressed() {
- *   if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
- *     saveStrings(list, 'nouns.txt');
- *   }
- * }
- *
- * // Saves the following to a file called 'nouns.txt':
- * //
- * // apple
- * // bear
- * // cat
- * // dog
- */
-exports.saveStrings = function (fname, data) {
-	var f = new File();
-	data.forEach(function (d) {
-		f.WriteLine(d);
-	});
-	f.Close();
-};
-
-exports.saveBytes = function (fname, data) {
-	var f = new File();
-	data.forEach(function (d) {
-		f.WriteByte(d);
-	});
-	f.Close();
-};
-
-/**
- * Reads the contents of a file and creates a String array of its individual
- * lines. If the name of the file is used as the parameter, as in the above
- * example, the file must be located in the sketch directory/folder.
- * <br><br>
- * Alternatively, the file maybe be loaded from anywhere on the local
- * computer using an absolute path (something that starts with / on Unix and
- * Linux, or a drive letter on Windows), or the filename parameter can be a
- * URL for a file found on a network.
- * <br><br>
- * This method is asynchronous, meaning it may not finish before the next
- * line in your sketch is executed.
- *
- * This method is suitable for fetching files up to size of 64MB.
- * @method loadStrings
- * @param  {String}   filename   name of the file or url to load
- * @return {String[]}            Array of Strings
- * @example
- *
- * let result;
- * function preload() {
- *   result = loadStrings('assets/test.txt');
- * }
-
- * function setup() {
- *   background(200);
- *   let ind = floor(random(result.length));
- *   text(result[ind], 10, 10, 80, 80);
- * }
- *
- * function setup() {
- *   loadStrings('assets/test.txt', pickString);
- * }
- *
- * function pickString(result) {
- *   background(200);
- *   let ind = floor(random(result.length));
- *   text(result[ind], 10, 10, 80, 80);
- * }
- */
-exports.loadStrings = function (fname) {
-	try {
-		var ret = [];
-		var f = new File(fname);
-		var l = f.ReadLine();
-		while (l != null) {
-			ret.push(l);
-			l = f.ReadLine();
-		}
-		f.Close();
-		return ret;
-	} catch (e) {
-		Println(e);
-		return null;
-	}
-};
-
-/**
- * This method is suitable for fetching files up to size of 64MB.
- * @method loadBytes
- * @param {string}   file            name of the file or URL to load
- * @returns {number[]} an object whose 'bytes' property will be the loaded buffer
- *
- * @example
- * let data;
- *
- * function preload() {
- *   data = loadBytes('assets/mammals.xml');
- * }
- *
- * function setup() {
- *   for (let i = 0; i < 5; i++) {
- *     console.log(data.bytes[i].toString(16));
- *   }
- * }
- */
-exports.loadBytes = function (fname) {
-	try {
-		var ret = [];
-		var f = new File(fname);
-		var ch = g.ReadByte();
-		while (ch != null) {
-			ret.push(ch);
-			ch = f.ReadByte();
-		}
-		f.Close();
-		return ret;
-	} catch (e) {
-		Println(e);
-		return null;
-	}
-};
-
-
-/**
- * The push() function saves the current drawing style settings and
- * transformations, while pop() restores these settings. Note that these
- * functions are always used together. They allow you to change the style
- * and transformation settings and later return to what you had. When a new
- * state is started with push(), it builds on the current style and transform
- * information. The push() and pop() functions can be embedded to provide
- * more control. (See the second example for a demonstration.)
- * <br><br>
- * push() stores information related to the current transformation state
- * and style settings controlled by the following functions: fill(),
- * stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),
- * imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),
- * textFont(), textSize(), textLeading().
- *
- * @method push
- * @example
- * ellipse(0, 50, 33, 33); // Left circle
- *
- * push(); // Start a new drawing state
- * strokeWeight(10);
- * fill(204, 153, 0);
- * translate(50, 0);
- * ellipse(0, 50, 33, 33); // Middle circle
- * pop(); // Restore original state
- *
- * ellipse(100, 50, 33, 33); // Right circle
- * </code>
- * </div>
- * <div>
- * <code>
- * ellipse(0, 50, 33, 33); // Left circle
- *
- * push(); // Start a new drawing state
- * strokeWeight(10);
- * fill(204, 153, 0);
- * ellipse(33, 50, 33, 33); // Left-middle circle
- *
- * push(); // Start another new drawing state
- * stroke(0, 102, 153);
- * ellipse(66, 50, 33, 33); // Right-middle circle
- * pop(); // Restore previous state
- *
- * pop(); // Restore original state
- *
- * ellipse(100, 50, 33, 33); // Right circle
- */
-exports.push = function () {
-	_env.push(_cloneEnv());
-};
-
-/**
- * The push() function saves the current drawing style settings and
- * transformations, while pop() restores these settings. Note that these
- * functions are always used together. They allow you to change the style
- * and transformation settings and later return to what you had. When a new
- * state is started with push(), it builds on the current style and transform
- * information. The push() and pop() functions can be embedded to provide
- * more control. (See the second example for a demonstration.)
- * <br><br>
- * push() stores information related to the current transformation state
- * and style settings controlled by the following functions: fill(),
- * stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),
- * imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),
- * textFont(), textSize(), textLeading().
- *
- * @method pop
- * @example
- * ellipse(0, 50, 33, 33); // Left circle
- *
- * push(); // Start a new drawing state
- * translate(50, 0);
- * strokeWeight(10);
- * fill(204, 153, 0);
- * ellipse(0, 50, 33, 33); // Middle circle
- * pop(); // Restore original state
- *
- * ellipse(100, 50, 33, 33); // Right circle
- * </code>
- * </div>
- * <div>
- * <code>
- * ellipse(0, 50, 33, 33); // Left circle
- *
- * push(); // Start a new drawing state
- * strokeWeight(10);
- * fill(204, 153, 0);
- * ellipse(33, 50, 33, 33); // Left-middle circle
- *
- * push(); // Start another new drawing state
- * stroke(0, 102, 153);
- * ellipse(66, 50, 33, 33); // Right-middle circle
- * pop(); // Restore previous state
- *
- * pop(); // Restore original state
- *
- * ellipse(100, 50, 33, 33); // Right circle
- */
-exports.pop = function () {
-	if (_env.length > 0) {
-		_currentEnv = _env.pop();
-	} else {
-		console.warn('pop() was called without matching push()');
-	}
-};
-
-// exports. = function () {
-// };
-
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_p5color.js.html b/doc/html/jsboot_p5color.js.html deleted file mode 100644 index 77a874df..00000000 --- a/doc/html/jsboot_p5color.js.html +++ /dev/null @@ -1,2270 +0,0 @@ - - - - - - - Source: jsboot/p5color.js | Source: jsboot/p5color.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-	This file was derived from the p5.js source code at
-	https://github.com/processing/p5.js
-
-	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>
-
-    This library is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Lesser General Public
-    License as published by the Free Software Foundation; either
-    version 2.1 of the License, or (at your option) any later version.
-
-    This library is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-    Lesser General Public License for more details.
-
-    You should have received a copy of the GNU Lesser General Public
-    License along with this library; if not, write to the Free Software
-    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-/**
-* @module p5compat
-*/
-
-// internal variables
-exports._background = EGA.BLACK;
-
-/**********************************************************************************************************************
- * conversion
- */
-
-/**
- * Conversions adapted from <http://www.easyrgb.com/en/math.php>.
- *
- * In these functions, hue is always in the range [0, 1], just like all other
- * components are in the range [0, 1]. 'Brightness' and 'value' are used
- * interchangeably.
- */
-
-exports.ColorConversion = {};
-
-/**
- * Convert an HSBA array to HSLA.
- */
-exports.ColorConversion._hsbaToHSLA = function (hsba) {
-	var hue = hsba[0];
-	var sat = hsba[1];
-	var val = hsba[2];
-
-	// Calculate lightness.
-	var li = (2 - sat) * val / 2;
-
-	// Convert saturation.
-	if (li !== 0) {
-		if (li === 1) {
-			sat = 0;
-		} else if (li < 0.5) {
-			sat = sat / (2 - sat);
-		} else {
-			sat = sat * val / (2 - li * 2);
-		}
-	}
-
-	// Hue and alpha stay the same.
-	return [hue, sat, li, hsba[3]];
-};
-
-/**
- * Convert an HSBA array to RGBA.
- */
-exports.ColorConversion._hsbaToRGBA = function (hsba) {
-	var hue = hsba[0] * 6; // We will split hue into 6 sectors.
-	var sat = hsba[1];
-	var val = hsba[2];
-
-	var RGBA = [];
-
-	if (sat === 0) {
-		RGBA = [val, val, val, hsba[3]]; // Return early if grayscale.
-	} else {
-		var sector = Math.floor(hue);
-		var tint1 = val * (1 - sat);
-		var tint2 = val * (1 - sat * (hue - sector));
-		var tint3 = val * (1 - sat * (1 + sector - hue));
-		var red, green, blue;
-		if (sector === 1) {
-			// Yellow to green.
-			red = tint2;
-			green = val;
-			blue = tint1;
-		} else if (sector === 2) {
-			// Green to cyan.
-			red = tint1;
-			green = val;
-			blue = tint3;
-		} else if (sector === 3) {
-			// Cyan to blue.
-			red = tint1;
-			green = tint2;
-			blue = val;
-		} else if (sector === 4) {
-			// Blue to magenta.
-			red = tint3;
-			green = tint1;
-			blue = val;
-		} else if (sector === 5) {
-			// Magenta to red.
-			red = val;
-			green = tint1;
-			blue = tint2;
-		} else {
-			// Red to yellow (sector could be 0 or 6).
-			red = val;
-			green = tint3;
-			blue = tint1;
-		}
-		RGBA = [red, green, blue, hsba[3]];
-	}
-
-	return RGBA;
-};
-
-/**
- * Convert an HSLA array to HSBA.
- */
-exports.ColorConversion._hslaToHSBA = function (hsla) {
-	var hue = hsla[0];
-	var sat = hsla[1];
-	var li = hsla[2];
-
-	// Calculate brightness.
-	var val;
-	if (li < 0.5) {
-		val = (1 + sat) * li;
-	} else {
-		val = li + sat - li * sat;
-	}
-
-	// Convert saturation.
-	sat = 2 * (val - li) / val;
-
-	// Hue and alpha stay the same.
-	return [hue, sat, val, hsla[3]];
-};
-
-/**
- * Convert an HSLA array to RGBA.
- *
- * We need to change basis from HSLA to something that can be more easily be
- * projected onto RGBA. We will choose hue and brightness as our first two
- * components, and pick a convenient third one ('zest') so that we don't need
- * to calculate formal HSBA saturation.
- */
-exports.ColorConversion._hslaToRGBA = function (hsla) {
-	var hue = hsla[0] * 6; // We will split hue into 6 sectors.
-	var sat = hsla[1];
-	var li = hsla[2];
-
-	var RGBA = [];
-
-	if (sat === 0) {
-		RGBA = [li, li, li, hsla[3]]; // Return early if grayscale.
-	} else {
-		// Calculate brightness.
-		var val;
-		if (li < 0.5) {
-			val = (1 + sat) * li;
-		} else {
-			val = li + sat - li * sat;
-		}
-
-		// Define zest.
-		var zest = 2 * li - val;
-
-		// Implement projection (project onto green by default).
-		var hzvToRGB = function (hue, zest, val) {
-			if (hue < 0) {
-				// Hue must wrap to allow projection onto red and blue.
-				hue += 6;
-			} else if (hue >= 6) {
-				hue -= 6;
-			}
-			if (hue < 1) {
-				// Red to yellow (increasing green).
-				return zest + (val - zest) * hue;
-			} else if (hue < 3) {
-				// Yellow to cyan (greatest green).
-				return val;
-			} else if (hue < 4) {
-				// Cyan to blue (decreasing green).
-				return zest + (val - zest) * (4 - hue);
-			} else {
-				// Blue to red (least green).
-				return zest;
-			}
-		};
-
-		// Perform projections, offsetting hue as necessary.
-		RGBA = [
-			hzvToRGB(hue + 2, zest, val),
-			hzvToRGB(hue, zest, val),
-			hzvToRGB(hue - 2, zest, val),
-			hsla[3]
-		];
-	}
-
-	return RGBA;
-};
-
-/**
- * Convert an RGBA array to HSBA.
- */
-exports.ColorConversion._rgbaToHSBA = function (rgba) {
-	var red = rgba[0];
-	var green = rgba[1];
-	var blue = rgba[2];
-
-	var val = Math.max(red, green, blue);
-	var chroma = val - Math.min(red, green, blue);
-
-	var hue, sat;
-	if (chroma === 0) {
-		// Return early if grayscale.
-		hue = 0;
-		sat = 0;
-	} else {
-		sat = chroma / val;
-		if (red === val) {
-			// Magenta to yellow.
-			hue = (green - blue) / chroma;
-		} else if (green === val) {
-			// Yellow to cyan.
-			hue = 2 + (blue - red) / chroma;
-		} else if (blue === val) {
-			// Cyan to magenta.
-			hue = 4 + (red - green) / chroma;
-		}
-		if (hue < 0) {
-			// Confine hue to the interval [0, 1).
-			hue += 6;
-		} else if (hue >= 6) {
-			hue -= 6;
-		}
-	}
-
-	return [hue / 6, sat, val, rgba[3]];
-};
-
-/**
- * Convert an RGBA array to HSLA.
- */
-exports.ColorConversion._rgbaToHSLA = function (rgba) {
-	var red = rgba[0];
-	var green = rgba[1];
-	var blue = rgba[2];
-
-	var val = Math.max(red, green, blue);
-	var min = Math.min(red, green, blue);
-	var li = val + min; // We will halve this later.
-	var chroma = val - min;
-
-	var hue, sat;
-	if (chroma === 0) {
-		// Return early if grayscale.
-		hue = 0;
-		sat = 0;
-	} else {
-		if (li < 1) {
-			sat = chroma / li;
-		} else {
-			sat = chroma / (2 - li);
-		}
-		if (red === val) {
-			// Magenta to yellow.
-			hue = (green - blue) / chroma;
-		} else if (green === val) {
-			// Yellow to cyan.
-			hue = 2 + (blue - red) / chroma;
-		} else if (blue === val) {
-			// Cyan to magenta.
-			hue = 4 + (red - green) / chroma;
-		}
-		if (hue < 0) {
-			// Confine hue to the interval [0, 1).
-			hue += 6;
-		} else if (hue >= 6) {
-			hue -= 6;
-		}
-	}
-
-	return [hue / 6, sat, li / 2, rgba[3]];
-};
-
-/**********************************************************************************************************************
- * class Color
- */
-
-/**
-* Each color stores the color mode and level maxes that applied at the
-* time of its construction. These are used to interpret the input arguments
-* (at construction and later for that instance of color) and to format the
-* output e.g. when saturation() is requested.
-*
-* Internally we store an array representing the ideal RGBA values in floating
-* point form, normalized from 0 to 1. From this we calculate the closest
-* screen color (RGBA levels from 0 to 255) and expose this to the renderer.
-*
-* We also cache normalized, floating point components of the color in various
-* representations as they are calculated. This is done to prevent repeating a
-* conversion that has already been performed.
-*
-* @class Color
-*/
-exports.p5Color = function (vals) {
-	// Record color mode and maxes at time of construction.
-	this._storeModeAndMaxes(_currentEnv._colorMode, _currentEnv._colorMaxes);
-
-	// Calculate normalized RGBA values.
-	if (
-		this.mode !== RGB &&
-		this.mode !== HSL &&
-		this.mode !== HSB
-	) {
-		throw new Error(this.mode + ' is an invalid colorMode.');
-	} else {
-		this._array = p5Color._parseInputs.apply(this, vals);
-	}
-
-	// Expose closest screen color.
-	this._calculateLevels();
-	return this;
-};
-
-exports.p5Color.prototype.toAllegro = function () {
-	var a = this.levels;
-	// FIX: alpha can never be 255 because the resulting integer for WHITE would be -1 and that is equal to 'no color'
-	return Color(a[0], a[1], a[2], a[3] == 255 ? 254 : a[3]);
-};
-
-/**
- * This function returns the color formatted as a string. This can be useful
- * for debugging, or for using p5.js with other libraries.
- * @method toString
- * @param {String} [format] How the color string will be formatted.
- * Leaving this empty formats the string as rgba(r, g, b, a).
- * '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.
- * 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.
- * 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.
- * 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
- * @return {String} the formatted string
- * @example
- * let myColor;
- * function setup() {
- *   createCanvas(200, 200);
- *   stroke(255);
- *   myColor = color(100, 100, 250);
- *   fill(myColor);
- * }
- *
- * function draw() {
- *   rotate(HALF_PI);
- *   text(myColor.toString(), 0, -5);
- *   text(myColor.toString('#rrggbb'), 0, -30);
- *   text(myColor.toString('rgba%'), 0, -55);
- * }
- */
-exports.p5Color.prototype.toString = function (format) {
-	var a = this.levels;
-	var f = this._array;
-	var alpha = f[3]; // String representation uses normalized alpha
-
-	switch (format) {
-		case '#rrggbb':
-			return '#'.concat(
-				a[0] < 16 ? '0'.concat(a[0].toString(16)) : a[0].toString(16),
-				a[1] < 16 ? '0'.concat(a[1].toString(16)) : a[1].toString(16),
-				a[2] < 16 ? '0'.concat(a[2].toString(16)) : a[2].toString(16)
-			);
-
-		case '#rrggbbaa':
-			return '#'.concat(
-				a[0] < 16 ? '0'.concat(a[0].toString(16)) : a[0].toString(16),
-				a[1] < 16 ? '0'.concat(a[1].toString(16)) : a[1].toString(16),
-				a[2] < 16 ? '0'.concat(a[2].toString(16)) : a[2].toString(16),
-				a[3] < 16 ? '0'.concat(a[2].toString(16)) : a[3].toString(16)
-			);
-
-		case '#rgb':
-			return '#'.concat(
-				Math.round(f[0] * 15).toString(16),
-				Math.round(f[1] * 15).toString(16),
-				Math.round(f[2] * 15).toString(16)
-			);
-
-		case '#rgba':
-			return '#'.concat(
-				Math.round(f[0] * 15).toString(16),
-				Math.round(f[1] * 15).toString(16),
-				Math.round(f[2] * 15).toString(16),
-				Math.round(f[3] * 15).toString(16)
-			);
-
-		case 'rgb':
-			return 'rgb('.concat(a[0], ', ', a[1], ', ', a[2], ')');
-
-		case 'rgb%':
-			return 'rgb('.concat(
-				(100 * f[0]).toPrecision(3),
-				'%, ',
-				(100 * f[1]).toPrecision(3),
-				'%, ',
-				(100 * f[2]).toPrecision(3),
-				'%)'
-			);
-
-		case 'rgba%':
-			return 'rgba('.concat(
-				(100 * f[0]).toPrecision(3),
-				'%, ',
-				(100 * f[1]).toPrecision(3),
-				'%, ',
-				(100 * f[2]).toPrecision(3),
-				'%, ',
-				(100 * f[3]).toPrecision(3),
-				'%)'
-			);
-
-		case 'hsb':
-		case 'hsv':
-			if (!this.hsba) this.hsba = ColorConversion._rgbaToHSBA(this._array);
-			return 'hsb('.concat(
-				this.hsba[0] * this.maxes[HSB][0],
-				', ',
-				this.hsba[1] * this.maxes[HSB][1],
-				', ',
-				this.hsba[2] * this.maxes[HSB][2],
-				')'
-			);
-
-		case 'hsb%':
-		case 'hsv%':
-			if (!this.hsba) this.hsba = ColorConversion._rgbaToHSBA(this._array);
-			return 'hsb('.concat(
-				(100 * this.hsba[0]).toPrecision(3),
-				'%, ',
-				(100 * this.hsba[1]).toPrecision(3),
-				'%, ',
-				(100 * this.hsba[2]).toPrecision(3),
-				'%)'
-			);
-
-		case 'hsba':
-		case 'hsva':
-			if (!this.hsba) this.hsba = ColorConversion._rgbaToHSBA(this._array);
-			return 'hsba('.concat(
-				this.hsba[0] * this.maxes[HSB][0],
-				', ',
-				this.hsba[1] * this.maxes[HSB][1],
-				', ',
-				this.hsba[2] * this.maxes[HSB][2],
-				', ',
-				alpha,
-				')'
-			);
-
-		case 'hsba%':
-		case 'hsva%':
-			if (!this.hsba) this.hsba = ColorConversion._rgbaToHSBA(this._array);
-			return 'hsba('.concat(
-				(100 * this.hsba[0]).toPrecision(3),
-				'%, ',
-				(100 * this.hsba[1]).toPrecision(3),
-				'%, ',
-				(100 * this.hsba[2]).toPrecision(3),
-				'%, ',
-				(100 * alpha).toPrecision(3),
-				'%)'
-			);
-
-		case 'hsl':
-			if (!this.hsla) this.hsla = ColorConversion._rgbaToHSLA(this._array);
-			return 'hsl('.concat(
-				this.hsla[0] * this.maxes[HSL][0],
-				', ',
-				this.hsla[1] * this.maxes[HSL][1],
-				', ',
-				this.hsla[2] * this.maxes[HSL][2],
-				')'
-			);
-
-		case 'hsl%':
-			if (!this.hsla) this.hsla = ColorConversion._rgbaToHSLA(this._array);
-			return 'hsl('.concat(
-				(100 * this.hsla[0]).toPrecision(3),
-				'%, ',
-				(100 * this.hsla[1]).toPrecision(3),
-				'%, ',
-				(100 * this.hsla[2]).toPrecision(3),
-				'%)'
-			);
-
-		case 'hsla':
-			if (!this.hsla) this.hsla = ColorConversion._rgbaToHSLA(this._array);
-			return 'hsla('.concat(
-				this.hsla[0] * this.maxes[HSL][0],
-				', ',
-				this.hsla[1] * this.maxes[HSL][1],
-				', ',
-				this.hsla[2] * this.maxes[HSL][2],
-				', ',
-				alpha,
-				')'
-			);
-
-		case 'hsla%':
-			if (!this.hsla) this.hsla = ColorConversion._rgbaToHSLA(this._array);
-			return 'hsl('.concat(
-				(100 * this.hsla[0]).toPrecision(3),
-				'%, ',
-				(100 * this.hsla[1]).toPrecision(3),
-				'%, ',
-				(100 * this.hsla[2]).toPrecision(3),
-				'%, ',
-				(100 * alpha).toPrecision(3),
-				'%)'
-			);
-
-		case 'rgba':
-		default:
-			return 'rgba('.concat(a[0], ',', a[1], ',', a[2], ',', alpha, ')');
-	}
-};
-
-/**
- * @method setRed
- * @param {Number} red the new red value
- * @example
- * let backgroundColor;
- *
- * function setup() {
- *   backgroundColor = color(100, 50, 150);
- * }
- *
- * function draw() {
- *   backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
- *   background(backgroundColor);
- * }
- */
-exports.p5Color.prototype.setRed = function (new_red) {
-	this._array[0] = new_red / this.maxes[RGB][0];
-	this._calculateLevels();
-};
-
-/**
- * @method setGreen
- * @param {Number} green the new green value
- * @example
- * let backgroundColor;
- *
- * function setup() {
- *   backgroundColor = color(100, 50, 150);
- * }
- *
- * function draw() {
- *   backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
- *   background(backgroundColor);
- * }
- **/
-exports.p5Color.prototype.setGreen = function (new_green) {
-	this._array[1] = new_green / this.maxes[RGB][1];
-	this._calculateLevels();
-};
-
-/**
- * @method setBlue
- * @param {Number} blue the new blue value
- * @example
- * let backgroundColor;
- *
- * function setup() {
- *   backgroundColor = color(100, 50, 150);
- * }
- *
- * function draw() {
- *   backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
- *   background(backgroundColor);
- * }
- **/
-exports.p5Color.prototype.setBlue = function (new_blue) {
-	this._array[2] = new_blue / this.maxes[RGB][2];
-	this._calculateLevels();
-};
-
-/**
- * @method setAlpha
- * @param {Number} alpha the new alpha value
- * @example
- * let squareColor;
- *
- * function setup() {
- *   ellipseMode(CORNERS);
- *   strokeWeight(4);
- *   squareColor = color(100, 50, 150);
- * }
- *
- * function draw() {
- *   background(255);
- *
- *   noFill();
- *   stroke(0);
- *   ellipse(10, 10, width - 10, height - 10);
- *
- *   squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
- *   fill(squareColor);
- *   noStroke();
- *   rect(13, 13, width - 26, height - 26);
- * }
- **/
-exports.p5Color.prototype.setAlpha = function (new_alpha) {
-	this._array[3] = new_alpha / this.maxes[this.mode][3];
-	this._calculateLevels();
-};
-
-// calculates and stores the closest screen levels
-exports.p5Color.prototype._calculateLevels = function () {
-	var array = this._array;
-	// (loop backwards for performance)
-	var levels = (this.levels = new Array(array.length));
-	for (var i = array.length - 1; i >= 0; --i) {
-		levels[i] = Math.round(array[i] * 255);
-	}
-};
-
-exports.p5Color.prototype._getAlpha = function () {
-	return this._array[3] * this.maxes[this.mode][3];
-};
-
-// stores the color mode and maxes in this instance of Color
-// for later use (by _parseInputs())
-exports.p5Color.prototype._storeModeAndMaxes = function (new_mode, new_maxes) {
-	this.mode = new_mode;
-	this.maxes = new_maxes;
-};
-
-exports.p5Color.prototype._getMode = function () {
-	return this.mode;
-};
-
-exports.p5Color.prototype._getMaxes = function () {
-	return this.maxes;
-};
-
-exports.p5Color.prototype._getBlue = function () {
-	return this._array[2] * this.maxes[RGB][2];
-};
-
-exports.p5Color.prototype._getBrightness = function () {
-	if (!this.hsba) {
-		this.hsba = ColorConversion._rgbaToHSBA(this._array);
-	}
-	return this.hsba[2] * this.maxes[HSB][2];
-};
-
-exports.p5Color.prototype._getGreen = function () {
-	return this._array[1] * this.maxes[RGB][1];
-};
-
-/**
- * Hue is the same in HSB and HSL, but the maximum value may be different.
- * This function will return the HSB-normalized saturation when supplied with
- * an HSB color object, but will default to the HSL-normalized saturation
- * otherwise.
- */
-exports.p5Color.prototype._getHue = function () {
-	if (this.mode === HSB) {
-		if (!this.hsba) {
-			this.hsba = ColorConversion._rgbaToHSBA(this._array);
-		}
-		return this.hsba[0] * this.maxes[HSB][0];
-	} else {
-		if (!this.hsla) {
-			this.hsla = ColorConversion._rgbaToHSLA(this._array);
-		}
-		return this.hsla[0] * this.maxes[HSL][0];
-	}
-};
-
-exports.p5Color.prototype._getLightness = function () {
-	if (!this.hsla) {
-		this.hsla = ColorConversion._rgbaToHSLA(this._array);
-	}
-	return this.hsla[2] * this.maxes[HSL][2];
-};
-
-exports.p5Color.prototype._getRed = function () {
-	return this._array[0] * this.maxes[RGB][0];
-};
-
-/**
- * Saturation is scaled differently in HSB and HSL. This function will return
- * the HSB saturation when supplied with an HSB color object, but will default
- * to the HSL saturation otherwise.
- */
-exports.p5Color.prototype._getSaturation = function () {
-	if (this.mode === HSB) {
-		if (!this.hsba) {
-			this.hsba = ColorConversion._rgbaToHSBA(this._array);
-		}
-		return this.hsba[1] * this.maxes[HSB][1];
-	} else {
-		if (!this.hsla) {
-			this.hsla = ColorConversion._rgbaToHSLA(this._array);
-		}
-		return this.hsla[1] * this.maxes[HSL][1];
-	}
-};
-
-/**
- * CSS named colors.
- */
-var namedColors = {
-	aliceblue: '#f0f8ff',
-	antiquewhite: '#faebd7',
-	aqua: '#00ffff',
-	aquamarine: '#7fffd4',
-	azure: '#f0ffff',
-	beige: '#f5f5dc',
-	bisque: '#ffe4c4',
-	black: '#000000',
-	blanchedalmond: '#ffebcd',
-	blue: '#0000ff',
-	blueviolet: '#8a2be2',
-	brown: '#a52a2a',
-	burlywood: '#deb887',
-	cadetblue: '#5f9ea0',
-	chartreuse: '#7fff00',
-	chocolate: '#d2691e',
-	coral: '#ff7f50',
-	cornflowerblue: '#6495ed',
-	cornsilk: '#fff8dc',
-	crimson: '#dc143c',
-	cyan: '#00ffff',
-	darkblue: '#00008b',
-	darkcyan: '#008b8b',
-	darkgoldenrod: '#b8860b',
-	darkgray: '#a9a9a9',
-	darkgreen: '#006400',
-	darkgrey: '#a9a9a9',
-	darkkhaki: '#bdb76b',
-	darkmagenta: '#8b008b',
-	darkolivegreen: '#556b2f',
-	darkorange: '#ff8c00',
-	darkorchid: '#9932cc',
-	darkred: '#8b0000',
-	darksalmon: '#e9967a',
-	darkseagreen: '#8fbc8f',
-	darkslateblue: '#483d8b',
-	darkslategray: '#2f4f4f',
-	darkslategrey: '#2f4f4f',
-	darkturquoise: '#00ced1',
-	darkviolet: '#9400d3',
-	deeppink: '#ff1493',
-	deepskyblue: '#00bfff',
-	dimgray: '#696969',
-	dimgrey: '#696969',
-	dodgerblue: '#1e90ff',
-	firebrick: '#b22222',
-	floralwhite: '#fffaf0',
-	forestgreen: '#228b22',
-	fuchsia: '#ff00ff',
-	gainsboro: '#dcdcdc',
-	ghostwhite: '#f8f8ff',
-	gold: '#ffd700',
-	goldenrod: '#daa520',
-	gray: '#808080',
-	green: '#008000',
-	greenyellow: '#adff2f',
-	grey: '#808080',
-	honeydew: '#f0fff0',
-	hotpink: '#ff69b4',
-	indianred: '#cd5c5c',
-	indigo: '#4b0082',
-	ivory: '#fffff0',
-	khaki: '#f0e68c',
-	lavender: '#e6e6fa',
-	lavenderblush: '#fff0f5',
-	lawngreen: '#7cfc00',
-	lemonchiffon: '#fffacd',
-	lightblue: '#add8e6',
-	lightcoral: '#f08080',
-	lightcyan: '#e0ffff',
-	lightgoldenrodyellow: '#fafad2',
-	lightgray: '#d3d3d3',
-	lightgreen: '#90ee90',
-	lightgrey: '#d3d3d3',
-	lightpink: '#ffb6c1',
-	lightsalmon: '#ffa07a',
-	lightseagreen: '#20b2aa',
-	lightskyblue: '#87cefa',
-	lightslategray: '#778899',
-	lightslategrey: '#778899',
-	lightsteelblue: '#b0c4de',
-	lightyellow: '#ffffe0',
-	lime: '#00ff00',
-	limegreen: '#32cd32',
-	linen: '#faf0e6',
-	magenta: '#ff00ff',
-	maroon: '#800000',
-	mediumaquamarine: '#66cdaa',
-	mediumblue: '#0000cd',
-	mediumorchid: '#ba55d3',
-	mediumpurple: '#9370db',
-	mediumseagreen: '#3cb371',
-	mediumslateblue: '#7b68ee',
-	mediumspringgreen: '#00fa9a',
-	mediumturquoise: '#48d1cc',
-	mediumvioletred: '#c71585',
-	midnightblue: '#191970',
-	mintcream: '#f5fffa',
-	mistyrose: '#ffe4e1',
-	moccasin: '#ffe4b5',
-	navajowhite: '#ffdead',
-	navy: '#000080',
-	oldlace: '#fdf5e6',
-	olive: '#808000',
-	olivedrab: '#6b8e23',
-	orange: '#ffa500',
-	orangered: '#ff4500',
-	orchid: '#da70d6',
-	palegoldenrod: '#eee8aa',
-	palegreen: '#98fb98',
-	paleturquoise: '#afeeee',
-	palevioletred: '#db7093',
-	papayawhip: '#ffefd5',
-	peachpuff: '#ffdab9',
-	peru: '#cd853f',
-	pink: '#ffc0cb',
-	plum: '#dda0dd',
-	powderblue: '#b0e0e6',
-	purple: '#800080',
-	red: '#ff0000',
-	rosybrown: '#bc8f8f',
-	royalblue: '#4169e1',
-	saddlebrown: '#8b4513',
-	salmon: '#fa8072',
-	sandybrown: '#f4a460',
-	seagreen: '#2e8b57',
-	seashell: '#fff5ee',
-	sienna: '#a0522d',
-	silver: '#c0c0c0',
-	skyblue: '#87ceeb',
-	slateblue: '#6a5acd',
-	slategray: '#708090',
-	slategrey: '#708090',
-	snow: '#fffafa',
-	springgreen: '#00ff7f',
-	steelblue: '#4682b4',
-	tan: '#d2b48c',
-	teal: '#008080',
-	thistle: '#d8bfd8',
-	tomato: '#ff6347',
-	turquoise: '#40e0d0',
-	violet: '#ee82ee',
-	wheat: '#f5deb3',
-	white: '#ffffff',
-	whitesmoke: '#f5f5f5',
-	yellow: '#ffff00',
-	yellowgreen: '#9acd32'
-};
-
-/**
- * These regular expressions are used to build up the patterns for matching
- * viable CSS color strings: fragmenting the regexes in this way increases the
- * legibility and comprehensibility of the code.
- *
- * Note that RGB values of .9 are not parsed by IE, but are supported here for
- * color string consistency.
- */
-var WHITESPACE = /\s*/; // Match zero or more whitespace characters.
-var INTEGER = /(\d{1,3})/; // Match integers: 79, 255, etc.
-var DECIMAL = /((?:\d+(?:\.\d+)?)|(?:\.\d+))/; // Match 129.6, 79, .9, etc.
-var PERCENT = new RegExp(DECIMAL.source + '%'); // Match 12.9%, 79%, .9%, etc.
-
-/**
- * Full color string patterns. The capture groups are necessary.
- */
-var colorPatterns = {
-	// Match colors in format #XXX, e.g. #416.
-	HEX3: /^#([a-f0-9])([a-f0-9])([a-f0-9])$/i,
-
-	// Match colors in format #XXXX, e.g. #5123.
-	HEX4: /^#([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])$/i,
-
-	// Match colors in format #XXXXXX, e.g. #b4d455.
-	HEX6: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
-
-	// Match colors in format #XXXXXXXX, e.g. #b4d45535.
-	HEX8: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
-
-	// Match colors in format rgb(R, G, B), e.g. rgb(255, 0, 128).
-	RGB: new RegExp(
-		[
-			'^rgb\\(',
-			INTEGER.source,
-			',',
-			INTEGER.source,
-			',',
-			INTEGER.source,
-			'\\)$'
-		].join(WHITESPACE.source),
-		'i'
-	),
-
-	// Match colors in format rgb(R%, G%, B%), e.g. rgb(100%, 0%, 28.9%).
-	RGB_PERCENT: new RegExp(
-		[
-			'^rgb\\(',
-			PERCENT.source,
-			',',
-			PERCENT.source,
-			',',
-			PERCENT.source,
-			'\\)$'
-		].join(WHITESPACE.source),
-		'i'
-	),
-
-	// Match colors in format rgb(R, G, B, A), e.g. rgb(255, 0, 128, 0.25).
-	RGBA: new RegExp(
-		[
-			'^rgba\\(',
-			INTEGER.source,
-			',',
-			INTEGER.source,
-			',',
-			INTEGER.source,
-			',',
-			DECIMAL.source,
-			'\\)$'
-		].join(WHITESPACE.source),
-		'i'
-	),
-
-	// Match colors in format rgb(R%, G%, B%, A), e.g. rgb(100%, 0%, 28.9%, 0.5).
-	RGBA_PERCENT: new RegExp(
-		[
-			'^rgba\\(',
-			PERCENT.source,
-			',',
-			PERCENT.source,
-			',',
-			PERCENT.source,
-			',',
-			DECIMAL.source,
-			'\\)$'
-		].join(WHITESPACE.source),
-		'i'
-	),
-
-	// Match colors in format hsla(H, S%, L%), e.g. hsl(100, 40%, 28.9%).
-	HSL: new RegExp(
-		[
-			'^hsl\\(',
-			INTEGER.source,
-			',',
-			PERCENT.source,
-			',',
-			PERCENT.source,
-			'\\)$'
-		].join(WHITESPACE.source),
-		'i'
-	),
-
-	// Match colors in format hsla(H, S%, L%, A), e.g. hsla(100, 40%, 28.9%, 0.5).
-	HSLA: new RegExp(
-		[
-			'^hsla\\(',
-			INTEGER.source,
-			',',
-			PERCENT.source,
-			',',
-			PERCENT.source,
-			',',
-			DECIMAL.source,
-			'\\)$'
-		].join(WHITESPACE.source),
-		'i'
-	),
-
-	// Match colors in format hsb(H, S%, B%), e.g. hsb(100, 40%, 28.9%).
-	HSB: new RegExp(
-		[
-			'^hsb\\(',
-			INTEGER.source,
-			',',
-			PERCENT.source,
-			',',
-			PERCENT.source,
-			'\\)$'
-		].join(WHITESPACE.source),
-		'i'
-	),
-
-	// Match colors in format hsba(H, S%, B%, A), e.g. hsba(100, 40%, 28.9%, 0.5).
-	HSBA: new RegExp(
-		[
-			'^hsba\\(',
-			INTEGER.source,
-			',',
-			PERCENT.source,
-			',',
-			PERCENT.source,
-			',',
-			DECIMAL.source,
-			'\\)$'
-		].join(WHITESPACE.source),
-		'i'
-	)
-};
-
-/**
- * For a number of different inputs, returns a color formatted as [r, g, b, a]
- * arrays, with each component normalized between 0 and 1.
- *
- * @private
- * @param {Array} [...args] An 'array-like' object that represents a list of
- *                          arguments
- * @return {Number[]}       a color formatted as [r, g, b, a]
- *                          Example:
- *                          input        ==> output
- *                          g            ==> [g, g, g, 255]
- *                          g,a          ==> [g, g, g, a]
- *                          r, g, b      ==> [r, g, b, 255]
- *                          r, g, b, a   ==> [r, g, b, a]
- *                          [g]          ==> [g, g, g, 255]
- *                          [g, a]       ==> [g, g, g, a]
- *                          [r, g, b]    ==> [r, g, b, 255]
- *                          [r, g, b, a] ==> [r, g, b, a]
- * @example
- * // todo
- */
-exports.p5Color._parseInputs = function (r, g, b, a) {
-	var numArgs = arguments.length;
-	var mode = this.mode;
-	var maxes = this.maxes[mode];
-	var results = [];
-	var i;
-
-	if (numArgs >= 3) {
-		// Argument is a list of component values.
-
-		results[0] = r / maxes[0];
-		results[1] = g / maxes[1];
-		results[2] = b / maxes[2];
-
-		// Alpha may be undefined, so default it to 100%.
-		if (typeof a === 'number') {
-			results[3] = a / maxes[3];
-		} else {
-			results[3] = 1;
-		}
-
-		// Constrain components to the range [0,1].
-		// (loop backwards for performance)
-		for (i = results.length - 1; i >= 0; --i) {
-			var result = results[i];
-			if (result < 0) {
-				results[i] = 0;
-			} else if (result > 1) {
-				results[i] = 1;
-			}
-		}
-
-		// Convert to RGBA and return.
-		if (mode === HSL) {
-			return ColorConversion._hslaToRGBA(results);
-		} else if (mode === HSB) {
-			return ColorConversion._hsbaToRGBA(results);
-		} else {
-			return results;
-		}
-	} else if (numArgs === 1 && typeof r === 'string') {
-		var str = r.trim().toLowerCase();
-
-		// Return if string is a named colour.
-		if (namedColors[str]) {
-			return p5Color._parseInputs.call(this, namedColors[str]);
-		}
-
-		// Try RGBA pattern matching.
-		if (colorPatterns.HEX3.test(str)) {
-			// #rgb
-			results = colorPatterns.HEX3.exec(str)
-				.slice(1)
-				.map(function (color) {
-					return parseInt(color + color, 16) / 255;
-				});
-			results[3] = 1;
-			return results;
-		} else if (colorPatterns.HEX6.test(str)) {
-			// #rrggbb
-			results = colorPatterns.HEX6.exec(str)
-				.slice(1)
-				.map(function (color) {
-					return parseInt(color, 16) / 255;
-				});
-			results[3] = 1;
-			return results;
-		} else if (colorPatterns.HEX4.test(str)) {
-			// #rgba
-			results = colorPatterns.HEX4.exec(str)
-				.slice(1)
-				.map(function (color) {
-					return parseInt(color + color, 16) / 255;
-				});
-			return results;
-		} else if (colorPatterns.HEX8.test(str)) {
-			// #rrggbbaa
-			results = colorPatterns.HEX8.exec(str)
-				.slice(1)
-				.map(function (color) {
-					return parseInt(color, 16) / 255;
-				});
-			return results;
-		} else if (colorPatterns.RGB.test(str)) {
-			// rgb(R,G,B)
-			results = colorPatterns.RGB.exec(str)
-				.slice(1)
-				.map(function (color) {
-					return color / 255;
-				});
-			results[3] = 1;
-			return results;
-		} else if (colorPatterns.RGB_PERCENT.test(str)) {
-			// rgb(R%,G%,B%)
-			results = colorPatterns.RGB_PERCENT.exec(str)
-				.slice(1)
-				.map(function (color) {
-					return parseFloat(color) / 100;
-				});
-			results[3] = 1;
-			return results;
-		} else if (colorPatterns.RGBA.test(str)) {
-			// rgba(R,G,B,A)
-			results = colorPatterns.RGBA.exec(str)
-				.slice(1)
-				.map(function (color, idx) {
-					if (idx === 3) {
-						return parseFloat(color);
-					}
-					return color / 255;
-				});
-			return results;
-		} else if (colorPatterns.RGBA_PERCENT.test(str)) {
-			// rgba(R%,G%,B%,A%)
-			results = colorPatterns.RGBA_PERCENT.exec(str)
-				.slice(1)
-				.map(function (color, idx) {
-					if (idx === 3) {
-						return parseFloat(color);
-					}
-					return parseFloat(color) / 100;
-				});
-			return results;
-		}
-
-		// Try HSLA pattern matching.
-		if (colorPatterns.HSL.test(str)) {
-			// hsl(H,S,L)
-			results = colorPatterns.HSL.exec(str)
-				.slice(1)
-				.map(function (color, idx) {
-					if (idx === 0) {
-						return parseInt(color, 10) / 360;
-					}
-					return parseInt(color, 10) / 100;
-				});
-			results[3] = 1;
-		} else if (colorPatterns.HSLA.test(str)) {
-			// hsla(H,S,L,A)
-			results = colorPatterns.HSLA.exec(str)
-				.slice(1)
-				.map(function (color, idx) {
-					if (idx === 0) {
-						return parseInt(color, 10) / 360;
-					} else if (idx === 3) {
-						return parseFloat(color);
-					}
-					return parseInt(color, 10) / 100;
-				});
-		}
-		results = results.map(function (value) {
-			return Math.max(Math.min(value, 1), 0);
-		});
-		if (results.length) {
-			return ColorConversion._hslaToRGBA(results);
-		}
-
-		// Try HSBA pattern matching.
-		if (colorPatterns.HSB.test(str)) {
-			// hsb(H,S,B)
-			results = colorPatterns.HSB.exec(str)
-				.slice(1)
-				.map(function (color, idx) {
-					if (idx === 0) {
-						return parseInt(color, 10) / 360;
-					}
-					return parseInt(color, 10) / 100;
-				});
-			results[3] = 1;
-		} else if (colorPatterns.HSBA.test(str)) {
-			// hsba(H,S,B,A)
-			results = colorPatterns.HSBA.exec(str)
-				.slice(1)
-				.map(function (color, idx) {
-					if (idx === 0) {
-						return parseInt(color, 10) / 360;
-					} else if (idx === 3) {
-						return parseFloat(color);
-					}
-					return parseInt(color, 10) / 100;
-				});
-		}
-
-		if (results.length) {
-			// (loop backwards for performance)
-			for (i = results.length - 1; i >= 0; --i) {
-				results[i] = Math.max(Math.min(results[i], 1), 0);
-			}
-
-			return ColorConversion._hsbaToRGBA(results);
-		}
-
-		// Input did not match any CSS color pattern: default to white.
-		results = [1, 1, 1, 1];
-	} else if ((numArgs === 1 || numArgs === 2) && typeof r === 'number') {
-		// 'Grayscale' mode.
-
-		/**
-		 * For HSB and HSL, interpret the gray level as a brightness/lightness
-		 * value (they are equivalent when chroma is zero). For RGB, normalize the
-		 * gray level according to the blue maximum.
-		 */
-		results[0] = r / maxes[2];
-		results[1] = r / maxes[2];
-		results[2] = r / maxes[2];
-
-		// Alpha may be undefined, so default it to 100%.
-		if (typeof g === 'number') {
-			results[3] = g / maxes[3];
-		} else {
-			results[3] = 1;
-		}
-
-		// Constrain components to the range [0,1].
-		results = results.map(function (value) {
-			return Math.max(Math.min(value, 1), 0);
-		});
-	} else {
-		throw new Error(arguments + 'is not a valid color representation.');
-	}
-
-	return results;
-};
-
-/**********************************************************************************************************************
- * creating/reading
- */
-
-/**
-* Extracts the alpha value from a color or pixel array.
-*
-* @method alpha
-* @param {Color|Number[]|String} color Color object, color components,
-*                                         or CSS color
-* @return {Number} the alpha value
-* @example
-* noStroke();
-* let c = color(0, 126, 255, 102);
-* fill(c);
-* rect(15, 15, 35, 70);
-* let value = alpha(c); // Sets 'value' to 102
-* fill(value);
-* rect(50, 15, 35, 70);
-*/
-exports.alpha = function (c) {
-	return color(c)._getAlpha();
-};
-
-/**
- * Extracts the blue value from a color or pixel array.
- *
- * @method blue
- * @param {Color|Number[]|String} color Color object, color components,
- *                                         or CSS color
- * @return {Number} the blue value
- * @example
- * let c = color(175, 100, 220); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * rect(15, 20, 35, 60); // Draw left rectangle
- *
- * let blueValue = blue(c); // Get blue in 'c'
- * print(blueValue); // Prints "220.0"
- * fill(0, 0, blueValue); // Use 'blueValue' in new fill
- * rect(50, 20, 35, 60); // Draw right rectangle
- */
-exports.blue = function (c) {
-	return color(c)._getBlue();
-};
-
-/**
- * Extracts the HSB brightness value from a color or pixel array.
- *
- * @method brightness
- * @param {Color|Number[]|String} color Color object, color components,
- *                                         or CSS color
- * @return {Number} the brightness value
- * @example
- * noStroke();
- * colorMode(HSB, 255);
- * let c = color(0, 126, 255);
- * fill(c);
- * rect(15, 20, 35, 60);
- * let value = brightness(c); // Sets 'value' to 255
- * fill(value);
- * rect(50, 20, 35, 60);
- */
-exports.brightness = function (c) {
-	return color(c)._getBrightness();
-};
-
-/**
- * Creates colors for storing in variables of the color datatype. The
- * parameters are interpreted as RGB or HSB values depending on the
- * current colorMode(). The default mode is RGB values from 0 to 255
- * and, therefore, the function call color(255, 204, 0) will return a
- * bright yellow color.
- * <br><br>
- * Note that if only one value is provided to color(), it will be interpreted
- * as a grayscale value. Add a second value, and it will be used for alpha
- * transparency. When three values are specified, they are interpreted as
- * either RGB or HSB values. Adding a fourth value applies alpha
- * transparency.
- * <br><br>
- * If a single string argument is provided, RGB, RGBA and Hex CSS color
- * strings and all named color strings are supported. In this case, an alpha
- * number value as a second argument is not supported, the RGBA form should be
- * used.
- *
- * @method color
- * @param  {Number}        gray    number specifying value between white
- *                                 and black.
- * @param  {Number}        [alpha] alpha value relative to current color range
- *                                 (default is 0-255)
- * @return {Color}              resulting color
- *
- * @example
- * let c = color(255, 204, 0); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * noStroke(); // Don't draw a stroke around shapes
- * rect(30, 20, 55, 55); // Draw rectangle
- *
- * let c = color(255, 204, 0); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * noStroke(); // Don't draw a stroke around shapes
- * ellipse(25, 25, 80, 80); // Draw left circle
- *
- * // Using only one value with color()
- * // generates a grayscale value.
- * c = color(65); // Update 'c' with grayscale value
- * fill(c); // Use updated 'c' as fill color
- * ellipse(75, 75, 80, 80); // Draw right circle
- *
- * // Named SVG & CSS colors may be used,
- * let c = color('magenta');
- * fill(c); // Use 'c' as fill color
- * noStroke(); // Don't draw a stroke around shapes
- * rect(20, 20, 60, 60); // Draw rectangle
- *
- * // as can hex color codes:
- * noStroke(); // Don't draw a stroke around shapes
- * let c = color('#0f0');
- * fill(c); // Use 'c' as fill color
- * rect(0, 10, 45, 80); // Draw rectangle
- *
- * c = color('#00ff00');
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 10, 45, 80); // Draw rectangle
- *
- * // RGB and RGBA color strings are also supported:
- * // these all set to the same color (solid blue)
- * let c;
- * noStroke(); // Don't draw a stroke around shapes
- * c = color('rgb(0,0,255)');
- * fill(c); // Use 'c' as fill color
- * rect(10, 10, 35, 35); // Draw rectangle
- *
- * c = color('rgb(0%, 0%, 100%)');
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 10, 35, 35); // Draw rectangle
- *
- * c = color('rgba(0, 0, 255, 1)');
- * fill(c); // Use updated 'c' as fill color
- * rect(10, 55, 35, 35); // Draw rectangle
- *
- * c = color('rgba(0%, 0%, 100%, 1)');
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 55, 35, 35); // Draw rectangle
- *
- * // HSL color is also supported and can be specified
- * // by value
- * let c;
- * noStroke(); // Don't draw a stroke around shapes
- * c = color('hsl(160, 100%, 50%)');
- * fill(c); // Use 'c' as fill color
- * rect(0, 10, 45, 80); // Draw rectangle
- *
- * c = color('hsla(160, 100%, 50%, 0.5)');
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 10, 45, 80); // Draw rectangle
- *
- * // HSB color is also supported and can be specified
- * // by value
- * let c;
- * noStroke(); // Don't draw a stroke around shapes
- * c = color('hsb(160, 100%, 50%)');
- * fill(c); // Use 'c' as fill color
- * rect(0, 10, 45, 80); // Draw rectangle
- *
- * c = color('hsba(160, 100%, 50%, 0.5)');
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 10, 45, 80); // Draw rectangle
- *
- * let c; // Declare color 'c'
- * noStroke(); // Don't draw a stroke around shapes
- *
- * // If no colorMode is specified, then the
- * // default of RGB with scale of 0-255 is used.
- * c = color(50, 55, 100); // Create a color for 'c'
- * fill(c); // Use color variable 'c' as fill color
- * rect(0, 10, 45, 80); // Draw left rect
- *
- * colorMode(HSB, 100); // Use HSB with scale of 0-100
- * c = color(50, 55, 100); // Update 'c' with new color
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 10, 45, 80); // Draw right rect
- */
-/**
- * @method color
- * @param  {Number}        v1      red or hue value relative to
- *                                 the current color range
- * @param  {Number}        v2      green or saturation value
- *                                 relative to the current color range
- * @param  {Number}        v3      blue or brightness value
- *                                 relative to the current color range
- * @param  {Number}        [alpha]
- * @return {Color}
- */
-
-/**
- * @method color
- * @param  {String}        value   a color string
- * @return {Color}
- */
-/**
- * @method color
- * @param  {Number[]}      values  an array containing the red,green,blue &
- *                                 and alpha components of the color
- * @return {Color}
- */
-/**
- * @method color
- * @param  {Color}     color
- * @return {Color}
- */
-
-exports.color = function () {
-	if (arguments[0] instanceof p5Color) {
-		return arguments[0]; // Do nothing if argument is already a color object.
-	}
-
-	var args = arguments[0] instanceof Array ? arguments[0] : arguments;
-	return new p5Color(args);
-};
-
-/**
- * Extracts the green value from a color or pixel array.
- *
- * @method green
- * @param {Color|Number[]|String} color Color object, color components,
- *                                         or CSS color
- * @return {Number} the green value
- * @example
- * let c = color(20, 75, 200); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * rect(15, 20, 35, 60); // Draw left rectangle
- *
- * let greenValue = green(c); // Get green in 'c'
- * print(greenValue); // Print "75.0"
- * fill(0, greenValue, 0); // Use 'greenValue' in new fill
- * rect(50, 20, 35, 60); // Draw right rectangle
- */
-
-exports.green = function (c) {
-	return color(c)._getGreen();
-};
-
-/**
- * Extracts the hue value from a color or pixel array.
- *
- * Hue exists in both HSB and HSL. This function will return the
- * HSB-normalized hue when supplied with an HSB color object (or when supplied
- * with a pixel array while the color mode is HSB), but will default to the
- * HSL-normalized hue otherwise. (The values will only be different if the
- * maximum hue setting for each system is different.)
- *
- * @method hue
- * @param {Color|Number[]|String} color Color object, color components,
- *                                         or CSS color
- * @return {Number} the hue
- * @example
- * noStroke();
- * colorMode(HSB, 255);
- * let c = color(0, 126, 255);
- * fill(c);
- * rect(15, 20, 35, 60);
- * let value = hue(c); // Sets 'value' to "0"
- * fill(value);
- * rect(50, 20, 35, 60);
- */
-exports.hue = function (c) {
-	return color(c)._getHue();
-};
-
-/**
- * Blends two colors to find a third color somewhere between them. The amt
- * parameter is the amount to interpolate between the two values where 0.0
- * equal to the first color, 0.1 is very near the first color, 0.5 is halfway
- * in between, etc. An amount below 0 will be treated as 0. Likewise, amounts
- * above 1 will be capped at 1. This is different from the behavior of lerp(),
- * but necessary because otherwise numbers outside the range will produce
- * strange and unexpected colors.
- * <br><br>
- * The way that colours are interpolated depends on the current color mode.
- *
- * @method lerpColor
- * @param  {Color} c1  interpolate from this color
- * @param  {Color} c2  interpolate to this color
- * @param  {Number}       amt number between 0 and 1
- * @return {Color}     interpolated color
- * @example
- * colorMode(RGB);
- * stroke(255);
- * background(51);
- * let from = color(218, 165, 32);
- * let to = color(72, 61, 139);
- * colorMode(RGB); // Try changing to HSB.
- * let interA = lerpColor(from, to, 0.33);
- * let interB = lerpColor(from, to, 0.66);
- * fill(from);
- * rect(10, 20, 20, 60);
- * fill(interA);
- * rect(30, 20, 20, 60);
- * fill(interB);
- * rect(50, 20, 20, 60);
- * fill(to);
- * rect(70, 20, 20, 60);
- */
-exports.lerpColor = function (c1, c2, amt) {
-	var mode = _currentEnv._colorMode;
-	var maxes = _colorMaxes;
-	var l0, l1, l2, l3;
-	var fromArray, toArray;
-
-	if (mode === RGB) {
-		fromArray = c1.levels.map(function (level) {
-			return level / 255;
-		});
-		toArray = c2.levels.map(function (level) {
-			return level / 255;
-		});
-	} else if (mode === HSB) {
-		c1._getBrightness(); // Cache hsba so it definitely exists.
-		c2._getBrightness();
-		fromArray = c1.hsba;
-		toArray = c2.hsba;
-	} else if (mode === HSL) {
-		c1._getLightness(); // Cache hsla so it definitely exists.
-		c2._getLightness();
-		fromArray = c1.hsla;
-		toArray = c2.hsla;
-	} else {
-		throw new Error(mode + 'cannot be used for interpolation.');
-	}
-
-	// Prevent extrapolation.
-	amt = Math.max(Math.min(amt, 1), 0);
-
-	// Define lerp here itself if user isn't using math module.
-	// Maintains the definition as found in math/calculation.js
-	if (typeof this.lerp === 'undefined') {
-		this.lerp = function (start, stop, amt) {
-			return amt * (stop - start) + start;
-		};
-	}
-
-	// Perform interpolation.
-	l0 = this.lerp(fromArray[0], toArray[0], amt);
-	l1 = this.lerp(fromArray[1], toArray[1], amt);
-	l2 = this.lerp(fromArray[2], toArray[2], amt);
-	l3 = this.lerp(fromArray[3], toArray[3], amt);
-
-	// Scale components.
-	l0 *= maxes[mode][0];
-	l1 *= maxes[mode][1];
-	l2 *= maxes[mode][2];
-	l3 *= maxes[mode][3];
-
-	return color(l0, l1, l2, l3);
-};
-
-/**
- * Extracts the HSL lightness value from a color or pixel array.
- *
- * @method lightness
- * @param {Color|Number[]|String} color Color object, color components,
- *                                         or CSS color
- * @return {Number} the lightness
- * @example
- * noStroke();
- * colorMode(HSL);
- * let c = color(156, 100, 50, 1);
- * fill(c);
- * rect(15, 20, 35, 60);
- * let value = lightness(c); // Sets 'value' to 50
- * fill(value);
- * rect(50, 20, 35, 60);
- */
-exports.lightness = function (c) {
-	return color(c)._getLightness();
-};
-
-/**
- * Extracts the red value from a color or pixel array.
- *
- * @method red
- * @param {Color|Number[]|String} color Color object, color components,
- *                                         or CSS color
- * @return {Number} the red value
- * @example
- * let c = color(255, 204, 0); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * rect(15, 20, 35, 60); // Draw left rectangle
- *
- * let redValue = red(c); // Get red in 'c'
- * print(redValue); // Print "255.0"
- * fill(redValue, 0, 0); // Use 'redValue' in new fill
- * rect(50, 20, 35, 60); // Draw right rectangle
- *
- * colorMode(RGB, 255);
- * let c = color(127, 255, 0);
- * colorMode(RGB, 1);
- * let myColor = red(c);
- * print(myColor);
- */
-exports.red = function (c) {
-	return color(c)._getRed();
-};
-
-/**
- * Extracts the saturation value from a color or pixel array.
- *
- * Saturation is scaled differently in HSB and HSL. This function will return
- * the HSB saturation when supplied with an HSB color object (or when supplied
- * with a pixel array while the color mode is HSB), but will default to the
- * HSL saturation otherwise.
- *
- * @method saturation
- * @param {Color|Number[]|String} color Color object, color components,
- *                                         or CSS color
- * @return {Number} the saturation value
- * @example
- * noStroke();
- * colorMode(HSB, 255);
- * let c = color(0, 126, 255);
- * fill(c);
- * rect(15, 20, 35, 60);
- * let value = saturation(c); // Sets 'value' to 126
- * fill(value);
- * rect(50, 20, 35, 60);
- */
-
-exports.saturation = function (c) {
-	return color(c)._getSaturation();
-};
-
-/**********************************************************************************************************************
- * setting
- */
-
-/**
-* The background() function sets the color used for the background of the
-* p5.js canvas. The default background is transparent. This function is
-* typically used within draw() to clear the display window at the beginning
-* of each frame, but it can be used inside setup() to set the background on
-* the first frame of animation or if the background need only be set once.
-* <br><br>
-* The color is either specified in terms of the RGB, HSB, or HSL color
-* depending on the current colorMode. (The default color space is RGB, with
-* each value in the range from 0 to 255). The alpha range by default is also 0 to 255.
-* <br><br>
-* If a single string argument is provided, RGB, RGBA and Hex CSS color strings
-* and all named color strings are supported. In this case, an alpha number
-* value as a second argument is not supported, the RGBA form should be used.
-* <br><br>
-* A Color object can also be provided to set the background color.
-* <br><br>
-* An Image can also be provided to set the background image.
-*
-* @method background
-* @param {Color} color     any value created by the color() function
-*
-* @example
-* // Grayscale integer value
-* background(51);
-*
-* // R, G & B integer values
-* background(255, 204, 0);
-*
-* // H, S & B integer values
-* colorMode(HSB);
-* background(255, 204, 100);
-*
-* // Named SVG/CSS color string
-* background('red');
-*
-* // three-digit hexadecimal RGB notation
-* background('#fae');
-*
-* // six-digit hexadecimal RGB notation
-* background('#222222');
-*
-* // integer RGB notation
-* background('rgb(0,255,0)');
-*
-* // integer RGBA notation
-* background('rgba(0,255,0, 0.25)');
-*
-* // percentage RGB notation
-* background('rgb(100%,0%,10%)');
-*
-* // percentage RGBA notation
-* background('rgba(100%,0%,100%,0.5)');
-*
-* // p5 Color object
-* background(color(0, 0, 255));
-*/
-
-/**
- * @method background
- * @param {String} colorstring color string, possible formats include: integer
- *                         rgb() or rgba(), percentage rgb() or rgba(),
- *                         3-digit hex, 6-digit hex
- * @param {Number} [a]         opacity of the background relative to current
- *                             color range (default is 0-255)
- */
-
-/**
- * @method background
- * @param {Number} gray   specifies a value between white and black
- * @param {Number} [a]
- */
-
-/**
- * @method background
- * @param {Number} v1     red or hue value (depending on the current color
- *                        mode)
- * @param {Number} v2     green or saturation value (depending on the current
- *                        color mode)
- * @param {Number} v3     blue or brightness value (depending on the current
- *                        color mode)
- * @param  {Number} [a]
- */
-
-/**
- * @method background
- * @param  {Number[]}      values  an array containing the red,green,blue &
- *                                 and alpha components of the color
- */
-
-/**
- * @method background
- * @param {Bitmap} bitmap     image created with loadImage() or createImage(),
- *                             to set as background
- *                             (must be same size as the sketch window)
- * @param  {Number}  [a]
- */
-
-exports.background = function () {
-	if (arguments[0] instanceof Bitmap) {
-		arguments[0].Draw(0, 0);
-	} else {
-		if (arguments[0] instanceof p5Color) {
-			_background = arguments[0].toAllegro()
-		} else {
-			_background = new p5Color(arguments).toAllegro();
-		}
-		FilledBox(0, 0, SizeX(), SizeY(), _background);
-	}
-};
-
-/**
- * Clears the pixels within a buffer. This function only clears the canvas.
- * It will not clear objects created by createX() methods such as
- * createVideo() or createDiv().
- * Unlike the main graphics context, pixels in additional graphics areas created
- * with createGraphics() can be entirely
- * or partially transparent. This function clears everything to make all of
- * the pixels 100% transparent.
- *
- * @method clear
- * @example
- * // Clear the screen on mouse press.
- * function setup() {
- *   createCanvas(100, 100);
- * }
- *
- * function draw() {
- *   ellipse(mouseX, mouseY, 20, 20);
- * }
- *
- * function mousePressed() {
- *   clear();
- * }
- */
-exports.clear = function () {
-	ClearScreen(_background);
-};
-
-/**
- * colorMode() changes the way p5.js interprets color data. By default, the
- * parameters for fill(), stroke(), background(), and color() are defined by
- * values between 0 and 255 using the RGB color model. This is equivalent to
- * setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB
- * system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You
- * can also use HSL.
- * <br><br>
- * Note: existing color objects remember the mode that they were created in,
- * so you can change modes as you like without affecting their appearance.
- *
- *
- * @method colorMode
- * @param {Constant} mode   either RGB, HSB or HSL, corresponding to
- *                          Red/Green/Blue and Hue/Saturation/Brightness
- *                          (or Lightness)
- * @param {Number}  [max]  range for all values
- *
- * @example
- * noStroke();
- * colorMode(RGB, 100);
- * for (let i = 0; i < 100; i++) {
- *   for (let j = 0; j < 100; j++) {
- *     stroke(i, j, 0);
- *     point(i, j);
- *   }
- * }
- *
- * noStroke();
- * colorMode(HSB, 100);
- * for (let i = 0; i < 100; i++) {
- *   for (let j = 0; j < 100; j++) {
- *     stroke(i, j, 100);
- *     point(i, j);
- *   }
- * }
- *
- * colorMode(RGB, 255);
- * let c = color(127, 255, 0);
- *
- * colorMode(RGB, 1);
- * let myColor = c._getRed();
- * text(myColor, 10, 10, 80, 80);
- *
- * noFill();
- * colorMode(RGB, 255, 255, 255, 1);
- * background(255);
- *
- * strokeWeight(4);
- * stroke(255, 0, 10, 0.3);
- * ellipse(40, 40, 50, 50);
- * ellipse(50, 50, 40, 40);
- */
-/**
- * @method colorMode
- * @param {Constant} mode
- * @param {Number} max1     range for the red or hue depending on the
- *                              current color mode
- * @param {Number} max2     range for the green or saturation depending
- *                              on the current color mode
- * @param {Number} max3     range for the blue or brightness/lightness
- *                              depending on the current color mode
- * @param {Number} [maxA]   range for the alpha
- */
-exports.colorMode = function (mode, max1, max2, max3, maxA) {
-	if (
-		mode === RGB ||
-		mode === HSB ||
-		mode === HSL
-	) {
-		// Set color mode.
-		_currentEnv._colorMode = mode;
-
-		// Set color maxes.
-		var maxes = _currentEnv._colorMaxes[mode];
-		if (arguments.length === 2) {
-			maxes[0] = max1; // Red
-			maxes[1] = max1; // Green
-			maxes[2] = max1; // Blue
-			maxes[3] = max1; // Alpha
-		} else if (arguments.length === 4) {
-			maxes[0] = max1; // Red
-			maxes[1] = max2; // Green
-			maxes[2] = max3; // Blue
-		} else if (arguments.length === 5) {
-			maxes[0] = max1; // Red
-			maxes[1] = max2; // Green
-			maxes[2] = max3; // Blue
-			maxes[3] = maxA; // Alpha
-		}
-	}
-};
-
-/**
- * Sets the color used to fill shapes. For example, if you run
- * fill(204, 102, 0), all subsequent shapes will be filled with orange. This
- * color is either specified in terms of the RGB or HSB color depending on
- * the current colorMode(). (The default color space is RGB, with each value
- * in the range from 0 to 255). The alpha range by default is also 0 to 255.
- * <br><br>
- * If a single string argument is provided, RGB, RGBA and Hex CSS color strings
- * and all named color strings are supported. In this case, an alpha number
- * value as a second argument is not supported, the RGBA form should be used.
- * <br><br>
- * A p5 Color object can also be provided to set the fill color.
- *
- * @method fill
- * @param  {Number}        v1      red or hue value relative to
- *                                 the current color range
- * @param  {Number}        v2      green or saturation value
- *                                 relative to the current color range
- * @param  {Number}        v3      blue or brightness value
- *                                 relative to the current color range
- * @param  {Number}        [alpha]
- * @example
- * // Grayscale integer value
- * fill(51);
- * rect(20, 20, 60, 60);
- *
- * // R, G & B integer values
- * fill(255, 204, 0);
- * rect(20, 20, 60, 60);
- *
- * // H, S & B integer values
- * colorMode(HSB);
- * fill(255, 204, 100);
- * rect(20, 20, 60, 60);
- *
- * // Named SVG/CSS color string
- * fill('red');
- * rect(20, 20, 60, 60);
- *
- * // three-digit hexadecimal RGB notation
- * fill('#fae');
- * rect(20, 20, 60, 60);
- *
- * // six-digit hexadecimal RGB notation
- * fill('#222222');
- * rect(20, 20, 60, 60);
- *
- * // integer RGB notation
- * fill('rgb(0,255,0)');
- * rect(20, 20, 60, 60);
- *
- * // integer RGBA notation
- * fill('rgba(0,255,0, 0.25)');
- * rect(20, 20, 60, 60);
- *
- * // percentage RGB notation
- * fill('rgb(100%,0%,10%)');
- * rect(20, 20, 60, 60);
- *
- * // percentage RGBA notation
- * fill('rgba(100%,0%,100%,0.5)');
- * rect(20, 20, 60, 60);
- *
- * // p5 Color object
- * fill(color(0, 0, 255));
- * rect(20, 20, 60, 60);
- */
-
-/**
- * @method fill
- * @param  {String}        value   a color string
- */
-
-/**
- * @method fill
- * @param  {Number}        gray   a gray value
- * @param  {Number}        [alpha]
- */
-
-/**
- * @method fill
- * @param  {Number[]}      values  an array containing the red,green,blue &
- *                                 and alpha components of the color
- */
-
-/**
- * @method fill
- * @param  {Color}      color   the fill color
- */
-exports.fill = function () {
-	if (arguments[0] instanceof p5Color) {
-		_currentEnv._fill = arguments[0].toAllegro();
-	} else {
-		_currentEnv._fill = new p5Color(arguments).toAllegro();
-	}
-};
-
-/**
- * Disables filling geometry. If both noStroke() and noFill() are called,
- * nothing will be drawn to the screen.
- *
- * @method noFill
- * @example
- * rect(15, 10, 55, 55);
- * noFill();
- * rect(20, 20, 60, 60);
- *
- * function setup() {
- *   createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw() {
- *   background(0);
- *   noFill();
- *   stroke(100, 100, 240);
- *   rotateX(frameCount * 0.01);
- *   rotateY(frameCount * 0.01);
- *   box(45, 45, 45);
- * }
- */
-exports.noFill = function () {
-	_currentEnv._fill = NO_COLOR;
-};
-
-/**
- * Disables drawing the stroke (outline). If both noStroke() and noFill()
- * are called, nothing will be drawn to the screen.
- *
- * @method noStroke
- * @example
- * noStroke();
- * rect(20, 20, 60, 60);
- *
- * function setup() {
- *   createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw() {
- *   background(0);
- *   noStroke();
- *   fill(240, 150, 150);
- *   rotateX(frameCount * 0.01);
- *   rotateY(frameCount * 0.01);
- *   box(45, 45, 45);
- * }
- */
-exports.noStroke = function () {
-	_currentEnv._stroke = NO_COLOR;
-};
-
-/**
- * Sets the color used to draw lines and borders around shapes. This color
- * is either specified in terms of the RGB or HSB color depending on the
- * current colorMode() (the default color space is RGB, with each value in
- * the range from 0 to 255). The alpha range by default is also 0 to 255.
- * <br><br>
- * If a single string argument is provided, RGB, RGBA and Hex CSS color
- * strings and all named color strings are supported. In this case, an alpha
- * number value as a second argument is not supported, the RGBA form should be
- * used.
- * <br><br>
- * A p5 Color object can also be provided to set the stroke color.
- *
- *
- * @method stroke
- * @param  {Number}        v1      red or hue value relative to
- *                                 the current color range
- * @param  {Number}        v2      green or saturation value
- *                                 relative to the current color range
- * @param  {Number}        v3      blue or brightness value
- *                                 relative to the current color range
- * @param  {Number}        [alpha]
- *
- * @example
- * // Grayscale integer value
- * strokeWeight(4);
- * stroke(51);
- * rect(20, 20, 60, 60);
- *
- * // R, G & B integer values
- * stroke(255, 204, 0);
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- *
- * // H, S & B integer values
- * colorMode(HSB);
- * strokeWeight(4);
- * stroke(255, 204, 100);
- * rect(20, 20, 60, 60);
- *
- * // Named SVG/CSS color string
- * stroke('red');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- *
- * // three-digit hexadecimal RGB notation
- * stroke('#fae');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- *
- * // six-digit hexadecimal RGB notation
- * stroke('#222222');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- *
- * // integer RGB notation
- * stroke('rgb(0,255,0)');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- *
- * // integer RGBA notation
- * stroke('rgba(0,255,0,0.25)');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- *
- * // percentage RGB notation
- * stroke('rgb(100%,0%,10%)');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- *
- * // percentage RGBA notation
- * stroke('rgba(100%,0%,100%,0.5)');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- *
- * // p5 Color object
- * stroke(color(0, 0, 255));
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- */
-
-/**
- * @method stroke
- * @param  {String}        value   a color string
- */
-
-/**
- * @method stroke
- * @param  {Number}        gray   a gray value
- * @param  {Number}        [alpha]
- */
-
-/**
- * @method stroke
- * @param  {Number[]}      values  an array containing the red,green,blue &
- *                                 and alpha components of the color
- */
-
-/**
- * @method stroke
- * @param  {Color}      color   the stroke color
- */
-exports.stroke = function () {
-	if (arguments[0] instanceof p5Color) {
-		_currentEnv._stroke = arguments[0].toAllegro()
-	} else {
-		_currentEnv._stroke = new p5Color(arguments).toAllegro();
-	}
-};
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_p5env.js.html b/doc/html/jsboot_p5env.js.html deleted file mode 100644 index 58d77d9f..00000000 --- a/doc/html/jsboot_p5env.js.html +++ /dev/null @@ -1,428 +0,0 @@ - - - - - - - Source: jsboot/p5env.js | Source: jsboot/p5env.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-	This file was derived from the p5.js source code at
-	https://github.com/processing/p5.js
-
-	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>
-
-    This library is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Lesser General Public
-    License as published by the Free Software Foundation; either
-    version 2.1 of the License, or (at your option) any later version.
-
-    This library is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-    Lesser General Public License for more details.
-
-    You should have received a copy of the GNU Lesser General Public
-    License along with this library; if not, write to the Free Software
-    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-/**
-* @module p5compat
-*/
-
-/**
- * The print() function writes to the logfile.
- * This function is often helpful for looking at the data a program is
- * producing. This function creates a new line of text for each call to
- * the function. Individual elements can be
- * separated with quotes ("") and joined with the addition operator (+).
- *
- * @method print
- * @param {Any} contents any combination of Number, String, Object, Boolean,
- *                       Array to print
- * @example
- * let x = 10;
- * print('The value of x is ' + x);
- * // prints "The value of x is 10"
- */
-exports.print = function (s) {
-	Print(s);
-};
-
-/**
- * The println() function writes to the logfile.
- * This function is often helpful for looking at the data a program is
- * producing. This function creates a new line of text for each call to
- * the function. Individual elements can be
- * separated with quotes ("") and joined with the addition operator (+).
- *
- * @method print
- * @param {Any} contents any combination of Number, String, Object, Boolean,
- *                       Array to print
- * @example
- * let x = 10;
- * print('The value of x is ' + x);
- * // prints "The value of x is 10"
- */
-exports.println = function (s) {
-	Println(s);
-};
-
-/**
- * The system variable frameCount contains the number of frames that have
- * been displayed since the program started. Inside setup() the value is 0,
- * after the first iteration of draw it is 1, etc.
- *
- * @property {Integer} frameCount
- * @readOnly
- * @example
- * function setup() {
- *   frameRate(30);
- *   textSize(30);
- *   textAlign(CENTER);
- * }
- *
- * function draw() {
- *   background(200);
- *   text(frameCount, width / 2, height / 2);
- * }
- */
-exports.frameCount = 0;
-
-/**
- * Confirms if the window a p5.js program is in is "focused," meaning that
- * the sketch will accept mouse or keyboard input. This variable is
- * "true" if the window is focused and "false" if not.
- *
- * @property {Boolean} focused
- * @readOnly
- * @example
- * // To demonstrate, put two windows side by side.
- * // Click on the window that the p5 sketch isn't in!
- * function draw() {
- *   background(200);
- *   noStroke();
- *   fill(0, 200, 0);
- *   ellipse(25, 25, 50, 50);
- *
- *   if (!focused) {
- *     // or "if (focused === false)"
- *     stroke(200, 0, 0);
- *     line(0, 0, 100, 100);
- *     line(100, 0, 0, 100);
- *   }
- * }
- */
-exports.focused = true;
-
-/**
- * Specifies the number of frames to be displayed every second. For example,
- * the function call frameRate(30) will attempt to refresh 30 times a second.
- * If the processor is not fast enough to maintain the specified rate, the
- * frame rate will not be achieved. Setting the frame rate within setup() is
- * recommended. The default frame rate is based on the frame rate of the display
- * (here also called "refresh rate"), which is set to 60 frames per second on most
- * computers. A frame rate of 24 frames per second (usual for movies) or above
- * will be enough for smooth animations
- * This is the same as setFrameRate(val).
- * <br><br>
- * Calling frameRate() with no arguments returns the current framerate. The
- * draw function must run at least once before it will return a value. This
- * is the same as getFrameRate().
- * <br><br>
- * Calling frameRate() with arguments that are not of the type numbers
- * or are non positive also returns current framerate.
- *
- * @method frameRate
- * @param  {Number} fps number of frames to be displayed every second
- * @example
- *
- * let rectX = 0;
- * let fr = 30; //starting FPS
- * let clr;
- *
- * function setup() {
- *   background(200);
- *   frameRate(fr); // Attempt to refresh at starting FPS
- *   clr = color(255, 0, 0);
- * }
- *
- * function draw() {
- *   background(200);
- *   rectX = rectX += 1; // Move Rectangle
- *
- *   if (rectX >= width) {
- *     // If you go off screen.
- *     if (fr === 30) {
- *       clr = color(0, 0, 255);
- *       fr = 10;
- *       frameRate(fr); // make frameRate 10 FPS
- *     } else {
- *       clr = color(255, 0, 0);
- *       fr = 30;
- *       frameRate(fr); // make frameRate 30 FPS
- *     }
- *     rectX = 0;
- *   }
- *   fill(clr);
- *   rect(rectX, 40, 20, 20);
- * }
- */
-exports.frameRate = function (r) {
-	SetFramerate(r);
-};
-
-/**
- * Returns the current framerate.
- *
- * @method getFrameRate
- * @return {Number} current frameRate
- */
-exports.getFrameRate = function () {
-	return GetFramerate();
-};
-
-/**
- * System variable that stores the width of the screen display according to The
- * default pixelDensity. This is used to run a
- * full-screen program on any display size. To return actual screen size,
- * multiply this by pixelDensity.
- *
- * @property {Number} displayWidth
- * @readOnly
- * @example
- * createCanvas(displayWidth, displayHeight);
- */
-exports.displayWidth = 0;
-
-/**
- * System variable that stores the height of the screen display according to The
- * default pixelDensity. This is used to run a
- * full-screen program on any display size. To return actual screen size,
- * multiply this by pixelDensity.
- *
- * @property {Number} displayHeight
- * @readOnly
- * @example
- * createCanvas(displayWidth, displayHeight);
- */
-exports.displayHeight = 0;
-
-/**
- * System variable that stores the width of the inner window.
- *
- * @property {Number} windowWidth
- * @readOnly
- * @example
- * createCanvas(windowWidth, windowHeight);
- */
-exports.windowWidth = 0;
-
-/**
- * System variable that stores the height of the inner window.
- *
- * @property {Number} windowHeight
- * @readOnly
- * @example
- * createCanvas(windowWidth, windowHeight);
- */
-exports.windowHeight = 0;
-
-/**
- * System variable that stores the width of the drawing canvas.
- *
- * @property {Number} width
- * @readOnly
- */
-exports.width = 0;
-
-/**
- * System variable that stores the height of the drawing canvas.
- *
- * @property {Number} height
- * @readOnly
- */
-exports.height = 0;
-
-/**
- * If argument is given, sets the sketch to fullscreen or not based on the
- * value of the argument. If no argument is given, returns the current
- * fullscreen state. Note that due to browser restrictions this can only
- * be called on user input, for example, on mouse press like the example
- * below.
- *
- * @method fullscreen
- * @param  {Boolean} [val] whether the sketch should be in fullscreen mode
- * or not
- * @return {Boolean} current fullscreen state
- * @example
- * // Clicking in the box toggles fullscreen on and off.
- * function setup() {
- *   background(200);
- * }
- * function mousePressed() {
- *   if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
- *     let fs = fullscreen();
- *     fullscreen(!fs);
- *   }
- * }
- */
-exports.fullScreen = function () {
-	return true;
-};
-
-/**
- * Sets the pixel scaling for high pixel density displays. By default
- * pixel density is set to match display density, call pixelDensity(1)
- * to turn this off. Calling pixelDensity() with no arguments returns
- * the current pixel density of the sketch.
- *
- * @method pixelDensity
- * @param  {Number} val whether or how much the sketch should scale
- * @example
- * function setup() {
- *   pixelDensity(1);
- *   createCanvas(100, 100);
- *   background(200);
- *   ellipse(width / 2, height / 2, 50, 50);
- * }
- * 
- * function setup() {
- *   pixelDensity(3.0);
- *   createCanvas(100, 100);
- *   background(200);
- *   ellipse(width / 2, height / 2, 50, 50);
- * }
- */
-exports.pixelDensity = function () {
-	return 1;
-};
-
-/**
- * Gets the current URL.
- * @method getURL
- * @return {String} url
- * @example
- * let url;
- * let x = 100;
- *
- * function setup() {
- *   fill(0);
- *   noStroke();
- *   url = getURL();
- * }
- *
- * function draw() {
- *   background(200);
- *   text(url, x, height / 2);
- *   x--;
- * }
- */
-exports.getURL = function () {
-	return "";
-};
-
-/**
- * Gets the current URL path as an array.
- * @method getURLPath
- * @return {String[]} path components
- * @example
- * function setup() {
- *   let urlPath = getURLPath();
- *   for (let i = 0; i < urlPath.length; i++) {
- *     text(urlPath[i], 10, i * 20 + 20);
- *   }
- * }
- */
-exports.getURLPath = function () {
-	return "";
-};
-
-/**
- * Gets the current URL params as an Object.
- * @method getURLParams
- * @return {Object} URL params
- * @example
- * // Example: http://p5js.org?year=2014&month=May&day=15
- *
- * function setup() {
- *   let params = getURLParams();
- *   text(params.day, 10, 20);
- *   text(params.month, 10, 40);
- *   text(params.year, 10, 60);
- * }
- */
-exports.getURLParams = function () {
-	return "";
-};
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_p5input.js.html b/doc/html/jsboot_p5input.js.html deleted file mode 100644 index f36ca317..00000000 --- a/doc/html/jsboot_p5input.js.html +++ /dev/null @@ -1,699 +0,0 @@ - - - - - - - Source: jsboot/p5input.js | Source: jsboot/p5input.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-	This file was derived from the p5.js source code at
-	https://github.com/processing/p5.js
-
-	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>
-
-    This library is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Lesser General Public
-    License as published by the Free Software Foundation; either
-    version 2.1 of the License, or (at your option) any later version.
-
-    This library is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-    Lesser General Public License for more details.
-
-    You should have received a copy of the GNU Lesser General Public
-    License along with this library; if not, write to the Free Software
-    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-/**
-* @module p5compat
-*/
-
-/**********************************************************************************************************************
- * mouse
- */
-/*
- * This is a flag which is false until the first time
- * we receive a mouse event. The pmouseX and pmouseY
- * values will match the mouseX and mouseY values until
- * this interaction takes place.
- */
-exports._hasMouseInteracted = false;
-
-/**
- * The system variable mouseX always contains the current horizontal
- * position of the mouse, relative to (0, 0) of the canvas. If touch is
- * used instead of mouse input, mouseX will hold the x value of the most
- * recent touch point.
- *
- * @property {Number} mouseX
- * @readOnly
- *
- * @example
- * // Move the mouse across the canvas
- * function draw() {
- *   background(244, 248, 252);
- *   line(mouseX, 0, mouseX, 100);
- * }
- */
-exports.mouseX = 0;
-
-/**
- * The system variable mouseY always contains the current vertical position
- * of the mouse, relative to (0, 0) of the canvas. If touch is
- * used instead of mouse input, mouseY will hold the y value of the most
- * recent touch point.
- *
- * @property {Number} mouseY
- * @readOnly
- *
- * @example
- * // Move the mouse across the canvas
- * function draw() {
- *   background(244, 248, 252);
- *   line(0, mouseY, 100, mouseY);
- * }
- */
-exports.mouseY = 0;
-
-/**
- * The system variable pmouseX always contains the horizontal position of
- * the mouse or finger in the frame previous to the current frame, relative to
- * (0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX
- * value at the start of each touch event.
- *
- * @property {Number} pmouseX
- * @readOnly
- *
- * @example
- * // Move the mouse across the canvas to leave a trail
- * function setup() {
- *   //slow down the frameRate to make it more visible
- *   frameRate(10);
- * }
- *
- * function draw() {
- *   background(244, 248, 252);
- *   line(mouseX, mouseY, pmouseX, pmouseY);
- *   print(pmouseX + ' -> ' + mouseX);
- * }
- */
-exports.pmouseX = 0;
-
-/**
- * The system variable pmouseY always contains the vertical position of the
- * mouse or finger in the frame previous to the current frame, relative to
- * (0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY
- * value at the start of each touch event.
- *
- * @property {Number} pmouseY
- * @readOnly
- *
- * @example
- * function draw() {
- *   background(237, 34, 93);
- *   fill(0);
- *   //draw a square only if the mouse is not moving
- *   if (mouseY === pmouseY && mouseX === pmouseX) {
- *     rect(20, 20, 60, 60);
- *   }
- *
- *   print(pmouseY + ' -> ' + mouseY);
- * }
- */
-exports.pmouseY = 0;
-
-/**
- * The system variable winMouseX always contains the current horizontal
- * position of the mouse, relative to (0, 0) of the window.
- *
- * @property {Number} winMouseX
- * @readOnly
- *
- * @example
- * let myCanvas;
- *
- * function setup() {
- *   //use a variable to store a pointer to the canvas
- *   myCanvas = createCanvas(100, 100);
- *   const body = document.getElementsByTagName('body')[0];
- *   myCanvas.parent(body);
- * }
- *
- * function draw() {
- *   background(237, 34, 93);
- *   fill(0);
- *
- *   //move the canvas to the horizontal mouse position
- *   //relative to the window
- *   myCanvas.position(winMouseX + 1, windowHeight / 2);
- *
- *   //the y of the square is relative to the canvas
- *   rect(20, mouseY, 60, 60);
- * }
- */
-exports.winMouseX = 0;
-
-/**
- * The system variable winMouseY always contains the current vertical
- * position of the mouse, relative to (0, 0) of the window.
- *
- * @property {Number} winMouseY
- * @readOnly
- *
- * @example
- * let myCanvas;
- *
- * function setup() {
- *   //use a variable to store a pointer to the canvas
- *   myCanvas = createCanvas(100, 100);
- *   const body = document.getElementsByTagName('body')[0];
- *   myCanvas.parent(body);
- * }
- *
- * function draw() {
- *   background(237, 34, 93);
- *   fill(0);
- *
- *   //move the canvas to the vertical mouse position
- *   //relative to the window
- *   myCanvas.position(windowWidth / 2, winMouseY + 1);
- *
- *   //the x of the square is relative to the canvas
- *   rect(mouseX, 20, 60, 60);
- * }
- */
-exports.winMouseY = 0;
-
-/**
- * The system variable pwinMouseX always contains the horizontal position
- * of the mouse in the frame previous to the current frame, relative to
- * (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX
- * value at the start of each touch event.
- *
- * @property {Number} pwinMouseX
- * @readOnly
- *
- * @example
- * let myCanvas;
- *
- * function setup() {
- *   //use a variable to store a pointer to the canvas
- *   myCanvas = createCanvas(100, 100);
- *   noStroke();
- *   fill(237, 34, 93);
- * }
- *
- * function draw() {
- *   clear();
- *   //the difference between previous and
- *   //current x position is the horizontal mouse speed
- *   let speed = abs(winMouseX - pwinMouseX);
- *   //change the size of the circle
- *   //according to the horizontal speed
- *   ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
- *   //move the canvas to the mouse position
- *   myCanvas.position(winMouseX + 1, winMouseY + 1);
- * }
- */
-exports.pwinMouseX = 0;
-
-/**
- * The system variable pwinMouseY always contains the vertical position of
- * the mouse in the frame previous to the current frame, relative to (0, 0)
- * of the window. Note: pwinMouseY will be reset to the current winMouseY
- * value at the start of each touch event.
- *
- * @property {Number} pwinMouseY
- * @readOnly
- *
- *
- * @example
- * let myCanvas;
- *
- * function setup() {
- *   //use a variable to store a pointer to the canvas
- *   myCanvas = createCanvas(100, 100);
- *   noStroke();
- *   fill(237, 34, 93);
- * }
- *
- * function draw() {
- *   clear();
- *   //the difference between previous and
- *   //current y position is the vertical mouse speed
- *   let speed = abs(winMouseY - pwinMouseY);
- *   //change the size of the circle
- *   //according to the vertical speed
- *   ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
- *   //move the canvas to the mouse position
- *   myCanvas.position(winMouseX + 1, winMouseY + 1);
- * }
- */
-exports.pwinMouseY = 0;
-
-/**
- * Processing automatically tracks if the mouse button is pressed and which
- * button is pressed. The value of the system variable mouseButton is either
- * LEFT, RIGHT, or CENTER depending on which button was pressed last.
- * Warning: different browsers may track mouseButton differently.
- *
- * @property {Constant} mouseButton
- * @readOnly
- *
- * @example
- * function draw() {
- *   background(237, 34, 93);
- *   fill(0);
- *
- *   if (mouseIsPressed) {
- *     if (mouseButton === LEFT) {
- *       ellipse(50, 50, 50, 50);
- *     }
- *     if (mouseButton === RIGHT) {
- *       rect(25, 25, 50, 50);
- *     }
- *     if (mouseButton === CENTER) {
- *       triangle(23, 75, 50, 20, 78, 75);
- *     }
- *   }
- *
- *   print(mouseButton);
- * }
- */
-exports.mouseButton = 0;
-
-/**
- * The boolean system variable mouseIsPressed is true if the mouse is pressed
- * and false if not.
- *
- * @property {Boolean} mouseIsPressed
- * @readOnly
- *
- * @example
- * function draw() {
- *   background(237, 34, 93);
- *   fill(0);
- *
- *   if (mouseIsPressed) {
- *     ellipse(50, 50, 50, 50);
- *   } else {
- *     rect(25, 25, 50, 50);
- *   }
- *
- *   print(mouseIsPressed);
- * }
- */
-exports.mouseIsPressed = false;
-
-/**
- * The >mouseMoved() function is called every time the mouse moves and a mouse
- * button is not pressed.<br><br>
- * Browsers may have different default
- * behaviors attached to various mouse events. To prevent any default
- * behavior for this event, add "return false" to the end of the method.
- *
- * @method mouseMoved
- * @param  {Object} [event] optional MouseEvent callback argument.
- * @example
- * // Move the mouse across the page
- * // to change its value
- *
- * let value = 0;
- * function draw() {
- *   fill(value);
- *   rect(25, 25, 50, 50);
- * }
- * function mouseMoved() {
- *   value = value + 5;
- *   if (value > 255) {
- *     value = 0;
- *   }
- * }
- *
- * function mouseMoved() {
- *   ellipse(mouseX, mouseY, 5, 5);
- *   // prevent default
- *   return false;
- * }
- *
- * // returns a MouseEvent object
- * // as a callback argument
- * function mouseMoved(event) {
- *   console.log(event);
- * }
- */
-
-/**
- * The mousePressed() function is called once after every time a mouse button
- * is pressed. The mouseButton variable (see the related reference entry)
- * can be used to determine which button has been pressed.<br><br>
- * Browsers may have different default
- * behaviors attached to various mouse events. To prevent any default
- * behavior for this event, add "return false" to the end of the method.
- *
- * @method mousePressed
- * @param  {Object} [event] optional MouseEvent callback argument.
- * @example
- * // Click within the image to change
- * // the value of the rectangle
- *
- * let value = 0;
- * function draw() {
- *   fill(value);
- *   rect(25, 25, 50, 50);
- * }
- * function mousePressed() {
- *   if (value === 0) {
- *     value = 255;
- *   } else {
- *     value = 0;
- *   }
- * }
- *
- * function mousePressed() {
- *   ellipse(mouseX, mouseY, 5, 5);
- *   // prevent default
- *   return false;
- * }
- *
- * // returns a MouseEvent object
- * // as a callback argument
- * function mousePressed(event) {
- *   console.log(event);
- * }
- */
-
-/**
-* The mouseReleased() function is called every time a mouse button is
-* released. <br><br>
-* Browsers may have different default
-* behaviors attached to various mouse events. To prevent any default
-* behavior for this event, add "return false" to the end of the method.
-*
-*
-* @method mouseReleased
-* @param  {Object} [event] optional MouseEvent callback argument.
-* @example
-* // Click within the image to change
-* // the value of the rectangle
-* // after the mouse has been clicked
-*
-* let value = 0;
-* function draw() {
-*   fill(value);
-*   rect(25, 25, 50, 50);
-* }
-* function mouseReleased() {
-*   if (value === 0) {
-*     value = 255;
-*   } else {
-*     value = 0;
-*   }
-* }
-*
-* function mouseReleased() {
-*   ellipse(mouseX, mouseY, 5, 5);
-*   // prevent default
-*   return false;
-* }
-*
-* // returns a MouseEvent object
-* // as a callback argument
-* function mouseReleased(event) {
-*   console.log(event);
-* }
-*/
-
-/**
- * The mouseClicked() function is called once after a mouse button has been
- * pressed and then released.<br><br>
- * Browsers handle clicks differently, so this function is only guaranteed to be
- * run when the left mouse button is clicked. To handle other mouse buttons
- * being pressed or released, see mousePressed() or mouseReleased().<br><br>
- * Browsers may have different default
- * behaviors attached to various mouse events. To prevent any default
- * behavior for this event, add "return false" to the end of the method.
- *
- * @method mouseClicked
- * @param  {Object} [event] optional MouseEvent callback argument.
- * @example
- * // Click within the image to change
- * // the value of the rectangle
- * // after the mouse has been clicked
- *
- * let value = 0;
- * function draw() {
- *   fill(value);
- *   rect(25, 25, 50, 50);
- * }
- *
- * function mouseClicked() {
- *   if (value === 0) {
- *     value = 255;
- *   } else {
- *     value = 0;
- *   }
- * }
- *
- * function mouseClicked() {
- *   ellipse(mouseX, mouseY, 5, 5);
- *   // prevent default
- *   return false;
- * }
- *
- * // returns a MouseEvent object
- * // as a callback argument
- * function mouseClicked(event) {
- *   console.log(event);
- * }
- */
-
-/**********************************************************************************************************************
- * keyboard
- */
-
-/**
- * The boolean system variable keyIsPressed is true if any key is pressed
- * and false if no keys are pressed.
- *
- * @property {Boolean} keyIsPressed
- * @readOnly
- * @example
- * function draw() {
- *   if (keyIsPressed === true) {
- *     fill(0);
- *   } else {
- *     fill(255);
- *   }
- *   rect(25, 25, 50, 50);
- * }
- */
-exports.keyIsPressed = false;
-
-/**
- * The system variable key always contains the value of the most recent
- * key on the keyboard that was typed.
- *
- * @property {String} key
- * @readOnly
- * @example
- * // Click any key to display it!
- * // (Not Guaranteed to be Case Sensitive)
- * function setup() {
- *   fill(245, 123, 158);
- *   textSize(50);
- * }
- *
- * function draw() {
- *   background(200);
- *   text(key, 33, 65); // Display last key pressed.
- * }
- */
-exports.key = null;
-
-/**
- * The variable keyCode is used to detect special keys such as BACKSPACE,
- * DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,
- * DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.
- *
- * @property {Integer} keyCode
- * @readOnly
- * @example
- * let fillVal = 126;
- * function draw() {
- *   fill(fillVal);
- *   rect(25, 25, 50, 50);
- * }
- *
- * function keyPressed() {
- *   if (keyCode === UP_ARROW) {
- *     fillVal = 255;
- *   } else if (keyCode === DOWN_ARROW) {
- *     fillVal = 0;
- *   }
- *   return false; // prevent default
- * }
- */
-exports.keyCode = null;
-
-/**
- * The keyPressed() function is called once every time a key is pressed. The
- * keyCode for the key that was pressed is stored in the keyCode variable.
- * <br><br>
- *
- * @method keyPressed
- * @example
- * let value = 0;
- * function draw() {
- *   fill(value);
- *   rect(25, 25, 50, 50);
- * }
- * function keyPressed() {
- *   if (value === 0) {
- *     value = 255;
- *   } else {
- *     value = 0;
- *   }
- * }
- *
- * let value = 0;
- * function draw() {
- *   fill(value);
- *   rect(25, 25, 50, 50);
- * }
- * function keyPressed() {
- *   if (keyCode === LEFT_ARROW) {
- *     value = 255;
- *   } else if (keyCode === RIGHT_ARROW) {
- *     value = 0;
- *   }
- * }
- */
-
-/**
-* The keyReleased() function is called once every time a key is released.
-* See key and keyCode for more information.<br><br>
-* Browsers may have different default
-* behaviors attached to various key events. To prevent any default
-* behavior for this event, add "return false" to the end of the method.
-*
-* @method keyReleased
-* @example
-* let value = 0;
-* function draw() {
-*   fill(value);
-*   rect(25, 25, 50, 50);
-* }
-* function keyReleased() {
-*   if (value === 0) {
-*     value = 255;
-*   } else {
-*     value = 0;
-*   }
-*   return false; // prevent any default behavior
-* }
-*/
-
-/**
- * The keyTyped() function is called once every time a key is pressed, but
- * action keys such as Ctrl, Shift, and Alt are ignored. The most recent
- * key pressed will be stored in the key variable.
- * <br><br>
- * Because of how operating systems handle key repeats, holding down a key
- * will cause multiple calls to keyTyped() (and keyReleased() as well). The
- * rate of repeat is set by the operating system and how each computer is
- * configured.<br><br>
- * Browsers may have different default behaviors attached to various key
- * events. To prevent any default behavior for this event, add "return false"
- * to the end of the method.
- *
- * @method keyTyped
- * @example
- * let value = 0;
- * function draw() {
- *   fill(value);
- *   rect(25, 25, 50, 50);
- * }
- * function keyTyped() {
- *   if (key === 'a') {
- *     value = 255;
- *   } else if (key === 'b') {
- *     value = 0;
- *   }
- *   // uncomment to prevent any default behavior
- *   // return false;
- * }
- */
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_p5math.js.html b/doc/html/jsboot_p5math.js.html deleted file mode 100644 index 5154b58f..00000000 --- a/doc/html/jsboot_p5math.js.html +++ /dev/null @@ -1,1571 +0,0 @@ - - - - - - - Source: jsboot/p5math.js | Source: jsboot/p5math.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-	This file was derived from the p5.js source code at
-	https://github.com/processing/p5.js
-
-	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>
-
-    This library is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Lesser General Public
-    License as published by the Free Software Foundation; either
-    version 2.1 of the License, or (at your option) any later version.
-
-    This library is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-    Lesser General Public License for more details.
-
-    You should have received a copy of the GNU Lesser General Public
-    License along with this library; if not, write to the Free Software
-    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-/**
-* @module p5compat
-*/
-
-/**
- * Creates a new PVector (the datatype for storing vectors). This provides a
- * two or three dimensional vector, specifically a Euclidean (also known as
- * geometric) vector. A vector is an entity that has both magnitude and
- * direction.
- *
- * @method createVector
- * @param {Number} [x] x component of the vector
- * @param {Number} [y] y component of the vector
- * @param {Number} [z] z component of the vector
- * @return {p5.Vector}
- * @example
- * function setup() {
- *   createCanvas(100, 100, WEBGL);
- *   noStroke();
- *   fill(255, 102, 204);
- * }
- *
- * function draw() {
- *   background(255);
- *   pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
- *   scale(0.75);
- *   sphere();
- * }
- */
-exports.createVector = function (x, y, z) {
-	return new PVector(x, y, z);
-};
-
-/**********************************************************************************************************************
- * Calculations
- */
-
-/**
- * Calculates the absolute value (magnitude) of a number. Maps to Math.abs().
- * The absolute value of a number is always positive.
- *
- * @method abs
- * @param  {Number} n number to compute
- * @return {Number}   absolute value of given number
- * @example
- * function setup() {
- *   let x = -3;
- *   let y = abs(x);
- *
- *   print(x); // -3
- *   print(y); // 3
- * }
- */
-exports.abs = Math.abs;
-
-/**
- * Calculates the closest int value that is greater than or equal to the
- * value of the parameter. Maps to Math.ceil(). For example, ceil(9.03)
- * returns the value 10.
- *
- * @method ceil
- * @param  {Number} n number to round up
- * @return {Integer}   rounded up number
- * @example
- * function draw() {
- *   background(200);
- *   // map, mouseX between 0 and 5.
- *   let ax = map(mouseX, 0, 100, 0, 5);
- *   let ay = 66;
- *
- *   //Get the ceiling of the mapped number.
- *   let bx = ceil(map(mouseX, 0, 100, 0, 5));
- *   let by = 33;
- *
- *   // Multiply the mapped numbers by 20 to more easily
- *   // see the changes.
- *   stroke(0);
- *   fill(0);
- *   line(0, ay, ax * 20, ay);
- *   line(0, by, bx * 20, by);
- *
- *   // Reformat the float returned by map and draw it.
- *   noStroke();
- *   text(nfc(ax, 2), ax, ay - 5);
- *   text(nfc(bx, 1), bx, by - 5);
- * }
- */
-exports.ceil = Math.ceil;
-
-/**
- * Constrains a value between a minimum and maximum value.
- *
- * @method constrain
- * @param  {Number} n    number to constrain
- * @param  {Number} low  minimum limit
- * @param  {Number} high maximum limit
- * @return {Number}      constrained number
- * @example
- * function draw() {
- *   background(200);
- *
- *   let leftWall = 25;
- *   let rightWall = 75;
- *
- *   // xm is just the mouseX, while
- *   // xc is the mouseX, but constrained
- *   // between the leftWall and rightWall!
- *   let xm = mouseX;
- *   let xc = constrain(mouseX, leftWall, rightWall);
- *
- *   // Draw the walls.
- *   stroke(150);
- *   line(leftWall, 0, leftWall, height);
- *   line(rightWall, 0, rightWall, height);
- *
- *   // Draw xm and xc as circles.
- *   noStroke();
- *   fill(150);
- *   ellipse(xm, 33, 9, 9); // Not Constrained
- *   fill(0);
- *   ellipse(xc, 66, 9, 9); // Constrained
- * }
- */
-exports.constrain = function (n, low, high) {
-	return Math.max(Math.min(n, high), low);
-};
-
-/**
- * Calculates the distance between two points.
- *
- * @method dist
- * @param  {Number} x1 x-coordinate of the first point
- * @param  {Number} y1 y-coordinate of the first point
- * @param  {Number} x2 x-coordinate of the second point
- * @param  {Number} y2 y-coordinate of the second point
- * @return {Number}    distance between the two points
- *
- * @example
- * // Move your mouse inside the canvas to see the
- * // change in distance between two points!
- * function draw() {
- *   background(200);
- *   fill(0);
- *
- *   let x1 = 10;
- *   let y1 = 90;
- *   let x2 = mouseX;
- *   let y2 = mouseY;
- *
- *   line(x1, y1, x2, y2);
- *   ellipse(x1, y1, 7, 7);
- *   ellipse(x2, y2, 7, 7);
- *
- *   // d is the length of the line
- *   // the distance from point 1 to point 2.
- *   let d = int(dist(x1, y1, x2, y2));
- *
- *   // Let's write d along the line we are drawing!
- *   push();
- *   translate((x1 + x2) / 2, (y1 + y2) / 2);
- *   rotate(atan2(y2 - y1, x2 - x1));
- *   text(nfc(d, 1), 0, -5);
- *   pop();
- *   // Fancy!
- * }
- */
-exports.dist = function () {
-	if (arguments.length === 4) {
-		//2D
-		return hypot(arguments[2] - arguments[0], arguments[3] - arguments[1]);
-	} else if (arguments.length === 6) {
-		//3D
-		return hypot(
-			arguments[3] - arguments[0],
-			arguments[4] - arguments[1],
-			arguments[5] - arguments[2]
-		);
-	}
-};
-
-/**
- * Returns Euler's number e (2.71828...) raised to the power of the n
- * parameter. Maps to Math.exp().
- *
- * @method exp
- * @param  {Number} n exponent to raise
- * @return {Number}   e^n
- * @example
- * function draw() {
- *   background(200);
- *
- *   // Compute the exp() function with a value between 0 and 2
- *   let xValue = map(mouseX, 0, width, 0, 2);
- *   let yValue = exp(xValue);
- *
- *   let y = map(yValue, 0, 8, height, 0);
- *
- *   let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
- *   stroke(150);
- *   line(mouseX, y, mouseX, height);
- *   fill(0);
- *   text(legend, 5, 15);
- *   noStroke();
- *   ellipse(mouseX, y, 7, 7);
- *
- *   // Draw the exp(x) curve,
- *   // over the domain of x from 0 to 2
- *   noFill();
- *   stroke(0);
- *   beginShape();
- *   for (let x = 0; x < width; x++) {
- *     xValue = map(x, 0, width, 0, 2);
- *     yValue = exp(xValue);
- *     y = map(yValue, 0, 8, height, 0);
- *     vertex(x, y);
- *   }
- *
- *   endShape();
- *   line(0, 0, 0, height);
- *   line(0, height - 1, width, height - 1);
- * }
- */
-exports.exp = Math.exp;
-
-/**
- * Calculates the closest int value that is less than or equal to the
- * value of the parameter. Maps to Math.floor().
- *
- * @method floor
- * @param  {Number} n number to round down
- * @return {Integer}  rounded down number
- * @example
- * function draw() {
- *   background(200);
- *   //map, mouseX between 0 and 5.
- *   let ax = map(mouseX, 0, 100, 0, 5);
- *   let ay = 66;
- *
- *   //Get the floor of the mapped number.
- *   let bx = floor(map(mouseX, 0, 100, 0, 5));
- *   let by = 33;
- *
- *   // Multiply the mapped numbers by 20 to more easily
- *   // see the changes.
- *   stroke(0);
- *   fill(0);
- *   line(0, ay, ax * 20, ay);
- *   line(0, by, bx * 20, by);
- *
- *   // Reformat the float returned by map and draw it.
- *   noStroke();
- *   text(nfc(ax, 2), ax, ay - 5);
- *   text(nfc(bx, 1), bx, by - 5);
- * }
- */
-exports.floor = Math.floor;
-
-/**
- * Calculates a number between two numbers at a specific increment. The amt
- * parameter is the amount to interpolate between the two values where 0.0
- * equal to the first point, 0.1 is very near the first point, 0.5 is
- * half-way in between, and 1.0 is equal to the second point. If the
- * value of amt is more than 1.0 or less than 0.0, the number will be
- * calculated accordingly in the ratio of the two given numbers. The lerp
- * function is convenient for creating motion along a straight
- * path and for drawing dotted lines.
- *
- * @method lerp
- * @param  {Number} start first value
- * @param  {Number} stop  second value
- * @param  {Number} amt   number
- * @return {Number}       lerped value
- * @example
- * function setup() {
- *   background(200);
- *   let a = 20;
- *   let b = 80;
- *   let c = lerp(a, b, 0.2);
- *   let d = lerp(a, b, 0.5);
- *   let e = lerp(a, b, 0.8);
- *
- *   let y = 50;
- *
- *   strokeWeight(5);
- *   stroke(0); // Draw the original points in black
- *   point(a, y);
- *   point(b, y);
- *
- *   stroke(100); // Draw the lerp points in gray
- *   point(c, y);
- *   point(d, y);
- *   point(e, y);
- * }
- */
-exports.lerp = function (start, stop, amt) {
-	return amt * (stop - start) + start;
-};
-
-/**
- * Calculates the natural logarithm (the base-e logarithm) of a number. This
- * function expects the n parameter to be a value greater than 0.0. Maps to
- * Math.log().
- *
- * @method log
- * @param  {Number} n number greater than 0
- * @return {Number}   natural logarithm of n
- * @example
- * function draw() {
- *   background(200);
- *   let maxX = 2.8;
- *   let maxY = 1.5;
- *
- *   // Compute the natural log of a value between 0 and maxX
- *   let xValue = map(mouseX, 0, width, 0, maxX);
- *   let yValue, y;
- *   if (xValue > 0) {
- *   // Cannot take the log of a negative number.
- *     yValue = log(xValue);
- *     y = map(yValue, -maxY, maxY, height, 0);
- *
- *     // Display the calculation occurring.
- *     let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
- *     stroke(150);
- *     line(mouseX, y, mouseX, height);
- *     fill(0);
- *     text(legend, 5, 15);
- *     noStroke();
- *     ellipse(mouseX, y, 7, 7);
- *   }
- *
- *   // Draw the log(x) curve,
- *   // over the domain of x from 0 to maxX
- *   noFill();
- *   stroke(0);
- *   beginShape();
- *   for (let x = 0; x < width; x++) {
- *     xValue = map(x, 0, width, 0, maxX);
- *     yValue = log(xValue);
- *     y = map(yValue, -maxY, maxY, height, 0);
- *     vertex(x, y);
- *   }
- *   endShape();
- *   line(0, 0, 0, height);
- *   line(0, height / 2, width, height / 2);
- * }
- */
-exports.log = Math.log;
-
-/**
- * Calculates the magnitude (or length) of a vector. A vector is a direction
- * in space commonly used in computer graphics and linear algebra. Because it
- * has no "start" position, the magnitude of a vector can be thought of as
- * the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is
- * a shortcut for writing dist(0, 0, x, y).
- *
- * @method mag
- * @param  {Number} a first value
- * @param  {Number} b second value
- * @return {Number}   magnitude of vector from (0,0) to (a,b)
- * @example
- * function setup() {
- *   let x1 = 20;
- *   let x2 = 80;
- *   let y1 = 30;
- *   let y2 = 70;
- *
- *   line(0, 0, x1, y1);
- *   print(mag(x1, y1)); // Prints "36.05551275463989"
- *   line(0, 0, x2, y1);
- *   print(mag(x2, y1)); // Prints "85.44003745317531"
- *   line(0, 0, x1, y2);
- *   print(mag(x1, y2)); // Prints "72.80109889280519"
- *   line(0, 0, x2, y2);
- *   print(mag(x2, y2)); // Prints "106.3014581273465"
- * }
- */
-exports.mag = function (x, y) {
-	return hypot(x, y);
-};
-
-/**
- * Re-maps a number from one range to another.
- * <br><br>
- * In the first example above, the number 25 is converted from a value in the
- * range of 0 to 100 into a value that ranges from the left edge of the
- * window (0) to the right edge (width).
- *
- * @method map
- * @param  {Number} value  the incoming value to be converted
- * @param  {Number} start1 lower bound of the value's current range
- * @param  {Number} stop1  upper bound of the value's current range
- * @param  {Number} start2 lower bound of the value's target range
- * @param  {Number} stop2  upper bound of the value's target range
- * @param  {Boolean} [withinBounds] constrain the value to the newly mapped range
- * @return {Number}        remapped number
- * @example
- * let value = 25;
- * let m = map(value, 0, 100, 0, width);
- * ellipse(m, 50, 10, 10);
- *
- * function setup() {
- *   noStroke();
- * }
- *
- * function draw() {
- *   background(204);
- *   let x1 = map(mouseX, 0, width, 25, 75);
- *   ellipse(x1, 25, 25, 25);
- *   //This ellipse is constrained to the 0-100 range
- *   //after setting withinBounds to true
- *   let x2 = map(mouseX, 0, width, 0, 100, true);
- *   ellipse(x2, 75, 25, 25);
- * }
- */
-exports.map = function (n, start1, stop1, start2, stop2, withinBounds) {
-	var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
-	if (!withinBounds) {
-		return newval;
-	}
-	if (start2 < stop2) {
-		return this.constrain(newval, start2, stop2);
-	} else {
-		return this.constrain(newval, stop2, start2);
-	}
-};
-
-/**
- * Determines the largest value in a sequence of numbers, and then returns
- * that value. max() accepts any number of Number parameters, or an Array
- * of any length.
- *
- * @method max
- * @param  {Number} n0 Number to compare
- * @param  {Number} n1 Number to compare
- * @return {Number}             maximum Number
- * @example
- * function setup() {
- *   // Change the elements in the array and run the sketch
- *   // to show how max() works!
- *   let numArray = [2, 1, 5, 4, 8, 9];
- *   fill(0);
- *   noStroke();
- *   text('Array Elements', 0, 10);
- *   // Draw all numbers in the array
- *   let spacing = 15;
- *   let elemsY = 25;
- *   for (let i = 0; i < numArray.length; i++) {
- *     text(numArray[i], i * spacing, elemsY);
- *   }
- *   let maxX = 33;
- *   let maxY = 80;
- *   // Draw the Maximum value in the array.
- *   textSize(32);
- *   text(max(numArray), maxX, maxY);
- * }
- */
-exports.max = function () {
-	if (arguments[0] instanceof Array) {
-		return Math.max.apply(null, arguments[0]);
-	} else {
-		return Math.max.apply(null, arguments);
-	}
-};
-
-/**
- * Determines the smallest value in a sequence of numbers, and then returns
- * that value. min() accepts any number of Number parameters, or an Array
- * of any length.
- *
- * @method min
- * @param  {Number} n0 Number to compare
- * @param  {Number} n1 Number to compare
- * @return {Number}             minimum Number
- * @example
- * function setup() {
- *   // Change the elements in the array and run the sketch
- *   // to show how min() works!
- *   let numArray = [2, 1, 5, 4, 8, 9];
- *   fill(0);
- *   noStroke();
- *   text('Array Elements', 0, 10);
- *   // Draw all numbers in the array
- *   let spacing = 15;
- *   let elemsY = 25;
- *   for (let i = 0; i < numArray.length; i++) {
- *     text(numArray[i], i * spacing, elemsY);
- *   }
- *   let maxX = 33;
- *   let maxY = 80;
- *   // Draw the Minimum value in the array.
- *   textSize(32);
- *   text(min(numArray), maxX, maxY);
- * }
- */
-exports.min = function () {
-	if (arguments[0] instanceof Array) {
-		return Math.min.apply(null, arguments[0]);
-	} else {
-		return Math.min.apply(null, arguments);
-	}
-};
-
-/**
- * Normalizes a number from another range into a value between 0 and 1.
- * Identical to map(value, low, high, 0, 1).
- * Numbers outside of the range are not clamped to 0 and 1, because
- * out-of-range values are often intentional and useful. (See the second
- * example above.)
- *
- * @method norm
- * @param  {Number} value incoming value to be normalized
- * @param  {Number} start lower bound of the value's current range
- * @param  {Number} stop  upper bound of the value's current range
- * @return {Number}       normalized number
- * @example
- * function draw() {
- *   background(200);
- *   let currentNum = mouseX;
- *   let lowerBound = 0;
- *   let upperBound = width; //100;
- *   let normalized = norm(currentNum, lowerBound, upperBound);
- *   let lineY = 70;
- *   line(0, lineY, width, lineY);
- *   //Draw an ellipse mapped to the non-normalized value.
- *   noStroke();
- *   fill(50);
- *   let s = 7; // ellipse size
- *   ellipse(currentNum, lineY, s, s);
- *
- *   // Draw the guide
- *   let guideY = lineY + 15;
- *   text('0', 0, guideY);
- *   textAlign(RIGHT);
- *   text('100', width, guideY);
- *
- *   // Draw the normalized value
- *   textAlign(LEFT);
- *   fill(0);
- *   textSize(32);
- *   let normalY = 40;
- *   let normalX = 20;
- *   text(normalized, normalX, normalY);
- * }
- */
-exports.norm = function (n, start, stop) {
-	return this.map(n, start, stop, 0, 1);
-};
-
-/**
- * Facilitates exponential expressions. The pow() function is an efficient
- * way of multiplying numbers by themselves (or their reciprocals) in large
- * quantities. For example, pow(3, 5) is equivalent to the expression
- * 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to
- * Math.pow().
- *
- * @method pow
- * @param  {Number} n base of the exponential expression
- * @param  {Number} e power by which to raise the base
- * @return {Number}   n^e
- * @example
- * function setup() {
- *   //Exponentially increase the size of an ellipse.
- *   let eSize = 3; // Original Size
- *   let eLoc = 10; // Original Location
- *
- *   ellipse(eLoc, eLoc, eSize, eSize);
- *
- *   ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));
- *
- *   ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));
- *
- *   ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
- * }
- */
-exports.pow = Math.pow;
-
-/**
- * Calculates the integer closest to the n parameter. For example,
- * round(133.8) returns the value 134. Maps to Math.round().
- *
- * @method round
- * @param  {Number} n number to round
- * @return {Integer}  rounded number
- * @example
- * function draw() {
- *   background(200);
- *   //map, mouseX between 0 and 5.
- *   let ax = map(mouseX, 0, 100, 0, 5);
- *   let ay = 66;
- *
- *   // Round the mapped number.
- *   let bx = round(map(mouseX, 0, 100, 0, 5));
- *   let by = 33;
- *
- *   // Multiply the mapped numbers by 20 to more easily
- *   // see the changes.
- *   stroke(0);
- *   fill(0);
- *   line(0, ay, ax * 20, ay);
- *   line(0, by, bx * 20, by);
- *
- *   // Reformat the float returned by map and draw it.
- *   noStroke();
- *   text(nfc(ax, 2), ax, ay - 5);
- *   text(nfc(bx, 1), bx, by - 5);
- * }
- */
-exports.round = Math.round;
-
-/**
- * Squares a number (multiplies a number by itself). The result is always a
- * positive number, as multiplying two negative numbers always yields a
- * positive result. For example, -1 * -1 = 1.
- *
- * @method sq
- * @param  {Number} n number to square
- * @return {Number}   squared number
- * @example
- * function draw() {
- *   background(200);
- *   let eSize = 7;
- *   let x1 = map(mouseX, 0, width, 0, 10);
- *   let y1 = 80;
- *   let x2 = sq(x1);
- *   let y2 = 20;
- *
- *   // Draw the non-squared.
- *   line(0, y1, width, y1);
- *   ellipse(x1, y1, eSize, eSize);
- *
- *   // Draw the squared.
- *   line(0, y2, width, y2);
- *   ellipse(x2, y2, eSize, eSize);
- *
- *   // Draw dividing line.
- *   stroke(100);
- *   line(0, height / 2, width, height / 2);
- *
- *   // Draw text.
- *   let spacing = 15;
- *   noStroke();
- *   fill(0);
- *   text('x = ' + x1, 0, y1 + spacing);
- *   text('sq(x) = ' + x2, 0, y2 + spacing);
- * }
- */
-exports.sq = function (n) {
-	return n * n;
-};
-
-/**
- * Calculates the square root of a number. The square root of a number is
- * always positive, even though there may be a valid negative root. The
- * square root s of number a is such that s*s = a. It is the opposite of
- * squaring. Maps to Math.sqrt().
- *
- * @method sqrt
- * @param  {Number} n non-negative number to square root
- * @return {Number}   square root of number
- * @example
- * function draw() {
- *   background(200);
- *   let eSize = 7;
- *   let x1 = mouseX;
- *   let y1 = 80;
- *   let x2 = sqrt(x1);
- *   let y2 = 20;
- *
- *   // Draw the non-squared.
- *   line(0, y1, width, y1);
- *   ellipse(x1, y1, eSize, eSize);
- *
- *   // Draw the squared.
- *   line(0, y2, width, y2);
- *   ellipse(x2, y2, eSize, eSize);
- *
- *   // Draw dividing line.
- *   stroke(100);
- *   line(0, height / 2, width, height / 2);
- *
- *   // Draw text.
- *   noStroke();
- *   fill(0);
- *   let spacing = 15;
- *   text('x = ' + x1, 0, y1 + spacing);
- *   text('sqrt(x) = ' + x2, 0, y2 + spacing);
- * }
- */
-exports.sqrt = Math.sqrt;
-
-// Calculate the length of the hypotenuse of a right triangle
-// This won't under- or overflow in intermediate steps
-// https://en.wikipedia.org/wiki/Hypot
-function hypot(x, y, z) {
-	// Use the native implementation if it's available
-	if (typeof Math.hypot === 'function') {
-		return Math.hypot.apply(null, arguments);
-	}
-
-	// Otherwise use the V8 implementation
-	// https://github.com/v8/v8/blob/8cd3cf297287e581a49e487067f5cbd991b27123/src/js/math.js#L217
-	var length = arguments.length;
-	var args = [];
-	var max = 0;
-	for (var i = 0; i < length; i++) {
-		var n = arguments[i];
-		n = +n;
-		if (n === Infinity || n === -Infinity) {
-			return Infinity;
-		}
-		n = Math.abs(n);
-		if (n > max) {
-			max = n;
-		}
-		args[i] = n;
-	}
-
-	if (max === 0) {
-		max = 1;
-	}
-	var sum = 0;
-	var compensation = 0;
-	for (var j = 0; j < length; j++) {
-		var m = args[j] / max;
-		var summand = m * m - compensation;
-		var preliminary = sum + summand;
-		compensation = preliminary - sum - summand;
-		sum = preliminary;
-	}
-	return Math.sqrt(sum) * max;
-}
-
-/**********************************************************************************************************************
- * Random
- */
-
-var seeded = false;
-var previous = false;
-var y2 = 0;
-
-// Linear Congruential Generator
-// Variant of a Lehman Generator
-var lcg = (function () {
-	// Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
-	// m is basically chosen to be large (as it is the max period)
-	// and for its relationships to a and c
-	var m = 4294967296,
-		// a - 1 should be divisible by m's prime factors
-		a = 1664525,
-		// c and m should be co-prime
-		c = 1013904223,
-		seed,
-		z;
-	return {
-		setSeed: function (val) {
-			// pick a random seed if val is undefined or null
-			// the >>> 0 casts the seed to an unsigned 32-bit integer
-			z = seed = (val == null ? Math.random() * m : val) >>> 0;
-		},
-		getSeed: function () {
-			return seed;
-		},
-		rand: function () {
-			// define the recurrence relationship
-			z = (a * z + c) % m;
-			// return a float in [0, 1)
-			// if z = m then z / m = 0 therefore (z % m) / m < 1 always
-			return z / m;
-		}
-	};
-})();
-
-/**
- * Sets the seed value for random().
- *
- * By default, random() produces different results each time the program
- * is run. Set the seed parameter to a constant to return the same
- * pseudo-random numbers each time the software is run.
- *
- * @method randomSeed
- * @param {Number} seed   the seed value
- * @example
- * randomSeed(99);
- * for (let i = 0; i < 100; i++) {
- *   let r = random(0, 255);
- *   stroke(r);
- *   line(i, 0, i, 100);
- * }
- */
-exports.randomSeed = function (seed) {
-	lcg.setSeed(seed);
-	seeded = true;
-	previous = false;
-};
-
-/**
- * Return a random floating-point number.
- *
- * Takes either 0, 1 or 2 arguments.
- *
- * If no argument is given, returns a random number from 0
- * up to (but not including) 1.
- *
- * If one argument is given and it is a number, returns a random number from 0
- * up to (but not including) the number.
- *
- * If one argument is given and it is an array, returns a random element from
- * that array.
- *
- * If two arguments are given, returns a random number from the
- * first argument up to (but not including) the second argument.
- *
- * @method random
- * @param  {Number} [min]   the lower bound (inclusive)
- * @param  {Number} [max]   the upper bound (exclusive)
- * @return {Number} the random number
- * @example
- * for (let i = 0; i < 100; i++) {
- *   let r = random(50);
- *   stroke(r * 5);
- *   line(50, i, 50 + r, i);
- * }
- * 
- * for (let i = 0; i < 100; i++) {
- *   let r = random(-50, 50);
- *   line(50, i, 50 + r, i);
- * }
- * 
- * // Get a random element from an array using the random(Array) syntax
- * let words = ['apple', 'bear', 'cat', 'dog'];
- * let word = random(words); // select random word
- * text(word, 10, 50); // draw the word
- */
-exports.random = function (min, max) {
-	var rand;
-
-	if (seeded) {
-		rand = lcg.rand();
-	} else {
-		rand = Math.random();
-	}
-	if (typeof min === 'undefined') {
-		return rand;
-	} else if (typeof max === 'undefined') {
-		if (min instanceof Array) {
-			return min[Math.floor(rand * min.length)];
-		} else {
-			return rand * min;
-		}
-	} else {
-		if (min > max) {
-			var tmp = min;
-			min = max;
-			max = tmp;
-		}
-
-		return rand * (max - min) + min;
-	}
-};
-
-/**
- *
- * Returns a random number fitting a Gaussian, or
- * normal, distribution. There is theoretically no minimum or maximum
- * value that randomGaussian() might return. Rather, there is
- * just a very low probability that values far from the mean will be
- * returned; and a higher probability that numbers near the mean will
- * be returned.
- * <br><br>
- * Takes either 0, 1 or 2 arguments.<br>
- * If no args, returns a mean of 0 and standard deviation of 1.<br>
- * If one arg, that arg is the mean (standard deviation is 1).<br>
- * If two args, first is mean, second is standard deviation.
- *
- * @method randomGaussian
- * @param  {Number} mean  the mean
- * @param  {Number} sd    the standard deviation
- * @return {Number} the random number
- * @example
- * for (let y = 0; y < 100; y++) {
- *   let x = randomGaussian(50, 15);
- *   line(50, y, x, y);
- * }
- * 
- * let distribution = new Array(360);
- *
- * function setup() {
- *   createCanvas(100, 100);
- *   for (let i = 0; i < distribution.length; i++) {
- *     distribution[i] = floor(randomGaussian(0, 15));
- *   }
- * }
- *
- * function draw() {
- *   background(204);
- *
- *   translate(width / 2, width / 2);
- *
- *   for (let i = 0; i < distribution.length; i++) {
- *     rotate(TWO_PI / distribution.length);
- *     stroke(0);
- *     let dist = abs(distribution[i]);
- *     line(0, 0, dist, 0);
- *   }
- * }
- */
-exports.randomGaussian = function (mean, sd) {
-	var y1, x1, x2, w;
-	if (previous) {
-		y1 = y2;
-		previous = false;
-	} else {
-		do {
-			x1 = this.random(2) - 1;
-			x2 = this.random(2) - 1;
-			w = x1 * x1 + x2 * x2;
-		} while (w >= 1);
-		w = Math.sqrt(-2 * Math.log(w) / w);
-		y1 = x1 * w;
-		y2 = x2 * w;
-		previous = true;
-	}
-
-	var m = mean || 0;
-	var s = sd || 1;
-	return y1 * s + m;
-};
-
-/**********************************************************************************************************************
- * noise
- */
-
-var PERLIN_YWRAPB = 4;
-var PERLIN_YWRAP = 1 << PERLIN_YWRAPB;
-var PERLIN_ZWRAPB = 8;
-var PERLIN_ZWRAP = 1 << PERLIN_ZWRAPB;
-var PERLIN_SIZE = 4095;
-
-var perlin_octaves = 4; // default to medium smooth
-var perlin_amp_falloff = 0.5; // 50% reduction/octave
-
-var scaled_cosine = function (i) {
-	return 0.5 * (1.0 - Math.cos(i * Math.PI));
-};
-
-var perlin; // will be initialized lazily by noise() or noiseSeed()
-
-/**
- * Returns the Perlin noise value at specified coordinates. Perlin noise is
- * a random sequence generator producing a more natural ordered, harmonic
- * succession of numbers compared to the standard <b>random()</b> function.
- * It was invented by Ken Perlin in the 1980s and been used since in
- * graphical applications to produce procedural textures, natural motion,
- * shapes, terrains etc.<br /><br /> The main difference to the
- * <b>random()</b> function is that Perlin noise is defined in an infinite
- * n-dimensional space where each pair of coordinates corresponds to a
- * fixed semi-random value (fixed only for the lifespan of the program; see
- * the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise,
- * depending on the number of coordinates given. The resulting value will
- * always be between 0.0 and 1.0. The noise value can be animated by moving
- * through the noise space as demonstrated in the example above. The 2nd
- * and 3rd dimension can also be interpreted as time.<br /><br />The actual
- * noise is structured similar to an audio signal, in respect to the
- * function's use of frequencies. Similar to the concept of harmonics in
- * physics, perlin noise is computed over several octaves which are added
- * together for the final result. <br /><br />Another way to adjust the
- * character of the resulting sequence is the scale of the input
- * coordinates. As the function works within an infinite space the value of
- * the coordinates doesn't matter as such, only the distance between
- * successive coordinates does (eg. when using <b>noise()</b> within a
- * loop). As a general rule the smaller the difference between coordinates,
- * the smoother the resulting noise sequence will be. Steps of 0.005-0.03
- * work best for most applications, but this will differ depending on use.
- *
- *
- * @method noise
- * @param  {Number} x   x-coordinate in noise space
- * @param  {Number} [y] y-coordinate in noise space
- * @param  {Number} [z] z-coordinate in noise space
- * @return {Number}     Perlin noise value (between 0 and 1) at specified
- *                      coordinates
- * @example
- * let xoff = 0.0;
- *
- * function draw() {
- *   background(204);
- *   xoff = xoff + 0.01;
- *   let n = noise(xoff) * width;
- *   line(n, 0, n, height);
- * }
- * 
- * let noiseScale=0.02;
- *
- * function draw() {
- *   background(0);
- *   for (let x=0; x < width; x++) {
- *     let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
- *     stroke(noiseVal*255);
- *     line(x, mouseY+noiseVal*80, x, height);
- *   }
- * }
- */
-exports.noise = function (x, y, z) {
-	y = y || 0;
-	z = z || 0;
-
-	if (perlin == null) {
-		perlin = new Array(PERLIN_SIZE + 1);
-		for (var i = 0; i < PERLIN_SIZE + 1; i++) {
-			perlin[i] = Math.random();
-		}
-	}
-
-	if (x < 0) {
-		x = -x;
-	}
-	if (y < 0) {
-		y = -y;
-	}
-	if (z < 0) {
-		z = -z;
-	}
-
-	var xi = Math.floor(x),
-		yi = Math.floor(y),
-		zi = Math.floor(z);
-	var xf = x - xi;
-	var yf = y - yi;
-	var zf = z - zi;
-	var rxf, ryf;
-
-	var r = 0;
-	var ampl = 0.5;
-
-	var n1, n2, n3;
-
-	for (var o = 0; o < perlin_octaves; o++) {
-		var of = xi + (yi << PERLIN_YWRAPB) + (zi << PERLIN_ZWRAPB);
-
-		rxf = scaled_cosine(xf);
-		ryf = scaled_cosine(yf);
-
-		n1 = perlin[of & PERLIN_SIZE];
-		n1 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n1);
-		n2 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE];
-		n2 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n2);
-		n1 += ryf * (n2 - n1);
-
-		of += PERLIN_ZWRAP;
-		n2 = perlin[of & PERLIN_SIZE];
-		n2 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n2);
-		n3 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE];
-		n3 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n3);
-		n2 += ryf * (n3 - n2);
-
-		n1 += scaled_cosine(zf) * (n2 - n1);
-
-		r += n1 * ampl;
-		ampl *= perlin_amp_falloff;
-		xi <<= 1;
-		xf *= 2;
-		yi <<= 1;
-		yf *= 2;
-		zi <<= 1;
-		zf *= 2;
-
-		if (xf >= 1.0) {
-			xi++;
-			xf--;
-		}
-		if (yf >= 1.0) {
-			yi++;
-			yf--;
-		}
-		if (zf >= 1.0) {
-			zi++;
-			zf--;
-		}
-	}
-	return r;
-};
-
-exports.noiseDetail = function (lod, falloff) {
-	if (lod > 0) {
-		perlin_octaves = lod;
-	}
-	if (falloff > 0) {
-		perlin_amp_falloff = falloff;
-	}
-};
-
-/**
- *
- * Adjusts the character and level of detail produced by the Perlin noise
- * function. Similar to harmonics in physics, noise is computed over
- * several octaves. Lower octaves contribute more to the output signal and
- * as such define the overall intensity of the noise, whereas higher octaves
- * create finer grained details in the noise sequence.
- * <br><br>
- * By default, noise is computed over 4 octaves with each octave contributing
- * exactly half than its predecessor, starting at 50% strength for the 1st
- * octave. This falloff amount can be changed by adding an additional function
- * parameter. Eg. a falloff factor of 0.75 means each octave will now have
- * 75% impact (25% less) of the previous lower octave. Any value between
- * 0.0 and 1.0 is valid, however note that values greater than 0.5 might
- * result in greater than 1.0 values returned by <b>noise()</b>.
- * <br><br>
- * By changing these parameters, the signal created by the <b>noise()</b>
- * function can be adapted to fit very specific needs and characteristics.
- *
- * @method noiseDetail
- * @param {Number} lod number of octaves to be used by the noise
- * @param {Number} falloff falloff factor for each octave
- * @example
- * let noiseVal;
- * let noiseScale = 0.02;
- *
- * function setup() {
- *   createCanvas(100, 100);
- * }
- *
- * function draw() {
- *   background(0);
- *   for (let y = 0; y < height; y++) {
- *     for (let x = 0; x < width / 2; x++) {
- *       noiseDetail(2, 0.2);
- *       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
- *       stroke(noiseVal * 255);
- *       point(x, y);
- *       noiseDetail(8, 0.65);
- *       noiseVal = noise(
- *         (mouseX + x + width / 2) * noiseScale,
- *         (mouseY + y) * noiseScale
- *       );
- *       stroke(noiseVal * 255);
- *       point(x + width / 2, y);
- *     }
- *   }
- * }
- */
-exports.noiseSeed = function (seed) {
-	// Linear Congruential Generator
-	// Variant of a Lehman Generator
-	var lcg = (function () {
-		// Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
-		// m is basically chosen to be large (as it is the max period)
-		// and for its relationships to a and c
-		var m = 4294967296;
-		// a - 1 should be divisible by m's prime factors
-		var a = 1664525;
-		// c and m should be co-prime
-		var c = 1013904223;
-		var seed, z;
-		return {
-			setSeed: function (val) {
-				// pick a random seed if val is undefined or null
-				// the >>> 0 casts the seed to an unsigned 32-bit integer
-				z = seed = (val == null ? Math.random() * m : val) >>> 0;
-			},
-			getSeed: function () {
-				return seed;
-			},
-			rand: function () {
-				// define the recurrence relationship
-				z = (a * z + c) % m;
-				// return a float in [0, 1)
-				// if z = m then z / m = 0 therefore (z % m) / m < 1 always
-				return z / m;
-			}
-		};
-	})();
-
-	lcg.setSeed(seed);
-	perlin = new Array(PERLIN_SIZE + 1);
-	for (var i = 0; i < PERLIN_SIZE + 1; i++) {
-		perlin[i] = lcg.rand();
-	}
-};
-
-/**********************************************************************************************************************
- * trigonometry
- */
-
-/*
- * all DEGREES/RADIANS conversion should be done in the p5 instance
- * if possible, using the p5._toRadians(), p5._fromRadians() methods.
- */
-var _angleMode = RADIANS;
-
-/**
- * The inverse of cos(), returns the arc cosine of a value. This function
- * expects the values in the range of -1 to 1 and values are returned in
- * the range 0 to PI (3.1415927).
- *
- * @method acos
- * @param  {Number} value the value whose arc cosine is to be returned
- * @return {Number}       the arc cosine of the given value
- *
- * @example
- * let a = PI;
- * let c = cos(a);
- * let ac = acos(c);
- * // Prints: "3.1415927 : -1.0 : 3.1415927"
- * print(a + ' : ' + c + ' : ' + ac);
- *
- * let a = PI + PI / 4.0;
- * let c = cos(a);
- * let ac = acos(c);
- * // Prints: "3.926991 : -0.70710665 : 2.3561943"
- * print(a + ' : ' + c + ' : ' + ac);
- */
-exports.acos = function (ratio) {
-	return _fromRadians(Math.acos(ratio));
-};
-
-/**
- * The inverse of sin(), returns the arc sine of a value. This function
- * expects the values in the range of -1 to 1 and values are returned
- * in the range -PI/2 to PI/2.
- *
- * @method asin
- * @param  {Number} value the value whose arc sine is to be returned
- * @return {Number}       the arc sine of the given value
- *
- * @example
- * let a = PI + PI / 3;
- * let s = sin(a);
- * let as = asin(s);
- * // Prints: "1.0471976 : 0.86602545 : 1.0471976"
- * print(a + ' : ' + s + ' : ' + as);
- *
- * let a = PI + PI / 3.0;
- * let s = sin(a);
- * let as = asin(s);
- * // Prints: "4.1887903 : -0.86602545 : -1.0471976"
- * print(a + ' : ' + s + ' : ' + as);
- *
- */
-exports.asin = function (ratio) {
-	return _fromRadians(Math.asin(ratio));
-};
-
-/**
- * The inverse of tan(), returns the arc tangent of a value. This function
- * expects the values in the range of -Infinity to Infinity (exclusive) and
- * values are returned in the range -PI/2 to PI/2.
- *
- * @method atan
- * @param  {Number} value the value whose arc tangent is to be returned
- * @return {Number}       the arc tangent of the given value
- *
- * @example
- * let a = PI + PI / 3;
- * let t = tan(a);
- * let at = atan(t);
- * // Prints: "1.0471976 : 1.7320509 : 1.0471976"
- * print(a + ' : ' + t + ' : ' + at);
- *
- * let a = PI + PI / 3.0;
- * let t = tan(a);
- * let at = atan(t);
- * // Prints: "4.1887903 : 1.7320513 : 1.0471977"
- * print(a + ' : ' + t + ' : ' + at);
- *
- */
-exports.atan = function (ratio) {
-	return _fromRadians(Math.atan(ratio));
-};
-
-/**
- * Calculates the angle (in radians) from a specified point to the coordinate
- * origin as measured from the positive x-axis. Values are returned as a
- * float in the range from PI to -PI. The atan2() function is most often used
- * for orienting geometry to the position of the cursor.
- * <br><br>
- * Note: The y-coordinate of the point is the first parameter, and the
- * x-coordinate is the second parameter, due the the structure of calculating
- * the tangent.
- *
- * @method atan2
- * @param  {Number} y y-coordinate of the point
- * @param  {Number} x x-coordinate of the point
- * @return {Number}   the arc tangent of the given point
- *
- * @example
- * function draw() {
- *   background(204);
- *   translate(width / 2, height / 2);
- *   let a = atan2(mouseY - height / 2, mouseX - width / 2);
- *   rotate(a);
- *   rect(-30, -5, 60, 10);
- * }
- */
-exports.atan2 = function (y, x) {
-	return _fromRadians(Math.atan2(y, x));
-};
-
-/**
- * Calculates the cosine of an angle. This function takes into account the
- * current angleMode. Values are returned in the range -1 to 1.
- *
- * @method cos
- * @param  {Number} angle the angle
- * @return {Number}       the cosine of the angle
- *
- * @example
- * let a = 0.0;
- * let inc = TWO_PI / 25.0;
- * for (let i = 0; i < 25; i++) {
- *   line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
- *   a = a + inc;
- * }
- */
-exports.cos = function (angle) {
-	return Math.cos(_toRadians(angle));
-};
-
-/**
- * Calculates the sine of an angle. This function takes into account the
- * current angleMode. Values are returned in the range -1 to 1.
- *
- * @method sin
- * @param  {Number} angle the angle
- * @return {Number}       the sine of the angle
- *
- * @example
- * let a = 0.0;
- * let inc = TWO_PI / 25.0;
- * for (let i = 0; i < 25; i++) {
- *   line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
- *   a = a + inc;
- * }
- */
-exports.sin = function (angle) {
-	return Math.sin(_toRadians(angle));
-};
-
-/**
- * Calculates the tangent of an angle. This function takes into account
- * the current angleMode. Values are returned in the range -1 to 1.
- *
- * @method tan
- * @param  {Number} angle the angle
- * @return {Number}       the tangent of the angle
- *
- * @example
- * let a = 0.0;
- * let inc = TWO_PI / 50.0;
- * for (let i = 0; i < 100; i = i + 2) {
- *   line(i, 50, i, 50 + tan(a) * 2.0);
- *   a = a + inc;
- * }
- */
-exports.tan = function (angle) {
-	return Math.tan(_toRadians(angle));
-};
-
-
-/**
- * Converts a radian measurement to its corresponding value in degrees.
- * Radians and degrees are two ways of measuring the same thing. There are
- * 360 degrees in a circle and 2*PI radians in a circle. For example,
- * 90° = PI/2 = 1.5707964. This function does not take into account the
- * current angleMode.
- *
- * @method degrees
- * @param  {Number} radians the radians value to convert to degrees
- * @return {Number}         the converted angle
- *
- *
- * @example
- * let rad = PI / 4;
- * let deg = degrees(rad);
- * print(rad + ' radians is ' + deg + ' degrees');
- * // Prints: 0.7853981633974483 radians is 45 degrees
- */
-exports.degrees = function (angle) {
-	return angle * RAD_TO_DEG;
-};
-
-/**
- * Converts a degree measurement to its corresponding value in radians.
- * Radians and degrees are two ways of measuring the same thing. There are
- * 360 degrees in a circle and 2*PI radians in a circle. For example,
- * 90° = PI/2 = 1.5707964. This function does not take into account the
- * current angleMode.
- *
- * @method radians
- * @param  {Number} degrees the degree value to convert to radians
- * @return {Number}         the converted angle
- *
- * @example
- * let deg = 45.0;
- * let rad = radians(deg);
- * print(deg + ' degrees is ' + rad + ' radians');
- * // Prints: 45 degrees is 0.7853981633974483 radians
- */
-exports.radians = function (angle) {
-	return angle * DEG_TO_RAD;
-};
-
-/**
- * Sets the current mode of p5 to given mode. Default mode is RADIANS.
- *
- * @method angleMode
- * @param {Constant} mode either RADIANS or DEGREES
- *
- * @example
- * function draw() {
- *   background(204);
- *   angleMode(DEGREES); // Change the mode to DEGREES
- *   let a = atan2(mouseY - height / 2, mouseX - width / 2);
- *   translate(width / 2, height / 2);
- *   push();
- *   rotate(a);
- *   rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
- *   pop();
- *   angleMode(RADIANS); // Change the mode to RADIANS
- *   rotate(a); // variable a stays the same
- *   rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
- * }
- */
-exports.angleMode = function (mode) {
-	if (mode === DEGREES || mode === RADIANS) {
-		_angleMode = mode;
-	}
-};
-
-/**
- * converts angles from the current angleMode to RADIANS
- *
- * @method _toRadians
- * @private
- * @param {Number} angle
- * @returns {Number}
- */
-exports._toRadians = function (angle) {
-	if (_angleMode === DEGREES) {
-		return angle * DEG_TO_RAD;
-	}
-	return angle;
-};
-
-/**
- * converts angles from the current angleMode to DEGREES
- *
- * @method _toDegrees
- * @private
- * @param {Number} angle
- * @returns {Number}
- */
-exports._toDegrees = function (angle) {
-	if (_angleMode === RADIANS) {
-		return angle * RAD_TO_DEG;
-	}
-	return angle;
-};
-
-/**
- * converts angles from RADIANS into the current angleMode
- *
- * @method _fromRadians
- * @private
- * @param {Number} angle
- * @returns {Number}
- */
-exports._fromRadians = function (angle) {
-	if (_angleMode === DEGREES) {
-		return angle * RAD_TO_DEG;
-	}
-	return angle;
-};
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_p5shape.js.html b/doc/html/jsboot_p5shape.js.html deleted file mode 100644 index 4cc643b9..00000000 --- a/doc/html/jsboot_p5shape.js.html +++ /dev/null @@ -1,904 +0,0 @@ - - - - - - - Source: jsboot/p5shape.js | Source: jsboot/p5shape.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-	This file was derived from the p5.js source code at
-	https://github.com/processing/p5.js
-
-	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>
-
-    This library is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Lesser General Public
-    License as published by the Free Software Foundation; either
-    version 2.1 of the License, or (at your option) any later version.
-
-    This library is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-    Lesser General Public License for more details.
-
-    You should have received a copy of the GNU Lesser General Public
-    License along with this library; if not, write to the Free Software
-    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-/**
-* @module p5compat
-*/
-
-// internal variables
-exports._shapeMode = null;
-exports._shape = [];
-
-/**********************************************************************************************************************
- * 2d shapes
- */
-/**
- * Draw an arc to the screen. If called with only x, y, w, h, start, and
- * stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc
- * will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The
- * origin may be changed with the ellipseMode() function.<br><br>
- * The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse.
- * Adding or subtracting TWO_PI to either angle does not change where they fall.
- * If both start and stop fall at the same place, a full ellipse will be drawn.
- *
- * @method arc
- * @param  {Number} x      x-coordinate of the arc's ellipse
- * @param  {Number} y      y-coordinate of the arc's ellipse
- * @param  {Number} w      width of the arc's ellipse by default
- * @param  {Number} h      height of the arc's ellipse by default
- * @param  {Number} start  angle to start the arc, specified in radians
- * @param  {Number} stop   angle to stop the arc, specified in radians
- * @param  {Constant} [mode] optional parameter to determine the way of drawing
- *                         the arc. either CHORD, PIE or OPEN
- *
- * @example
- * arc(50, 55, 50, 50, 0, HALF_PI);
- * noFill();
- * arc(50, 55, 60, 60, HALF_PI, PI);
- * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
- * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
- *
- * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
- *
- * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
- *
- * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
- *
- * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
- */
-exports.arc = function (x, y, w, h, start, end, style) {
-	if (_currentEnv._stroke != NO_COLOR) {
-		if (_currentEnv._strokeWeight == 1) {
-			CircleArc(x, y, w, h, start * 10 * RAD_TO_DEG, end * 10 * RAD_TO_DEG, _currentEnv._stroke);
-		} else {
-			CustomCircleArc(x, y, w, h, start * 10 * RAD_TO_DEG, end * 10 * RAD_TO_DEG, _currentEnv._strokeWeight, _currentEnv._stroke);
-		}
-	}
-};
-
-/**
- * Draws an ellipse (oval) to the screen. An ellipse with equal width and
- * height is a circle. By default, the first two parameters set the location,
- * and the third and fourth parameters set the shape's width and height. If
- * no height is specified, the value of width is used for both the width and
- * height. If a negative height or width is specified, the absolute value is taken.
- * The origin may be changed with the ellipseMode() function.
- *
- * @method ellipse
- * @param  {Number} x x-coordinate of the ellipse.
- * @param  {Number} y y-coordinate of the ellipse.
- * @param  {Number} w width of the ellipse.
- * @param  {Number} [h] height of the ellipse.
- * @example
- * ellipse(56, 46, 55, 55);
- */
-exports.ellipse = function (x, y, w, h) {
-	h = h || w;
-
-	var x1 = x;
-	var y1 = y;
-
-	if (_currentEnv._ellipseMode === CENTER) {
-		var w1 = w / 2;
-		var h1 = h / 2;
-	} else if (_currentEnv._ellipseMode === RADIUS) {
-		var w1 = w;
-		var h1 = h;
-	} else if (_currentEnv._ellipseMode === CORNER) {
-		x1 = x - w;
-		y1 = y - h;
-		var w1 = w / 2;
-		var h1 = h / 2;
-	} else if (_currentEnv._ellipseMode === CORNERS) {
-		var w1 = (w - x) / 2;
-		var h1 = (h - y) / 2;
-	} else {
-		Debug("Unknown ellipseMode=" + _currentEnv._ellipseMode);
-		return;
-	}
-
-	var tx = _transX(x1, y1);
-	var ty = _transY(x1, y1);
-
-	if (_currentEnv._fill != NO_COLOR) {
-		FilledEllipse(tx, ty, w1, h1, _currentEnv._fill);
-	}
-	if (_currentEnv._stroke != NO_COLOR) {
-		if (_currentEnv._strokeWeight == 1) {
-			Ellipse(tx, ty, w1, h1, _currentEnv._stroke);
-		} else {
-			CustomEllipse(tx, ty, w1, h1, _currentEnv._strokeWeight, _currentEnv._stroke);
-		}
-	}
-};
-
-/**
- * Draws a circle to the screen. A circle is a simple closed shape.
- * It is the set of all points in a plane that are at a given distance from a given point, the centre.
- * This function is a special case of the ellipse() function, where the width and height of the ellipse are the same.
- * Height and width of the ellipse correspond to the diameter of the circle.
- * By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle.
- *
- * @method circle
- * @param  {Number} x  x-coordinate of the centre of the circle.
- * @param  {Number} y  y-coordinate of the centre of the circle.
- * @param  {Number} d  diameter of the circle.
- * @example
- * // Draw a circle at location (30, 30) with a diameter of 20.
- * circle(30, 30, 20);
- */
-exports.circle = function (x, y, r) {
-	ellipse(x, y, r);
-};
-
-/**
- * Draws a line (a direct path between two points) to the screen. The version
- * of line() with four parameters draws the line in 2D. To color a line, use
- * the stroke() function. A line cannot be filled, therefore the fill()
- * function will not affect the color of a line. 2D lines are drawn with a
- * width of one pixel by default, but this can be changed with the
- * strokeWeight() function.
- *
- * @method line
- * @param  {Number} x1 the x-coordinate of the first point
- * @param  {Number} y1 the y-coordinate of the first point
- * @param  {Number} x2 the x-coordinate of the second point
- * @param  {Number} y2 the y-coordinate of the second point
- * @example
- * line(30, 20, 85, 75);
- *
- * line(30, 20, 85, 20);
- * stroke(126);
- * line(85, 20, 85, 75);
- * stroke(255);
- * line(85, 75, 30, 75);
- */
-exports.line = function (x1, y1, x2, y2) {
-	if (_currentEnv._stroke != NO_COLOR) {
-		var tx1 = _transX(x1, y1);
-		var ty1 = _transY(x1, y1);
-		var tx2 = _transX(x2, y2);
-		var ty2 = _transY(x2, y2);
-
-		if (_currentEnv._strokeWeight == 1) {
-			Line(tx1, ty1, tx2, ty2, _currentEnv._stroke);
-		} else {
-			CustomLine(tx1, ty1, tx2, ty2, _currentEnv._strokeWeight, _currentEnv._stroke);
-		}
-	}
-};
-
-/**
- * Draws a point, a coordinate in space at the dimension of one pixel.
- * The first parameter is the horizontal value for the point, the second
- * value is the vertical value for the point. The color of the point is
- * determined by the current stroke.
- *
- * @method point
- * @param  {Number} x the x-coordinate
- * @param  {Number} y the y-coordinate
- * @param  {Number} [z] the z-coordinate (for WebGL mode)
- * @example
- * point(30, 20);
- * point(85, 20);
- * point(85, 75);
- * point(30, 75);
- */
-exports.point = function (x, y) {
-	if (_currentEnv._stroke != NO_COLOR) {
-		Plot(_transX(x, y), _transY(x, y), _currentEnv._stroke);
-	}
-};
-
-/**
- * Draw a quad. A quad is a quadrilateral, a four sided polygon. It is
- * similar to a rectangle, but the angles between its edges are not
- * constrained to ninety degrees. The first pair of parameters (x1,y1)
- * sets the first vertex and the subsequent pairs should proceed
- * clockwise or counter-clockwise around the defined shape.
- *
- * @method quad
- * @param {Number} x1 the x-coordinate of the first point
- * @param {Number} y1 the y-coordinate of the first point
- * @param {Number} x2 the x-coordinate of the second point
- * @param {Number} y2 the y-coordinate of the second point
- * @param {Number} x3 the x-coordinate of the third point
- * @param {Number} y3 the y-coordinate of the third point
- * @param {Number} x4 the x-coordinate of the fourth point
- * @param {Number} y4 the y-coordinate of the fourth point
- * @example
- * quad(38, 31, 86, 20, 69, 63, 30, 76);
- */
-exports.quad = function (x1, y1, x2, y2, x3, y3, x4, y4) {
-	beginShape();
-	vertex(x1, y1);
-	vertex(x2, y2);
-	vertex(x3, y3);
-	vertex(x4, y4);
-	vertex(x1, y1);
-	endShape(CLOSE);
-};
-
-/**
- * Draws a rectangle to the screen. A rectangle is a four-sided shape with
- * every angle at ninety degrees. By default, the first two parameters set
- * the location of the upper-left corner, the third sets the width, and the
- * fourth sets the height. The way these parameters are interpreted, however,
- * may be changed with the rectMode() function.
- * <br><br>
- * The fifth, sixth, seventh and eighth parameters, if specified,
- * determine corner radius for the top-left, top-right, lower-right and
- * lower-left corners, respectively. An omitted corner radius parameter is set
- * to the value of the previously specified radius value in the parameter list.
- *
- * @method rect
- * @param  {Number} x  x-coordinate of the rectangle.
- * @param  {Number} y  y-coordinate of the rectangle.
- * @param  {Number} w  width of the rectangle.
- * @param  {Number} h  height of the rectangle.
- * @example
- * // Draw a rectangle at location (30, 20) with a width and height of 55.
- * rect(30, 20, 55, 55);
- */
-exports.rect = function (x, y, w, h) {
-	if (_currentEnv._matrix) {
-		beginShape();
-		if (_currentEnv._rectMode === CORNER) {
-			vertex(x, y);
-			vertex(x + w, y);
-			vertex(x + w, y + h);
-			vertex(x, y + h);
-		} else if (_currentEnv._rectMode === CORNERS) {
-			vertex(x, y);
-			vertex(w, y);
-			vertex(w, h);
-			vertex(x, h);
-		} else if (_currentEnv._rectMode === CENTER) {
-			var wh = w / 2;
-			var hh = h / 2;
-			vertex(x - wh, y - hh);
-			vertex(x + wh, y - hh);
-			vertex(x + wh, y + hh);
-			vertex(x - wh, y + hh);
-		} else if (_currentEnv._rectMode === RADIUS) {
-			vertex(x - w, y - h);
-			vertex(x + w, y - h);
-			vertex(x + w, y + h);
-			vertex(x - w, y + h);
-		} else {
-			Debug("Unknown rectMode=" + _currentEnv._rectMode);
-			return;
-		}
-		endShape(CLOSE);
-	} else {
-		var x1 = x;
-		var y1 = y;
-
-		if (_currentEnv._rectMode === CORNER) {
-			var x2 = x + w;
-			var y2 = y + h;
-		} else if (_currentEnv._rectMode === CORNERS) {
-			var x2 = w;
-			var y2 = h;
-		} else if (_currentEnv._rectMode === CENTER) {
-			var wh = w / 2;
-			var hh = h / 2;
-			x1 = x - wh;
-			y1 = y - hh;
-			var x2 = x + wh;
-			var y2 = y + hh;
-		} else if (_currentEnv._rectMode === RADIUS) {
-			x1 = x - w;
-			y1 = y - h;
-			var x2 = x + w;
-			var y2 = y + h;
-		} else {
-			Debug("Unknown rectMode=" + _currentEnv._rectMode);
-			return;
-		}
-
-		if (_currentEnv._fill != NO_COLOR) {
-			FilledBox(x1, y1, x2, y2, _currentEnv._fill);
-		}
-		if (_currentEnv._stroke != NO_COLOR) {
-			if (_currentEnv._strokeWeight == 1) {
-				Box(x1, y1, x2, y2, _currentEnv._stroke);
-			} else {
-				CustomBox(x1, y1, x2, y2, _currentEnv._strokeWeight, _currentEnv._stroke);
-			}
-		}
-	}
-};
-
-/**
- * Draws a square to the screen. A square is a four-sided shape with
- * every angle at ninety degrees, and equal side size.
- * This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size.
- * By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square.
- * The way these parameters are interpreted, however,
- * may be changed with the rectMode() function.
- * <br><br>
- * The fourth, fifth, sixth and seventh parameters, if specified,
- * determine corner radius for the top-left, top-right, lower-right and
- * lower-left corners, respectively. An omitted corner radius parameter is set
- * to the value of the previously specified radius value in the parameter list.
- *
- * @method square
- * @param  {Number} x  x-coordinate of the square.
- * @param  {Number} y  y-coordinate of the square.
- * @param  {Number} s  side size of the square.
- * @example
- * // Draw a square at location (30, 20) with a side size of 55.
- * square(30, 20, 55);
- */
-exports.square = function (x, y, s) {
-	rect(x, y, s, s);
-};
-
-/**
- * A triangle is a plane created by connecting three points. The first two
- * arguments specify the first point, the middle two arguments specify the
- * second point, and the last two arguments specify the third point.
- *
- * @method triangle
- * @param  {Number} x1 x-coordinate of the first point
- * @param  {Number} y1 y-coordinate of the first point
- * @param  {Number} x2 x-coordinate of the second point
- * @param  {Number} y2 y-coordinate of the second point
- * @param  {Number} x3 x-coordinate of the third point
- * @param  {Number} y3 y-coordinate of the third point
- * @example
- * triangle(30, 75, 58, 20, 86, 75);
- */
-exports.triangle = function (x1, y1, x2, y2, x3, y3) {
-	beginShape(TRIANGLES);
-	vertex(x1, y1);
-	vertex(x2, y2);
-	vertex(x3, y3);
-	endShape();
-};
-
-/**
- * Using the beginShape() and endShape() functions allow creating more
- * complex forms. beginShape() begins recording vertices for a shape and
- * endShape() stops recording. The value of the kind parameter tells it which
- * types of shapes to create from the provided vertices. With no mode
- * specified, the shape can be any irregular polygon.
- * <br><br>
- * The parameters available for beginShape() are POINTS, LINES, TRIANGLES,
- * TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the
- * beginShape() function, a series of vertex() commands must follow. To stop
- * drawing the shape, call endShape(). Each shape will be outlined with the
- * current stroke color and filled with the fill color.
- * <br><br>
- * Transformations such as translate(), rotate(), and scale() do not work
- * within beginShape(). It is also not possible to use other shapes, such as
- * ellipse() or rect() within beginShape().
- *
- * @method beginShape
- * @param  {Constant} [kind] either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
- *                                TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- * @example
- * beginShape();
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape(CLOSE);
- *
- * beginShape(POINTS);
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape();
- *
- * beginShape(LINES);
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape();
- *
- * noFill();
- * beginShape();
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape();
- *
- * noFill();
- * beginShape();
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape(CLOSE);
- *
- * beginShape(TRIANGLES);
- * vertex(30, 75);
- * vertex(40, 20);
- * vertex(50, 75);
- * vertex(60, 20);
- * vertex(70, 75);
- * vertex(80, 20);
- * endShape();
- *
- * beginShape();
- * vertex(20, 20);
- * vertex(40, 20);
- * vertex(40, 40);
- * vertex(60, 40);
- * vertex(60, 60);
- * vertex(20, 60);
- * endShape(CLOSE);
- */
-exports.beginShape = function (m) {
-	_shapeMode = m;
-	_shape = [];
-};
-
-/**
- * All shapes are constructed by connecting a series of vertices. vertex()
- * is used to specify the vertex coordinates for points, lines, triangles,
- * quads, and polygons. It is used exclusively within the beginShape() and
- * endShape() functions.
- *
- * @method vertex
- * @param  {Number} x x-coordinate of the vertex
- * @param  {Number} y y-coordinate of the vertex
- * @example
- * strokeWeight(3);
- * beginShape(POINTS);
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape();
- */
-exports.vertex = function (x, y) {
-	_shape.push([_transX(x, y), _transY(x, y)]);
-};
-
-/**
- * The endShape() function is the companion to beginShape() and may only be
- * called after beginShape(). When endshape() is called, all of image data
- * defined since the previous call to beginShape() is written into the image
- * buffer. The constant CLOSE as the value for the MODE parameter to close
- * the shape (to connect the beginning and the end).
- *
- * @method endShape
- * @param  {Constant} [mode] use CLOSE to close the shape
- * @example
- * noFill();
- *
- * beginShape();
- * vertex(20, 20);
- * vertex(45, 20);
- * vertex(45, 80);
- * endShape(CLOSE);
- *
- * beginShape();
- * vertex(50, 20);
- * vertex(75, 20);
- * vertex(75, 80);
- * endShape();
- * 
- * TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
- */
-exports.endShape = function (p) {
-	if (_shapeMode === POINTS) {
-		_shape.forEach(function (p) {
-			Plot(p[0], p[1], _currentEnv._stroke);
-		});
-	} else if (_shapeMode === LINES) {
-		for (var i = 0; i < _shape.length; i += 2) {
-			if (_currentEnv._strokeWeight == 1) {
-				Line(_shape[i][0], _shape[i][1], _shape[i + 1][0], _shape[i + 1][1], _currentEnv._stroke);
-			} else {
-				CustomLine(_shape[i][0], _shape[i][1], _shape[i + 1][0], _shape[i + 1][1], _strokeWeight, _currentEnv._stroke);
-			}
-		}
-	} else if (_shapeMode === TRIANGLES) {
-		for (var i = 0; i < _shape.length; i += 3) {
-			var tri = [_shape[i], _shape[i + 1], _shape[i + 2]];
-			if (_currentEnv._fill != NO_COLOR) {
-				FilledPolygon(tri, _currentEnv._fill);
-			}
-			if (_currentEnv._stroke != NO_COLOR) {
-				_PolyLine(tri, true);
-			}
-		}
-	} else {
-		if (p === CLOSE) {
-			if (_currentEnv._fill != NO_COLOR) {
-				FilledPolygon(_shape, _currentEnv._fill);
-			}
-			if (_currentEnv._stroke != NO_COLOR) {
-				_PolyLine(_shape, true);
-			}
-		} else {
-			if (_currentEnv._stroke != NO_COLOR) {
-				_PolyLine(_shape, false);
-			}
-		}
-	}
-};
-
-/**
- * draw polygon by using lines.
- */
-exports._PolyLine = function (shape, close) {
-	for (var i = 0; i < shape.length - 1; i++) {
-		if (_currentEnv._strokeWeight == 1) {
-			Line(shape[i][0], shape[i][1], shape[i + 1][0], shape[i + 1][1], _currentEnv._stroke);
-		} else {
-			CustomLine(shape[i][0], shape[i][1], shape[i + 1][0], shape[i + 1][1], _currentEnv._strokeWeight, _currentEnv._stroke);
-		}
-	}
-	if (close) {
-		var last = shape.length - 1;
-		if (_currentEnv._strokeWeight == 1) {
-			Line(shape[0][0], shape[0][1], shape[last][0], shape[last][1], _currentEnv._stroke);
-		} else {
-			CustomLine(shape[0][0], shape[0][1], shape[last][0], shape[last][1], _currentEnv._strokeWeight, _currentEnv._stroke);
-		}
-	}
-}
-
-/**
- * Modifies the location from which rectangles are drawn by changing the way
- * in which parameters given to rect() are interpreted.
- * <br><br>
- * The default mode is rectMode(CORNER), which interprets the first two
- * parameters of rect() as the upper-left corner of the shape, while the
- * third and fourth parameters are its width and height.
- * <br><br>
- * rectMode(CORNERS) interprets the first two parameters of rect() as the
- * location of one corner, and the third and fourth parameters as the
- * location of the opposite corner.
- * <br><br>
- * rectMode(CENTER) interprets the first two parameters of rect() as the
- * shape's center point, while the third and fourth parameters are its
- * width and height.
- * <br><br>
- * rectMode(RADIUS) also uses the first two parameters of rect() as the
- * shape's center point, but uses the third and fourth parameters to specify
- * half of the shapes's width and height.
- * <br><br>
- * The parameter must be written in ALL CAPS because Javascript is a
- * case-sensitive language.
- *
- * @method rectMode
- * @param  {Constant} mode either CORNER, CORNERS, CENTER, or RADIUS
- * @example
- * rectMode(CORNER); // Default rectMode is CORNER
- * fill(255); // Set fill to white
- * rect(25, 25, 50, 50); // Draw white rect using CORNER mode
- *
- * rectMode(CORNERS); // Set rectMode to CORNERS
- * fill(100); // Set fill to gray
- * rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode
- *
- * rectMode(RADIUS); // Set rectMode to RADIUS
- * fill(255); // Set fill to white
- * rect(50, 50, 30, 30); // Draw white rect using RADIUS mode
- *
- * rectMode(CENTER); // Set rectMode to CENTER
- * fill(100); // Set fill to gray
- * rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- */
-exports.rectMode = function (m) {
-	if (
-		m === CORNER ||
-		m === CORNERS ||
-		m === RADIUS ||
-		m === CENTER
-	) {
-		_currentEnv._rectMode = m;
-	}
-	return this;
-};
-
-
-/**
- * Modifies the location from which ellipses are drawn by changing the way
- * in which parameters given to ellipse() are interpreted.
- * <br><br>
- * The default mode is ellipseMode(CENTER), which interprets the first two
- * parameters of ellipse() as the shape's center point, while the third and
- * fourth parameters are its width and height.
- * <br><br>
- * ellipseMode(RADIUS) also uses the first two parameters of ellipse() as
- * the shape's center point, but uses the third and fourth parameters to
- * specify half of the shapes's width and height.
- * <br><br>
- * ellipseMode(CORNER) interprets the first two parameters of ellipse() as
- * the upper-left corner of the shape, while the third and fourth parameters
- * are its width and height.
- * <br><br>
- * ellipseMode(CORNERS) interprets the first two parameters of ellipse() as
- * the location of one corner of the ellipse's bounding box, and the third
- * and fourth parameters as the location of the opposite corner.
- * <br><br>
- * The parameter must be written in ALL CAPS because Javascript is a
- * case-sensitive language.
- *
- * @method ellipseMode
- * @param  {Constant} mode either CENTER, RADIUS, CORNER, or CORNERS
- * @example
- * ellipseMode(RADIUS); // Set ellipseMode to RADIUS
- * fill(255); // Set fill to white
- * ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode
- *
- * ellipseMode(CENTER); // Set ellipseMode to CENTER
- * fill(100); // Set fill to gray
- * ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode
- *
- * ellipseMode(CORNER); // Set ellipseMode is CORNER
- * fill(255); // Set fill to white
- * ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode
- *
- * ellipseMode(CORNERS); // Set ellipseMode to CORNERS
- * fill(100); // Set fill to gray
- * ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- */
-exports.ellipseMode = function (m) {
-	if (
-		m === CORNER ||
-		m === CORNERS ||
-		m === RADIUS ||
-		m === CENTER
-	) {
-		_currentEnv._ellipseMode = m;
-	}
-	return this;
-};
-
-/**********************************************************************************************************************
- * images
- */
-
-/**
- * Loads an image from a path and creates a Image from it.
- * <br><br>
- *
- * @method loadImage
- * @param  {String} path Path of the image to be loaded
- * @return {Bitmap}             the Image object
- * @example
- * let img;
- * function setup() {
- *   img = loadImage('assets/laDefense.jpg');
- *   image(img, 0, 0);
- * }
- */
-exports.loadImage = function (path) {
-	var ret = function (p) {
-		this.bm = new Bitmap(p);
-	};
-	ret.prototype.loadPixels = function () { };
-	ret.prototype.get = function (x, y) {	// TODO: check!
-		var px = this.bm.GetPixel(x, y);
-		return color(GetRed(px), GetGreen(px), GetBlue(px), 255);
-	};
-
-	return new ret(path);
-};
-
-
-/**
- * Draw an image to the p5.js canvas.
- *
- * This function can be used with different numbers of parameters. The
- * simplest use requires only three parameters: img, x, and y—where (x, y) is
- * the position of the image. Two more parameters can optionally be added to
- * specify the width and height of the image.
- *
- * This function can also be used with all eight Number parameters. To
- * differentiate between all these parameters, p5.js uses the language of
- * "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source
- * image" (which corresponds to "sx", "sy", etc.) below. Specifying the
- * "source image" dimensions can be useful when you want to display a
- * subsection of the source image instead of the whole thing. 
- *
- * @method image
- * @param  {Bitmap} img    the image to display
- * @param  {Number}   x     the x-coordinate of the top-left corner of the image
- * @param  {Number}   y     the y-coordinate of the top-left corner of the image
- * @example
- * let img;
- * function setup() {
- *   img = loadImage('assets/laDefense.jpg');
- *   // Top-left corner of the img is at (0, 0)
- *   // Width and height are the img's original width and height
- *   image(img, 0, 0);
- * }
- */
-exports.image = function (img, x, y) {
-	var x1 = x;
-	var y1 = y;
-	var w = img.bm.width;
-	var h = img.bm.height;
-
-	if (_currentEnv._imageMode === CORNER) {
-	} else if (_currentEnv._imageMode === CORNERS) {
-	} else if (_currentEnv._imageMode === CENTER) {
-		var wh = w / 2;
-		var hh = h / 2;
-		x1 = x - wh;
-		y1 = y - hh;
-	} else {
-		Debug("Unknown imageMode=" + _currentEnv._imageMode);
-		return;
-	}
-
-	img.bm.Draw(_transX(x1, y1), _transY(x1, y1));
-};
-
-
-/**
- * Set image mode. Modifies the location from which images are drawn by
- * changing the way in which parameters given to image() are interpreted.
- * The default mode is imageMode(CORNER), which interprets the second and
- * third parameters of image() as the upper-left corner of the image. If
- * two additional parameters are specified, they are used to set the image's
- * width and height.
- * <br><br>
- * imageMode(CORNERS) interprets the second and third parameters of image()
- * as the location of one corner, and the fourth and fifth parameters as the
- * opposite corner.
- * <br><br>
- * imageMode(CENTER) interprets the second and third parameters of image()
- * as the image's center point. If two additional parameters are specified,
- * they are used to set the image's width and height.
- *
- * @method imageMode
- * @param {Constant} mode either CORNER, CORNERS, or CENTER
- * @example
- *
- * let img;
- * function setup() {
- *   img = loadImage('assets/bricks.jpg');
- *   imageMode(CORNER);
- *   image(img, 10, 10, 50, 50);
- * }
- *
- * let img;
- * function setup() {
- *   img = loadImage('assets/bricks.jpg');
- *   imageMode(CORNERS);
- *   image(img, 10, 10, 90, 40);
- * }
- *
- * let img;
- * function setup() {
- *   img = loadImage('assets/bricks.jpg');
- *   imageMode(CENTER);
- *   image(img, 50, 50, 80, 80);
- * }
- */
-exports.imageMode = function (m) {
-	if (
-		m === CORNER ||
-		m === CORNERS ||
-		m === CENTER
-	) {
-		_currentEnv._imageMode = m;
-	}
-};
-
-/**
- * Sets the width of the stroke used for lines, points, and the border
- * around shapes. All widths are set in units of pixels.
- *
- * @method strokeWeight
- * @param  {Number} weight the weight (in pixels) of the stroke
- * @example
- * strokeWeight(1); // Default
- * line(20, 20, 80, 20);
- * strokeWeight(4); // Thicker
- * line(20, 40, 80, 40);
- * strokeWeight(10); // Beastly
- * line(20, 70, 80, 70);
- */
-exports.strokeWeight = function (w) {
-	_currentEnv._strokeWeight = w;
-};
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_p5trans.js.html b/doc/html/jsboot_p5trans.js.html deleted file mode 100644 index 866f5ba9..00000000 --- a/doc/html/jsboot_p5trans.js.html +++ /dev/null @@ -1,503 +0,0 @@ - - - - - - - Source: jsboot/p5trans.js | Source: jsboot/p5trans.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-	This file was derived from the p5.js source code at
-	https://github.com/processing/p5.js
-
-	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>
-
-    This library is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Lesser General Public
-    License as published by the Free Software Foundation; either
-    version 2.1 of the License, or (at your option) any later version.
-
-    This library is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-    Lesser General Public License for more details.
-
-    You should have received a copy of the GNU Lesser General Public
-    License along with this library; if not, write to the Free Software
-    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-// https://academo.org/demos/rotation-about-point/
-// https://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations
-// http://www.calcul.com/show/calculator/matrix-multiplication_;3;3;3;1?matrix1=[[%2211%22,%2212%22,%2213%22],[%2221%22,%2222%22,%2223%22],[%2231%22,%2232%22,%2233%22]]&matrix2=[[%22x%22],[%22y%22],[%221%22]]&operator=*
-// https://stackoverflow.com/questions/27205018/multiply-2-matrices-in-javascript
-
-/**
-* @module p5compat
-*/
-
-/**
-* make sure we have a 2x2 identity matrix.
-*/
-exports._ensureMatrix = function () {
-	if (!_currentEnv._matrix) {
-		_currentEnv._matrix = [
-			[1, 0, 0],
-			[0, 1, 0],
-			[0, 0, 1]
-		];
-	}
-}
-
-exports._MaMul = function (a, b) {
-	var aNumRows = a.length, aNumCols = a[0].length,
-		bNumRows = b.length, bNumCols = b[0].length,
-		m = new Array(aNumRows);  // initialize array of rows
-	for (var r = 0; r < aNumRows; ++r) {
-		m[r] = new Array(bNumCols); // initialize the current row
-		for (var c = 0; c < bNumCols; ++c) {
-			m[r][c] = 0;             // initialize the current cell
-			for (var i = 0; i < aNumCols; ++i) {
-				m[r][c] += a[r][i] * b[i][c];
-			}
-		}
-	}
-	return m;
-};
-
-/**
- * translate a point with the current matrix (if any).
- * 
- * @param {number} x point
- * @param {number} y point
- * @returns {number} the translated x coordinate.
- */
-exports._transX = function (x, y) {
-	if (_currentEnv._matrix) {
-		return x * _currentEnv._matrix[0][0] + y * _currentEnv._matrix[0][1] + _currentEnv._matrix[0][2];
-	} else {
-		return x;
-	}
-}
-
-/**
- * translate a point with the current matrix (if any).
- * 
- * @param {number} x point
- * @param {number} y point
- * @returns {number} the translated y coordinate.
- */
-exports._transY = function (x, y) {
-	if (_currentEnv._matrix) {
-		return x * _currentEnv._matrix[1][0] + y * _currentEnv._matrix[1][1] + _currentEnv._matrix[1][2];
-	} else {
-		return y;
-	}
-}
-
-/**
- * Multiplies the current matrix by the one specified through the parameters.
- * This is a powerful operation that can perform the equivalent of translate,
- * scale, shear and rotate all at once. You can learn more about transformation
- * matrices on <a href="https://en.wikipedia.org/wiki/Transformation_matrix">
- * Wikipedia.
- *
- * The naming of the arguments here follows the naming of the <a href=
- * "https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-transform">
- * WHATWG specification and corresponds to a
- * transformation matrix of the
- * form:
- *
- * > <img style="max-width: 150px" src="assets/transformation-matrix.png"
- * alt="The transformation matrix used when applyMatrix is called"/>
- *
- * @method applyMatrix
- * @param  {Number} a numbers which define the 2x3 matrix to be multiplied
- * @param  {Number} b numbers which define the 2x3 matrix to be multiplied
- * @param  {Number} c numbers which define the 2x3 matrix to be multiplied
- * @param  {Number} d numbers which define the 2x3 matrix to be multiplied
- * @param  {Number} e numbers which define the 2x3 matrix to be multiplied
- * @param  {Number} f numbers which define the 2x3 matrix to be multiplied
- * @example
- * function setup() {
- *   frameRate(10);
- *   rectMode(CENTER);
- * }
- *
- * function draw() {
- *   var step = frameCount % 20;
- *   background(200);
- *   // Equivalent to translate(x, y);
- *   applyMatrix(1, 0, 0, 1, 40 + step, 50);
- *   rect(0, 0, 50, 50);
- * }
- * 
- * function setup() {
- *   frameRate(10);
- *   rectMode(CENTER);
- * }
- *
- * function draw() {
- *   var step = frameCount % 20;
- *   background(200);
- *   translate(50, 50);
- *   // Equivalent to scale(x, y);
- *   applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
- *   rect(0, 0, 50, 50);
- * }
- * 
- * function setup() {
- *   frameRate(10);
- *   rectMode(CENTER);
- * }
- *
- * function draw() {
- *   var step = frameCount % 20;
- *   var angle = map(step, 0, 20, 0, TWO_PI);
- *   var cos_a = cos(angle);
- *   var sin_a = sin(angle);
- *   background(200);
- *   translate(50, 50);
- *   // Equivalent to rotate(angle);
- *   applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
- *   rect(0, 0, 50, 50);
- * }
- * 
- * function setup() {
- *   frameRate(10);
- *   rectMode(CENTER);
- * }
- *
- * function draw() {
- *   var step = frameCount % 20;
- *   var angle = map(step, 0, 20, -PI / 4, PI / 4);
- *   background(200);
- *   translate(50, 50);
- *   // equivalent to shearX(angle);
- *   var shear_factor = 1 / tan(PI / 2 - angle);
- *   applyMatrix(1, 0, shear_factor, 1, 0, 0);
- *   rect(0, 0, 50, 50);
- * }
- */
-exports.applyMatrix = function (a, b, c, d, e, f) {
-	_ensureMatrix();
-
-	var pm = function (m) {
-		for (var r = 0; r < m.length; ++r) {
-			Println('  ' + m[r].join(' '));
-		}
-	}
-
-	var m1 = [
-		[a, c, e],
-		[b, d, f],
-		[0, 0, 1]
-	];
-
-	_currentEnv._matrix = _MaMul(_currentEnv._matrix, m1);
-};
-
-/**
- * Replaces the current matrix with the identity matrix.
- *
- * @method resetMatrix
- * @example
- * translate(50, 50);
- * applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
- * rect(0, 0, 20, 20);
- * // Note that the translate is also reset.
- * resetMatrix();
- * rect(0, 0, 20, 20);
- */
-exports.resetMatrix = function () {
-	_currentEnv._matrix = null;
-};
-
-/**
- * Rotates a shape the amount specified by the angle parameter. This
- * function accounts for angleMode, so angles can be entered in either
- * RADIANS or DEGREES.
- * <br><br>
- * Objects are always rotated around their relative position to the
- * origin and positive numbers rotate objects in a clockwise direction.
- * Transformations apply to everything that happens after and subsequent
- * calls to the function accumulates the effect. For example, calling
- * rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).
- * All tranformations are reset when draw() begins again.
- * <br><br>
- * Technically, rotate() multiplies the current transformation matrix
- * by a rotation matrix. This function can be further controlled by
- * the push() and pop().
- *
- * @method rotate
- * @param  {Number} angle the angle of rotation, specified in radians
- *                        or degrees, depending on current angleMode
- * @example
- * translate(width / 2, height / 2);
- * rotate(PI / 3.0);
- * rect(-26, -26, 52, 52);
- */
-exports.rotate = function (angle) {
-	_ensureMatrix();
-	var cA = cos(angle);
-	var sA = sin(angle);
-
-	var m1 = [
-		[cA, -sA, 0],
-		[sA, cA, 0],
-		[0, 0, 1]
-	];
-	_currentEnv._matrix = _MaMul(_currentEnv._matrix, m1);
-};
-
-/**
- * Shears a shape around the x-axis the amount specified by the angle
- * parameter. Angles should be specified in the current angleMode.
- * Objects are always sheared around their relative position to the origin
- * and positive numbers shear objects in a clockwise direction.
- * <br><br>
- * Transformations apply to everything that happens after and subsequent
- * calls to the function accumulates the effect. For example, calling
- * shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI).
- * If shearX() is called within the draw(), the transformation is reset when
- * the loop begins again.
- * <br><br>
- * Technically, shearX() multiplies the current transformation matrix by a
- * rotation matrix. This function can be further controlled by the
- * push() and pop() functions.
- *
- * @method shearX
- * @param  {Number} angle angle of shear specified in radians or degrees,
- *                        depending on current angleMode
- * @example
- * translate(width / 4, height / 4);
- * shearX(PI / 4.0);
- * rect(0, 0, 30, 30);
- */
-exports.shearX = function (angle) {
-	_ensureMatrix();
-	var m1 = [
-		[1, tan(angle), 0],
-		[0, 1, 0],
-		[0, 0, 1]
-	];
-	_currentEnv._matrix = _MaMul(_currentEnv._matrix, m1);
-};
-
-/**
- * Shears a shape around the y-axis the amount specified by the angle
- * parameter. Angles should be specified in the current angleMode. Objects
- * are always sheared around their relative position to the origin and
- * positive numbers shear objects in a clockwise direction.
- * <br><br>
- * Transformations apply to everything that happens after and subsequent
- * calls to the function accumulates the effect. For example, calling
- * shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If
- * shearY() is called within the draw(), the transformation is reset when
- * the loop begins again.
- * <br><br>
- * Technically, shearY() multiplies the current transformation matrix by a
- * rotation matrix. This function can be further controlled by the
- * push() and pop() functions.
- *
- * @method shearY
- * @param  {Number} angle angle of shear specified in radians or degrees,
- *                        depending on current angleMode
- * @example
- * translate(width / 4, height / 4);
- * shearY(PI / 4.0);
- * rect(0, 0, 30, 30);
- */
-exports.shearY = function (angle) {
-	_ensureMatrix();
-	var m1 = [
-		[1, 0, 0],
-		[tan(angle), 1, 0],
-		[0, 0, 1]
-	];
-	_currentEnv._matrix = _MaMul(_currentEnv._matrix, m1);
-};
-
-/**
- * Specifies an amount to displace objects within the display window.
- * The x parameter specifies left/right translation, the y parameter
- * specifies up/down translation.
- * <br><br>
- * Transformations are cumulative and apply to everything that happens after
- * and subsequent calls to the function accumulates the effect. For example,
- * calling translate(50, 0) and then translate(20, 0) is the same as
- * translate(70, 0). If translate() is called within draw(), the
- * transformation is reset when the loop begins again. This function can be
- * further controlled by using push() and pop().
- *
- * @method translate
- * @param  {Number} x left/right translation
- * @param  {Number} y up/down translation
- * @param  {Number} [z] forward/backward translation (webgl only)
- * @example
- * translate(30, 20);
- * rect(0, 0, 55, 55);
- *
- * rect(0, 0, 55, 55); // Draw rect at original 0,0
- * translate(30, 20);
- * rect(0, 0, 55, 55); // Draw rect at new 0,0
- * translate(14, 14);
- * rect(0, 0, 55, 55); // Draw rect at new 0,0
- *
- * function draw() {
- *   background(200);
- *   rectMode(CENTER);
- *   translate(width / 2, height / 2);
- *   translate(p5.Vector.fromAngle(millis() / 1000, 40));
- *   rect(0, 0, 20, 20);
- * }
- */
-/**
- * @method translate
- * @param  {p5.Vector} vector the vector to translate by
- */
-exports.translate = function (x, y, z) {
-	_ensureMatrix();
-	if (x instanceof PVector) {
-		y = x.y;
-		x = x.x;
-	}
-	var m1 = [
-		[1, 0, x],
-		[0, 1, y],
-		[0, 0, 1]
-	];
-	_currentEnv._matrix = _MaMul(_currentEnv._matrix, m1);
-};
-
-
-/**
- * Increases or decreases the size of a shape by expanding and contracting
- * vertices. Objects always scale from their relative origin to the
- * coordinate system. Scale values are specified as decimal percentages.
- * For example, the function call scale(2.0) increases the dimension of a
- * shape by 200%.
- * <br><br>
- * Transformations apply to everything that happens after and subsequent
- * calls to the function multiply the effect. For example, calling scale(2.0)
- * and then scale(1.5) is the same as scale(3.0). If scale() is called
- * within draw(), the transformation is reset when the loop begins again.
- * <br><br>
- * Using this function with the z parameter is only available in WEBGL mode.
- * This function can be further controlled with push() and pop().
- *
- * @method scale
- * @param  {Number|p5.Vector|Number[]} s
- *                      percent to scale the object, or percentage to
- *                      scale the object in the x-axis if multiple arguments
- *                      are given
- * @param  {Number} [y] percent to scale the object in the y-axis
- * @example
- * rect(30, 20, 50, 50);
- * scale(0.5);
- * rect(30, 20, 50, 50);
- *
- * rect(30, 20, 50, 50);
- * scale(0.5, 1.3);
- * rect(30, 20, 50, 50);
- */
-/**
- * @method scale
- * @param  {p5.Vector|Number[]} scales per-axis percents to scale the object
- */
-exports.scale = function (x, y, z) {
-	_ensureMatrix();
-	// Only check for Vector argument type if Vector is available
-	if (x instanceof PVector) {
-		var v = x;
-		x = v.x;
-		y = v.y;
-		z = v.z;
-	} else if (x instanceof Array) {
-		var rg = x;
-		x = rg[0];
-		y = rg[1];
-		z = rg[2] || 1;
-	}
-	if (isNaN(y)) {
-		y = z = x;
-	} else if (isNaN(z)) {
-		z = 1;
-	}
-	var m1 = [
-		[x, 0, 0],
-		[0, y, 0],
-		[0, 0, 1]
-	];
-	_currentEnv._matrix = _MaMul(_currentEnv._matrix, m1);
-};
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_p5typo.js.html b/doc/html/jsboot_p5typo.js.html deleted file mode 100644 index 72612c29..00000000 --- a/doc/html/jsboot_p5typo.js.html +++ /dev/null @@ -1,320 +0,0 @@ - - - - - - - Source: jsboot/p5typo.js | Source: jsboot/p5typo.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-	This file was derived from the p5.js source code at
-	https://github.com/processing/p5.js
-
-	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>
-
-    This library is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Lesser General Public
-    License as published by the Free Software Foundation; either
-    version 2.1 of the License, or (at your option) any later version.
-
-    This library is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-    Lesser General Public License for more details.
-
-    You should have received a copy of the GNU Lesser General Public
-    License along with this library; if not, write to the Free Software
-    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-/**
-* @module p5compat
-*/
-
-/**
- * Loads a GRX font file (.FNT) from a file Font Object.
- * <br><br>
- *
- * @method loadFont
- * @param  {String}        path       name of the file or url to load
- * @return {Font}                  Font object
- */
-exports.loadFont = function (name) {
-	return new Font(name);
-};
-
-
-/**
- * Draws text to the screen. Displays the information specified in the first
- * parameter on the screen in the position specified by the additional
- * parameters. A default font will be used unless a font is set with the
- * textFont() function and a default size will be used unless a font is set
- * with textSize(). Change the color of the text with the fill() function.
- * Change the outline of the text with the stroke() and strokeWeight()
- * functions.
- * <br><br>
- * The text displays in relation to the textAlign() function, which gives the
- * option to draw to the left, right, and center of the coordinates.
- * <br><br>
- * The x2 and y2 parameters define a rectangular area to display within and
- * may only be used with string data. When these parameters are specified,
- * they are interpreted based on the current rectMode() setting. Text that
- * does not fit completely within the rectangle specified will not be drawn
- * to the screen. If x2 and y2 are not specified, the baseline alignment is the
- * default, which means that the text will be drawn upwards from x and y.
- * <br><br>
- *
- * @method text
- * @param {String|Object|Array|Number|Boolean} str the alphanumeric
- *                                             symbols to be displayed
- * @param {Number} x   x-coordinate of text
- * @param {Number} y   y-coordinate of text
- * @example
- * text('word', 10, 30);
- * fill(0, 102, 153);
- * text('word', 10, 60);
- * fill(0, 102, 153, 51);
- * text('word', 10, 90);
- * 
- * let s = 'The quick brown fox jumped over the lazy dog.';
- * fill(50);
- * text(s, 10, 10, 70, 80); // Text wraps within text box
- *
- * avenir;
- * function setup() {
- *   avenir = loadFont('assets/Avenir.otf');
- *   textFont(avenir);
- *   textSize(width / 3);
- *   textAlign(CENTER, CENTER);
- * }
- * function draw() {
- *   background(0);
- *   text('p5.js', 0, 0);
- * }
- */
-exports.text = function (str, x, y) {
-	if (!_currentEnv._font) {
-		throw "No font set, use textFont() first.";
-	}
-
-	switch (_currentEnv._txtAlignY) {
-		case BOTTOM:
-			y -= _currentEnv._font.height;
-			break;
-		case CENTER:
-			y -= _currentEnv._font.height / 2;
-			break;
-	}
-
-	switch (_currentEnv._txtAlignX) {
-		case LEFT:
-			_currentEnv._font.DrawStringLeft(x, y, str, _currentEnv._fill, NO_COLOR);
-			break;
-		case CENTER:
-			_currentEnv._font.DrawStringCenter(x, y, str, _currentEnv._fill, NO_COLOR);
-			break;
-		case RIGHT:
-			_currentEnv._font.DrawStringRight(x, y, str, _currentEnv._fill, NO_COLOR);
-			break;
-	}
-};
-
-/**
- * Sets the current font that will be drawn with the text() function.
- * <br><br>
- *
- * @method textFont
- * @return {Object} the current font
- *
- * @example
- * fill(0);
- * textSize(12);
- * textFont('Georgia');
- * text('Georgia', 12, 30);
- * textFont('Helvetica');
- * text('Helvetica', 12, 60);
- * 
- * let fontRegular, fontItalic, fontBold;
- * function setup() {
- *   fontRegular = loadFont('assets/Regular.otf');
- *   fontItalic = loadFont('assets/Italic.ttf');
- *   fontBold = loadFont('assets/Bold.ttf');
- *   background(210);
- *   fill(0);
- *   textFont(fontRegular);
- *   text('Font Style Normal', 10, 30);
- *   textFont(fontItalic);
- *   text('Font Style Italic', 10, 50);
- *   textFont(fontBold);
- *   text('Font Style Bold', 10, 70);
- * }
- */
-exports.textFont = function (f) {
-	_currentEnv._font = f;
-};
-
-/**
- * Sets the current alignment for drawing text. Accepts two
- * arguments: horizAlign (LEFT, CENTER, or RIGHT) and
- * vertAlign (TOP, BOTTOM, CENTER, or BASELINE).
- *
- * The horizAlign parameter is in reference to the x value
- * of the text() function, while the vertAlign parameter is
- * in reference to the y value.
- *
- * So if you write textAlign(LEFT), you are aligning the left
- * edge of your text to the x value you give in text(). If you
- * write textAlign(RIGHT, TOP), you are aligning the right edge
- * of your text to the x value and the top of edge of the text
- * to the y value.
- *
- * @method textAlign
- * @param {Constant} horizAlign horizontal alignment, either LEFT,
- *                            CENTER, or RIGHT
- * @param {Constant} [vertAlign] vertical alignment, either TOP,
- *                            BOTTOM, CENTER, or BASELINE
- * @example
- * textSize(16);
- * textAlign(RIGHT);
- * text('ABCD', 50, 30);
- * textAlign(CENTER);
- * text('EFGH', 50, 50);
- * textAlign(LEFT);
- * text('IJKL', 50, 70);
- *
- * textSize(16);
- * strokeWeight(0.5);
- *
- * line(0, 12, width, 12);
- * textAlign(CENTER, TOP);
- * text('TOP', 0, 12, width);
- *
- * line(0, 37, width, 37);
- * textAlign(CENTER, CENTER);
- * text('CENTER', 0, 37, width);
- *
- * line(0, 62, width, 62);
- * textAlign(CENTER, BASELINE);
- * text('BASELINE', 0, 62, width);
- *
- * line(0, 87, width, 87);
- * textAlign(CENTER, BOTTOM);
- * text('BOTTOM', 0, 87, width);
- */
-exports.textAlign = function (modeX, modeY) {
-	_currentEnv._txtAlignX = modeX;
-	if (modeY) {
-		_currentEnv._txtAlignY = modeY;
-	}
-};
-
-/**
- * Calculates and returns the width of any character or text string.
- *
- * @method textWidth
- * @param {String} theText the String of characters to measure
- * @return {Number}
- * @example
- * textSize(28);
- *
- * let aChar = 'P';
- * let cWidth = textWidth(aChar);
- * text(aChar, 0, 40);
- * line(cWidth, 0, cWidth, 50);
- *
- * let aString = 'p5.js';
- * let sWidth = textWidth(aString);
- * text(aString, 0, 85);
- * line(sWidth, 50, sWidth, 100);
- */
-exports.textWidth = function (theText) {
-	if (_currentEnv._font) {
-		return _currentEnv._font.StringWidth(theText);
-	} else {
-		throw "No font set, use textFont() first.";
-	}
-};
-
-/**
- * Gets the current font size.
- *
- * @method textSize
- * @return {Number}
- */
-exports.textSize = function () {
-	if (_currentEnv._font) {
-		return _currentEnv._font.height;
-	} else {
-		throw "No font set, use textFont() first.";
-	}
-};
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_p5util.js.html b/doc/html/jsboot_p5util.js.html deleted file mode 100644 index 4a4183cc..00000000 --- a/doc/html/jsboot_p5util.js.html +++ /dev/null @@ -1,1763 +0,0 @@ - - - - - - - Source: jsboot/p5util.js | Source: jsboot/p5util.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-	This file was derived from the p5.js source code at
-	https://github.com/processing/p5.js
-
-	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>
-
-    This library is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Lesser General Public
-    License as published by the Free Software Foundation; either
-    version 2.1 of the License, or (at your option) any later version.
-
-    This library is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-    Lesser General Public License for more details.
-
-    You should have received a copy of the GNU Lesser General Public
-    License along with this library; if not, write to the Free Software
-    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-/**
-* @module p5compat
-*/
-
-/**********************************************************************************************************************
- * array functions
- */
-
-/**
- * Adds a value to the end of an array. Extends the length of
- * the array by one. Maps to Array.push().
- *
- * @method append
- * @param {Array} array Array to append
- * @param {any} value to be added to the Array
- * @return {Array} the array that was appended to
- * @example
- * function setup() {
- *   var myArray = ['Mango', 'Apple', 'Papaya'];
- *   print(myArray); // ['Mango', 'Apple', 'Papaya']
- *
- *   append(myArray, 'Peach');
- *   print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
- * }
- */
-exports.append = function (array, value) {
-	array.push(value);
-	return array;
-};
-
-/**
- * Copies an array (or part of an array) to another array. The src array is
- * copied to the dst array, beginning at the position specified by
- * srcPosition and into the position specified by dstPosition. The number of
- * elements to copy is determined by length. Note that copying values
- * overwrites existing values in the destination array. To append values
- * instead of overwriting them, use concat().
- * <br><br>
- * The simplified version with only two arguments, arrayCopy(src, dst),
- * copies an entire array to another of the same size. It is equivalent to
- * arrayCopy(src, 0, dst, 0, src.length).
- * <br><br>
- * Using this function is far more efficient for copying array data than
- * iterating through a for() loop and copying each element individually.
- *
- * @method arrayCopy
- * @deprecated
- * @param {Array}  src           the source Array
- * @param {Integer} srcPosition  starting position in the source Array
- * @param {Array}  dst           the destination Array
- * @param {Integer} dstPosition   starting position in the destination Array
- * @param {Integer} length        number of Array elements to be copied
- *
- * @example
- * var src = ['A', 'B', 'C'];
- * var dst = [1, 2, 3];
- * var srcPosition = 1;
- * var dstPosition = 0;
- * var length = 2;
- *
- * print(src); // ['A', 'B', 'C']
- * print(dst); // [ 1 ,  2 ,  3 ]
- *
- * arrayCopy(src, srcPosition, dst, dstPosition, length);
- * print(dst); // ['B', 'C', 3]
- */
-exports.arrayCopy = function (src, srcPosition, dst, dstPosition, length) {
-	// the index to begin splicing from dst array
-	var start;
-	var end;
-
-	if (typeof length !== 'undefined') {
-		end = Math.min(length, src.length);
-		start = dstPosition;
-		src = src.slice(srcPosition, end + srcPosition);
-	} else {
-		if (typeof dst !== 'undefined') {
-			// src, dst, length
-			// rename  so we don't get confused
-			end = dst;
-			end = Math.min(end, src.length);
-		} else {
-			// src, dst
-			end = src.length;
-		}
-
-		start = 0;
-		// rename  so we don't get confused
-		dst = srcPosition;
-		src = src.slice(0, end);
-	}
-
-	// Since we are not returning the array and JavaScript is pass by reference
-	// we must modify the actual values of the array
-	// instead of reassigning arrays
-	Array.prototype.splice.apply(dst, [start, end].concat(src));
-};
-
-/**
- * Concatenates two arrays, maps to Array.concat(). Does not modify the
- * input arrays.
- *
- * @method concat
- * @param {Array} a first Array to concatenate
- * @param {Array} b second Array to concatenate
- * @return {Array} concatenated array
- *
- * @example
- * function setup() {
- *   var arr1 = ['A', 'B', 'C'];
- *   var arr2 = [1, 2, 3];
- *
- *   print(arr1); // ['A','B','C']
- *   print(arr2); // [1,2,3]
- *
- *   var arr3 = concat(arr1, arr2);
- *
- *   print(arr1); // ['A','B','C']
- *   print(arr2); // [1, 2, 3]
- *   print(arr3); // ['A','B','C', 1, 2, 3]
- * }
- */
-exports.concat = function (list0, list1) {
-	return list0.concat(list1);
-};
-
-/**
- * Reverses the order of an array, maps to Array.reverse()
- *
- * @method reverse
- * @param {Array} list Array to reverse
- * @return {Array} the reversed list
- * @example
- * function setup() {
- *   var myArray = ['A', 'B', 'C'];
- *   print(myArray); // ['A','B','C']
- *
- *   reverse(myArray);
- *   print(myArray); // ['C','B','A']
- * }
- */
-exports.reverse = function (list) {
-	return list.reverse();
-};
-
-/**
- * Decreases an array by one element and returns the shortened array,
- * maps to Array.pop().
- *
- * @method shorten
- * @param  {Array} list Array to shorten
- * @return {Array} shortened Array
- * @example
- * function setup() {
- *   var myArray = ['A', 'B', 'C'];
- *   print(myArray); // ['A', 'B', 'C']
- *   var newArray = shorten(myArray);
- *   print(myArray); // ['A','B','C']
- *   print(newArray); // ['A','B']
- * }
- */
-exports.shorten = function (list) {
-	list.pop();
-	return list;
-};
-
-/**
- * Randomizes the order of the elements of an array. Implements
- * <a href='http://Bost.Ocks.org/mike/shuffle/' target=_blank>
- * Fisher-Yates Shuffle Algorithm</a>.
- *
- * @method shuffle
- * @param  {Array}   array  Array to shuffle
- * @param  {Boolean} [bool] modify passed array
- * @return {Array}   shuffled Array
- * @example
- * function setup() {
- *   var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
- *   print(regularArr);
- *   shuffle(regularArr, true); // force modifications to passed array
- *   print(regularArr);
- *
- *   // By default shuffle() returns a shuffled cloned array:
- *   var newArr = shuffle(regularArr);
- *   print(regularArr);
- *   print(newArr);
- * }
- */
-exports.shuffle = function (arr, bool) {
-	var isView = ArrayBuffer && ArrayBuffer.isView && ArrayBuffer.isView(arr);
-	arr = bool || isView ? arr : arr.slice();
-
-	var rnd,
-		tmp,
-		idx = arr.length;
-	while (idx > 1) {
-		rnd = (Math.random() * idx) | 0;
-
-		tmp = arr[--idx];
-		arr[idx] = arr[rnd];
-		arr[rnd] = tmp;
-	}
-
-	return arr;
-};
-
-/**
- * Sorts an array of numbers from smallest to largest, or puts an array of
- * words in alphabetical order. The original array is not modified; a
- * re-ordered array is returned. The count parameter states the number of
- * elements to sort. For example, if there are 12 elements in an array and
- * count is set to 5, only the first 5 elements in the array will be sorted.
- *
- * @method sort
- * @param {Array} list Array to sort
- * @param {Integer} [count] number of elements to sort, starting from 0
- * @return {Array} the sorted list
- *
- * @example
- * function setup() {
- *   var words = ['banana', 'apple', 'pear', 'lime'];
- *   print(words); // ['banana', 'apple', 'pear', 'lime']
- *   var count = 4; // length of array
- *
- *   words = sort(words, count);
- *   print(words); // ['apple', 'banana', 'lime', 'pear']
- * }
- * 
- * function setup() {
- *   var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
- *   print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
- *   var count = 5; // Less than the length of the array
- *
- *   numbers = sort(numbers, count);
- *   print(numbers); // [1,2,5,6,14,9,8,12]
- * }
- */
-exports.sort = function (list, count) {
-	var arr = count ? list.slice(0, Math.min(count, list.length)) : list;
-	var rest = count ? list.slice(Math.min(count, list.length)) : [];
-	if (typeof arr[0] === 'string') {
-		arr = arr.sort();
-	} else {
-		arr = arr.sort(function (a, b) {
-			return a - b;
-		});
-	}
-	return arr.concat(rest);
-};
-
-/**
- * Inserts a value or an array of values into an existing array. The first
- * parameter specifies the initial array to be modified, and the second
- * parameter defines the data to be inserted. The third parameter is an index
- * value which specifies the array position from which to insert data.
- * (Remember that array index numbering starts at zero, so the first position
- * is 0, the second position is 1, and so on.)
- *
- * @method splice
- * @param {Array}  list Array to splice into
- * @param {any}    value value to be spliced in
- * @param {Integer} position in the array from which to insert data
- * @return {Array} the list
- *
- * @example
- * function setup() {
- *   var myArray = [0, 1, 2, 3, 4];
- *   var insArray = ['A', 'B', 'C'];
- *   print(myArray); // [0, 1, 2, 3, 4]
- *   print(insArray); // ['A','B','C']
- *
- *   splice(myArray, insArray, 3);
- *   print(myArray); // [0,1,2,'A','B','C',3,4]
- * }
- */
-exports.splice = function (list, value, index) {
-	// note that splice returns spliced elements and not an array
-	Array.prototype.splice.apply(list, [index, 0].concat(value));
-
-	return list;
-};
-
-/**
- * Extracts an array of elements from an existing array. The list parameter
- * defines the array from which the elements will be copied, and the start
- * and count parameters specify which elements to extract. If no count is
- * given, elements will be extracted from the start to the end of the array.
- * When specifying the start, remember that the first array element is 0.
- * This function does not change the source array.
- *
- * @method subset
- * @param  {Array}  list    Array to extract from
- * @param  {Integer} start   position to begin
- * @param  {Integer} [count] number of values to extract
- * @return {Array}          Array of extracted elements
- *
- * @example
- * function setup() {
- *   var myArray = [1, 2, 3, 4, 5];
- *   print(myArray); // [1, 2, 3, 4, 5]
- *
- *   var sub1 = subset(myArray, 0, 3);
- *   var sub2 = subset(myArray, 2, 2);
- *   print(sub1); // [1,2,3]
- *   print(sub2); // [3,4]
- * }
- */
-exports.subset = function (list, start, count) {
-	if (typeof count !== 'undefined') {
-		return list.slice(start, start + count);
-	} else {
-		return list.slice(start, list.length);
-	}
-};
-
-/**********************************************************************************************************************
- * conversion functions
- */
-
-/**
- * Converts a string to its floating point representation. The contents of a
- * string must resemble a number, or NaN (not a number) will be returned.
- * For example, float("1234.56") evaluates to 1234.56, but float("giraffe")
- * will return NaN.
- *
- * When an array of values is passed in, then an array of floats of the same
- * length is returned.
- *
- * @method float
- * @param {String}  str float string to parse
- * @return {Number}     floating point representation of string
- * @example
- * var str = '20';
- * var diameter = float(str);
- * ellipse(width / 2, height / 2, diameter, diameter);
- */
-exports.float = function (str) {
-	if (str instanceof Array) {
-		return str.map(parseFloat);
-	}
-	return parseFloat(str);
-};
-
-/**
- * Converts a boolean, string, or float to its integer representation.
- * When an array of values is passed in, then an int array of the same length
- * is returned.
- *
- * @method int
- * @param {String|Boolean|Number}       n value to parse
- * @param {Integer}       [radix] the radix to convert to (default: 10)
- * @return {Number}                     integer representation of value
- *
- * @example
- * print(int('10')); // 10
- * print(int(10.31)); // 10
- * print(int(-10)); // -10
- * print(int(true)); // 1
- * print(int(false)); // 0
- * print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
- */
-exports.int = function (n, radix) {
-	radix = radix || 10;
-	if (typeof n === 'string') {
-		return parseInt(n, radix);
-	} else if (typeof n === 'number') {
-		return n | 0;
-	} else if (typeof n === 'boolean') {
-		return n ? 1 : 0;
-	} else if (n instanceof Array) {
-		return n.map(function (n) {
-			return exports.int(n, radix);
-		});
-	}
-};
-
-/**
- * Converts a boolean, string or number to its string representation.
- * When an array of values is passed in, then an array of strings of the same
- * length is returned.
- *
- * @method str
- * @param {String|Boolean|Number|Array} n value to parse
- * @return {String}                     string representation of value
- * @example
- * print(str('10')); // "10"
- * print(str(10.31)); // "10.31"
- * print(str(-10)); // "-10"
- * print(str(true)); // "true"
- * print(str(false)); // "false"
- * print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
- */
-exports.str = function (n) {
-	if (n instanceof Array) {
-		return n.map(exports.str);
-	} else {
-		return String(n);
-	}
-};
-
-/**
- * Converts a number or string to its boolean representation.
- * For a number, any non-zero value (positive or negative) evaluates to true,
- * while zero evaluates to false. For a string, the value "true" evaluates to
- * true, while any other value evaluates to false. When an array of number or
- * string values is passed in, then a array of booleans of the same length is
- * returned.
- *
- * @method boolean
- * @param {String|Boolean|Number|Array} n value to parse
- * @return {Boolean}                    boolean representation of value
- * @example
- * print(boolean(0)); // false
- * print(boolean(1)); // true
- * print(boolean('true')); // true
- * print(boolean('abcd')); // false
- * print(boolean([0, 12, 'true'])); // [false, true, false]
- */
-exports.boolean = function (n) {
-	if (typeof n === 'number') {
-		return n !== 0;
-	} else if (typeof n === 'string') {
-		return n.toLowerCase() === 'true';
-	} else if (typeof n === 'boolean') {
-		return n;
-	} else if (n instanceof Array) {
-		return n.map(exports.boolean);
-	}
-};
-
-/**
- * Converts a number, string representation of a number, or boolean to its byte
- * representation. A byte can be only a whole number between -128 and 127, so
- * when a value outside of this range is converted, it wraps around to the
- * corresponding byte representation. When an array of number, string or boolean
- * values is passed in, then an array of bytes the same length is returned.
- *
- * @method byte
- * @param {String|Boolean|Number}       n value to parse
- * @return {Number}                     byte representation of value
- *
- * @example
- * print(byte(127)); // 127
- * print(byte(128)); // -128
- * print(byte(23.4)); // 23
- * print(byte('23.4')); // 23
- * print(byte('hello')); // NaN
- * print(byte(true)); // 1
- * print(byte([0, 255, '100'])); // [0, -1, 100]
- */
-exports.byte = function (n) {
-	var nn = exports.int(n, 10);
-	if (typeof nn === 'number') {
-		return (nn + 128) % 256 - 128;
-	} else if (nn instanceof Array) {
-		return nn.map(exports.byte);
-	}
-};
-
-/**
- * Converts a number or string to its corresponding single-character
- * string representation. If a string parameter is provided, it is first
- * parsed as an integer and then translated into a single-character string.
- * When an array of number or string values is passed in, then an array of
- * single-character strings of the same length is returned.
- *
- * @method char
- * @param {String|Number}       n value to parse
- * @return {String}             string representation of value
- *
- * @example
- * print(char(65)); // "A"
- * print(char('65')); // "A"
- * print(char([65, 66, 67])); // [ "A", "B", "C" ]
- * print(join(char([65, 66, 67]), '')); // "ABC"
- */
-exports.char = function (n) {
-	if (typeof n === 'number' && !isNaN(n)) {
-		return String.fromCharCode(n);
-	} else if (n instanceof Array) {
-		return n.map(exports.char);
-	} else if (typeof n === 'string') {
-		return exports.char(parseInt(n, 10));
-	}
-};
-
-/**
- * Converts a single-character string to its corresponding integer
- * representation. When an array of single-character string values is passed
- * in, then an array of integers of the same length is returned.
- *
- * @method unchar
- * @param {String} n     value to parse
- * @return {Number}      integer representation of value
- *
- * @example
- * print(unchar('A')); // 65
- * print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
- * print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
- */
-exports.unchar = function (n) {
-	if (typeof n === 'string' && n.length === 1) {
-		return n.charCodeAt(0);
-	} else if (n instanceof Array) {
-		return n.map(exports.unchar);
-	}
-};
-
-/**
- * Converts a number to a string in its equivalent hexadecimal notation. If a
- * second parameter is passed, it is used to set the number of characters to
- * generate in the hexadecimal notation. When an array is passed in, an
- * array of strings in hexadecimal notation of the same length is returned.
- *
- * @method hex
- * @param {Number} n     value to parse
- * @param {Number} [digits]
- * @return {String}      hexadecimal string representation of value
- *
- * @example
- * print(hex(255)); // "000000FF"
- * print(hex(255, 6)); // "0000FF"
- * print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- */
-exports.hex = function (n, digits) {
-	digits = digits === undefined || digits === null ? (digits = 8) : digits;
-	if (n instanceof Array) {
-		return n.map(function (n) {
-			return exports.hex(n, digits);
-		});
-	} else if (typeof n === 'number') {
-		if (n < 0) {
-			n = 0xffffffff + n + 1;
-		}
-		var hex = Number(n)
-			.toString(16)
-			.toUpperCase();
-		while (hex.length < digits) {
-			hex = '0' + hex;
-		}
-		if (hex.length >= digits) {
-			hex = hex.substring(hex.length - digits, hex.length);
-		}
-		return hex;
-	}
-};
-
-/**
- * Converts a string representation of a hexadecimal number to its equivalent
- * integer value. When an array of strings in hexadecimal notation is passed
- * in, an array of integers of the same length is returned.
- *
- * @method unhex
- * @param {String} n value to parse
- * @return {Number}      integer representation of hexadecimal value
- *
- * @example
- * print(unhex('A')); // 10
- * print(unhex('FF')); // 255
- * print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
- */
-exports.unhex = function (n) {
-	if (n instanceof Array) {
-		return n.map(exports.unhex);
-	} else {
-		return parseInt('0x' + n, 16);
-	}
-};
-
-/**********************************************************************************************************************
- * string functions
- */
-
-/**
- * Combines an array of Strings into one String, each separated by the
- * character(s) used for the separator parameter. To join arrays of ints or
- * floats, it's necessary to first convert them to Strings using nf() or
- * nfs().
- *
- * @method join
- * @param  {Array}  list      array of Strings to be joined
- * @param  {String} separator String to be placed between each item
- * @return {String}           joined String
- * @example
- * var array = ['Hello', 'world!'];
- * var separator = ' ';
- * var message = join(array, separator);
- * text(message, 5, 50);
- */
-exports.join = function (list, separator) {
-	p5._validateParameters('join', arguments);
-	return list.join(separator);
-};
-
-/**
- * This function is used to apply a regular expression to a piece of text,
- * and return matching groups (elements found inside parentheses) as a
- * String array. If there are no matches, a null value will be returned.
- * If no groups are specified in the regular expression, but the sequence
- * matches, an array of length 1 (with the matched text as the first element
- * of the array) will be returned.
- * <br><br>
- * To use the function, first check to see if the result is null. If the
- * result is null, then the sequence did not match at all. If the sequence
- * did match, an array is returned.
- * <br><br>
- * If there are groups (specified by sets of parentheses) in the regular
- * expression, then the contents of each will be returned in the array.
- * Element [0] of a regular expression match returns the entire matching
- * string, and the match groups start at element [1] (the first group is [1],
- * the second [2], and so on).
- *
- * @method match
- * @param  {String} str    the String to be searched
- * @param  {String} regexp the regexp to be used for matching
- * @return {String[]}      Array of Strings found
- * @example
- * var string = 'Hello p5js*!';
- * var regexp = 'p5js\\*';
- * var m = match(string, regexp);
- * text(m, 5, 50);
- */
-exports.match = function (str, reg) {
-	p5._validateParameters('match', arguments);
-	return str.match(reg);
-};
-
-/**
- * This function is used to apply a regular expression to a piece of text,
- * and return a list of matching groups (elements found inside parentheses)
- * as a two-dimensional String array. If there are no matches, a null value
- * will be returned. If no groups are specified in the regular expression,
- * but the sequence matches, a two dimensional array is still returned, but
- * the second dimension is only of length one.
- * <br><br>
- * To use the function, first check to see if the result is null. If the
- * result is null, then the sequence did not match at all. If the sequence
- * did match, a 2D array is returned.
- * <br><br>
- * If there are groups (specified by sets of parentheses) in the regular
- * expression, then the contents of each will be returned in the array.
- * Assuming a loop with counter variable i, element [i][0] of a regular
- * expression match returns the entire matching string, and the match groups
- * start at element [i][1] (the first group is [i][1], the second [i][2],
- * and so on).
- *
- * @method matchAll
- * @param  {String} str    the String to be searched
- * @param  {String} regexp the regexp to be used for matching
- * @return {String[]}         2d Array of Strings found
- * @example
- * var string = 'Hello p5js*! Hello world!';
- * var regexp = 'Hello';
- * matchAll(string, regexp);
- */
-exports.matchAll = function (str, reg) {
-	p5._validateParameters('matchAll', arguments);
-	var re = new RegExp(reg, 'g');
-	var match = re.exec(str);
-	var matches = [];
-	while (match !== null) {
-		matches.push(match);
-		// matched text: match[0]
-		// match start: match.index
-		// capturing group n: match[n]
-		match = re.exec(str);
-	}
-	return matches;
-};
-
-/**
- * Utility function for formatting numbers into strings. There are two
- * versions: one for formatting floats, and one for formatting ints.
- * The values for the digits, left, and right parameters should always
- * be positive integers.
- * (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter
- * if greater than the current length of the number.
- * For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123
- * (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than
- * the result will be 123.200.
- *
- * @method nf
- * @param {Number|String}       num      the Number to format
- * @param {Integer|String}      [left]   number of digits to the left of the
- *                                decimal point
- * @param {Integer|String}      [right]  number of digits to the right of the
- *                                decimal point
- * @return {String}               formatted String
- *
- * @example
- * var myFont;
- * function preload() {
- *   myFont = loadFont('assets/fonts/inconsolata.ttf');
- * }
- * function setup() {
- *   background(200);
- *   var num1 = 321;
- *   var num2 = -1321;
- *
- *   noStroke();
- *   fill(0);
- *   textFont(myFont);
- *   textSize(22);
- *
- *   text(nf(num1, 4, 2), 10, 30);
- *   text(nf(num2, 4, 2), 10, 80);
- *   // Draw dividing line
- *   stroke(120);
- *   line(0, 50, width, 50);
- * }
- */
-exports.nf = function (nums, left, right) {
-	p5._validateParameters('nf', arguments);
-	if (nums instanceof Array) {
-		return nums.map(function (x) {
-			return doNf(x, left, right);
-		});
-	} else {
-		var typeOfFirst = Object.prototype.toString.call(nums);
-		if (typeOfFirst === '[object Arguments]') {
-			if (nums.length === 3) {
-				return this.nf(nums[0], nums[1], nums[2]);
-			} else if (nums.length === 2) {
-				return this.nf(nums[0], nums[1]);
-			} else {
-				return this.nf(nums[0]);
-			}
-		} else {
-			return doNf(nums, left, right);
-		}
-	}
-};
-
-function doNf(num, left, right) {
-	var neg = num < 0;
-	var n = neg ? num.toString().substring(1) : num.toString();
-	var decimalInd = n.indexOf('.');
-	var intPart = decimalInd !== -1 ? n.substring(0, decimalInd) : n;
-	var decPart = decimalInd !== -1 ? n.substring(decimalInd + 1) : '';
-	var str = neg ? '-' : '';
-	if (typeof right !== 'undefined') {
-		var decimal = '';
-		if (decimalInd !== -1 || right - decPart.length > 0) {
-			decimal = '.';
-		}
-		if (decPart.length > right) {
-			decPart = decPart.substring(0, right);
-		}
-		for (var i = 0; i < left - intPart.length; i++) {
-			str += '0';
-		}
-		str += intPart;
-		str += decimal;
-		str += decPart;
-		for (var j = 0; j < right - decPart.length; j++) {
-			str += '0';
-		}
-		return str;
-	} else {
-		for (var k = 0; k < Math.max(left - intPart.length, 0); k++) {
-			str += '0';
-		}
-		str += n;
-		return str;
-	}
-}
-
-/**
- * Utility function for formatting numbers into strings and placing
- * appropriate commas to mark units of 1000. There are two versions: one
- * for formatting ints, and one for formatting an array of ints. The value
- * for the right parameter should always be a positive integer.
- *
- * @method nfc
- * @param  {Number|String}   num     the Number to format
- * @param  {Integer|String}  [right] number of digits to the right of the
- *                                  decimal point
- * @return {String}           formatted String
- *
- * @example
- * function setup() {
- *   background(200);
- *   var num = 11253106.115;
- *   var numArr = [1, 1, 2];
- *
- *   noStroke();
- *   fill(0);
- *   textSize(12);
- *
- *   // Draw formatted numbers
- *   text(nfc(num, 4), 10, 30);
- *   text(nfc(numArr, 2), 10, 80);
- *
- *   // Draw dividing line
- *   stroke(120);
- *   line(0, 50, width, 50);
- * }
- */
-exports.nfc = function (num, right) {
-	p5._validateParameters('nfc', arguments);
-	if (num instanceof Array) {
-		return num.map(function (x) {
-			return doNfc(x, right);
-		});
-	} else {
-		return doNfc(num, right);
-	}
-};
-
-function doNfc(num, right) {
-	num = num.toString();
-	var dec = num.indexOf('.');
-	var rem = dec !== -1 ? num.substring(dec) : '';
-	var n = dec !== -1 ? num.substring(0, dec) : num;
-	n = n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-	if (right === 0) {
-		rem = '';
-	} else if (typeof right !== 'undefined') {
-		if (right > rem.length) {
-			rem += dec === -1 ? '.' : '';
-			var len = right - rem.length + 1;
-			for (var i = 0; i < len; i++) {
-				rem += '0';
-			}
-		} else {
-			rem = rem.substring(0, right + 1);
-		}
-	}
-	return n + rem;
-}
-
-/**
- * Utility function for formatting numbers into strings. Similar to nf() but
- * puts a "+" in front of positive numbers and a "-" in front of negative
- * numbers. There are two versions: one for formatting floats, and one for
- * formatting ints. The values for left, and right parameters
- * should always be positive integers.
- *
- * @method nfp
- * @param {Number} num      the Number to format
- * @param {Integer}      [left]   number of digits to the left of the decimal
- *                                point
- * @param {Integer}      [right]  number of digits to the right of the
- *                                decimal point
- * @return {String}         formatted String
- *
- * @example
- * function setup() {
- *   background(200);
- *   var num1 = 11253106.115;
- *   var num2 = -11253106.115;
- *
- *   noStroke();
- *   fill(0);
- *   textSize(12);
- *
- *   // Draw formatted numbers
- *   text(nfp(num1, 4, 2), 10, 30);
- *   text(nfp(num2, 4, 2), 10, 80);
- *
- *   // Draw dividing line
- *   stroke(120);
- *   line(0, 50, width, 50);
- * }
- */
-exports.nfp = function () {
-	p5._validateParameters('nfp', arguments);
-	var nfRes = exports.nf.apply(this, arguments);
-	if (nfRes instanceof Array) {
-		return nfRes.map(addNfp);
-	} else {
-		return addNfp(nfRes);
-	}
-};
-
-function addNfp(num) {
-	return parseFloat(num) > 0 ? '+' + num.toString() : num.toString();
-}
-
-/**
- * Utility function for formatting numbers into strings. Similar to nf() but
- * puts an additional "_" (space) in front of positive numbers just in case to align it with negative
- * numbers which includes "-" (minus) sign.
- * The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive
- * number with some negative number (See the example to get a clear picture).
- * There are two versions: one for formatting float, and one for formatting int.
- * The values for the digits, left, and right parameters should always be positive integers.
- * (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using.
- * (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter
- * if greater than the current length of the number.
- * For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123
- * (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than
- * the result will be 123.200.
- *
- * @method nfs
- * @param {Number}       num      the Number to format
- * @param {Integer}      [left]   number of digits to the left of the decimal
- *                                point
- * @param {Integer}      [right]  number of digits to the right of the
- *                                decimal point
- * @return {String}         formatted String
- *
- * @example
- * var myFont;
- * function preload() {
- *   myFont = loadFont('assets/fonts/inconsolata.ttf');
- * }
- * function setup() {
- *   background(200);
- *   var num1 = 321;
- *   var num2 = -1321;
- *
- *   noStroke();
- *   fill(0);
- *   textFont(myFont);
- *   textSize(22);
- *
- *   // nfs() aligns num1 (positive number) with num2 (negative number) by
- *   // adding a blank space in front of the num1 (positive number)
- *   // [left = 4] in num1 add one 0 in front, to align the digits with num2
- *   // [right = 2] in num1 and num2 adds two 0's after both numbers
- *   // To see the differences check the example of nf() too.
- *   text(nfs(num1, 4, 2), 10, 30);
- *   text(nfs(num2, 4, 2), 10, 80);
- *   // Draw dividing line
- *   stroke(120);
- *   line(0, 50, width, 50);
- * }
- */
-exports.nfs = function () {
-	p5._validateParameters('nfs', arguments);
-	var nfRes = exports.nf.apply(this, arguments);
-	if (nfRes instanceof Array) {
-		return nfRes.map(addNfs);
-	} else {
-		return addNfs(nfRes);
-	}
-};
-
-function addNfs(num) {
-	return parseFloat(num) > 0 ? ' ' + num.toString() : num.toString();
-}
-
-/**
- * The split() function maps to String.split(), it breaks a String into
- * pieces using a character or string as the delimiter. The delim parameter
- * specifies the character or characters that mark the boundaries between
- * each piece. A String[] array is returned that contains each of the pieces.
- *
- * The splitTokens() function works in a similar fashion, except that it
- * splits using a range of characters instead of a specific character or
- * sequence.
- *
- * @method split
- * @param  {String} value the String to be split
- * @param  {String} delim the String used to separate the data
- * @return {String[]}  Array of Strings
- * @example
- * var names = 'Pat,Xio,Alex';
- * var splitString = split(names, ',');
- * text(splitString[0], 5, 30);
- * text(splitString[1], 5, 50);
- * text(splitString[2], 5, 70);
- */
-exports.split = function (str, delim) {
-	p5._validateParameters('split', arguments);
-	return str.split(delim);
-};
-
-/**
- * The splitTokens() function splits a String at one or many character
- * delimiters or "tokens." The delim parameter specifies the character or
- * characters to be used as a boundary.
- * <br><br>
- * If no delim characters are specified, any whitespace character is used to
- * split. Whitespace characters include tab (\t), line feed (\n), carriage
- * return (\r), form feed (\f), and space.
- *
- * @method splitTokens
- * @param  {String} value   the String to be split
- * @param  {String} [delim] list of individual Strings that will be used as
- *                          separators
- * @return {String[]}          Array of Strings
- * @example
- * function setup() {
- *   var myStr = 'Mango, Banana, Lime';
- *   var myStrArr = splitTokens(myStr, ',');
- *
- *   print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
- * }
- */
-exports.splitTokens = function (value, delims) {
-	p5._validateParameters('splitTokens', arguments);
-	var d;
-	if (typeof delims !== 'undefined') {
-		var str = delims;
-		var sqc = /\]/g.exec(str);
-		var sqo = /\[/g.exec(str);
-		if (sqo && sqc) {
-			str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
-			sqo = /\[/g.exec(str);
-			str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
-			d = new RegExp('[\\[' + str + '\\]]', 'g');
-		} else if (sqc) {
-			str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
-			d = new RegExp('[' + str + '\\]]', 'g');
-		} else if (sqo) {
-			str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
-			d = new RegExp('[' + str + '\\[]', 'g');
-		} else {
-			d = new RegExp('[' + str + ']', 'g');
-		}
-	} else {
-		d = /\s/g;
-	}
-	return value.split(d).filter(function (n) {
-		return n;
-	});
-};
-
-/**
- * Removes whitespace characters from the beginning and end of a String. In
- * addition to standard whitespace characters such as space, carriage return,
- * and tab, this function also removes the Unicode "nbsp" character.
- *
- * @method trim
- * @param  {String} str a String to be trimmed
- * @return {String}       a trimmed String
- *
- * @example
- * var string = trim('  No new lines\n   ');
- * text(string + ' here', 2, 50);
- */
-exports.trim = function (str) {
-	p5._validateParameters('trim', arguments);
-	if (str instanceof Array) {
-		return str.map(this.trim);
-	} else {
-		return str.trim();
-	}
-};
-
-/**********************************************************************************************************************
- * date functions
- */
-
-/**
- * The day() function
- * returns the current day as a value from 1 - 31.
- *
- * @method day
- * @return {Integer} the current day
- * @example
- * var d = day();
- * text('Current day: \n' + d, 5, 50);
- */
-exports.day = function () {
-	return new Date().getDate();
-};
-
-/**
- * The hour() function
- * returns the current hour as a value from 0 - 23.
- *
- * @method hour
- * @return {Integer} the current hour
- * @example
- * var h = hour();
- * text('Current hour:\n' + h, 5, 50);
- */
-exports.hour = function () {
-	return new Date().getHours();
-};
-
-/**
- * The minute() function
- * returns the current minute as a value from 0 - 59.
- *
- * @method minute
- * @return {Integer} the current minute
- * @example
- * var m = minute();
- * text('Current minute: \n' + m, 5, 50);
- */
-exports.minute = function () {
-	return new Date().getMinutes();
-};
-
-/**
- * Returns the number of milliseconds (thousandths of a second) since
- * starting the program. This information is often used for timing events and
- * animation sequences.
- *
- * @method millis
- * @return {Number} the number of milliseconds since starting the program
- * @example
- * var millisecond = millis();
- * text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
- */
-exports.millis = function () {
-	return MsecTime();
-};
-
-/**
- * The month() function returns the current month as a value from 1 - 12.
- *
- * @method month
- * @return {Integer} the current month
- * @example
- * var m = month();
- * text('Current month: \n' + m, 5, 50);
- */
-exports.month = function () {
-	return new Date().getMonth() + 1; //January is 0!
-};
-
-/**
- * The second() function returns the current second as a value from 0 - 59.
- *
- * @method second
- * @return {Integer} the current second
- * @example
- * var s = second();
- * text('Current second: \n' + s, 5, 50);
- */
-exports.second = function () {
-	return new Date().getSeconds();
-};
-
-/**
- * The year() returns the current year as an integer (2014, 2015, 2016, etc).
- *
- * @method year
- * @return {Integer} the current year
- * @example
- * var y = year();
- * text('Current year: \n' + y, 5, 50);
- */
-exports.year = function () {
-	return new Date().getFullYear();
-};
-
-/**********************************************************************************************************************
- * dictionary
- */
-
-/**
- *
- * Creates a new instance of p5.StringDict using the key-value pair
- * or the object you provide.
- *
- * @method createStringDict
- * @param {String} key
- * @param {String} value
- * @return {StringDict}
- *
- * @example
- * function setup() {
- *   let myDictionary = createStringDict('p5', 'js');
- *   print(myDictionary.hasKey('p5')); // logs true to console
- *
- *   let anotherDictionary = createStringDict({ happy: 'coding' });
- *   print(anotherDictionary.hasKey('happy')); // logs true to console
- * }
- */
-exports.createStringDict = function (key, value) {
-	return new StringDict(key, value);
-};
-
-/**
- *
- * Creates a new instance of NumberDict using the key-value pair
- * or object you provide.
- *
- * @method createNumberDict
- * @param {Number} key
- * @param {Number} value
- * @return {NumberDict}
- *
- * @example
- * function setup() {
- *   let myDictionary = createNumberDict(100, 42);
- *   print(myDictionary.hasKey(100)); // logs true to console
- *
- *   let anotherDictionary = createNumberDict({ 200: 84 });
- *   print(anotherDictionary.hasKey(200)); // logs true to console
- * }
- */
-exports.createNumberDict = function (key, value) {
-	return new NumberDict(key, value);
-};
-
-/**
-* @module p5compat.TypedDict
-*/
-
-/**
- * Base class for all p5.Dictionary types. Specifically
- * typed Dictionary classes inherit from this class.
- *
- * @class TypedDict
- */
-exports.TypedDict = function (key, value) {
-	if (key instanceof Object) {
-		this.data = key;
-	} else {
-		this.data = {};
-		this.data[key] = value;
-	}
-	return this;
-};
-
-/**
- * Returns the number of key-value pairs currently stored in the Dictionary.
- *
- * @method size
- * @return {Integer} the number of key-value pairs in the Dictionary
- *
- * @example
- * function setup() {
- *   let myDictionary = createNumberDict(1, 10);
- *   myDictionary.create(2, 20);
- *   myDictionary.create(3, 30);
- *   print(myDictionary.size()); // logs 3 to the console
- * }
- */
-exports.TypedDict.prototype.size = function () {
-	return Object.keys(this.data).length;
-};
-
-/**
- * Returns true if the given key exists in the Dictionary,
- * otherwise returns false.
- *
- * @method hasKey
- * @param {Number|String} key that you want to look up
- * @return {Boolean} whether that key exists in Dictionary
- *
- * @example
- * function setup() {
- *   let myDictionary = createStringDict('p5', 'js');
- *   print(myDictionary.hasKey('p5')); // logs true to console
- * }
- */
-exports.TypedDict.prototype.hasKey = function (key) {
-	return this.data.hasOwnProperty(key);
-};
-
-/**
- * Returns the value stored at the given key.
- *
- * @method get
- * @param {Number|String} the key you want to access
- * @return {Number|String} the value stored at that key
- *
- * @example
- * function setup() {
- *   let myDictionary = createStringDict('p5', 'js');
- *   let myValue = myDictionary.get('p5');
- *   print(myValue === 'js'); // logs true to console
- * }
- */
-exports.TypedDict.prototype.get = function (key) {
-	if (this.data.hasOwnProperty(key)) {
-		return this.data[key];
-	} else {
-		Println(key + ' does not exist in this Dictionary');
-	}
-};
-
-/**
- * Updates the value associated with the given key in case it already exists
- * in the Dictionary. Otherwise a new key-value pair is added.
- *
- * @method set
- * @param {Number|String} key
- * @param {Number|String} value
- *
- * @example
- * function setup() {
- *   let myDictionary = createStringDict('p5', 'js');
- *   myDictionary.set('p5', 'JS');
- *   myDictionary.print(); // logs "key: p5 - value: JS" to console
- * }
- */
-
-exports.TypedDict.prototype.set = function (key, value) {
-	if (this._validate(value)) {
-		this.data[key] = value;
-	} else {
-		Println('Those values dont work for this dictionary type.');
-	}
-};
-
-/**
- * private helper function to handle the user passing in objects
- * during construction or calls to create()
- */
-exports.TypedDict.prototype._addObj = function (obj) {
-	for (var key in obj) {
-		this.set(key, obj[key]);
-	}
-};
-
-/**
- * Creates a new key-value pair in the Dictionary.
- *
- * @method create
- * @param {Number|String} key
- * @param {Number|String} value
- *
- * @example
- * function setup() {
- *   let myDictionary = createStringDict('p5', 'js');
- *   myDictionary.create('happy', 'coding');
- *   myDictionary.print();
- *   // above logs "key: p5 - value: js, key: happy - value: coding" to console
- * }
- */
-exports.TypedDict.prototype.create = function (key, value) {
-	if (key instanceof Object && typeof value === 'undefined') {
-		this._addObj(key);
-	} else if (typeof key !== 'undefined') {
-		this.set(key, value);
-	} else {
-		Println(
-			'In order to create a new Dictionary entry you must pass ' +
-			'an object or a key, value pair'
-		);
-	}
-};
-
-/**
- * Removes all previously stored key-value pairs from the Dictionary.
- *
- * @method clear
- * @example
- * function setup() {
- *   let myDictionary = createStringDict('p5', 'js');
- *   print(myDictionary.hasKey('p5')); // prints 'true'
- *   myDictionary.clear();
- *   print(myDictionary.hasKey('p5')); // prints 'false'
- * }
- */
-exports.TypedDict.prototype.clear = function () {
-	this.data = {};
-};
-
-/**
- * Removes the key-value pair stored at the given key from the Dictionary.
- *
- * @method remove
- * @param {Number|String} key for the pair to remove
- *
- * @example
- * function setup() {
- *   let myDictionary = createStringDict('p5', 'js');
- *   myDictionary.create('happy', 'coding');
- *   myDictionary.print();
- *   // above logs "key: p5 - value: js, key: happy - value: coding" to console
- *   myDictionary.remove('p5');
- *   myDictionary.print();
- *   // above logs "key: happy value: coding" to console
- * }
- */
-exports.TypedDict.prototype.remove = function (key) {
-	if (this.data.hasOwnProperty(key)) {
-		delete this.data[key];
-	} else {
-		throw new Error(key + ' does not exist in this Dictionary');
-	}
-};
-
-/**
- * Logs the set of items currently stored in the Dictionary to the console.
- *
- * @method print
- *
- * @example
- * function setup() {
- *   let myDictionary = createStringDict('p5', 'js');
- *   myDictionary.create('happy', 'coding');
- *   myDictionary.print();
- *   // above logs "key: p5 - value: js, key: happy - value: coding" to console
- * }
- */
-exports.TypedDict.prototype.print = function () {
-	for (var item in this.data) {
-		Println('key:' + item + ' value:' + this.data[item]);
-	}
-};
-
-/**
- * Converts the Dictionary into a JSON file for local download.
- *
- * @method saveJSON
- * @example
- * function setup() {
- *   createCanvas(100, 100);
- *   background(200);
- *   text('click here to save', 10, 10, 70, 80);
- * }
- *
- * function mousePressed() {
- *   if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
- *     createStringDict({
- *       john: 1940,
- *       paul: 1942,
- *       george: 1943,
- *       ringo: 1940
- *     }).saveJSON('beatles');
- *   }
- * }
- */
-exports.TypedDict.prototype.saveJSON = function (filename, opt) {
-	prototype.saveJSON(this.data, filename, opt);
-};
-
-/**
- * private helper function to ensure that the user passed in valid
- * values for the Dictionary type
- */
-exports.TypedDict.prototype._validate = function (value) {
-	return true;
-};
-
-/**
-* @module p5compat.StringDict
-*/
-
-/**
- * A simple Dictionary class for Strings.
- *
- * @class StringDict
- * @extends TypedDict
- */
-
-exports.StringDict = function () {
-	TypedDict.apply(this, arguments);
-};
-
-exports.StringDict.prototype = Object.create(exports.TypedDict.prototype);
-
-exports.StringDict.prototype._validate = function (value) {
-	return typeof value === 'string';
-};
-
-/**
-* @module p5compat.NumberDict
-*/
-
-/**
- * A simple Dictionary class for Numbers.
- *
- * @class NumberDict
- * @extends TypedDict
- */
-exports.NumberDict = function () {
-	TypedDict.apply(this, arguments);
-};
-
-exports.NumberDict.prototype = Object.create(exports.TypedDict.prototype);
-
-/**
- * private helper function to ensure that the user passed in valid
- * values for the Dictionary type
- */
-exports.NumberDict.prototype._validate = function (value) {
-	return typeof value === 'number';
-};
-
-/**
- * Add the given number to the value currently stored at the given key.
- * The sum then replaces the value previously stored in the Dictionary.
- *
- * @method add
- * @param {Number} Key for the value you wish to add to
- * @param {Number} Number to add to the value
- * @example
- * function setup() {
- *   let myDictionary = createNumberDict(2, 5);
- *   myDictionary.add(2, 2);
- *   print(myDictionary.get(2)); // logs 7 to console.
- * }
- */
-exports.NumberDict.prototype.add = function (key, amount) {
-	if (this.data.hasOwnProperty(key)) {
-		this.data[key] += amount;
-	} else {
-		Println('The key - ' + key + ' does not exist in this dictionary.');
-	}
-};
-
-/**
- * Subtract the given number from the value currently stored at the given key.
- * The difference then replaces the value previously stored in the Dictionary.
- *
- * @method sub
- * @param {Number} Key for the value you wish to subtract from
- * @param {Number} Number to subtract from the value
- * @example
- * function setup() {
- *   let myDictionary = createNumberDict(2, 5);
- *   myDictionary.sub(2, 2);
- *   print(myDictionary.get(2)); // logs 3 to console.
- * }
- */
-exports.NumberDict.prototype.sub = function (key, amount) {
-	this.add(key, -amount);
-};
-
-/**
- * Multiply the given number with the value currently stored at the given key.
- * The product then replaces the value previously stored in the Dictionary.
- *
- * @method mult
- * @param {Number} Key for value you wish to multiply
- * @param {Number} Amount to multiply the value by
- * @example
- * function setup() {
- *   let myDictionary = createNumberDict(2, 4);
- *   myDictionary.mult(2, 2);
- *   print(myDictionary.get(2)); // logs 8 to console.
- * }
- */
-exports.NumberDict.prototype.mult = function (key, amount) {
-	if (this.data.hasOwnProperty(key)) {
-		this.data[key] *= amount;
-	} else {
-		Println('The key - ' + key + ' does not exist in this dictionary.');
-	}
-};
-
-/**
- * Divide the given number with the value currently stored at the given key.
- * The quotient then replaces the value previously stored in the Dictionary.
- *
- * @method div
- * @param {Number} Key for value you wish to divide
- * @param {Number} Amount to divide the value by
- * @example
- * function setup() {
- *   let myDictionary = createNumberDict(2, 8);
- *   myDictionary.div(2, 2);
- *   print(myDictionary.get(2)); // logs 4 to console.
- * }
- */
-exports.NumberDict.prototype.div = function (key, amount) {
-	if (this.data.hasOwnProperty(key)) {
-		this.data[key] /= amount;
-	} else {
-		Println('The key - ' + key + ' does not exist in this dictionary.');
-	}
-};
-
-/**
- * private helper function for finding lowest or highest value
- * the argument 'flip' is used to flip the comparison arrow
- * from 'less than' to 'greater than'
- */
-exports.NumberDict.prototype._valueTest = function (flip) {
-	if (Object.keys(this.data).length === 0) {
-		throw new Error(
-			'Unable to search for a minimum or maximum value on an empty NumberDict'
-		);
-	} else if (Object.keys(this.data).length === 1) {
-		return this.data[Object.keys(this.data)[0]];
-	} else {
-		var result = this.data[Object.keys(this.data)[0]];
-		for (var key in this.data) {
-			if (this.data[key] * flip < result * flip) {
-				result = this.data[key];
-			}
-		}
-		return result;
-	}
-};
-
-/**
- * Return the lowest number currently stored in the Dictionary.
- *
- * @method minValue
- * @return {Number}
- * @example
- * function setup() {
- *   let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
- *   let lowestValue = myDictionary.minValue(); // value is -10
- *   print(lowestValue);
- * }
- *
- */
-exports.NumberDict.prototype.minValue = function () {
-	return this._valueTest(1);
-};
-
-/**
- * Return the highest number currently stored in the Dictionary.
- *
- * @method maxValue
- * @return {Number}
- * @example
- * function setup() {
- *   let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
- *   let highestValue = myDictionary.maxValue(); // value is 3
- *   print(highestValue);
- * }
- */
-exports.NumberDict.prototype.maxValue = function () {
-	return this._valueTest(-1);
-};
-
-/**
- * private helper function for finding lowest or highest key
- * the argument 'flip' is used to flip the comparison arrow
- * from 'less than' to 'greater than'
- *
- */
-exports.NumberDict.prototype._keyTest = function (flip) {
-	if (Object.keys(this.data).length === 0) {
-		throw new Error('Unable to use minValue on an empty NumberDict');
-	} else if (Object.keys(this.data).length === 1) {
-		return Object.keys(this.data)[0];
-	} else {
-		var result = Object.keys(this.data)[0];
-		for (var i = 1; i < Object.keys(this.data).length; i++) {
-			if (Object.keys(this.data)[i] * flip < result * flip) {
-				result = Object.keys(this.data)[i];
-			}
-		}
-		return result;
-	}
-};
-
-/**
- * Return the lowest key currently used in the Dictionary.
- *
- * @method minKey
- * @return {Number}
- * @example
- * function setup() {
- *   let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
- *   let lowestKey = myDictionary.minKey(); // value is 1.2
- *   print(lowestKey);
- * }
- */
-exports.NumberDict.prototype.minKey = function () {
-	return this._keyTest(1);
-};
-
-/**
- * Return the highest key currently used in the Dictionary.
- *
- * @method maxKey
- * @return {Number}
- * @example
- * function setup() {
- *   let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
- *   let highestKey = myDictionary.maxKey(); // value is 4
- *   print(highestKey);
- * }
- */
-exports.NumberDict.prototype.maxKey = function () {
-	return this._keyTest(-1);
-};
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/jsboot_p5vect.js.html b/doc/html/jsboot_p5vect.js.html deleted file mode 100644 index a736183f..00000000 --- a/doc/html/jsboot_p5vect.js.html +++ /dev/null @@ -1,1532 +0,0 @@ - - - - - - - Source: jsboot/p5vect.js | Source: jsboot/p5vect.js - - - - - - - - - - - - - -
- -
- - - - - -
-
- 
/*
-	This file was derived from the p5.js source code at
-	https://github.com/processing/p5.js
-
-	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>
-
-    This library is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Lesser General Public
-    License as published by the Free Software Foundation; either
-    version 2.1 of the License, or (at your option) any later version.
-
-    This library is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-    Lesser General Public License for more details.
-
-    You should have received a copy of the GNU Lesser General Public
-    License along with this library; if not, write to the Free Software
-    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-/**
-* @module p5compat.PVector
-*/
-
-/**
- * A class to describe a two or three dimensional vector, specifically
- * a Euclidean (also known as geometric) vector. A vector is an entity
- * that has both magnitude and direction. The datatype, however, stores
- * the components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude
- * and direction can be accessed via the methods mag() and heading().
- * <br><br>
- * In many of the examples, you will see PVector used to describe a
- * position, velocity, or acceleration. For example, if you consider a rectangle
- * moving across the screen, at any given instant it has a position (a vector
- * that points from the origin to its location), a velocity (the rate at which
- * the object's position changes per time unit, expressed as a vector), and
- * acceleration (the rate at which the object's velocity changes per time
- * unit, expressed as a vector).
- * <br><br>
- * Since vectors represent groupings of values, we cannot simply use
- * traditional addition/multiplication/etc. Instead, we'll need to do some
- * "vector" math, which is made easy by the methods inside the PVector class.
- *
- * @class p5compat.PVector
- * @param {Number} [x] x component of the vector
- * @param {Number} [y] y component of the vector
- * @param {Number} [z] z component of the vector
- * @example
- * let v1 = createVector(40, 50);
- * let v2 = createVector(40, 50);
- *
- * ellipse(v1.x, v1.y, 50, 50);
- * ellipse(v2.x, v2.y, 50, 50);
- * v1.add(v2);
- * ellipse(v1.x, v1.y, 50, 50);
- */
-exports.PVector = function PVector() {
-	var x, y, z;
-	x = arguments[0] || 0;
-	y = arguments[1] || 0;
-	z = arguments[2] || 0;
-	/**
-	 * The x component of the vector
-	 * @property x {Number}
-	 */
-	this.x = x;
-	/**
-	 * The y component of the vector
-	 * @property y {Number}
-	 */
-	this.y = y;
-	/**
-	 * The z component of the vector
-	 * @property z {Number}
-	 */
-	this.z = z;
-};
-
-/**
- * Returns a string representation of a vector v by calling String(v)
- * or v.toString(). This method is useful for logging vectors in the
- * console.
- * @method  toString
- * @return {String}
- * @example
- * function setup() {
- *   let v = createVector(20, 30);
- *   print(String(v)); // prints "PVector Object : [20, 30, 0]"
- * }
- *
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(0, 0);
- *   let v1 = createVector(mouseX, mouseY);
- *   drawArrow(v0, v1, 'black');
- *
- *   noStroke();
- *   text(v1.toString(), 10, 25, 90, 75);
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.toString = function p5VectorToString() {
-	return 'PVector Object : [' + this.x + ', ' + this.y + ', ' + this.z + ']';
-};
-
-/**
- * Sets the x, y, and z component of the vector using two or three separate
- * variables, the data from a PVector, or the values from a float array.
- * @method set
- * @param {Number} [x] the x component of the vector
- * @param {Number} [y] the y component of the vector
- * @param {Number} [z] the z component of the vector
- * @example
- * function setup() {
- *   let v = createVector(1, 2, 3);
- *   v.set(4, 5, 6); // Sets vector to [4, 5, 6]
- *
- *   let v1 = createVector(0, 0, 0);
- *   let arr = [1, 2, 3];
- *   v1.set(arr); // Sets vector to [1, 2, 3]
- * }
- *
- * let v0, v1;
- * function setup() {
- *   createCanvas(100, 100);
- *
- *   v0 = createVector(0, 0);
- *   v1 = createVector(50, 50);
- * }
- *
- * function draw() {
- *   background(240);
- *
- *   drawArrow(v0, v1, 'black');
- *   v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));
- *
- *   noStroke();
- *   text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.set = function set(x, y, z) {
-	if (x instanceof PVector) {
-		this.x = x.x || 0;
-		this.y = x.y || 0;
-		this.z = x.z || 0;
-		return this;
-	}
-	if (x instanceof Array) {
-		this.x = x[0] || 0;
-		this.y = x[1] || 0;
-		this.z = x[2] || 0;
-		return this;
-	}
-	this.x = x || 0;
-	this.y = y || 0;
-	this.z = z || 0;
-	return this;
-};
-
-/**
- * Gets a copy of the vector, returns a PVector object.
- *
- * @method copy
- * @return {PVector} the copy of the PVector object
- * @example
- * let v1 = createVector(1, 2, 3);
- * let v2 = v1.copy();
- * print(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);
- * // Prints "true"
- */
-exports.PVector.prototype.copy = function copy() {
-	return new PVector(this.x, this.y, this.z);
-};
-
-/**
- * Adds x, y, and z components to a vector, adds one vector to another, or
- * adds two independent vectors together. The version of the method that adds
- * two vectors together is a static method and returns a PVector, the others
- * acts directly on the vector. See the examples for more context.
- *
- * @method add
- * @param  {Number} x   the x component of the vector to be added
- * @param  {Number} [y] the y component of the vector to be added
- * @param  {Number} [z] the z component of the vector to be added
- * @example
- * let v = createVector(1, 2, 3);
- * v.add(4, 5, 6);
- * // v's components are set to [5, 7, 9]
- * // Static method
- * let v1 = createVector(1, 2, 3);
- * let v2 = createVector(2, 3, 4);
- *
- * let v3 = PVector.add(v1, v2);
- * // v3 has components [3, 5, 7]
- * print(v3);
- *
- * // red vector + blue vector = purple vector
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(0, 0);
- *   let v1 = createVector(mouseX, mouseY);
- *   drawArrow(v0, v1, 'red');
- *
- *   let v2 = createVector(-30, 20);
- *   drawArrow(v1, v2, 'blue');
- *
- *   let v3 = PVector.add(v1, v2);
- *   drawArrow(v0, v3, 'purple');
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.add = function add(x, y, z) {
-	if (x instanceof PVector) {
-		this.x += x.x || 0;
-		this.y += x.y || 0;
-		this.z += x.z || 0;
-		return this;
-	}
-	if (x instanceof Array) {
-		this.x += x[0] || 0;
-		this.y += x[1] || 0;
-		this.z += x[2] || 0;
-		return this;
-	}
-	this.x += x || 0;
-	this.y += y || 0;
-	this.z += z || 0;
-	return this;
-};
-
-/**
- * Subtracts x, y, and z components from a vector, subtracts one vector from
- * another, or subtracts two independent vectors. The version of the method
- * that subtracts two vectors is a static method and returns a PVector, the
- * other acts directly on the vector. See the examples for more context.
- *
- * @method sub
- * @param  {Number} x   the x component of the vector to subtract
- * @param  {Number} [y] the y component of the vector to subtract
- * @param  {Number} [z] the z component of the vector to subtract
- * @example
- * let v = createVector(4, 5, 6);
- * v.sub(1, 1, 1);
- * // v's components are set to [3, 4, 5]
- *
- * // Static method
- * let v1 = createVector(2, 3, 4);
- * let v2 = createVector(1, 2, 3);
- *
- * let v3 = PVector.sub(v1, v2);
- * // v3 has components [1, 1, 1]
- * print(v3);
- *
- * // red vector - blue vector = purple vector
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(0, 0);
- *   let v1 = createVector(70, 50);
- *   drawArrow(v0, v1, 'red');
- *
- *   let v2 = createVector(mouseX, mouseY);
- *   drawArrow(v0, v2, 'blue');
- *
- *   let v3 = PVector.sub(v1, v2);
- *   drawArrow(v2, v3, 'purple');
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.sub = function sub(x, y, z) {
-	if (x instanceof PVector) {
-		this.x -= x.x || 0;
-		this.y -= x.y || 0;
-		this.z -= x.z || 0;
-		return this;
-	}
-	if (x instanceof Array) {
-		this.x -= x[0] || 0;
-		this.y -= x[1] || 0;
-		this.z -= x[2] || 0;
-		return this;
-	}
-	this.x -= x || 0;
-	this.y -= y || 0;
-	this.z -= z || 0;
-	return this;
-};
-
-/**
- * Multiply the vector by a scalar. The static version of this method
- * creates a new PVector while the non static version acts on the vector
- * directly. See the examples for more context.
- *
- * @method mult
- * @param  {Number}    n the number to multiply with the vector
- * @example
- * let v = createVector(1, 2, 3);
- * v.mult(2);
- * // v's components are set to [2, 4, 6]
- *
- * // Static method
- * let v1 = createVector(1, 2, 3);
- * let v2 = PVector.mult(v1, 2);
- * // v2 has components [2, 4, 6]
- * print(v2);
- *
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(50, 50);
- *   let v1 = createVector(25, -25);
- *   drawArrow(v0, v1, 'red');
- *
- *   let num = map(mouseX, 0, width, -2, 2, true);
- *   let v2 = PVector.mult(v1, num);
- *   drawArrow(v0, v2, 'blue');
- *
- *   noStroke();
- *   text('multiplied by ' + num.toFixed(2), 5, 90);
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.mult = function mult(n) {
-	if (!(typeof n === 'number' && isFinite(n))) {
-		Println(
-			'PVector.prototype.mult:',
-			'n is undefined or not a finite number'
-		);
-		return this;
-	}
-	this.x *= n;
-	this.y *= n;
-	this.z *= n;
-	return this;
-};
-
-/**
- * Divide the vector by a scalar. The static version of this method creates a
- * new PVector while the non static version acts on the vector directly.
- * See the examples for more context.
- *
- * @method div
- * @param  {number}    n the number to divide the vector by
- * @example
- * let v = createVector(6, 4, 2);
- * v.div(2); //v's components are set to [3, 2, 1]
- *
- * // Static method
- * let v1 = createVector(6, 4, 2);
- * let v2 = PVector.div(v1, 2);
- * // v2 has components [3, 2, 1]
- * print(v2);
- *
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(0, 100);
- *   let v1 = createVector(50, -50);
- *   drawArrow(v0, v1, 'red');
- *
- *   let num = map(mouseX, 0, width, 10, 0.5, true);
- *   let v2 = PVector.div(v1, num);
- *   drawArrow(v0, v2, 'blue');
- *
- *   noStroke();
- *   text('divided by ' + num.toFixed(2), 10, 90);
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.div = function div(n) {
-	if (!(typeof n === 'number' && isFinite(n))) {
-		Println(
-			'PVector.prototype.div:',
-			'n is undefined or not a finite number'
-		);
-		return this;
-	}
-	if (n === 0) {
-		Println('PVector.prototype.div:', 'divide by 0');
-		return this;
-	}
-	this.x /= n;
-	this.y /= n;
-	this.z /= n;
-	return this;
-};
-
-/**
- * Calculates the magnitude (length) of the vector and returns the result as
- * a float (this is simply the equation sqrt(x*x + y*y + z*z).)
- *
- * @method mag
- * @return {Number} magnitude of the vector
- * @example
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(0, 0);
- *   let v1 = createVector(mouseX, mouseY);
- *   drawArrow(v0, v1, 'black');
- *
- *   noStroke();
- *   text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- * * * let v = createVector(20.0, 30.0, 40.0);
- * let m = v.mag();
- * print(m); // Prints "53.85164807134504"
- */
-exports.PVector.prototype.mag = function mag() {
-	return Math.sqrt(this.magSq());
-};
-
-/**
- * Calculates the squared magnitude of the vector and returns the result
- * as a float (this is simply the equation <em>(x*x + y*y + z*z)</em>.)
- * Faster if the real length is not required in the
- * case of comparing vectors, etc.
- *
- * @method magSq
- * @return {number} squared magnitude of the vector
- * @example
- * // Static method
- * let v1 = createVector(6, 4, 2);
- * print(v1.magSq()); // Prints "56"
- *
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(0, 0);
- *   let v1 = createVector(mouseX, mouseY);
- *   drawArrow(v0, v1, 'black');
- *
- *   noStroke();
- *   text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.magSq = function magSq() {
-	var x = this.x;
-	var y = this.y;
-	var z = this.z;
-	return x * x + y * y + z * z;
-};
-
-/**
- * Calculates the dot product of two vectors. The version of the method
- * that computes the dot product of two independent vectors is a static
- * method. See the examples for more context.
- *
- *
- * @method dot
- * @param  {Number} x   x component of the vector
- * @param  {Number} [y] y component of the vector
- * @param  {Number} [z] z component of the vector
- * @return {Number}       the dot product
- *
- * @example
- * let v1 = createVector(1, 2, 3);
- * let v2 = createVector(2, 3, 4);
- *
- * print(v1.dot(v2)); // Prints "20"
- *
- * //Static method
- * let v1 = createVector(1, 2, 3);
- * let v2 = createVector(3, 2, 1);
- * print(PVector.dot(v1, v2)); // Prints "10"
- */
-/**
- * @method dot
- * @param  {PVector} value value component of the vector or a PVector
- * @return {Number}
- */
-exports.PVector.prototype.dot = function dot(x, y, z) {
-	if (x instanceof PVector) {
-		return this.dot(x.x, x.y, x.z);
-	}
-	return this.x * (x || 0) + this.y * (y || 0) + this.z * (z || 0);
-};
-
-/**
- * Calculates and returns a vector composed of the cross product between
- * two vectors. Both the static and non static methods return a new PVector.
- * See the examples for more context.
- *
- * @method cross
- * @param  {PVector} v PVector to be crossed
- * @return {PVector}   PVector composed of cross product
- * @example
- * let v1 = createVector(1, 2, 3);
- * let v2 = createVector(1, 2, 3);
- *
- * v1.cross(v2); // v's components are [0, 0, 0]
- *
- * // Static method
- * let v1 = createVector(1, 0, 0);
- * let v2 = createVector(0, 1, 0);
- *
- * let crossProduct = PVector.cross(v1, v2);
- * // crossProduct has components [0, 0, 1]
- * print(crossProduct);
- */
-exports.PVector.prototype.cross = function cross(v) {
-	var x = this.y * v.z - this.z * v.y;
-	var y = this.z * v.x - this.x * v.z;
-	var z = this.x * v.y - this.y * v.x;
-
-	return new PVector(x, y, z);
-};
-
-/**
- * Calculates the Euclidean distance between two points (considering a
- * point as a vector object).
- *
- * @method dist
- * @param  {PVector} v the x, y, and z coordinates of a PVector
- * @return {Number}      the distance
- * @example
- * let v1 = createVector(1, 0, 0);
- * let v2 = createVector(0, 1, 0);
- *
- * let distance = v1.dist(v2); // distance is 1.4142...
- * print(distance);
- *
- * // Static method
- * let v1 = createVector(1, 0, 0);
- * let v2 = createVector(0, 1, 0);
- *
- * let distance = PVector.dist(v1, v2);
- * // distance is 1.4142...
- * print(distance);
- *
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(0, 0);
- *
- *   let v1 = createVector(70, 50);
- *   drawArrow(v0, v1, 'red');
- *
- *   let v2 = createVector(mouseX, mouseY);
- *   drawArrow(v0, v2, 'blue');
- *
- *   noStroke();
- *   text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.dist = function dist(v) {
-	return v
-		.copy()
-		.sub(this)
-		.mag();
-};
-
-/**
- * Normalize the vector to length 1 (make it a unit vector).
- *
- * @method normalize
- * @return {PVector} normalized PVector
- * @example
- * let v = createVector(10, 20, 2);
- * // v has components [10.0, 20.0, 2.0]
- * v.normalize();
- * // v's components are set to
- * // [0.4454354, 0.8908708, 0.089087084]
- * * * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(50, 50);
- *   let v1 = createVector(mouseX - 50, mouseY - 50);
- *
- *   drawArrow(v0, v1, 'red');
- *   v1.normalize();
- *   drawArrow(v0, v1.mult(35), 'blue');
- *
- *   noFill();
- *   ellipse(50, 50, 35 * 2);
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.normalize = function normalize() {
-	var len = this.mag();
-	// here we multiply by the reciprocal instead of calling 'div()'
-	// since div duplicates this zero check.
-	if (len !== 0) this.mult(1 / len);
-	return this;
-};
-
-/**
- * Limit the magnitude of this vector to the value used for the <b>max</b>
- * parameter.
- *
- * @method limit
- * @param  {Number}    max the maximum magnitude for the vector
- * @example
- * let v = createVector(10, 20, 2);
- * // v has components [10.0, 20.0, 2.0]
- * v.limit(5);
- * // v's components are set to
- * // [2.2271771, 4.4543543, 0.4454354]
- * * * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(50, 50);
- *   let v1 = createVector(mouseX - 50, mouseY - 50);
- *
- *   drawArrow(v0, v1, 'red');
- *   drawArrow(v0, v1.limit(35), 'blue');
- *
- *   noFill();
- *   ellipse(50, 50, 35 * 2);
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.limit = function limit(max) {
-	var mSq = this.magSq();
-	if (mSq > max * max) {
-		this.div(Math.sqrt(mSq)) //normalize it
-			.mult(max);
-	}
-	return this;
-};
-
-/**
- * Set the magnitude of this vector to the value used for the <b>len</b>
- * parameter.
- *
- * @method setMag
- * @param  {number}    len the new length for this vector
- * @example
- * let v = createVector(10, 20, 2);
- * // v has components [10.0, 20.0, 2.0]
- * v.setMag(10);
- * // v's components are set to [6.0, 8.0, 0.0]
- *
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(0, 0);
- *   let v1 = createVector(50, 50);
- *
- *   drawArrow(v0, v1, 'red');
- *
- *   let length = map(mouseX, 0, width, 0, 141, true);
- *   v1.setMag(length);
- *   drawArrow(v0, v1, 'blue');
- *
- *   noStroke();
- *   text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.setMag = function setMag(n) {
-	return this.normalize().mult(n);
-};
-
-/**
- * Calculate the angle of rotation for this vector (only 2D vectors)
- *
- * @method heading
- * @return {Number} the angle of rotation
- * @example
- * * function setup() {
- *   let v1 = createVector(30, 50);
- *   print(v1.heading()); // 1.0303768265243125
- *
- *   v1 = createVector(40, 50);
- *   print(v1.heading()); // 0.8960553845713439
- *
- *   v1 = createVector(30, 70);
- *   print(v1.heading()); // 1.1659045405098132
- * }
- *
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(50, 50);
- *   let v1 = createVector(mouseX - 50, mouseY - 50);
- *
- *   drawArrow(v0, v1, 'black');
- *
- *   let myHeading = v1.heading();
- *   noStroke();
- *   text(
- *     'vector heading: ' +
- *       myHeading.toFixed(2) +
- *       ' radians or ' +
- *       degrees(myHeading).toFixed(2) +
- *       ' degrees',
- *     10,
- *     50,
- *     90,
- *     50
- *   );
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.heading = function heading() {
-	var h = Math.atan2(this.y, this.x);
-	return _fromRadians(h);
-};
-
-/**
- * Rotate the vector by an angle (only 2D vectors), magnitude remains the
- * same
- *
- * @method rotate
- * @param  {number}    angle the angle of rotation
- * @example
- * let v = createVector(10.0, 20.0);
- * // v has components [10.0, 20.0, 0.0]
- * v.rotate(HALF_PI);
- * // v's components are set to [-20.0, 9.999999, 0.0]
- *
- * let angle = 0;
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(50, 50);
- *   let v1 = createVector(50, 0);
- *
- *   drawArrow(v0, v1.rotate(angle), 'black');
- *   angle += 0.01;
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.rotate = function rotate(a) {
-	var newHeading = this.heading() + a;
-	newHeading = _toRadians(newHeading);
-	var mag = this.mag();
-	this.x = Math.cos(newHeading) * mag;
-	this.y = Math.sin(newHeading) * mag;
-	return this;
-};
-
-/**
- * Calculates and returns the angle (in radians) between two vectors.
- * @method angleBetween
- * @param  {PVector}    the x, y, and z components of a PVector
- * @return {Number}       the angle between (in radians)
- * @example
- * let v1 = createVector(1, 0, 0);
- * let v2 = createVector(0, 1, 0);
- *
- * let angle = v1.angleBetween(v2);
- * // angle is PI/2
- * print(angle);
- *
- * function draw() {
- *   background(240);
- *   let v0 = createVector(50, 50);
- *
- *   let v1 = createVector(50, 0);
- *   drawArrow(v0, v1, 'red');
- *
- *   let v2 = createVector(mouseX - 50, mouseY - 50);
- *   drawArrow(v0, v2, 'blue');
- *
- *   let angleBetween = v1.angleBetween(v2);
- *   noStroke();
- *   text(
- *     'angle between: ' +
- *       angleBetween.toFixed(2) +
- *       ' radians or ' +
- *       degrees(angleBetween).toFixed(2) +
- *       ' degrees',
- *     10,
- *     50,
- *     90,
- *     50
- *   );
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.angleBetween = function angleBetween(v) {
-	var dotmagmag = this.dot(v) / (this.mag() * v.mag());
-	// Mathematically speaking: the dotmagmag variable will be between -1 and 1
-	// inclusive. Practically though it could be slightly outside this range due
-	// to floating-point rounding issues. This can make Math.acos return NaN.
-	//
-	// Solution: we'll clamp the value to the -1,1 range
-	var angle = Math.acos(Math.min(1, Math.max(-1, dotmagmag)));
-	return _fromRadians(angle);
-};
-
-/**
- * Linear interpolate the vector to another vector
- *
- * @method lerp
- * @param  {Number}    x   the x component
- * @param  {Number}    y   the y component
- * @param  {Number}    z   the z component
- * @param  {Number}    amt the amount of interpolation; some value between 0.0
- *                         (old vector) and 1.0 (new vector). 0.9 is very near
- *                         the new vector. 0.5 is halfway in between.
- * @example
- * let v = createVector(1, 1, 0);
- *
- * v.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]
- *
- * let v1 = createVector(0, 0, 0);
- * let v2 = createVector(100, 100, 0);
- *
- * let v3 = PVector.lerp(v1, v2, 0.5);
- * // v3 has components [50,50,0]
- * print(v3);
- *
- * let step = 0.01;
- * let amount = 0;
- *
- * function draw() {
- *   background(240);
- *   let v0 = createVector(0, 0);
- *
- *   let v1 = createVector(mouseX, mouseY);
- *   drawArrow(v0, v1, 'red');
- *
- *   let v2 = createVector(90, 90);
- *   drawArrow(v0, v2, 'blue');
- *
- *   if (amount > 1 || amount < 0) {
- *     step *= -1;
- *   }
- *   amount += step;
- *   let v3 = PVector.lerp(v1, v2, amount);
- *
- *   drawArrow(v0, v3, 'purple');
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.prototype.lerp = function lerp(x, y, z, amt) {
-	if (x instanceof PVector) {
-		return this.lerp(x.x, x.y, x.z, y);
-	}
-	this.x += (x - this.x) * amt || 0;
-	this.y += (y - this.y) * amt || 0;
-	this.z += (z - this.z) * amt || 0;
-	return this;
-};
-
-/**
- * Return a representation of this vector as a float array. This is only
- * for temporary use. If used in any other fashion, the contents should be
- * copied by using the PVector.copy() method to copy into your own
- * array.
- *
- * @method array
- * @return {Number[]} an Array with the 3 values
- * @example
- * * function setup() {
- *   let v = createVector(20, 30);
- *   print(v.array()); // Prints : Array [20, 30, 0]
- * }
- *
- * let v = createVector(10.0, 20.0, 30.0);
- * let f = v.array();
- * print(f[0]); // Prints "10.0"
- * print(f[1]); // Prints "20.0"
- * print(f[2]); // Prints "30.0"
- */
-exports.PVector.prototype.array = function array() {
-	return [this.x || 0, this.y || 0, this.z || 0];
-};
-
-/**
- * Equality check against a PVector
- *
- * @method equals
- * @param {Number} [x] the x component of the vector
- * @param {Number} [y] the y component of the vector
- * @param {Number} [z] the z component of the vector
- * @return {Boolean} whether the vectors are equals
- * @example
- * * let v1 = createVector(5, 10, 20);
- * let v2 = createVector(5, 10, 20);
- * let v3 = createVector(13, 10, 19);
- *
- * print(v1.equals(v2.x, v2.y, v2.z)); // true
- * print(v1.equals(v3.x, v3.y, v3.z)); // false
- *
- * let v1 = createVector(10.0, 20.0, 30.0);
- * let v2 = createVector(10.0, 20.0, 30.0);
- * let v3 = createVector(0.0, 0.0, 0.0);
- * print(v1.equals(v2)); // true
- * print(v1.equals(v3)); // false
- */
-/**
- * @method equals
- * @param {PVector|Array} value the vector to compare
- * @return {Boolean}
- */
-exports.PVector.prototype.equals = function equals(x, y, z) {
-	var a, b, c;
-	if (x instanceof PVector) {
-		a = x.x || 0;
-		b = x.y || 0;
-		c = x.z || 0;
-	} else if (x instanceof Array) {
-		a = x[0] || 0;
-		b = x[1] || 0;
-		c = x[2] || 0;
-	} else {
-		a = x || 0;
-		b = y || 0;
-		c = z || 0;
-	}
-	return this.x === a && this.y === b && this.z === c;
-};
-
-// Static Methods
-
-/**
- * Make a new 2D vector from an angle
- *
- * @method fromAngle
- * @static
- * @param {Number}     angle the desired angle, in radians
- * @param {Number}     [length] the length of the new vector (defaults to 1)
- * @return {PVector}       the new PVector object
- * @example
- * function draw() {
- *   background(200);
- *
- *   // Create a variable, proportional to the mouseX,
- *   // varying from 0-360, to represent an angle in degrees.
- *   angleMode(DEGREES);
- *   let myDegrees = map(mouseX, 0, width, 0, 360);
- *
- *   // Display that variable in an onscreen text.
- *   // (Note the nfc() function to truncate additional decimal places,
- *   // and the "\xB0" character for the degree symbol.)
- *   let readout = 'angle = ' + nfc(myDegrees, 1) + '\xB0';
- *   noStroke();
- *   fill(0);
- *   text(readout, 5, 15);
- *
- *   // Create a PVector using the fromAngle function,
- *   // and extract its x and y components.
- *   let v = PVector.fromAngle(radians(myDegrees), 30);
- *   let vx = v.x;
- *   let vy = v.y;
- *
- *   push();
- *   translate(width / 2, height / 2);
- *   noFill();
- *   stroke(150);
- *   line(0, 0, 30, 0);
- *   stroke(0);
- *   line(0, 0, vx, vy);
- *   pop();
- * }
- */
-exports.PVector.fromAngle = function fromAngle(angle, length) {
-	if (typeof length === 'undefined') {
-		length = 1;
-	}
-	return new exports.PVector(length * Math.cos(angle), length * Math.sin(angle), 0);
-};
-
-/**
- * Make a new 3D vector from a pair of ISO spherical angles
- *
- * @method fromAngles
- * @static
- * @param {Number}     theta    the polar angle, in radians (zero is up)
- * @param {Number}     phi      the azimuthal angle, in radians
- *                               (zero is out of the screen)
- * @param {Number}     [length] the length of the new vector (defaults to 1)
- * @return {PVector}          the new PVector object
- * @example
- * * function setup() {
- *   createCanvas(100, 100, WEBGL);
- *   fill(255);
- *   noStroke();
- * }
- * function draw() {
- *   background(255);
- *
- *   let t = millis() / 1000;
- *
- *   // add three point lights
- *   pointLight(color('#f00'), PVector.fromAngles(t * 1.0, t * 1.3, 100));
- *   pointLight(color('#0f0'), PVector.fromAngles(t * 1.1, t * 1.2, 100));
- *   pointLight(color('#00f'), PVector.fromAngles(t * 1.2, t * 1.1, 100));
- *
- *   sphere(35);
- * }
- */
-exports.PVector.fromAngles = function (theta, phi, length) {
-	if (typeof length === 'undefined') {
-		length = 1;
-	}
-	var cosPhi = Math.cos(phi);
-	var sinPhi = Math.sin(phi);
-	var cosTheta = Math.cos(theta);
-	var sinTheta = Math.sin(theta);
-
-	return new exports.PVector(
-		length * sinTheta * sinPhi,
-		-length * cosTheta,
-		length * sinTheta * cosPhi
-	);
-};
-
-/**
- * Make a new 2D unit vector from a random angle
- *
- * @method random2D
- * @static
- * @return {PVector} the new PVector object
- * @example
- * let v = PVector.random2D();
- * // May make v's attributes something like:
- * // [0.61554617, -0.51195765, 0.0] or
- * // [-0.4695841, -0.14366731, 0.0] or
- * // [0.6091097, -0.22805278, 0.0]
- * print(v);
- *
- * function setup() {
- *   frameRate(1);
- * }
- *
- * function draw() {
- *   background(240);
- *
- *   let v0 = createVector(50, 50);
- *   let v1 = PVector.random2D();
- *   drawArrow(v0, v1.mult(50), 'black');
- * }
- *
- * // draw an arrow for a vector at a given base position
- * function drawArrow(base, vec, myColor) {
- *   push();
- *   stroke(myColor);
- *   strokeWeight(3);
- *   fill(myColor);
- *   translate(base.x, base.y);
- *   line(0, 0, vec.x, vec.y);
- *   rotate(vec.heading());
- *   let arrowSize = 7;
- *   translate(vec.mag() - arrowSize, 0);
- *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
- *   pop();
- * }
- */
-exports.PVector.random2D = function random2D() {
-	return this.fromAngle(Math.random() * TWO_PI);
-};
-
-/**
- * Make a new random 3D unit vector.
- *
- * @method random3D
- * @static
- * @return {PVector} the new PVector object
- * @example
- * let v = PVector.random3D();
- * // May make v's attributes something like:
- * // [0.61554617, -0.51195765, 0.599168] or
- * // [-0.4695841, -0.14366731, -0.8711202] or
- * // [0.6091097, -0.22805278, -0.7595902]
- * print(v);
- */
-exports.PVector.random3D = function random3D() {
-	var angle = Math.random() * constants.TWO_PI;
-	var vz = Math.random() * 2 - 1;
-	var vzBase = Math.sqrt(1 - vz * vz);
-	var vx = vzBase * Math.cos(angle);
-	var vy = vzBase * Math.sin(angle);
-	return new exports.PVector(vx, vy, vz);
-};
-
-// Adds two vectors together and returns a new one.
-/**
- * @method add
- * @static
- * @param  {PVector} v1 a PVector to add
- * @param  {PVector} v2 a PVector to add
- * @param  {PVector} target the vector to receive the result
- */
-exports.PVector.add = function add(v1, v2, target) {
-	if (!target) {
-		target = v1.copy();
-	} else {
-		target.set(v1);
-	}
-	target.add(v2);
-	return target;
-};
-
-/**
- * Subtracts one PVector from another and returns a new one.  The second
- * vector (v2) is subtracted from the first (v1), resulting in v1-v2.
- * 
- * @method sub
- * @static
- * @param  {PVector} v1 a PVector to subtract from
- * @param  {PVector} v2 a PVector to subtract
- * @param  {PVector} target if undefined a new vector will be created
- */
-exports.PVector.sub = function sub(v1, v2, target) {
-	if (!target) {
-		target = v1.copy();
-	} else {
-		target.set(v1);
-	}
-	target.sub(v2);
-	return target;
-};
-
-/**
- * Multiplies a vector by a scalar and returns a new vector.
- * 
- * @method mult
- * @static
- * @param  {PVector} v the vector to multiply
- * @param  {Number}  n
- * @param  {PVector} target if undefined a new vector will be created
- */
-exports.PVector.mult = function mult(v, n, target) {
-	if (!target) {
-		target = v.copy();
-	} else {
-		target.set(v);
-	}
-	target.mult(n);
-	return target;
-};
-
-/**
- * Divides a vector by a scalar and returns a new vector.
- * 
- * @method div
- * @static
- * @param  {PVector} v the vector to divide
- * @param  {Number}  n
- * @param  {PVector} target if undefined a new vector will be created
- */
-exports.PVector.div = function div(v, n, target) {
-	if (!target) {
-		target = v.copy();
-	} else {
-		target.set(v);
-	}
-	target.div(n);
-	return target;
-};
-
-/**
- * Calculates the dot product of two vectors.
- * 
- * @method dot
- * @static
- * @param  {PVector} v1 the first PVector
- * @param  {PVector} v2 the second PVector
- * @return {Number}     the dot product
- */
-exports.PVector.dot = function dot(v1, v2) {
-	return v1.dot(v2);
-};
-
-/**
- * Calculates the cross product of two vectors.
- * 
- * @method cross
- * @static
- * @param  {PVector} v1 the first PVector
- * @param  {PVector} v2 the second PVector
- * @return {Number}     the cross product
- */
-exports.PVector.cross = function cross(v1, v2) {
-	return v1.cross(v2);
-};
-
-/**
- * Calculates the Euclidean distance between two points (considering a
- * point as a vector object).
- * 
- * @method dist
- * @static
- * @param  {PVector} v1 the first PVector
- * @param  {PVector} v2 the second PVector
- * @return {Number}     the distance
- */
-exports.PVector.dist = function dist(v1, v2) {
-	return v1.dist(v2);
-};
-
-/**
- * Linear interpolate a vector to another vector and return the result as a
- * new vector.
- * 
- * @method lerp
- * @static
- * @param {PVector} v1
- * @param {PVector} v2
- * @param {Number} amt
- * @return {Number}      the lerped value
- */
-exports.PVector.lerp = function lerp(v1, v2, amt, target) {
-	if (!target) {
-		target = v1.copy();
-	} else {
-		target.set(v1);
-	}
-	target.lerp(v2, amt);
-	return target;
-};
-
-/**
- * @method mag
- * @param {PVector} vecT the vector to return the magnitude of
- * @return {Number}        the magnitude of vecT
- * @static
- */
-exports.PVector.mag = function mag(vecT) {
-	var x = vecT.x,
-		y = vecT.y,
-		z = vecT.z;
-	var magSq = x * x + y * y + z * z;
-	return Math.sqrt(magSq);
-};
-
-exports.p5 = {};
-exports.p5.Vector = exports.PVector;
-
-
-
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - diff --git a/doc/html/module-color.html b/doc/html/module-color.html deleted file mode 100644 index 7e52cbfe..00000000 --- a/doc/html/module-color.html +++ /dev/null @@ -1,3322 +0,0 @@ - - - - - Module: color | Module: color - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

color

- - - - -
- -
- -
- - - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- inner EGA - -
- jsboot/color.js, - line 48 -
- -

- - -
-
- -
- EGA Color definition. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
BLACK - - -Color - - - - EGA color.
BLUE - - -Color - - - - EGA color.
GREEN - - -Color - - - - EGA color.
CYAN - - -Color - - - - EGA color.
RED - - -Color - - - - EGA color.
MAGENTA - - -Color - - - - EGA color.
BROWN - - -Color - - - - EGA color.
LIGHT_GRAY - - -Color - - - - EGA color.
LIGHT_GREY - - -Color - - - - EGA color.
DARK_GRAY - - -Color - - - - EGA color.
DARK_GREY - - -Color - - - - EGA color.
LIGHT_BLUE - - -Color - - - - EGA color.
LIGHT_GREEN - - -Color - - - - EGA color.
LIGHT_CYAN - - -Color - - - - EGA color.
LIGHT_RED - - -Color - - - - EGA color.
LIGHT_MAGENTA - - -Color - - - - EGA color.
YELLOW - - -Color - - - - EGA color.
WHITE - - -Color - - - - EGA color.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner NO_COLOR - -
- jsboot/color.js, - line 72 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
NO_COLOR - - -Color - - - - the transparent Color.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - inner Color(r, g, b, a) → {number} - - -
- doc/internal.js, - line 481 -
- -

- - - -
-
- - -
- create RGBA color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
r - - -number - - - - red (0-255)
g - - -number - - - - green (0-255)
b - - -number - - - - blue (0-255)
a - - -number - - - - alpha (0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- a color. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetAlpha(c) → {number} - - -
- doc/internal.js, - line 509 -
- -

- - - -
-
- - -
- get alpha part of color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c - - -number - - - - a color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the alpha part. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetBlue(c) → {number} - - -
- doc/internal.js, - line 502 -
- -

- - - -
-
- - -
- get blue part of color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c - - -number - - - - a color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the blue part. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetGreen(c) → {number} - - -
- doc/internal.js, - line 495 -
- -

- - - -
-
- - -
- get green part of color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c - - -number - - - - a color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the green part. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetRed(c) → {number} - - -
- doc/internal.js, - line 488 -
- -

- - - -
-
- - -
- get red part of color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c - - -number - - - - a color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the red part. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

color

- - - - -
- -
- -
- - -
Color definition.
- - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- inner EGA - -
- jsboot/color.js, - line 48 -
- -

- - -
-
- -
- EGA Color definition. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
BLACK - - -Color - - - - EGA color.
BLUE - - -Color - - - - EGA color.
GREEN - - -Color - - - - EGA color.
CYAN - - -Color - - - - EGA color.
RED - - -Color - - - - EGA color.
MAGENTA - - -Color - - - - EGA color.
BROWN - - -Color - - - - EGA color.
LIGHT_GRAY - - -Color - - - - EGA color.
LIGHT_GREY - - -Color - - - - EGA color.
DARK_GRAY - - -Color - - - - EGA color.
DARK_GREY - - -Color - - - - EGA color.
LIGHT_BLUE - - -Color - - - - EGA color.
LIGHT_GREEN - - -Color - - - - EGA color.
LIGHT_CYAN - - -Color - - - - EGA color.
LIGHT_RED - - -Color - - - - EGA color.
LIGHT_MAGENTA - - -Color - - - - EGA color.
YELLOW - - -Color - - - - EGA color.
WHITE - - -Color - - - - EGA color.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner NO_COLOR - -
- jsboot/color.js, - line 72 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
NO_COLOR - - -Color - - - - the transparent Color.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - inner Color(r, g, b, a) → {number} - - -
- doc/internal.js, - line 481 -
- -

- - - -
-
- - -
- create RGBA color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
r - - -number - - - - red (0-255)
g - - -number - - - - green (0-255)
b - - -number - - - - blue (0-255)
a - - -number - - - - alpha (0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- a color. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetAlpha(c) → {number} - - -
- doc/internal.js, - line 509 -
- -

- - - -
-
- - -
- get alpha part of color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c - - -number - - - - a color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the alpha part. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetBlue(c) → {number} - - -
- doc/internal.js, - line 502 -
- -

- - - -
-
- - -
- get blue part of color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c - - -number - - - - a color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the blue part. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetGreen(c) → {number} - - -
- doc/internal.js, - line 495 -
- -

- - - -
-
- - -
- get green part of color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c - - -number - - - - a color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the green part. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetRed(c) → {number} - - -
- doc/internal.js, - line 488 -
- -

- - - -
-
- - -
- get red part of color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c - - -number - - - - a color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the red part. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/module-gfx.html b/doc/html/module-gfx.html deleted file mode 100644 index 52ad0a84..00000000 --- a/doc/html/module-gfx.html +++ /dev/null @@ -1,5115 +0,0 @@ - - - - - Module: gfx | Module: gfx - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

gfx

- - - - -
- -
- -
- - -
All graphics functions.
- - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - - - - - - - - - - - -

Methods

- -
- - -
- -

- - inner Box(x1, y1, x2, y2, c) - - -
- doc/internal.js, - line 197 -
- -

- - - -
-
- - -
- draw a box. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -number - - - - start x coordinate.
y1 - - -number - - - - start y coordinate.
x2 - - -number - - - - end x coordinate.
y2 - - -number - - - - end y coordinate.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Circle(x, y, r, c) - - -
- doc/internal.js, - line 206 -
- -

- - - -
-
- - -
- draw a circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
r - - -number - - - - radius.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CircleArc(x, y, r, start, end, style, c) → {ArcInfo} - - -
- doc/internal.js, - line 250 -
- -

- - - -
-
- - -
- Draw a circle arc. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
r - - -number - - - - radius.
start - - -number - - - - start angle in tenths of degrees.
end - - -number - - - - end angle in tenths of degrees.
style - - -* - - - - value from ARC.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -ArcInfo - - - - - -- detailed info about the drawn arc. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner ClearScreen(c) - - -
- doc/internal.js, - line 158 -
- -

- - - -
-
- - -
- clear the screen with given color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c - - -number - - - - the color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CustomCircle(x, y, r, w, c) - - -
- doc/internal.js, - line 216 -
- -

- - - -
-
- - -
- draw a circle with given width. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
r - - -number - - - - radius.
w - - -number - - - - line width.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CustomCircleArc(x, y, r, start, end, style, w, c) → {ArcInfo} - - -
- doc/internal.js, - line 264 -
- -

- - - -
-
- - -
- Draw a circle arc with given width. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
r - - -number - - - - radius.
start - - -number - - - - start angle in tenths of degrees.
end - - -number - - - - end angle in tenths of degrees.
style - - -* - - - - value from ARC.
w - - -number - - - - line width.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -ArcInfo - - - - - -- detailed info about the drawn arc. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CustomEllipse(x, y, xr, yr, w, c) - - -
- doc/internal.js, - line 237 -
- -

- - - -
-
- - -
- draw a ellipse with given width. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
xr - - -number - - - - radius.
yr - - -number - - - - radius.
w - - -number - - - - line width.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CustomLine(x1, y1, x2, y2, w, c) - - -
- doc/internal.js, - line 187 -
- -

- - - -
-
- - -
- draw a line with given width. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -number - - - - start x coordinate.
y1 - - -number - - - - start y coordinate.
x2 - - -number - - - - end x coordinate.
y2 - - -number - - - - end y coordinate.
w - - -number - - - - line width.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Ellipse(x, y, xr, yr, c) - - -
- doc/internal.js, - line 226 -
- -

- - - -
-
- - -
- draw a ellipse. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
xr - - -number - - - - radius.
yr - - -number - - - - radius.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner FilledBox(x1, y1, x2, y2, c) - - -
- doc/internal.js, - line 274 -
- -

- - - -
-
- - -
- draw a filled box. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -number - - - - start x coordinate.
y1 - - -number - - - - start y coordinate.
x2 - - -number - - - - end x coordinate.
y2 - - -number - - - - end y coordinate.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner FilledCircle(x, y, r, c) - - -
- doc/internal.js, - line 283 -
- -

- - - -
-
- - -
- draw a filled circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
r - - -number - - - - radius.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner FilledEllipse(x, y, xr, yr, c) - - -
- doc/internal.js, - line 293 -
- -

- - - -
-
- - -
- draw a filled ellipse. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
xr - - -number - - - - radius.
yr - - -number - - - - radius.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner FilledPolygon(c, points) - - -
- doc/internal.js, - line 309 -
- -

- - - -
-
- - -
- draw a filled polygon. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c - - -number - - - - color.
points - - -Array.<Array.<number>> - - - - an array of arrays with two coordinates (e.g. [[1, 1], [1, 10], [10, 10], [10, 1]]).
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner FloodFill(x, y, bound, c) - - -
- doc/internal.js, - line 302 -
- -

- - - -
-
- - -
- do a flood fill. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
bound - - -number - - - - bound color.
c - - -number - - - - fill color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetPixel(x, y) → {number} - - -
- doc/internal.js, - line 345 -
- -

- - - -
-
- - -
- get color of on-screen pixel. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- pixel color. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetScreenMode() → {number} - - -
- doc/internal.js, - line 152 -
- -

- - - -
-
- - -
- Get color depth info. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- bits per pixel. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Line(x1, y1, x2, y2, c) - - -
- doc/internal.js, - line 176 -
- -

- - - -
-
- - -
- draw a line. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -number - - - - start x coordinate.
y1 - - -number - - - - start y coordinate.
x2 - - -number - - - - end x coordinate.
y2 - - -number - - - - end y coordinate.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Plot(x, y, c) - - -
- doc/internal.js, - line 166 -
- -

- - - -
-
- - -
- draw a point. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
c - - -number - - - - color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SaveBmpImage(fname) - - -
- doc/internal.js, - line 325 -
- -

- - - -
-
- - -
- Save current screen to BMP file. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fname - - -string - - - - filename.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SavePcxImage(fname) - - -
- doc/internal.js, - line 331 -
- -

- - - -
-
- - -
- Save current screen to PCX file. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fname - - -string - - - - filename.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SaveTgaImage(fname) - - -
- doc/internal.js, - line 337 -
- -

- - - -
-
- - -
- Save current screen to TGA file. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fname - - -string - - - - filename.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SizeX() → {number} - - -
- doc/internal.js, - line 140 -
- -

- - - -
-
- - -
- get the width of the drawing area. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the width of the drawing area. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SizeY() → {number} - - -
- doc/internal.js, - line 146 -
- -

- - - -
-
- - -
- get the height of the drawing area. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the height of the drawing area. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner TextXY(x, y, text, fg, bg) - - -
- doc/internal.js, - line 319 -
- -

- - - -
-
- - -
- Draw a text with the default font. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
text - - -* - - - - the text to display.
fg - - -number - - - - foreground color.
bg - - -number - - - - background color.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner TransparencyEnabled(en) - - -
- doc/internal.js, - line 351 -
- -

- - - -
-
- - -
- Enable/disable the transparency when drawing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
en - - -boolean - - - - true to enable transparency when drawing (might slow down drawing).
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/module-ipx.html b/doc/html/module-ipx.html deleted file mode 100644 index c69861f6..00000000 --- a/doc/html/module-ipx.html +++ /dev/null @@ -1,4322 +0,0 @@ - - - - - Module: ipx | Module: ipx - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

ipx

- - - - -
- -
- -
- - - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- inner _ipxDebugNodes - -
- jsboot/ipx.js, - line 143 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
_ipxDebugNodes - - -Array.<IpxAddress> - - - - node list with the logviewer entry.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner _ipxLogData - -
- jsboot/ipx.js, - line 133 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
_ipxLogData - - -string - - - - remaining data to send to log viewer.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner _ipxLogInit - -
- jsboot/ipx.js, - line 138 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
_ipxLogInit - - -boolean - - - - indicates if the IPX socket was already opened.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner IPX - -
- jsboot/ipx.js, - line 30 -
- -

- - -
-
- -
- IPX definitions. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
DEFAULT_SOCKET - - -* - - - - default socket number for DOjS.
BROADCAST - - -* - - - - broadcast address
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - inner IpxAddressToString(addr) - - -
- jsboot/ipx.js, - line 43 -
- -

- - - -
-
- - -
- Convert a node address to a string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
addr - - -IpxAddress - - - - a node address.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxAllNodes(data, nodes) - - -
- jsboot/ipx.js, - line 124 -
- -

- - - -
-
- - -
- Send data to all nodes in array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
data - - -string - - - - the data to send
nodes - - -Array.<IpxAddress> - - - - the node addresses to send to.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxCheckPacket() → {boolean} - - -
- doc/internal.js, - line 79 -
- -

- - - -
-
- - -
- Check for packet in receive buffer. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -boolean - - - - - -- true if a packet is available. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxDebug(str) - - -
- jsboot/ipx.js, - line 150 -
- -

- - - -
-
- - -
- Send logmessages to logviewer using IPX networking. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -string - - - - logmessage to send.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxFindNodes(num, nodes) → {boolean} - - -
- jsboot/ipx.js, - line 86 -
- -

- - - -
-
- - -
- discover nodes on the network. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
num - - -integer - - - - total number of nodes to search for (including the local node).
nodes - - -Array.<IpxAddress> - - - - an array to store the discovered nodes in.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -boolean - - - - - -- true if the wanted number of nodes was discovered, else false. The nodes array will contain the addresses of all found nodes. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxGetLocalAddress() → {IpxAddress} - - -
- doc/internal.js, - line 91 -
- -

- - - -
-
- - -
- Get the local address. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -IpxAddress - - - - - -- an array containing the own address. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxGetPacket() → {IpxPacket} - - -
- doc/internal.js, - line 85 -
- -

- - - -
-
- - -
- Get packet from receive buffer(or NULL). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -IpxPacket - - - - - -- a data packet or null if none available. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxSend(data, dest) - - -
- doc/internal.js, - line 73 -
- -

- - - -
-
- - -
- Send packet via IPX. Max length 79 byte. Node addresses are arrays of 6 numbers between 0-255. See IPX for BROADCAST address. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
data - - -string - - - - data to send.
dest - - -IpxAddress - - - - destination address.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxSocketClose() - - -
- doc/internal.js, - line 66 -
- -

- - - -
-
- - -
- Close IPX socket (if any). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxSocketOpen(num) - - -
- doc/internal.js, - line 61 -
- -

- - - -
-
- - -
- Open an IPX socket. See IPX for DEFAULT_SOCKET. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
num - - -* - - - - the socket number to use.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxStringToAddress(addr) → {IpxAddress} - - -
- jsboot/ipx.js, - line 62 -
- -

- - - -
-
- - -
- Convert an address in hex-string notation back to an JS array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
addr - - -* - - - - a string of 6 hex numbers separated by ':'.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -IpxAddress - - - - - -- An array of six numbers. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

ipx

- - - - -
- -
- -
- - -
IPX network functions.
- - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- inner _ipxDebugNodes - -
- jsboot/ipx.js, - line 143 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
_ipxDebugNodes - - -Array.<IpxAddress> - - - - node list with the logviewer entry.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner _ipxLogData - -
- jsboot/ipx.js, - line 133 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
_ipxLogData - - -string - - - - remaining data to send to log viewer.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner _ipxLogInit - -
- jsboot/ipx.js, - line 138 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
_ipxLogInit - - -boolean - - - - indicates if the IPX socket was already opened.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner IPX - -
- jsboot/ipx.js, - line 30 -
- -

- - -
-
- -
- IPX definitions. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
DEFAULT_SOCKET - - -* - - - - default socket number for DOjS.
BROADCAST - - -* - - - - broadcast address
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - inner IpxAddressToString(addr) - - -
- jsboot/ipx.js, - line 43 -
- -

- - - -
-
- - -
- Convert a node address to a string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
addr - - -IpxAddress - - - - a node address.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxAllNodes(data, nodes) - - -
- jsboot/ipx.js, - line 124 -
- -

- - - -
-
- - -
- Send data to all nodes in array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
data - - -string - - - - the data to send
nodes - - -Array.<IpxAddress> - - - - the node addresses to send to.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxCheckPacket() → {boolean} - - -
- doc/internal.js, - line 79 -
- -

- - - -
-
- - -
- Check for packet in receive buffer. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -boolean - - - - - -- true if a packet is available. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxDebug(str) - - -
- jsboot/ipx.js, - line 150 -
- -

- - - -
-
- - -
- Send logmessages to logviewer using IPX networking. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -string - - - - logmessage to send.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxFindNodes(num, nodes) → {boolean} - - -
- jsboot/ipx.js, - line 86 -
- -

- - - -
-
- - -
- discover nodes on the network. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
num - - -integer - - - - total number of nodes to search for (including the local node).
nodes - - -Array.<IpxAddress> - - - - an array to store the discovered nodes in.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -boolean - - - - - -- true if the wanted number of nodes was discovered, else false. The nodes array will contain the addresses of all found nodes. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxGetLocalAddress() → {IpxAddress} - - -
- doc/internal.js, - line 91 -
- -

- - - -
-
- - -
- Get the local address. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -IpxAddress - - - - - -- an array containing the own address. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxGetPacket() → {IpxPacket} - - -
- doc/internal.js, - line 85 -
- -

- - - -
-
- - -
- Get packet from receive buffer(or NULL). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -IpxPacket - - - - - -- a data packet or null if none available. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxSend(data, dest) - - -
- doc/internal.js, - line 73 -
- -

- - - -
-
- - -
- Send packet via IPX. Max length 79 byte. Node addresses are arrays of 6 numbers between 0-255. See IPX for BROADCAST address. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
data - - -string - - - - data to send.
dest - - -IpxAddress - - - - destination address.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxSocketClose() - - -
- doc/internal.js, - line 66 -
- -

- - - -
-
- - -
- Close IPX socket (if any). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxSocketOpen(num) - - -
- doc/internal.js, - line 61 -
- -

- - - -
-
- - -
- Open an IPX socket. See IPX for DEFAULT_SOCKET. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
num - - -* - - - - the socket number to use.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner IpxStringToAddress(addr) → {IpxAddress} - - -
- jsboot/ipx.js, - line 62 -
- -

- - - -
-
- - -
- Convert an address in hex-string notation back to an JS array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
addr - - -* - - - - a string of 6 hex numbers separated by ':'.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -IpxAddress - - - - - -- An array of six numbers. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/module-midi.html b/doc/html/module-midi.html deleted file mode 100644 index 528fa4fe..00000000 --- a/doc/html/module-midi.html +++ /dev/null @@ -1,818 +0,0 @@ - - - - - Module: midi | Module: midi - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

midi

- - - - -
- -
- -
- - -
MIDI music functions. See Midi on how to load MIDI files.
- - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - - - - - - - - - - - -

Methods

- -
- - -
- -

- - inner MidiGetTime() → {number} - - -
- doc/internal.js, - line 123 -
- -

- - - -
-
- - -
- Get song position. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- current song position in seconds. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MidiIsPlaying() → {boolean} - - -
- doc/internal.js, - line 102 -
- -

- - - -
-
- - -
- Check if the file is still playing. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -boolean - - - - - -- true if the file is still playing. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MidiOut(data) - - -
- doc/internal.js, - line 129 -
- -

- - - -
-
- - -
- Send MIDI commands to output. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
data - - -Array.<number> - - - - an array of midi commands.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MidiPause() - - -
- doc/internal.js, - line 112 -
- -

- - - -
-
- - -
- Pause playing midi. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MidiResume() - - -
- doc/internal.js, - line 117 -
- -

- - - -
-
- - -
- Resume playing midi after MidiPause(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MidiStop() - - -
- doc/internal.js, - line 107 -
- -

- - - -
-
- - -
- Stop playing midi. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/module-other.html b/doc/html/module-other.html deleted file mode 100644 index 56721b2f..00000000 --- a/doc/html/module-other.html +++ /dev/null @@ -1,13354 +0,0 @@ - - - - - Module: other | Module: other - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

other

- - -
- -
- -
- - - - - -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- inner DEBUG - -
- jsboot/func.js, - line 28 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
DEBUG - - -boolean - - - - enable/disable Debug() output.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner FILE - -
- jsboot/file.js, - line 31 -
- -

- - -
-
- -
- file mode definition. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
READ - - -* - - - - open file in read mode.
WRITE - - -* - - - - open file in write mode (truncating existing contents)
APPEND - - -* - - - - open file in append mode.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner KEY - -
- jsboot/func.js, - line 201 -
- -

- - -
-
- -
- keyboard input. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
Code - - -* - - - - key definitions.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner MOUSE - -
- jsboot/func.js, - line 182 -
- -

- - -
-
- -
- event interface. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
Mode.NONE - - -* - - - - no cursor
Mode.ARROW - - -* - - - - arrow cursor
Mode.BUSY - - -* - - - - busy cursor
Mode.QUESTION - - -* - - - - questionmark cursor
Mode.CURSOR_EDIT - - -* - - - - edit cursor
Buttons - - -* - - - - mouse button definitions -
Properties
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
LEFT - - -* - - - -
RIGHT - - -* - - - -
MIDDLE - - -* - - - -
- -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner REMOTE_DEBUG - -
- jsboot/func.js, - line 33 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
REMOTE_DEBUG - - -boolean - - - - enable/disable Debug() sending via IPX.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - inner _Debug(str) - - -
- jsboot/func.js, - line 52 -
- -

- - - -
-
- - -
- Internal debug which does not redirect to IPX if enabled. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -string - - - - the message to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CharCode(s) - - -
- jsboot/func.js, - line 156 -
- -

- - - -
-
- - -
- get char code. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
s - - -string - - - - a string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - - -- the ASCII-code of the first character. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CompareKey(k, s) - - -
- jsboot/func.js, - line 166 -
- -

- - - -
-
- - -
- compare a keycode with a character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
k - - -number - - - - keycode from an Event
s - - -string - - - - a string with one char
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Debug(str) - - -
- jsboot/func.js, - line 40 -
- -

- - - -
-
- - -
- print javascript debug output if DEBUG is true. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -string - - - - the message to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Gc(info) - - -
- doc/internal.js, - line 444 -
- -

- - - -
-
- - -
- Run garbage collector, print statistics to logfile if 'info==true'. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
info - - -boolean - - - - true to print collection stats to logfile.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetFramerate() → {number} - - -
- doc/internal.js, - line 462 -
- -

- - - -
-
- - -
- Current frame rate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- current framerate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Include(name) - - -
- jsboot/func.js, - line 99 -
- -

- - - -
-
- - -
- include a module. The exported functions are copied into global scope. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
name - - -string - - - - module file name.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner List(dname) → {Array.<string>} - - -
- doc/internal.js, - line 431 -
- -

- - - -
-
- - -
- Get directory listing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
dname - - -string - - - - name of directory to list.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<string> - - - - - -- array of entry names. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MemoryInfo() → {MemInfo} - - -
- doc/internal.js, - line 450 -
- -

- - - -
-
- - -
- Get information system memory. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -MemInfo - - - - - -- an info object. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseSetCursorMode(mode) - - -
- doc/internal.js, - line 389 -
- -

- - - -
-
- - -
- Change mode of the mouse cursor. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -* - - - - a mode from MOUSE.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseSetLimits(x1, y1, x2, y2) - - -
- doc/internal.js, - line 370 -
- -

- - - -
-
- - -
- Limit mouse movement. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -number - - - - start x coordinate.
y1 - - -number - - - - start y coordinate.
x2 - - -number - - - - end x coordinate.
y2 - - -number - - - - end y coordinate.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseSetSpeed(x, y) - - -
- doc/internal.js, - line 361 -
- -

- - - -
-
- - -
- Set mouse speed. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - horizontal speed.
y - - -number - - - - vertical speed.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseShowCursor(b) - - -
- doc/internal.js, - line 383 -
- -

- - - -
-
- - -
- Show hide mouse cursor. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
b - - -boolean - - - - true or false.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseWarp(x, y) - - -
- doc/internal.js, - line 377 -
- -

- - - -
-
- - -
- Move mouse cursor. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MsecTime() → {number} - - -
- doc/internal.js, - line 417 -
- -

- - - -
-
- - -
- Get ms timestamp. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- ms time. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Print(s) - - -
- doc/internal.js, - line 395 -
- -

- - - -
-
- - -
- Write data to JSLOG.TXT logfile. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
s - - -string - - - - the string to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Println(s) - - -
- doc/internal.js, - line 400 -
- -

- - - -
-
- - -
- Write data to JSLOG.TXT logfile with a newline. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
s - - -string - - - - the string to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Read(filename) → {string} - - -
- doc/internal.js, - line 424 -
- -

- - - -
-
- - -
- Load the contents of a file into a string. Throws exception if loading fails. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -string - - - - name of file to read.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -string - - - - - -- the contents of the file. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Require(name) - - -
- jsboot/func.js, - line 63 -
- -

- - - -
-
- - -
- import a module. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
name - - -string - - - - module file name.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - - -- the imported module. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SetExitKey(key) - - -
- doc/internal.js, - line 468 -
- -

- - - -
-
- - -
- Change the exit key from ESCAPE to any other keycode from KEY}. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -number - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SetFramerate(rate) - - -
- doc/internal.js, - line 456 -
- -

- - - -
-
- - -
- Set maximum frame rate. If Loop takes longer than '1/rate' seconds then the framerate will not be reached. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
rate - - -number - - - - max frame rate wanted.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Sleep(ms) - - -
- doc/internal.js, - line 411 -
- -

- - - -
-
- - -
- Sleep for the given number of ms. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
ms - - -number - - - - time to sleep.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner StartupInfo() - - -
- jsboot/func.js, - line 118 -
- -

- - - -
-
- - -
- print startup info with screen details. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Stat(name) → {StatInfo} - - -
- doc/internal.js, - line 438 -
- -

- - - -
-
- - -
- Get information about a file / directory. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
name - - -string - - - - name of the file to get info for.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StatInfo - - - - - -- an info object. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Stop() - - -
- doc/internal.js, - line 405 -
- -

- - - -
-
- - -
- DOjS will exit after the current call to Loop. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

other

- - -
- -
- -
- - - - - -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- inner DEBUG - -
- jsboot/func.js, - line 28 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
DEBUG - - -boolean - - - - enable/disable Debug() output.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner FILE - -
- jsboot/file.js, - line 31 -
- -

- - -
-
- -
- file mode definition. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
READ - - -* - - - - open file in read mode.
WRITE - - -* - - - - open file in write mode (truncating existing contents)
APPEND - - -* - - - - open file in append mode.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner KEY - -
- jsboot/func.js, - line 201 -
- -

- - -
-
- -
- keyboard input. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
Code - - -* - - - - key definitions.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner MOUSE - -
- jsboot/func.js, - line 182 -
- -

- - -
-
- -
- event interface. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
Mode.NONE - - -* - - - - no cursor
Mode.ARROW - - -* - - - - arrow cursor
Mode.BUSY - - -* - - - - busy cursor
Mode.QUESTION - - -* - - - - questionmark cursor
Mode.CURSOR_EDIT - - -* - - - - edit cursor
Buttons - - -* - - - - mouse button definitions -
Properties
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
LEFT - - -* - - - -
RIGHT - - -* - - - -
MIDDLE - - -* - - - -
- -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner REMOTE_DEBUG - -
- jsboot/func.js, - line 33 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
REMOTE_DEBUG - - -boolean - - - - enable/disable Debug() sending via IPX.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - inner _Debug(str) - - -
- jsboot/func.js, - line 52 -
- -

- - - -
-
- - -
- Internal debug which does not redirect to IPX if enabled. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -string - - - - the message to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CharCode(s) - - -
- jsboot/func.js, - line 156 -
- -

- - - -
-
- - -
- get char code. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
s - - -string - - - - a string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - - -- the ASCII-code of the first character. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CompareKey(k, s) - - -
- jsboot/func.js, - line 166 -
- -

- - - -
-
- - -
- compare a keycode with a character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
k - - -number - - - - keycode from an Event
s - - -string - - - - a string with one char
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Debug(str) - - -
- jsboot/func.js, - line 40 -
- -

- - - -
-
- - -
- print javascript debug output if DEBUG is true. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -string - - - - the message to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Gc(info) - - -
- doc/internal.js, - line 444 -
- -

- - - -
-
- - -
- Run garbage collector, print statistics to logfile if 'info==true'. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
info - - -boolean - - - - true to print collection stats to logfile.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetFramerate() → {number} - - -
- doc/internal.js, - line 462 -
- -

- - - -
-
- - -
- Current frame rate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- current framerate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Include(name) - - -
- jsboot/func.js, - line 99 -
- -

- - - -
-
- - -
- include a module. The exported functions are copied into global scope. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
name - - -string - - - - module file name.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner List(dname) → {Array.<string>} - - -
- doc/internal.js, - line 431 -
- -

- - - -
-
- - -
- Get directory listing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
dname - - -string - - - - name of directory to list.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<string> - - - - - -- array of entry names. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MemoryInfo() → {MemInfo} - - -
- doc/internal.js, - line 450 -
- -

- - - -
-
- - -
- Get information system memory. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -MemInfo - - - - - -- an info object. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseSetCursorMode(mode) - - -
- doc/internal.js, - line 389 -
- -

- - - -
-
- - -
- Change mode of the mouse cursor. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -* - - - - a mode from MOUSE.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseSetLimits(x1, y1, x2, y2) - - -
- doc/internal.js, - line 370 -
- -

- - - -
-
- - -
- Limit mouse movement. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -number - - - - start x coordinate.
y1 - - -number - - - - start y coordinate.
x2 - - -number - - - - end x coordinate.
y2 - - -number - - - - end y coordinate.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseSetSpeed(x, y) - - -
- doc/internal.js, - line 361 -
- -

- - - -
-
- - -
- Set mouse speed. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - horizontal speed.
y - - -number - - - - vertical speed.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseShowCursor(b) - - -
- doc/internal.js, - line 383 -
- -

- - - -
-
- - -
- Show hide mouse cursor. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
b - - -boolean - - - - true or false.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseWarp(x, y) - - -
- doc/internal.js, - line 377 -
- -

- - - -
-
- - -
- Move mouse cursor. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MsecTime() → {number} - - -
- doc/internal.js, - line 417 -
- -

- - - -
-
- - -
- Get ms timestamp. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- ms time. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Print(s) - - -
- doc/internal.js, - line 395 -
- -

- - - -
-
- - -
- Write data to JSLOG.TXT logfile. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
s - - -string - - - - the string to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Println(s) - - -
- doc/internal.js, - line 400 -
- -

- - - -
-
- - -
- Write data to JSLOG.TXT logfile with a newline. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
s - - -string - - - - the string to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Read(filename) → {string} - - -
- doc/internal.js, - line 424 -
- -

- - - -
-
- - -
- Load the contents of a file into a string. Throws exception if loading fails. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -string - - - - name of file to read.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -string - - - - - -- the contents of the file. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Require(name) - - -
- jsboot/func.js, - line 63 -
- -

- - - -
-
- - -
- import a module. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
name - - -string - - - - module file name.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - - -- the imported module. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SetExitKey(key) - - -
- doc/internal.js, - line 468 -
- -

- - - -
-
- - -
- Change the exit key from ESCAPE to any other keycode from KEY}. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -number - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SetFramerate(rate) - - -
- doc/internal.js, - line 456 -
- -

- - - -
-
- - -
- Set maximum frame rate. If Loop takes longer than '1/rate' seconds then the framerate will not be reached. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
rate - - -number - - - - max frame rate wanted.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Sleep(ms) - - -
- doc/internal.js, - line 411 -
- -

- - - -
-
- - -
- Sleep for the given number of ms. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
ms - - -number - - - - time to sleep.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner StartupInfo() - - -
- jsboot/func.js, - line 118 -
- -

- - - -
-
- - -
- print startup info with screen details. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Stat(name) → {StatInfo} - - -
- doc/internal.js, - line 438 -
- -

- - - -
-
- - -
- Get information about a file / directory. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
name - - -string - - - - name of the file to get info for.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StatInfo - - - - - -- an info object. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Stop() - - -
- doc/internal.js, - line 405 -
- -

- - - -
-
- - -
- DOjS will exit after the current call to Loop. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

other

- - -
- -
- -
- - - - - -
- - - - - - - - - - - - - - - -

Members

- -
- - -
-

- inner DEBUG - -
- jsboot/func.js, - line 28 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
DEBUG - - -boolean - - - - enable/disable Debug() output.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner FILE - -
- jsboot/file.js, - line 31 -
- -

- - -
-
- -
- file mode definition. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
READ - - -* - - - - open file in read mode.
WRITE - - -* - - - - open file in write mode (truncating existing contents)
APPEND - - -* - - - - open file in append mode.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner KEY - -
- jsboot/func.js, - line 201 -
- -

- - -
-
- -
- keyboard input. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
Code - - -* - - - - key definitions.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner MOUSE - -
- jsboot/func.js, - line 182 -
- -

- - -
-
- -
- event interface. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
Mode.NONE - - -* - - - - no cursor
Mode.ARROW - - -* - - - - arrow cursor
Mode.BUSY - - -* - - - - busy cursor
Mode.QUESTION - - -* - - - - questionmark cursor
Mode.CURSOR_EDIT - - -* - - - - edit cursor
Buttons - - -* - - - - mouse button definitions -
Properties
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
LEFT - - -* - - - -
RIGHT - - -* - - - -
MIDDLE - - -* - - - -
- -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner REMOTE_DEBUG - -
- jsboot/func.js, - line 33 -
- -

- - -
-
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
REMOTE_DEBUG - - -boolean - - - - enable/disable Debug() sending via IPX.
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - inner _Debug(str) - - -
- jsboot/func.js, - line 52 -
- -

- - - -
-
- - -
- Internal debug which does not redirect to IPX if enabled. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -string - - - - the message to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CharCode(s) - - -
- jsboot/func.js, - line 156 -
- -

- - - -
-
- - -
- get char code. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
s - - -string - - - - a string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - - -- the ASCII-code of the first character. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner CompareKey(k, s) - - -
- jsboot/func.js, - line 166 -
- -

- - - -
-
- - -
- compare a keycode with a character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
k - - -number - - - - keycode from an Event
s - - -string - - - - a string with one char
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Debug(str) - - -
- jsboot/func.js, - line 40 -
- -

- - - -
-
- - -
- print javascript debug output if DEBUG is true. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -string - - - - the message to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Gc(info) - - -
- doc/internal.js, - line 444 -
- -

- - - -
-
- - -
- Run garbage collector, print statistics to logfile if 'info==true'. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
info - - -boolean - - - - true to print collection stats to logfile.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner GetFramerate() → {number} - - -
- doc/internal.js, - line 462 -
- -

- - - -
-
- - -
- Current frame rate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- current framerate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Include(name) - - -
- jsboot/func.js, - line 99 -
- -

- - - -
-
- - -
- include a module. The exported functions are copied into global scope. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
name - - -string - - - - module file name.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner List(dname) → {Array.<string>} - - -
- doc/internal.js, - line 431 -
- -

- - - -
-
- - -
- Get directory listing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
dname - - -string - - - - name of directory to list.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<string> - - - - - -- array of entry names. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MemoryInfo() → {MemInfo} - - -
- doc/internal.js, - line 450 -
- -

- - - -
-
- - -
- Get information system memory. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -MemInfo - - - - - -- an info object. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseSetCursorMode(mode) - - -
- doc/internal.js, - line 389 -
- -

- - - -
-
- - -
- Change mode of the mouse cursor. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -* - - - - a mode from MOUSE.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseSetLimits(x1, y1, x2, y2) - - -
- doc/internal.js, - line 370 -
- -

- - - -
-
- - -
- Limit mouse movement. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -number - - - - start x coordinate.
y1 - - -number - - - - start y coordinate.
x2 - - -number - - - - end x coordinate.
y2 - - -number - - - - end y coordinate.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseSetSpeed(x, y) - - -
- doc/internal.js, - line 361 -
- -

- - - -
-
- - -
- Set mouse speed. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - horizontal speed.
y - - -number - - - - vertical speed.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseShowCursor(b) - - -
- doc/internal.js, - line 383 -
- -

- - - -
-
- - -
- Show hide mouse cursor. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
b - - -boolean - - - - true or false.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MouseWarp(x, y) - - -
- doc/internal.js, - line 377 -
- -

- - - -
-
- - -
- Move mouse cursor. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - x coordinate.
y - - -number - - - - y coordinate.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner MsecTime() → {number} - - -
- doc/internal.js, - line 417 -
- -

- - - -
-
- - -
- Get ms timestamp. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- ms time. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Print(s) - - -
- doc/internal.js, - line 395 -
- -

- - - -
-
- - -
- Write data to JSLOG.TXT logfile. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
s - - -string - - - - the string to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Println(s) - - -
- doc/internal.js, - line 400 -
- -

- - - -
-
- - -
- Write data to JSLOG.TXT logfile with a newline. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
s - - -string - - - - the string to print.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Read(filename) → {string} - - -
- doc/internal.js, - line 424 -
- -

- - - -
-
- - -
- Load the contents of a file into a string. Throws exception if loading fails. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -string - - - - name of file to read.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -string - - - - - -- the contents of the file. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Require(name) - - -
- jsboot/func.js, - line 63 -
- -

- - - -
-
- - -
- import a module. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
name - - -string - - - - module file name.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - - -- the imported module. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SetExitKey(key) - - -
- doc/internal.js, - line 468 -
- -

- - - -
-
- - -
- Change the exit key from ESCAPE to any other keycode from KEY}. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -number - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner SetFramerate(rate) - - -
- doc/internal.js, - line 456 -
- -

- - - -
-
- - -
- Set maximum frame rate. If Loop takes longer than '1/rate' seconds then the framerate will not be reached. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
rate - - -number - - - - max frame rate wanted.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Sleep(ms) - - -
- doc/internal.js, - line 411 -
- -

- - - -
-
- - -
- Sleep for the given number of ms. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
ms - - -number - - - - time to sleep.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner StartupInfo() - - -
- jsboot/func.js, - line 118 -
- -

- - - -
-
- - -
- print startup info with screen details. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Stat(name) → {StatInfo} - - -
- doc/internal.js, - line 438 -
- -

- - - -
-
- - -
- Get information about a file / directory. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
name - - -string - - - - name of the file to get info for.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StatInfo - - - - - -- an info object. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner Stop() - - -
- doc/internal.js, - line 405 -
- -

- - - -
-
- - -
- DOjS will exit after the current call to Loop. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/module-p5compat-Color.html b/doc/html/module-p5compat-Color.html deleted file mode 100644 index 361b76d5..00000000 --- a/doc/html/module-p5compat-Color.html +++ /dev/null @@ -1,199 +0,0 @@ - - - - - Class: Color | Class: Color - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

- p5compat~Color()

- - -
- -
- -
- - - -
- -

- - new Color() - - -
- jsboot/p5color.js, - line 299 -
- -

- - - -
-
- - -
- Each color stores the color mode and level maxes that applied at the time of its construction. These are used to interpret the input arguments (at construction and later for that instance of color) and to format the output e.g. when saturation() is requested. Internally we store an array representing the ideal RGBA values in floating point form, normalized from 0 to 1. From this we calculate the closest screen color (RGBA levels from 0 to 255) and expose this to the renderer. We also cache normalized, floating point components of the color in various representations as they are calculated. This is done to prevent repeating a conversion that has already been performed. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/module-p5compat.html b/doc/html/module-p5compat.html deleted file mode 100644 index 3d7d8c1b..00000000 --- a/doc/html/module-p5compat.html +++ /dev/null @@ -1,299577 +0,0 @@ - - - - - Module: p5compat | Module: p5compat - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

p5compat

- - - - -
- -
- -
- - - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - -

Classes

- - -
- -
-

- Color -
- module:p5compat~Color -
-

-
- - -
- - - - - - - - - - -

Members

- -
- - -
-

- static ColorConversion - -
- jsboot/p5color.js, - line 41 -
- -

- - -
-
- -
- Conversions adapted from . In these functions, hue is always in the range [0, 1], just like all other components are in the range [0, 1]. 'Brightness' and 'value' are used interchangeably. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly displayHeight - -
- jsboot/p5env.js, - line 202 -
- -

- - -
-
- -
- System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly displayWidth - -
- jsboot/p5env.js, - line 189 -
- -

- - -
-
- -
- System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly focused - -
- jsboot/p5env.js, - line 109 -
- -

- - -
-
- -
- Confirms if the window a p5.js program is in is "focused," meaning that the sketch will accept mouse or keyboard input. This variable is "true" if the window is focused and "false" if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
focused - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// To demonstrate, put two windows side by side.
// Click on the window that the p5 sketch isn't in!
function draw() {
  background(200);
  noStroke();
  fill(0, 200, 0);
  ellipse(25, 25, 50, 50);

  if (!focused) {
    // or "if (focused === false)"
    stroke(200, 0, 0);
    line(0, 0, 100, 100);
    line(100, 0, 0, 100);
  }
}
- - -
- - - - -
-

- static, readonly frameCount - -
- jsboot/p5env.js, - line 83 -
- -

- - -
-
- -
- The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
frameCount - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
- - -
- - - - -
-

- static, readonly height - -
- jsboot/p5env.js, - line 238 -
- -

- - -
-
- -
- System variable that stores the height of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
height - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly key - -
- jsboot/p5input.js, - line 507 -
- -

- - -
-
- -
- The system variable key always contains the value of the most recent key on the keyboard that was typed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Click any key to display it!
// (Not Guaranteed to be Case Sensitive)
function setup() {
  fill(245, 123, 158);
  textSize(50);
}

function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}
- - -
- - - - -
-

- static, readonly keyCode - -
- jsboot/p5input.js, - line 532 -
- -

- - -
-
- -
- The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyCode - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let fillVal = 126;
function draw() {
  fill(fillVal);
  rect(25, 25, 50, 50);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    fillVal = 255;
  } else if (keyCode === DOWN_ARROW) {
    fillVal = 0;
  }
  return false; // prevent default
}
- - -
- - - - -
-

- static, readonly keyIsPressed - -
- jsboot/p5input.js, - line 486 -
- -

- - -
-
- -
- The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
- - -
- - - - -
-

- static, readonly mouseButton - -
- jsboot/p5input.js, - line 278 -
- -

- - -
-
- -
- Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseButton - - -Constant - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      ellipse(50, 50, 50, 50);
    }
    if (mouseButton === RIGHT) {
      rect(25, 25, 50, 50);
    }
    if (mouseButton === CENTER) {
      triangle(23, 75, 50, 20, 78, 75);
    }
  }

  print(mouseButton);
}
- - -
- - - - -
-

- static, readonly mouseIsPressed - -
- jsboot/p5input.js, - line 301 -
- -

- - -
-
- -
- The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }

  print(mouseIsPressed);
}
- - -
- - - - -
-

- static, readonly mouseX - -
- jsboot/p5input.js, - line 53 -
- -

- - -
-
- -
- The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
- - -
- - - - -
-

- static, readonly mouseY - -
- jsboot/p5input.js, - line 71 -
- -

- - -
-
- -
- The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
- - -
- - - - -
-

- static, readonly pmouseX - -
- jsboot/p5input.js, - line 95 -
- -

- - -
-
- -
- The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas to leave a trail
function setup() {
  //slow down the frameRate to make it more visible
  frameRate(10);
}

function draw() {
  background(244, 248, 252);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + ' -> ' + mouseX);
}
- - -
- - - - -
-

- static, readonly pmouseY - -
- jsboot/p5input.js, - line 118 -
- -

- - -
-
- -
- The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);
  //draw a square only if the mouse is not moving
  if (mouseY === pmouseY && mouseX === pmouseX) {
    rect(20, 20, 60, 60);
  }

  print(pmouseY + ' -> ' + mouseY);
}
- - -
- - - - -
-

- static, readonly pwinMouseX - -
- jsboot/p5input.js, - line 213 -
- -

- - -
-
- -
- The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current x position is the horizontal mouse speed
  let speed = abs(winMouseX - pwinMouseX);
  //change the size of the circle
  //according to the horizontal speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly pwinMouseY - -
- jsboot/p5input.js, - line 247 -
- -

- - -
-
- -
- The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current y position is the vertical mouse speed
  let speed = abs(winMouseY - pwinMouseY);
  //change the size of the circle
  //according to the vertical speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly width - -
- jsboot/p5env.js, - line 230 -
- -

- - -
-
- -
- System variable that stores the width of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
width - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly windowHeight - -
- jsboot/p5env.js, - line 222 -
- -

- - -
-
- -
- System variable that stores the height of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly windowWidth - -
- jsboot/p5env.js, - line 212 -
- -

- - -
-
- -
- System variable that stores the width of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly winMouseX - -
- jsboot/p5input.js, - line 149 -
- -

- - -
-
- -
- The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the horizontal mouse position
  //relative to the window
  myCanvas.position(winMouseX + 1, windowHeight / 2);

  //the y of the square is relative to the canvas
  rect(20, mouseY, 60, 60);
}
- - -
- - - - -
-

- static, readonly winMouseY - -
- jsboot/p5input.js, - line 180 -
- -

- - -
-
- -
- The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the vertical mouse position
  //relative to the window
  myCanvas.position(windowWidth / 2, winMouseY + 1);

  //the x of the square is relative to the canvas
  rect(mouseX, 20, 60, 60);
}
- - -
- - - - -
-

- inner colorPatterns - -
- jsboot/p5color.js, - line 888 -
- -

- - -
-
- -
- Full color string patterns. The capture groups are necessary. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner namedColors - -
- jsboot/p5color.js, - line 722 -
- -

- - -
-
- -
- CSS named colors. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner WHITESPACE - -
- jsboot/p5color.js, - line 880 -
- -

- - -
-
- -
- These regular expressions are used to build up the patterns for matching viable CSS color strings: fragmenting the regexes in this way increases the legibility and comprehensibility of the code. Note that RGB values of .9 are not parsed by IE, but are supported here for color string consistency. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - static _cloneEnv() - - -
- jsboot/p5.js, - line 67 -
- -

- - - -
-
- - -
- deep copy the current environment. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _ensureMatrix() - - -
- jsboot/p5trans.js, - line 34 -
- -

- - - -
-
- - -
- make sure we have a 2x2 identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _PolyLine() - - -
- jsboot/p5shape.js, - line 550 -
- -

- - - -
-
- - -
- draw polygon by using lines. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transX(x, y) → {number} - - -
- jsboot/p5trans.js, - line 67 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated x coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transY(x, y) → {number} - - -
- jsboot/p5trans.js, - line 82 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated y coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static createCanvas() - - -
- jsboot/p5.js, - line 201 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static exit() - - -
- jsboot/p5.js, - line 231 -
- -

- - - -
-
- - -
- exit the script after the current Loop(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noSmooth() - - -
- jsboot/p5.js, - line 211 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noTint() - - -
- jsboot/p5.js, - line 226 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static settings() - - -
- jsboot/p5.js, - line 216 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static size() - - -
- jsboot/p5.js, - line 196 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static smooth() - - -
- jsboot/p5.js, - line 206 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static tint() - - -
- jsboot/p5.js, - line 221 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner abs(n) → {Number} - - -
- jsboot/p5math.js, - line 59 -
- -

- - - -
-
- - -
- Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to compute
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- absolute value of given number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
- - - -
- - - - -
- -

- - inner acos(value) → {Number} - - -
- jsboot/p5math.js, - line 1211 -
- -

- - - -
-
- - -
- The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc cosine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc cosine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);
- - - -
- - - - -
- -

- - inner alpha(color) → {Number} - - -
- jsboot/p5color.js, - line 1271 -
- -

- - - -
-
- - -
- Extracts the alpha value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the alpha value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
let c = color(0, 126, 255, 102);
fill(c);
rect(15, 15, 35, 70);
let value = alpha(c); // Sets 'value' to 102
fill(value);
rect(50, 15, 35, 70);
- - - -
- - - - -
- -

- - inner angleMode(mode) - - -
- jsboot/p5math.js, - line 1423 -
- -

- - - -
-
- - -
- Sets the current mode of p5 to given mode. Default mode is RADIANS. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either RADIANS or DEGREES
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}
- - - -
- - - - -
- -

- - inner append(array, value) → {Array} - - -
- jsboot/p5util.js, - line 30 -
- -

- - - -
-
- - -
- Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
array - - -Array - - - - Array to append
value - - -any - - - - to be added to the Array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the array that was appended to - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}
- - - -
- - - - -
- -

- - inner applyMatrix(a, b, c, d, e, f) - - -
- jsboot/p5trans.js, - line 90 -
- -

- - - -
-
- - -
- Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia. The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form: > The transformation matrix used when applyMatrix is called -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
b - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
c - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
d - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
e - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
f - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  // Equivalent to translate(x, y);
  applyMatrix(1, 0, 0, 1, 40 + step, 50);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  translate(50, 50);
  // Equivalent to scale(x, y);
  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, 0, TWO_PI);
  var cos_a = cos(angle);
  var sin_a = sin(angle);
  background(200);
  translate(50, 50);
  // Equivalent to rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, -PI / 4, PI / 4);
  background(200);
  translate(50, 50);
  // equivalent to shearX(angle);
  var shear_factor = 1 / tan(PI / 2 - angle);
  applyMatrix(1, 0, shear_factor, 1, 0, 0);
  rect(0, 0, 50, 50);
}
- - - -
- - - - -
- -

- - inner arc(x, y, w, h, start, stop, modeopt) - - -
- jsboot/p5shape.js, - line 33 -
- -

- - - -
-
- - -
- Draw an arc to the screen. If called with only x, y, w, h, start, and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.

The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the arc's ellipse
y - - -Number - - - - - - - - - - y-coordinate of the arc's ellipse
w - - -Number - - - - - - - - - - width of the arc's ellipse by default
h - - -Number - - - - - - - - - - height of the arc's ellipse by default
start - - -Number - - - - - - - - - - angle to start the arc, specified in radians
stop - - -Number - - - - - - - - - - angle to stop the arc, specified in radians
mode - - -Constant - - - - - - <optional>
- - - - - - 		optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
arc(50, 55, 50, 50, 0, HALF_PI);
noFill();
arc(50, 55, 60, 60, HALF_PI, PI);
arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
- - - -
- - - - -
- -

- - inner arrayCopy(src, srcPosition, dst, dstPosition, length) - - -
- jsboot/p5util.js, - line 52 -
- -

- - - -
-
- - -
- Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().

The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).

Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
src - - -Array - - - - the source Array
srcPosition - - -Integer - - - - starting position in the source Array
dst - - -Array - - - - the destination Array
dstPosition - - -Integer - - - - starting position in the destination Array
length - - -Integer - - - - number of Array elements to be copied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - -
Deprecated:
  • Yes
- - - - - - - - - - - - - - - -
- - - -
Example
- - 
var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]
- - - -
- - - - -
- -

- - inner asin(value) → {Number} - - -
- jsboot/p5math.js, - line 1237 -
- -

- - - -
-
- - -
- The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc sine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc sine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);
- - - -
- - - - -
- -

- - inner atan(value) → {Number} - - -
- jsboot/p5math.js, - line 1264 -
- -

- - - -
-
- - -
- The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc tangent is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);
- - - -
- - - - -
- -

- - inner atan2(y, x) → {Number} - - -
- jsboot/p5math.js, - line 1291 -
- -

- - - -
-
- - -
- Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor.

Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
y - - -Number - - - - y-coordinate of the point
x - - -Number - - - - x-coordinate of the point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given point - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}
- - - -
- - - - -
- -

- - inner background(color) - - -
- jsboot/p5color.js, - line 1702 -
- -

- - - -
-
- - -
- The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A Color object can also be provided to set the background color.

An Image can also be provided to set the background image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - any value created by the color() function
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
background(51);

// R, G & B integer values
background(255, 204, 0);

// H, S & B integer values
colorMode(HSB);
background(255, 204, 100);

// Named SVG/CSS color string
background('red');

// three-digit hexadecimal RGB notation
background('#fae');

// six-digit hexadecimal RGB notation
background('#222222');

// integer RGB notation
background('rgb(0,255,0)');

// integer RGBA notation
background('rgba(0,255,0, 0.25)');

// percentage RGB notation
background('rgb(100%,0%,10%)');

// percentage RGBA notation
background('rgba(100%,0%,100%,0.5)');

// p5 Color object
background(color(0, 0, 255));
- - - -
- - - - -
- -

- - inner background(colorstring, aopt) - - -
- jsboot/p5color.js, - line 1760 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
colorstring - - -String - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex
a - - -Number - - - - - - <optional>
- - - - - - 		opacity of the background relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(gray, aopt) - - -
- jsboot/p5color.js, - line 1769 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - specifies a value between white and black
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(v1, v2, v3, aopt) - - -
- jsboot/p5color.js, - line 1775 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value (depending on the current color mode)
v2 - - -Number - - - - - - - - - - green or saturation value (depending on the current color mode)
v3 - - -Number - - - - - - - - - - blue or brightness value (depending on the current color mode)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(values) - - -
- jsboot/p5color.js, - line 1786 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(bitmap, aopt) - - -
- jsboot/p5color.js, - line 1792 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
bitmap - - -Bitmap - - - - - - - - - - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner beginShape(kindopt) - - -
- jsboot/p5shape.js, - line 379 -
- -

- - - -
-
- - -
- Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.

The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.

Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
kind - - -Constant - - - - - - <optional>
- - - - - - 		either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

beginShape(LINES);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();

beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
- - - -
- - - - -
- -

- - inner blue(color) → {Number} - - -
- jsboot/p5color.js, - line 1291 -
- -

- - - -
-
- - -
- Extracts the blue value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the blue value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(175, 100, 220); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let blueValue = blue(c); // Get blue in 'c'
print(blueValue); // Prints "220.0"
fill(0, 0, blueValue); // Use 'blueValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner boolean(n) → {Boolean} - - -
- jsboot/p5util.js, - line 422 -
- -

- - - -
-
- - -
- Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
- - - -
- - - - -
- -

- - inner brightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1312 -
- -

- - - -
-
- - -
- Extracts the HSB brightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the brightness value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = brightness(c); // Sets 'value' to 255
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner byte(n) → {Number} - - -
- jsboot/p5util.js, - line 452 -
- -

- - - -
-
- - -
- Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- byte representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]
- - - -
- - - - -
- -

- - inner ceil(n) → {Integer} - - -
- jsboot/p5math.js, - line 77 -
- -

- - - -
-
- - -
- Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round up
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded up number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner char(n) → {String} - - -
- jsboot/p5util.js, - line 481 -
- -

- - - -
-
- - -
- Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
- - - -
- - - - -
- -

- - inner circle(x, y, d) - - -
- jsboot/p5shape.js, - line 133 -
- -

- - - -
-
- - -
- Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the centre of the circle.
y - - -Number - - - - y-coordinate of the centre of the circle.
d - - -Number - - - - diameter of the circle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a circle at location (30, 30) with a diameter of 20.
circle(30, 30, 20);
- - - -
- - - - -
- -

- - inner clear() - - -
- jsboot/p5color.js, - line 1813 -
- -

- - - -
-
- - -
- Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
  clear();
}
- - - -
- - - - -
- -

- - inner color(color) → {Color} - - -
- jsboot/p5color.js, - line 1472 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(value) → {Color} - - -
- jsboot/p5color.js, - line 1461 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(v1, v2, v3, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1449 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(values) → {Color} - - -
- jsboot/p5color.js, - line 1466 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(gray, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1333 -
- -

- - - -
-
- - -
- Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.

Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - number specifying value between white and black.
alpha - - -Number - - - - - - <optional>
- - - - - - 		alpha value relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- resulting color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(30, 20, 55, 55); // Draw rectangle

let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
ellipse(25, 25, 80, 80); // Draw left circle

// Using only one value with color()
// generates a grayscale value.
c = color(65); // Update 'c' with grayscale value
fill(c); // Use updated 'c' as fill color
ellipse(75, 75, 80, 80); // Draw right circle

// Named SVG & CSS colors may be used,
let c = color('magenta');
fill(c); // Use 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(20, 20, 60, 60); // Draw rectangle

// as can hex color codes:
noStroke(); // Don't draw a stroke around shapes
let c = color('#0f0');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('#00ff00');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// RGB and RGBA color strings are also supported:
// these all set to the same color (solid blue)
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('rgb(0,0,255)');
fill(c); // Use 'c' as fill color
rect(10, 10, 35, 35); // Draw rectangle

c = color('rgb(0%, 0%, 100%)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 35, 35); // Draw rectangle

c = color('rgba(0, 0, 255, 1)');
fill(c); // Use updated 'c' as fill color
rect(10, 55, 35, 35); // Draw rectangle

c = color('rgba(0%, 0%, 100%, 1)');
fill(c); // Use updated 'c' as fill color
rect(55, 55, 35, 35); // Draw rectangle

// HSL color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsl(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsla(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// HSB color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsb(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsba(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

let c; // Declare color 'c'
noStroke(); // Don't draw a stroke around shapes

// If no colorMode is specified, then the
// default of RGB with scale of 0-255 is used.
c = color(50, 55, 100); // Create a color for 'c'
fill(c); // Use color variable 'c' as fill color
rect(0, 10, 45, 80); // Draw left rect

colorMode(HSB, 100); // Use HSB with scale of 0-100
c = color(50, 55, 100); // Update 'c' with new color
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw right rect
- - - -
- - - - -
- -

- - inner colorMode(mode, maxopt) - - -
- jsboot/p5color.js, - line 1841 -
- -

- - - -
-
- - -
- colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.

Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - - either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
max - - -Number - - - - - - <optional>
- - - - - - 		range for all values
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(RGB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 0);
    point(i, j);
  }
}

noStroke();
colorMode(HSB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 100);
    point(i, j);
  }
}

colorMode(RGB, 255);
let c = color(127, 255, 0);

colorMode(RGB, 1);
let myColor = c._getRed();
text(myColor, 10, 10, 80, 80);

noFill();
colorMode(RGB, 255, 255, 255, 1);
background(255);

strokeWeight(4);
stroke(255, 0, 10, 0.3);
ellipse(40, 40, 50, 50);
ellipse(50, 50, 40, 40);
- - - -
- - - - -
- -

- - inner colorMode(mode, max1, max2, max3, maxAopt) - - -
- jsboot/p5color.js, - line 1894 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - -
max1 - - -Number - - - - - - - - - - range for the red or hue depending on the current color mode
max2 - - -Number - - - - - - - - - - range for the green or saturation depending on the current color mode
max3 - - -Number - - - - - - - - - - range for the blue or brightness/lightness depending on the current color mode
maxA - - -Number - - - - - - <optional>
- - - - - - 		range for the alpha
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner concat(a, b) → {Array} - - -
- jsboot/p5util.js, - line 120 -
- -

- - - -
-
- - -
- Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Array - - - - first Array to concatenate
b - - -Array - - - - second Array to concatenate
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- concatenated array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}
- - - -
- - - - -
- -

- - inner constrain(n, low, high) → {Number} - - -
- jsboot/p5math.js, - line 111 -
- -

- - - -
-
- - -
- Constrains a value between a minimum and maximum value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to constrain
low - - -Number - - - - minimum limit
high - - -Number - - - - maximum limit
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- constrained number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}
- - - -
- - - - -
- -

- - inner cos(angle) → {Number} - - -
- jsboot/p5math.js, - line 1319 -
- -

- - - -
-
- - -
- Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the cosine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner createNumberDict(key, value) → {NumberDict} - - -
- jsboot/p5util.js, - line 1191 -
- -

- - - -
-
- - -
- Creates a new instance of NumberDict using the key-value pair or object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number - - - -
value - - -Number - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -NumberDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}
- - - -
- - - - -
- -

- - inner createStringDict(key, value) → {StringDict} - - -
- jsboot/p5util.js, - line 1168 -
- -

- - - -
-
- - -
- Creates a new instance of p5.StringDict using the key-value pair or the object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
value - - -String - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StringDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}
- - - -
- - - - -
- -

- - inner createVector(xopt, yopt, zopt) → {p5.Vector} - - -
- jsboot/p5math.js, - line 26 -
- -

- - - -
-
- - -
- Creates a new PVector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -p5.Vector - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}
- - - -
- - - - -
- -

- - inner day() → {Integer} - - -
- jsboot/p5util.js, - line 1068 -
- -

- - - -
-
- - -
- The day() function returns the current day as a value from 1 - 31. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current day - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var d = day();
text('Current day: \n' + d, 5, 50);
- - - -
- - - - -
- -

- - inner degrees(radians) → {Number} - - -
- jsboot/p5math.js, - line 1380 -
- -

- - - -
-
- - -
- Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
radians - - -Number - - - - the radians value to convert to degrees
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees
- - - -
- - - - -
- -

- - inner displayDensity() → {Number} - - -
- jsboot/p5.js, - line 385 -
- -

- - - -
-
- - -
- Returns the pixel density of the current display the sketch is running on (always 1 for DOjS). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current pixel density of the display - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner dist(x1, y1, x2, y2) → {Number} - - -
- jsboot/p5math.js, - line 149 -
- -

- - - -
-
- - -
- Calculates the distance between two points. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- distance between the two points - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}
- - - -
- - - - -
- -

- - inner ellipse(x, y, w, hopt) - - -
- jsboot/p5shape.js, - line 77 -
- -

- - - -
-
- - -
- Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The origin may be changed with the ellipseMode() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the ellipse.
y - - -Number - - - - - - - - - - y-coordinate of the ellipse.
w - - -Number - - - - - - - - - - width of the ellipse.
h - - -Number - - - - - - <optional>
- - - - - - 		height of the ellipse.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(56, 46, 55, 55);
- - - -
- - - - -
- -

- - inner ellipseMode(mode) - - -
- jsboot/p5shape.js, - line 623 -
- -

- - - -
-
- - -
- Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are interpreted.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CENTER, RADIUS, CORNER, or CORNERS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipseMode(RADIUS); // Set ellipseMode to RADIUS
fill(255); // Set fill to white
ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER
fill(100); // Set fill to gray
ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode

ellipseMode(CORNER); // Set ellipseMode is CORNER
fill(255); // Set fill to white
ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode

ellipseMode(CORNERS); // Set ellipseMode to CORNERS
fill(100); // Set fill to gray
ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- - - -
- - - - -
- -

- - inner endShape(modeopt) - - -
- jsboot/p5shape.js, - line 482 -
- -

- - - -
-
- - -
- The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - <optional>
- - - - - - 		use CLOSE to close the shape
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noFill();

beginShape();
vertex(20, 20);
vertex(45, 20);
vertex(45, 80);
endShape(CLOSE);

beginShape();
vertex(50, 20);
vertex(75, 20);
vertex(75, 80);
endShape();

TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
- - - -
- - - - -
- -

- - inner exp(n) → {Number} - - -
- jsboot/p5math.js, - line 202 -
- -

- - - -
-
- - -
- Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - exponent to raise
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- e^n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}
- - - -
- - - - -
- -

- - inner fill(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2007 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(value) - - -
- jsboot/p5color.js, - line 2002 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(values) - - -
- jsboot/p5color.js, - line 2013 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(color) - - -
- jsboot/p5color.js, - line 2019 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the fill color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 1934 -
- -

- - - -
-
- - -
- Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the fill color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
fill(51);
rect(20, 20, 60, 60);

// R, G & B integer values
fill(255, 204, 0);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
fill(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
fill('red');
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
fill('#fae');
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
fill('#222222');
rect(20, 20, 60, 60);

// integer RGB notation
fill('rgb(0,255,0)');
rect(20, 20, 60, 60);

// integer RGBA notation
fill('rgba(0,255,0, 0.25)');
rect(20, 20, 60, 60);

// percentage RGB notation
fill('rgb(100%,0%,10%)');
rect(20, 20, 60, 60);

// percentage RGBA notation
fill('rgba(100%,0%,100%,0.5)');
rect(20, 20, 60, 60);

// p5 Color object
fill(color(0, 0, 255));
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner float(str) → {Number} - - -
- jsboot/p5util.js, - line 341 -
- -

- - - -
-
- - -
- Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN. When an array of values is passed in, then an array of floats of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - float string to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- floating point representation of string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);
- - - -
- - - - -
- -

- - inner floor(n) → {Integer} - - -
- jsboot/p5math.js, - line 246 -
- -

- - - -
-
- - -
- Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round down
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded down number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner frameRate(fps) - - -
- jsboot/p5env.js, - line 111 -
- -

- - - -
-
- - -
- Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations This is the same as setFrameRate(val).

Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().

Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fps - - -Number - - - - number of frames to be displayed every second
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rectX = 0;
let fr = 30; //starting FPS
let clr;

function setup() {
  background(200);
  frameRate(fr); // Attempt to refresh at starting FPS
  clr = color(255, 0, 0);
}

function draw() {
  background(200);
  rectX = rectX += 1; // Move Rectangle

  if (rectX >= width) {
    // If you go off screen.
    if (fr === 30) {
      clr = color(0, 0, 255);
      fr = 10;
      frameRate(fr); // make frameRate 10 FPS
    } else {
      clr = color(255, 0, 0);
      fr = 30;
      frameRate(fr); // make frameRate 30 FPS
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}
- - - -
- - - - -
- -

- - inner fullscreen(valopt) → {Boolean} - - -
- jsboot/p5env.js, - line 240 -
- -

- - - -
-
- - -
- If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
val - - -Boolean - - - - - - <optional>
- - - - - - 		whether the sketch should be in fullscreen mode or not
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- current fullscreen state - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clicking in the box toggles fullscreen on and off.
function setup() {
  background(200);
}
function mousePressed() {
  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}
- - - -
- - - - -
- -

- - inner getFrameRate() → {Number} - - -
- jsboot/p5env.js, - line 168 -
- -

- - - -
-
- - -
- Returns the current framerate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current frameRate - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner getURL() → {String} - - -
- jsboot/p5env.js, - line 294 -
- -

- - - -
-
- - -
- Gets the current URL. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- url - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let url;
let x = 100;

function setup() {
  fill(0);
  noStroke();
  url = getURL();
}

function draw() {
  background(200);
  text(url, x, height / 2);
  x--;
}
- - - -
- - - - -
- -

- - inner getURLParams() → {Object} - - -
- jsboot/p5env.js, - line 334 -
- -

- - - -
-
- - -
- Gets the current URL params as an Object. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- URL params - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Example: http://p5js.org?year=2014&month=May&day=15

function setup() {
  let params = getURLParams();
  text(params.day, 10, 20);
  text(params.month, 10, 40);
  text(params.year, 10, 60);
}
- - - -
- - - - -
- -

- - inner getURLPath() → {Array.<String>} - - -
- jsboot/p5env.js, - line 318 -
- -

- - - -
-
- - -
- Gets the current URL path as an array. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- path components - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let urlPath = getURLPath();
  for (let i = 0; i < urlPath.length; i++) {
    text(urlPath[i], 10, i * 20 + 20);
  }
}
- - - -
- - - - -
- -

- - inner green(color) → {Number} - - -
- jsboot/p5color.js, - line 1487 -
- -

- - - -
-
- - -
- Extracts the green value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the green value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(20, 75, 200); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let greenValue = green(c); // Get green in 'c'
print(greenValue); // Print "75.0"
fill(0, greenValue, 0); // Use 'greenValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner hex(n, digitsopt) → {String} - - -
- jsboot/p5util.js, - line 530 -
- -

- - - -
-
- - -
- Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Number - - - - - - - - - - value to parse
digits - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- hexadecimal string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- - - -
- - - - -
- -

- - inner hour() → {Integer} - - -
- jsboot/p5util.js, - line 1082 -
- -

- - - -
-
- - -
- The hour() function returns the current hour as a value from 0 - 23. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current hour - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var h = hour();
text('Current hour:\n' + h, 5, 50);
- - - -
- - - - -
- -

- - inner hue(color) → {Number} - - -
- jsboot/p5color.js, - line 1509 -
- -

- - - -
-
- - -
- Extracts the hue value from a color or pixel array. Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the hue - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = hue(c); // Sets 'value' to "0"
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner image(img, x, y) - - -
- jsboot/p5shape.js, - line 709 -
- -

- - - -
-
- - -
- Draw an image to the p5.js canvas. This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image. This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
img - - -Bitmap - - - - the image to display
x - - -Number - - - - the x-coordinate of the top-left corner of the image
y - - -Number - - - - the y-coordinate of the top-left corner of the image
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner imageMode(mode) - - -
- jsboot/p5shape.js, - line 759 -
- -

- - - -
-
- - -
- Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.

imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.

imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, or CENTER
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNER);
  image(img, 10, 10, 50, 50);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNERS);
  image(img, 10, 10, 90, 40);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CENTER);
  image(img, 50, 50, 80, 80);
}
- - - -
- - - - -
- -

- - inner int(n, radixopt) → {Number} - - -
- jsboot/p5util.js, - line 365 -
- -

- - - -
-
- - -
- Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -String -| - -Boolean -| - -Number - - - - - - - - - - value to parse
radix - - -Integer - - - - - - <optional>
- - - - - - 		the radix to convert to (default: 10)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
- - - -
- - - - -
- -

- - inner join(list, separator) → {String} - - -
- jsboot/p5util.js, - line 595 -
- -

- - - -
-
- - -
- Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - array of Strings to be joined
separator - - -String - - - - String to be placed between each item
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- joined String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);
- - - -
- - - - -
- -

- - inner keyPressed() - - -
- jsboot/p5input.js, - line 534 -
- -

- - - -
-
- - -
- The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    value = 255;
  } else if (keyCode === RIGHT_ARROW) {
    value = 0;
  }
}
- - - -
- - - - -
- -

- - inner keyReleased() - - -
- jsboot/p5input.js, - line 568 -
- -

- - - -
-
- - -
- The keyReleased() function is called once every time a key is released. See key and keyCode for more information.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
  return false; // prevent any default behavior
}
- - - -
- - - - -
- -

- - inner keyTyped() - - -
- jsboot/p5input.js, - line 592 -
- -

- - - -
-
- - -
- The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. The most recent key pressed will be stored in the key variable.

Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyTyped() {
  if (key === 'a') {
    value = 255;
  } else if (key === 'b') {
    value = 0;
  }
  // uncomment to prevent any default behavior
  // return false;
}
- - - -
- - - - -
- -

- - inner lerp(start, stop, amt) → {Number} - - -
- jsboot/p5math.js, - line 279 -
- -

- - - -
-
- - -
- Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
start - - -Number - - - - first value
stop - - -Number - - - - second value
amt - - -Number - - - - number
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- lerped value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}
- - - -
- - - - -
- -

- - inner lerpColor(c1, c2, amt) → {Color} - - -
- jsboot/p5color.js, - line 1536 -
- -

- - - -
-
- - -
- Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.

The way that colours are interpolated depends on the current color mode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c1 - - -Color - - - - interpolate from this color
c2 - - -Color - - - - interpolate to this color
amt - - -Number - - - - number between 0 and 1
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- interpolated color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
colorMode(RGB);
stroke(255);
background(51);
let from = color(218, 165, 32);
let to = color(72, 61, 139);
colorMode(RGB); // Try changing to HSB.
let interA = lerpColor(from, to, 0.33);
let interB = lerpColor(from, to, 0.66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
- - - -
- - - - -
- -

- - inner lightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1623 -
- -

- - - -
-
- - -
- Extracts the HSL lightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the lightness - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSL);
let c = color(156, 100, 50, 1);
fill(c);
rect(15, 20, 35, 60);
let value = lightness(c); // Sets 'value' to 50
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner line(x1, y1, x2, y2) - - -
- jsboot/p5shape.js, - line 152 -
- -

- - - -
-
- - -
- Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
line(30, 20, 85, 75);

line(30, 20, 85, 20);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
line(85, 75, 30, 75);
- - - -
- - - - -
- -

- - inner loadBytes(file) → {Array.<number>} - - -
- jsboot/p5.js, - line 543 -
- -

- - - -
-
- - -
- This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
file - - -string - - - - name of the file or URL to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<number> - - - - - -- an object whose 'bytes' property will be the loaded buffer - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let data;

function preload() {
  data = loadBytes('assets/mammals.xml');
}

function setup() {
  for (let i = 0; i < 5; i++) {
    console.log(data.bytes[i].toString(16));
  }
}
- - - -
- - - - -
- -

- - inner loadFont(path) → {Font} - - -
- jsboot/p5typo.js, - line 26 -
- -

- - - -
-
- - -
- Loads a GRX font file (.FNT) from a file Font Object.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Font - - - - - -- Font object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner loadImage(path) → {Bitmap} - - -
- jsboot/p5shape.js, - line 681 -
- -

- - - -
-
- - -
- Loads an image from a path and creates a Image from it.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - Path of the image to be loaded
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Bitmap - - - - - -- the Image object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner loadStrings(filename) → {Array.<String>} - - -
- jsboot/p5.js, - line 486 -
- -

- - - -
-
- - -
- Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.

Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.

This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let result;
function preload() {
  result = loadStrings('assets/test.txt');
}
function setup() {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}

function setup() {
  loadStrings('assets/test.txt', pickString);
}

function pickString(result) {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}
- - - -
- - - - -
- -

- - inner log(n) → {Number} - - -
- jsboot/p5math.js, - line 320 -
- -

- - - -
-
- - -
- Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number greater than 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- natural logarithm of n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}
- - - -
- - - - -
- -

- - inner loop() - - -
- jsboot/p5.js, - line 235 -
- -

- - - -
-
- - -
- By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop(). Avoid calling loop() from inside setup(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}
- - - -
- - - - -
- -

- - inner mag(a, b) → {Number} - - -
- jsboot/p5math.js, - line 370 -
- -

- - - -
-
- - -
- Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - first value
b - - -Number - - - - second value
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- magnitude of vector from (0,0) to (a,b) - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}
- - - -
- - - - -
- -

- - inner map(value, start1, stop1, start2, stop2, withinBoundsopt) → {Number} - - -
- jsboot/p5math.js, - line 402 -
- -

- - - -
-
- - -
- Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -Number - - - - - - - - - - the incoming value to be converted
start1 - - -Number - - - - - - - - - - lower bound of the value's current range
stop1 - - -Number - - - - - - - - - - upper bound of the value's current range
start2 - - -Number - - - - - - - - - - lower bound of the value's target range
stop2 - - -Number - - - - - - - - - - upper bound of the value's target range
withinBounds - - -Boolean - - - - - - <optional>
- - - - - - 		constrain the value to the newly mapped range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- remapped number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}
- - - -
- - - - -
- -

- - inner match(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 616 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);
- - - -
- - - - -
- -

- - inner matchAll(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 649 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- 2d Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);
- - - -
- - - - -
- -

- - inner max(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 448 -
- -

- - - -
-
- - -
- Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- maximum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner millis() → {Number} - - -
- jsboot/p5util.js, - line 1110 -
- -

- - - -
-
- - -
- Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the number of milliseconds since starting the program - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
- - - -
- - - - -
- -

- - inner min(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 486 -
- -

- - - -
-
- - -
- Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- minimum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner minute() → {Integer} - - -
- jsboot/p5util.js, - line 1096 -
- -

- - - -
-
- - -
- The minute() function returns the current minute as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current minute - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = minute();
text('Current minute: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner month() → {Integer} - - -
- jsboot/p5util.js, - line 1125 -
- -

- - - -
-
- - -
- The month() function returns the current month as a value from 1 - 12. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current month - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = month();
text('Current month: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner mouseClicked(eventopt) - - -
- jsboot/p5input.js, - line 422 -
- -

- - - -
-
- - -
- The mouseClicked() function is called once after a mouse button has been pressed and then released.

Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function mouseClicked() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseClicked() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseClicked(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseMoved(eventopt) - - -
- jsboot/p5input.js, - line 303 -
- -

- - - -
-
- - -
- The >mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move the mouse across the page
// to change its value

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function mouseMoved() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseMoved(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mousePressed(eventopt) - - -
- jsboot/p5input.js, - line 341 -
- -

- - - -
-
- - -
- The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mousePressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mousePressed(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseReleased(eventopt) - - -
- jsboot/p5input.js, - line 381 -
- -

- - - -
-
- - -
- The mouseReleased() function is called every time a mouse button is released.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseReleased() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseReleased(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner nf(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 692 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
left - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfc(num, rightopt) → {String} - - -
- jsboot/p5util.js, - line 789 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfp(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 853 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfs(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 901 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. The values for the digits, left, and right parameters should always be positive integers. (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner noCursor() - - -
- jsboot/p5.js, - line 408 -
- -

- - - -
-
- - -
- Hides the cursor from view. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}
- - - -
- - - - -
- -

- - inner noFill() - - -
- jsboot/p5color.js, - line 2031 -
- -

- - - -
-
- - -
- Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(15, 10, 55, 55);
noFill();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noFill();
  stroke(100, 100, 240);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner noise(x, yopt, zopt) → {Number} - - -
- jsboot/p5math.js, - line 969 -
- -

- - - -
-
- - -
- Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate in noise space
y - - -Number - - - - - - <optional>
- - - - - - 		y-coordinate in noise space
z - - -Number - - - - - - <optional>
- - - - - - 		z-coordinate in noise space
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- Perlin noise value (between 0 and 1) at specified coordinates - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}
- - - -
- - - - -
- -

- - inner noiseDetail(lod, falloff) - - -
- jsboot/p5math.js, - line 1113 -
- -

- - - -
-
- - -
- Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence.

By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise().

By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
lod - - -Number - - - - number of octaves to be used by the noise
falloff - - -Number - - - - falloff factor for each octave
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}
- - - -
- - - - -
- -

- - inner noLoop() - - -
- jsboot/p5.js, - line 271 -
- -

- - - -
-
- - -
- Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.

When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.

Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}
- - - -
- - - - -
- -

- - inner norm(value, start, stop) → {Number} - - -
- jsboot/p5math.js, - line 524 -
- -

- - - -
-
- - -
- Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - incoming value to be normalized
start - - -Number - - - - lower bound of the value's current range
stop - - -Number - - - - upper bound of the value's current range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- normalized number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}
- - - -
- - - - -
- -

- - inner noStroke() - - -
- jsboot/p5color.js, - line 2058 -
- -

- - - -
-
- - -
- Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noStroke();
  fill(240, 150, 150);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner pixelDensity(val) - - -
- jsboot/p5env.js, - line 267 -
- -

- - - -
-
- - -
- Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
val - - -Number - - - - whether or how much the sketch should scale
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  pixelDensity(1);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

function setup() {
  pixelDensity(3.0);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner point(x, y, zopt) - - -
- jsboot/p5shape.js, - line 189 -
- -

- - - -
-
- - -
- Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x-coordinate
y - - -Number - - - - - - - - - - the y-coordinate
z - - -Number - - - - - - <optional>
- - - - - - 		the z-coordinate (for WebGL mode)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
point(30, 20);
point(85, 20);
point(85, 75);
point(30, 75);
- - - -
- - - - -
- -

- - inner pop() - - -
- jsboot/p5.js, - line 631 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
translate(50, 0);
strokeWeight(10);
fill(204, 153, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner pow(n, e) → {Number} - - -
- jsboot/p5math.js, - line 570 -
- -

- - - -
-
- - -
- Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to Math.pow(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - base of the exponential expression
e - - -Number - - - - power by which to raise the base
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- n^e - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 45 -
- -

- - - -
-
- - -
- The println() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 26 -
- -

- - - -
-
- - -
- The print() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner push() - - -
- jsboot/p5.js, - line 580 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
translate(50, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner quad(x1, y1, x2, y2, x3, y3, x4, y4) - - -
- jsboot/p5shape.js, - line 211 -
- -

- - - -
-
- - -
- Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
x3 - - -Number - - - - the x-coordinate of the third point
y3 - - -Number - - - - the y-coordinate of the third point
x4 - - -Number - - - - the x-coordinate of the fourth point
y4 - - -Number - - - - the y-coordinate of the fourth point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
quad(38, 31, 86, 20, 69, 63, 30, 76);
- - - -
- - - - -
- -

- - inner radians(degrees) → {Number} - - -
- jsboot/p5math.js, - line 1402 -
- -

- - - -
-
- - -
- Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
degrees - - -Number - - - - the degree value to convert to radians
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians
- - - -
- - - - -
- -

- - inner random(minopt, maxopt) → {Number} - - -
- jsboot/p5math.js, - line 817 -
- -

- - - -
-
- - -
- Return a random floating-point number. Takes either 0, 1 or 2 arguments. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If one argument is given and it is an array, returns a random element from that array. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
min - - -Number - - - - - - <optional>
- - - - - - 		the lower bound (inclusive)
max - - -Number - - - - - - <optional>
- - - - - - 		the upper bound (exclusive)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word
- - - -
- - - - -
- -

- - inner randomGaussian(mean, sd) → {Number} - - -
- jsboot/p5math.js, - line 882 -
- -

- - - -
-
- - -
- Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned.

Takes either 0, 1 or 2 arguments.
If no args, returns a mean of 0 and standard deviation of 1.
If one arg, that arg is the mean (standard deviation is 1).
If two args, first is mean, second is standard deviation. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mean - - -Number - - - - the mean
sd - - -Number - - - - the standard deviation
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}
- - - -
- - - - -
- -

- - inner randomSeed(seed) - - -
- jsboot/p5math.js, - line 794 -
- -

- - - -
-
- - -
- Sets the seed value for random(). By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
seed - - -Number - - - - the seed value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}
- - - -
- - - - -
- -

- - inner rect(x, y, w, h) - - -
- jsboot/p5shape.js, - line 240 -
- -

- - - -
-
- - -
- Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the rectangle.
y - - -Number - - - - y-coordinate of the rectangle.
w - - -Number - - - - width of the rectangle.
h - - -Number - - - - height of the rectangle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a rectangle at location (30, 20) with a width and height of 55.
rect(30, 20, 55, 55);
- - - -
- - - - -
- -

- - inner rectMode(mode) - - -
- jsboot/p5shape.js, - line 568 -
- -

- - - -
-
- - -
- Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, CENTER, or RADIUS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rectMode(CORNER); // Default rectMode is CORNER
fill(255); // Set fill to white
rect(25, 25, 50, 50); // Draw white rect using CORNER mode

rectMode(CORNERS); // Set rectMode to CORNERS
fill(100); // Set fill to gray
rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode

rectMode(RADIUS); // Set rectMode to RADIUS
fill(255); // Set fill to white
rect(50, 50, 30, 30); // Draw white rect using RADIUS mode

rectMode(CENTER); // Set rectMode to CENTER
fill(100); // Set fill to gray
rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- - - -
- - - - -
- -

- - inner red(color) → {Number} - - -
- jsboot/p5color.js, - line 1644 -
- -

- - - -
-
- - -
- Extracts the red value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the red value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let redValue = red(c); // Get red in 'c'
print(redValue); // Print "255.0"
fill(redValue, 0, 0); // Use 'redValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle

colorMode(RGB, 255);
let c = color(127, 255, 0);
colorMode(RGB, 1);
let myColor = red(c);
print(myColor);
- - - -
- - - - -
- -

- - inner redraw(nopt) - - -
- jsboot/p5.js, - line 325 -
- -

- - - -
-
- - -
- Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.

In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).

The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop().

In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Integer - - - - - - <optional>
- - - - - - 		Redraw for n-times. The default value is 1.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}
- - - -
- - - - -
- -

- - inner resetMatrix() - - -
- jsboot/p5trans.js, - line 192 -
- -

- - - -
-
- - -
- Replaces the current matrix with the identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(50, 50);
applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
rect(0, 0, 20, 20);
// Note that the translate is also reset.
resetMatrix();
rect(0, 0, 20, 20);
- - - -
- - - - -
- -

- - inner reverse(list) → {Array} - - -
- jsboot/p5util.js, - line 148 -
- -

- - - -
-
- - -
- Reverses the order of an array, maps to Array.reverse() -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to reverse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the reversed list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}
- - - -
- - - - -
- -

- - inner rotate(angle) - - -
- jsboot/p5trans.js, - line 208 -
- -

- - - -
-
- - -
- Rotates a shape the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.

Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again.

Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle of rotation, specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 52, 52);
- - - -
- - - - -
- -

- - inner round(n) → {Integer} - - -
- jsboot/p5math.js, - line 598 -
- -

- - - -
-
- - -
- Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner saturation(color) → {Number} - - -
- jsboot/p5color.js, - line 1671 -
- -

- - - -
-
- - -
- Extracts the saturation value from a color or pixel array. Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the saturation value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = saturation(c); // Sets 'value' to 126
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner saveStrings(list, filename, extensionopt) - - -
- jsboot/p5.js, - line 436 -
- -

- - - -
-
- - -
- Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array.<String> - - - - - - - - - - string array to be written
filename - - -String - - - - - - - - - - filename for output
extension - - -String - - - - - - <optional>
- - - - - - 		the filename's extension
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let words = 'apple bear cat dog';

// .split() outputs an Array
let list = split(words, ' ');

function setup() {
  createCanvas(100, 100);
  background(200);
  text('click here to save', 10, 10, 70, 80);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    saveStrings(list, 'nouns.txt');
  }
}

// Saves the following to a file called 'nouns.txt':
//
// apple
// bear
// cat
// dog
- - - -
- - - - -
- -

- - inner scale(s, yopt) - - -
- jsboot/p5trans.js, - line 366 -
- -

- - - -
-
- - -
- Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.

Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.

Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
s - - -Number -| - -p5.Vector -| - -Array.<Number> - - - - - - - - - - percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given
y - - -Number - - - - - - <optional>
- - - - - - 		percent to scale the object in the y-axis
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

rect(30, 20, 50, 50);
scale(0.5, 1.3);
rect(30, 20, 50, 50);
- - - -
- - - - -
- -

- - inner scale(scales) - - -
- jsboot/p5trans.js, - line 396 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
scales - - -p5.Vector -| - -Array.<Number> - - - - per-axis percents to scale the object
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner second() → {Integer} - - -
- jsboot/p5util.js, - line 1138 -
- -

- - - -
-
- - -
- The second() function returns the current second as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current second - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var s = second();
text('Current second: \n' + s, 5, 50);
- - - -
- - - - -
- -

- - inner setAlpha(alpha) - - -
- jsboot/p5color.js, - line 595 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
alpha - - -Number - - - - the new alpha value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let squareColor;

function setup() {
  ellipseMode(CORNERS);
  strokeWeight(4);
  squareColor = color(100, 50, 150);
}

function draw() {
  background(255);

  noFill();
  stroke(0);
  ellipse(10, 10, width - 10, height - 10);

  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  fill(squareColor);
  noStroke();
  rect(13, 13, width - 26, height - 26);
}
- - - -
- - - - -
- -

- - inner setBlue(blue) - - -
- jsboot/p5color.js, - line 575 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
blue - - -Number - - - - the new blue value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setGreen(green) - - -
- jsboot/p5color.js, - line 555 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
green - - -Number - - - - the new green value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setRed(red) - - -
- jsboot/p5color.js, - line 535 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
red - - -Number - - - - the new red value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner shearX(angle) - - -
- jsboot/p5trans.js, - line 245 -
- -

- - - -
-
- - -
- Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shearY(angle) - - -
- jsboot/p5trans.js, - line 279 -
- -

- - - -
-
- - -
- Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shorten(list) → {Array} - - -
- jsboot/p5util.js, - line 167 -
- -

- - - -
-
- - -
- Decreases an array by one element and returns the shortened array, maps to Array.pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to shorten
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shortened Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}
- - - -
- - - - -
- -

- - inner shuffle(array, boolopt) → {Array} - - -
- jsboot/p5util.js, - line 188 -
- -

- - - -
-
- - -
- Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
array - - -Array - - - - - - - - - - Array to shuffle
bool - - -Boolean - - - - - - <optional>
- - - - - - 		modify passed array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shuffled Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}
- - - -
- - - - -
- -

- - inner sin(angle) → {Number} - - -
- jsboot/p5math.js, - line 1339 -
- -

- - - -
-
- - -
- Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the sine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner sort(list, countopt) → {Array} - - -
- jsboot/p5util.js, - line 228 -
- -

- - - -
-
- - -
- Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to sort
count - - -Integer - - - - - - <optional>
- - - - - - 		number of elements to sort, starting from 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the sorted list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}
- - - -
- - - - -
- -

- - inner splice(list, value, position) → {Array} - - -
- jsboot/p5util.js, - line 272 -
- -

- - - -
-
- - -
- Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to splice into
value - - -any - - - - value to be spliced in
position - - -Integer - - - - in the array from which to insert data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}
- - - -
- - - - -
- -

- - inner split(value, delim) → {Array.<String>} - - -
- jsboot/p5util.js, - line 965 -
- -

- - - -
-
- - -
- The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - the String to be split
delim - - -String - - - - the String used to separate the data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
- - - -
- - - - -
- -

- - inner splitTokens(value, delimopt) → {Array.<String>} - - -
- jsboot/p5util.js, - line 991 -
- -

- - - -
-
- - -
- The splitTokens() function splits a String at one or many character delimiters or "tokens." The delim parameter specifies the character or characters to be used as a boundary.

If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -String - - - - - - - - - - the String to be split
delim - - -String - - - - - - <optional>
- - - - - - 		list of individual Strings that will be used as separators
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
- - - -
- - - - -
- -

- - inner sq(n) → {Number} - - -
- jsboot/p5math.js, - line 631 -
- -

- - - -
-
- - -
- Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to square
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- squared number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner sqrt(n) → {Number} - - -
- jsboot/p5math.js, - line 672 -
- -

- - - -
-
- - -
- Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - non-negative number to square root
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- square root of number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner square(x, y, s) - - -
- jsboot/p5shape.js, - line 331 -
- -

- - - -
-
- - -
- Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the square.
y - - -Number - - - - y-coordinate of the square.
s - - -Number - - - - side size of the square.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
- - - -
- - - - -
- -

- - inner str(n) → {String} - - -
- jsboot/p5util.js, - line 398 -
- -

- - - -
-
- - -
- Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
- - - -
- - - - -
- -

- - inner stroke(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2170 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(value) - - -
- jsboot/p5color.js, - line 2165 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(color) - - -
- jsboot/p5color.js, - line 2182 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the stroke color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 2084 -
- -

- - - -
-
- - -
- Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the stroke color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
strokeWeight(4);
stroke(51);
rect(20, 20, 60, 60);

// R, G & B integer values
stroke(255, 204, 0);
strokeWeight(4);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
strokeWeight(4);
stroke(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
stroke('red');
strokeWeight(4);
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
stroke('#fae');
strokeWeight(4);
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
stroke('#222222');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGB notation
stroke('rgb(0,255,0)');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGBA notation
stroke('rgba(0,255,0,0.25)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGB notation
stroke('rgb(100%,0%,10%)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGBA notation
stroke('rgba(100%,0%,100%,0.5)');
strokeWeight(4);
rect(20, 20, 60, 60);

// p5 Color object
stroke(color(0, 0, 255));
strokeWeight(4);
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner stroke(values) - - -
- jsboot/p5color.js, - line 2176 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner strokeWeight(weight) - - -
- jsboot/p5shape.js, - line 810 -
- -

- - - -
-
- - -
- Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
weight - - -Number - - - - the weight (in pixels) of the stroke
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(1); // Default
line(20, 20, 80, 20);
strokeWeight(4); // Thicker
line(20, 40, 80, 40);
strokeWeight(10); // Beastly
line(20, 70, 80, 70);
- - - -
- - - - -
- -

- - inner subset(list, start, countopt) → {Array} - - -
- jsboot/p5util.js, - line 304 -
- -

- - - -
-
- - -
- Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to extract from
start - - -Integer - - - - - - - - - - position to begin
count - - -Integer - - - - - - <optional>
- - - - - - 		number of values to extract
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- Array of extracted elements - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}
- - - -
- - - - -
- -

- - inner tan(angle) → {Number} - - -
- jsboot/p5math.js, - line 1359 -
- -

- - - -
-
- - -
- Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the tangent of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner text(str, x, y) - - -
- jsboot/p5typo.js, - line 39 -
- -

- - - -
-
- - -
- Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.

The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.

The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String -| - -Object -| - -Array -| - -Number -| - -Boolean - - - - the alphanumeric symbols to be displayed
x - - -Number - - - - x-coordinate of text
y - - -Number - - - - y-coordinate of text
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}
- - - -
- - - - -
- -

- - inner textAlign(horizAlign, vertAlignopt) - - -
- jsboot/p5typo.js, - line 148 -
- -

- - - -
-
- - -
- Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
horizAlign - - -Constant - - - - - - - - - - horizontal alignment, either LEFT, CENTER, or RIGHT
vertAlign - - -Constant - - - - - - <optional>
- - - - - - 		vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);
- - - -
- - - - -
- -

- - inner textFont() → {Object} - - -
- jsboot/p5typo.js, - line 114 -
- -

- - - -
-
- - -
- Sets the current font that will be drawn with the text() function.

-
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- the current font - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}
- - - -
- - - - -
- -

- - inner textSize() → {Number} - - -
- jsboot/p5typo.js, - line 230 -
- -

- - - -
-
- - -
- Gets the current font size. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner textWidth(theText) → {Number} - - -
- jsboot/p5typo.js, - line 203 -
- -

- - - -
-
- - -
- Calculates and returns the width of any character or text string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
theText - - -String - - - - the String of characters to measure
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);
- - - -
- - - - -
- -

- - inner toString(formatopt) → {String} - - -
- jsboot/p5color.js, - line 341 -
- -

- - - -
-
- - -
- This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
format - - -String - - - - - - <optional>
- - - - - - 		How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- the formatted string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let myColor;
function setup() {
  createCanvas(200, 200);
  stroke(255);
  myColor = color(100, 100, 250);
  fill(myColor);
}

function draw() {
  rotate(HALF_PI);
  text(myColor.toString(), 0, -5);
  text(myColor.toString('#rrggbb'), 0, -30);
  text(myColor.toString('rgba%'), 0, -55);
}
- - - -
- - - - -
- -

- - inner translate(vector) - - -
- jsboot/p5trans.js, - line 347 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
vector - - -p5.Vector - - - - the vector to translate by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner translate(x, y, zopt) - - -
- jsboot/p5trans.js, - line 313 -
- -

- - - -
-
- - -
- Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.

Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - left/right translation
y - - -Number - - - - - - - - - - up/down translation
z - - -Number - - - - - - <optional>
- - - - - - 		forward/backward translation (webgl only)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(30, 20);
rect(0, 0, 55, 55);

rect(0, 0, 55, 55); // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55); // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55); // Draw rect at new 0,0

function draw() {
  background(200);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  translate(p5.Vector.fromAngle(millis() / 1000, 40));
  rect(0, 0, 20, 20);
}
- - - -
- - - - -
- -

- - inner triangle(x1, y1, x2, y2, x3, y3) - - -
- jsboot/p5shape.js, - line 356 -
- -

- - - -
-
- - -
- A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
x3 - - -Number - - - - x-coordinate of the third point
y3 - - -Number - - - - y-coordinate of the third point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
triangle(30, 75, 58, 20, 86, 75);
- - - -
- - - - -
- -

- - inner trim(str) → {String} - - -
- jsboot/p5util.js, - line 1042 -
- -

- - - -
-
- - -
- Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - a String to be trimmed
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- a trimmed String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);
- - - -
- - - - -
- -

- - inner unchar(n) → {Number} - - -
- jsboot/p5util.js, - line 508 -
- -

- - - -
-
- - -
- Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
- - - -
- - - - -
- -

- - inner unhex(n) → {Number} - - -
- jsboot/p5util.js, - line 569 -
- -

- - - -
-
- - -
- Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of hexadecimal value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
- - - -
- - - - -
- -

- - inner vertex(x, y) - - -
- jsboot/p5shape.js, - line 460 -
- -

- - - -
-
- - -
- All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the vertex
y - - -Number - - - - y-coordinate of the vertex
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(3);
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
- - - -
- - - - -
- -

- - inner year() → {Integer} - - -
- jsboot/p5util.js, - line 1151 -
- -

- - - -
-
- - -
- The year() returns the current year as an integer (2014, 2015, 2016, etc). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current year - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var y = year();
text('Current year: \n' + y, 5, 50);
- - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

p5compat

- - - - -
- -
- -
- - - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - -

Classes

- - -
- -
-

- Color -
- module:p5compat~Color -
-

-
- - -
- - - - - - - - - - -

Members

- -
- - -
-

- static ColorConversion - -
- jsboot/p5color.js, - line 41 -
- -

- - -
-
- -
- Conversions adapted from . In these functions, hue is always in the range [0, 1], just like all other components are in the range [0, 1]. 'Brightness' and 'value' are used interchangeably. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly displayHeight - -
- jsboot/p5env.js, - line 202 -
- -

- - -
-
- -
- System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly displayWidth - -
- jsboot/p5env.js, - line 189 -
- -

- - -
-
- -
- System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly focused - -
- jsboot/p5env.js, - line 109 -
- -

- - -
-
- -
- Confirms if the window a p5.js program is in is "focused," meaning that the sketch will accept mouse or keyboard input. This variable is "true" if the window is focused and "false" if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
focused - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// To demonstrate, put two windows side by side.
// Click on the window that the p5 sketch isn't in!
function draw() {
  background(200);
  noStroke();
  fill(0, 200, 0);
  ellipse(25, 25, 50, 50);

  if (!focused) {
    // or "if (focused === false)"
    stroke(200, 0, 0);
    line(0, 0, 100, 100);
    line(100, 0, 0, 100);
  }
}
- - -
- - - - -
-

- static, readonly frameCount - -
- jsboot/p5env.js, - line 83 -
- -

- - -
-
- -
- The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
frameCount - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
- - -
- - - - -
-

- static, readonly height - -
- jsboot/p5env.js, - line 238 -
- -

- - -
-
- -
- System variable that stores the height of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
height - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly key - -
- jsboot/p5input.js, - line 507 -
- -

- - -
-
- -
- The system variable key always contains the value of the most recent key on the keyboard that was typed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Click any key to display it!
// (Not Guaranteed to be Case Sensitive)
function setup() {
  fill(245, 123, 158);
  textSize(50);
}

function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}
- - -
- - - - -
-

- static, readonly keyCode - -
- jsboot/p5input.js, - line 532 -
- -

- - -
-
- -
- The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyCode - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let fillVal = 126;
function draw() {
  fill(fillVal);
  rect(25, 25, 50, 50);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    fillVal = 255;
  } else if (keyCode === DOWN_ARROW) {
    fillVal = 0;
  }
  return false; // prevent default
}
- - -
- - - - -
-

- static, readonly keyIsPressed - -
- jsboot/p5input.js, - line 486 -
- -

- - -
-
- -
- The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
- - -
- - - - -
-

- static, readonly mouseButton - -
- jsboot/p5input.js, - line 278 -
- -

- - -
-
- -
- Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseButton - - -Constant - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      ellipse(50, 50, 50, 50);
    }
    if (mouseButton === RIGHT) {
      rect(25, 25, 50, 50);
    }
    if (mouseButton === CENTER) {
      triangle(23, 75, 50, 20, 78, 75);
    }
  }

  print(mouseButton);
}
- - -
- - - - -
-

- static, readonly mouseIsPressed - -
- jsboot/p5input.js, - line 301 -
- -

- - -
-
- -
- The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }

  print(mouseIsPressed);
}
- - -
- - - - -
-

- static, readonly mouseX - -
- jsboot/p5input.js, - line 53 -
- -

- - -
-
- -
- The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
- - -
- - - - -
-

- static, readonly mouseY - -
- jsboot/p5input.js, - line 71 -
- -

- - -
-
- -
- The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
- - -
- - - - -
-

- static, readonly pmouseX - -
- jsboot/p5input.js, - line 95 -
- -

- - -
-
- -
- The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas to leave a trail
function setup() {
  //slow down the frameRate to make it more visible
  frameRate(10);
}

function draw() {
  background(244, 248, 252);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + ' -> ' + mouseX);
}
- - -
- - - - -
-

- static, readonly pmouseY - -
- jsboot/p5input.js, - line 118 -
- -

- - -
-
- -
- The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);
  //draw a square only if the mouse is not moving
  if (mouseY === pmouseY && mouseX === pmouseX) {
    rect(20, 20, 60, 60);
  }

  print(pmouseY + ' -> ' + mouseY);
}
- - -
- - - - -
-

- static, readonly pwinMouseX - -
- jsboot/p5input.js, - line 213 -
- -

- - -
-
- -
- The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current x position is the horizontal mouse speed
  let speed = abs(winMouseX - pwinMouseX);
  //change the size of the circle
  //according to the horizontal speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly pwinMouseY - -
- jsboot/p5input.js, - line 247 -
- -

- - -
-
- -
- The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current y position is the vertical mouse speed
  let speed = abs(winMouseY - pwinMouseY);
  //change the size of the circle
  //according to the vertical speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly width - -
- jsboot/p5env.js, - line 230 -
- -

- - -
-
- -
- System variable that stores the width of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
width - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly windowHeight - -
- jsboot/p5env.js, - line 222 -
- -

- - -
-
- -
- System variable that stores the height of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly windowWidth - -
- jsboot/p5env.js, - line 212 -
- -

- - -
-
- -
- System variable that stores the width of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly winMouseX - -
- jsboot/p5input.js, - line 149 -
- -

- - -
-
- -
- The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the horizontal mouse position
  //relative to the window
  myCanvas.position(winMouseX + 1, windowHeight / 2);

  //the y of the square is relative to the canvas
  rect(20, mouseY, 60, 60);
}
- - -
- - - - -
-

- static, readonly winMouseY - -
- jsboot/p5input.js, - line 180 -
- -

- - -
-
- -
- The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the vertical mouse position
  //relative to the window
  myCanvas.position(windowWidth / 2, winMouseY + 1);

  //the x of the square is relative to the canvas
  rect(mouseX, 20, 60, 60);
}
- - -
- - - - -
-

- inner colorPatterns - -
- jsboot/p5color.js, - line 888 -
- -

- - -
-
- -
- Full color string patterns. The capture groups are necessary. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner namedColors - -
- jsboot/p5color.js, - line 722 -
- -

- - -
-
- -
- CSS named colors. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner WHITESPACE - -
- jsboot/p5color.js, - line 880 -
- -

- - -
-
- -
- These regular expressions are used to build up the patterns for matching viable CSS color strings: fragmenting the regexes in this way increases the legibility and comprehensibility of the code. Note that RGB values of .9 are not parsed by IE, but are supported here for color string consistency. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - static _cloneEnv() - - -
- jsboot/p5.js, - line 67 -
- -

- - - -
-
- - -
- deep copy the current environment. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _ensureMatrix() - - -
- jsboot/p5trans.js, - line 34 -
- -

- - - -
-
- - -
- make sure we have a 2x2 identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _PolyLine() - - -
- jsboot/p5shape.js, - line 550 -
- -

- - - -
-
- - -
- draw polygon by using lines. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transX(x, y) → {number} - - -
- jsboot/p5trans.js, - line 67 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated x coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transY(x, y) → {number} - - -
- jsboot/p5trans.js, - line 82 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated y coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static createCanvas() - - -
- jsboot/p5.js, - line 201 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static exit() - - -
- jsboot/p5.js, - line 231 -
- -

- - - -
-
- - -
- exit the script after the current Loop(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noSmooth() - - -
- jsboot/p5.js, - line 211 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noTint() - - -
- jsboot/p5.js, - line 226 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static settings() - - -
- jsboot/p5.js, - line 216 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static size() - - -
- jsboot/p5.js, - line 196 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static smooth() - - -
- jsboot/p5.js, - line 206 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static tint() - - -
- jsboot/p5.js, - line 221 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner abs(n) → {Number} - - -
- jsboot/p5math.js, - line 59 -
- -

- - - -
-
- - -
- Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to compute
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- absolute value of given number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
- - - -
- - - - -
- -

- - inner acos(value) → {Number} - - -
- jsboot/p5math.js, - line 1211 -
- -

- - - -
-
- - -
- The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc cosine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc cosine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);
- - - -
- - - - -
- -

- - inner alpha(color) → {Number} - - -
- jsboot/p5color.js, - line 1271 -
- -

- - - -
-
- - -
- Extracts the alpha value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the alpha value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
let c = color(0, 126, 255, 102);
fill(c);
rect(15, 15, 35, 70);
let value = alpha(c); // Sets 'value' to 102
fill(value);
rect(50, 15, 35, 70);
- - - -
- - - - -
- -

- - inner angleMode(mode) - - -
- jsboot/p5math.js, - line 1423 -
- -

- - - -
-
- - -
- Sets the current mode of p5 to given mode. Default mode is RADIANS. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either RADIANS or DEGREES
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}
- - - -
- - - - -
- -

- - inner append(array, value) → {Array} - - -
- jsboot/p5util.js, - line 30 -
- -

- - - -
-
- - -
- Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
array - - -Array - - - - Array to append
value - - -any - - - - to be added to the Array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the array that was appended to - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}
- - - -
- - - - -
- -

- - inner applyMatrix(a, b, c, d, e, f) - - -
- jsboot/p5trans.js, - line 90 -
- -

- - - -
-
- - -
- Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia. The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form: > The transformation matrix used when applyMatrix is called -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
b - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
c - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
d - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
e - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
f - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  // Equivalent to translate(x, y);
  applyMatrix(1, 0, 0, 1, 40 + step, 50);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  translate(50, 50);
  // Equivalent to scale(x, y);
  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, 0, TWO_PI);
  var cos_a = cos(angle);
  var sin_a = sin(angle);
  background(200);
  translate(50, 50);
  // Equivalent to rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, -PI / 4, PI / 4);
  background(200);
  translate(50, 50);
  // equivalent to shearX(angle);
  var shear_factor = 1 / tan(PI / 2 - angle);
  applyMatrix(1, 0, shear_factor, 1, 0, 0);
  rect(0, 0, 50, 50);
}
- - - -
- - - - -
- -

- - inner arc(x, y, w, h, start, stop, modeopt) - - -
- jsboot/p5shape.js, - line 33 -
- -

- - - -
-
- - -
- Draw an arc to the screen. If called with only x, y, w, h, start, and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.

The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the arc's ellipse
y - - -Number - - - - - - - - - - y-coordinate of the arc's ellipse
w - - -Number - - - - - - - - - - width of the arc's ellipse by default
h - - -Number - - - - - - - - - - height of the arc's ellipse by default
start - - -Number - - - - - - - - - - angle to start the arc, specified in radians
stop - - -Number - - - - - - - - - - angle to stop the arc, specified in radians
mode - - -Constant - - - - - - <optional>
- - - - - - 		optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
arc(50, 55, 50, 50, 0, HALF_PI);
noFill();
arc(50, 55, 60, 60, HALF_PI, PI);
arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
- - - -
- - - - -
- -

- - inner arrayCopy(src, srcPosition, dst, dstPosition, length) - - -
- jsboot/p5util.js, - line 52 -
- -

- - - -
-
- - -
- Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().

The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).

Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
src - - -Array - - - - the source Array
srcPosition - - -Integer - - - - starting position in the source Array
dst - - -Array - - - - the destination Array
dstPosition - - -Integer - - - - starting position in the destination Array
length - - -Integer - - - - number of Array elements to be copied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - -
Deprecated:
  • Yes
- - - - - - - - - - - - - - - -
- - - -
Example
- - 
var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]
- - - -
- - - - -
- -

- - inner asin(value) → {Number} - - -
- jsboot/p5math.js, - line 1237 -
- -

- - - -
-
- - -
- The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc sine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc sine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);
- - - -
- - - - -
- -

- - inner atan(value) → {Number} - - -
- jsboot/p5math.js, - line 1264 -
- -

- - - -
-
- - -
- The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc tangent is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);
- - - -
- - - - -
- -

- - inner atan2(y, x) → {Number} - - -
- jsboot/p5math.js, - line 1291 -
- -

- - - -
-
- - -
- Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor.

Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
y - - -Number - - - - y-coordinate of the point
x - - -Number - - - - x-coordinate of the point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given point - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}
- - - -
- - - - -
- -

- - inner background(color) - - -
- jsboot/p5color.js, - line 1702 -
- -

- - - -
-
- - -
- The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A Color object can also be provided to set the background color.

An Image can also be provided to set the background image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - any value created by the color() function
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
background(51);

// R, G & B integer values
background(255, 204, 0);

// H, S & B integer values
colorMode(HSB);
background(255, 204, 100);

// Named SVG/CSS color string
background('red');

// three-digit hexadecimal RGB notation
background('#fae');

// six-digit hexadecimal RGB notation
background('#222222');

// integer RGB notation
background('rgb(0,255,0)');

// integer RGBA notation
background('rgba(0,255,0, 0.25)');

// percentage RGB notation
background('rgb(100%,0%,10%)');

// percentage RGBA notation
background('rgba(100%,0%,100%,0.5)');

// p5 Color object
background(color(0, 0, 255));
- - - -
- - - - -
- -

- - inner background(colorstring, aopt) - - -
- jsboot/p5color.js, - line 1760 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
colorstring - - -String - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex
a - - -Number - - - - - - <optional>
- - - - - - 		opacity of the background relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(gray, aopt) - - -
- jsboot/p5color.js, - line 1769 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - specifies a value between white and black
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(v1, v2, v3, aopt) - - -
- jsboot/p5color.js, - line 1775 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value (depending on the current color mode)
v2 - - -Number - - - - - - - - - - green or saturation value (depending on the current color mode)
v3 - - -Number - - - - - - - - - - blue or brightness value (depending on the current color mode)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(values) - - -
- jsboot/p5color.js, - line 1786 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(bitmap, aopt) - - -
- jsboot/p5color.js, - line 1792 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
bitmap - - -Bitmap - - - - - - - - - - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner beginShape(kindopt) - - -
- jsboot/p5shape.js, - line 379 -
- -

- - - -
-
- - -
- Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.

The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.

Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
kind - - -Constant - - - - - - <optional>
- - - - - - 		either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

beginShape(LINES);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();

beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
- - - -
- - - - -
- -

- - inner blue(color) → {Number} - - -
- jsboot/p5color.js, - line 1291 -
- -

- - - -
-
- - -
- Extracts the blue value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the blue value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(175, 100, 220); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let blueValue = blue(c); // Get blue in 'c'
print(blueValue); // Prints "220.0"
fill(0, 0, blueValue); // Use 'blueValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner boolean(n) → {Boolean} - - -
- jsboot/p5util.js, - line 422 -
- -

- - - -
-
- - -
- Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
- - - -
- - - - -
- -

- - inner brightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1312 -
- -

- - - -
-
- - -
- Extracts the HSB brightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the brightness value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = brightness(c); // Sets 'value' to 255
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner byte(n) → {Number} - - -
- jsboot/p5util.js, - line 452 -
- -

- - - -
-
- - -
- Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- byte representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]
- - - -
- - - - -
- -

- - inner ceil(n) → {Integer} - - -
- jsboot/p5math.js, - line 77 -
- -

- - - -
-
- - -
- Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round up
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded up number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner char(n) → {String} - - -
- jsboot/p5util.js, - line 481 -
- -

- - - -
-
- - -
- Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
- - - -
- - - - -
- -

- - inner circle(x, y, d) - - -
- jsboot/p5shape.js, - line 133 -
- -

- - - -
-
- - -
- Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the centre of the circle.
y - - -Number - - - - y-coordinate of the centre of the circle.
d - - -Number - - - - diameter of the circle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a circle at location (30, 30) with a diameter of 20.
circle(30, 30, 20);
- - - -
- - - - -
- -

- - inner clear() - - -
- jsboot/p5color.js, - line 1813 -
- -

- - - -
-
- - -
- Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
  clear();
}
- - - -
- - - - -
- -

- - inner color(color) → {Color} - - -
- jsboot/p5color.js, - line 1472 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(value) → {Color} - - -
- jsboot/p5color.js, - line 1461 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(v1, v2, v3, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1449 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(values) → {Color} - - -
- jsboot/p5color.js, - line 1466 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(gray, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1333 -
- -

- - - -
-
- - -
- Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.

Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - number specifying value between white and black.
alpha - - -Number - - - - - - <optional>
- - - - - - 		alpha value relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- resulting color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(30, 20, 55, 55); // Draw rectangle

let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
ellipse(25, 25, 80, 80); // Draw left circle

// Using only one value with color()
// generates a grayscale value.
c = color(65); // Update 'c' with grayscale value
fill(c); // Use updated 'c' as fill color
ellipse(75, 75, 80, 80); // Draw right circle

// Named SVG & CSS colors may be used,
let c = color('magenta');
fill(c); // Use 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(20, 20, 60, 60); // Draw rectangle

// as can hex color codes:
noStroke(); // Don't draw a stroke around shapes
let c = color('#0f0');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('#00ff00');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// RGB and RGBA color strings are also supported:
// these all set to the same color (solid blue)
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('rgb(0,0,255)');
fill(c); // Use 'c' as fill color
rect(10, 10, 35, 35); // Draw rectangle

c = color('rgb(0%, 0%, 100%)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 35, 35); // Draw rectangle

c = color('rgba(0, 0, 255, 1)');
fill(c); // Use updated 'c' as fill color
rect(10, 55, 35, 35); // Draw rectangle

c = color('rgba(0%, 0%, 100%, 1)');
fill(c); // Use updated 'c' as fill color
rect(55, 55, 35, 35); // Draw rectangle

// HSL color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsl(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsla(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// HSB color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsb(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsba(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

let c; // Declare color 'c'
noStroke(); // Don't draw a stroke around shapes

// If no colorMode is specified, then the
// default of RGB with scale of 0-255 is used.
c = color(50, 55, 100); // Create a color for 'c'
fill(c); // Use color variable 'c' as fill color
rect(0, 10, 45, 80); // Draw left rect

colorMode(HSB, 100); // Use HSB with scale of 0-100
c = color(50, 55, 100); // Update 'c' with new color
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw right rect
- - - -
- - - - -
- -

- - inner colorMode(mode, maxopt) - - -
- jsboot/p5color.js, - line 1841 -
- -

- - - -
-
- - -
- colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.

Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - - either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
max - - -Number - - - - - - <optional>
- - - - - - 		range for all values
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(RGB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 0);
    point(i, j);
  }
}

noStroke();
colorMode(HSB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 100);
    point(i, j);
  }
}

colorMode(RGB, 255);
let c = color(127, 255, 0);

colorMode(RGB, 1);
let myColor = c._getRed();
text(myColor, 10, 10, 80, 80);

noFill();
colorMode(RGB, 255, 255, 255, 1);
background(255);

strokeWeight(4);
stroke(255, 0, 10, 0.3);
ellipse(40, 40, 50, 50);
ellipse(50, 50, 40, 40);
- - - -
- - - - -
- -

- - inner colorMode(mode, max1, max2, max3, maxAopt) - - -
- jsboot/p5color.js, - line 1894 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - -
max1 - - -Number - - - - - - - - - - range for the red or hue depending on the current color mode
max2 - - -Number - - - - - - - - - - range for the green or saturation depending on the current color mode
max3 - - -Number - - - - - - - - - - range for the blue or brightness/lightness depending on the current color mode
maxA - - -Number - - - - - - <optional>
- - - - - - 		range for the alpha
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner concat(a, b) → {Array} - - -
- jsboot/p5util.js, - line 120 -
- -

- - - -
-
- - -
- Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Array - - - - first Array to concatenate
b - - -Array - - - - second Array to concatenate
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- concatenated array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}
- - - -
- - - - -
- -

- - inner constrain(n, low, high) → {Number} - - -
- jsboot/p5math.js, - line 111 -
- -

- - - -
-
- - -
- Constrains a value between a minimum and maximum value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to constrain
low - - -Number - - - - minimum limit
high - - -Number - - - - maximum limit
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- constrained number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}
- - - -
- - - - -
- -

- - inner cos(angle) → {Number} - - -
- jsboot/p5math.js, - line 1319 -
- -

- - - -
-
- - -
- Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the cosine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner createNumberDict(key, value) → {NumberDict} - - -
- jsboot/p5util.js, - line 1191 -
- -

- - - -
-
- - -
- Creates a new instance of NumberDict using the key-value pair or object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number - - - -
value - - -Number - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -NumberDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}
- - - -
- - - - -
- -

- - inner createStringDict(key, value) → {StringDict} - - -
- jsboot/p5util.js, - line 1168 -
- -

- - - -
-
- - -
- Creates a new instance of p5.StringDict using the key-value pair or the object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
value - - -String - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StringDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}
- - - -
- - - - -
- -

- - inner createVector(xopt, yopt, zopt) → {p5.Vector} - - -
- jsboot/p5math.js, - line 26 -
- -

- - - -
-
- - -
- Creates a new PVector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -p5.Vector - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}
- - - -
- - - - -
- -

- - inner day() → {Integer} - - -
- jsboot/p5util.js, - line 1068 -
- -

- - - -
-
- - -
- The day() function returns the current day as a value from 1 - 31. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current day - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var d = day();
text('Current day: \n' + d, 5, 50);
- - - -
- - - - -
- -

- - inner degrees(radians) → {Number} - - -
- jsboot/p5math.js, - line 1380 -
- -

- - - -
-
- - -
- Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
radians - - -Number - - - - the radians value to convert to degrees
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees
- - - -
- - - - -
- -

- - inner displayDensity() → {Number} - - -
- jsboot/p5.js, - line 385 -
- -

- - - -
-
- - -
- Returns the pixel density of the current display the sketch is running on (always 1 for DOjS). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current pixel density of the display - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner dist(x1, y1, x2, y2) → {Number} - - -
- jsboot/p5math.js, - line 149 -
- -

- - - -
-
- - -
- Calculates the distance between two points. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- distance between the two points - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}
- - - -
- - - - -
- -

- - inner ellipse(x, y, w, hopt) - - -
- jsboot/p5shape.js, - line 77 -
- -

- - - -
-
- - -
- Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The origin may be changed with the ellipseMode() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the ellipse.
y - - -Number - - - - - - - - - - y-coordinate of the ellipse.
w - - -Number - - - - - - - - - - width of the ellipse.
h - - -Number - - - - - - <optional>
- - - - - - 		height of the ellipse.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(56, 46, 55, 55);
- - - -
- - - - -
- -

- - inner ellipseMode(mode) - - -
- jsboot/p5shape.js, - line 623 -
- -

- - - -
-
- - -
- Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are interpreted.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CENTER, RADIUS, CORNER, or CORNERS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipseMode(RADIUS); // Set ellipseMode to RADIUS
fill(255); // Set fill to white
ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER
fill(100); // Set fill to gray
ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode

ellipseMode(CORNER); // Set ellipseMode is CORNER
fill(255); // Set fill to white
ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode

ellipseMode(CORNERS); // Set ellipseMode to CORNERS
fill(100); // Set fill to gray
ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- - - -
- - - - -
- -

- - inner endShape(modeopt) - - -
- jsboot/p5shape.js, - line 482 -
- -

- - - -
-
- - -
- The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - <optional>
- - - - - - 		use CLOSE to close the shape
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noFill();

beginShape();
vertex(20, 20);
vertex(45, 20);
vertex(45, 80);
endShape(CLOSE);

beginShape();
vertex(50, 20);
vertex(75, 20);
vertex(75, 80);
endShape();

TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
- - - -
- - - - -
- -

- - inner exp(n) → {Number} - - -
- jsboot/p5math.js, - line 202 -
- -

- - - -
-
- - -
- Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - exponent to raise
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- e^n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}
- - - -
- - - - -
- -

- - inner fill(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2007 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(value) - - -
- jsboot/p5color.js, - line 2002 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(values) - - -
- jsboot/p5color.js, - line 2013 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(color) - - -
- jsboot/p5color.js, - line 2019 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the fill color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 1934 -
- -

- - - -
-
- - -
- Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the fill color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
fill(51);
rect(20, 20, 60, 60);

// R, G & B integer values
fill(255, 204, 0);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
fill(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
fill('red');
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
fill('#fae');
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
fill('#222222');
rect(20, 20, 60, 60);

// integer RGB notation
fill('rgb(0,255,0)');
rect(20, 20, 60, 60);

// integer RGBA notation
fill('rgba(0,255,0, 0.25)');
rect(20, 20, 60, 60);

// percentage RGB notation
fill('rgb(100%,0%,10%)');
rect(20, 20, 60, 60);

// percentage RGBA notation
fill('rgba(100%,0%,100%,0.5)');
rect(20, 20, 60, 60);

// p5 Color object
fill(color(0, 0, 255));
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner float(str) → {Number} - - -
- jsboot/p5util.js, - line 341 -
- -

- - - -
-
- - -
- Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN. When an array of values is passed in, then an array of floats of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - float string to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- floating point representation of string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);
- - - -
- - - - -
- -

- - inner floor(n) → {Integer} - - -
- jsboot/p5math.js, - line 246 -
- -

- - - -
-
- - -
- Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round down
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded down number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner frameRate(fps) - - -
- jsboot/p5env.js, - line 111 -
- -

- - - -
-
- - -
- Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations This is the same as setFrameRate(val).

Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().

Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fps - - -Number - - - - number of frames to be displayed every second
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rectX = 0;
let fr = 30; //starting FPS
let clr;

function setup() {
  background(200);
  frameRate(fr); // Attempt to refresh at starting FPS
  clr = color(255, 0, 0);
}

function draw() {
  background(200);
  rectX = rectX += 1; // Move Rectangle

  if (rectX >= width) {
    // If you go off screen.
    if (fr === 30) {
      clr = color(0, 0, 255);
      fr = 10;
      frameRate(fr); // make frameRate 10 FPS
    } else {
      clr = color(255, 0, 0);
      fr = 30;
      frameRate(fr); // make frameRate 30 FPS
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}
- - - -
- - - - -
- -

- - inner fullscreen(valopt) → {Boolean} - - -
- jsboot/p5env.js, - line 240 -
- -

- - - -
-
- - -
- If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
val - - -Boolean - - - - - - <optional>
- - - - - - 		whether the sketch should be in fullscreen mode or not
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- current fullscreen state - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clicking in the box toggles fullscreen on and off.
function setup() {
  background(200);
}
function mousePressed() {
  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}
- - - -
- - - - -
- -

- - inner getFrameRate() → {Number} - - -
- jsboot/p5env.js, - line 168 -
- -

- - - -
-
- - -
- Returns the current framerate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current frameRate - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner getURL() → {String} - - -
- jsboot/p5env.js, - line 294 -
- -

- - - -
-
- - -
- Gets the current URL. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- url - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let url;
let x = 100;

function setup() {
  fill(0);
  noStroke();
  url = getURL();
}

function draw() {
  background(200);
  text(url, x, height / 2);
  x--;
}
- - - -
- - - - -
- -

- - inner getURLParams() → {Object} - - -
- jsboot/p5env.js, - line 334 -
- -

- - - -
-
- - -
- Gets the current URL params as an Object. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- URL params - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Example: http://p5js.org?year=2014&month=May&day=15

function setup() {
  let params = getURLParams();
  text(params.day, 10, 20);
  text(params.month, 10, 40);
  text(params.year, 10, 60);
}
- - - -
- - - - -
- -

- - inner getURLPath() → {Array.<String>} - - -
- jsboot/p5env.js, - line 318 -
- -

- - - -
-
- - -
- Gets the current URL path as an array. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- path components - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let urlPath = getURLPath();
  for (let i = 0; i < urlPath.length; i++) {
    text(urlPath[i], 10, i * 20 + 20);
  }
}
- - - -
- - - - -
- -

- - inner green(color) → {Number} - - -
- jsboot/p5color.js, - line 1487 -
- -

- - - -
-
- - -
- Extracts the green value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the green value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(20, 75, 200); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let greenValue = green(c); // Get green in 'c'
print(greenValue); // Print "75.0"
fill(0, greenValue, 0); // Use 'greenValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner hex(n, digitsopt) → {String} - - -
- jsboot/p5util.js, - line 530 -
- -

- - - -
-
- - -
- Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Number - - - - - - - - - - value to parse
digits - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- hexadecimal string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- - - -
- - - - -
- -

- - inner hour() → {Integer} - - -
- jsboot/p5util.js, - line 1082 -
- -

- - - -
-
- - -
- The hour() function returns the current hour as a value from 0 - 23. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current hour - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var h = hour();
text('Current hour:\n' + h, 5, 50);
- - - -
- - - - -
- -

- - inner hue(color) → {Number} - - -
- jsboot/p5color.js, - line 1509 -
- -

- - - -
-
- - -
- Extracts the hue value from a color or pixel array. Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the hue - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = hue(c); // Sets 'value' to "0"
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner image(img, x, y) - - -
- jsboot/p5shape.js, - line 709 -
- -

- - - -
-
- - -
- Draw an image to the p5.js canvas. This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image. This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
img - - -Bitmap - - - - the image to display
x - - -Number - - - - the x-coordinate of the top-left corner of the image
y - - -Number - - - - the y-coordinate of the top-left corner of the image
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner imageMode(mode) - - -
- jsboot/p5shape.js, - line 759 -
- -

- - - -
-
- - -
- Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.

imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.

imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, or CENTER
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNER);
  image(img, 10, 10, 50, 50);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNERS);
  image(img, 10, 10, 90, 40);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CENTER);
  image(img, 50, 50, 80, 80);
}
- - - -
- - - - -
- -

- - inner int(n, radixopt) → {Number} - - -
- jsboot/p5util.js, - line 365 -
- -

- - - -
-
- - -
- Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -String -| - -Boolean -| - -Number - - - - - - - - - - value to parse
radix - - -Integer - - - - - - <optional>
- - - - - - 		the radix to convert to (default: 10)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
- - - -
- - - - -
- -

- - inner join(list, separator) → {String} - - -
- jsboot/p5util.js, - line 595 -
- -

- - - -
-
- - -
- Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - array of Strings to be joined
separator - - -String - - - - String to be placed between each item
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- joined String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);
- - - -
- - - - -
- -

- - inner keyPressed() - - -
- jsboot/p5input.js, - line 534 -
- -

- - - -
-
- - -
- The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    value = 255;
  } else if (keyCode === RIGHT_ARROW) {
    value = 0;
  }
}
- - - -
- - - - -
- -

- - inner keyReleased() - - -
- jsboot/p5input.js, - line 568 -
- -

- - - -
-
- - -
- The keyReleased() function is called once every time a key is released. See key and keyCode for more information.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
  return false; // prevent any default behavior
}
- - - -
- - - - -
- -

- - inner keyTyped() - - -
- jsboot/p5input.js, - line 592 -
- -

- - - -
-
- - -
- The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. The most recent key pressed will be stored in the key variable.

Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyTyped() {
  if (key === 'a') {
    value = 255;
  } else if (key === 'b') {
    value = 0;
  }
  // uncomment to prevent any default behavior
  // return false;
}
- - - -
- - - - -
- -

- - inner lerp(start, stop, amt) → {Number} - - -
- jsboot/p5math.js, - line 279 -
- -

- - - -
-
- - -
- Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
start - - -Number - - - - first value
stop - - -Number - - - - second value
amt - - -Number - - - - number
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- lerped value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}
- - - -
- - - - -
- -

- - inner lerpColor(c1, c2, amt) → {Color} - - -
- jsboot/p5color.js, - line 1536 -
- -

- - - -
-
- - -
- Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.

The way that colours are interpolated depends on the current color mode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c1 - - -Color - - - - interpolate from this color
c2 - - -Color - - - - interpolate to this color
amt - - -Number - - - - number between 0 and 1
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- interpolated color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
colorMode(RGB);
stroke(255);
background(51);
let from = color(218, 165, 32);
let to = color(72, 61, 139);
colorMode(RGB); // Try changing to HSB.
let interA = lerpColor(from, to, 0.33);
let interB = lerpColor(from, to, 0.66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
- - - -
- - - - -
- -

- - inner lightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1623 -
- -

- - - -
-
- - -
- Extracts the HSL lightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the lightness - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSL);
let c = color(156, 100, 50, 1);
fill(c);
rect(15, 20, 35, 60);
let value = lightness(c); // Sets 'value' to 50
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner line(x1, y1, x2, y2) - - -
- jsboot/p5shape.js, - line 152 -
- -

- - - -
-
- - -
- Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
line(30, 20, 85, 75);

line(30, 20, 85, 20);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
line(85, 75, 30, 75);
- - - -
- - - - -
- -

- - inner loadBytes(file) → {Array.<number>} - - -
- jsboot/p5.js, - line 543 -
- -

- - - -
-
- - -
- This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
file - - -string - - - - name of the file or URL to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<number> - - - - - -- an object whose 'bytes' property will be the loaded buffer - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let data;

function preload() {
  data = loadBytes('assets/mammals.xml');
}

function setup() {
  for (let i = 0; i < 5; i++) {
    console.log(data.bytes[i].toString(16));
  }
}
- - - -
- - - - -
- -

- - inner loadFont(path) → {Font} - - -
- jsboot/p5typo.js, - line 26 -
- -

- - - -
-
- - -
- Loads a GRX font file (.FNT) from a file Font Object.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Font - - - - - -- Font object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner loadImage(path) → {Bitmap} - - -
- jsboot/p5shape.js, - line 681 -
- -

- - - -
-
- - -
- Loads an image from a path and creates a Image from it.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - Path of the image to be loaded
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Bitmap - - - - - -- the Image object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner loadStrings(filename) → {Array.<String>} - - -
- jsboot/p5.js, - line 486 -
- -

- - - -
-
- - -
- Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.

Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.

This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let result;
function preload() {
  result = loadStrings('assets/test.txt');
}
function setup() {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}

function setup() {
  loadStrings('assets/test.txt', pickString);
}

function pickString(result) {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}
- - - -
- - - - -
- -

- - inner log(n) → {Number} - - -
- jsboot/p5math.js, - line 320 -
- -

- - - -
-
- - -
- Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number greater than 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- natural logarithm of n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}
- - - -
- - - - -
- -

- - inner loop() - - -
- jsboot/p5.js, - line 235 -
- -

- - - -
-
- - -
- By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop(). Avoid calling loop() from inside setup(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}
- - - -
- - - - -
- -

- - inner mag(a, b) → {Number} - - -
- jsboot/p5math.js, - line 370 -
- -

- - - -
-
- - -
- Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - first value
b - - -Number - - - - second value
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- magnitude of vector from (0,0) to (a,b) - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}
- - - -
- - - - -
- -

- - inner map(value, start1, stop1, start2, stop2, withinBoundsopt) → {Number} - - -
- jsboot/p5math.js, - line 402 -
- -

- - - -
-
- - -
- Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -Number - - - - - - - - - - the incoming value to be converted
start1 - - -Number - - - - - - - - - - lower bound of the value's current range
stop1 - - -Number - - - - - - - - - - upper bound of the value's current range
start2 - - -Number - - - - - - - - - - lower bound of the value's target range
stop2 - - -Number - - - - - - - - - - upper bound of the value's target range
withinBounds - - -Boolean - - - - - - <optional>
- - - - - - 		constrain the value to the newly mapped range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- remapped number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}
- - - -
- - - - -
- -

- - inner match(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 616 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);
- - - -
- - - - -
- -

- - inner matchAll(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 649 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- 2d Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);
- - - -
- - - - -
- -

- - inner max(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 448 -
- -

- - - -
-
- - -
- Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- maximum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner millis() → {Number} - - -
- jsboot/p5util.js, - line 1110 -
- -

- - - -
-
- - -
- Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the number of milliseconds since starting the program - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
- - - -
- - - - -
- -

- - inner min(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 486 -
- -

- - - -
-
- - -
- Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- minimum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner minute() → {Integer} - - -
- jsboot/p5util.js, - line 1096 -
- -

- - - -
-
- - -
- The minute() function returns the current minute as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current minute - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = minute();
text('Current minute: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner month() → {Integer} - - -
- jsboot/p5util.js, - line 1125 -
- -

- - - -
-
- - -
- The month() function returns the current month as a value from 1 - 12. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current month - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = month();
text('Current month: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner mouseClicked(eventopt) - - -
- jsboot/p5input.js, - line 422 -
- -

- - - -
-
- - -
- The mouseClicked() function is called once after a mouse button has been pressed and then released.

Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function mouseClicked() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseClicked() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseClicked(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseMoved(eventopt) - - -
- jsboot/p5input.js, - line 303 -
- -

- - - -
-
- - -
- The >mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move the mouse across the page
// to change its value

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function mouseMoved() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseMoved(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mousePressed(eventopt) - - -
- jsboot/p5input.js, - line 341 -
- -

- - - -
-
- - -
- The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mousePressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mousePressed(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseReleased(eventopt) - - -
- jsboot/p5input.js, - line 381 -
- -

- - - -
-
- - -
- The mouseReleased() function is called every time a mouse button is released.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseReleased() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseReleased(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner nf(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 692 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
left - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfc(num, rightopt) → {String} - - -
- jsboot/p5util.js, - line 789 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfp(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 853 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfs(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 901 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. The values for the digits, left, and right parameters should always be positive integers. (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner noCursor() - - -
- jsboot/p5.js, - line 408 -
- -

- - - -
-
- - -
- Hides the cursor from view. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}
- - - -
- - - - -
- -

- - inner noFill() - - -
- jsboot/p5color.js, - line 2031 -
- -

- - - -
-
- - -
- Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(15, 10, 55, 55);
noFill();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noFill();
  stroke(100, 100, 240);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner noise(x, yopt, zopt) → {Number} - - -
- jsboot/p5math.js, - line 969 -
- -

- - - -
-
- - -
- Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate in noise space
y - - -Number - - - - - - <optional>
- - - - - - 		y-coordinate in noise space
z - - -Number - - - - - - <optional>
- - - - - - 		z-coordinate in noise space
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- Perlin noise value (between 0 and 1) at specified coordinates - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}
- - - -
- - - - -
- -

- - inner noiseDetail(lod, falloff) - - -
- jsboot/p5math.js, - line 1113 -
- -

- - - -
-
- - -
- Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence.

By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise().

By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
lod - - -Number - - - - number of octaves to be used by the noise
falloff - - -Number - - - - falloff factor for each octave
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}
- - - -
- - - - -
- -

- - inner noLoop() - - -
- jsboot/p5.js, - line 271 -
- -

- - - -
-
- - -
- Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.

When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.

Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}
- - - -
- - - - -
- -

- - inner norm(value, start, stop) → {Number} - - -
- jsboot/p5math.js, - line 524 -
- -

- - - -
-
- - -
- Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - incoming value to be normalized
start - - -Number - - - - lower bound of the value's current range
stop - - -Number - - - - upper bound of the value's current range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- normalized number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}
- - - -
- - - - -
- -

- - inner noStroke() - - -
- jsboot/p5color.js, - line 2058 -
- -

- - - -
-
- - -
- Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noStroke();
  fill(240, 150, 150);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner pixelDensity(val) - - -
- jsboot/p5env.js, - line 267 -
- -

- - - -
-
- - -
- Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
val - - -Number - - - - whether or how much the sketch should scale
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  pixelDensity(1);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

function setup() {
  pixelDensity(3.0);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner point(x, y, zopt) - - -
- jsboot/p5shape.js, - line 189 -
- -

- - - -
-
- - -
- Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x-coordinate
y - - -Number - - - - - - - - - - the y-coordinate
z - - -Number - - - - - - <optional>
- - - - - - 		the z-coordinate (for WebGL mode)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
point(30, 20);
point(85, 20);
point(85, 75);
point(30, 75);
- - - -
- - - - -
- -

- - inner pop() - - -
- jsboot/p5.js, - line 631 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
translate(50, 0);
strokeWeight(10);
fill(204, 153, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner pow(n, e) → {Number} - - -
- jsboot/p5math.js, - line 570 -
- -

- - - -
-
- - -
- Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to Math.pow(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - base of the exponential expression
e - - -Number - - - - power by which to raise the base
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- n^e - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 45 -
- -

- - - -
-
- - -
- The println() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 26 -
- -

- - - -
-
- - -
- The print() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner push() - - -
- jsboot/p5.js, - line 580 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
translate(50, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner quad(x1, y1, x2, y2, x3, y3, x4, y4) - - -
- jsboot/p5shape.js, - line 211 -
- -

- - - -
-
- - -
- Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
x3 - - -Number - - - - the x-coordinate of the third point
y3 - - -Number - - - - the y-coordinate of the third point
x4 - - -Number - - - - the x-coordinate of the fourth point
y4 - - -Number - - - - the y-coordinate of the fourth point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
quad(38, 31, 86, 20, 69, 63, 30, 76);
- - - -
- - - - -
- -

- - inner radians(degrees) → {Number} - - -
- jsboot/p5math.js, - line 1402 -
- -

- - - -
-
- - -
- Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
degrees - - -Number - - - - the degree value to convert to radians
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians
- - - -
- - - - -
- -

- - inner random(minopt, maxopt) → {Number} - - -
- jsboot/p5math.js, - line 817 -
- -

- - - -
-
- - -
- Return a random floating-point number. Takes either 0, 1 or 2 arguments. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If one argument is given and it is an array, returns a random element from that array. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
min - - -Number - - - - - - <optional>
- - - - - - 		the lower bound (inclusive)
max - - -Number - - - - - - <optional>
- - - - - - 		the upper bound (exclusive)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word
- - - -
- - - - -
- -

- - inner randomGaussian(mean, sd) → {Number} - - -
- jsboot/p5math.js, - line 882 -
- -

- - - -
-
- - -
- Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned.

Takes either 0, 1 or 2 arguments.
If no args, returns a mean of 0 and standard deviation of 1.
If one arg, that arg is the mean (standard deviation is 1).
If two args, first is mean, second is standard deviation. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mean - - -Number - - - - the mean
sd - - -Number - - - - the standard deviation
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}
- - - -
- - - - -
- -

- - inner randomSeed(seed) - - -
- jsboot/p5math.js, - line 794 -
- -

- - - -
-
- - -
- Sets the seed value for random(). By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
seed - - -Number - - - - the seed value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}
- - - -
- - - - -
- -

- - inner rect(x, y, w, h) - - -
- jsboot/p5shape.js, - line 240 -
- -

- - - -
-
- - -
- Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the rectangle.
y - - -Number - - - - y-coordinate of the rectangle.
w - - -Number - - - - width of the rectangle.
h - - -Number - - - - height of the rectangle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a rectangle at location (30, 20) with a width and height of 55.
rect(30, 20, 55, 55);
- - - -
- - - - -
- -

- - inner rectMode(mode) - - -
- jsboot/p5shape.js, - line 568 -
- -

- - - -
-
- - -
- Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, CENTER, or RADIUS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rectMode(CORNER); // Default rectMode is CORNER
fill(255); // Set fill to white
rect(25, 25, 50, 50); // Draw white rect using CORNER mode

rectMode(CORNERS); // Set rectMode to CORNERS
fill(100); // Set fill to gray
rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode

rectMode(RADIUS); // Set rectMode to RADIUS
fill(255); // Set fill to white
rect(50, 50, 30, 30); // Draw white rect using RADIUS mode

rectMode(CENTER); // Set rectMode to CENTER
fill(100); // Set fill to gray
rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- - - -
- - - - -
- -

- - inner red(color) → {Number} - - -
- jsboot/p5color.js, - line 1644 -
- -

- - - -
-
- - -
- Extracts the red value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the red value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let redValue = red(c); // Get red in 'c'
print(redValue); // Print "255.0"
fill(redValue, 0, 0); // Use 'redValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle

colorMode(RGB, 255);
let c = color(127, 255, 0);
colorMode(RGB, 1);
let myColor = red(c);
print(myColor);
- - - -
- - - - -
- -

- - inner redraw(nopt) - - -
- jsboot/p5.js, - line 325 -
- -

- - - -
-
- - -
- Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.

In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).

The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop().

In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Integer - - - - - - <optional>
- - - - - - 		Redraw for n-times. The default value is 1.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}
- - - -
- - - - -
- -

- - inner resetMatrix() - - -
- jsboot/p5trans.js, - line 192 -
- -

- - - -
-
- - -
- Replaces the current matrix with the identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(50, 50);
applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
rect(0, 0, 20, 20);
// Note that the translate is also reset.
resetMatrix();
rect(0, 0, 20, 20);
- - - -
- - - - -
- -

- - inner reverse(list) → {Array} - - -
- jsboot/p5util.js, - line 148 -
- -

- - - -
-
- - -
- Reverses the order of an array, maps to Array.reverse() -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to reverse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the reversed list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}
- - - -
- - - - -
- -

- - inner rotate(angle) - - -
- jsboot/p5trans.js, - line 208 -
- -

- - - -
-
- - -
- Rotates a shape the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.

Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again.

Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle of rotation, specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 52, 52);
- - - -
- - - - -
- -

- - inner round(n) → {Integer} - - -
- jsboot/p5math.js, - line 598 -
- -

- - - -
-
- - -
- Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner saturation(color) → {Number} - - -
- jsboot/p5color.js, - line 1671 -
- -

- - - -
-
- - -
- Extracts the saturation value from a color or pixel array. Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the saturation value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = saturation(c); // Sets 'value' to 126
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner saveStrings(list, filename, extensionopt) - - -
- jsboot/p5.js, - line 436 -
- -

- - - -
-
- - -
- Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array.<String> - - - - - - - - - - string array to be written
filename - - -String - - - - - - - - - - filename for output
extension - - -String - - - - - - <optional>
- - - - - - 		the filename's extension
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let words = 'apple bear cat dog';

// .split() outputs an Array
let list = split(words, ' ');

function setup() {
  createCanvas(100, 100);
  background(200);
  text('click here to save', 10, 10, 70, 80);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    saveStrings(list, 'nouns.txt');
  }
}

// Saves the following to a file called 'nouns.txt':
//
// apple
// bear
// cat
// dog
- - - -
- - - - -
- -

- - inner scale(s, yopt) - - -
- jsboot/p5trans.js, - line 366 -
- -

- - - -
-
- - -
- Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.

Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.

Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
s - - -Number -| - -p5.Vector -| - -Array.<Number> - - - - - - - - - - percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given
y - - -Number - - - - - - <optional>
- - - - - - 		percent to scale the object in the y-axis
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

rect(30, 20, 50, 50);
scale(0.5, 1.3);
rect(30, 20, 50, 50);
- - - -
- - - - -
- -

- - inner scale(scales) - - -
- jsboot/p5trans.js, - line 396 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
scales - - -p5.Vector -| - -Array.<Number> - - - - per-axis percents to scale the object
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner second() → {Integer} - - -
- jsboot/p5util.js, - line 1138 -
- -

- - - -
-
- - -
- The second() function returns the current second as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current second - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var s = second();
text('Current second: \n' + s, 5, 50);
- - - -
- - - - -
- -

- - inner setAlpha(alpha) - - -
- jsboot/p5color.js, - line 595 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
alpha - - -Number - - - - the new alpha value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let squareColor;

function setup() {
  ellipseMode(CORNERS);
  strokeWeight(4);
  squareColor = color(100, 50, 150);
}

function draw() {
  background(255);

  noFill();
  stroke(0);
  ellipse(10, 10, width - 10, height - 10);

  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  fill(squareColor);
  noStroke();
  rect(13, 13, width - 26, height - 26);
}
- - - -
- - - - -
- -

- - inner setBlue(blue) - - -
- jsboot/p5color.js, - line 575 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
blue - - -Number - - - - the new blue value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setGreen(green) - - -
- jsboot/p5color.js, - line 555 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
green - - -Number - - - - the new green value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setRed(red) - - -
- jsboot/p5color.js, - line 535 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
red - - -Number - - - - the new red value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner shearX(angle) - - -
- jsboot/p5trans.js, - line 245 -
- -

- - - -
-
- - -
- Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shearY(angle) - - -
- jsboot/p5trans.js, - line 279 -
- -

- - - -
-
- - -
- Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shorten(list) → {Array} - - -
- jsboot/p5util.js, - line 167 -
- -

- - - -
-
- - -
- Decreases an array by one element and returns the shortened array, maps to Array.pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to shorten
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shortened Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}
- - - -
- - - - -
- -

- - inner shuffle(array, boolopt) → {Array} - - -
- jsboot/p5util.js, - line 188 -
- -

- - - -
-
- - -
- Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
array - - -Array - - - - - - - - - - Array to shuffle
bool - - -Boolean - - - - - - <optional>
- - - - - - 		modify passed array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shuffled Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}
- - - -
- - - - -
- -

- - inner sin(angle) → {Number} - - -
- jsboot/p5math.js, - line 1339 -
- -

- - - -
-
- - -
- Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the sine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner sort(list, countopt) → {Array} - - -
- jsboot/p5util.js, - line 228 -
- -

- - - -
-
- - -
- Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to sort
count - - -Integer - - - - - - <optional>
- - - - - - 		number of elements to sort, starting from 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the sorted list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}
- - - -
- - - - -
- -

- - inner splice(list, value, position) → {Array} - - -
- jsboot/p5util.js, - line 272 -
- -

- - - -
-
- - -
- Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to splice into
value - - -any - - - - value to be spliced in
position - - -Integer - - - - in the array from which to insert data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}
- - - -
- - - - -
- -

- - inner split(value, delim) → {Array.<String>} - - -
- jsboot/p5util.js, - line 965 -
- -

- - - -
-
- - -
- The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - the String to be split
delim - - -String - - - - the String used to separate the data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
- - - -
- - - - -
- -

- - inner splitTokens(value, delimopt) → {Array.<String>} - - -
- jsboot/p5util.js, - line 991 -
- -

- - - -
-
- - -
- The splitTokens() function splits a String at one or many character delimiters or "tokens." The delim parameter specifies the character or characters to be used as a boundary.

If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -String - - - - - - - - - - the String to be split
delim - - -String - - - - - - <optional>
- - - - - - 		list of individual Strings that will be used as separators
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
- - - -
- - - - -
- -

- - inner sq(n) → {Number} - - -
- jsboot/p5math.js, - line 631 -
- -

- - - -
-
- - -
- Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to square
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- squared number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner sqrt(n) → {Number} - - -
- jsboot/p5math.js, - line 672 -
- -

- - - -
-
- - -
- Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - non-negative number to square root
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- square root of number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner square(x, y, s) - - -
- jsboot/p5shape.js, - line 331 -
- -

- - - -
-
- - -
- Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the square.
y - - -Number - - - - y-coordinate of the square.
s - - -Number - - - - side size of the square.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
- - - -
- - - - -
- -

- - inner str(n) → {String} - - -
- jsboot/p5util.js, - line 398 -
- -

- - - -
-
- - -
- Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
- - - -
- - - - -
- -

- - inner stroke(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2170 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(value) - - -
- jsboot/p5color.js, - line 2165 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(color) - - -
- jsboot/p5color.js, - line 2182 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the stroke color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 2084 -
- -

- - - -
-
- - -
- Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the stroke color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
strokeWeight(4);
stroke(51);
rect(20, 20, 60, 60);

// R, G & B integer values
stroke(255, 204, 0);
strokeWeight(4);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
strokeWeight(4);
stroke(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
stroke('red');
strokeWeight(4);
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
stroke('#fae');
strokeWeight(4);
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
stroke('#222222');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGB notation
stroke('rgb(0,255,0)');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGBA notation
stroke('rgba(0,255,0,0.25)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGB notation
stroke('rgb(100%,0%,10%)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGBA notation
stroke('rgba(100%,0%,100%,0.5)');
strokeWeight(4);
rect(20, 20, 60, 60);

// p5 Color object
stroke(color(0, 0, 255));
strokeWeight(4);
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner stroke(values) - - -
- jsboot/p5color.js, - line 2176 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner strokeWeight(weight) - - -
- jsboot/p5shape.js, - line 810 -
- -

- - - -
-
- - -
- Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
weight - - -Number - - - - the weight (in pixels) of the stroke
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(1); // Default
line(20, 20, 80, 20);
strokeWeight(4); // Thicker
line(20, 40, 80, 40);
strokeWeight(10); // Beastly
line(20, 70, 80, 70);
- - - -
- - - - -
- -

- - inner subset(list, start, countopt) → {Array} - - -
- jsboot/p5util.js, - line 304 -
- -

- - - -
-
- - -
- Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to extract from
start - - -Integer - - - - - - - - - - position to begin
count - - -Integer - - - - - - <optional>
- - - - - - 		number of values to extract
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- Array of extracted elements - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}
- - - -
- - - - -
- -

- - inner tan(angle) → {Number} - - -
- jsboot/p5math.js, - line 1359 -
- -

- - - -
-
- - -
- Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the tangent of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner text(str, x, y) - - -
- jsboot/p5typo.js, - line 39 -
- -

- - - -
-
- - -
- Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.

The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.

The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String -| - -Object -| - -Array -| - -Number -| - -Boolean - - - - the alphanumeric symbols to be displayed
x - - -Number - - - - x-coordinate of text
y - - -Number - - - - y-coordinate of text
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}
- - - -
- - - - -
- -

- - inner textAlign(horizAlign, vertAlignopt) - - -
- jsboot/p5typo.js, - line 148 -
- -

- - - -
-
- - -
- Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
horizAlign - - -Constant - - - - - - - - - - horizontal alignment, either LEFT, CENTER, or RIGHT
vertAlign - - -Constant - - - - - - <optional>
- - - - - - 		vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);
- - - -
- - - - -
- -

- - inner textFont() → {Object} - - -
- jsboot/p5typo.js, - line 114 -
- -

- - - -
-
- - -
- Sets the current font that will be drawn with the text() function.

-
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- the current font - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}
- - - -
- - - - -
- -

- - inner textSize() → {Number} - - -
- jsboot/p5typo.js, - line 230 -
- -

- - - -
-
- - -
- Gets the current font size. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner textWidth(theText) → {Number} - - -
- jsboot/p5typo.js, - line 203 -
- -

- - - -
-
- - -
- Calculates and returns the width of any character or text string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
theText - - -String - - - - the String of characters to measure
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);
- - - -
- - - - -
- -

- - inner toString(formatopt) → {String} - - -
- jsboot/p5color.js, - line 341 -
- -

- - - -
-
- - -
- This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
format - - -String - - - - - - <optional>
- - - - - - 		How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- the formatted string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let myColor;
function setup() {
  createCanvas(200, 200);
  stroke(255);
  myColor = color(100, 100, 250);
  fill(myColor);
}

function draw() {
  rotate(HALF_PI);
  text(myColor.toString(), 0, -5);
  text(myColor.toString('#rrggbb'), 0, -30);
  text(myColor.toString('rgba%'), 0, -55);
}
- - - -
- - - - -
- -

- - inner translate(vector) - - -
- jsboot/p5trans.js, - line 347 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
vector - - -p5.Vector - - - - the vector to translate by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner translate(x, y, zopt) - - -
- jsboot/p5trans.js, - line 313 -
- -

- - - -
-
- - -
- Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.

Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - left/right translation
y - - -Number - - - - - - - - - - up/down translation
z - - -Number - - - - - - <optional>
- - - - - - 		forward/backward translation (webgl only)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(30, 20);
rect(0, 0, 55, 55);

rect(0, 0, 55, 55); // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55); // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55); // Draw rect at new 0,0

function draw() {
  background(200);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  translate(p5.Vector.fromAngle(millis() / 1000, 40));
  rect(0, 0, 20, 20);
}
- - - -
- - - - -
- -

- - inner triangle(x1, y1, x2, y2, x3, y3) - - -
- jsboot/p5shape.js, - line 356 -
- -

- - - -
-
- - -
- A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
x3 - - -Number - - - - x-coordinate of the third point
y3 - - -Number - - - - y-coordinate of the third point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
triangle(30, 75, 58, 20, 86, 75);
- - - -
- - - - -
- -

- - inner trim(str) → {String} - - -
- jsboot/p5util.js, - line 1042 -
- -

- - - -
-
- - -
- Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - a String to be trimmed
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- a trimmed String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);
- - - -
- - - - -
- -

- - inner unchar(n) → {Number} - - -
- jsboot/p5util.js, - line 508 -
- -

- - - -
-
- - -
- Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
- - - -
- - - - -
- -

- - inner unhex(n) → {Number} - - -
- jsboot/p5util.js, - line 569 -
- -

- - - -
-
- - -
- Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of hexadecimal value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
- - - -
- - - - -
- -

- - inner vertex(x, y) - - -
- jsboot/p5shape.js, - line 460 -
- -

- - - -
-
- - -
- All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the vertex
y - - -Number - - - - y-coordinate of the vertex
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(3);
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
- - - -
- - - - -
- -

- - inner year() → {Integer} - - -
- jsboot/p5util.js, - line 1151 -
- -

- - - -
-
- - -
- The year() returns the current year as an integer (2014, 2015, 2016, etc). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current year - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var y = year();
text('Current year: \n' + y, 5, 50);
- - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

p5compat

- - - - -
- -
- -
- - - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - -

Classes

- - -
- -
-

- Color -
- module:p5compat~Color -
-

-
- - -
- - - - - - - - - - -

Members

- -
- - -
-

- static ColorConversion - -
- jsboot/p5color.js, - line 41 -
- -

- - -
-
- -
- Conversions adapted from . In these functions, hue is always in the range [0, 1], just like all other components are in the range [0, 1]. 'Brightness' and 'value' are used interchangeably. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly displayHeight - -
- jsboot/p5env.js, - line 202 -
- -

- - -
-
- -
- System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly displayWidth - -
- jsboot/p5env.js, - line 189 -
- -

- - -
-
- -
- System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly focused - -
- jsboot/p5env.js, - line 109 -
- -

- - -
-
- -
- Confirms if the window a p5.js program is in is "focused," meaning that the sketch will accept mouse or keyboard input. This variable is "true" if the window is focused and "false" if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
focused - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// To demonstrate, put two windows side by side.
// Click on the window that the p5 sketch isn't in!
function draw() {
  background(200);
  noStroke();
  fill(0, 200, 0);
  ellipse(25, 25, 50, 50);

  if (!focused) {
    // or "if (focused === false)"
    stroke(200, 0, 0);
    line(0, 0, 100, 100);
    line(100, 0, 0, 100);
  }
}
- - -
- - - - -
-

- static, readonly frameCount - -
- jsboot/p5env.js, - line 83 -
- -

- - -
-
- -
- The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
frameCount - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
- - -
- - - - -
-

- static, readonly height - -
- jsboot/p5env.js, - line 238 -
- -

- - -
-
- -
- System variable that stores the height of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
height - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly key - -
- jsboot/p5input.js, - line 507 -
- -

- - -
-
- -
- The system variable key always contains the value of the most recent key on the keyboard that was typed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Click any key to display it!
// (Not Guaranteed to be Case Sensitive)
function setup() {
  fill(245, 123, 158);
  textSize(50);
}

function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}
- - -
- - - - -
-

- static, readonly keyCode - -
- jsboot/p5input.js, - line 532 -
- -

- - -
-
- -
- The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyCode - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let fillVal = 126;
function draw() {
  fill(fillVal);
  rect(25, 25, 50, 50);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    fillVal = 255;
  } else if (keyCode === DOWN_ARROW) {
    fillVal = 0;
  }
  return false; // prevent default
}
- - -
- - - - -
-

- static, readonly keyIsPressed - -
- jsboot/p5input.js, - line 486 -
- -

- - -
-
- -
- The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
- - -
- - - - -
-

- static, readonly mouseButton - -
- jsboot/p5input.js, - line 278 -
- -

- - -
-
- -
- Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseButton - - -Constant - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      ellipse(50, 50, 50, 50);
    }
    if (mouseButton === RIGHT) {
      rect(25, 25, 50, 50);
    }
    if (mouseButton === CENTER) {
      triangle(23, 75, 50, 20, 78, 75);
    }
  }

  print(mouseButton);
}
- - -
- - - - -
-

- static, readonly mouseIsPressed - -
- jsboot/p5input.js, - line 301 -
- -

- - -
-
- -
- The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }

  print(mouseIsPressed);
}
- - -
- - - - -
-

- static, readonly mouseX - -
- jsboot/p5input.js, - line 53 -
- -

- - -
-
- -
- The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
- - -
- - - - -
-

- static, readonly mouseY - -
- jsboot/p5input.js, - line 71 -
- -

- - -
-
- -
- The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
- - -
- - - - -
-

- static, readonly pmouseX - -
- jsboot/p5input.js, - line 95 -
- -

- - -
-
- -
- The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas to leave a trail
function setup() {
  //slow down the frameRate to make it more visible
  frameRate(10);
}

function draw() {
  background(244, 248, 252);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + ' -> ' + mouseX);
}
- - -
- - - - -
-

- static, readonly pmouseY - -
- jsboot/p5input.js, - line 118 -
- -

- - -
-
- -
- The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);
  //draw a square only if the mouse is not moving
  if (mouseY === pmouseY && mouseX === pmouseX) {
    rect(20, 20, 60, 60);
  }

  print(pmouseY + ' -> ' + mouseY);
}
- - -
- - - - -
-

- static, readonly pwinMouseX - -
- jsboot/p5input.js, - line 213 -
- -

- - -
-
- -
- The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current x position is the horizontal mouse speed
  let speed = abs(winMouseX - pwinMouseX);
  //change the size of the circle
  //according to the horizontal speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly pwinMouseY - -
- jsboot/p5input.js, - line 247 -
- -

- - -
-
- -
- The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current y position is the vertical mouse speed
  let speed = abs(winMouseY - pwinMouseY);
  //change the size of the circle
  //according to the vertical speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly width - -
- jsboot/p5env.js, - line 230 -
- -

- - -
-
- -
- System variable that stores the width of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
width - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly windowHeight - -
- jsboot/p5env.js, - line 222 -
- -

- - -
-
- -
- System variable that stores the height of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly windowWidth - -
- jsboot/p5env.js, - line 212 -
- -

- - -
-
- -
- System variable that stores the width of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly winMouseX - -
- jsboot/p5input.js, - line 149 -
- -

- - -
-
- -
- The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the horizontal mouse position
  //relative to the window
  myCanvas.position(winMouseX + 1, windowHeight / 2);

  //the y of the square is relative to the canvas
  rect(20, mouseY, 60, 60);
}
- - -
- - - - -
-

- static, readonly winMouseY - -
- jsboot/p5input.js, - line 180 -
- -

- - -
-
- -
- The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the vertical mouse position
  //relative to the window
  myCanvas.position(windowWidth / 2, winMouseY + 1);

  //the x of the square is relative to the canvas
  rect(mouseX, 20, 60, 60);
}
- - -
- - - - -
-

- inner colorPatterns - -
- jsboot/p5color.js, - line 888 -
- -

- - -
-
- -
- Full color string patterns. The capture groups are necessary. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner namedColors - -
- jsboot/p5color.js, - line 722 -
- -

- - -
-
- -
- CSS named colors. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner WHITESPACE - -
- jsboot/p5color.js, - line 880 -
- -

- - -
-
- -
- These regular expressions are used to build up the patterns for matching viable CSS color strings: fragmenting the regexes in this way increases the legibility and comprehensibility of the code. Note that RGB values of .9 are not parsed by IE, but are supported here for color string consistency. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - static _cloneEnv() - - -
- jsboot/p5.js, - line 67 -
- -

- - - -
-
- - -
- deep copy the current environment. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _ensureMatrix() - - -
- jsboot/p5trans.js, - line 34 -
- -

- - - -
-
- - -
- make sure we have a 2x2 identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _PolyLine() - - -
- jsboot/p5shape.js, - line 550 -
- -

- - - -
-
- - -
- draw polygon by using lines. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transX(x, y) → {number} - - -
- jsboot/p5trans.js, - line 67 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated x coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transY(x, y) → {number} - - -
- jsboot/p5trans.js, - line 82 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated y coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static createCanvas() - - -
- jsboot/p5.js, - line 201 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static exit() - - -
- jsboot/p5.js, - line 231 -
- -

- - - -
-
- - -
- exit the script after the current Loop(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noSmooth() - - -
- jsboot/p5.js, - line 211 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noTint() - - -
- jsboot/p5.js, - line 226 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static settings() - - -
- jsboot/p5.js, - line 216 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static size() - - -
- jsboot/p5.js, - line 196 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static smooth() - - -
- jsboot/p5.js, - line 206 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static tint() - - -
- jsboot/p5.js, - line 221 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner abs(n) → {Number} - - -
- jsboot/p5math.js, - line 59 -
- -

- - - -
-
- - -
- Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to compute
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- absolute value of given number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
- - - -
- - - - -
- -

- - inner acos(value) → {Number} - - -
- jsboot/p5math.js, - line 1211 -
- -

- - - -
-
- - -
- The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc cosine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc cosine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);
- - - -
- - - - -
- -

- - inner alpha(color) → {Number} - - -
- jsboot/p5color.js, - line 1271 -
- -

- - - -
-
- - -
- Extracts the alpha value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the alpha value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
let c = color(0, 126, 255, 102);
fill(c);
rect(15, 15, 35, 70);
let value = alpha(c); // Sets 'value' to 102
fill(value);
rect(50, 15, 35, 70);
- - - -
- - - - -
- -

- - inner angleMode(mode) - - -
- jsboot/p5math.js, - line 1423 -
- -

- - - -
-
- - -
- Sets the current mode of p5 to given mode. Default mode is RADIANS. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either RADIANS or DEGREES
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}
- - - -
- - - - -
- -

- - inner append(array, value) → {Array} - - -
- jsboot/p5util.js, - line 30 -
- -

- - - -
-
- - -
- Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
array - - -Array - - - - Array to append
value - - -any - - - - to be added to the Array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the array that was appended to - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}
- - - -
- - - - -
- -

- - inner applyMatrix(a, b, c, d, e, f) - - -
- jsboot/p5trans.js, - line 90 -
- -

- - - -
-
- - -
- Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia. The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form: > The transformation matrix used when applyMatrix is called -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
b - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
c - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
d - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
e - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
f - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  // Equivalent to translate(x, y);
  applyMatrix(1, 0, 0, 1, 40 + step, 50);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  translate(50, 50);
  // Equivalent to scale(x, y);
  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, 0, TWO_PI);
  var cos_a = cos(angle);
  var sin_a = sin(angle);
  background(200);
  translate(50, 50);
  // Equivalent to rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, -PI / 4, PI / 4);
  background(200);
  translate(50, 50);
  // equivalent to shearX(angle);
  var shear_factor = 1 / tan(PI / 2 - angle);
  applyMatrix(1, 0, shear_factor, 1, 0, 0);
  rect(0, 0, 50, 50);
}
- - - -
- - - - -
- -

- - inner arc(x, y, w, h, start, stop, modeopt) - - -
- jsboot/p5shape.js, - line 33 -
- -

- - - -
-
- - -
- Draw an arc to the screen. If called with only x, y, w, h, start, and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.

The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the arc's ellipse
y - - -Number - - - - - - - - - - y-coordinate of the arc's ellipse
w - - -Number - - - - - - - - - - width of the arc's ellipse by default
h - - -Number - - - - - - - - - - height of the arc's ellipse by default
start - - -Number - - - - - - - - - - angle to start the arc, specified in radians
stop - - -Number - - - - - - - - - - angle to stop the arc, specified in radians
mode - - -Constant - - - - - - <optional>
- - - - - - 		optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
arc(50, 55, 50, 50, 0, HALF_PI);
noFill();
arc(50, 55, 60, 60, HALF_PI, PI);
arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
- - - -
- - - - -
- -

- - inner arrayCopy(src, srcPosition, dst, dstPosition, length) - - -
- jsboot/p5util.js, - line 52 -
- -

- - - -
-
- - -
- Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().

The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).

Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
src - - -Array - - - - the source Array
srcPosition - - -Integer - - - - starting position in the source Array
dst - - -Array - - - - the destination Array
dstPosition - - -Integer - - - - starting position in the destination Array
length - - -Integer - - - - number of Array elements to be copied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - -
Deprecated:
  • Yes
- - - - - - - - - - - - - - - -
- - - -
Example
- - 
var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]
- - - -
- - - - -
- -

- - inner asin(value) → {Number} - - -
- jsboot/p5math.js, - line 1237 -
- -

- - - -
-
- - -
- The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc sine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc sine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);
- - - -
- - - - -
- -

- - inner atan(value) → {Number} - - -
- jsboot/p5math.js, - line 1264 -
- -

- - - -
-
- - -
- The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc tangent is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);
- - - -
- - - - -
- -

- - inner atan2(y, x) → {Number} - - -
- jsboot/p5math.js, - line 1291 -
- -

- - - -
-
- - -
- Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor.

Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
y - - -Number - - - - y-coordinate of the point
x - - -Number - - - - x-coordinate of the point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given point - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}
- - - -
- - - - -
- -

- - inner background(color) - - -
- jsboot/p5color.js, - line 1702 -
- -

- - - -
-
- - -
- The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A Color object can also be provided to set the background color.

An Image can also be provided to set the background image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - any value created by the color() function
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
background(51);

// R, G & B integer values
background(255, 204, 0);

// H, S & B integer values
colorMode(HSB);
background(255, 204, 100);

// Named SVG/CSS color string
background('red');

// three-digit hexadecimal RGB notation
background('#fae');

// six-digit hexadecimal RGB notation
background('#222222');

// integer RGB notation
background('rgb(0,255,0)');

// integer RGBA notation
background('rgba(0,255,0, 0.25)');

// percentage RGB notation
background('rgb(100%,0%,10%)');

// percentage RGBA notation
background('rgba(100%,0%,100%,0.5)');

// p5 Color object
background(color(0, 0, 255));
- - - -
- - - - -
- -

- - inner background(colorstring, aopt) - - -
- jsboot/p5color.js, - line 1760 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
colorstring - - -String - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex
a - - -Number - - - - - - <optional>
- - - - - - 		opacity of the background relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(gray, aopt) - - -
- jsboot/p5color.js, - line 1769 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - specifies a value between white and black
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(v1, v2, v3, aopt) - - -
- jsboot/p5color.js, - line 1775 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value (depending on the current color mode)
v2 - - -Number - - - - - - - - - - green or saturation value (depending on the current color mode)
v3 - - -Number - - - - - - - - - - blue or brightness value (depending on the current color mode)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(values) - - -
- jsboot/p5color.js, - line 1786 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(bitmap, aopt) - - -
- jsboot/p5color.js, - line 1792 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
bitmap - - -Bitmap - - - - - - - - - - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner beginShape(kindopt) - - -
- jsboot/p5shape.js, - line 379 -
- -

- - - -
-
- - -
- Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.

The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.

Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
kind - - -Constant - - - - - - <optional>
- - - - - - 		either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

beginShape(LINES);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();

beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
- - - -
- - - - -
- -

- - inner blue(color) → {Number} - - -
- jsboot/p5color.js, - line 1291 -
- -

- - - -
-
- - -
- Extracts the blue value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the blue value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(175, 100, 220); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let blueValue = blue(c); // Get blue in 'c'
print(blueValue); // Prints "220.0"
fill(0, 0, blueValue); // Use 'blueValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner boolean(n) → {Boolean} - - -
- jsboot/p5util.js, - line 422 -
- -

- - - -
-
- - -
- Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
- - - -
- - - - -
- -

- - inner brightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1312 -
- -

- - - -
-
- - -
- Extracts the HSB brightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the brightness value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = brightness(c); // Sets 'value' to 255
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner byte(n) → {Number} - - -
- jsboot/p5util.js, - line 452 -
- -

- - - -
-
- - -
- Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- byte representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]
- - - -
- - - - -
- -

- - inner ceil(n) → {Integer} - - -
- jsboot/p5math.js, - line 77 -
- -

- - - -
-
- - -
- Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round up
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded up number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner char(n) → {String} - - -
- jsboot/p5util.js, - line 481 -
- -

- - - -
-
- - -
- Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
- - - -
- - - - -
- -

- - inner circle(x, y, d) - - -
- jsboot/p5shape.js, - line 133 -
- -

- - - -
-
- - -
- Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the centre of the circle.
y - - -Number - - - - y-coordinate of the centre of the circle.
d - - -Number - - - - diameter of the circle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a circle at location (30, 30) with a diameter of 20.
circle(30, 30, 20);
- - - -
- - - - -
- -

- - inner clear() - - -
- jsboot/p5color.js, - line 1813 -
- -

- - - -
-
- - -
- Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
  clear();
}
- - - -
- - - - -
- -

- - inner color(color) → {Color} - - -
- jsboot/p5color.js, - line 1472 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(value) → {Color} - - -
- jsboot/p5color.js, - line 1461 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(v1, v2, v3, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1449 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(values) → {Color} - - -
- jsboot/p5color.js, - line 1466 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(gray, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1333 -
- -

- - - -
-
- - -
- Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.

Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - number specifying value between white and black.
alpha - - -Number - - - - - - <optional>
- - - - - - 		alpha value relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- resulting color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(30, 20, 55, 55); // Draw rectangle

let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
ellipse(25, 25, 80, 80); // Draw left circle

// Using only one value with color()
// generates a grayscale value.
c = color(65); // Update 'c' with grayscale value
fill(c); // Use updated 'c' as fill color
ellipse(75, 75, 80, 80); // Draw right circle

// Named SVG & CSS colors may be used,
let c = color('magenta');
fill(c); // Use 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(20, 20, 60, 60); // Draw rectangle

// as can hex color codes:
noStroke(); // Don't draw a stroke around shapes
let c = color('#0f0');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('#00ff00');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// RGB and RGBA color strings are also supported:
// these all set to the same color (solid blue)
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('rgb(0,0,255)');
fill(c); // Use 'c' as fill color
rect(10, 10, 35, 35); // Draw rectangle

c = color('rgb(0%, 0%, 100%)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 35, 35); // Draw rectangle

c = color('rgba(0, 0, 255, 1)');
fill(c); // Use updated 'c' as fill color
rect(10, 55, 35, 35); // Draw rectangle

c = color('rgba(0%, 0%, 100%, 1)');
fill(c); // Use updated 'c' as fill color
rect(55, 55, 35, 35); // Draw rectangle

// HSL color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsl(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsla(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// HSB color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsb(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsba(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

let c; // Declare color 'c'
noStroke(); // Don't draw a stroke around shapes

// If no colorMode is specified, then the
// default of RGB with scale of 0-255 is used.
c = color(50, 55, 100); // Create a color for 'c'
fill(c); // Use color variable 'c' as fill color
rect(0, 10, 45, 80); // Draw left rect

colorMode(HSB, 100); // Use HSB with scale of 0-100
c = color(50, 55, 100); // Update 'c' with new color
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw right rect
- - - -
- - - - -
- -

- - inner colorMode(mode, maxopt) - - -
- jsboot/p5color.js, - line 1841 -
- -

- - - -
-
- - -
- colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.

Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - - either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
max - - -Number - - - - - - <optional>
- - - - - - 		range for all values
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(RGB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 0);
    point(i, j);
  }
}

noStroke();
colorMode(HSB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 100);
    point(i, j);
  }
}

colorMode(RGB, 255);
let c = color(127, 255, 0);

colorMode(RGB, 1);
let myColor = c._getRed();
text(myColor, 10, 10, 80, 80);

noFill();
colorMode(RGB, 255, 255, 255, 1);
background(255);

strokeWeight(4);
stroke(255, 0, 10, 0.3);
ellipse(40, 40, 50, 50);
ellipse(50, 50, 40, 40);
- - - -
- - - - -
- -

- - inner colorMode(mode, max1, max2, max3, maxAopt) - - -
- jsboot/p5color.js, - line 1894 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - -
max1 - - -Number - - - - - - - - - - range for the red or hue depending on the current color mode
max2 - - -Number - - - - - - - - - - range for the green or saturation depending on the current color mode
max3 - - -Number - - - - - - - - - - range for the blue or brightness/lightness depending on the current color mode
maxA - - -Number - - - - - - <optional>
- - - - - - 		range for the alpha
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner concat(a, b) → {Array} - - -
- jsboot/p5util.js, - line 120 -
- -

- - - -
-
- - -
- Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Array - - - - first Array to concatenate
b - - -Array - - - - second Array to concatenate
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- concatenated array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}
- - - -
- - - - -
- -

- - inner constrain(n, low, high) → {Number} - - -
- jsboot/p5math.js, - line 111 -
- -

- - - -
-
- - -
- Constrains a value between a minimum and maximum value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to constrain
low - - -Number - - - - minimum limit
high - - -Number - - - - maximum limit
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- constrained number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}
- - - -
- - - - -
- -

- - inner cos(angle) → {Number} - - -
- jsboot/p5math.js, - line 1319 -
- -

- - - -
-
- - -
- Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the cosine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner createNumberDict(key, value) → {NumberDict} - - -
- jsboot/p5util.js, - line 1191 -
- -

- - - -
-
- - -
- Creates a new instance of NumberDict using the key-value pair or object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number - - - -
value - - -Number - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -NumberDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}
- - - -
- - - - -
- -

- - inner createStringDict(key, value) → {StringDict} - - -
- jsboot/p5util.js, - line 1168 -
- -

- - - -
-
- - -
- Creates a new instance of p5.StringDict using the key-value pair or the object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
value - - -String - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StringDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}
- - - -
- - - - -
- -

- - inner createVector(xopt, yopt, zopt) → {p5.Vector} - - -
- jsboot/p5math.js, - line 26 -
- -

- - - -
-
- - -
- Creates a new PVector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -p5.Vector - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}
- - - -
- - - - -
- -

- - inner day() → {Integer} - - -
- jsboot/p5util.js, - line 1068 -
- -

- - - -
-
- - -
- The day() function returns the current day as a value from 1 - 31. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current day - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var d = day();
text('Current day: \n' + d, 5, 50);
- - - -
- - - - -
- -

- - inner degrees(radians) → {Number} - - -
- jsboot/p5math.js, - line 1380 -
- -

- - - -
-
- - -
- Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
radians - - -Number - - - - the radians value to convert to degrees
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees
- - - -
- - - - -
- -

- - inner displayDensity() → {Number} - - -
- jsboot/p5.js, - line 385 -
- -

- - - -
-
- - -
- Returns the pixel density of the current display the sketch is running on (always 1 for DOjS). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current pixel density of the display - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner dist(x1, y1, x2, y2) → {Number} - - -
- jsboot/p5math.js, - line 149 -
- -

- - - -
-
- - -
- Calculates the distance between two points. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- distance between the two points - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}
- - - -
- - - - -
- -

- - inner ellipse(x, y, w, hopt) - - -
- jsboot/p5shape.js, - line 77 -
- -

- - - -
-
- - -
- Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The origin may be changed with the ellipseMode() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the ellipse.
y - - -Number - - - - - - - - - - y-coordinate of the ellipse.
w - - -Number - - - - - - - - - - width of the ellipse.
h - - -Number - - - - - - <optional>
- - - - - - 		height of the ellipse.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(56, 46, 55, 55);
- - - -
- - - - -
- -

- - inner ellipseMode(mode) - - -
- jsboot/p5shape.js, - line 623 -
- -

- - - -
-
- - -
- Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are interpreted.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CENTER, RADIUS, CORNER, or CORNERS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipseMode(RADIUS); // Set ellipseMode to RADIUS
fill(255); // Set fill to white
ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER
fill(100); // Set fill to gray
ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode

ellipseMode(CORNER); // Set ellipseMode is CORNER
fill(255); // Set fill to white
ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode

ellipseMode(CORNERS); // Set ellipseMode to CORNERS
fill(100); // Set fill to gray
ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- - - -
- - - - -
- -

- - inner endShape(modeopt) - - -
- jsboot/p5shape.js, - line 482 -
- -

- - - -
-
- - -
- The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - <optional>
- - - - - - 		use CLOSE to close the shape
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noFill();

beginShape();
vertex(20, 20);
vertex(45, 20);
vertex(45, 80);
endShape(CLOSE);

beginShape();
vertex(50, 20);
vertex(75, 20);
vertex(75, 80);
endShape();

TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
- - - -
- - - - -
- -

- - inner exp(n) → {Number} - - -
- jsboot/p5math.js, - line 202 -
- -

- - - -
-
- - -
- Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - exponent to raise
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- e^n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}
- - - -
- - - - -
- -

- - inner fill(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2007 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(value) - - -
- jsboot/p5color.js, - line 2002 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(values) - - -
- jsboot/p5color.js, - line 2013 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(color) - - -
- jsboot/p5color.js, - line 2019 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the fill color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 1934 -
- -

- - - -
-
- - -
- Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the fill color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
fill(51);
rect(20, 20, 60, 60);

// R, G & B integer values
fill(255, 204, 0);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
fill(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
fill('red');
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
fill('#fae');
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
fill('#222222');
rect(20, 20, 60, 60);

// integer RGB notation
fill('rgb(0,255,0)');
rect(20, 20, 60, 60);

// integer RGBA notation
fill('rgba(0,255,0, 0.25)');
rect(20, 20, 60, 60);

// percentage RGB notation
fill('rgb(100%,0%,10%)');
rect(20, 20, 60, 60);

// percentage RGBA notation
fill('rgba(100%,0%,100%,0.5)');
rect(20, 20, 60, 60);

// p5 Color object
fill(color(0, 0, 255));
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner float(str) → {Number} - - -
- jsboot/p5util.js, - line 341 -
- -

- - - -
-
- - -
- Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN. When an array of values is passed in, then an array of floats of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - float string to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- floating point representation of string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);
- - - -
- - - - -
- -

- - inner floor(n) → {Integer} - - -
- jsboot/p5math.js, - line 246 -
- -

- - - -
-
- - -
- Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round down
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded down number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner frameRate(fps) - - -
- jsboot/p5env.js, - line 111 -
- -

- - - -
-
- - -
- Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations This is the same as setFrameRate(val).

Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().

Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fps - - -Number - - - - number of frames to be displayed every second
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rectX = 0;
let fr = 30; //starting FPS
let clr;

function setup() {
  background(200);
  frameRate(fr); // Attempt to refresh at starting FPS
  clr = color(255, 0, 0);
}

function draw() {
  background(200);
  rectX = rectX += 1; // Move Rectangle

  if (rectX >= width) {
    // If you go off screen.
    if (fr === 30) {
      clr = color(0, 0, 255);
      fr = 10;
      frameRate(fr); // make frameRate 10 FPS
    } else {
      clr = color(255, 0, 0);
      fr = 30;
      frameRate(fr); // make frameRate 30 FPS
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}
- - - -
- - - - -
- -

- - inner fullscreen(valopt) → {Boolean} - - -
- jsboot/p5env.js, - line 240 -
- -

- - - -
-
- - -
- If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
val - - -Boolean - - - - - - <optional>
- - - - - - 		whether the sketch should be in fullscreen mode or not
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- current fullscreen state - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clicking in the box toggles fullscreen on and off.
function setup() {
  background(200);
}
function mousePressed() {
  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}
- - - -
- - - - -
- -

- - inner getFrameRate() → {Number} - - -
- jsboot/p5env.js, - line 168 -
- -

- - - -
-
- - -
- Returns the current framerate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current frameRate - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner getURL() → {String} - - -
- jsboot/p5env.js, - line 294 -
- -

- - - -
-
- - -
- Gets the current URL. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- url - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let url;
let x = 100;

function setup() {
  fill(0);
  noStroke();
  url = getURL();
}

function draw() {
  background(200);
  text(url, x, height / 2);
  x--;
}
- - - -
- - - - -
- -

- - inner getURLParams() → {Object} - - -
- jsboot/p5env.js, - line 334 -
- -

- - - -
-
- - -
- Gets the current URL params as an Object. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- URL params - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Example: http://p5js.org?year=2014&month=May&day=15

function setup() {
  let params = getURLParams();
  text(params.day, 10, 20);
  text(params.month, 10, 40);
  text(params.year, 10, 60);
}
- - - -
- - - - -
- -

- - inner getURLPath() → {Array.<String>} - - -
- jsboot/p5env.js, - line 318 -
- -

- - - -
-
- - -
- Gets the current URL path as an array. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- path components - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let urlPath = getURLPath();
  for (let i = 0; i < urlPath.length; i++) {
    text(urlPath[i], 10, i * 20 + 20);
  }
}
- - - -
- - - - -
- -

- - inner green(color) → {Number} - - -
- jsboot/p5color.js, - line 1487 -
- -

- - - -
-
- - -
- Extracts the green value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the green value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(20, 75, 200); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let greenValue = green(c); // Get green in 'c'
print(greenValue); // Print "75.0"
fill(0, greenValue, 0); // Use 'greenValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner hex(n, digitsopt) → {String} - - -
- jsboot/p5util.js, - line 530 -
- -

- - - -
-
- - -
- Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Number - - - - - - - - - - value to parse
digits - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- hexadecimal string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- - - -
- - - - -
- -

- - inner hour() → {Integer} - - -
- jsboot/p5util.js, - line 1082 -
- -

- - - -
-
- - -
- The hour() function returns the current hour as a value from 0 - 23. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current hour - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var h = hour();
text('Current hour:\n' + h, 5, 50);
- - - -
- - - - -
- -

- - inner hue(color) → {Number} - - -
- jsboot/p5color.js, - line 1509 -
- -

- - - -
-
- - -
- Extracts the hue value from a color or pixel array. Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the hue - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = hue(c); // Sets 'value' to "0"
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner image(img, x, y) - - -
- jsboot/p5shape.js, - line 709 -
- -

- - - -
-
- - -
- Draw an image to the p5.js canvas. This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image. This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
img - - -Bitmap - - - - the image to display
x - - -Number - - - - the x-coordinate of the top-left corner of the image
y - - -Number - - - - the y-coordinate of the top-left corner of the image
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner imageMode(mode) - - -
- jsboot/p5shape.js, - line 759 -
- -

- - - -
-
- - -
- Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.

imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.

imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, or CENTER
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNER);
  image(img, 10, 10, 50, 50);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNERS);
  image(img, 10, 10, 90, 40);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CENTER);
  image(img, 50, 50, 80, 80);
}
- - - -
- - - - -
- -

- - inner int(n, radixopt) → {Number} - - -
- jsboot/p5util.js, - line 365 -
- -

- - - -
-
- - -
- Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -String -| - -Boolean -| - -Number - - - - - - - - - - value to parse
radix - - -Integer - - - - - - <optional>
- - - - - - 		the radix to convert to (default: 10)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
- - - -
- - - - -
- -

- - inner join(list, separator) → {String} - - -
- jsboot/p5util.js, - line 595 -
- -

- - - -
-
- - -
- Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - array of Strings to be joined
separator - - -String - - - - String to be placed between each item
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- joined String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);
- - - -
- - - - -
- -

- - inner keyPressed() - - -
- jsboot/p5input.js, - line 534 -
- -

- - - -
-
- - -
- The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    value = 255;
  } else if (keyCode === RIGHT_ARROW) {
    value = 0;
  }
}
- - - -
- - - - -
- -

- - inner keyReleased() - - -
- jsboot/p5input.js, - line 568 -
- -

- - - -
-
- - -
- The keyReleased() function is called once every time a key is released. See key and keyCode for more information.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
  return false; // prevent any default behavior
}
- - - -
- - - - -
- -

- - inner keyTyped() - - -
- jsboot/p5input.js, - line 592 -
- -

- - - -
-
- - -
- The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. The most recent key pressed will be stored in the key variable.

Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyTyped() {
  if (key === 'a') {
    value = 255;
  } else if (key === 'b') {
    value = 0;
  }
  // uncomment to prevent any default behavior
  // return false;
}
- - - -
- - - - -
- -

- - inner lerp(start, stop, amt) → {Number} - - -
- jsboot/p5math.js, - line 279 -
- -

- - - -
-
- - -
- Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
start - - -Number - - - - first value
stop - - -Number - - - - second value
amt - - -Number - - - - number
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- lerped value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}
- - - -
- - - - -
- -

- - inner lerpColor(c1, c2, amt) → {Color} - - -
- jsboot/p5color.js, - line 1536 -
- -

- - - -
-
- - -
- Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.

The way that colours are interpolated depends on the current color mode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c1 - - -Color - - - - interpolate from this color
c2 - - -Color - - - - interpolate to this color
amt - - -Number - - - - number between 0 and 1
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- interpolated color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
colorMode(RGB);
stroke(255);
background(51);
let from = color(218, 165, 32);
let to = color(72, 61, 139);
colorMode(RGB); // Try changing to HSB.
let interA = lerpColor(from, to, 0.33);
let interB = lerpColor(from, to, 0.66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
- - - -
- - - - -
- -

- - inner lightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1623 -
- -

- - - -
-
- - -
- Extracts the HSL lightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the lightness - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSL);
let c = color(156, 100, 50, 1);
fill(c);
rect(15, 20, 35, 60);
let value = lightness(c); // Sets 'value' to 50
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner line(x1, y1, x2, y2) - - -
- jsboot/p5shape.js, - line 152 -
- -

- - - -
-
- - -
- Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
line(30, 20, 85, 75);

line(30, 20, 85, 20);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
line(85, 75, 30, 75);
- - - -
- - - - -
- -

- - inner loadBytes(file) → {Array.<number>} - - -
- jsboot/p5.js, - line 543 -
- -

- - - -
-
- - -
- This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
file - - -string - - - - name of the file or URL to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<number> - - - - - -- an object whose 'bytes' property will be the loaded buffer - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let data;

function preload() {
  data = loadBytes('assets/mammals.xml');
}

function setup() {
  for (let i = 0; i < 5; i++) {
    console.log(data.bytes[i].toString(16));
  }
}
- - - -
- - - - -
- -

- - inner loadFont(path) → {Font} - - -
- jsboot/p5typo.js, - line 26 -
- -

- - - -
-
- - -
- Loads a GRX font file (.FNT) from a file Font Object.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Font - - - - - -- Font object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner loadImage(path) → {Bitmap} - - -
- jsboot/p5shape.js, - line 681 -
- -

- - - -
-
- - -
- Loads an image from a path and creates a Image from it.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - Path of the image to be loaded
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Bitmap - - - - - -- the Image object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner loadStrings(filename) → {Array.<String>} - - -
- jsboot/p5.js, - line 486 -
- -

- - - -
-
- - -
- Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.

Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.

This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let result;
function preload() {
  result = loadStrings('assets/test.txt');
}
function setup() {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}

function setup() {
  loadStrings('assets/test.txt', pickString);
}

function pickString(result) {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}
- - - -
- - - - -
- -

- - inner log(n) → {Number} - - -
- jsboot/p5math.js, - line 320 -
- -

- - - -
-
- - -
- Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number greater than 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- natural logarithm of n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}
- - - -
- - - - -
- -

- - inner loop() - - -
- jsboot/p5.js, - line 235 -
- -

- - - -
-
- - -
- By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop(). Avoid calling loop() from inside setup(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}
- - - -
- - - - -
- -

- - inner mag(a, b) → {Number} - - -
- jsboot/p5math.js, - line 370 -
- -

- - - -
-
- - -
- Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - first value
b - - -Number - - - - second value
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- magnitude of vector from (0,0) to (a,b) - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}
- - - -
- - - - -
- -

- - inner map(value, start1, stop1, start2, stop2, withinBoundsopt) → {Number} - - -
- jsboot/p5math.js, - line 402 -
- -

- - - -
-
- - -
- Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -Number - - - - - - - - - - the incoming value to be converted
start1 - - -Number - - - - - - - - - - lower bound of the value's current range
stop1 - - -Number - - - - - - - - - - upper bound of the value's current range
start2 - - -Number - - - - - - - - - - lower bound of the value's target range
stop2 - - -Number - - - - - - - - - - upper bound of the value's target range
withinBounds - - -Boolean - - - - - - <optional>
- - - - - - 		constrain the value to the newly mapped range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- remapped number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}
- - - -
- - - - -
- -

- - inner match(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 616 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);
- - - -
- - - - -
- -

- - inner matchAll(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 649 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- 2d Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);
- - - -
- - - - -
- -

- - inner max(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 448 -
- -

- - - -
-
- - -
- Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- maximum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner millis() → {Number} - - -
- jsboot/p5util.js, - line 1110 -
- -

- - - -
-
- - -
- Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the number of milliseconds since starting the program - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
- - - -
- - - - -
- -

- - inner min(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 486 -
- -

- - - -
-
- - -
- Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- minimum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner minute() → {Integer} - - -
- jsboot/p5util.js, - line 1096 -
- -

- - - -
-
- - -
- The minute() function returns the current minute as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current minute - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = minute();
text('Current minute: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner month() → {Integer} - - -
- jsboot/p5util.js, - line 1125 -
- -

- - - -
-
- - -
- The month() function returns the current month as a value from 1 - 12. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current month - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = month();
text('Current month: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner mouseClicked(eventopt) - - -
- jsboot/p5input.js, - line 422 -
- -

- - - -
-
- - -
- The mouseClicked() function is called once after a mouse button has been pressed and then released.

Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function mouseClicked() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseClicked() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseClicked(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseMoved(eventopt) - - -
- jsboot/p5input.js, - line 303 -
- -

- - - -
-
- - -
- The >mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move the mouse across the page
// to change its value

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function mouseMoved() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseMoved(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mousePressed(eventopt) - - -
- jsboot/p5input.js, - line 341 -
- -

- - - -
-
- - -
- The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mousePressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mousePressed(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseReleased(eventopt) - - -
- jsboot/p5input.js, - line 381 -
- -

- - - -
-
- - -
- The mouseReleased() function is called every time a mouse button is released.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseReleased() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseReleased(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner nf(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 692 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
left - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfc(num, rightopt) → {String} - - -
- jsboot/p5util.js, - line 789 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfp(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 853 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfs(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 901 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. The values for the digits, left, and right parameters should always be positive integers. (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner noCursor() - - -
- jsboot/p5.js, - line 408 -
- -

- - - -
-
- - -
- Hides the cursor from view. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}
- - - -
- - - - -
- -

- - inner noFill() - - -
- jsboot/p5color.js, - line 2031 -
- -

- - - -
-
- - -
- Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(15, 10, 55, 55);
noFill();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noFill();
  stroke(100, 100, 240);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner noise(x, yopt, zopt) → {Number} - - -
- jsboot/p5math.js, - line 969 -
- -

- - - -
-
- - -
- Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate in noise space
y - - -Number - - - - - - <optional>
- - - - - - 		y-coordinate in noise space
z - - -Number - - - - - - <optional>
- - - - - - 		z-coordinate in noise space
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- Perlin noise value (between 0 and 1) at specified coordinates - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}
- - - -
- - - - -
- -

- - inner noiseDetail(lod, falloff) - - -
- jsboot/p5math.js, - line 1113 -
- -

- - - -
-
- - -
- Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence.

By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise().

By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
lod - - -Number - - - - number of octaves to be used by the noise
falloff - - -Number - - - - falloff factor for each octave
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}
- - - -
- - - - -
- -

- - inner noLoop() - - -
- jsboot/p5.js, - line 271 -
- -

- - - -
-
- - -
- Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.

When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.

Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}
- - - -
- - - - -
- -

- - inner norm(value, start, stop) → {Number} - - -
- jsboot/p5math.js, - line 524 -
- -

- - - -
-
- - -
- Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - incoming value to be normalized
start - - -Number - - - - lower bound of the value's current range
stop - - -Number - - - - upper bound of the value's current range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- normalized number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}
- - - -
- - - - -
- -

- - inner noStroke() - - -
- jsboot/p5color.js, - line 2058 -
- -

- - - -
-
- - -
- Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noStroke();
  fill(240, 150, 150);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner pixelDensity(val) - - -
- jsboot/p5env.js, - line 267 -
- -

- - - -
-
- - -
- Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
val - - -Number - - - - whether or how much the sketch should scale
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  pixelDensity(1);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

function setup() {
  pixelDensity(3.0);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner point(x, y, zopt) - - -
- jsboot/p5shape.js, - line 189 -
- -

- - - -
-
- - -
- Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x-coordinate
y - - -Number - - - - - - - - - - the y-coordinate
z - - -Number - - - - - - <optional>
- - - - - - 		the z-coordinate (for WebGL mode)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
point(30, 20);
point(85, 20);
point(85, 75);
point(30, 75);
- - - -
- - - - -
- -

- - inner pop() - - -
- jsboot/p5.js, - line 631 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
translate(50, 0);
strokeWeight(10);
fill(204, 153, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner pow(n, e) → {Number} - - -
- jsboot/p5math.js, - line 570 -
- -

- - - -
-
- - -
- Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to Math.pow(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - base of the exponential expression
e - - -Number - - - - power by which to raise the base
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- n^e - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 45 -
- -

- - - -
-
- - -
- The println() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 26 -
- -

- - - -
-
- - -
- The print() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner push() - - -
- jsboot/p5.js, - line 580 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
translate(50, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner quad(x1, y1, x2, y2, x3, y3, x4, y4) - - -
- jsboot/p5shape.js, - line 211 -
- -

- - - -
-
- - -
- Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
x3 - - -Number - - - - the x-coordinate of the third point
y3 - - -Number - - - - the y-coordinate of the third point
x4 - - -Number - - - - the x-coordinate of the fourth point
y4 - - -Number - - - - the y-coordinate of the fourth point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
quad(38, 31, 86, 20, 69, 63, 30, 76);
- - - -
- - - - -
- -

- - inner radians(degrees) → {Number} - - -
- jsboot/p5math.js, - line 1402 -
- -

- - - -
-
- - -
- Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
degrees - - -Number - - - - the degree value to convert to radians
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians
- - - -
- - - - -
- -

- - inner random(minopt, maxopt) → {Number} - - -
- jsboot/p5math.js, - line 817 -
- -

- - - -
-
- - -
- Return a random floating-point number. Takes either 0, 1 or 2 arguments. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If one argument is given and it is an array, returns a random element from that array. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
min - - -Number - - - - - - <optional>
- - - - - - 		the lower bound (inclusive)
max - - -Number - - - - - - <optional>
- - - - - - 		the upper bound (exclusive)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word
- - - -
- - - - -
- -

- - inner randomGaussian(mean, sd) → {Number} - - -
- jsboot/p5math.js, - line 882 -
- -

- - - -
-
- - -
- Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned.

Takes either 0, 1 or 2 arguments.
If no args, returns a mean of 0 and standard deviation of 1.
If one arg, that arg is the mean (standard deviation is 1).
If two args, first is mean, second is standard deviation. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mean - - -Number - - - - the mean
sd - - -Number - - - - the standard deviation
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}
- - - -
- - - - -
- -

- - inner randomSeed(seed) - - -
- jsboot/p5math.js, - line 794 -
- -

- - - -
-
- - -
- Sets the seed value for random(). By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
seed - - -Number - - - - the seed value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}
- - - -
- - - - -
- -

- - inner rect(x, y, w, h) - - -
- jsboot/p5shape.js, - line 240 -
- -

- - - -
-
- - -
- Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the rectangle.
y - - -Number - - - - y-coordinate of the rectangle.
w - - -Number - - - - width of the rectangle.
h - - -Number - - - - height of the rectangle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a rectangle at location (30, 20) with a width and height of 55.
rect(30, 20, 55, 55);
- - - -
- - - - -
- -

- - inner rectMode(mode) - - -
- jsboot/p5shape.js, - line 568 -
- -

- - - -
-
- - -
- Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, CENTER, or RADIUS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rectMode(CORNER); // Default rectMode is CORNER
fill(255); // Set fill to white
rect(25, 25, 50, 50); // Draw white rect using CORNER mode

rectMode(CORNERS); // Set rectMode to CORNERS
fill(100); // Set fill to gray
rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode

rectMode(RADIUS); // Set rectMode to RADIUS
fill(255); // Set fill to white
rect(50, 50, 30, 30); // Draw white rect using RADIUS mode

rectMode(CENTER); // Set rectMode to CENTER
fill(100); // Set fill to gray
rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- - - -
- - - - -
- -

- - inner red(color) → {Number} - - -
- jsboot/p5color.js, - line 1644 -
- -

- - - -
-
- - -
- Extracts the red value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the red value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let redValue = red(c); // Get red in 'c'
print(redValue); // Print "255.0"
fill(redValue, 0, 0); // Use 'redValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle

colorMode(RGB, 255);
let c = color(127, 255, 0);
colorMode(RGB, 1);
let myColor = red(c);
print(myColor);
- - - -
- - - - -
- -

- - inner redraw(nopt) - - -
- jsboot/p5.js, - line 325 -
- -

- - - -
-
- - -
- Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.

In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).

The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop().

In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Integer - - - - - - <optional>
- - - - - - 		Redraw for n-times. The default value is 1.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}
- - - -
- - - - -
- -

- - inner resetMatrix() - - -
- jsboot/p5trans.js, - line 192 -
- -

- - - -
-
- - -
- Replaces the current matrix with the identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(50, 50);
applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
rect(0, 0, 20, 20);
// Note that the translate is also reset.
resetMatrix();
rect(0, 0, 20, 20);
- - - -
- - - - -
- -

- - inner reverse(list) → {Array} - - -
- jsboot/p5util.js, - line 148 -
- -

- - - -
-
- - -
- Reverses the order of an array, maps to Array.reverse() -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to reverse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the reversed list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}
- - - -
- - - - -
- -

- - inner rotate(angle) - - -
- jsboot/p5trans.js, - line 208 -
- -

- - - -
-
- - -
- Rotates a shape the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.

Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again.

Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle of rotation, specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 52, 52);
- - - -
- - - - -
- -

- - inner round(n) → {Integer} - - -
- jsboot/p5math.js, - line 598 -
- -

- - - -
-
- - -
- Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner saturation(color) → {Number} - - -
- jsboot/p5color.js, - line 1671 -
- -

- - - -
-
- - -
- Extracts the saturation value from a color or pixel array. Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the saturation value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = saturation(c); // Sets 'value' to 126
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner saveStrings(list, filename, extensionopt) - - -
- jsboot/p5.js, - line 436 -
- -

- - - -
-
- - -
- Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array.<String> - - - - - - - - - - string array to be written
filename - - -String - - - - - - - - - - filename for output
extension - - -String - - - - - - <optional>
- - - - - - 		the filename's extension
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let words = 'apple bear cat dog';

// .split() outputs an Array
let list = split(words, ' ');

function setup() {
  createCanvas(100, 100);
  background(200);
  text('click here to save', 10, 10, 70, 80);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    saveStrings(list, 'nouns.txt');
  }
}

// Saves the following to a file called 'nouns.txt':
//
// apple
// bear
// cat
// dog
- - - -
- - - - -
- -

- - inner scale(s, yopt) - - -
- jsboot/p5trans.js, - line 366 -
- -

- - - -
-
- - -
- Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.

Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.

Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
s - - -Number -| - -p5.Vector -| - -Array.<Number> - - - - - - - - - - percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given
y - - -Number - - - - - - <optional>
- - - - - - 		percent to scale the object in the y-axis
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

rect(30, 20, 50, 50);
scale(0.5, 1.3);
rect(30, 20, 50, 50);
- - - -
- - - - -
- -

- - inner scale(scales) - - -
- jsboot/p5trans.js, - line 396 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
scales - - -p5.Vector -| - -Array.<Number> - - - - per-axis percents to scale the object
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner second() → {Integer} - - -
- jsboot/p5util.js, - line 1138 -
- -

- - - -
-
- - -
- The second() function returns the current second as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current second - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var s = second();
text('Current second: \n' + s, 5, 50);
- - - -
- - - - -
- -

- - inner setAlpha(alpha) - - -
- jsboot/p5color.js, - line 595 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
alpha - - -Number - - - - the new alpha value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let squareColor;

function setup() {
  ellipseMode(CORNERS);
  strokeWeight(4);
  squareColor = color(100, 50, 150);
}

function draw() {
  background(255);

  noFill();
  stroke(0);
  ellipse(10, 10, width - 10, height - 10);

  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  fill(squareColor);
  noStroke();
  rect(13, 13, width - 26, height - 26);
}
- - - -
- - - - -
- -

- - inner setBlue(blue) - - -
- jsboot/p5color.js, - line 575 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
blue - - -Number - - - - the new blue value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setGreen(green) - - -
- jsboot/p5color.js, - line 555 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
green - - -Number - - - - the new green value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setRed(red) - - -
- jsboot/p5color.js, - line 535 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
red - - -Number - - - - the new red value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner shearX(angle) - - -
- jsboot/p5trans.js, - line 245 -
- -

- - - -
-
- - -
- Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shearY(angle) - - -
- jsboot/p5trans.js, - line 279 -
- -

- - - -
-
- - -
- Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shorten(list) → {Array} - - -
- jsboot/p5util.js, - line 167 -
- -

- - - -
-
- - -
- Decreases an array by one element and returns the shortened array, maps to Array.pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to shorten
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shortened Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}
- - - -
- - - - -
- -

- - inner shuffle(array, boolopt) → {Array} - - -
- jsboot/p5util.js, - line 188 -
- -

- - - -
-
- - -
- Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
array - - -Array - - - - - - - - - - Array to shuffle
bool - - -Boolean - - - - - - <optional>
- - - - - - 		modify passed array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shuffled Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}
- - - -
- - - - -
- -

- - inner sin(angle) → {Number} - - -
- jsboot/p5math.js, - line 1339 -
- -

- - - -
-
- - -
- Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the sine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner sort(list, countopt) → {Array} - - -
- jsboot/p5util.js, - line 228 -
- -

- - - -
-
- - -
- Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to sort
count - - -Integer - - - - - - <optional>
- - - - - - 		number of elements to sort, starting from 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the sorted list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}
- - - -
- - - - -
- -

- - inner splice(list, value, position) → {Array} - - -
- jsboot/p5util.js, - line 272 -
- -

- - - -
-
- - -
- Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to splice into
value - - -any - - - - value to be spliced in
position - - -Integer - - - - in the array from which to insert data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}
- - - -
- - - - -
- -

- - inner split(value, delim) → {Array.<String>} - - -
- jsboot/p5util.js, - line 965 -
- -

- - - -
-
- - -
- The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - the String to be split
delim - - -String - - - - the String used to separate the data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
- - - -
- - - - -
- -

- - inner splitTokens(value, delimopt) → {Array.<String>} - - -
- jsboot/p5util.js, - line 991 -
- -

- - - -
-
- - -
- The splitTokens() function splits a String at one or many character delimiters or "tokens." The delim parameter specifies the character or characters to be used as a boundary.

If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -String - - - - - - - - - - the String to be split
delim - - -String - - - - - - <optional>
- - - - - - 		list of individual Strings that will be used as separators
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
- - - -
- - - - -
- -

- - inner sq(n) → {Number} - - -
- jsboot/p5math.js, - line 631 -
- -

- - - -
-
- - -
- Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to square
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- squared number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner sqrt(n) → {Number} - - -
- jsboot/p5math.js, - line 672 -
- -

- - - -
-
- - -
- Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - non-negative number to square root
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- square root of number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner square(x, y, s) - - -
- jsboot/p5shape.js, - line 331 -
- -

- - - -
-
- - -
- Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the square.
y - - -Number - - - - y-coordinate of the square.
s - - -Number - - - - side size of the square.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
- - - -
- - - - -
- -

- - inner str(n) → {String} - - -
- jsboot/p5util.js, - line 398 -
- -

- - - -
-
- - -
- Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
- - - -
- - - - -
- -

- - inner stroke(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2170 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(value) - - -
- jsboot/p5color.js, - line 2165 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(color) - - -
- jsboot/p5color.js, - line 2182 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the stroke color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 2084 -
- -

- - - -
-
- - -
- Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the stroke color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
strokeWeight(4);
stroke(51);
rect(20, 20, 60, 60);

// R, G & B integer values
stroke(255, 204, 0);
strokeWeight(4);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
strokeWeight(4);
stroke(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
stroke('red');
strokeWeight(4);
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
stroke('#fae');
strokeWeight(4);
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
stroke('#222222');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGB notation
stroke('rgb(0,255,0)');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGBA notation
stroke('rgba(0,255,0,0.25)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGB notation
stroke('rgb(100%,0%,10%)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGBA notation
stroke('rgba(100%,0%,100%,0.5)');
strokeWeight(4);
rect(20, 20, 60, 60);

// p5 Color object
stroke(color(0, 0, 255));
strokeWeight(4);
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner stroke(values) - - -
- jsboot/p5color.js, - line 2176 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner strokeWeight(weight) - - -
- jsboot/p5shape.js, - line 810 -
- -

- - - -
-
- - -
- Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
weight - - -Number - - - - the weight (in pixels) of the stroke
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(1); // Default
line(20, 20, 80, 20);
strokeWeight(4); // Thicker
line(20, 40, 80, 40);
strokeWeight(10); // Beastly
line(20, 70, 80, 70);
- - - -
- - - - -
- -

- - inner subset(list, start, countopt) → {Array} - - -
- jsboot/p5util.js, - line 304 -
- -

- - - -
-
- - -
- Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to extract from
start - - -Integer - - - - - - - - - - position to begin
count - - -Integer - - - - - - <optional>
- - - - - - 		number of values to extract
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- Array of extracted elements - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}
- - - -
- - - - -
- -

- - inner tan(angle) → {Number} - - -
- jsboot/p5math.js, - line 1359 -
- -

- - - -
-
- - -
- Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the tangent of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner text(str, x, y) - - -
- jsboot/p5typo.js, - line 39 -
- -

- - - -
-
- - -
- Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.

The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.

The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String -| - -Object -| - -Array -| - -Number -| - -Boolean - - - - the alphanumeric symbols to be displayed
x - - -Number - - - - x-coordinate of text
y - - -Number - - - - y-coordinate of text
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}
- - - -
- - - - -
- -

- - inner textAlign(horizAlign, vertAlignopt) - - -
- jsboot/p5typo.js, - line 148 -
- -

- - - -
-
- - -
- Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
horizAlign - - -Constant - - - - - - - - - - horizontal alignment, either LEFT, CENTER, or RIGHT
vertAlign - - -Constant - - - - - - <optional>
- - - - - - 		vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);
- - - -
- - - - -
- -

- - inner textFont() → {Object} - - -
- jsboot/p5typo.js, - line 114 -
- -

- - - -
-
- - -
- Sets the current font that will be drawn with the text() function.

-
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- the current font - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}
- - - -
- - - - -
- -

- - inner textSize() → {Number} - - -
- jsboot/p5typo.js, - line 230 -
- -

- - - -
-
- - -
- Gets the current font size. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner textWidth(theText) → {Number} - - -
- jsboot/p5typo.js, - line 203 -
- -

- - - -
-
- - -
- Calculates and returns the width of any character or text string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
theText - - -String - - - - the String of characters to measure
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);
- - - -
- - - - -
- -

- - inner toString(formatopt) → {String} - - -
- jsboot/p5color.js, - line 341 -
- -

- - - -
-
- - -
- This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
format - - -String - - - - - - <optional>
- - - - - - 		How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- the formatted string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let myColor;
function setup() {
  createCanvas(200, 200);
  stroke(255);
  myColor = color(100, 100, 250);
  fill(myColor);
}

function draw() {
  rotate(HALF_PI);
  text(myColor.toString(), 0, -5);
  text(myColor.toString('#rrggbb'), 0, -30);
  text(myColor.toString('rgba%'), 0, -55);
}
- - - -
- - - - -
- -

- - inner translate(vector) - - -
- jsboot/p5trans.js, - line 347 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
vector - - -p5.Vector - - - - the vector to translate by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner translate(x, y, zopt) - - -
- jsboot/p5trans.js, - line 313 -
- -

- - - -
-
- - -
- Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.

Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - left/right translation
y - - -Number - - - - - - - - - - up/down translation
z - - -Number - - - - - - <optional>
- - - - - - 		forward/backward translation (webgl only)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(30, 20);
rect(0, 0, 55, 55);

rect(0, 0, 55, 55); // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55); // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55); // Draw rect at new 0,0

function draw() {
  background(200);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  translate(p5.Vector.fromAngle(millis() / 1000, 40));
  rect(0, 0, 20, 20);
}
- - - -
- - - - -
- -

- - inner triangle(x1, y1, x2, y2, x3, y3) - - -
- jsboot/p5shape.js, - line 356 -
- -

- - - -
-
- - -
- A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
x3 - - -Number - - - - x-coordinate of the third point
y3 - - -Number - - - - y-coordinate of the third point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
triangle(30, 75, 58, 20, 86, 75);
- - - -
- - - - -
- -

- - inner trim(str) → {String} - - -
- jsboot/p5util.js, - line 1042 -
- -

- - - -
-
- - -
- Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - a String to be trimmed
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- a trimmed String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);
- - - -
- - - - -
- -

- - inner unchar(n) → {Number} - - -
- jsboot/p5util.js, - line 508 -
- -

- - - -
-
- - -
- Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
- - - -
- - - - -
- -

- - inner unhex(n) → {Number} - - -
- jsboot/p5util.js, - line 569 -
- -

- - - -
-
- - -
- Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of hexadecimal value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
- - - -
- - - - -
- -

- - inner vertex(x, y) - - -
- jsboot/p5shape.js, - line 460 -
- -

- - - -
-
- - -
- All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the vertex
y - - -Number - - - - y-coordinate of the vertex
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(3);
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
- - - -
- - - - -
- -

- - inner year() → {Integer} - - -
- jsboot/p5util.js, - line 1151 -
- -

- - - -
-
- - -
- The year() returns the current year as an integer (2014, 2015, 2016, etc). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current year - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var y = year();
text('Current year: \n' + y, 5, 50);
- - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

p5compat

- - - - -
- -
- -
- - - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - -

Classes

- - -
- -
-

- Color -
- module:p5compat~Color -
-

-
- - -
- - - - - - - - - - -

Members

- -
- - -
-

- static ColorConversion - -
- jsboot/p5color.js, - line 41 -
- -

- - -
-
- -
- Conversions adapted from . In these functions, hue is always in the range [0, 1], just like all other components are in the range [0, 1]. 'Brightness' and 'value' are used interchangeably. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly displayHeight - -
- jsboot/p5env.js, - line 202 -
- -

- - -
-
- -
- System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly displayWidth - -
- jsboot/p5env.js, - line 189 -
- -

- - -
-
- -
- System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly focused - -
- jsboot/p5env.js, - line 109 -
- -

- - -
-
- -
- Confirms if the window a p5.js program is in is "focused," meaning that the sketch will accept mouse or keyboard input. This variable is "true" if the window is focused and "false" if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
focused - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// To demonstrate, put two windows side by side.
// Click on the window that the p5 sketch isn't in!
function draw() {
  background(200);
  noStroke();
  fill(0, 200, 0);
  ellipse(25, 25, 50, 50);

  if (!focused) {
    // or "if (focused === false)"
    stroke(200, 0, 0);
    line(0, 0, 100, 100);
    line(100, 0, 0, 100);
  }
}
- - -
- - - - -
-

- static, readonly frameCount - -
- jsboot/p5env.js, - line 83 -
- -

- - -
-
- -
- The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
frameCount - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
- - -
- - - - -
-

- static, readonly height - -
- jsboot/p5env.js, - line 238 -
- -

- - -
-
- -
- System variable that stores the height of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
height - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly key - -
- jsboot/p5input.js, - line 507 -
- -

- - -
-
- -
- The system variable key always contains the value of the most recent key on the keyboard that was typed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Click any key to display it!
// (Not Guaranteed to be Case Sensitive)
function setup() {
  fill(245, 123, 158);
  textSize(50);
}

function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}
- - -
- - - - -
-

- static, readonly keyCode - -
- jsboot/p5input.js, - line 532 -
- -

- - -
-
- -
- The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyCode - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let fillVal = 126;
function draw() {
  fill(fillVal);
  rect(25, 25, 50, 50);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    fillVal = 255;
  } else if (keyCode === DOWN_ARROW) {
    fillVal = 0;
  }
  return false; // prevent default
}
- - -
- - - - -
-

- static, readonly keyIsPressed - -
- jsboot/p5input.js, - line 486 -
- -

- - -
-
- -
- The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
- - -
- - - - -
-

- static, readonly mouseButton - -
- jsboot/p5input.js, - line 278 -
- -

- - -
-
- -
- Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseButton - - -Constant - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      ellipse(50, 50, 50, 50);
    }
    if (mouseButton === RIGHT) {
      rect(25, 25, 50, 50);
    }
    if (mouseButton === CENTER) {
      triangle(23, 75, 50, 20, 78, 75);
    }
  }

  print(mouseButton);
}
- - -
- - - - -
-

- static, readonly mouseIsPressed - -
- jsboot/p5input.js, - line 301 -
- -

- - -
-
- -
- The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }

  print(mouseIsPressed);
}
- - -
- - - - -
-

- static, readonly mouseX - -
- jsboot/p5input.js, - line 53 -
- -

- - -
-
- -
- The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
- - -
- - - - -
-

- static, readonly mouseY - -
- jsboot/p5input.js, - line 71 -
- -

- - -
-
- -
- The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
- - -
- - - - -
-

- static, readonly pmouseX - -
- jsboot/p5input.js, - line 95 -
- -

- - -
-
- -
- The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas to leave a trail
function setup() {
  //slow down the frameRate to make it more visible
  frameRate(10);
}

function draw() {
  background(244, 248, 252);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + ' -> ' + mouseX);
}
- - -
- - - - -
-

- static, readonly pmouseY - -
- jsboot/p5input.js, - line 118 -
- -

- - -
-
- -
- The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);
  //draw a square only if the mouse is not moving
  if (mouseY === pmouseY && mouseX === pmouseX) {
    rect(20, 20, 60, 60);
  }

  print(pmouseY + ' -> ' + mouseY);
}
- - -
- - - - -
-

- static, readonly pwinMouseX - -
- jsboot/p5input.js, - line 213 -
- -

- - -
-
- -
- The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current x position is the horizontal mouse speed
  let speed = abs(winMouseX - pwinMouseX);
  //change the size of the circle
  //according to the horizontal speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly pwinMouseY - -
- jsboot/p5input.js, - line 247 -
- -

- - -
-
- -
- The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current y position is the vertical mouse speed
  let speed = abs(winMouseY - pwinMouseY);
  //change the size of the circle
  //according to the vertical speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly width - -
- jsboot/p5env.js, - line 230 -
- -

- - -
-
- -
- System variable that stores the width of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
width - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly windowHeight - -
- jsboot/p5env.js, - line 222 -
- -

- - -
-
- -
- System variable that stores the height of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly windowWidth - -
- jsboot/p5env.js, - line 212 -
- -

- - -
-
- -
- System variable that stores the width of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly winMouseX - -
- jsboot/p5input.js, - line 149 -
- -

- - -
-
- -
- The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the horizontal mouse position
  //relative to the window
  myCanvas.position(winMouseX + 1, windowHeight / 2);

  //the y of the square is relative to the canvas
  rect(20, mouseY, 60, 60);
}
- - -
- - - - -
-

- static, readonly winMouseY - -
- jsboot/p5input.js, - line 180 -
- -

- - -
-
- -
- The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the vertical mouse position
  //relative to the window
  myCanvas.position(windowWidth / 2, winMouseY + 1);

  //the x of the square is relative to the canvas
  rect(mouseX, 20, 60, 60);
}
- - -
- - - - -
-

- inner colorPatterns - -
- jsboot/p5color.js, - line 888 -
- -

- - -
-
- -
- Full color string patterns. The capture groups are necessary. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner namedColors - -
- jsboot/p5color.js, - line 722 -
- -

- - -
-
- -
- CSS named colors. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner WHITESPACE - -
- jsboot/p5color.js, - line 880 -
- -

- - -
-
- -
- These regular expressions are used to build up the patterns for matching viable CSS color strings: fragmenting the regexes in this way increases the legibility and comprehensibility of the code. Note that RGB values of .9 are not parsed by IE, but are supported here for color string consistency. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - static _cloneEnv() - - -
- jsboot/p5.js, - line 67 -
- -

- - - -
-
- - -
- deep copy the current environment. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _ensureMatrix() - - -
- jsboot/p5trans.js, - line 34 -
- -

- - - -
-
- - -
- make sure we have a 2x2 identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _PolyLine() - - -
- jsboot/p5shape.js, - line 550 -
- -

- - - -
-
- - -
- draw polygon by using lines. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transX(x, y) → {number} - - -
- jsboot/p5trans.js, - line 67 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated x coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transY(x, y) → {number} - - -
- jsboot/p5trans.js, - line 82 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated y coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static createCanvas() - - -
- jsboot/p5.js, - line 201 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static exit() - - -
- jsboot/p5.js, - line 231 -
- -

- - - -
-
- - -
- exit the script after the current Loop(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noSmooth() - - -
- jsboot/p5.js, - line 211 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noTint() - - -
- jsboot/p5.js, - line 226 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static settings() - - -
- jsboot/p5.js, - line 216 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static size() - - -
- jsboot/p5.js, - line 196 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static smooth() - - -
- jsboot/p5.js, - line 206 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static tint() - - -
- jsboot/p5.js, - line 221 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner abs(n) → {Number} - - -
- jsboot/p5math.js, - line 59 -
- -

- - - -
-
- - -
- Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to compute
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- absolute value of given number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
- - - -
- - - - -
- -

- - inner acos(value) → {Number} - - -
- jsboot/p5math.js, - line 1211 -
- -

- - - -
-
- - -
- The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc cosine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc cosine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);
- - - -
- - - - -
- -

- - inner alpha(color) → {Number} - - -
- jsboot/p5color.js, - line 1271 -
- -

- - - -
-
- - -
- Extracts the alpha value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the alpha value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
let c = color(0, 126, 255, 102);
fill(c);
rect(15, 15, 35, 70);
let value = alpha(c); // Sets 'value' to 102
fill(value);
rect(50, 15, 35, 70);
- - - -
- - - - -
- -

- - inner angleMode(mode) - - -
- jsboot/p5math.js, - line 1423 -
- -

- - - -
-
- - -
- Sets the current mode of p5 to given mode. Default mode is RADIANS. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either RADIANS or DEGREES
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}
- - - -
- - - - -
- -

- - inner append(array, value) → {Array} - - -
- jsboot/p5util.js, - line 30 -
- -

- - - -
-
- - -
- Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
array - - -Array - - - - Array to append
value - - -any - - - - to be added to the Array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the array that was appended to - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}
- - - -
- - - - -
- -

- - inner applyMatrix(a, b, c, d, e, f) - - -
- jsboot/p5trans.js, - line 90 -
- -

- - - -
-
- - -
- Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia. The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form: > The transformation matrix used when applyMatrix is called -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
b - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
c - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
d - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
e - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
f - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  // Equivalent to translate(x, y);
  applyMatrix(1, 0, 0, 1, 40 + step, 50);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  translate(50, 50);
  // Equivalent to scale(x, y);
  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, 0, TWO_PI);
  var cos_a = cos(angle);
  var sin_a = sin(angle);
  background(200);
  translate(50, 50);
  // Equivalent to rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, -PI / 4, PI / 4);
  background(200);
  translate(50, 50);
  // equivalent to shearX(angle);
  var shear_factor = 1 / tan(PI / 2 - angle);
  applyMatrix(1, 0, shear_factor, 1, 0, 0);
  rect(0, 0, 50, 50);
}
- - - -
- - - - -
- -

- - inner arc(x, y, w, h, start, stop, modeopt) - - -
- jsboot/p5shape.js, - line 33 -
- -

- - - -
-
- - -
- Draw an arc to the screen. If called with only x, y, w, h, start, and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.

The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the arc's ellipse
y - - -Number - - - - - - - - - - y-coordinate of the arc's ellipse
w - - -Number - - - - - - - - - - width of the arc's ellipse by default
h - - -Number - - - - - - - - - - height of the arc's ellipse by default
start - - -Number - - - - - - - - - - angle to start the arc, specified in radians
stop - - -Number - - - - - - - - - - angle to stop the arc, specified in radians
mode - - -Constant - - - - - - <optional>
- - - - - - 		optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
arc(50, 55, 50, 50, 0, HALF_PI);
noFill();
arc(50, 55, 60, 60, HALF_PI, PI);
arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
- - - -
- - - - -
- -

- - inner arrayCopy(src, srcPosition, dst, dstPosition, length) - - -
- jsboot/p5util.js, - line 52 -
- -

- - - -
-
- - -
- Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().

The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).

Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
src - - -Array - - - - the source Array
srcPosition - - -Integer - - - - starting position in the source Array
dst - - -Array - - - - the destination Array
dstPosition - - -Integer - - - - starting position in the destination Array
length - - -Integer - - - - number of Array elements to be copied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - -
Deprecated:
  • Yes
- - - - - - - - - - - - - - - -
- - - -
Example
- - 
var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]
- - - -
- - - - -
- -

- - inner asin(value) → {Number} - - -
- jsboot/p5math.js, - line 1237 -
- -

- - - -
-
- - -
- The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc sine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc sine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);
- - - -
- - - - -
- -

- - inner atan(value) → {Number} - - -
- jsboot/p5math.js, - line 1264 -
- -

- - - -
-
- - -
- The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc tangent is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);
- - - -
- - - - -
- -

- - inner atan2(y, x) → {Number} - - -
- jsboot/p5math.js, - line 1291 -
- -

- - - -
-
- - -
- Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor.

Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
y - - -Number - - - - y-coordinate of the point
x - - -Number - - - - x-coordinate of the point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given point - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}
- - - -
- - - - -
- -

- - inner background(color) - - -
- jsboot/p5color.js, - line 1702 -
- -

- - - -
-
- - -
- The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A Color object can also be provided to set the background color.

An Image can also be provided to set the background image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - any value created by the color() function
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
background(51);

// R, G & B integer values
background(255, 204, 0);

// H, S & B integer values
colorMode(HSB);
background(255, 204, 100);

// Named SVG/CSS color string
background('red');

// three-digit hexadecimal RGB notation
background('#fae');

// six-digit hexadecimal RGB notation
background('#222222');

// integer RGB notation
background('rgb(0,255,0)');

// integer RGBA notation
background('rgba(0,255,0, 0.25)');

// percentage RGB notation
background('rgb(100%,0%,10%)');

// percentage RGBA notation
background('rgba(100%,0%,100%,0.5)');

// p5 Color object
background(color(0, 0, 255));
- - - -
- - - - -
- -

- - inner background(colorstring, aopt) - - -
- jsboot/p5color.js, - line 1760 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
colorstring - - -String - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex
a - - -Number - - - - - - <optional>
- - - - - - 		opacity of the background relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(gray, aopt) - - -
- jsboot/p5color.js, - line 1769 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - specifies a value between white and black
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(v1, v2, v3, aopt) - - -
- jsboot/p5color.js, - line 1775 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value (depending on the current color mode)
v2 - - -Number - - - - - - - - - - green or saturation value (depending on the current color mode)
v3 - - -Number - - - - - - - - - - blue or brightness value (depending on the current color mode)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(values) - - -
- jsboot/p5color.js, - line 1786 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(bitmap, aopt) - - -
- jsboot/p5color.js, - line 1792 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
bitmap - - -Bitmap - - - - - - - - - - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner beginShape(kindopt) - - -
- jsboot/p5shape.js, - line 379 -
- -

- - - -
-
- - -
- Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.

The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.

Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
kind - - -Constant - - - - - - <optional>
- - - - - - 		either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

beginShape(LINES);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();

beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
- - - -
- - - - -
- -

- - inner blue(color) → {Number} - - -
- jsboot/p5color.js, - line 1291 -
- -

- - - -
-
- - -
- Extracts the blue value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the blue value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(175, 100, 220); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let blueValue = blue(c); // Get blue in 'c'
print(blueValue); // Prints "220.0"
fill(0, 0, blueValue); // Use 'blueValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner boolean(n) → {Boolean} - - -
- jsboot/p5util.js, - line 422 -
- -

- - - -
-
- - -
- Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
- - - -
- - - - -
- -

- - inner brightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1312 -
- -

- - - -
-
- - -
- Extracts the HSB brightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the brightness value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = brightness(c); // Sets 'value' to 255
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner byte(n) → {Number} - - -
- jsboot/p5util.js, - line 452 -
- -

- - - -
-
- - -
- Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- byte representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]
- - - -
- - - - -
- -

- - inner ceil(n) → {Integer} - - -
- jsboot/p5math.js, - line 77 -
- -

- - - -
-
- - -
- Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round up
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded up number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner char(n) → {String} - - -
- jsboot/p5util.js, - line 481 -
- -

- - - -
-
- - -
- Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
- - - -
- - - - -
- -

- - inner circle(x, y, d) - - -
- jsboot/p5shape.js, - line 133 -
- -

- - - -
-
- - -
- Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the centre of the circle.
y - - -Number - - - - y-coordinate of the centre of the circle.
d - - -Number - - - - diameter of the circle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a circle at location (30, 30) with a diameter of 20.
circle(30, 30, 20);
- - - -
- - - - -
- -

- - inner clear() - - -
- jsboot/p5color.js, - line 1813 -
- -

- - - -
-
- - -
- Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
  clear();
}
- - - -
- - - - -
- -

- - inner color(color) → {Color} - - -
- jsboot/p5color.js, - line 1472 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(value) → {Color} - - -
- jsboot/p5color.js, - line 1461 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(v1, v2, v3, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1449 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(values) → {Color} - - -
- jsboot/p5color.js, - line 1466 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(gray, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1333 -
- -

- - - -
-
- - -
- Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.

Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - number specifying value between white and black.
alpha - - -Number - - - - - - <optional>
- - - - - - 		alpha value relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- resulting color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(30, 20, 55, 55); // Draw rectangle

let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
ellipse(25, 25, 80, 80); // Draw left circle

// Using only one value with color()
// generates a grayscale value.
c = color(65); // Update 'c' with grayscale value
fill(c); // Use updated 'c' as fill color
ellipse(75, 75, 80, 80); // Draw right circle

// Named SVG & CSS colors may be used,
let c = color('magenta');
fill(c); // Use 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(20, 20, 60, 60); // Draw rectangle

// as can hex color codes:
noStroke(); // Don't draw a stroke around shapes
let c = color('#0f0');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('#00ff00');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// RGB and RGBA color strings are also supported:
// these all set to the same color (solid blue)
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('rgb(0,0,255)');
fill(c); // Use 'c' as fill color
rect(10, 10, 35, 35); // Draw rectangle

c = color('rgb(0%, 0%, 100%)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 35, 35); // Draw rectangle

c = color('rgba(0, 0, 255, 1)');
fill(c); // Use updated 'c' as fill color
rect(10, 55, 35, 35); // Draw rectangle

c = color('rgba(0%, 0%, 100%, 1)');
fill(c); // Use updated 'c' as fill color
rect(55, 55, 35, 35); // Draw rectangle

// HSL color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsl(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsla(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// HSB color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsb(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsba(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

let c; // Declare color 'c'
noStroke(); // Don't draw a stroke around shapes

// If no colorMode is specified, then the
// default of RGB with scale of 0-255 is used.
c = color(50, 55, 100); // Create a color for 'c'
fill(c); // Use color variable 'c' as fill color
rect(0, 10, 45, 80); // Draw left rect

colorMode(HSB, 100); // Use HSB with scale of 0-100
c = color(50, 55, 100); // Update 'c' with new color
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw right rect
- - - -
- - - - -
- -

- - inner colorMode(mode, maxopt) - - -
- jsboot/p5color.js, - line 1841 -
- -

- - - -
-
- - -
- colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.

Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - - either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
max - - -Number - - - - - - <optional>
- - - - - - 		range for all values
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(RGB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 0);
    point(i, j);
  }
}

noStroke();
colorMode(HSB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 100);
    point(i, j);
  }
}

colorMode(RGB, 255);
let c = color(127, 255, 0);

colorMode(RGB, 1);
let myColor = c._getRed();
text(myColor, 10, 10, 80, 80);

noFill();
colorMode(RGB, 255, 255, 255, 1);
background(255);

strokeWeight(4);
stroke(255, 0, 10, 0.3);
ellipse(40, 40, 50, 50);
ellipse(50, 50, 40, 40);
- - - -
- - - - -
- -

- - inner colorMode(mode, max1, max2, max3, maxAopt) - - -
- jsboot/p5color.js, - line 1894 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - -
max1 - - -Number - - - - - - - - - - range for the red or hue depending on the current color mode
max2 - - -Number - - - - - - - - - - range for the green or saturation depending on the current color mode
max3 - - -Number - - - - - - - - - - range for the blue or brightness/lightness depending on the current color mode
maxA - - -Number - - - - - - <optional>
- - - - - - 		range for the alpha
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner concat(a, b) → {Array} - - -
- jsboot/p5util.js, - line 120 -
- -

- - - -
-
- - -
- Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Array - - - - first Array to concatenate
b - - -Array - - - - second Array to concatenate
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- concatenated array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}
- - - -
- - - - -
- -

- - inner constrain(n, low, high) → {Number} - - -
- jsboot/p5math.js, - line 111 -
- -

- - - -
-
- - -
- Constrains a value between a minimum and maximum value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to constrain
low - - -Number - - - - minimum limit
high - - -Number - - - - maximum limit
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- constrained number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}
- - - -
- - - - -
- -

- - inner cos(angle) → {Number} - - -
- jsboot/p5math.js, - line 1319 -
- -

- - - -
-
- - -
- Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the cosine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner createNumberDict(key, value) → {NumberDict} - - -
- jsboot/p5util.js, - line 1191 -
- -

- - - -
-
- - -
- Creates a new instance of NumberDict using the key-value pair or object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number - - - -
value - - -Number - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -NumberDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}
- - - -
- - - - -
- -

- - inner createStringDict(key, value) → {StringDict} - - -
- jsboot/p5util.js, - line 1168 -
- -

- - - -
-
- - -
- Creates a new instance of p5.StringDict using the key-value pair or the object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
value - - -String - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StringDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}
- - - -
- - - - -
- -

- - inner createVector(xopt, yopt, zopt) → {p5.Vector} - - -
- jsboot/p5math.js, - line 26 -
- -

- - - -
-
- - -
- Creates a new PVector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -p5.Vector - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}
- - - -
- - - - -
- -

- - inner day() → {Integer} - - -
- jsboot/p5util.js, - line 1068 -
- -

- - - -
-
- - -
- The day() function returns the current day as a value from 1 - 31. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current day - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var d = day();
text('Current day: \n' + d, 5, 50);
- - - -
- - - - -
- -

- - inner degrees(radians) → {Number} - - -
- jsboot/p5math.js, - line 1380 -
- -

- - - -
-
- - -
- Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
radians - - -Number - - - - the radians value to convert to degrees
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees
- - - -
- - - - -
- -

- - inner displayDensity() → {Number} - - -
- jsboot/p5.js, - line 385 -
- -

- - - -
-
- - -
- Returns the pixel density of the current display the sketch is running on (always 1 for DOjS). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current pixel density of the display - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner dist(x1, y1, x2, y2) → {Number} - - -
- jsboot/p5math.js, - line 149 -
- -

- - - -
-
- - -
- Calculates the distance between two points. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- distance between the two points - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}
- - - -
- - - - -
- -

- - inner ellipse(x, y, w, hopt) - - -
- jsboot/p5shape.js, - line 77 -
- -

- - - -
-
- - -
- Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The origin may be changed with the ellipseMode() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the ellipse.
y - - -Number - - - - - - - - - - y-coordinate of the ellipse.
w - - -Number - - - - - - - - - - width of the ellipse.
h - - -Number - - - - - - <optional>
- - - - - - 		height of the ellipse.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(56, 46, 55, 55);
- - - -
- - - - -
- -

- - inner ellipseMode(mode) - - -
- jsboot/p5shape.js, - line 623 -
- -

- - - -
-
- - -
- Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are interpreted.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CENTER, RADIUS, CORNER, or CORNERS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipseMode(RADIUS); // Set ellipseMode to RADIUS
fill(255); // Set fill to white
ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER
fill(100); // Set fill to gray
ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode

ellipseMode(CORNER); // Set ellipseMode is CORNER
fill(255); // Set fill to white
ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode

ellipseMode(CORNERS); // Set ellipseMode to CORNERS
fill(100); // Set fill to gray
ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- - - -
- - - - -
- -

- - inner endShape(modeopt) - - -
- jsboot/p5shape.js, - line 482 -
- -

- - - -
-
- - -
- The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - <optional>
- - - - - - 		use CLOSE to close the shape
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noFill();

beginShape();
vertex(20, 20);
vertex(45, 20);
vertex(45, 80);
endShape(CLOSE);

beginShape();
vertex(50, 20);
vertex(75, 20);
vertex(75, 80);
endShape();

TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
- - - -
- - - - -
- -

- - inner exp(n) → {Number} - - -
- jsboot/p5math.js, - line 202 -
- -

- - - -
-
- - -
- Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - exponent to raise
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- e^n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}
- - - -
- - - - -
- -

- - inner fill(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2007 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(value) - - -
- jsboot/p5color.js, - line 2002 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(values) - - -
- jsboot/p5color.js, - line 2013 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(color) - - -
- jsboot/p5color.js, - line 2019 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the fill color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 1934 -
- -

- - - -
-
- - -
- Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the fill color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
fill(51);
rect(20, 20, 60, 60);

// R, G & B integer values
fill(255, 204, 0);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
fill(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
fill('red');
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
fill('#fae');
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
fill('#222222');
rect(20, 20, 60, 60);

// integer RGB notation
fill('rgb(0,255,0)');
rect(20, 20, 60, 60);

// integer RGBA notation
fill('rgba(0,255,0, 0.25)');
rect(20, 20, 60, 60);

// percentage RGB notation
fill('rgb(100%,0%,10%)');
rect(20, 20, 60, 60);

// percentage RGBA notation
fill('rgba(100%,0%,100%,0.5)');
rect(20, 20, 60, 60);

// p5 Color object
fill(color(0, 0, 255));
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner float(str) → {Number} - - -
- jsboot/p5util.js, - line 341 -
- -

- - - -
-
- - -
- Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN. When an array of values is passed in, then an array of floats of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - float string to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- floating point representation of string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);
- - - -
- - - - -
- -

- - inner floor(n) → {Integer} - - -
- jsboot/p5math.js, - line 246 -
- -

- - - -
-
- - -
- Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round down
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded down number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner frameRate(fps) - - -
- jsboot/p5env.js, - line 111 -
- -

- - - -
-
- - -
- Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations This is the same as setFrameRate(val).

Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().

Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fps - - -Number - - - - number of frames to be displayed every second
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rectX = 0;
let fr = 30; //starting FPS
let clr;

function setup() {
  background(200);
  frameRate(fr); // Attempt to refresh at starting FPS
  clr = color(255, 0, 0);
}

function draw() {
  background(200);
  rectX = rectX += 1; // Move Rectangle

  if (rectX >= width) {
    // If you go off screen.
    if (fr === 30) {
      clr = color(0, 0, 255);
      fr = 10;
      frameRate(fr); // make frameRate 10 FPS
    } else {
      clr = color(255, 0, 0);
      fr = 30;
      frameRate(fr); // make frameRate 30 FPS
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}
- - - -
- - - - -
- -

- - inner fullscreen(valopt) → {Boolean} - - -
- jsboot/p5env.js, - line 240 -
- -

- - - -
-
- - -
- If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
val - - -Boolean - - - - - - <optional>
- - - - - - 		whether the sketch should be in fullscreen mode or not
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- current fullscreen state - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clicking in the box toggles fullscreen on and off.
function setup() {
  background(200);
}
function mousePressed() {
  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}
- - - -
- - - - -
- -

- - inner getFrameRate() → {Number} - - -
- jsboot/p5env.js, - line 168 -
- -

- - - -
-
- - -
- Returns the current framerate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current frameRate - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner getURL() → {String} - - -
- jsboot/p5env.js, - line 294 -
- -

- - - -
-
- - -
- Gets the current URL. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- url - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let url;
let x = 100;

function setup() {
  fill(0);
  noStroke();
  url = getURL();
}

function draw() {
  background(200);
  text(url, x, height / 2);
  x--;
}
- - - -
- - - - -
- -

- - inner getURLParams() → {Object} - - -
- jsboot/p5env.js, - line 334 -
- -

- - - -
-
- - -
- Gets the current URL params as an Object. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- URL params - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Example: http://p5js.org?year=2014&month=May&day=15

function setup() {
  let params = getURLParams();
  text(params.day, 10, 20);
  text(params.month, 10, 40);
  text(params.year, 10, 60);
}
- - - -
- - - - -
- -

- - inner getURLPath() → {Array.<String>} - - -
- jsboot/p5env.js, - line 318 -
- -

- - - -
-
- - -
- Gets the current URL path as an array. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- path components - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let urlPath = getURLPath();
  for (let i = 0; i < urlPath.length; i++) {
    text(urlPath[i], 10, i * 20 + 20);
  }
}
- - - -
- - - - -
- -

- - inner green(color) → {Number} - - -
- jsboot/p5color.js, - line 1487 -
- -

- - - -
-
- - -
- Extracts the green value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the green value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(20, 75, 200); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let greenValue = green(c); // Get green in 'c'
print(greenValue); // Print "75.0"
fill(0, greenValue, 0); // Use 'greenValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner hex(n, digitsopt) → {String} - - -
- jsboot/p5util.js, - line 530 -
- -

- - - -
-
- - -
- Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Number - - - - - - - - - - value to parse
digits - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- hexadecimal string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- - - -
- - - - -
- -

- - inner hour() → {Integer} - - -
- jsboot/p5util.js, - line 1082 -
- -

- - - -
-
- - -
- The hour() function returns the current hour as a value from 0 - 23. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current hour - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var h = hour();
text('Current hour:\n' + h, 5, 50);
- - - -
- - - - -
- -

- - inner hue(color) → {Number} - - -
- jsboot/p5color.js, - line 1509 -
- -

- - - -
-
- - -
- Extracts the hue value from a color or pixel array. Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the hue - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = hue(c); // Sets 'value' to "0"
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner image(img, x, y) - - -
- jsboot/p5shape.js, - line 709 -
- -

- - - -
-
- - -
- Draw an image to the p5.js canvas. This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image. This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
img - - -Bitmap - - - - the image to display
x - - -Number - - - - the x-coordinate of the top-left corner of the image
y - - -Number - - - - the y-coordinate of the top-left corner of the image
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner imageMode(mode) - - -
- jsboot/p5shape.js, - line 759 -
- -

- - - -
-
- - -
- Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.

imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.

imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, or CENTER
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNER);
  image(img, 10, 10, 50, 50);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNERS);
  image(img, 10, 10, 90, 40);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CENTER);
  image(img, 50, 50, 80, 80);
}
- - - -
- - - - -
- -

- - inner int(n, radixopt) → {Number} - - -
- jsboot/p5util.js, - line 365 -
- -

- - - -
-
- - -
- Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -String -| - -Boolean -| - -Number - - - - - - - - - - value to parse
radix - - -Integer - - - - - - <optional>
- - - - - - 		the radix to convert to (default: 10)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
- - - -
- - - - -
- -

- - inner join(list, separator) → {String} - - -
- jsboot/p5util.js, - line 595 -
- -

- - - -
-
- - -
- Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - array of Strings to be joined
separator - - -String - - - - String to be placed between each item
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- joined String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);
- - - -
- - - - -
- -

- - inner keyPressed() - - -
- jsboot/p5input.js, - line 534 -
- -

- - - -
-
- - -
- The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    value = 255;
  } else if (keyCode === RIGHT_ARROW) {
    value = 0;
  }
}
- - - -
- - - - -
- -

- - inner keyReleased() - - -
- jsboot/p5input.js, - line 568 -
- -

- - - -
-
- - -
- The keyReleased() function is called once every time a key is released. See key and keyCode for more information.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
  return false; // prevent any default behavior
}
- - - -
- - - - -
- -

- - inner keyTyped() - - -
- jsboot/p5input.js, - line 592 -
- -

- - - -
-
- - -
- The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. The most recent key pressed will be stored in the key variable.

Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyTyped() {
  if (key === 'a') {
    value = 255;
  } else if (key === 'b') {
    value = 0;
  }
  // uncomment to prevent any default behavior
  // return false;
}
- - - -
- - - - -
- -

- - inner lerp(start, stop, amt) → {Number} - - -
- jsboot/p5math.js, - line 279 -
- -

- - - -
-
- - -
- Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
start - - -Number - - - - first value
stop - - -Number - - - - second value
amt - - -Number - - - - number
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- lerped value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}
- - - -
- - - - -
- -

- - inner lerpColor(c1, c2, amt) → {Color} - - -
- jsboot/p5color.js, - line 1536 -
- -

- - - -
-
- - -
- Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.

The way that colours are interpolated depends on the current color mode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c1 - - -Color - - - - interpolate from this color
c2 - - -Color - - - - interpolate to this color
amt - - -Number - - - - number between 0 and 1
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- interpolated color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
colorMode(RGB);
stroke(255);
background(51);
let from = color(218, 165, 32);
let to = color(72, 61, 139);
colorMode(RGB); // Try changing to HSB.
let interA = lerpColor(from, to, 0.33);
let interB = lerpColor(from, to, 0.66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
- - - -
- - - - -
- -

- - inner lightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1623 -
- -

- - - -
-
- - -
- Extracts the HSL lightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the lightness - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSL);
let c = color(156, 100, 50, 1);
fill(c);
rect(15, 20, 35, 60);
let value = lightness(c); // Sets 'value' to 50
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner line(x1, y1, x2, y2) - - -
- jsboot/p5shape.js, - line 152 -
- -

- - - -
-
- - -
- Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
line(30, 20, 85, 75);

line(30, 20, 85, 20);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
line(85, 75, 30, 75);
- - - -
- - - - -
- -

- - inner loadBytes(file) → {Array.<number>} - - -
- jsboot/p5.js, - line 543 -
- -

- - - -
-
- - -
- This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
file - - -string - - - - name of the file or URL to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<number> - - - - - -- an object whose 'bytes' property will be the loaded buffer - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let data;

function preload() {
  data = loadBytes('assets/mammals.xml');
}

function setup() {
  for (let i = 0; i < 5; i++) {
    console.log(data.bytes[i].toString(16));
  }
}
- - - -
- - - - -
- -

- - inner loadFont(path) → {Font} - - -
- jsboot/p5typo.js, - line 26 -
- -

- - - -
-
- - -
- Loads a GRX font file (.FNT) from a file Font Object.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Font - - - - - -- Font object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner loadImage(path) → {Bitmap} - - -
- jsboot/p5shape.js, - line 681 -
- -

- - - -
-
- - -
- Loads an image from a path and creates a Image from it.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - Path of the image to be loaded
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Bitmap - - - - - -- the Image object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner loadStrings(filename) → {Array.<String>} - - -
- jsboot/p5.js, - line 486 -
- -

- - - -
-
- - -
- Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.

Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.

This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let result;
function preload() {
  result = loadStrings('assets/test.txt');
}
function setup() {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}

function setup() {
  loadStrings('assets/test.txt', pickString);
}

function pickString(result) {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}
- - - -
- - - - -
- -

- - inner log(n) → {Number} - - -
- jsboot/p5math.js, - line 320 -
- -

- - - -
-
- - -
- Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number greater than 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- natural logarithm of n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}
- - - -
- - - - -
- -

- - inner loop() - - -
- jsboot/p5.js, - line 235 -
- -

- - - -
-
- - -
- By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop(). Avoid calling loop() from inside setup(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}
- - - -
- - - - -
- -

- - inner mag(a, b) → {Number} - - -
- jsboot/p5math.js, - line 370 -
- -

- - - -
-
- - -
- Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - first value
b - - -Number - - - - second value
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- magnitude of vector from (0,0) to (a,b) - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}
- - - -
- - - - -
- -

- - inner map(value, start1, stop1, start2, stop2, withinBoundsopt) → {Number} - - -
- jsboot/p5math.js, - line 402 -
- -

- - - -
-
- - -
- Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -Number - - - - - - - - - - the incoming value to be converted
start1 - - -Number - - - - - - - - - - lower bound of the value's current range
stop1 - - -Number - - - - - - - - - - upper bound of the value's current range
start2 - - -Number - - - - - - - - - - lower bound of the value's target range
stop2 - - -Number - - - - - - - - - - upper bound of the value's target range
withinBounds - - -Boolean - - - - - - <optional>
- - - - - - 		constrain the value to the newly mapped range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- remapped number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}
- - - -
- - - - -
- -

- - inner match(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 616 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);
- - - -
- - - - -
- -

- - inner matchAll(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 649 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- 2d Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);
- - - -
- - - - -
- -

- - inner max(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 448 -
- -

- - - -
-
- - -
- Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- maximum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner millis() → {Number} - - -
- jsboot/p5util.js, - line 1110 -
- -

- - - -
-
- - -
- Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the number of milliseconds since starting the program - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
- - - -
- - - - -
- -

- - inner min(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 486 -
- -

- - - -
-
- - -
- Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- minimum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner minute() → {Integer} - - -
- jsboot/p5util.js, - line 1096 -
- -

- - - -
-
- - -
- The minute() function returns the current minute as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current minute - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = minute();
text('Current minute: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner month() → {Integer} - - -
- jsboot/p5util.js, - line 1125 -
- -

- - - -
-
- - -
- The month() function returns the current month as a value from 1 - 12. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current month - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = month();
text('Current month: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner mouseClicked(eventopt) - - -
- jsboot/p5input.js, - line 422 -
- -

- - - -
-
- - -
- The mouseClicked() function is called once after a mouse button has been pressed and then released.

Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function mouseClicked() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseClicked() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseClicked(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseMoved(eventopt) - - -
- jsboot/p5input.js, - line 303 -
- -

- - - -
-
- - -
- The >mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move the mouse across the page
// to change its value

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function mouseMoved() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseMoved(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mousePressed(eventopt) - - -
- jsboot/p5input.js, - line 341 -
- -

- - - -
-
- - -
- The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mousePressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mousePressed(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseReleased(eventopt) - - -
- jsboot/p5input.js, - line 381 -
- -

- - - -
-
- - -
- The mouseReleased() function is called every time a mouse button is released.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseReleased() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseReleased(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner nf(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 692 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
left - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfc(num, rightopt) → {String} - - -
- jsboot/p5util.js, - line 789 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfp(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 853 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfs(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 901 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. The values for the digits, left, and right parameters should always be positive integers. (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner noCursor() - - -
- jsboot/p5.js, - line 408 -
- -

- - - -
-
- - -
- Hides the cursor from view. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}
- - - -
- - - - -
- -

- - inner noFill() - - -
- jsboot/p5color.js, - line 2031 -
- -

- - - -
-
- - -
- Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(15, 10, 55, 55);
noFill();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noFill();
  stroke(100, 100, 240);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner noise(x, yopt, zopt) → {Number} - - -
- jsboot/p5math.js, - line 969 -
- -

- - - -
-
- - -
- Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate in noise space
y - - -Number - - - - - - <optional>
- - - - - - 		y-coordinate in noise space
z - - -Number - - - - - - <optional>
- - - - - - 		z-coordinate in noise space
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- Perlin noise value (between 0 and 1) at specified coordinates - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}
- - - -
- - - - -
- -

- - inner noiseDetail(lod, falloff) - - -
- jsboot/p5math.js, - line 1113 -
- -

- - - -
-
- - -
- Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence.

By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise().

By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
lod - - -Number - - - - number of octaves to be used by the noise
falloff - - -Number - - - - falloff factor for each octave
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}
- - - -
- - - - -
- -

- - inner noLoop() - - -
- jsboot/p5.js, - line 271 -
- -

- - - -
-
- - -
- Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.

When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.

Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}
- - - -
- - - - -
- -

- - inner norm(value, start, stop) → {Number} - - -
- jsboot/p5math.js, - line 524 -
- -

- - - -
-
- - -
- Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - incoming value to be normalized
start - - -Number - - - - lower bound of the value's current range
stop - - -Number - - - - upper bound of the value's current range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- normalized number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}
- - - -
- - - - -
- -

- - inner noStroke() - - -
- jsboot/p5color.js, - line 2058 -
- -

- - - -
-
- - -
- Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noStroke();
  fill(240, 150, 150);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner pixelDensity(val) - - -
- jsboot/p5env.js, - line 267 -
- -

- - - -
-
- - -
- Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
val - - -Number - - - - whether or how much the sketch should scale
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  pixelDensity(1);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

function setup() {
  pixelDensity(3.0);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner point(x, y, zopt) - - -
- jsboot/p5shape.js, - line 189 -
- -

- - - -
-
- - -
- Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x-coordinate
y - - -Number - - - - - - - - - - the y-coordinate
z - - -Number - - - - - - <optional>
- - - - - - 		the z-coordinate (for WebGL mode)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
point(30, 20);
point(85, 20);
point(85, 75);
point(30, 75);
- - - -
- - - - -
- -

- - inner pop() - - -
- jsboot/p5.js, - line 631 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
translate(50, 0);
strokeWeight(10);
fill(204, 153, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner pow(n, e) → {Number} - - -
- jsboot/p5math.js, - line 570 -
- -

- - - -
-
- - -
- Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to Math.pow(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - base of the exponential expression
e - - -Number - - - - power by which to raise the base
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- n^e - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 45 -
- -

- - - -
-
- - -
- The println() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 26 -
- -

- - - -
-
- - -
- The print() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner push() - - -
- jsboot/p5.js, - line 580 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
translate(50, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner quad(x1, y1, x2, y2, x3, y3, x4, y4) - - -
- jsboot/p5shape.js, - line 211 -
- -

- - - -
-
- - -
- Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
x3 - - -Number - - - - the x-coordinate of the third point
y3 - - -Number - - - - the y-coordinate of the third point
x4 - - -Number - - - - the x-coordinate of the fourth point
y4 - - -Number - - - - the y-coordinate of the fourth point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
quad(38, 31, 86, 20, 69, 63, 30, 76);
- - - -
- - - - -
- -

- - inner radians(degrees) → {Number} - - -
- jsboot/p5math.js, - line 1402 -
- -

- - - -
-
- - -
- Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
degrees - - -Number - - - - the degree value to convert to radians
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians
- - - -
- - - - -
- -

- - inner random(minopt, maxopt) → {Number} - - -
- jsboot/p5math.js, - line 817 -
- -

- - - -
-
- - -
- Return a random floating-point number. Takes either 0, 1 or 2 arguments. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If one argument is given and it is an array, returns a random element from that array. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
min - - -Number - - - - - - <optional>
- - - - - - 		the lower bound (inclusive)
max - - -Number - - - - - - <optional>
- - - - - - 		the upper bound (exclusive)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word
- - - -
- - - - -
- -

- - inner randomGaussian(mean, sd) → {Number} - - -
- jsboot/p5math.js, - line 882 -
- -

- - - -
-
- - -
- Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned.

Takes either 0, 1 or 2 arguments.
If no args, returns a mean of 0 and standard deviation of 1.
If one arg, that arg is the mean (standard deviation is 1).
If two args, first is mean, second is standard deviation. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mean - - -Number - - - - the mean
sd - - -Number - - - - the standard deviation
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}
- - - -
- - - - -
- -

- - inner randomSeed(seed) - - -
- jsboot/p5math.js, - line 794 -
- -

- - - -
-
- - -
- Sets the seed value for random(). By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
seed - - -Number - - - - the seed value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}
- - - -
- - - - -
- -

- - inner rect(x, y, w, h) - - -
- jsboot/p5shape.js, - line 240 -
- -

- - - -
-
- - -
- Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the rectangle.
y - - -Number - - - - y-coordinate of the rectangle.
w - - -Number - - - - width of the rectangle.
h - - -Number - - - - height of the rectangle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a rectangle at location (30, 20) with a width and height of 55.
rect(30, 20, 55, 55);
- - - -
- - - - -
- -

- - inner rectMode(mode) - - -
- jsboot/p5shape.js, - line 568 -
- -

- - - -
-
- - -
- Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, CENTER, or RADIUS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rectMode(CORNER); // Default rectMode is CORNER
fill(255); // Set fill to white
rect(25, 25, 50, 50); // Draw white rect using CORNER mode

rectMode(CORNERS); // Set rectMode to CORNERS
fill(100); // Set fill to gray
rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode

rectMode(RADIUS); // Set rectMode to RADIUS
fill(255); // Set fill to white
rect(50, 50, 30, 30); // Draw white rect using RADIUS mode

rectMode(CENTER); // Set rectMode to CENTER
fill(100); // Set fill to gray
rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- - - -
- - - - -
- -

- - inner red(color) → {Number} - - -
- jsboot/p5color.js, - line 1644 -
- -

- - - -
-
- - -
- Extracts the red value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the red value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let redValue = red(c); // Get red in 'c'
print(redValue); // Print "255.0"
fill(redValue, 0, 0); // Use 'redValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle

colorMode(RGB, 255);
let c = color(127, 255, 0);
colorMode(RGB, 1);
let myColor = red(c);
print(myColor);
- - - -
- - - - -
- -

- - inner redraw(nopt) - - -
- jsboot/p5.js, - line 325 -
- -

- - - -
-
- - -
- Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.

In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).

The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop().

In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Integer - - - - - - <optional>
- - - - - - 		Redraw for n-times. The default value is 1.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}
- - - -
- - - - -
- -

- - inner resetMatrix() - - -
- jsboot/p5trans.js, - line 192 -
- -

- - - -
-
- - -
- Replaces the current matrix with the identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(50, 50);
applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
rect(0, 0, 20, 20);
// Note that the translate is also reset.
resetMatrix();
rect(0, 0, 20, 20);
- - - -
- - - - -
- -

- - inner reverse(list) → {Array} - - -
- jsboot/p5util.js, - line 148 -
- -

- - - -
-
- - -
- Reverses the order of an array, maps to Array.reverse() -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to reverse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the reversed list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}
- - - -
- - - - -
- -

- - inner rotate(angle) - - -
- jsboot/p5trans.js, - line 208 -
- -

- - - -
-
- - -
- Rotates a shape the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.

Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again.

Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle of rotation, specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 52, 52);
- - - -
- - - - -
- -

- - inner round(n) → {Integer} - - -
- jsboot/p5math.js, - line 598 -
- -

- - - -
-
- - -
- Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner saturation(color) → {Number} - - -
- jsboot/p5color.js, - line 1671 -
- -

- - - -
-
- - -
- Extracts the saturation value from a color or pixel array. Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the saturation value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = saturation(c); // Sets 'value' to 126
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner saveStrings(list, filename, extensionopt) - - -
- jsboot/p5.js, - line 436 -
- -

- - - -
-
- - -
- Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array.<String> - - - - - - - - - - string array to be written
filename - - -String - - - - - - - - - - filename for output
extension - - -String - - - - - - <optional>
- - - - - - 		the filename's extension
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let words = 'apple bear cat dog';

// .split() outputs an Array
let list = split(words, ' ');

function setup() {
  createCanvas(100, 100);
  background(200);
  text('click here to save', 10, 10, 70, 80);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    saveStrings(list, 'nouns.txt');
  }
}

// Saves the following to a file called 'nouns.txt':
//
// apple
// bear
// cat
// dog
- - - -
- - - - -
- -

- - inner scale(s, yopt) - - -
- jsboot/p5trans.js, - line 366 -
- -

- - - -
-
- - -
- Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.

Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.

Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
s - - -Number -| - -p5.Vector -| - -Array.<Number> - - - - - - - - - - percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given
y - - -Number - - - - - - <optional>
- - - - - - 		percent to scale the object in the y-axis
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

rect(30, 20, 50, 50);
scale(0.5, 1.3);
rect(30, 20, 50, 50);
- - - -
- - - - -
- -

- - inner scale(scales) - - -
- jsboot/p5trans.js, - line 396 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
scales - - -p5.Vector -| - -Array.<Number> - - - - per-axis percents to scale the object
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner second() → {Integer} - - -
- jsboot/p5util.js, - line 1138 -
- -

- - - -
-
- - -
- The second() function returns the current second as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current second - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var s = second();
text('Current second: \n' + s, 5, 50);
- - - -
- - - - -
- -

- - inner setAlpha(alpha) - - -
- jsboot/p5color.js, - line 595 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
alpha - - -Number - - - - the new alpha value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let squareColor;

function setup() {
  ellipseMode(CORNERS);
  strokeWeight(4);
  squareColor = color(100, 50, 150);
}

function draw() {
  background(255);

  noFill();
  stroke(0);
  ellipse(10, 10, width - 10, height - 10);

  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  fill(squareColor);
  noStroke();
  rect(13, 13, width - 26, height - 26);
}
- - - -
- - - - -
- -

- - inner setBlue(blue) - - -
- jsboot/p5color.js, - line 575 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
blue - - -Number - - - - the new blue value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setGreen(green) - - -
- jsboot/p5color.js, - line 555 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
green - - -Number - - - - the new green value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setRed(red) - - -
- jsboot/p5color.js, - line 535 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
red - - -Number - - - - the new red value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner shearX(angle) - - -
- jsboot/p5trans.js, - line 245 -
- -

- - - -
-
- - -
- Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shearY(angle) - - -
- jsboot/p5trans.js, - line 279 -
- -

- - - -
-
- - -
- Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shorten(list) → {Array} - - -
- jsboot/p5util.js, - line 167 -
- -

- - - -
-
- - -
- Decreases an array by one element and returns the shortened array, maps to Array.pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to shorten
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shortened Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}
- - - -
- - - - -
- -

- - inner shuffle(array, boolopt) → {Array} - - -
- jsboot/p5util.js, - line 188 -
- -

- - - -
-
- - -
- Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
array - - -Array - - - - - - - - - - Array to shuffle
bool - - -Boolean - - - - - - <optional>
- - - - - - 		modify passed array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shuffled Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}
- - - -
- - - - -
- -

- - inner sin(angle) → {Number} - - -
- jsboot/p5math.js, - line 1339 -
- -

- - - -
-
- - -
- Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the sine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner sort(list, countopt) → {Array} - - -
- jsboot/p5util.js, - line 228 -
- -

- - - -
-
- - -
- Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to sort
count - - -Integer - - - - - - <optional>
- - - - - - 		number of elements to sort, starting from 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the sorted list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}
- - - -
- - - - -
- -

- - inner splice(list, value, position) → {Array} - - -
- jsboot/p5util.js, - line 272 -
- -

- - - -
-
- - -
- Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to splice into
value - - -any - - - - value to be spliced in
position - - -Integer - - - - in the array from which to insert data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}
- - - -
- - - - -
- -

- - inner split(value, delim) → {Array.<String>} - - -
- jsboot/p5util.js, - line 965 -
- -

- - - -
-
- - -
- The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - the String to be split
delim - - -String - - - - the String used to separate the data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
- - - -
- - - - -
- -

- - inner splitTokens(value, delimopt) → {Array.<String>} - - -
- jsboot/p5util.js, - line 991 -
- -

- - - -
-
- - -
- The splitTokens() function splits a String at one or many character delimiters or "tokens." The delim parameter specifies the character or characters to be used as a boundary.

If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -String - - - - - - - - - - the String to be split
delim - - -String - - - - - - <optional>
- - - - - - 		list of individual Strings that will be used as separators
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
- - - -
- - - - -
- -

- - inner sq(n) → {Number} - - -
- jsboot/p5math.js, - line 631 -
- -

- - - -
-
- - -
- Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to square
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- squared number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner sqrt(n) → {Number} - - -
- jsboot/p5math.js, - line 672 -
- -

- - - -
-
- - -
- Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - non-negative number to square root
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- square root of number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner square(x, y, s) - - -
- jsboot/p5shape.js, - line 331 -
- -

- - - -
-
- - -
- Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the square.
y - - -Number - - - - y-coordinate of the square.
s - - -Number - - - - side size of the square.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
- - - -
- - - - -
- -

- - inner str(n) → {String} - - -
- jsboot/p5util.js, - line 398 -
- -

- - - -
-
- - -
- Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
- - - -
- - - - -
- -

- - inner stroke(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2170 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(value) - - -
- jsboot/p5color.js, - line 2165 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(color) - - -
- jsboot/p5color.js, - line 2182 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the stroke color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 2084 -
- -

- - - -
-
- - -
- Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the stroke color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
strokeWeight(4);
stroke(51);
rect(20, 20, 60, 60);

// R, G & B integer values
stroke(255, 204, 0);
strokeWeight(4);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
strokeWeight(4);
stroke(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
stroke('red');
strokeWeight(4);
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
stroke('#fae');
strokeWeight(4);
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
stroke('#222222');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGB notation
stroke('rgb(0,255,0)');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGBA notation
stroke('rgba(0,255,0,0.25)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGB notation
stroke('rgb(100%,0%,10%)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGBA notation
stroke('rgba(100%,0%,100%,0.5)');
strokeWeight(4);
rect(20, 20, 60, 60);

// p5 Color object
stroke(color(0, 0, 255));
strokeWeight(4);
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner stroke(values) - - -
- jsboot/p5color.js, - line 2176 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner strokeWeight(weight) - - -
- jsboot/p5shape.js, - line 810 -
- -

- - - -
-
- - -
- Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
weight - - -Number - - - - the weight (in pixels) of the stroke
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(1); // Default
line(20, 20, 80, 20);
strokeWeight(4); // Thicker
line(20, 40, 80, 40);
strokeWeight(10); // Beastly
line(20, 70, 80, 70);
- - - -
- - - - -
- -

- - inner subset(list, start, countopt) → {Array} - - -
- jsboot/p5util.js, - line 304 -
- -

- - - -
-
- - -
- Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to extract from
start - - -Integer - - - - - - - - - - position to begin
count - - -Integer - - - - - - <optional>
- - - - - - 		number of values to extract
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- Array of extracted elements - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}
- - - -
- - - - -
- -

- - inner tan(angle) → {Number} - - -
- jsboot/p5math.js, - line 1359 -
- -

- - - -
-
- - -
- Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the tangent of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner text(str, x, y) - - -
- jsboot/p5typo.js, - line 39 -
- -

- - - -
-
- - -
- Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.

The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.

The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String -| - -Object -| - -Array -| - -Number -| - -Boolean - - - - the alphanumeric symbols to be displayed
x - - -Number - - - - x-coordinate of text
y - - -Number - - - - y-coordinate of text
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}
- - - -
- - - - -
- -

- - inner textAlign(horizAlign, vertAlignopt) - - -
- jsboot/p5typo.js, - line 148 -
- -

- - - -
-
- - -
- Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
horizAlign - - -Constant - - - - - - - - - - horizontal alignment, either LEFT, CENTER, or RIGHT
vertAlign - - -Constant - - - - - - <optional>
- - - - - - 		vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);
- - - -
- - - - -
- -

- - inner textFont() → {Object} - - -
- jsboot/p5typo.js, - line 114 -
- -

- - - -
-
- - -
- Sets the current font that will be drawn with the text() function.

-
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- the current font - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}
- - - -
- - - - -
- -

- - inner textSize() → {Number} - - -
- jsboot/p5typo.js, - line 230 -
- -

- - - -
-
- - -
- Gets the current font size. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner textWidth(theText) → {Number} - - -
- jsboot/p5typo.js, - line 203 -
- -

- - - -
-
- - -
- Calculates and returns the width of any character or text string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
theText - - -String - - - - the String of characters to measure
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);
- - - -
- - - - -
- -

- - inner toString(formatopt) → {String} - - -
- jsboot/p5color.js, - line 341 -
- -

- - - -
-
- - -
- This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
format - - -String - - - - - - <optional>
- - - - - - 		How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- the formatted string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let myColor;
function setup() {
  createCanvas(200, 200);
  stroke(255);
  myColor = color(100, 100, 250);
  fill(myColor);
}

function draw() {
  rotate(HALF_PI);
  text(myColor.toString(), 0, -5);
  text(myColor.toString('#rrggbb'), 0, -30);
  text(myColor.toString('rgba%'), 0, -55);
}
- - - -
- - - - -
- -

- - inner translate(vector) - - -
- jsboot/p5trans.js, - line 347 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
vector - - -p5.Vector - - - - the vector to translate by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner translate(x, y, zopt) - - -
- jsboot/p5trans.js, - line 313 -
- -

- - - -
-
- - -
- Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.

Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - left/right translation
y - - -Number - - - - - - - - - - up/down translation
z - - -Number - - - - - - <optional>
- - - - - - 		forward/backward translation (webgl only)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(30, 20);
rect(0, 0, 55, 55);

rect(0, 0, 55, 55); // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55); // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55); // Draw rect at new 0,0

function draw() {
  background(200);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  translate(p5.Vector.fromAngle(millis() / 1000, 40));
  rect(0, 0, 20, 20);
}
- - - -
- - - - -
- -

- - inner triangle(x1, y1, x2, y2, x3, y3) - - -
- jsboot/p5shape.js, - line 356 -
- -

- - - -
-
- - -
- A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
x3 - - -Number - - - - x-coordinate of the third point
y3 - - -Number - - - - y-coordinate of the third point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
triangle(30, 75, 58, 20, 86, 75);
- - - -
- - - - -
- -

- - inner trim(str) → {String} - - -
- jsboot/p5util.js, - line 1042 -
- -

- - - -
-
- - -
- Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - a String to be trimmed
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- a trimmed String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);
- - - -
- - - - -
- -

- - inner unchar(n) → {Number} - - -
- jsboot/p5util.js, - line 508 -
- -

- - - -
-
- - -
- Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
- - - -
- - - - -
- -

- - inner unhex(n) → {Number} - - -
- jsboot/p5util.js, - line 569 -
- -

- - - -
-
- - -
- Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of hexadecimal value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
- - - -
- - - - -
- -

- - inner vertex(x, y) - - -
- jsboot/p5shape.js, - line 460 -
- -

- - - -
-
- - -
- All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the vertex
y - - -Number - - - - y-coordinate of the vertex
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(3);
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
- - - -
- - - - -
- -

- - inner year() → {Integer} - - -
- jsboot/p5util.js, - line 1151 -
- -

- - - -
-
- - -
- The year() returns the current year as an integer (2014, 2015, 2016, etc). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current year - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var y = year();
text('Current year: \n' + y, 5, 50);
- - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

p5compat

- - - - -
- -
- -
- - - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - -

Classes

- - -
- -
-

- Color -
- module:p5compat~Color -
-

-
- - -
- - - - - - - - - - -

Members

- -
- - -
-

- static ColorConversion - -
- jsboot/p5color.js, - line 41 -
- -

- - -
-
- -
- Conversions adapted from . In these functions, hue is always in the range [0, 1], just like all other components are in the range [0, 1]. 'Brightness' and 'value' are used interchangeably. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly displayHeight - -
- jsboot/p5env.js, - line 202 -
- -

- - -
-
- -
- System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly displayWidth - -
- jsboot/p5env.js, - line 189 -
- -

- - -
-
- -
- System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly focused - -
- jsboot/p5env.js, - line 109 -
- -

- - -
-
- -
- Confirms if the window a p5.js program is in is "focused," meaning that the sketch will accept mouse or keyboard input. This variable is "true" if the window is focused and "false" if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
focused - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// To demonstrate, put two windows side by side.
// Click on the window that the p5 sketch isn't in!
function draw() {
  background(200);
  noStroke();
  fill(0, 200, 0);
  ellipse(25, 25, 50, 50);

  if (!focused) {
    // or "if (focused === false)"
    stroke(200, 0, 0);
    line(0, 0, 100, 100);
    line(100, 0, 0, 100);
  }
}
- - -
- - - - -
-

- static, readonly frameCount - -
- jsboot/p5env.js, - line 83 -
- -

- - -
-
- -
- The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
frameCount - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
- - -
- - - - -
-

- static, readonly height - -
- jsboot/p5env.js, - line 238 -
- -

- - -
-
- -
- System variable that stores the height of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
height - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly key - -
- jsboot/p5input.js, - line 507 -
- -

- - -
-
- -
- The system variable key always contains the value of the most recent key on the keyboard that was typed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Click any key to display it!
// (Not Guaranteed to be Case Sensitive)
function setup() {
  fill(245, 123, 158);
  textSize(50);
}

function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}
- - -
- - - - -
-

- static, readonly keyCode - -
- jsboot/p5input.js, - line 532 -
- -

- - -
-
- -
- The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyCode - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let fillVal = 126;
function draw() {
  fill(fillVal);
  rect(25, 25, 50, 50);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    fillVal = 255;
  } else if (keyCode === DOWN_ARROW) {
    fillVal = 0;
  }
  return false; // prevent default
}
- - -
- - - - -
-

- static, readonly keyIsPressed - -
- jsboot/p5input.js, - line 486 -
- -

- - -
-
- -
- The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
- - -
- - - - -
-

- static, readonly mouseButton - -
- jsboot/p5input.js, - line 278 -
- -

- - -
-
- -
- Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseButton - - -Constant - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      ellipse(50, 50, 50, 50);
    }
    if (mouseButton === RIGHT) {
      rect(25, 25, 50, 50);
    }
    if (mouseButton === CENTER) {
      triangle(23, 75, 50, 20, 78, 75);
    }
  }

  print(mouseButton);
}
- - -
- - - - -
-

- static, readonly mouseIsPressed - -
- jsboot/p5input.js, - line 301 -
- -

- - -
-
- -
- The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }

  print(mouseIsPressed);
}
- - -
- - - - -
-

- static, readonly mouseX - -
- jsboot/p5input.js, - line 53 -
- -

- - -
-
- -
- The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
- - -
- - - - -
-

- static, readonly mouseY - -
- jsboot/p5input.js, - line 71 -
- -

- - -
-
- -
- The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
- - -
- - - - -
-

- static, readonly pmouseX - -
- jsboot/p5input.js, - line 95 -
- -

- - -
-
- -
- The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas to leave a trail
function setup() {
  //slow down the frameRate to make it more visible
  frameRate(10);
}

function draw() {
  background(244, 248, 252);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + ' -> ' + mouseX);
}
- - -
- - - - -
-

- static, readonly pmouseY - -
- jsboot/p5input.js, - line 118 -
- -

- - -
-
- -
- The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);
  //draw a square only if the mouse is not moving
  if (mouseY === pmouseY && mouseX === pmouseX) {
    rect(20, 20, 60, 60);
  }

  print(pmouseY + ' -> ' + mouseY);
}
- - -
- - - - -
-

- static, readonly pwinMouseX - -
- jsboot/p5input.js, - line 213 -
- -

- - -
-
- -
- The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current x position is the horizontal mouse speed
  let speed = abs(winMouseX - pwinMouseX);
  //change the size of the circle
  //according to the horizontal speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly pwinMouseY - -
- jsboot/p5input.js, - line 247 -
- -

- - -
-
- -
- The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current y position is the vertical mouse speed
  let speed = abs(winMouseY - pwinMouseY);
  //change the size of the circle
  //according to the vertical speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly width - -
- jsboot/p5env.js, - line 230 -
- -

- - -
-
- -
- System variable that stores the width of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
width - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly windowHeight - -
- jsboot/p5env.js, - line 222 -
- -

- - -
-
- -
- System variable that stores the height of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly windowWidth - -
- jsboot/p5env.js, - line 212 -
- -

- - -
-
- -
- System variable that stores the width of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly winMouseX - -
- jsboot/p5input.js, - line 149 -
- -

- - -
-
- -
- The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the horizontal mouse position
  //relative to the window
  myCanvas.position(winMouseX + 1, windowHeight / 2);

  //the y of the square is relative to the canvas
  rect(20, mouseY, 60, 60);
}
- - -
- - - - -
-

- static, readonly winMouseY - -
- jsboot/p5input.js, - line 180 -
- -

- - -
-
- -
- The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the vertical mouse position
  //relative to the window
  myCanvas.position(windowWidth / 2, winMouseY + 1);

  //the x of the square is relative to the canvas
  rect(mouseX, 20, 60, 60);
}
- - -
- - - - -
-

- inner colorPatterns - -
- jsboot/p5color.js, - line 888 -
- -

- - -
-
- -
- Full color string patterns. The capture groups are necessary. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner namedColors - -
- jsboot/p5color.js, - line 722 -
- -

- - -
-
- -
- CSS named colors. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner WHITESPACE - -
- jsboot/p5color.js, - line 880 -
- -

- - -
-
- -
- These regular expressions are used to build up the patterns for matching viable CSS color strings: fragmenting the regexes in this way increases the legibility and comprehensibility of the code. Note that RGB values of .9 are not parsed by IE, but are supported here for color string consistency. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - static _cloneEnv() - - -
- jsboot/p5.js, - line 67 -
- -

- - - -
-
- - -
- deep copy the current environment. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _ensureMatrix() - - -
- jsboot/p5trans.js, - line 34 -
- -

- - - -
-
- - -
- make sure we have a 2x2 identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _PolyLine() - - -
- jsboot/p5shape.js, - line 550 -
- -

- - - -
-
- - -
- draw polygon by using lines. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transX(x, y) → {number} - - -
- jsboot/p5trans.js, - line 67 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated x coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transY(x, y) → {number} - - -
- jsboot/p5trans.js, - line 82 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated y coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static createCanvas() - - -
- jsboot/p5.js, - line 201 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static exit() - - -
- jsboot/p5.js, - line 231 -
- -

- - - -
-
- - -
- exit the script after the current Loop(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noSmooth() - - -
- jsboot/p5.js, - line 211 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noTint() - - -
- jsboot/p5.js, - line 226 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static settings() - - -
- jsboot/p5.js, - line 216 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static size() - - -
- jsboot/p5.js, - line 196 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static smooth() - - -
- jsboot/p5.js, - line 206 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static tint() - - -
- jsboot/p5.js, - line 221 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner abs(n) → {Number} - - -
- jsboot/p5math.js, - line 59 -
- -

- - - -
-
- - -
- Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to compute
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- absolute value of given number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
- - - -
- - - - -
- -

- - inner acos(value) → {Number} - - -
- jsboot/p5math.js, - line 1211 -
- -

- - - -
-
- - -
- The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc cosine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc cosine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);
- - - -
- - - - -
- -

- - inner alpha(color) → {Number} - - -
- jsboot/p5color.js, - line 1271 -
- -

- - - -
-
- - -
- Extracts the alpha value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the alpha value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
let c = color(0, 126, 255, 102);
fill(c);
rect(15, 15, 35, 70);
let value = alpha(c); // Sets 'value' to 102
fill(value);
rect(50, 15, 35, 70);
- - - -
- - - - -
- -

- - inner angleMode(mode) - - -
- jsboot/p5math.js, - line 1423 -
- -

- - - -
-
- - -
- Sets the current mode of p5 to given mode. Default mode is RADIANS. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either RADIANS or DEGREES
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}
- - - -
- - - - -
- -

- - inner append(array, value) → {Array} - - -
- jsboot/p5util.js, - line 30 -
- -

- - - -
-
- - -
- Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
array - - -Array - - - - Array to append
value - - -any - - - - to be added to the Array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the array that was appended to - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}
- - - -
- - - - -
- -

- - inner applyMatrix(a, b, c, d, e, f) - - -
- jsboot/p5trans.js, - line 90 -
- -

- - - -
-
- - -
- Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia. The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form: > The transformation matrix used when applyMatrix is called -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
b - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
c - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
d - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
e - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
f - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  // Equivalent to translate(x, y);
  applyMatrix(1, 0, 0, 1, 40 + step, 50);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  translate(50, 50);
  // Equivalent to scale(x, y);
  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, 0, TWO_PI);
  var cos_a = cos(angle);
  var sin_a = sin(angle);
  background(200);
  translate(50, 50);
  // Equivalent to rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, -PI / 4, PI / 4);
  background(200);
  translate(50, 50);
  // equivalent to shearX(angle);
  var shear_factor = 1 / tan(PI / 2 - angle);
  applyMatrix(1, 0, shear_factor, 1, 0, 0);
  rect(0, 0, 50, 50);
}
- - - -
- - - - -
- -

- - inner arc(x, y, w, h, start, stop, modeopt) - - -
- jsboot/p5shape.js, - line 33 -
- -

- - - -
-
- - -
- Draw an arc to the screen. If called with only x, y, w, h, start, and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.

The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the arc's ellipse
y - - -Number - - - - - - - - - - y-coordinate of the arc's ellipse
w - - -Number - - - - - - - - - - width of the arc's ellipse by default
h - - -Number - - - - - - - - - - height of the arc's ellipse by default
start - - -Number - - - - - - - - - - angle to start the arc, specified in radians
stop - - -Number - - - - - - - - - - angle to stop the arc, specified in radians
mode - - -Constant - - - - - - <optional>
- - - - - - 		optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
arc(50, 55, 50, 50, 0, HALF_PI);
noFill();
arc(50, 55, 60, 60, HALF_PI, PI);
arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
- - - -
- - - - -
- -

- - inner arrayCopy(src, srcPosition, dst, dstPosition, length) - - -
- jsboot/p5util.js, - line 52 -
- -

- - - -
-
- - -
- Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().

The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).

Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
src - - -Array - - - - the source Array
srcPosition - - -Integer - - - - starting position in the source Array
dst - - -Array - - - - the destination Array
dstPosition - - -Integer - - - - starting position in the destination Array
length - - -Integer - - - - number of Array elements to be copied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - -
Deprecated:
  • Yes
- - - - - - - - - - - - - - - -
- - - -
Example
- - 
var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]
- - - -
- - - - -
- -

- - inner asin(value) → {Number} - - -
- jsboot/p5math.js, - line 1237 -
- -

- - - -
-
- - -
- The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc sine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc sine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);
- - - -
- - - - -
- -

- - inner atan(value) → {Number} - - -
- jsboot/p5math.js, - line 1264 -
- -

- - - -
-
- - -
- The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc tangent is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);
- - - -
- - - - -
- -

- - inner atan2(y, x) → {Number} - - -
- jsboot/p5math.js, - line 1291 -
- -

- - - -
-
- - -
- Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor.

Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
y - - -Number - - - - y-coordinate of the point
x - - -Number - - - - x-coordinate of the point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given point - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}
- - - -
- - - - -
- -

- - inner background(color) - - -
- jsboot/p5color.js, - line 1702 -
- -

- - - -
-
- - -
- The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A Color object can also be provided to set the background color.

An Image can also be provided to set the background image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - any value created by the color() function
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
background(51);

// R, G & B integer values
background(255, 204, 0);

// H, S & B integer values
colorMode(HSB);
background(255, 204, 100);

// Named SVG/CSS color string
background('red');

// three-digit hexadecimal RGB notation
background('#fae');

// six-digit hexadecimal RGB notation
background('#222222');

// integer RGB notation
background('rgb(0,255,0)');

// integer RGBA notation
background('rgba(0,255,0, 0.25)');

// percentage RGB notation
background('rgb(100%,0%,10%)');

// percentage RGBA notation
background('rgba(100%,0%,100%,0.5)');

// p5 Color object
background(color(0, 0, 255));
- - - -
- - - - -
- -

- - inner background(colorstring, aopt) - - -
- jsboot/p5color.js, - line 1760 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
colorstring - - -String - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex
a - - -Number - - - - - - <optional>
- - - - - - 		opacity of the background relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(gray, aopt) - - -
- jsboot/p5color.js, - line 1769 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - specifies a value between white and black
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(v1, v2, v3, aopt) - - -
- jsboot/p5color.js, - line 1775 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value (depending on the current color mode)
v2 - - -Number - - - - - - - - - - green or saturation value (depending on the current color mode)
v3 - - -Number - - - - - - - - - - blue or brightness value (depending on the current color mode)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(values) - - -
- jsboot/p5color.js, - line 1786 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(bitmap, aopt) - - -
- jsboot/p5color.js, - line 1792 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
bitmap - - -Bitmap - - - - - - - - - - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner beginShape(kindopt) - - -
- jsboot/p5shape.js, - line 379 -
- -

- - - -
-
- - -
- Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.

The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.

Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
kind - - -Constant - - - - - - <optional>
- - - - - - 		either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

beginShape(LINES);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();

beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
- - - -
- - - - -
- -

- - inner blue(color) → {Number} - - -
- jsboot/p5color.js, - line 1291 -
- -

- - - -
-
- - -
- Extracts the blue value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the blue value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(175, 100, 220); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let blueValue = blue(c); // Get blue in 'c'
print(blueValue); // Prints "220.0"
fill(0, 0, blueValue); // Use 'blueValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner boolean(n) → {Boolean} - - -
- jsboot/p5util.js, - line 422 -
- -

- - - -
-
- - -
- Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
- - - -
- - - - -
- -

- - inner brightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1312 -
- -

- - - -
-
- - -
- Extracts the HSB brightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the brightness value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = brightness(c); // Sets 'value' to 255
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner byte(n) → {Number} - - -
- jsboot/p5util.js, - line 452 -
- -

- - - -
-
- - -
- Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- byte representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]
- - - -
- - - - -
- -

- - inner ceil(n) → {Integer} - - -
- jsboot/p5math.js, - line 77 -
- -

- - - -
-
- - -
- Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round up
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded up number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner char(n) → {String} - - -
- jsboot/p5util.js, - line 481 -
- -

- - - -
-
- - -
- Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
- - - -
- - - - -
- -

- - inner circle(x, y, d) - - -
- jsboot/p5shape.js, - line 133 -
- -

- - - -
-
- - -
- Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the centre of the circle.
y - - -Number - - - - y-coordinate of the centre of the circle.
d - - -Number - - - - diameter of the circle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a circle at location (30, 30) with a diameter of 20.
circle(30, 30, 20);
- - - -
- - - - -
- -

- - inner clear() - - -
- jsboot/p5color.js, - line 1813 -
- -

- - - -
-
- - -
- Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
  clear();
}
- - - -
- - - - -
- -

- - inner color(color) → {Color} - - -
- jsboot/p5color.js, - line 1472 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(value) → {Color} - - -
- jsboot/p5color.js, - line 1461 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(v1, v2, v3, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1449 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(values) → {Color} - - -
- jsboot/p5color.js, - line 1466 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(gray, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1333 -
- -

- - - -
-
- - -
- Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.

Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - number specifying value between white and black.
alpha - - -Number - - - - - - <optional>
- - - - - - 		alpha value relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- resulting color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(30, 20, 55, 55); // Draw rectangle

let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
ellipse(25, 25, 80, 80); // Draw left circle

// Using only one value with color()
// generates a grayscale value.
c = color(65); // Update 'c' with grayscale value
fill(c); // Use updated 'c' as fill color
ellipse(75, 75, 80, 80); // Draw right circle

// Named SVG & CSS colors may be used,
let c = color('magenta');
fill(c); // Use 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(20, 20, 60, 60); // Draw rectangle

// as can hex color codes:
noStroke(); // Don't draw a stroke around shapes
let c = color('#0f0');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('#00ff00');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// RGB and RGBA color strings are also supported:
// these all set to the same color (solid blue)
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('rgb(0,0,255)');
fill(c); // Use 'c' as fill color
rect(10, 10, 35, 35); // Draw rectangle

c = color('rgb(0%, 0%, 100%)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 35, 35); // Draw rectangle

c = color('rgba(0, 0, 255, 1)');
fill(c); // Use updated 'c' as fill color
rect(10, 55, 35, 35); // Draw rectangle

c = color('rgba(0%, 0%, 100%, 1)');
fill(c); // Use updated 'c' as fill color
rect(55, 55, 35, 35); // Draw rectangle

// HSL color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsl(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsla(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// HSB color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsb(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsba(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

let c; // Declare color 'c'
noStroke(); // Don't draw a stroke around shapes

// If no colorMode is specified, then the
// default of RGB with scale of 0-255 is used.
c = color(50, 55, 100); // Create a color for 'c'
fill(c); // Use color variable 'c' as fill color
rect(0, 10, 45, 80); // Draw left rect

colorMode(HSB, 100); // Use HSB with scale of 0-100
c = color(50, 55, 100); // Update 'c' with new color
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw right rect
- - - -
- - - - -
- -

- - inner colorMode(mode, maxopt) - - -
- jsboot/p5color.js, - line 1841 -
- -

- - - -
-
- - -
- colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.

Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - - either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
max - - -Number - - - - - - <optional>
- - - - - - 		range for all values
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(RGB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 0);
    point(i, j);
  }
}

noStroke();
colorMode(HSB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 100);
    point(i, j);
  }
}

colorMode(RGB, 255);
let c = color(127, 255, 0);

colorMode(RGB, 1);
let myColor = c._getRed();
text(myColor, 10, 10, 80, 80);

noFill();
colorMode(RGB, 255, 255, 255, 1);
background(255);

strokeWeight(4);
stroke(255, 0, 10, 0.3);
ellipse(40, 40, 50, 50);
ellipse(50, 50, 40, 40);
- - - -
- - - - -
- -

- - inner colorMode(mode, max1, max2, max3, maxAopt) - - -
- jsboot/p5color.js, - line 1894 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - -
max1 - - -Number - - - - - - - - - - range for the red or hue depending on the current color mode
max2 - - -Number - - - - - - - - - - range for the green or saturation depending on the current color mode
max3 - - -Number - - - - - - - - - - range for the blue or brightness/lightness depending on the current color mode
maxA - - -Number - - - - - - <optional>
- - - - - - 		range for the alpha
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner concat(a, b) → {Array} - - -
- jsboot/p5util.js, - line 120 -
- -

- - - -
-
- - -
- Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Array - - - - first Array to concatenate
b - - -Array - - - - second Array to concatenate
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- concatenated array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}
- - - -
- - - - -
- -

- - inner constrain(n, low, high) → {Number} - - -
- jsboot/p5math.js, - line 111 -
- -

- - - -
-
- - -
- Constrains a value between a minimum and maximum value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to constrain
low - - -Number - - - - minimum limit
high - - -Number - - - - maximum limit
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- constrained number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}
- - - -
- - - - -
- -

- - inner cos(angle) → {Number} - - -
- jsboot/p5math.js, - line 1319 -
- -

- - - -
-
- - -
- Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the cosine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner createNumberDict(key, value) → {NumberDict} - - -
- jsboot/p5util.js, - line 1191 -
- -

- - - -
-
- - -
- Creates a new instance of NumberDict using the key-value pair or object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number - - - -
value - - -Number - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -NumberDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}
- - - -
- - - - -
- -

- - inner createStringDict(key, value) → {StringDict} - - -
- jsboot/p5util.js, - line 1168 -
- -

- - - -
-
- - -
- Creates a new instance of p5.StringDict using the key-value pair or the object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
value - - -String - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StringDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}
- - - -
- - - - -
- -

- - inner createVector(xopt, yopt, zopt) → {p5.Vector} - - -
- jsboot/p5math.js, - line 26 -
- -

- - - -
-
- - -
- Creates a new PVector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -p5.Vector - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}
- - - -
- - - - -
- -

- - inner day() → {Integer} - - -
- jsboot/p5util.js, - line 1068 -
- -

- - - -
-
- - -
- The day() function returns the current day as a value from 1 - 31. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current day - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var d = day();
text('Current day: \n' + d, 5, 50);
- - - -
- - - - -
- -

- - inner degrees(radians) → {Number} - - -
- jsboot/p5math.js, - line 1380 -
- -

- - - -
-
- - -
- Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
radians - - -Number - - - - the radians value to convert to degrees
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees
- - - -
- - - - -
- -

- - inner displayDensity() → {Number} - - -
- jsboot/p5.js, - line 385 -
- -

- - - -
-
- - -
- Returns the pixel density of the current display the sketch is running on (always 1 for DOjS). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current pixel density of the display - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner dist(x1, y1, x2, y2) → {Number} - - -
- jsboot/p5math.js, - line 149 -
- -

- - - -
-
- - -
- Calculates the distance between two points. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- distance between the two points - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}
- - - -
- - - - -
- -

- - inner ellipse(x, y, w, hopt) - - -
- jsboot/p5shape.js, - line 77 -
- -

- - - -
-
- - -
- Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The origin may be changed with the ellipseMode() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the ellipse.
y - - -Number - - - - - - - - - - y-coordinate of the ellipse.
w - - -Number - - - - - - - - - - width of the ellipse.
h - - -Number - - - - - - <optional>
- - - - - - 		height of the ellipse.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(56, 46, 55, 55);
- - - -
- - - - -
- -

- - inner ellipseMode(mode) - - -
- jsboot/p5shape.js, - line 623 -
- -

- - - -
-
- - -
- Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are interpreted.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CENTER, RADIUS, CORNER, or CORNERS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipseMode(RADIUS); // Set ellipseMode to RADIUS
fill(255); // Set fill to white
ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER
fill(100); // Set fill to gray
ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode

ellipseMode(CORNER); // Set ellipseMode is CORNER
fill(255); // Set fill to white
ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode

ellipseMode(CORNERS); // Set ellipseMode to CORNERS
fill(100); // Set fill to gray
ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- - - -
- - - - -
- -

- - inner endShape(modeopt) - - -
- jsboot/p5shape.js, - line 482 -
- -

- - - -
-
- - -
- The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - <optional>
- - - - - - 		use CLOSE to close the shape
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noFill();

beginShape();
vertex(20, 20);
vertex(45, 20);
vertex(45, 80);
endShape(CLOSE);

beginShape();
vertex(50, 20);
vertex(75, 20);
vertex(75, 80);
endShape();

TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
- - - -
- - - - -
- -

- - inner exp(n) → {Number} - - -
- jsboot/p5math.js, - line 202 -
- -

- - - -
-
- - -
- Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - exponent to raise
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- e^n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}
- - - -
- - - - -
- -

- - inner fill(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2007 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(value) - - -
- jsboot/p5color.js, - line 2002 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(values) - - -
- jsboot/p5color.js, - line 2013 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(color) - - -
- jsboot/p5color.js, - line 2019 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the fill color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 1934 -
- -

- - - -
-
- - -
- Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the fill color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
fill(51);
rect(20, 20, 60, 60);

// R, G & B integer values
fill(255, 204, 0);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
fill(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
fill('red');
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
fill('#fae');
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
fill('#222222');
rect(20, 20, 60, 60);

// integer RGB notation
fill('rgb(0,255,0)');
rect(20, 20, 60, 60);

// integer RGBA notation
fill('rgba(0,255,0, 0.25)');
rect(20, 20, 60, 60);

// percentage RGB notation
fill('rgb(100%,0%,10%)');
rect(20, 20, 60, 60);

// percentage RGBA notation
fill('rgba(100%,0%,100%,0.5)');
rect(20, 20, 60, 60);

// p5 Color object
fill(color(0, 0, 255));
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner float(str) → {Number} - - -
- jsboot/p5util.js, - line 341 -
- -

- - - -
-
- - -
- Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN. When an array of values is passed in, then an array of floats of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - float string to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- floating point representation of string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);
- - - -
- - - - -
- -

- - inner floor(n) → {Integer} - - -
- jsboot/p5math.js, - line 246 -
- -

- - - -
-
- - -
- Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round down
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded down number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner frameRate(fps) - - -
- jsboot/p5env.js, - line 111 -
- -

- - - -
-
- - -
- Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations This is the same as setFrameRate(val).

Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().

Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fps - - -Number - - - - number of frames to be displayed every second
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rectX = 0;
let fr = 30; //starting FPS
let clr;

function setup() {
  background(200);
  frameRate(fr); // Attempt to refresh at starting FPS
  clr = color(255, 0, 0);
}

function draw() {
  background(200);
  rectX = rectX += 1; // Move Rectangle

  if (rectX >= width) {
    // If you go off screen.
    if (fr === 30) {
      clr = color(0, 0, 255);
      fr = 10;
      frameRate(fr); // make frameRate 10 FPS
    } else {
      clr = color(255, 0, 0);
      fr = 30;
      frameRate(fr); // make frameRate 30 FPS
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}
- - - -
- - - - -
- -

- - inner fullscreen(valopt) → {Boolean} - - -
- jsboot/p5env.js, - line 240 -
- -

- - - -
-
- - -
- If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
val - - -Boolean - - - - - - <optional>
- - - - - - 		whether the sketch should be in fullscreen mode or not
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- current fullscreen state - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clicking in the box toggles fullscreen on and off.
function setup() {
  background(200);
}
function mousePressed() {
  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}
- - - -
- - - - -
- -

- - inner getFrameRate() → {Number} - - -
- jsboot/p5env.js, - line 168 -
- -

- - - -
-
- - -
- Returns the current framerate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current frameRate - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner getURL() → {String} - - -
- jsboot/p5env.js, - line 294 -
- -

- - - -
-
- - -
- Gets the current URL. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- url - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let url;
let x = 100;

function setup() {
  fill(0);
  noStroke();
  url = getURL();
}

function draw() {
  background(200);
  text(url, x, height / 2);
  x--;
}
- - - -
- - - - -
- -

- - inner getURLParams() → {Object} - - -
- jsboot/p5env.js, - line 334 -
- -

- - - -
-
- - -
- Gets the current URL params as an Object. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- URL params - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Example: http://p5js.org?year=2014&month=May&day=15

function setup() {
  let params = getURLParams();
  text(params.day, 10, 20);
  text(params.month, 10, 40);
  text(params.year, 10, 60);
}
- - - -
- - - - -
- -

- - inner getURLPath() → {Array.<String>} - - -
- jsboot/p5env.js, - line 318 -
- -

- - - -
-
- - -
- Gets the current URL path as an array. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- path components - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let urlPath = getURLPath();
  for (let i = 0; i < urlPath.length; i++) {
    text(urlPath[i], 10, i * 20 + 20);
  }
}
- - - -
- - - - -
- -

- - inner green(color) → {Number} - - -
- jsboot/p5color.js, - line 1487 -
- -

- - - -
-
- - -
- Extracts the green value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the green value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(20, 75, 200); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let greenValue = green(c); // Get green in 'c'
print(greenValue); // Print "75.0"
fill(0, greenValue, 0); // Use 'greenValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner hex(n, digitsopt) → {String} - - -
- jsboot/p5util.js, - line 530 -
- -

- - - -
-
- - -
- Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Number - - - - - - - - - - value to parse
digits - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- hexadecimal string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- - - -
- - - - -
- -

- - inner hour() → {Integer} - - -
- jsboot/p5util.js, - line 1082 -
- -

- - - -
-
- - -
- The hour() function returns the current hour as a value from 0 - 23. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current hour - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var h = hour();
text('Current hour:\n' + h, 5, 50);
- - - -
- - - - -
- -

- - inner hue(color) → {Number} - - -
- jsboot/p5color.js, - line 1509 -
- -

- - - -
-
- - -
- Extracts the hue value from a color or pixel array. Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the hue - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = hue(c); // Sets 'value' to "0"
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner image(img, x, y) - - -
- jsboot/p5shape.js, - line 709 -
- -

- - - -
-
- - -
- Draw an image to the p5.js canvas. This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image. This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
img - - -Bitmap - - - - the image to display
x - - -Number - - - - the x-coordinate of the top-left corner of the image
y - - -Number - - - - the y-coordinate of the top-left corner of the image
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner imageMode(mode) - - -
- jsboot/p5shape.js, - line 759 -
- -

- - - -
-
- - -
- Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.

imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.

imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, or CENTER
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNER);
  image(img, 10, 10, 50, 50);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNERS);
  image(img, 10, 10, 90, 40);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CENTER);
  image(img, 50, 50, 80, 80);
}
- - - -
- - - - -
- -

- - inner int(n, radixopt) → {Number} - - -
- jsboot/p5util.js, - line 365 -
- -

- - - -
-
- - -
- Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -String -| - -Boolean -| - -Number - - - - - - - - - - value to parse
radix - - -Integer - - - - - - <optional>
- - - - - - 		the radix to convert to (default: 10)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
- - - -
- - - - -
- -

- - inner join(list, separator) → {String} - - -
- jsboot/p5util.js, - line 595 -
- -

- - - -
-
- - -
- Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - array of Strings to be joined
separator - - -String - - - - String to be placed between each item
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- joined String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);
- - - -
- - - - -
- -

- - inner keyPressed() - - -
- jsboot/p5input.js, - line 534 -
- -

- - - -
-
- - -
- The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    value = 255;
  } else if (keyCode === RIGHT_ARROW) {
    value = 0;
  }
}
- - - -
- - - - -
- -

- - inner keyReleased() - - -
- jsboot/p5input.js, - line 568 -
- -

- - - -
-
- - -
- The keyReleased() function is called once every time a key is released. See key and keyCode for more information.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
  return false; // prevent any default behavior
}
- - - -
- - - - -
- -

- - inner keyTyped() - - -
- jsboot/p5input.js, - line 592 -
- -

- - - -
-
- - -
- The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. The most recent key pressed will be stored in the key variable.

Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyTyped() {
  if (key === 'a') {
    value = 255;
  } else if (key === 'b') {
    value = 0;
  }
  // uncomment to prevent any default behavior
  // return false;
}
- - - -
- - - - -
- -

- - inner lerp(start, stop, amt) → {Number} - - -
- jsboot/p5math.js, - line 279 -
- -

- - - -
-
- - -
- Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
start - - -Number - - - - first value
stop - - -Number - - - - second value
amt - - -Number - - - - number
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- lerped value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}
- - - -
- - - - -
- -

- - inner lerpColor(c1, c2, amt) → {Color} - - -
- jsboot/p5color.js, - line 1536 -
- -

- - - -
-
- - -
- Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.

The way that colours are interpolated depends on the current color mode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c1 - - -Color - - - - interpolate from this color
c2 - - -Color - - - - interpolate to this color
amt - - -Number - - - - number between 0 and 1
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- interpolated color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
colorMode(RGB);
stroke(255);
background(51);
let from = color(218, 165, 32);
let to = color(72, 61, 139);
colorMode(RGB); // Try changing to HSB.
let interA = lerpColor(from, to, 0.33);
let interB = lerpColor(from, to, 0.66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
- - - -
- - - - -
- -

- - inner lightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1623 -
- -

- - - -
-
- - -
- Extracts the HSL lightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the lightness - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSL);
let c = color(156, 100, 50, 1);
fill(c);
rect(15, 20, 35, 60);
let value = lightness(c); // Sets 'value' to 50
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner line(x1, y1, x2, y2) - - -
- jsboot/p5shape.js, - line 152 -
- -

- - - -
-
- - -
- Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
line(30, 20, 85, 75);

line(30, 20, 85, 20);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
line(85, 75, 30, 75);
- - - -
- - - - -
- -

- - inner loadBytes(file) → {Array.<number>} - - -
- jsboot/p5.js, - line 543 -
- -

- - - -
-
- - -
- This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
file - - -string - - - - name of the file or URL to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<number> - - - - - -- an object whose 'bytes' property will be the loaded buffer - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let data;

function preload() {
  data = loadBytes('assets/mammals.xml');
}

function setup() {
  for (let i = 0; i < 5; i++) {
    console.log(data.bytes[i].toString(16));
  }
}
- - - -
- - - - -
- -

- - inner loadFont(path) → {Font} - - -
- jsboot/p5typo.js, - line 26 -
- -

- - - -
-
- - -
- Loads a GRX font file (.FNT) from a file Font Object.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Font - - - - - -- Font object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner loadImage(path) → {Bitmap} - - -
- jsboot/p5shape.js, - line 681 -
- -

- - - -
-
- - -
- Loads an image from a path and creates a Image from it.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - Path of the image to be loaded
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Bitmap - - - - - -- the Image object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner loadStrings(filename) → {Array.<String>} - - -
- jsboot/p5.js, - line 486 -
- -

- - - -
-
- - -
- Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.

Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.

This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let result;
function preload() {
  result = loadStrings('assets/test.txt');
}
function setup() {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}

function setup() {
  loadStrings('assets/test.txt', pickString);
}

function pickString(result) {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}
- - - -
- - - - -
- -

- - inner log(n) → {Number} - - -
- jsboot/p5math.js, - line 320 -
- -

- - - -
-
- - -
- Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number greater than 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- natural logarithm of n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}
- - - -
- - - - -
- -

- - inner loop() - - -
- jsboot/p5.js, - line 235 -
- -

- - - -
-
- - -
- By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop(). Avoid calling loop() from inside setup(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}
- - - -
- - - - -
- -

- - inner mag(a, b) → {Number} - - -
- jsboot/p5math.js, - line 370 -
- -

- - - -
-
- - -
- Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - first value
b - - -Number - - - - second value
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- magnitude of vector from (0,0) to (a,b) - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}
- - - -
- - - - -
- -

- - inner map(value, start1, stop1, start2, stop2, withinBoundsopt) → {Number} - - -
- jsboot/p5math.js, - line 402 -
- -

- - - -
-
- - -
- Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -Number - - - - - - - - - - the incoming value to be converted
start1 - - -Number - - - - - - - - - - lower bound of the value's current range
stop1 - - -Number - - - - - - - - - - upper bound of the value's current range
start2 - - -Number - - - - - - - - - - lower bound of the value's target range
stop2 - - -Number - - - - - - - - - - upper bound of the value's target range
withinBounds - - -Boolean - - - - - - <optional>
- - - - - - 		constrain the value to the newly mapped range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- remapped number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}
- - - -
- - - - -
- -

- - inner match(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 616 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);
- - - -
- - - - -
- -

- - inner matchAll(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 649 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- 2d Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);
- - - -
- - - - -
- -

- - inner max(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 448 -
- -

- - - -
-
- - -
- Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- maximum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner millis() → {Number} - - -
- jsboot/p5util.js, - line 1110 -
- -

- - - -
-
- - -
- Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the number of milliseconds since starting the program - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
- - - -
- - - - -
- -

- - inner min(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 486 -
- -

- - - -
-
- - -
- Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- minimum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner minute() → {Integer} - - -
- jsboot/p5util.js, - line 1096 -
- -

- - - -
-
- - -
- The minute() function returns the current minute as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current minute - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = minute();
text('Current minute: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner month() → {Integer} - - -
- jsboot/p5util.js, - line 1125 -
- -

- - - -
-
- - -
- The month() function returns the current month as a value from 1 - 12. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current month - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = month();
text('Current month: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner mouseClicked(eventopt) - - -
- jsboot/p5input.js, - line 422 -
- -

- - - -
-
- - -
- The mouseClicked() function is called once after a mouse button has been pressed and then released.

Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function mouseClicked() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseClicked() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseClicked(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseMoved(eventopt) - - -
- jsboot/p5input.js, - line 303 -
- -

- - - -
-
- - -
- The >mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move the mouse across the page
// to change its value

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function mouseMoved() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseMoved(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mousePressed(eventopt) - - -
- jsboot/p5input.js, - line 341 -
- -

- - - -
-
- - -
- The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mousePressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mousePressed(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseReleased(eventopt) - - -
- jsboot/p5input.js, - line 381 -
- -

- - - -
-
- - -
- The mouseReleased() function is called every time a mouse button is released.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseReleased() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseReleased(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner nf(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 692 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
left - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfc(num, rightopt) → {String} - - -
- jsboot/p5util.js, - line 789 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfp(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 853 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfs(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 901 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. The values for the digits, left, and right parameters should always be positive integers. (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner noCursor() - - -
- jsboot/p5.js, - line 408 -
- -

- - - -
-
- - -
- Hides the cursor from view. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}
- - - -
- - - - -
- -

- - inner noFill() - - -
- jsboot/p5color.js, - line 2031 -
- -

- - - -
-
- - -
- Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(15, 10, 55, 55);
noFill();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noFill();
  stroke(100, 100, 240);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner noise(x, yopt, zopt) → {Number} - - -
- jsboot/p5math.js, - line 969 -
- -

- - - -
-
- - -
- Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate in noise space
y - - -Number - - - - - - <optional>
- - - - - - 		y-coordinate in noise space
z - - -Number - - - - - - <optional>
- - - - - - 		z-coordinate in noise space
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- Perlin noise value (between 0 and 1) at specified coordinates - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}
- - - -
- - - - -
- -

- - inner noiseDetail(lod, falloff) - - -
- jsboot/p5math.js, - line 1113 -
- -

- - - -
-
- - -
- Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence.

By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise().

By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
lod - - -Number - - - - number of octaves to be used by the noise
falloff - - -Number - - - - falloff factor for each octave
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}
- - - -
- - - - -
- -

- - inner noLoop() - - -
- jsboot/p5.js, - line 271 -
- -

- - - -
-
- - -
- Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.

When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.

Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}
- - - -
- - - - -
- -

- - inner norm(value, start, stop) → {Number} - - -
- jsboot/p5math.js, - line 524 -
- -

- - - -
-
- - -
- Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - incoming value to be normalized
start - - -Number - - - - lower bound of the value's current range
stop - - -Number - - - - upper bound of the value's current range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- normalized number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}
- - - -
- - - - -
- -

- - inner noStroke() - - -
- jsboot/p5color.js, - line 2058 -
- -

- - - -
-
- - -
- Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noStroke();
  fill(240, 150, 150);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner pixelDensity(val) - - -
- jsboot/p5env.js, - line 267 -
- -

- - - -
-
- - -
- Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
val - - -Number - - - - whether or how much the sketch should scale
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  pixelDensity(1);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

function setup() {
  pixelDensity(3.0);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner point(x, y, zopt) - - -
- jsboot/p5shape.js, - line 189 -
- -

- - - -
-
- - -
- Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x-coordinate
y - - -Number - - - - - - - - - - the y-coordinate
z - - -Number - - - - - - <optional>
- - - - - - 		the z-coordinate (for WebGL mode)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
point(30, 20);
point(85, 20);
point(85, 75);
point(30, 75);
- - - -
- - - - -
- -

- - inner pop() - - -
- jsboot/p5.js, - line 631 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
translate(50, 0);
strokeWeight(10);
fill(204, 153, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner pow(n, e) → {Number} - - -
- jsboot/p5math.js, - line 570 -
- -

- - - -
-
- - -
- Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to Math.pow(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - base of the exponential expression
e - - -Number - - - - power by which to raise the base
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- n^e - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 45 -
- -

- - - -
-
- - -
- The println() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 26 -
- -

- - - -
-
- - -
- The print() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner push() - - -
- jsboot/p5.js, - line 580 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
translate(50, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner quad(x1, y1, x2, y2, x3, y3, x4, y4) - - -
- jsboot/p5shape.js, - line 211 -
- -

- - - -
-
- - -
- Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
x3 - - -Number - - - - the x-coordinate of the third point
y3 - - -Number - - - - the y-coordinate of the third point
x4 - - -Number - - - - the x-coordinate of the fourth point
y4 - - -Number - - - - the y-coordinate of the fourth point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
quad(38, 31, 86, 20, 69, 63, 30, 76);
- - - -
- - - - -
- -

- - inner radians(degrees) → {Number} - - -
- jsboot/p5math.js, - line 1402 -
- -

- - - -
-
- - -
- Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
degrees - - -Number - - - - the degree value to convert to radians
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians
- - - -
- - - - -
- -

- - inner random(minopt, maxopt) → {Number} - - -
- jsboot/p5math.js, - line 817 -
- -

- - - -
-
- - -
- Return a random floating-point number. Takes either 0, 1 or 2 arguments. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If one argument is given and it is an array, returns a random element from that array. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
min - - -Number - - - - - - <optional>
- - - - - - 		the lower bound (inclusive)
max - - -Number - - - - - - <optional>
- - - - - - 		the upper bound (exclusive)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word
- - - -
- - - - -
- -

- - inner randomGaussian(mean, sd) → {Number} - - -
- jsboot/p5math.js, - line 882 -
- -

- - - -
-
- - -
- Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned.

Takes either 0, 1 or 2 arguments.
If no args, returns a mean of 0 and standard deviation of 1.
If one arg, that arg is the mean (standard deviation is 1).
If two args, first is mean, second is standard deviation. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mean - - -Number - - - - the mean
sd - - -Number - - - - the standard deviation
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}
- - - -
- - - - -
- -

- - inner randomSeed(seed) - - -
- jsboot/p5math.js, - line 794 -
- -

- - - -
-
- - -
- Sets the seed value for random(). By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
seed - - -Number - - - - the seed value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}
- - - -
- - - - -
- -

- - inner rect(x, y, w, h) - - -
- jsboot/p5shape.js, - line 240 -
- -

- - - -
-
- - -
- Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the rectangle.
y - - -Number - - - - y-coordinate of the rectangle.
w - - -Number - - - - width of the rectangle.
h - - -Number - - - - height of the rectangle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a rectangle at location (30, 20) with a width and height of 55.
rect(30, 20, 55, 55);
- - - -
- - - - -
- -

- - inner rectMode(mode) - - -
- jsboot/p5shape.js, - line 568 -
- -

- - - -
-
- - -
- Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, CENTER, or RADIUS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rectMode(CORNER); // Default rectMode is CORNER
fill(255); // Set fill to white
rect(25, 25, 50, 50); // Draw white rect using CORNER mode

rectMode(CORNERS); // Set rectMode to CORNERS
fill(100); // Set fill to gray
rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode

rectMode(RADIUS); // Set rectMode to RADIUS
fill(255); // Set fill to white
rect(50, 50, 30, 30); // Draw white rect using RADIUS mode

rectMode(CENTER); // Set rectMode to CENTER
fill(100); // Set fill to gray
rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- - - -
- - - - -
- -

- - inner red(color) → {Number} - - -
- jsboot/p5color.js, - line 1644 -
- -

- - - -
-
- - -
- Extracts the red value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the red value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let redValue = red(c); // Get red in 'c'
print(redValue); // Print "255.0"
fill(redValue, 0, 0); // Use 'redValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle

colorMode(RGB, 255);
let c = color(127, 255, 0);
colorMode(RGB, 1);
let myColor = red(c);
print(myColor);
- - - -
- - - - -
- -

- - inner redraw(nopt) - - -
- jsboot/p5.js, - line 325 -
- -

- - - -
-
- - -
- Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.

In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).

The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop().

In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Integer - - - - - - <optional>
- - - - - - 		Redraw for n-times. The default value is 1.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}
- - - -
- - - - -
- -

- - inner resetMatrix() - - -
- jsboot/p5trans.js, - line 192 -
- -

- - - -
-
- - -
- Replaces the current matrix with the identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(50, 50);
applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
rect(0, 0, 20, 20);
// Note that the translate is also reset.
resetMatrix();
rect(0, 0, 20, 20);
- - - -
- - - - -
- -

- - inner reverse(list) → {Array} - - -
- jsboot/p5util.js, - line 148 -
- -

- - - -
-
- - -
- Reverses the order of an array, maps to Array.reverse() -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to reverse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the reversed list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}
- - - -
- - - - -
- -

- - inner rotate(angle) - - -
- jsboot/p5trans.js, - line 208 -
- -

- - - -
-
- - -
- Rotates a shape the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.

Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again.

Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle of rotation, specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 52, 52);
- - - -
- - - - -
- -

- - inner round(n) → {Integer} - - -
- jsboot/p5math.js, - line 598 -
- -

- - - -
-
- - -
- Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner saturation(color) → {Number} - - -
- jsboot/p5color.js, - line 1671 -
- -

- - - -
-
- - -
- Extracts the saturation value from a color or pixel array. Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the saturation value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = saturation(c); // Sets 'value' to 126
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner saveStrings(list, filename, extensionopt) - - -
- jsboot/p5.js, - line 436 -
- -

- - - -
-
- - -
- Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array.<String> - - - - - - - - - - string array to be written
filename - - -String - - - - - - - - - - filename for output
extension - - -String - - - - - - <optional>
- - - - - - 		the filename's extension
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let words = 'apple bear cat dog';

// .split() outputs an Array
let list = split(words, ' ');

function setup() {
  createCanvas(100, 100);
  background(200);
  text('click here to save', 10, 10, 70, 80);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    saveStrings(list, 'nouns.txt');
  }
}

// Saves the following to a file called 'nouns.txt':
//
// apple
// bear
// cat
// dog
- - - -
- - - - -
- -

- - inner scale(s, yopt) - - -
- jsboot/p5trans.js, - line 366 -
- -

- - - -
-
- - -
- Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.

Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.

Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
s - - -Number -| - -p5.Vector -| - -Array.<Number> - - - - - - - - - - percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given
y - - -Number - - - - - - <optional>
- - - - - - 		percent to scale the object in the y-axis
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

rect(30, 20, 50, 50);
scale(0.5, 1.3);
rect(30, 20, 50, 50);
- - - -
- - - - -
- -

- - inner scale(scales) - - -
- jsboot/p5trans.js, - line 396 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
scales - - -p5.Vector -| - -Array.<Number> - - - - per-axis percents to scale the object
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner second() → {Integer} - - -
- jsboot/p5util.js, - line 1138 -
- -

- - - -
-
- - -
- The second() function returns the current second as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current second - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var s = second();
text('Current second: \n' + s, 5, 50);
- - - -
- - - - -
- -

- - inner setAlpha(alpha) - - -
- jsboot/p5color.js, - line 595 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
alpha - - -Number - - - - the new alpha value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let squareColor;

function setup() {
  ellipseMode(CORNERS);
  strokeWeight(4);
  squareColor = color(100, 50, 150);
}

function draw() {
  background(255);

  noFill();
  stroke(0);
  ellipse(10, 10, width - 10, height - 10);

  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  fill(squareColor);
  noStroke();
  rect(13, 13, width - 26, height - 26);
}
- - - -
- - - - -
- -

- - inner setBlue(blue) - - -
- jsboot/p5color.js, - line 575 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
blue - - -Number - - - - the new blue value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setGreen(green) - - -
- jsboot/p5color.js, - line 555 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
green - - -Number - - - - the new green value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setRed(red) - - -
- jsboot/p5color.js, - line 535 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
red - - -Number - - - - the new red value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner shearX(angle) - - -
- jsboot/p5trans.js, - line 245 -
- -

- - - -
-
- - -
- Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shearY(angle) - - -
- jsboot/p5trans.js, - line 279 -
- -

- - - -
-
- - -
- Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shorten(list) → {Array} - - -
- jsboot/p5util.js, - line 167 -
- -

- - - -
-
- - -
- Decreases an array by one element and returns the shortened array, maps to Array.pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to shorten
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shortened Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}
- - - -
- - - - -
- -

- - inner shuffle(array, boolopt) → {Array} - - -
- jsboot/p5util.js, - line 188 -
- -

- - - -
-
- - -
- Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
array - - -Array - - - - - - - - - - Array to shuffle
bool - - -Boolean - - - - - - <optional>
- - - - - - 		modify passed array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shuffled Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}
- - - -
- - - - -
- -

- - inner sin(angle) → {Number} - - -
- jsboot/p5math.js, - line 1339 -
- -

- - - -
-
- - -
- Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the sine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner sort(list, countopt) → {Array} - - -
- jsboot/p5util.js, - line 228 -
- -

- - - -
-
- - -
- Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to sort
count - - -Integer - - - - - - <optional>
- - - - - - 		number of elements to sort, starting from 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the sorted list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}
- - - -
- - - - -
- -

- - inner splice(list, value, position) → {Array} - - -
- jsboot/p5util.js, - line 272 -
- -

- - - -
-
- - -
- Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to splice into
value - - -any - - - - value to be spliced in
position - - -Integer - - - - in the array from which to insert data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}
- - - -
- - - - -
- -

- - inner split(value, delim) → {Array.<String>} - - -
- jsboot/p5util.js, - line 965 -
- -

- - - -
-
- - -
- The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - the String to be split
delim - - -String - - - - the String used to separate the data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
- - - -
- - - - -
- -

- - inner splitTokens(value, delimopt) → {Array.<String>} - - -
- jsboot/p5util.js, - line 991 -
- -

- - - -
-
- - -
- The splitTokens() function splits a String at one or many character delimiters or "tokens." The delim parameter specifies the character or characters to be used as a boundary.

If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -String - - - - - - - - - - the String to be split
delim - - -String - - - - - - <optional>
- - - - - - 		list of individual Strings that will be used as separators
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
- - - -
- - - - -
- -

- - inner sq(n) → {Number} - - -
- jsboot/p5math.js, - line 631 -
- -

- - - -
-
- - -
- Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to square
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- squared number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner sqrt(n) → {Number} - - -
- jsboot/p5math.js, - line 672 -
- -

- - - -
-
- - -
- Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - non-negative number to square root
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- square root of number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner square(x, y, s) - - -
- jsboot/p5shape.js, - line 331 -
- -

- - - -
-
- - -
- Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the square.
y - - -Number - - - - y-coordinate of the square.
s - - -Number - - - - side size of the square.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
- - - -
- - - - -
- -

- - inner str(n) → {String} - - -
- jsboot/p5util.js, - line 398 -
- -

- - - -
-
- - -
- Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
- - - -
- - - - -
- -

- - inner stroke(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2170 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(value) - - -
- jsboot/p5color.js, - line 2165 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(color) - - -
- jsboot/p5color.js, - line 2182 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the stroke color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 2084 -
- -

- - - -
-
- - -
- Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the stroke color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
strokeWeight(4);
stroke(51);
rect(20, 20, 60, 60);

// R, G & B integer values
stroke(255, 204, 0);
strokeWeight(4);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
strokeWeight(4);
stroke(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
stroke('red');
strokeWeight(4);
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
stroke('#fae');
strokeWeight(4);
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
stroke('#222222');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGB notation
stroke('rgb(0,255,0)');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGBA notation
stroke('rgba(0,255,0,0.25)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGB notation
stroke('rgb(100%,0%,10%)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGBA notation
stroke('rgba(100%,0%,100%,0.5)');
strokeWeight(4);
rect(20, 20, 60, 60);

// p5 Color object
stroke(color(0, 0, 255));
strokeWeight(4);
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner stroke(values) - - -
- jsboot/p5color.js, - line 2176 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner strokeWeight(weight) - - -
- jsboot/p5shape.js, - line 810 -
- -

- - - -
-
- - -
- Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
weight - - -Number - - - - the weight (in pixels) of the stroke
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(1); // Default
line(20, 20, 80, 20);
strokeWeight(4); // Thicker
line(20, 40, 80, 40);
strokeWeight(10); // Beastly
line(20, 70, 80, 70);
- - - -
- - - - -
- -

- - inner subset(list, start, countopt) → {Array} - - -
- jsboot/p5util.js, - line 304 -
- -

- - - -
-
- - -
- Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to extract from
start - - -Integer - - - - - - - - - - position to begin
count - - -Integer - - - - - - <optional>
- - - - - - 		number of values to extract
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- Array of extracted elements - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}
- - - -
- - - - -
- -

- - inner tan(angle) → {Number} - - -
- jsboot/p5math.js, - line 1359 -
- -

- - - -
-
- - -
- Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the tangent of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner text(str, x, y) - - -
- jsboot/p5typo.js, - line 39 -
- -

- - - -
-
- - -
- Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.

The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.

The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String -| - -Object -| - -Array -| - -Number -| - -Boolean - - - - the alphanumeric symbols to be displayed
x - - -Number - - - - x-coordinate of text
y - - -Number - - - - y-coordinate of text
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}
- - - -
- - - - -
- -

- - inner textAlign(horizAlign, vertAlignopt) - - -
- jsboot/p5typo.js, - line 148 -
- -

- - - -
-
- - -
- Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
horizAlign - - -Constant - - - - - - - - - - horizontal alignment, either LEFT, CENTER, or RIGHT
vertAlign - - -Constant - - - - - - <optional>
- - - - - - 		vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);
- - - -
- - - - -
- -

- - inner textFont() → {Object} - - -
- jsboot/p5typo.js, - line 114 -
- -

- - - -
-
- - -
- Sets the current font that will be drawn with the text() function.

-
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- the current font - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}
- - - -
- - - - -
- -

- - inner textSize() → {Number} - - -
- jsboot/p5typo.js, - line 230 -
- -

- - - -
-
- - -
- Gets the current font size. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner textWidth(theText) → {Number} - - -
- jsboot/p5typo.js, - line 203 -
- -

- - - -
-
- - -
- Calculates and returns the width of any character or text string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
theText - - -String - - - - the String of characters to measure
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);
- - - -
- - - - -
- -

- - inner toString(formatopt) → {String} - - -
- jsboot/p5color.js, - line 341 -
- -

- - - -
-
- - -
- This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
format - - -String - - - - - - <optional>
- - - - - - 		How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- the formatted string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let myColor;
function setup() {
  createCanvas(200, 200);
  stroke(255);
  myColor = color(100, 100, 250);
  fill(myColor);
}

function draw() {
  rotate(HALF_PI);
  text(myColor.toString(), 0, -5);
  text(myColor.toString('#rrggbb'), 0, -30);
  text(myColor.toString('rgba%'), 0, -55);
}
- - - -
- - - - -
- -

- - inner translate(vector) - - -
- jsboot/p5trans.js, - line 347 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
vector - - -p5.Vector - - - - the vector to translate by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner translate(x, y, zopt) - - -
- jsboot/p5trans.js, - line 313 -
- -

- - - -
-
- - -
- Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.

Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - left/right translation
y - - -Number - - - - - - - - - - up/down translation
z - - -Number - - - - - - <optional>
- - - - - - 		forward/backward translation (webgl only)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(30, 20);
rect(0, 0, 55, 55);

rect(0, 0, 55, 55); // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55); // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55); // Draw rect at new 0,0

function draw() {
  background(200);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  translate(p5.Vector.fromAngle(millis() / 1000, 40));
  rect(0, 0, 20, 20);
}
- - - -
- - - - -
- -

- - inner triangle(x1, y1, x2, y2, x3, y3) - - -
- jsboot/p5shape.js, - line 356 -
- -

- - - -
-
- - -
- A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
x3 - - -Number - - - - x-coordinate of the third point
y3 - - -Number - - - - y-coordinate of the third point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
triangle(30, 75, 58, 20, 86, 75);
- - - -
- - - - -
- -

- - inner trim(str) → {String} - - -
- jsboot/p5util.js, - line 1042 -
- -

- - - -
-
- - -
- Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - a String to be trimmed
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- a trimmed String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);
- - - -
- - - - -
- -

- - inner unchar(n) → {Number} - - -
- jsboot/p5util.js, - line 508 -
- -

- - - -
-
- - -
- Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
- - - -
- - - - -
- -

- - inner unhex(n) → {Number} - - -
- jsboot/p5util.js, - line 569 -
- -

- - - -
-
- - -
- Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of hexadecimal value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
- - - -
- - - - -
- -

- - inner vertex(x, y) - - -
- jsboot/p5shape.js, - line 460 -
- -

- - - -
-
- - -
- All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the vertex
y - - -Number - - - - y-coordinate of the vertex
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(3);
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
- - - -
- - - - -
- -

- - inner year() → {Integer} - - -
- jsboot/p5util.js, - line 1151 -
- -

- - - -
-
- - -
- The year() returns the current year as an integer (2014, 2015, 2016, etc). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current year - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var y = year();
text('Current year: \n' + y, 5, 50);
- - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

p5compat

- - - - -
- -
- -
- - - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - -

Classes

- - -
- -
-

- Color -
- module:p5compat~Color -
-

-
- - -
- - - - - - - - - - -

Members

- -
- - -
-

- static ColorConversion - -
- jsboot/p5color.js, - line 41 -
- -

- - -
-
- -
- Conversions adapted from . In these functions, hue is always in the range [0, 1], just like all other components are in the range [0, 1]. 'Brightness' and 'value' are used interchangeably. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly displayHeight - -
- jsboot/p5env.js, - line 202 -
- -

- - -
-
- -
- System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly displayWidth - -
- jsboot/p5env.js, - line 189 -
- -

- - -
-
- -
- System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly focused - -
- jsboot/p5env.js, - line 109 -
- -

- - -
-
- -
- Confirms if the window a p5.js program is in is "focused," meaning that the sketch will accept mouse or keyboard input. This variable is "true" if the window is focused and "false" if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
focused - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// To demonstrate, put two windows side by side.
// Click on the window that the p5 sketch isn't in!
function draw() {
  background(200);
  noStroke();
  fill(0, 200, 0);
  ellipse(25, 25, 50, 50);

  if (!focused) {
    // or "if (focused === false)"
    stroke(200, 0, 0);
    line(0, 0, 100, 100);
    line(100, 0, 0, 100);
  }
}
- - -
- - - - -
-

- static, readonly frameCount - -
- jsboot/p5env.js, - line 83 -
- -

- - -
-
- -
- The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
frameCount - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
- - -
- - - - -
-

- static, readonly height - -
- jsboot/p5env.js, - line 238 -
- -

- - -
-
- -
- System variable that stores the height of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
height - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly key - -
- jsboot/p5input.js, - line 507 -
- -

- - -
-
- -
- The system variable key always contains the value of the most recent key on the keyboard that was typed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Click any key to display it!
// (Not Guaranteed to be Case Sensitive)
function setup() {
  fill(245, 123, 158);
  textSize(50);
}

function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}
- - -
- - - - -
-

- static, readonly keyCode - -
- jsboot/p5input.js, - line 532 -
- -

- - -
-
- -
- The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyCode - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let fillVal = 126;
function draw() {
  fill(fillVal);
  rect(25, 25, 50, 50);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    fillVal = 255;
  } else if (keyCode === DOWN_ARROW) {
    fillVal = 0;
  }
  return false; // prevent default
}
- - -
- - - - -
-

- static, readonly keyIsPressed - -
- jsboot/p5input.js, - line 486 -
- -

- - -
-
- -
- The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
- - -
- - - - -
-

- static, readonly mouseButton - -
- jsboot/p5input.js, - line 278 -
- -

- - -
-
- -
- Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseButton - - -Constant - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      ellipse(50, 50, 50, 50);
    }
    if (mouseButton === RIGHT) {
      rect(25, 25, 50, 50);
    }
    if (mouseButton === CENTER) {
      triangle(23, 75, 50, 20, 78, 75);
    }
  }

  print(mouseButton);
}
- - -
- - - - -
-

- static, readonly mouseIsPressed - -
- jsboot/p5input.js, - line 301 -
- -

- - -
-
- -
- The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }

  print(mouseIsPressed);
}
- - -
- - - - -
-

- static, readonly mouseX - -
- jsboot/p5input.js, - line 53 -
- -

- - -
-
- -
- The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
- - -
- - - - -
-

- static, readonly mouseY - -
- jsboot/p5input.js, - line 71 -
- -

- - -
-
- -
- The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
- - -
- - - - -
-

- static, readonly pmouseX - -
- jsboot/p5input.js, - line 95 -
- -

- - -
-
- -
- The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas to leave a trail
function setup() {
  //slow down the frameRate to make it more visible
  frameRate(10);
}

function draw() {
  background(244, 248, 252);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + ' -> ' + mouseX);
}
- - -
- - - - -
-

- static, readonly pmouseY - -
- jsboot/p5input.js, - line 118 -
- -

- - -
-
- -
- The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);
  //draw a square only if the mouse is not moving
  if (mouseY === pmouseY && mouseX === pmouseX) {
    rect(20, 20, 60, 60);
  }

  print(pmouseY + ' -> ' + mouseY);
}
- - -
- - - - -
-

- static, readonly pwinMouseX - -
- jsboot/p5input.js, - line 213 -
- -

- - -
-
- -
- The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current x position is the horizontal mouse speed
  let speed = abs(winMouseX - pwinMouseX);
  //change the size of the circle
  //according to the horizontal speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly pwinMouseY - -
- jsboot/p5input.js, - line 247 -
- -

- - -
-
- -
- The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current y position is the vertical mouse speed
  let speed = abs(winMouseY - pwinMouseY);
  //change the size of the circle
  //according to the vertical speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly width - -
- jsboot/p5env.js, - line 230 -
- -

- - -
-
- -
- System variable that stores the width of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
width - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly windowHeight - -
- jsboot/p5env.js, - line 222 -
- -

- - -
-
- -
- System variable that stores the height of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly windowWidth - -
- jsboot/p5env.js, - line 212 -
- -

- - -
-
- -
- System variable that stores the width of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly winMouseX - -
- jsboot/p5input.js, - line 149 -
- -

- - -
-
- -
- The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the horizontal mouse position
  //relative to the window
  myCanvas.position(winMouseX + 1, windowHeight / 2);

  //the y of the square is relative to the canvas
  rect(20, mouseY, 60, 60);
}
- - -
- - - - -
-

- static, readonly winMouseY - -
- jsboot/p5input.js, - line 180 -
- -

- - -
-
- -
- The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the vertical mouse position
  //relative to the window
  myCanvas.position(windowWidth / 2, winMouseY + 1);

  //the x of the square is relative to the canvas
  rect(mouseX, 20, 60, 60);
}
- - -
- - - - -
-

- inner colorPatterns - -
- jsboot/p5color.js, - line 888 -
- -

- - -
-
- -
- Full color string patterns. The capture groups are necessary. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner namedColors - -
- jsboot/p5color.js, - line 722 -
- -

- - -
-
- -
- CSS named colors. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner WHITESPACE - -
- jsboot/p5color.js, - line 880 -
- -

- - -
-
- -
- These regular expressions are used to build up the patterns for matching viable CSS color strings: fragmenting the regexes in this way increases the legibility and comprehensibility of the code. Note that RGB values of .9 are not parsed by IE, but are supported here for color string consistency. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - static _cloneEnv() - - -
- jsboot/p5.js, - line 67 -
- -

- - - -
-
- - -
- deep copy the current environment. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _ensureMatrix() - - -
- jsboot/p5trans.js, - line 34 -
- -

- - - -
-
- - -
- make sure we have a 2x2 identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _PolyLine() - - -
- jsboot/p5shape.js, - line 550 -
- -

- - - -
-
- - -
- draw polygon by using lines. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transX(x, y) → {number} - - -
- jsboot/p5trans.js, - line 67 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated x coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transY(x, y) → {number} - - -
- jsboot/p5trans.js, - line 82 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated y coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static createCanvas() - - -
- jsboot/p5.js, - line 201 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static exit() - - -
- jsboot/p5.js, - line 231 -
- -

- - - -
-
- - -
- exit the script after the current Loop(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noSmooth() - - -
- jsboot/p5.js, - line 211 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noTint() - - -
- jsboot/p5.js, - line 226 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static settings() - - -
- jsboot/p5.js, - line 216 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static size() - - -
- jsboot/p5.js, - line 196 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static smooth() - - -
- jsboot/p5.js, - line 206 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static tint() - - -
- jsboot/p5.js, - line 221 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner abs(n) → {Number} - - -
- jsboot/p5math.js, - line 59 -
- -

- - - -
-
- - -
- Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to compute
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- absolute value of given number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
- - - -
- - - - -
- -

- - inner acos(value) → {Number} - - -
- jsboot/p5math.js, - line 1211 -
- -

- - - -
-
- - -
- The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc cosine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc cosine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);
- - - -
- - - - -
- -

- - inner alpha(color) → {Number} - - -
- jsboot/p5color.js, - line 1271 -
- -

- - - -
-
- - -
- Extracts the alpha value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the alpha value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
let c = color(0, 126, 255, 102);
fill(c);
rect(15, 15, 35, 70);
let value = alpha(c); // Sets 'value' to 102
fill(value);
rect(50, 15, 35, 70);
- - - -
- - - - -
- -

- - inner angleMode(mode) - - -
- jsboot/p5math.js, - line 1423 -
- -

- - - -
-
- - -
- Sets the current mode of p5 to given mode. Default mode is RADIANS. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either RADIANS or DEGREES
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}
- - - -
- - - - -
- -

- - inner append(array, value) → {Array} - - -
- jsboot/p5util.js, - line 30 -
- -

- - - -
-
- - -
- Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
array - - -Array - - - - Array to append
value - - -any - - - - to be added to the Array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the array that was appended to - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}
- - - -
- - - - -
- -

- - inner applyMatrix(a, b, c, d, e, f) - - -
- jsboot/p5trans.js, - line 90 -
- -

- - - -
-
- - -
- Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia. The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form: > The transformation matrix used when applyMatrix is called -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
b - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
c - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
d - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
e - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
f - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  // Equivalent to translate(x, y);
  applyMatrix(1, 0, 0, 1, 40 + step, 50);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  translate(50, 50);
  // Equivalent to scale(x, y);
  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, 0, TWO_PI);
  var cos_a = cos(angle);
  var sin_a = sin(angle);
  background(200);
  translate(50, 50);
  // Equivalent to rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, -PI / 4, PI / 4);
  background(200);
  translate(50, 50);
  // equivalent to shearX(angle);
  var shear_factor = 1 / tan(PI / 2 - angle);
  applyMatrix(1, 0, shear_factor, 1, 0, 0);
  rect(0, 0, 50, 50);
}
- - - -
- - - - -
- -

- - inner arc(x, y, w, h, start, stop, modeopt) - - -
- jsboot/p5shape.js, - line 33 -
- -

- - - -
-
- - -
- Draw an arc to the screen. If called with only x, y, w, h, start, and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.

The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the arc's ellipse
y - - -Number - - - - - - - - - - y-coordinate of the arc's ellipse
w - - -Number - - - - - - - - - - width of the arc's ellipse by default
h - - -Number - - - - - - - - - - height of the arc's ellipse by default
start - - -Number - - - - - - - - - - angle to start the arc, specified in radians
stop - - -Number - - - - - - - - - - angle to stop the arc, specified in radians
mode - - -Constant - - - - - - <optional>
- - - - - - 		optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
arc(50, 55, 50, 50, 0, HALF_PI);
noFill();
arc(50, 55, 60, 60, HALF_PI, PI);
arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
- - - -
- - - - -
- -

- - inner arrayCopy(src, srcPosition, dst, dstPosition, length) - - -
- jsboot/p5util.js, - line 52 -
- -

- - - -
-
- - -
- Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().

The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).

Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
src - - -Array - - - - the source Array
srcPosition - - -Integer - - - - starting position in the source Array
dst - - -Array - - - - the destination Array
dstPosition - - -Integer - - - - starting position in the destination Array
length - - -Integer - - - - number of Array elements to be copied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - -
Deprecated:
  • Yes
- - - - - - - - - - - - - - - -
- - - -
Example
- - 
var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]
- - - -
- - - - -
- -

- - inner asin(value) → {Number} - - -
- jsboot/p5math.js, - line 1237 -
- -

- - - -
-
- - -
- The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc sine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc sine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);
- - - -
- - - - -
- -

- - inner atan(value) → {Number} - - -
- jsboot/p5math.js, - line 1264 -
- -

- - - -
-
- - -
- The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc tangent is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);
- - - -
- - - - -
- -

- - inner atan2(y, x) → {Number} - - -
- jsboot/p5math.js, - line 1291 -
- -

- - - -
-
- - -
- Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor.

Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
y - - -Number - - - - y-coordinate of the point
x - - -Number - - - - x-coordinate of the point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given point - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}
- - - -
- - - - -
- -

- - inner background(color) - - -
- jsboot/p5color.js, - line 1702 -
- -

- - - -
-
- - -
- The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A Color object can also be provided to set the background color.

An Image can also be provided to set the background image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - any value created by the color() function
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
background(51);

// R, G & B integer values
background(255, 204, 0);

// H, S & B integer values
colorMode(HSB);
background(255, 204, 100);

// Named SVG/CSS color string
background('red');

// three-digit hexadecimal RGB notation
background('#fae');

// six-digit hexadecimal RGB notation
background('#222222');

// integer RGB notation
background('rgb(0,255,0)');

// integer RGBA notation
background('rgba(0,255,0, 0.25)');

// percentage RGB notation
background('rgb(100%,0%,10%)');

// percentage RGBA notation
background('rgba(100%,0%,100%,0.5)');

// p5 Color object
background(color(0, 0, 255));
- - - -
- - - - -
- -

- - inner background(colorstring, aopt) - - -
- jsboot/p5color.js, - line 1760 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
colorstring - - -String - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex
a - - -Number - - - - - - <optional>
- - - - - - 		opacity of the background relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(gray, aopt) - - -
- jsboot/p5color.js, - line 1769 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - specifies a value between white and black
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(v1, v2, v3, aopt) - - -
- jsboot/p5color.js, - line 1775 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value (depending on the current color mode)
v2 - - -Number - - - - - - - - - - green or saturation value (depending on the current color mode)
v3 - - -Number - - - - - - - - - - blue or brightness value (depending on the current color mode)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(values) - - -
- jsboot/p5color.js, - line 1786 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(bitmap, aopt) - - -
- jsboot/p5color.js, - line 1792 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
bitmap - - -Bitmap - - - - - - - - - - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner beginShape(kindopt) - - -
- jsboot/p5shape.js, - line 379 -
- -

- - - -
-
- - -
- Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.

The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.

Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
kind - - -Constant - - - - - - <optional>
- - - - - - 		either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

beginShape(LINES);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();

beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
- - - -
- - - - -
- -

- - inner blue(color) → {Number} - - -
- jsboot/p5color.js, - line 1291 -
- -

- - - -
-
- - -
- Extracts the blue value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the blue value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(175, 100, 220); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let blueValue = blue(c); // Get blue in 'c'
print(blueValue); // Prints "220.0"
fill(0, 0, blueValue); // Use 'blueValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner boolean(n) → {Boolean} - - -
- jsboot/p5util.js, - line 422 -
- -

- - - -
-
- - -
- Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
- - - -
- - - - -
- -

- - inner brightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1312 -
- -

- - - -
-
- - -
- Extracts the HSB brightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the brightness value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = brightness(c); // Sets 'value' to 255
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner byte(n) → {Number} - - -
- jsboot/p5util.js, - line 452 -
- -

- - - -
-
- - -
- Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- byte representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]
- - - -
- - - - -
- -

- - inner ceil(n) → {Integer} - - -
- jsboot/p5math.js, - line 77 -
- -

- - - -
-
- - -
- Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round up
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded up number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner char(n) → {String} - - -
- jsboot/p5util.js, - line 481 -
- -

- - - -
-
- - -
- Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
- - - -
- - - - -
- -

- - inner circle(x, y, d) - - -
- jsboot/p5shape.js, - line 133 -
- -

- - - -
-
- - -
- Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the centre of the circle.
y - - -Number - - - - y-coordinate of the centre of the circle.
d - - -Number - - - - diameter of the circle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a circle at location (30, 30) with a diameter of 20.
circle(30, 30, 20);
- - - -
- - - - -
- -

- - inner clear() - - -
- jsboot/p5color.js, - line 1813 -
- -

- - - -
-
- - -
- Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
  clear();
}
- - - -
- - - - -
- -

- - inner color(color) → {Color} - - -
- jsboot/p5color.js, - line 1472 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(value) → {Color} - - -
- jsboot/p5color.js, - line 1461 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(v1, v2, v3, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1449 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(values) → {Color} - - -
- jsboot/p5color.js, - line 1466 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(gray, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1333 -
- -

- - - -
-
- - -
- Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.

Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - number specifying value between white and black.
alpha - - -Number - - - - - - <optional>
- - - - - - 		alpha value relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- resulting color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(30, 20, 55, 55); // Draw rectangle

let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
ellipse(25, 25, 80, 80); // Draw left circle

// Using only one value with color()
// generates a grayscale value.
c = color(65); // Update 'c' with grayscale value
fill(c); // Use updated 'c' as fill color
ellipse(75, 75, 80, 80); // Draw right circle

// Named SVG & CSS colors may be used,
let c = color('magenta');
fill(c); // Use 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(20, 20, 60, 60); // Draw rectangle

// as can hex color codes:
noStroke(); // Don't draw a stroke around shapes
let c = color('#0f0');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('#00ff00');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// RGB and RGBA color strings are also supported:
// these all set to the same color (solid blue)
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('rgb(0,0,255)');
fill(c); // Use 'c' as fill color
rect(10, 10, 35, 35); // Draw rectangle

c = color('rgb(0%, 0%, 100%)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 35, 35); // Draw rectangle

c = color('rgba(0, 0, 255, 1)');
fill(c); // Use updated 'c' as fill color
rect(10, 55, 35, 35); // Draw rectangle

c = color('rgba(0%, 0%, 100%, 1)');
fill(c); // Use updated 'c' as fill color
rect(55, 55, 35, 35); // Draw rectangle

// HSL color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsl(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsla(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// HSB color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsb(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsba(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

let c; // Declare color 'c'
noStroke(); // Don't draw a stroke around shapes

// If no colorMode is specified, then the
// default of RGB with scale of 0-255 is used.
c = color(50, 55, 100); // Create a color for 'c'
fill(c); // Use color variable 'c' as fill color
rect(0, 10, 45, 80); // Draw left rect

colorMode(HSB, 100); // Use HSB with scale of 0-100
c = color(50, 55, 100); // Update 'c' with new color
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw right rect
- - - -
- - - - -
- -

- - inner colorMode(mode, maxopt) - - -
- jsboot/p5color.js, - line 1841 -
- -

- - - -
-
- - -
- colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.

Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - - either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
max - - -Number - - - - - - <optional>
- - - - - - 		range for all values
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(RGB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 0);
    point(i, j);
  }
}

noStroke();
colorMode(HSB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 100);
    point(i, j);
  }
}

colorMode(RGB, 255);
let c = color(127, 255, 0);

colorMode(RGB, 1);
let myColor = c._getRed();
text(myColor, 10, 10, 80, 80);

noFill();
colorMode(RGB, 255, 255, 255, 1);
background(255);

strokeWeight(4);
stroke(255, 0, 10, 0.3);
ellipse(40, 40, 50, 50);
ellipse(50, 50, 40, 40);
- - - -
- - - - -
- -

- - inner colorMode(mode, max1, max2, max3, maxAopt) - - -
- jsboot/p5color.js, - line 1894 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - -
max1 - - -Number - - - - - - - - - - range for the red or hue depending on the current color mode
max2 - - -Number - - - - - - - - - - range for the green or saturation depending on the current color mode
max3 - - -Number - - - - - - - - - - range for the blue or brightness/lightness depending on the current color mode
maxA - - -Number - - - - - - <optional>
- - - - - - 		range for the alpha
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner concat(a, b) → {Array} - - -
- jsboot/p5util.js, - line 120 -
- -

- - - -
-
- - -
- Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Array - - - - first Array to concatenate
b - - -Array - - - - second Array to concatenate
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- concatenated array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}
- - - -
- - - - -
- -

- - inner constrain(n, low, high) → {Number} - - -
- jsboot/p5math.js, - line 111 -
- -

- - - -
-
- - -
- Constrains a value between a minimum and maximum value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to constrain
low - - -Number - - - - minimum limit
high - - -Number - - - - maximum limit
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- constrained number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}
- - - -
- - - - -
- -

- - inner cos(angle) → {Number} - - -
- jsboot/p5math.js, - line 1319 -
- -

- - - -
-
- - -
- Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the cosine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner createNumberDict(key, value) → {NumberDict} - - -
- jsboot/p5util.js, - line 1191 -
- -

- - - -
-
- - -
- Creates a new instance of NumberDict using the key-value pair or object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number - - - -
value - - -Number - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -NumberDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}
- - - -
- - - - -
- -

- - inner createStringDict(key, value) → {StringDict} - - -
- jsboot/p5util.js, - line 1168 -
- -

- - - -
-
- - -
- Creates a new instance of p5.StringDict using the key-value pair or the object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
value - - -String - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StringDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}
- - - -
- - - - -
- -

- - inner createVector(xopt, yopt, zopt) → {p5.Vector} - - -
- jsboot/p5math.js, - line 26 -
- -

- - - -
-
- - -
- Creates a new PVector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -p5.Vector - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}
- - - -
- - - - -
- -

- - inner day() → {Integer} - - -
- jsboot/p5util.js, - line 1068 -
- -

- - - -
-
- - -
- The day() function returns the current day as a value from 1 - 31. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current day - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var d = day();
text('Current day: \n' + d, 5, 50);
- - - -
- - - - -
- -

- - inner degrees(radians) → {Number} - - -
- jsboot/p5math.js, - line 1380 -
- -

- - - -
-
- - -
- Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
radians - - -Number - - - - the radians value to convert to degrees
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees
- - - -
- - - - -
- -

- - inner displayDensity() → {Number} - - -
- jsboot/p5.js, - line 385 -
- -

- - - -
-
- - -
- Returns the pixel density of the current display the sketch is running on (always 1 for DOjS). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current pixel density of the display - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner dist(x1, y1, x2, y2) → {Number} - - -
- jsboot/p5math.js, - line 149 -
- -

- - - -
-
- - -
- Calculates the distance between two points. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- distance between the two points - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}
- - - -
- - - - -
- -

- - inner ellipse(x, y, w, hopt) - - -
- jsboot/p5shape.js, - line 77 -
- -

- - - -
-
- - -
- Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The origin may be changed with the ellipseMode() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the ellipse.
y - - -Number - - - - - - - - - - y-coordinate of the ellipse.
w - - -Number - - - - - - - - - - width of the ellipse.
h - - -Number - - - - - - <optional>
- - - - - - 		height of the ellipse.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(56, 46, 55, 55);
- - - -
- - - - -
- -

- - inner ellipseMode(mode) - - -
- jsboot/p5shape.js, - line 623 -
- -

- - - -
-
- - -
- Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are interpreted.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CENTER, RADIUS, CORNER, or CORNERS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipseMode(RADIUS); // Set ellipseMode to RADIUS
fill(255); // Set fill to white
ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER
fill(100); // Set fill to gray
ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode

ellipseMode(CORNER); // Set ellipseMode is CORNER
fill(255); // Set fill to white
ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode

ellipseMode(CORNERS); // Set ellipseMode to CORNERS
fill(100); // Set fill to gray
ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- - - -
- - - - -
- -

- - inner endShape(modeopt) - - -
- jsboot/p5shape.js, - line 482 -
- -

- - - -
-
- - -
- The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - <optional>
- - - - - - 		use CLOSE to close the shape
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noFill();

beginShape();
vertex(20, 20);
vertex(45, 20);
vertex(45, 80);
endShape(CLOSE);

beginShape();
vertex(50, 20);
vertex(75, 20);
vertex(75, 80);
endShape();

TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
- - - -
- - - - -
- -

- - inner exp(n) → {Number} - - -
- jsboot/p5math.js, - line 202 -
- -

- - - -
-
- - -
- Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - exponent to raise
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- e^n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}
- - - -
- - - - -
- -

- - inner fill(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2007 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(value) - - -
- jsboot/p5color.js, - line 2002 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(values) - - -
- jsboot/p5color.js, - line 2013 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(color) - - -
- jsboot/p5color.js, - line 2019 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the fill color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 1934 -
- -

- - - -
-
- - -
- Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the fill color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
fill(51);
rect(20, 20, 60, 60);

// R, G & B integer values
fill(255, 204, 0);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
fill(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
fill('red');
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
fill('#fae');
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
fill('#222222');
rect(20, 20, 60, 60);

// integer RGB notation
fill('rgb(0,255,0)');
rect(20, 20, 60, 60);

// integer RGBA notation
fill('rgba(0,255,0, 0.25)');
rect(20, 20, 60, 60);

// percentage RGB notation
fill('rgb(100%,0%,10%)');
rect(20, 20, 60, 60);

// percentage RGBA notation
fill('rgba(100%,0%,100%,0.5)');
rect(20, 20, 60, 60);

// p5 Color object
fill(color(0, 0, 255));
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner float(str) → {Number} - - -
- jsboot/p5util.js, - line 341 -
- -

- - - -
-
- - -
- Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN. When an array of values is passed in, then an array of floats of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - float string to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- floating point representation of string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);
- - - -
- - - - -
- -

- - inner floor(n) → {Integer} - - -
- jsboot/p5math.js, - line 246 -
- -

- - - -
-
- - -
- Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round down
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded down number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner frameRate(fps) - - -
- jsboot/p5env.js, - line 111 -
- -

- - - -
-
- - -
- Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations This is the same as setFrameRate(val).

Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().

Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fps - - -Number - - - - number of frames to be displayed every second
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rectX = 0;
let fr = 30; //starting FPS
let clr;

function setup() {
  background(200);
  frameRate(fr); // Attempt to refresh at starting FPS
  clr = color(255, 0, 0);
}

function draw() {
  background(200);
  rectX = rectX += 1; // Move Rectangle

  if (rectX >= width) {
    // If you go off screen.
    if (fr === 30) {
      clr = color(0, 0, 255);
      fr = 10;
      frameRate(fr); // make frameRate 10 FPS
    } else {
      clr = color(255, 0, 0);
      fr = 30;
      frameRate(fr); // make frameRate 30 FPS
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}
- - - -
- - - - -
- -

- - inner fullscreen(valopt) → {Boolean} - - -
- jsboot/p5env.js, - line 240 -
- -

- - - -
-
- - -
- If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
val - - -Boolean - - - - - - <optional>
- - - - - - 		whether the sketch should be in fullscreen mode or not
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- current fullscreen state - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clicking in the box toggles fullscreen on and off.
function setup() {
  background(200);
}
function mousePressed() {
  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}
- - - -
- - - - -
- -

- - inner getFrameRate() → {Number} - - -
- jsboot/p5env.js, - line 168 -
- -

- - - -
-
- - -
- Returns the current framerate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current frameRate - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner getURL() → {String} - - -
- jsboot/p5env.js, - line 294 -
- -

- - - -
-
- - -
- Gets the current URL. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- url - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let url;
let x = 100;

function setup() {
  fill(0);
  noStroke();
  url = getURL();
}

function draw() {
  background(200);
  text(url, x, height / 2);
  x--;
}
- - - -
- - - - -
- -

- - inner getURLParams() → {Object} - - -
- jsboot/p5env.js, - line 334 -
- -

- - - -
-
- - -
- Gets the current URL params as an Object. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- URL params - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Example: http://p5js.org?year=2014&month=May&day=15

function setup() {
  let params = getURLParams();
  text(params.day, 10, 20);
  text(params.month, 10, 40);
  text(params.year, 10, 60);
}
- - - -
- - - - -
- -

- - inner getURLPath() → {Array.<String>} - - -
- jsboot/p5env.js, - line 318 -
- -

- - - -
-
- - -
- Gets the current URL path as an array. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- path components - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let urlPath = getURLPath();
  for (let i = 0; i < urlPath.length; i++) {
    text(urlPath[i], 10, i * 20 + 20);
  }
}
- - - -
- - - - -
- -

- - inner green(color) → {Number} - - -
- jsboot/p5color.js, - line 1487 -
- -

- - - -
-
- - -
- Extracts the green value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the green value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(20, 75, 200); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let greenValue = green(c); // Get green in 'c'
print(greenValue); // Print "75.0"
fill(0, greenValue, 0); // Use 'greenValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner hex(n, digitsopt) → {String} - - -
- jsboot/p5util.js, - line 530 -
- -

- - - -
-
- - -
- Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Number - - - - - - - - - - value to parse
digits - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- hexadecimal string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- - - -
- - - - -
- -

- - inner hour() → {Integer} - - -
- jsboot/p5util.js, - line 1082 -
- -

- - - -
-
- - -
- The hour() function returns the current hour as a value from 0 - 23. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current hour - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var h = hour();
text('Current hour:\n' + h, 5, 50);
- - - -
- - - - -
- -

- - inner hue(color) → {Number} - - -
- jsboot/p5color.js, - line 1509 -
- -

- - - -
-
- - -
- Extracts the hue value from a color or pixel array. Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the hue - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = hue(c); // Sets 'value' to "0"
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner image(img, x, y) - - -
- jsboot/p5shape.js, - line 709 -
- -

- - - -
-
- - -
- Draw an image to the p5.js canvas. This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image. This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
img - - -Bitmap - - - - the image to display
x - - -Number - - - - the x-coordinate of the top-left corner of the image
y - - -Number - - - - the y-coordinate of the top-left corner of the image
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner imageMode(mode) - - -
- jsboot/p5shape.js, - line 759 -
- -

- - - -
-
- - -
- Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.

imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.

imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, or CENTER
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNER);
  image(img, 10, 10, 50, 50);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNERS);
  image(img, 10, 10, 90, 40);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CENTER);
  image(img, 50, 50, 80, 80);
}
- - - -
- - - - -
- -

- - inner int(n, radixopt) → {Number} - - -
- jsboot/p5util.js, - line 365 -
- -

- - - -
-
- - -
- Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -String -| - -Boolean -| - -Number - - - - - - - - - - value to parse
radix - - -Integer - - - - - - <optional>
- - - - - - 		the radix to convert to (default: 10)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
- - - -
- - - - -
- -

- - inner join(list, separator) → {String} - - -
- jsboot/p5util.js, - line 595 -
- -

- - - -
-
- - -
- Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - array of Strings to be joined
separator - - -String - - - - String to be placed between each item
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- joined String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);
- - - -
- - - - -
- -

- - inner keyPressed() - - -
- jsboot/p5input.js, - line 534 -
- -

- - - -
-
- - -
- The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    value = 255;
  } else if (keyCode === RIGHT_ARROW) {
    value = 0;
  }
}
- - - -
- - - - -
- -

- - inner keyReleased() - - -
- jsboot/p5input.js, - line 568 -
- -

- - - -
-
- - -
- The keyReleased() function is called once every time a key is released. See key and keyCode for more information.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
  return false; // prevent any default behavior
}
- - - -
- - - - -
- -

- - inner keyTyped() - - -
- jsboot/p5input.js, - line 592 -
- -

- - - -
-
- - -
- The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. The most recent key pressed will be stored in the key variable.

Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyTyped() {
  if (key === 'a') {
    value = 255;
  } else if (key === 'b') {
    value = 0;
  }
  // uncomment to prevent any default behavior
  // return false;
}
- - - -
- - - - -
- -

- - inner lerp(start, stop, amt) → {Number} - - -
- jsboot/p5math.js, - line 279 -
- -

- - - -
-
- - -
- Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
start - - -Number - - - - first value
stop - - -Number - - - - second value
amt - - -Number - - - - number
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- lerped value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}
- - - -
- - - - -
- -

- - inner lerpColor(c1, c2, amt) → {Color} - - -
- jsboot/p5color.js, - line 1536 -
- -

- - - -
-
- - -
- Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.

The way that colours are interpolated depends on the current color mode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c1 - - -Color - - - - interpolate from this color
c2 - - -Color - - - - interpolate to this color
amt - - -Number - - - - number between 0 and 1
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- interpolated color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
colorMode(RGB);
stroke(255);
background(51);
let from = color(218, 165, 32);
let to = color(72, 61, 139);
colorMode(RGB); // Try changing to HSB.
let interA = lerpColor(from, to, 0.33);
let interB = lerpColor(from, to, 0.66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
- - - -
- - - - -
- -

- - inner lightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1623 -
- -

- - - -
-
- - -
- Extracts the HSL lightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the lightness - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSL);
let c = color(156, 100, 50, 1);
fill(c);
rect(15, 20, 35, 60);
let value = lightness(c); // Sets 'value' to 50
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner line(x1, y1, x2, y2) - - -
- jsboot/p5shape.js, - line 152 -
- -

- - - -
-
- - -
- Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
line(30, 20, 85, 75);

line(30, 20, 85, 20);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
line(85, 75, 30, 75);
- - - -
- - - - -
- -

- - inner loadBytes(file) → {Array.<number>} - - -
- jsboot/p5.js, - line 543 -
- -

- - - -
-
- - -
- This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
file - - -string - - - - name of the file or URL to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<number> - - - - - -- an object whose 'bytes' property will be the loaded buffer - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let data;

function preload() {
  data = loadBytes('assets/mammals.xml');
}

function setup() {
  for (let i = 0; i < 5; i++) {
    console.log(data.bytes[i].toString(16));
  }
}
- - - -
- - - - -
- -

- - inner loadFont(path) → {Font} - - -
- jsboot/p5typo.js, - line 26 -
- -

- - - -
-
- - -
- Loads a GRX font file (.FNT) from a file Font Object.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Font - - - - - -- Font object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner loadImage(path) → {Bitmap} - - -
- jsboot/p5shape.js, - line 681 -
- -

- - - -
-
- - -
- Loads an image from a path and creates a Image from it.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - Path of the image to be loaded
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Bitmap - - - - - -- the Image object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner loadStrings(filename) → {Array.<String>} - - -
- jsboot/p5.js, - line 486 -
- -

- - - -
-
- - -
- Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.

Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.

This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let result;
function preload() {
  result = loadStrings('assets/test.txt');
}
function setup() {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}

function setup() {
  loadStrings('assets/test.txt', pickString);
}

function pickString(result) {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}
- - - -
- - - - -
- -

- - inner log(n) → {Number} - - -
- jsboot/p5math.js, - line 320 -
- -

- - - -
-
- - -
- Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number greater than 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- natural logarithm of n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}
- - - -
- - - - -
- -

- - inner loop() - - -
- jsboot/p5.js, - line 235 -
- -

- - - -
-
- - -
- By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop(). Avoid calling loop() from inside setup(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}
- - - -
- - - - -
- -

- - inner mag(a, b) → {Number} - - -
- jsboot/p5math.js, - line 370 -
- -

- - - -
-
- - -
- Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - first value
b - - -Number - - - - second value
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- magnitude of vector from (0,0) to (a,b) - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}
- - - -
- - - - -
- -

- - inner map(value, start1, stop1, start2, stop2, withinBoundsopt) → {Number} - - -
- jsboot/p5math.js, - line 402 -
- -

- - - -
-
- - -
- Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -Number - - - - - - - - - - the incoming value to be converted
start1 - - -Number - - - - - - - - - - lower bound of the value's current range
stop1 - - -Number - - - - - - - - - - upper bound of the value's current range
start2 - - -Number - - - - - - - - - - lower bound of the value's target range
stop2 - - -Number - - - - - - - - - - upper bound of the value's target range
withinBounds - - -Boolean - - - - - - <optional>
- - - - - - 		constrain the value to the newly mapped range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- remapped number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}
- - - -
- - - - -
- -

- - inner match(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 616 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);
- - - -
- - - - -
- -

- - inner matchAll(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 649 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- 2d Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);
- - - -
- - - - -
- -

- - inner max(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 448 -
- -

- - - -
-
- - -
- Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- maximum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner millis() → {Number} - - -
- jsboot/p5util.js, - line 1110 -
- -

- - - -
-
- - -
- Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the number of milliseconds since starting the program - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
- - - -
- - - - -
- -

- - inner min(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 486 -
- -

- - - -
-
- - -
- Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- minimum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner minute() → {Integer} - - -
- jsboot/p5util.js, - line 1096 -
- -

- - - -
-
- - -
- The minute() function returns the current minute as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current minute - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = minute();
text('Current minute: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner month() → {Integer} - - -
- jsboot/p5util.js, - line 1125 -
- -

- - - -
-
- - -
- The month() function returns the current month as a value from 1 - 12. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current month - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = month();
text('Current month: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner mouseClicked(eventopt) - - -
- jsboot/p5input.js, - line 422 -
- -

- - - -
-
- - -
- The mouseClicked() function is called once after a mouse button has been pressed and then released.

Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function mouseClicked() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseClicked() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseClicked(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseMoved(eventopt) - - -
- jsboot/p5input.js, - line 303 -
- -

- - - -
-
- - -
- The >mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move the mouse across the page
// to change its value

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function mouseMoved() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseMoved(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mousePressed(eventopt) - - -
- jsboot/p5input.js, - line 341 -
- -

- - - -
-
- - -
- The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mousePressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mousePressed(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseReleased(eventopt) - - -
- jsboot/p5input.js, - line 381 -
- -

- - - -
-
- - -
- The mouseReleased() function is called every time a mouse button is released.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseReleased() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseReleased(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner nf(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 692 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
left - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfc(num, rightopt) → {String} - - -
- jsboot/p5util.js, - line 789 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfp(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 853 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfs(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 901 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. The values for the digits, left, and right parameters should always be positive integers. (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner noCursor() - - -
- jsboot/p5.js, - line 408 -
- -

- - - -
-
- - -
- Hides the cursor from view. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}
- - - -
- - - - -
- -

- - inner noFill() - - -
- jsboot/p5color.js, - line 2031 -
- -

- - - -
-
- - -
- Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(15, 10, 55, 55);
noFill();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noFill();
  stroke(100, 100, 240);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner noise(x, yopt, zopt) → {Number} - - -
- jsboot/p5math.js, - line 969 -
- -

- - - -
-
- - -
- Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate in noise space
y - - -Number - - - - - - <optional>
- - - - - - 		y-coordinate in noise space
z - - -Number - - - - - - <optional>
- - - - - - 		z-coordinate in noise space
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- Perlin noise value (between 0 and 1) at specified coordinates - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}
- - - -
- - - - -
- -

- - inner noiseDetail(lod, falloff) - - -
- jsboot/p5math.js, - line 1113 -
- -

- - - -
-
- - -
- Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence.

By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise().

By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
lod - - -Number - - - - number of octaves to be used by the noise
falloff - - -Number - - - - falloff factor for each octave
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}
- - - -
- - - - -
- -

- - inner noLoop() - - -
- jsboot/p5.js, - line 271 -
- -

- - - -
-
- - -
- Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.

When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.

Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}
- - - -
- - - - -
- -

- - inner norm(value, start, stop) → {Number} - - -
- jsboot/p5math.js, - line 524 -
- -

- - - -
-
- - -
- Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - incoming value to be normalized
start - - -Number - - - - lower bound of the value's current range
stop - - -Number - - - - upper bound of the value's current range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- normalized number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}
- - - -
- - - - -
- -

- - inner noStroke() - - -
- jsboot/p5color.js, - line 2058 -
- -

- - - -
-
- - -
- Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noStroke();
  fill(240, 150, 150);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner pixelDensity(val) - - -
- jsboot/p5env.js, - line 267 -
- -

- - - -
-
- - -
- Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
val - - -Number - - - - whether or how much the sketch should scale
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  pixelDensity(1);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

function setup() {
  pixelDensity(3.0);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner point(x, y, zopt) - - -
- jsboot/p5shape.js, - line 189 -
- -

- - - -
-
- - -
- Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x-coordinate
y - - -Number - - - - - - - - - - the y-coordinate
z - - -Number - - - - - - <optional>
- - - - - - 		the z-coordinate (for WebGL mode)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
point(30, 20);
point(85, 20);
point(85, 75);
point(30, 75);
- - - -
- - - - -
- -

- - inner pop() - - -
- jsboot/p5.js, - line 631 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
translate(50, 0);
strokeWeight(10);
fill(204, 153, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner pow(n, e) → {Number} - - -
- jsboot/p5math.js, - line 570 -
- -

- - - -
-
- - -
- Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to Math.pow(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - base of the exponential expression
e - - -Number - - - - power by which to raise the base
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- n^e - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 45 -
- -

- - - -
-
- - -
- The println() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 26 -
- -

- - - -
-
- - -
- The print() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner push() - - -
- jsboot/p5.js, - line 580 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
translate(50, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner quad(x1, y1, x2, y2, x3, y3, x4, y4) - - -
- jsboot/p5shape.js, - line 211 -
- -

- - - -
-
- - -
- Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
x3 - - -Number - - - - the x-coordinate of the third point
y3 - - -Number - - - - the y-coordinate of the third point
x4 - - -Number - - - - the x-coordinate of the fourth point
y4 - - -Number - - - - the y-coordinate of the fourth point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
quad(38, 31, 86, 20, 69, 63, 30, 76);
- - - -
- - - - -
- -

- - inner radians(degrees) → {Number} - - -
- jsboot/p5math.js, - line 1402 -
- -

- - - -
-
- - -
- Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
degrees - - -Number - - - - the degree value to convert to radians
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians
- - - -
- - - - -
- -

- - inner random(minopt, maxopt) → {Number} - - -
- jsboot/p5math.js, - line 817 -
- -

- - - -
-
- - -
- Return a random floating-point number. Takes either 0, 1 or 2 arguments. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If one argument is given and it is an array, returns a random element from that array. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
min - - -Number - - - - - - <optional>
- - - - - - 		the lower bound (inclusive)
max - - -Number - - - - - - <optional>
- - - - - - 		the upper bound (exclusive)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word
- - - -
- - - - -
- -

- - inner randomGaussian(mean, sd) → {Number} - - -
- jsboot/p5math.js, - line 882 -
- -

- - - -
-
- - -
- Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned.

Takes either 0, 1 or 2 arguments.
If no args, returns a mean of 0 and standard deviation of 1.
If one arg, that arg is the mean (standard deviation is 1).
If two args, first is mean, second is standard deviation. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mean - - -Number - - - - the mean
sd - - -Number - - - - the standard deviation
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}
- - - -
- - - - -
- -

- - inner randomSeed(seed) - - -
- jsboot/p5math.js, - line 794 -
- -

- - - -
-
- - -
- Sets the seed value for random(). By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
seed - - -Number - - - - the seed value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}
- - - -
- - - - -
- -

- - inner rect(x, y, w, h) - - -
- jsboot/p5shape.js, - line 240 -
- -

- - - -
-
- - -
- Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the rectangle.
y - - -Number - - - - y-coordinate of the rectangle.
w - - -Number - - - - width of the rectangle.
h - - -Number - - - - height of the rectangle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a rectangle at location (30, 20) with a width and height of 55.
rect(30, 20, 55, 55);
- - - -
- - - - -
- -

- - inner rectMode(mode) - - -
- jsboot/p5shape.js, - line 568 -
- -

- - - -
-
- - -
- Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, CENTER, or RADIUS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rectMode(CORNER); // Default rectMode is CORNER
fill(255); // Set fill to white
rect(25, 25, 50, 50); // Draw white rect using CORNER mode

rectMode(CORNERS); // Set rectMode to CORNERS
fill(100); // Set fill to gray
rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode

rectMode(RADIUS); // Set rectMode to RADIUS
fill(255); // Set fill to white
rect(50, 50, 30, 30); // Draw white rect using RADIUS mode

rectMode(CENTER); // Set rectMode to CENTER
fill(100); // Set fill to gray
rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- - - -
- - - - -
- -

- - inner red(color) → {Number} - - -
- jsboot/p5color.js, - line 1644 -
- -

- - - -
-
- - -
- Extracts the red value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the red value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let redValue = red(c); // Get red in 'c'
print(redValue); // Print "255.0"
fill(redValue, 0, 0); // Use 'redValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle

colorMode(RGB, 255);
let c = color(127, 255, 0);
colorMode(RGB, 1);
let myColor = red(c);
print(myColor);
- - - -
- - - - -
- -

- - inner redraw(nopt) - - -
- jsboot/p5.js, - line 325 -
- -

- - - -
-
- - -
- Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.

In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).

The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop().

In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Integer - - - - - - <optional>
- - - - - - 		Redraw for n-times. The default value is 1.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}
- - - -
- - - - -
- -

- - inner resetMatrix() - - -
- jsboot/p5trans.js, - line 192 -
- -

- - - -
-
- - -
- Replaces the current matrix with the identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(50, 50);
applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
rect(0, 0, 20, 20);
// Note that the translate is also reset.
resetMatrix();
rect(0, 0, 20, 20);
- - - -
- - - - -
- -

- - inner reverse(list) → {Array} - - -
- jsboot/p5util.js, - line 148 -
- -

- - - -
-
- - -
- Reverses the order of an array, maps to Array.reverse() -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to reverse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the reversed list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}
- - - -
- - - - -
- -

- - inner rotate(angle) - - -
- jsboot/p5trans.js, - line 208 -
- -

- - - -
-
- - -
- Rotates a shape the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.

Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again.

Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle of rotation, specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 52, 52);
- - - -
- - - - -
- -

- - inner round(n) → {Integer} - - -
- jsboot/p5math.js, - line 598 -
- -

- - - -
-
- - -
- Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner saturation(color) → {Number} - - -
- jsboot/p5color.js, - line 1671 -
- -

- - - -
-
- - -
- Extracts the saturation value from a color or pixel array. Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the saturation value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = saturation(c); // Sets 'value' to 126
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner saveStrings(list, filename, extensionopt) - - -
- jsboot/p5.js, - line 436 -
- -

- - - -
-
- - -
- Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array.<String> - - - - - - - - - - string array to be written
filename - - -String - - - - - - - - - - filename for output
extension - - -String - - - - - - <optional>
- - - - - - 		the filename's extension
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let words = 'apple bear cat dog';

// .split() outputs an Array
let list = split(words, ' ');

function setup() {
  createCanvas(100, 100);
  background(200);
  text('click here to save', 10, 10, 70, 80);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    saveStrings(list, 'nouns.txt');
  }
}

// Saves the following to a file called 'nouns.txt':
//
// apple
// bear
// cat
// dog
- - - -
- - - - -
- -

- - inner scale(s, yopt) - - -
- jsboot/p5trans.js, - line 366 -
- -

- - - -
-
- - -
- Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.

Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.

Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
s - - -Number -| - -p5.Vector -| - -Array.<Number> - - - - - - - - - - percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given
y - - -Number - - - - - - <optional>
- - - - - - 		percent to scale the object in the y-axis
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

rect(30, 20, 50, 50);
scale(0.5, 1.3);
rect(30, 20, 50, 50);
- - - -
- - - - -
- -

- - inner scale(scales) - - -
- jsboot/p5trans.js, - line 396 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
scales - - -p5.Vector -| - -Array.<Number> - - - - per-axis percents to scale the object
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner second() → {Integer} - - -
- jsboot/p5util.js, - line 1138 -
- -

- - - -
-
- - -
- The second() function returns the current second as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current second - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var s = second();
text('Current second: \n' + s, 5, 50);
- - - -
- - - - -
- -

- - inner setAlpha(alpha) - - -
- jsboot/p5color.js, - line 595 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
alpha - - -Number - - - - the new alpha value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let squareColor;

function setup() {
  ellipseMode(CORNERS);
  strokeWeight(4);
  squareColor = color(100, 50, 150);
}

function draw() {
  background(255);

  noFill();
  stroke(0);
  ellipse(10, 10, width - 10, height - 10);

  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  fill(squareColor);
  noStroke();
  rect(13, 13, width - 26, height - 26);
}
- - - -
- - - - -
- -

- - inner setBlue(blue) - - -
- jsboot/p5color.js, - line 575 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
blue - - -Number - - - - the new blue value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setGreen(green) - - -
- jsboot/p5color.js, - line 555 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
green - - -Number - - - - the new green value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setRed(red) - - -
- jsboot/p5color.js, - line 535 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
red - - -Number - - - - the new red value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner shearX(angle) - - -
- jsboot/p5trans.js, - line 245 -
- -

- - - -
-
- - -
- Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shearY(angle) - - -
- jsboot/p5trans.js, - line 279 -
- -

- - - -
-
- - -
- Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shorten(list) → {Array} - - -
- jsboot/p5util.js, - line 167 -
- -

- - - -
-
- - -
- Decreases an array by one element and returns the shortened array, maps to Array.pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to shorten
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shortened Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}
- - - -
- - - - -
- -

- - inner shuffle(array, boolopt) → {Array} - - -
- jsboot/p5util.js, - line 188 -
- -

- - - -
-
- - -
- Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
array - - -Array - - - - - - - - - - Array to shuffle
bool - - -Boolean - - - - - - <optional>
- - - - - - 		modify passed array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shuffled Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}
- - - -
- - - - -
- -

- - inner sin(angle) → {Number} - - -
- jsboot/p5math.js, - line 1339 -
- -

- - - -
-
- - -
- Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the sine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner sort(list, countopt) → {Array} - - -
- jsboot/p5util.js, - line 228 -
- -

- - - -
-
- - -
- Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to sort
count - - -Integer - - - - - - <optional>
- - - - - - 		number of elements to sort, starting from 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the sorted list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}
- - - -
- - - - -
- -

- - inner splice(list, value, position) → {Array} - - -
- jsboot/p5util.js, - line 272 -
- -

- - - -
-
- - -
- Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to splice into
value - - -any - - - - value to be spliced in
position - - -Integer - - - - in the array from which to insert data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}
- - - -
- - - - -
- -

- - inner split(value, delim) → {Array.<String>} - - -
- jsboot/p5util.js, - line 965 -
- -

- - - -
-
- - -
- The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - the String to be split
delim - - -String - - - - the String used to separate the data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
- - - -
- - - - -
- -

- - inner splitTokens(value, delimopt) → {Array.<String>} - - -
- jsboot/p5util.js, - line 991 -
- -

- - - -
-
- - -
- The splitTokens() function splits a String at one or many character delimiters or "tokens." The delim parameter specifies the character or characters to be used as a boundary.

If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -String - - - - - - - - - - the String to be split
delim - - -String - - - - - - <optional>
- - - - - - 		list of individual Strings that will be used as separators
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
- - - -
- - - - -
- -

- - inner sq(n) → {Number} - - -
- jsboot/p5math.js, - line 631 -
- -

- - - -
-
- - -
- Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to square
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- squared number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner sqrt(n) → {Number} - - -
- jsboot/p5math.js, - line 672 -
- -

- - - -
-
- - -
- Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - non-negative number to square root
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- square root of number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner square(x, y, s) - - -
- jsboot/p5shape.js, - line 331 -
- -

- - - -
-
- - -
- Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the square.
y - - -Number - - - - y-coordinate of the square.
s - - -Number - - - - side size of the square.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
- - - -
- - - - -
- -

- - inner str(n) → {String} - - -
- jsboot/p5util.js, - line 398 -
- -

- - - -
-
- - -
- Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
- - - -
- - - - -
- -

- - inner stroke(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2170 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(value) - - -
- jsboot/p5color.js, - line 2165 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(color) - - -
- jsboot/p5color.js, - line 2182 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the stroke color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 2084 -
- -

- - - -
-
- - -
- Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the stroke color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
strokeWeight(4);
stroke(51);
rect(20, 20, 60, 60);

// R, G & B integer values
stroke(255, 204, 0);
strokeWeight(4);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
strokeWeight(4);
stroke(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
stroke('red');
strokeWeight(4);
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
stroke('#fae');
strokeWeight(4);
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
stroke('#222222');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGB notation
stroke('rgb(0,255,0)');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGBA notation
stroke('rgba(0,255,0,0.25)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGB notation
stroke('rgb(100%,0%,10%)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGBA notation
stroke('rgba(100%,0%,100%,0.5)');
strokeWeight(4);
rect(20, 20, 60, 60);

// p5 Color object
stroke(color(0, 0, 255));
strokeWeight(4);
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner stroke(values) - - -
- jsboot/p5color.js, - line 2176 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner strokeWeight(weight) - - -
- jsboot/p5shape.js, - line 810 -
- -

- - - -
-
- - -
- Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
weight - - -Number - - - - the weight (in pixels) of the stroke
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(1); // Default
line(20, 20, 80, 20);
strokeWeight(4); // Thicker
line(20, 40, 80, 40);
strokeWeight(10); // Beastly
line(20, 70, 80, 70);
- - - -
- - - - -
- -

- - inner subset(list, start, countopt) → {Array} - - -
- jsboot/p5util.js, - line 304 -
- -

- - - -
-
- - -
- Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to extract from
start - - -Integer - - - - - - - - - - position to begin
count - - -Integer - - - - - - <optional>
- - - - - - 		number of values to extract
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- Array of extracted elements - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}
- - - -
- - - - -
- -

- - inner tan(angle) → {Number} - - -
- jsboot/p5math.js, - line 1359 -
- -

- - - -
-
- - -
- Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the tangent of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner text(str, x, y) - - -
- jsboot/p5typo.js, - line 39 -
- -

- - - -
-
- - -
- Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.

The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.

The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String -| - -Object -| - -Array -| - -Number -| - -Boolean - - - - the alphanumeric symbols to be displayed
x - - -Number - - - - x-coordinate of text
y - - -Number - - - - y-coordinate of text
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}
- - - -
- - - - -
- -

- - inner textAlign(horizAlign, vertAlignopt) - - -
- jsboot/p5typo.js, - line 148 -
- -

- - - -
-
- - -
- Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
horizAlign - - -Constant - - - - - - - - - - horizontal alignment, either LEFT, CENTER, or RIGHT
vertAlign - - -Constant - - - - - - <optional>
- - - - - - 		vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);
- - - -
- - - - -
- -

- - inner textFont() → {Object} - - -
- jsboot/p5typo.js, - line 114 -
- -

- - - -
-
- - -
- Sets the current font that will be drawn with the text() function.

-
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- the current font - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}
- - - -
- - - - -
- -

- - inner textSize() → {Number} - - -
- jsboot/p5typo.js, - line 230 -
- -

- - - -
-
- - -
- Gets the current font size. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner textWidth(theText) → {Number} - - -
- jsboot/p5typo.js, - line 203 -
- -

- - - -
-
- - -
- Calculates and returns the width of any character or text string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
theText - - -String - - - - the String of characters to measure
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);
- - - -
- - - - -
- -

- - inner toString(formatopt) → {String} - - -
- jsboot/p5color.js, - line 341 -
- -

- - - -
-
- - -
- This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
format - - -String - - - - - - <optional>
- - - - - - 		How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- the formatted string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let myColor;
function setup() {
  createCanvas(200, 200);
  stroke(255);
  myColor = color(100, 100, 250);
  fill(myColor);
}

function draw() {
  rotate(HALF_PI);
  text(myColor.toString(), 0, -5);
  text(myColor.toString('#rrggbb'), 0, -30);
  text(myColor.toString('rgba%'), 0, -55);
}
- - - -
- - - - -
- -

- - inner translate(vector) - - -
- jsboot/p5trans.js, - line 347 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
vector - - -p5.Vector - - - - the vector to translate by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner translate(x, y, zopt) - - -
- jsboot/p5trans.js, - line 313 -
- -

- - - -
-
- - -
- Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.

Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - left/right translation
y - - -Number - - - - - - - - - - up/down translation
z - - -Number - - - - - - <optional>
- - - - - - 		forward/backward translation (webgl only)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(30, 20);
rect(0, 0, 55, 55);

rect(0, 0, 55, 55); // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55); // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55); // Draw rect at new 0,0

function draw() {
  background(200);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  translate(p5.Vector.fromAngle(millis() / 1000, 40));
  rect(0, 0, 20, 20);
}
- - - -
- - - - -
- -

- - inner triangle(x1, y1, x2, y2, x3, y3) - - -
- jsboot/p5shape.js, - line 356 -
- -

- - - -
-
- - -
- A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
x3 - - -Number - - - - x-coordinate of the third point
y3 - - -Number - - - - y-coordinate of the third point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
triangle(30, 75, 58, 20, 86, 75);
- - - -
- - - - -
- -

- - inner trim(str) → {String} - - -
- jsboot/p5util.js, - line 1042 -
- -

- - - -
-
- - -
- Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - a String to be trimmed
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- a trimmed String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);
- - - -
- - - - -
- -

- - inner unchar(n) → {Number} - - -
- jsboot/p5util.js, - line 508 -
- -

- - - -
-
- - -
- Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
- - - -
- - - - -
- -

- - inner unhex(n) → {Number} - - -
- jsboot/p5util.js, - line 569 -
- -

- - - -
-
- - -
- Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of hexadecimal value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
- - - -
- - - - -
- -

- - inner vertex(x, y) - - -
- jsboot/p5shape.js, - line 460 -
- -

- - - -
-
- - -
- All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the vertex
y - - -Number - - - - y-coordinate of the vertex
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(3);
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
- - - -
- - - - -
- -

- - inner year() → {Integer} - - -
- jsboot/p5util.js, - line 1151 -
- -

- - - -
-
- - -
- The year() returns the current year as an integer (2014, 2015, 2016, etc). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current year - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var y = year();
text('Current year: \n' + y, 5, 50);
- - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

p5compat

- - - - -
- -
- -
- - -
This module provides compatibility with p5js. Use Include('p5'); on the first line of your script to activate.
- - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - -

Classes

- - -
- -
-

- Color -
- module:p5compat~Color -
-

-
- - -
- - - - - - - - - - -

Members

- -
- - -
-

- static ColorConversion - -
- jsboot/p5color.js, - line 41 -
- -

- - -
-
- -
- Conversions adapted from . In these functions, hue is always in the range [0, 1], just like all other components are in the range [0, 1]. 'Brightness' and 'value' are used interchangeably. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly displayHeight - -
- jsboot/p5env.js, - line 202 -
- -

- - -
-
- -
- System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly displayWidth - -
- jsboot/p5env.js, - line 189 -
- -

- - -
-
- -
- System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly focused - -
- jsboot/p5env.js, - line 109 -
- -

- - -
-
- -
- Confirms if the window a p5.js program is in is "focused," meaning that the sketch will accept mouse or keyboard input. This variable is "true" if the window is focused and "false" if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
focused - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// To demonstrate, put two windows side by side.
// Click on the window that the p5 sketch isn't in!
function draw() {
  background(200);
  noStroke();
  fill(0, 200, 0);
  ellipse(25, 25, 50, 50);

  if (!focused) {
    // or "if (focused === false)"
    stroke(200, 0, 0);
    line(0, 0, 100, 100);
    line(100, 0, 0, 100);
  }
}
- - -
- - - - -
-

- static, readonly frameCount - -
- jsboot/p5env.js, - line 83 -
- -

- - -
-
- -
- The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
frameCount - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
- - -
- - - - -
-

- static, readonly height - -
- jsboot/p5env.js, - line 238 -
- -

- - -
-
- -
- System variable that stores the height of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
height - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly key - -
- jsboot/p5input.js, - line 507 -
- -

- - -
-
- -
- The system variable key always contains the value of the most recent key on the keyboard that was typed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Click any key to display it!
// (Not Guaranteed to be Case Sensitive)
function setup() {
  fill(245, 123, 158);
  textSize(50);
}

function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}
- - -
- - - - -
-

- static, readonly keyCode - -
- jsboot/p5input.js, - line 532 -
- -

- - -
-
- -
- The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyCode - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let fillVal = 126;
function draw() {
  fill(fillVal);
  rect(25, 25, 50, 50);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    fillVal = 255;
  } else if (keyCode === DOWN_ARROW) {
    fillVal = 0;
  }
  return false; // prevent default
}
- - -
- - - - -
-

- static, readonly keyIsPressed - -
- jsboot/p5input.js, - line 486 -
- -

- - -
-
- -
- The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
- - -
- - - - -
-

- static, readonly mouseButton - -
- jsboot/p5input.js, - line 278 -
- -

- - -
-
- -
- Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseButton - - -Constant - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      ellipse(50, 50, 50, 50);
    }
    if (mouseButton === RIGHT) {
      rect(25, 25, 50, 50);
    }
    if (mouseButton === CENTER) {
      triangle(23, 75, 50, 20, 78, 75);
    }
  }

  print(mouseButton);
}
- - -
- - - - -
-

- static, readonly mouseIsPressed - -
- jsboot/p5input.js, - line 301 -
- -

- - -
-
- -
- The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }

  print(mouseIsPressed);
}
- - -
- - - - -
-

- static, readonly mouseX - -
- jsboot/p5input.js, - line 53 -
- -

- - -
-
- -
- The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
- - -
- - - - -
-

- static, readonly mouseY - -
- jsboot/p5input.js, - line 71 -
- -

- - -
-
- -
- The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
- - -
- - - - -
-

- static, readonly pmouseX - -
- jsboot/p5input.js, - line 95 -
- -

- - -
-
- -
- The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas to leave a trail
function setup() {
  //slow down the frameRate to make it more visible
  frameRate(10);
}

function draw() {
  background(244, 248, 252);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + ' -> ' + mouseX);
}
- - -
- - - - -
-

- static, readonly pmouseY - -
- jsboot/p5input.js, - line 118 -
- -

- - -
-
- -
- The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);
  //draw a square only if the mouse is not moving
  if (mouseY === pmouseY && mouseX === pmouseX) {
    rect(20, 20, 60, 60);
  }

  print(pmouseY + ' -> ' + mouseY);
}
- - -
- - - - -
-

- static, readonly pwinMouseX - -
- jsboot/p5input.js, - line 213 -
- -

- - -
-
- -
- The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current x position is the horizontal mouse speed
  let speed = abs(winMouseX - pwinMouseX);
  //change the size of the circle
  //according to the horizontal speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly pwinMouseY - -
- jsboot/p5input.js, - line 247 -
- -

- - -
-
- -
- The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current y position is the vertical mouse speed
  let speed = abs(winMouseY - pwinMouseY);
  //change the size of the circle
  //according to the vertical speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly width - -
- jsboot/p5env.js, - line 230 -
- -

- - -
-
- -
- System variable that stores the width of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
width - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly windowHeight - -
- jsboot/p5env.js, - line 222 -
- -

- - -
-
- -
- System variable that stores the height of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly windowWidth - -
- jsboot/p5env.js, - line 212 -
- -

- - -
-
- -
- System variable that stores the width of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly winMouseX - -
- jsboot/p5input.js, - line 149 -
- -

- - -
-
- -
- The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the horizontal mouse position
  //relative to the window
  myCanvas.position(winMouseX + 1, windowHeight / 2);

  //the y of the square is relative to the canvas
  rect(20, mouseY, 60, 60);
}
- - -
- - - - -
-

- static, readonly winMouseY - -
- jsboot/p5input.js, - line 180 -
- -

- - -
-
- -
- The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the vertical mouse position
  //relative to the window
  myCanvas.position(windowWidth / 2, winMouseY + 1);

  //the x of the square is relative to the canvas
  rect(mouseX, 20, 60, 60);
}
- - -
- - - - -
-

- inner colorPatterns - -
- jsboot/p5color.js, - line 888 -
- -

- - -
-
- -
- Full color string patterns. The capture groups are necessary. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner namedColors - -
- jsboot/p5color.js, - line 722 -
- -

- - -
-
- -
- CSS named colors. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner WHITESPACE - -
- jsboot/p5color.js, - line 880 -
- -

- - -
-
- -
- These regular expressions are used to build up the patterns for matching viable CSS color strings: fragmenting the regexes in this way increases the legibility and comprehensibility of the code. Note that RGB values of .9 are not parsed by IE, but are supported here for color string consistency. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - static _cloneEnv() - - -
- jsboot/p5.js, - line 67 -
- -

- - - -
-
- - -
- deep copy the current environment. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _ensureMatrix() - - -
- jsboot/p5trans.js, - line 34 -
- -

- - - -
-
- - -
- make sure we have a 2x2 identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _PolyLine() - - -
- jsboot/p5shape.js, - line 550 -
- -

- - - -
-
- - -
- draw polygon by using lines. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transX(x, y) → {number} - - -
- jsboot/p5trans.js, - line 67 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated x coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transY(x, y) → {number} - - -
- jsboot/p5trans.js, - line 82 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated y coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static createCanvas() - - -
- jsboot/p5.js, - line 201 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static exit() - - -
- jsboot/p5.js, - line 231 -
- -

- - - -
-
- - -
- exit the script after the current Loop(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noSmooth() - - -
- jsboot/p5.js, - line 211 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noTint() - - -
- jsboot/p5.js, - line 226 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static settings() - - -
- jsboot/p5.js, - line 216 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static size() - - -
- jsboot/p5.js, - line 196 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static smooth() - - -
- jsboot/p5.js, - line 206 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static tint() - - -
- jsboot/p5.js, - line 221 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner abs(n) → {Number} - - -
- jsboot/p5math.js, - line 59 -
- -

- - - -
-
- - -
- Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to compute
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- absolute value of given number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
- - - -
- - - - -
- -

- - inner acos(value) → {Number} - - -
- jsboot/p5math.js, - line 1211 -
- -

- - - -
-
- - -
- The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc cosine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc cosine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);
- - - -
- - - - -
- -

- - inner alpha(color) → {Number} - - -
- jsboot/p5color.js, - line 1271 -
- -

- - - -
-
- - -
- Extracts the alpha value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the alpha value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
let c = color(0, 126, 255, 102);
fill(c);
rect(15, 15, 35, 70);
let value = alpha(c); // Sets 'value' to 102
fill(value);
rect(50, 15, 35, 70);
- - - -
- - - - -
- -

- - inner angleMode(mode) - - -
- jsboot/p5math.js, - line 1423 -
- -

- - - -
-
- - -
- Sets the current mode of p5 to given mode. Default mode is RADIANS. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either RADIANS or DEGREES
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}
- - - -
- - - - -
- -

- - inner append(array, value) → {Array} - - -
- jsboot/p5util.js, - line 30 -
- -

- - - -
-
- - -
- Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
array - - -Array - - - - Array to append
value - - -any - - - - to be added to the Array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the array that was appended to - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}
- - - -
- - - - -
- -

- - inner applyMatrix(a, b, c, d, e, f) - - -
- jsboot/p5trans.js, - line 90 -
- -

- - - -
-
- - -
- Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia. The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form: > The transformation matrix used when applyMatrix is called -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
b - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
c - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
d - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
e - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
f - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  // Equivalent to translate(x, y);
  applyMatrix(1, 0, 0, 1, 40 + step, 50);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  translate(50, 50);
  // Equivalent to scale(x, y);
  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, 0, TWO_PI);
  var cos_a = cos(angle);
  var sin_a = sin(angle);
  background(200);
  translate(50, 50);
  // Equivalent to rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, -PI / 4, PI / 4);
  background(200);
  translate(50, 50);
  // equivalent to shearX(angle);
  var shear_factor = 1 / tan(PI / 2 - angle);
  applyMatrix(1, 0, shear_factor, 1, 0, 0);
  rect(0, 0, 50, 50);
}
- - - -
- - - - -
- -

- - inner arc(x, y, w, h, start, stop, modeopt) - - -
- jsboot/p5shape.js, - line 33 -
- -

- - - -
-
- - -
- Draw an arc to the screen. If called with only x, y, w, h, start, and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.

The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the arc's ellipse
y - - -Number - - - - - - - - - - y-coordinate of the arc's ellipse
w - - -Number - - - - - - - - - - width of the arc's ellipse by default
h - - -Number - - - - - - - - - - height of the arc's ellipse by default
start - - -Number - - - - - - - - - - angle to start the arc, specified in radians
stop - - -Number - - - - - - - - - - angle to stop the arc, specified in radians
mode - - -Constant - - - - - - <optional>
- - - - - - 		optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
arc(50, 55, 50, 50, 0, HALF_PI);
noFill();
arc(50, 55, 60, 60, HALF_PI, PI);
arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
- - - -
- - - - -
- -

- - inner arrayCopy(src, srcPosition, dst, dstPosition, length) - - -
- jsboot/p5util.js, - line 52 -
- -

- - - -
-
- - -
- Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().

The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).

Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
src - - -Array - - - - the source Array
srcPosition - - -Integer - - - - starting position in the source Array
dst - - -Array - - - - the destination Array
dstPosition - - -Integer - - - - starting position in the destination Array
length - - -Integer - - - - number of Array elements to be copied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - -
Deprecated:
  • Yes
- - - - - - - - - - - - - - - -
- - - -
Example
- - 
var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]
- - - -
- - - - -
- -

- - inner asin(value) → {Number} - - -
- jsboot/p5math.js, - line 1237 -
- -

- - - -
-
- - -
- The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc sine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc sine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);
- - - -
- - - - -
- -

- - inner atan(value) → {Number} - - -
- jsboot/p5math.js, - line 1264 -
- -

- - - -
-
- - -
- The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc tangent is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);
- - - -
- - - - -
- -

- - inner atan2(y, x) → {Number} - - -
- jsboot/p5math.js, - line 1291 -
- -

- - - -
-
- - -
- Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor.

Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
y - - -Number - - - - y-coordinate of the point
x - - -Number - - - - x-coordinate of the point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given point - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}
- - - -
- - - - -
- -

- - inner background(color) - - -
- jsboot/p5color.js, - line 1702 -
- -

- - - -
-
- - -
- The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A Color object can also be provided to set the background color.

An Image can also be provided to set the background image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - any value created by the color() function
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
background(51);

// R, G & B integer values
background(255, 204, 0);

// H, S & B integer values
colorMode(HSB);
background(255, 204, 100);

// Named SVG/CSS color string
background('red');

// three-digit hexadecimal RGB notation
background('#fae');

// six-digit hexadecimal RGB notation
background('#222222');

// integer RGB notation
background('rgb(0,255,0)');

// integer RGBA notation
background('rgba(0,255,0, 0.25)');

// percentage RGB notation
background('rgb(100%,0%,10%)');

// percentage RGBA notation
background('rgba(100%,0%,100%,0.5)');

// p5 Color object
background(color(0, 0, 255));
- - - -
- - - - -
- -

- - inner background(colorstring, aopt) - - -
- jsboot/p5color.js, - line 1760 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
colorstring - - -String - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex
a - - -Number - - - - - - <optional>
- - - - - - 		opacity of the background relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(gray, aopt) - - -
- jsboot/p5color.js, - line 1769 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - specifies a value between white and black
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(v1, v2, v3, aopt) - - -
- jsboot/p5color.js, - line 1775 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value (depending on the current color mode)
v2 - - -Number - - - - - - - - - - green or saturation value (depending on the current color mode)
v3 - - -Number - - - - - - - - - - blue or brightness value (depending on the current color mode)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(values) - - -
- jsboot/p5color.js, - line 1786 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(bitmap, aopt) - - -
- jsboot/p5color.js, - line 1792 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
bitmap - - -Bitmap - - - - - - - - - - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner beginShape(kindopt) - - -
- jsboot/p5shape.js, - line 379 -
- -

- - - -
-
- - -
- Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.

The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.

Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
kind - - -Constant - - - - - - <optional>
- - - - - - 		either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

beginShape(LINES);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();

beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
- - - -
- - - - -
- -

- - inner blue(color) → {Number} - - -
- jsboot/p5color.js, - line 1291 -
- -

- - - -
-
- - -
- Extracts the blue value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the blue value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(175, 100, 220); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let blueValue = blue(c); // Get blue in 'c'
print(blueValue); // Prints "220.0"
fill(0, 0, blueValue); // Use 'blueValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner boolean(n) → {Boolean} - - -
- jsboot/p5util.js, - line 422 -
- -

- - - -
-
- - -
- Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
- - - -
- - - - -
- -

- - inner brightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1312 -
- -

- - - -
-
- - -
- Extracts the HSB brightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the brightness value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = brightness(c); // Sets 'value' to 255
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner byte(n) → {Number} - - -
- jsboot/p5util.js, - line 452 -
- -

- - - -
-
- - -
- Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- byte representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]
- - - -
- - - - -
- -

- - inner ceil(n) → {Integer} - - -
- jsboot/p5math.js, - line 77 -
- -

- - - -
-
- - -
- Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round up
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded up number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner char(n) → {String} - - -
- jsboot/p5util.js, - line 481 -
- -

- - - -
-
- - -
- Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
- - - -
- - - - -
- -

- - inner circle(x, y, d) - - -
- jsboot/p5shape.js, - line 133 -
- -

- - - -
-
- - -
- Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the centre of the circle.
y - - -Number - - - - y-coordinate of the centre of the circle.
d - - -Number - - - - diameter of the circle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a circle at location (30, 30) with a diameter of 20.
circle(30, 30, 20);
- - - -
- - - - -
- -

- - inner clear() - - -
- jsboot/p5color.js, - line 1813 -
- -

- - - -
-
- - -
- Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
  clear();
}
- - - -
- - - - -
- -

- - inner color(color) → {Color} - - -
- jsboot/p5color.js, - line 1472 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(value) → {Color} - - -
- jsboot/p5color.js, - line 1461 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(v1, v2, v3, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1449 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(values) → {Color} - - -
- jsboot/p5color.js, - line 1466 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(gray, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1333 -
- -

- - - -
-
- - -
- Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.

Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - number specifying value between white and black.
alpha - - -Number - - - - - - <optional>
- - - - - - 		alpha value relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- resulting color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(30, 20, 55, 55); // Draw rectangle

let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
ellipse(25, 25, 80, 80); // Draw left circle

// Using only one value with color()
// generates a grayscale value.
c = color(65); // Update 'c' with grayscale value
fill(c); // Use updated 'c' as fill color
ellipse(75, 75, 80, 80); // Draw right circle

// Named SVG & CSS colors may be used,
let c = color('magenta');
fill(c); // Use 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(20, 20, 60, 60); // Draw rectangle

// as can hex color codes:
noStroke(); // Don't draw a stroke around shapes
let c = color('#0f0');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('#00ff00');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// RGB and RGBA color strings are also supported:
// these all set to the same color (solid blue)
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('rgb(0,0,255)');
fill(c); // Use 'c' as fill color
rect(10, 10, 35, 35); // Draw rectangle

c = color('rgb(0%, 0%, 100%)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 35, 35); // Draw rectangle

c = color('rgba(0, 0, 255, 1)');
fill(c); // Use updated 'c' as fill color
rect(10, 55, 35, 35); // Draw rectangle

c = color('rgba(0%, 0%, 100%, 1)');
fill(c); // Use updated 'c' as fill color
rect(55, 55, 35, 35); // Draw rectangle

// HSL color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsl(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsla(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// HSB color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsb(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsba(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

let c; // Declare color 'c'
noStroke(); // Don't draw a stroke around shapes

// If no colorMode is specified, then the
// default of RGB with scale of 0-255 is used.
c = color(50, 55, 100); // Create a color for 'c'
fill(c); // Use color variable 'c' as fill color
rect(0, 10, 45, 80); // Draw left rect

colorMode(HSB, 100); // Use HSB with scale of 0-100
c = color(50, 55, 100); // Update 'c' with new color
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw right rect
- - - -
- - - - -
- -

- - inner colorMode(mode, maxopt) - - -
- jsboot/p5color.js, - line 1841 -
- -

- - - -
-
- - -
- colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.

Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - - either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
max - - -Number - - - - - - <optional>
- - - - - - 		range for all values
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(RGB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 0);
    point(i, j);
  }
}

noStroke();
colorMode(HSB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 100);
    point(i, j);
  }
}

colorMode(RGB, 255);
let c = color(127, 255, 0);

colorMode(RGB, 1);
let myColor = c._getRed();
text(myColor, 10, 10, 80, 80);

noFill();
colorMode(RGB, 255, 255, 255, 1);
background(255);

strokeWeight(4);
stroke(255, 0, 10, 0.3);
ellipse(40, 40, 50, 50);
ellipse(50, 50, 40, 40);
- - - -
- - - - -
- -

- - inner colorMode(mode, max1, max2, max3, maxAopt) - - -
- jsboot/p5color.js, - line 1894 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - -
max1 - - -Number - - - - - - - - - - range for the red or hue depending on the current color mode
max2 - - -Number - - - - - - - - - - range for the green or saturation depending on the current color mode
max3 - - -Number - - - - - - - - - - range for the blue or brightness/lightness depending on the current color mode
maxA - - -Number - - - - - - <optional>
- - - - - - 		range for the alpha
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner concat(a, b) → {Array} - - -
- jsboot/p5util.js, - line 120 -
- -

- - - -
-
- - -
- Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Array - - - - first Array to concatenate
b - - -Array - - - - second Array to concatenate
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- concatenated array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}
- - - -
- - - - -
- -

- - inner constrain(n, low, high) → {Number} - - -
- jsboot/p5math.js, - line 111 -
- -

- - - -
-
- - -
- Constrains a value between a minimum and maximum value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to constrain
low - - -Number - - - - minimum limit
high - - -Number - - - - maximum limit
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- constrained number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}
- - - -
- - - - -
- -

- - inner cos(angle) → {Number} - - -
- jsboot/p5math.js, - line 1319 -
- -

- - - -
-
- - -
- Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the cosine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner createNumberDict(key, value) → {NumberDict} - - -
- jsboot/p5util.js, - line 1191 -
- -

- - - -
-
- - -
- Creates a new instance of NumberDict using the key-value pair or object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number - - - -
value - - -Number - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -NumberDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}
- - - -
- - - - -
- -

- - inner createStringDict(key, value) → {StringDict} - - -
- jsboot/p5util.js, - line 1168 -
- -

- - - -
-
- - -
- Creates a new instance of p5.StringDict using the key-value pair or the object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
value - - -String - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StringDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}
- - - -
- - - - -
- -

- - inner createVector(xopt, yopt, zopt) → {p5.Vector} - - -
- jsboot/p5math.js, - line 26 -
- -

- - - -
-
- - -
- Creates a new PVector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -p5.Vector - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}
- - - -
- - - - -
- -

- - inner day() → {Integer} - - -
- jsboot/p5util.js, - line 1068 -
- -

- - - -
-
- - -
- The day() function returns the current day as a value from 1 - 31. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current day - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var d = day();
text('Current day: \n' + d, 5, 50);
- - - -
- - - - -
- -

- - inner degrees(radians) → {Number} - - -
- jsboot/p5math.js, - line 1380 -
- -

- - - -
-
- - -
- Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
radians - - -Number - - - - the radians value to convert to degrees
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees
- - - -
- - - - -
- -

- - inner displayDensity() → {Number} - - -
- jsboot/p5.js, - line 385 -
- -

- - - -
-
- - -
- Returns the pixel density of the current display the sketch is running on (always 1 for DOjS). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current pixel density of the display - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner dist(x1, y1, x2, y2) → {Number} - - -
- jsboot/p5math.js, - line 149 -
- -

- - - -
-
- - -
- Calculates the distance between two points. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- distance between the two points - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}
- - - -
- - - - -
- -

- - inner ellipse(x, y, w, hopt) - - -
- jsboot/p5shape.js, - line 77 -
- -

- - - -
-
- - -
- Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The origin may be changed with the ellipseMode() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the ellipse.
y - - -Number - - - - - - - - - - y-coordinate of the ellipse.
w - - -Number - - - - - - - - - - width of the ellipse.
h - - -Number - - - - - - <optional>
- - - - - - 		height of the ellipse.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(56, 46, 55, 55);
- - - -
- - - - -
- -

- - inner ellipseMode(mode) - - -
- jsboot/p5shape.js, - line 623 -
- -

- - - -
-
- - -
- Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are interpreted.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CENTER, RADIUS, CORNER, or CORNERS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipseMode(RADIUS); // Set ellipseMode to RADIUS
fill(255); // Set fill to white
ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER
fill(100); // Set fill to gray
ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode

ellipseMode(CORNER); // Set ellipseMode is CORNER
fill(255); // Set fill to white
ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode

ellipseMode(CORNERS); // Set ellipseMode to CORNERS
fill(100); // Set fill to gray
ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- - - -
- - - - -
- -

- - inner endShape(modeopt) - - -
- jsboot/p5shape.js, - line 482 -
- -

- - - -
-
- - -
- The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - <optional>
- - - - - - 		use CLOSE to close the shape
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noFill();

beginShape();
vertex(20, 20);
vertex(45, 20);
vertex(45, 80);
endShape(CLOSE);

beginShape();
vertex(50, 20);
vertex(75, 20);
vertex(75, 80);
endShape();

TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
- - - -
- - - - -
- -

- - inner exp(n) → {Number} - - -
- jsboot/p5math.js, - line 202 -
- -

- - - -
-
- - -
- Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - exponent to raise
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- e^n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}
- - - -
- - - - -
- -

- - inner fill(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2007 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(value) - - -
- jsboot/p5color.js, - line 2002 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(values) - - -
- jsboot/p5color.js, - line 2013 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(color) - - -
- jsboot/p5color.js, - line 2019 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the fill color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 1934 -
- -

- - - -
-
- - -
- Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the fill color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
fill(51);
rect(20, 20, 60, 60);

// R, G & B integer values
fill(255, 204, 0);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
fill(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
fill('red');
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
fill('#fae');
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
fill('#222222');
rect(20, 20, 60, 60);

// integer RGB notation
fill('rgb(0,255,0)');
rect(20, 20, 60, 60);

// integer RGBA notation
fill('rgba(0,255,0, 0.25)');
rect(20, 20, 60, 60);

// percentage RGB notation
fill('rgb(100%,0%,10%)');
rect(20, 20, 60, 60);

// percentage RGBA notation
fill('rgba(100%,0%,100%,0.5)');
rect(20, 20, 60, 60);

// p5 Color object
fill(color(0, 0, 255));
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner float(str) → {Number} - - -
- jsboot/p5util.js, - line 341 -
- -

- - - -
-
- - -
- Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN. When an array of values is passed in, then an array of floats of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - float string to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- floating point representation of string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);
- - - -
- - - - -
- -

- - inner floor(n) → {Integer} - - -
- jsboot/p5math.js, - line 246 -
- -

- - - -
-
- - -
- Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round down
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded down number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner frameRate(fps) - - -
- jsboot/p5env.js, - line 111 -
- -

- - - -
-
- - -
- Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations This is the same as setFrameRate(val).

Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().

Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fps - - -Number - - - - number of frames to be displayed every second
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rectX = 0;
let fr = 30; //starting FPS
let clr;

function setup() {
  background(200);
  frameRate(fr); // Attempt to refresh at starting FPS
  clr = color(255, 0, 0);
}

function draw() {
  background(200);
  rectX = rectX += 1; // Move Rectangle

  if (rectX >= width) {
    // If you go off screen.
    if (fr === 30) {
      clr = color(0, 0, 255);
      fr = 10;
      frameRate(fr); // make frameRate 10 FPS
    } else {
      clr = color(255, 0, 0);
      fr = 30;
      frameRate(fr); // make frameRate 30 FPS
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}
- - - -
- - - - -
- -

- - inner fullscreen(valopt) → {Boolean} - - -
- jsboot/p5env.js, - line 240 -
- -

- - - -
-
- - -
- If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
val - - -Boolean - - - - - - <optional>
- - - - - - 		whether the sketch should be in fullscreen mode or not
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- current fullscreen state - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clicking in the box toggles fullscreen on and off.
function setup() {
  background(200);
}
function mousePressed() {
  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}
- - - -
- - - - -
- -

- - inner getFrameRate() → {Number} - - -
- jsboot/p5env.js, - line 168 -
- -

- - - -
-
- - -
- Returns the current framerate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current frameRate - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner getURL() → {String} - - -
- jsboot/p5env.js, - line 294 -
- -

- - - -
-
- - -
- Gets the current URL. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- url - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let url;
let x = 100;

function setup() {
  fill(0);
  noStroke();
  url = getURL();
}

function draw() {
  background(200);
  text(url, x, height / 2);
  x--;
}
- - - -
- - - - -
- -

- - inner getURLParams() → {Object} - - -
- jsboot/p5env.js, - line 334 -
- -

- - - -
-
- - -
- Gets the current URL params as an Object. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- URL params - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Example: http://p5js.org?year=2014&month=May&day=15

function setup() {
  let params = getURLParams();
  text(params.day, 10, 20);
  text(params.month, 10, 40);
  text(params.year, 10, 60);
}
- - - -
- - - - -
- -

- - inner getURLPath() → {Array.<String>} - - -
- jsboot/p5env.js, - line 318 -
- -

- - - -
-
- - -
- Gets the current URL path as an array. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- path components - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let urlPath = getURLPath();
  for (let i = 0; i < urlPath.length; i++) {
    text(urlPath[i], 10, i * 20 + 20);
  }
}
- - - -
- - - - -
- -

- - inner green(color) → {Number} - - -
- jsboot/p5color.js, - line 1487 -
- -

- - - -
-
- - -
- Extracts the green value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the green value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(20, 75, 200); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let greenValue = green(c); // Get green in 'c'
print(greenValue); // Print "75.0"
fill(0, greenValue, 0); // Use 'greenValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner hex(n, digitsopt) → {String} - - -
- jsboot/p5util.js, - line 530 -
- -

- - - -
-
- - -
- Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Number - - - - - - - - - - value to parse
digits - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- hexadecimal string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- - - -
- - - - -
- -

- - inner hour() → {Integer} - - -
- jsboot/p5util.js, - line 1082 -
- -

- - - -
-
- - -
- The hour() function returns the current hour as a value from 0 - 23. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current hour - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var h = hour();
text('Current hour:\n' + h, 5, 50);
- - - -
- - - - -
- -

- - inner hue(color) → {Number} - - -
- jsboot/p5color.js, - line 1509 -
- -

- - - -
-
- - -
- Extracts the hue value from a color or pixel array. Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the hue - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = hue(c); // Sets 'value' to "0"
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner image(img, x, y) - - -
- jsboot/p5shape.js, - line 709 -
- -

- - - -
-
- - -
- Draw an image to the p5.js canvas. This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image. This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
img - - -Bitmap - - - - the image to display
x - - -Number - - - - the x-coordinate of the top-left corner of the image
y - - -Number - - - - the y-coordinate of the top-left corner of the image
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner imageMode(mode) - - -
- jsboot/p5shape.js, - line 759 -
- -

- - - -
-
- - -
- Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.

imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.

imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, or CENTER
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNER);
  image(img, 10, 10, 50, 50);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNERS);
  image(img, 10, 10, 90, 40);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CENTER);
  image(img, 50, 50, 80, 80);
}
- - - -
- - - - -
- -

- - inner int(n, radixopt) → {Number} - - -
- jsboot/p5util.js, - line 365 -
- -

- - - -
-
- - -
- Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -String -| - -Boolean -| - -Number - - - - - - - - - - value to parse
radix - - -Integer - - - - - - <optional>
- - - - - - 		the radix to convert to (default: 10)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
- - - -
- - - - -
- -

- - inner join(list, separator) → {String} - - -
- jsboot/p5util.js, - line 595 -
- -

- - - -
-
- - -
- Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - array of Strings to be joined
separator - - -String - - - - String to be placed between each item
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- joined String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);
- - - -
- - - - -
- -

- - inner keyPressed() - - -
- jsboot/p5input.js, - line 534 -
- -

- - - -
-
- - -
- The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    value = 255;
  } else if (keyCode === RIGHT_ARROW) {
    value = 0;
  }
}
- - - -
- - - - -
- -

- - inner keyReleased() - - -
- jsboot/p5input.js, - line 568 -
- -

- - - -
-
- - -
- The keyReleased() function is called once every time a key is released. See key and keyCode for more information.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
  return false; // prevent any default behavior
}
- - - -
- - - - -
- -

- - inner keyTyped() - - -
- jsboot/p5input.js, - line 592 -
- -

- - - -
-
- - -
- The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. The most recent key pressed will be stored in the key variable.

Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyTyped() {
  if (key === 'a') {
    value = 255;
  } else if (key === 'b') {
    value = 0;
  }
  // uncomment to prevent any default behavior
  // return false;
}
- - - -
- - - - -
- -

- - inner lerp(start, stop, amt) → {Number} - - -
- jsboot/p5math.js, - line 279 -
- -

- - - -
-
- - -
- Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
start - - -Number - - - - first value
stop - - -Number - - - - second value
amt - - -Number - - - - number
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- lerped value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}
- - - -
- - - - -
- -

- - inner lerpColor(c1, c2, amt) → {Color} - - -
- jsboot/p5color.js, - line 1536 -
- -

- - - -
-
- - -
- Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.

The way that colours are interpolated depends on the current color mode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c1 - - -Color - - - - interpolate from this color
c2 - - -Color - - - - interpolate to this color
amt - - -Number - - - - number between 0 and 1
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- interpolated color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
colorMode(RGB);
stroke(255);
background(51);
let from = color(218, 165, 32);
let to = color(72, 61, 139);
colorMode(RGB); // Try changing to HSB.
let interA = lerpColor(from, to, 0.33);
let interB = lerpColor(from, to, 0.66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
- - - -
- - - - -
- -

- - inner lightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1623 -
- -

- - - -
-
- - -
- Extracts the HSL lightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the lightness - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSL);
let c = color(156, 100, 50, 1);
fill(c);
rect(15, 20, 35, 60);
let value = lightness(c); // Sets 'value' to 50
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner line(x1, y1, x2, y2) - - -
- jsboot/p5shape.js, - line 152 -
- -

- - - -
-
- - -
- Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
line(30, 20, 85, 75);

line(30, 20, 85, 20);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
line(85, 75, 30, 75);
- - - -
- - - - -
- -

- - inner loadBytes(file) → {Array.<number>} - - -
- jsboot/p5.js, - line 543 -
- -

- - - -
-
- - -
- This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
file - - -string - - - - name of the file or URL to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<number> - - - - - -- an object whose 'bytes' property will be the loaded buffer - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let data;

function preload() {
  data = loadBytes('assets/mammals.xml');
}

function setup() {
  for (let i = 0; i < 5; i++) {
    console.log(data.bytes[i].toString(16));
  }
}
- - - -
- - - - -
- -

- - inner loadFont(path) → {Font} - - -
- jsboot/p5typo.js, - line 26 -
- -

- - - -
-
- - -
- Loads a GRX font file (.FNT) from a file Font Object.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Font - - - - - -- Font object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner loadImage(path) → {Bitmap} - - -
- jsboot/p5shape.js, - line 681 -
- -

- - - -
-
- - -
- Loads an image from a path and creates a Image from it.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - Path of the image to be loaded
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Bitmap - - - - - -- the Image object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner loadStrings(filename) → {Array.<String>} - - -
- jsboot/p5.js, - line 486 -
- -

- - - -
-
- - -
- Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.

Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.

This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let result;
function preload() {
  result = loadStrings('assets/test.txt');
}
function setup() {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}

function setup() {
  loadStrings('assets/test.txt', pickString);
}

function pickString(result) {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}
- - - -
- - - - -
- -

- - inner log(n) → {Number} - - -
- jsboot/p5math.js, - line 320 -
- -

- - - -
-
- - -
- Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number greater than 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- natural logarithm of n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}
- - - -
- - - - -
- -

- - inner loop() - - -
- jsboot/p5.js, - line 235 -
- -

- - - -
-
- - -
- By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop(). Avoid calling loop() from inside setup(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}
- - - -
- - - - -
- -

- - inner mag(a, b) → {Number} - - -
- jsboot/p5math.js, - line 370 -
- -

- - - -
-
- - -
- Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - first value
b - - -Number - - - - second value
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- magnitude of vector from (0,0) to (a,b) - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}
- - - -
- - - - -
- -

- - inner map(value, start1, stop1, start2, stop2, withinBoundsopt) → {Number} - - -
- jsboot/p5math.js, - line 402 -
- -

- - - -
-
- - -
- Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -Number - - - - - - - - - - the incoming value to be converted
start1 - - -Number - - - - - - - - - - lower bound of the value's current range
stop1 - - -Number - - - - - - - - - - upper bound of the value's current range
start2 - - -Number - - - - - - - - - - lower bound of the value's target range
stop2 - - -Number - - - - - - - - - - upper bound of the value's target range
withinBounds - - -Boolean - - - - - - <optional>
- - - - - - 		constrain the value to the newly mapped range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- remapped number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}
- - - -
- - - - -
- -

- - inner match(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 616 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);
- - - -
- - - - -
- -

- - inner matchAll(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 649 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- 2d Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);
- - - -
- - - - -
- -

- - inner max(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 448 -
- -

- - - -
-
- - -
- Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- maximum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner millis() → {Number} - - -
- jsboot/p5util.js, - line 1110 -
- -

- - - -
-
- - -
- Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the number of milliseconds since starting the program - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
- - - -
- - - - -
- -

- - inner min(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 486 -
- -

- - - -
-
- - -
- Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- minimum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner minute() → {Integer} - - -
- jsboot/p5util.js, - line 1096 -
- -

- - - -
-
- - -
- The minute() function returns the current minute as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current minute - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = minute();
text('Current minute: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner month() → {Integer} - - -
- jsboot/p5util.js, - line 1125 -
- -

- - - -
-
- - -
- The month() function returns the current month as a value from 1 - 12. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current month - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = month();
text('Current month: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner mouseClicked(eventopt) - - -
- jsboot/p5input.js, - line 422 -
- -

- - - -
-
- - -
- The mouseClicked() function is called once after a mouse button has been pressed and then released.

Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function mouseClicked() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseClicked() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseClicked(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseMoved(eventopt) - - -
- jsboot/p5input.js, - line 303 -
- -

- - - -
-
- - -
- The >mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move the mouse across the page
// to change its value

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function mouseMoved() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseMoved(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mousePressed(eventopt) - - -
- jsboot/p5input.js, - line 341 -
- -

- - - -
-
- - -
- The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mousePressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mousePressed(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseReleased(eventopt) - - -
- jsboot/p5input.js, - line 381 -
- -

- - - -
-
- - -
- The mouseReleased() function is called every time a mouse button is released.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseReleased() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseReleased(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner nf(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 692 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
left - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfc(num, rightopt) → {String} - - -
- jsboot/p5util.js, - line 789 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfp(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 853 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfs(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 901 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. The values for the digits, left, and right parameters should always be positive integers. (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner noCursor() - - -
- jsboot/p5.js, - line 408 -
- -

- - - -
-
- - -
- Hides the cursor from view. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}
- - - -
- - - - -
- -

- - inner noFill() - - -
- jsboot/p5color.js, - line 2031 -
- -

- - - -
-
- - -
- Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(15, 10, 55, 55);
noFill();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noFill();
  stroke(100, 100, 240);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner noise(x, yopt, zopt) → {Number} - - -
- jsboot/p5math.js, - line 969 -
- -

- - - -
-
- - -
- Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate in noise space
y - - -Number - - - - - - <optional>
- - - - - - 		y-coordinate in noise space
z - - -Number - - - - - - <optional>
- - - - - - 		z-coordinate in noise space
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- Perlin noise value (between 0 and 1) at specified coordinates - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}
- - - -
- - - - -
- -

- - inner noiseDetail(lod, falloff) - - -
- jsboot/p5math.js, - line 1113 -
- -

- - - -
-
- - -
- Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence.

By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise().

By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
lod - - -Number - - - - number of octaves to be used by the noise
falloff - - -Number - - - - falloff factor for each octave
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}
- - - -
- - - - -
- -

- - inner noLoop() - - -
- jsboot/p5.js, - line 271 -
- -

- - - -
-
- - -
- Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.

When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.

Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}
- - - -
- - - - -
- -

- - inner norm(value, start, stop) → {Number} - - -
- jsboot/p5math.js, - line 524 -
- -

- - - -
-
- - -
- Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - incoming value to be normalized
start - - -Number - - - - lower bound of the value's current range
stop - - -Number - - - - upper bound of the value's current range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- normalized number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}
- - - -
- - - - -
- -

- - inner noStroke() - - -
- jsboot/p5color.js, - line 2058 -
- -

- - - -
-
- - -
- Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noStroke();
  fill(240, 150, 150);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner pixelDensity(val) - - -
- jsboot/p5env.js, - line 267 -
- -

- - - -
-
- - -
- Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
val - - -Number - - - - whether or how much the sketch should scale
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  pixelDensity(1);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

function setup() {
  pixelDensity(3.0);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner point(x, y, zopt) - - -
- jsboot/p5shape.js, - line 189 -
- -

- - - -
-
- - -
- Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x-coordinate
y - - -Number - - - - - - - - - - the y-coordinate
z - - -Number - - - - - - <optional>
- - - - - - 		the z-coordinate (for WebGL mode)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
point(30, 20);
point(85, 20);
point(85, 75);
point(30, 75);
- - - -
- - - - -
- -

- - inner pop() - - -
- jsboot/p5.js, - line 631 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
translate(50, 0);
strokeWeight(10);
fill(204, 153, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner pow(n, e) → {Number} - - -
- jsboot/p5math.js, - line 570 -
- -

- - - -
-
- - -
- Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to Math.pow(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - base of the exponential expression
e - - -Number - - - - power by which to raise the base
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- n^e - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 45 -
- -

- - - -
-
- - -
- The println() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 26 -
- -

- - - -
-
- - -
- The print() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner push() - - -
- jsboot/p5.js, - line 580 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
translate(50, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner quad(x1, y1, x2, y2, x3, y3, x4, y4) - - -
- jsboot/p5shape.js, - line 211 -
- -

- - - -
-
- - -
- Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
x3 - - -Number - - - - the x-coordinate of the third point
y3 - - -Number - - - - the y-coordinate of the third point
x4 - - -Number - - - - the x-coordinate of the fourth point
y4 - - -Number - - - - the y-coordinate of the fourth point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
quad(38, 31, 86, 20, 69, 63, 30, 76);
- - - -
- - - - -
- -

- - inner radians(degrees) → {Number} - - -
- jsboot/p5math.js, - line 1402 -
- -

- - - -
-
- - -
- Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
degrees - - -Number - - - - the degree value to convert to radians
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians
- - - -
- - - - -
- -

- - inner random(minopt, maxopt) → {Number} - - -
- jsboot/p5math.js, - line 817 -
- -

- - - -
-
- - -
- Return a random floating-point number. Takes either 0, 1 or 2 arguments. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If one argument is given and it is an array, returns a random element from that array. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
min - - -Number - - - - - - <optional>
- - - - - - 		the lower bound (inclusive)
max - - -Number - - - - - - <optional>
- - - - - - 		the upper bound (exclusive)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word
- - - -
- - - - -
- -

- - inner randomGaussian(mean, sd) → {Number} - - -
- jsboot/p5math.js, - line 882 -
- -

- - - -
-
- - -
- Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned.

Takes either 0, 1 or 2 arguments.
If no args, returns a mean of 0 and standard deviation of 1.
If one arg, that arg is the mean (standard deviation is 1).
If two args, first is mean, second is standard deviation. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mean - - -Number - - - - the mean
sd - - -Number - - - - the standard deviation
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}
- - - -
- - - - -
- -

- - inner randomSeed(seed) - - -
- jsboot/p5math.js, - line 794 -
- -

- - - -
-
- - -
- Sets the seed value for random(). By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
seed - - -Number - - - - the seed value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}
- - - -
- - - - -
- -

- - inner rect(x, y, w, h) - - -
- jsboot/p5shape.js, - line 240 -
- -

- - - -
-
- - -
- Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the rectangle.
y - - -Number - - - - y-coordinate of the rectangle.
w - - -Number - - - - width of the rectangle.
h - - -Number - - - - height of the rectangle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a rectangle at location (30, 20) with a width and height of 55.
rect(30, 20, 55, 55);
- - - -
- - - - -
- -

- - inner rectMode(mode) - - -
- jsboot/p5shape.js, - line 568 -
- -

- - - -
-
- - -
- Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, CENTER, or RADIUS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rectMode(CORNER); // Default rectMode is CORNER
fill(255); // Set fill to white
rect(25, 25, 50, 50); // Draw white rect using CORNER mode

rectMode(CORNERS); // Set rectMode to CORNERS
fill(100); // Set fill to gray
rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode

rectMode(RADIUS); // Set rectMode to RADIUS
fill(255); // Set fill to white
rect(50, 50, 30, 30); // Draw white rect using RADIUS mode

rectMode(CENTER); // Set rectMode to CENTER
fill(100); // Set fill to gray
rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- - - -
- - - - -
- -

- - inner red(color) → {Number} - - -
- jsboot/p5color.js, - line 1644 -
- -

- - - -
-
- - -
- Extracts the red value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the red value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let redValue = red(c); // Get red in 'c'
print(redValue); // Print "255.0"
fill(redValue, 0, 0); // Use 'redValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle

colorMode(RGB, 255);
let c = color(127, 255, 0);
colorMode(RGB, 1);
let myColor = red(c);
print(myColor);
- - - -
- - - - -
- -

- - inner redraw(nopt) - - -
- jsboot/p5.js, - line 325 -
- -

- - - -
-
- - -
- Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.

In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).

The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop().

In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Integer - - - - - - <optional>
- - - - - - 		Redraw for n-times. The default value is 1.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}
- - - -
- - - - -
- -

- - inner resetMatrix() - - -
- jsboot/p5trans.js, - line 192 -
- -

- - - -
-
- - -
- Replaces the current matrix with the identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(50, 50);
applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
rect(0, 0, 20, 20);
// Note that the translate is also reset.
resetMatrix();
rect(0, 0, 20, 20);
- - - -
- - - - -
- -

- - inner reverse(list) → {Array} - - -
- jsboot/p5util.js, - line 148 -
- -

- - - -
-
- - -
- Reverses the order of an array, maps to Array.reverse() -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to reverse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the reversed list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}
- - - -
- - - - -
- -

- - inner rotate(angle) - - -
- jsboot/p5trans.js, - line 208 -
- -

- - - -
-
- - -
- Rotates a shape the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.

Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again.

Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle of rotation, specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 52, 52);
- - - -
- - - - -
- -

- - inner round(n) → {Integer} - - -
- jsboot/p5math.js, - line 598 -
- -

- - - -
-
- - -
- Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner saturation(color) → {Number} - - -
- jsboot/p5color.js, - line 1671 -
- -

- - - -
-
- - -
- Extracts the saturation value from a color or pixel array. Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the saturation value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = saturation(c); // Sets 'value' to 126
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner saveStrings(list, filename, extensionopt) - - -
- jsboot/p5.js, - line 436 -
- -

- - - -
-
- - -
- Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array.<String> - - - - - - - - - - string array to be written
filename - - -String - - - - - - - - - - filename for output
extension - - -String - - - - - - <optional>
- - - - - - 		the filename's extension
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let words = 'apple bear cat dog';

// .split() outputs an Array
let list = split(words, ' ');

function setup() {
  createCanvas(100, 100);
  background(200);
  text('click here to save', 10, 10, 70, 80);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    saveStrings(list, 'nouns.txt');
  }
}

// Saves the following to a file called 'nouns.txt':
//
// apple
// bear
// cat
// dog
- - - -
- - - - -
- -

- - inner scale(s, yopt) - - -
- jsboot/p5trans.js, - line 366 -
- -

- - - -
-
- - -
- Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.

Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.

Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
s - - -Number -| - -p5.Vector -| - -Array.<Number> - - - - - - - - - - percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given
y - - -Number - - - - - - <optional>
- - - - - - 		percent to scale the object in the y-axis
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

rect(30, 20, 50, 50);
scale(0.5, 1.3);
rect(30, 20, 50, 50);
- - - -
- - - - -
- -

- - inner scale(scales) - - -
- jsboot/p5trans.js, - line 396 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
scales - - -p5.Vector -| - -Array.<Number> - - - - per-axis percents to scale the object
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner second() → {Integer} - - -
- jsboot/p5util.js, - line 1138 -
- -

- - - -
-
- - -
- The second() function returns the current second as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current second - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var s = second();
text('Current second: \n' + s, 5, 50);
- - - -
- - - - -
- -

- - inner setAlpha(alpha) - - -
- jsboot/p5color.js, - line 595 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
alpha - - -Number - - - - the new alpha value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let squareColor;

function setup() {
  ellipseMode(CORNERS);
  strokeWeight(4);
  squareColor = color(100, 50, 150);
}

function draw() {
  background(255);

  noFill();
  stroke(0);
  ellipse(10, 10, width - 10, height - 10);

  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  fill(squareColor);
  noStroke();
  rect(13, 13, width - 26, height - 26);
}
- - - -
- - - - -
- -

- - inner setBlue(blue) - - -
- jsboot/p5color.js, - line 575 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
blue - - -Number - - - - the new blue value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setGreen(green) - - -
- jsboot/p5color.js, - line 555 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
green - - -Number - - - - the new green value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setRed(red) - - -
- jsboot/p5color.js, - line 535 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
red - - -Number - - - - the new red value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner shearX(angle) - - -
- jsboot/p5trans.js, - line 245 -
- -

- - - -
-
- - -
- Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shearY(angle) - - -
- jsboot/p5trans.js, - line 279 -
- -

- - - -
-
- - -
- Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shorten(list) → {Array} - - -
- jsboot/p5util.js, - line 167 -
- -

- - - -
-
- - -
- Decreases an array by one element and returns the shortened array, maps to Array.pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to shorten
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shortened Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}
- - - -
- - - - -
- -

- - inner shuffle(array, boolopt) → {Array} - - -
- jsboot/p5util.js, - line 188 -
- -

- - - -
-
- - -
- Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
array - - -Array - - - - - - - - - - Array to shuffle
bool - - -Boolean - - - - - - <optional>
- - - - - - 		modify passed array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shuffled Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}
- - - -
- - - - -
- -

- - inner sin(angle) → {Number} - - -
- jsboot/p5math.js, - line 1339 -
- -

- - - -
-
- - -
- Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the sine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner sort(list, countopt) → {Array} - - -
- jsboot/p5util.js, - line 228 -
- -

- - - -
-
- - -
- Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to sort
count - - -Integer - - - - - - <optional>
- - - - - - 		number of elements to sort, starting from 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the sorted list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}
- - - -
- - - - -
- -

- - inner splice(list, value, position) → {Array} - - -
- jsboot/p5util.js, - line 272 -
- -

- - - -
-
- - -
- Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to splice into
value - - -any - - - - value to be spliced in
position - - -Integer - - - - in the array from which to insert data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}
- - - -
- - - - -
- -

- - inner split(value, delim) → {Array.<String>} - - -
- jsboot/p5util.js, - line 965 -
- -

- - - -
-
- - -
- The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - the String to be split
delim - - -String - - - - the String used to separate the data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
- - - -
- - - - -
- -

- - inner splitTokens(value, delimopt) → {Array.<String>} - - -
- jsboot/p5util.js, - line 991 -
- -

- - - -
-
- - -
- The splitTokens() function splits a String at one or many character delimiters or "tokens." The delim parameter specifies the character or characters to be used as a boundary.

If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -String - - - - - - - - - - the String to be split
delim - - -String - - - - - - <optional>
- - - - - - 		list of individual Strings that will be used as separators
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
- - - -
- - - - -
- -

- - inner sq(n) → {Number} - - -
- jsboot/p5math.js, - line 631 -
- -

- - - -
-
- - -
- Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to square
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- squared number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner sqrt(n) → {Number} - - -
- jsboot/p5math.js, - line 672 -
- -

- - - -
-
- - -
- Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - non-negative number to square root
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- square root of number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner square(x, y, s) - - -
- jsboot/p5shape.js, - line 331 -
- -

- - - -
-
- - -
- Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the square.
y - - -Number - - - - y-coordinate of the square.
s - - -Number - - - - side size of the square.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
- - - -
- - - - -
- -

- - inner str(n) → {String} - - -
- jsboot/p5util.js, - line 398 -
- -

- - - -
-
- - -
- Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
- - - -
- - - - -
- -

- - inner stroke(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2170 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(value) - - -
- jsboot/p5color.js, - line 2165 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(color) - - -
- jsboot/p5color.js, - line 2182 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the stroke color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 2084 -
- -

- - - -
-
- - -
- Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the stroke color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
strokeWeight(4);
stroke(51);
rect(20, 20, 60, 60);

// R, G & B integer values
stroke(255, 204, 0);
strokeWeight(4);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
strokeWeight(4);
stroke(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
stroke('red');
strokeWeight(4);
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
stroke('#fae');
strokeWeight(4);
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
stroke('#222222');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGB notation
stroke('rgb(0,255,0)');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGBA notation
stroke('rgba(0,255,0,0.25)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGB notation
stroke('rgb(100%,0%,10%)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGBA notation
stroke('rgba(100%,0%,100%,0.5)');
strokeWeight(4);
rect(20, 20, 60, 60);

// p5 Color object
stroke(color(0, 0, 255));
strokeWeight(4);
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner stroke(values) - - -
- jsboot/p5color.js, - line 2176 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner strokeWeight(weight) - - -
- jsboot/p5shape.js, - line 810 -
- -

- - - -
-
- - -
- Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
weight - - -Number - - - - the weight (in pixels) of the stroke
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(1); // Default
line(20, 20, 80, 20);
strokeWeight(4); // Thicker
line(20, 40, 80, 40);
strokeWeight(10); // Beastly
line(20, 70, 80, 70);
- - - -
- - - - -
- -

- - inner subset(list, start, countopt) → {Array} - - -
- jsboot/p5util.js, - line 304 -
- -

- - - -
-
- - -
- Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to extract from
start - - -Integer - - - - - - - - - - position to begin
count - - -Integer - - - - - - <optional>
- - - - - - 		number of values to extract
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- Array of extracted elements - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}
- - - -
- - - - -
- -

- - inner tan(angle) → {Number} - - -
- jsboot/p5math.js, - line 1359 -
- -

- - - -
-
- - -
- Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the tangent of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner text(str, x, y) - - -
- jsboot/p5typo.js, - line 39 -
- -

- - - -
-
- - -
- Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.

The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.

The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String -| - -Object -| - -Array -| - -Number -| - -Boolean - - - - the alphanumeric symbols to be displayed
x - - -Number - - - - x-coordinate of text
y - - -Number - - - - y-coordinate of text
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}
- - - -
- - - - -
- -

- - inner textAlign(horizAlign, vertAlignopt) - - -
- jsboot/p5typo.js, - line 148 -
- -

- - - -
-
- - -
- Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
horizAlign - - -Constant - - - - - - - - - - horizontal alignment, either LEFT, CENTER, or RIGHT
vertAlign - - -Constant - - - - - - <optional>
- - - - - - 		vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);
- - - -
- - - - -
- -

- - inner textFont() → {Object} - - -
- jsboot/p5typo.js, - line 114 -
- -

- - - -
-
- - -
- Sets the current font that will be drawn with the text() function.

-
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- the current font - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}
- - - -
- - - - -
- -

- - inner textSize() → {Number} - - -
- jsboot/p5typo.js, - line 230 -
- -

- - - -
-
- - -
- Gets the current font size. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner textWidth(theText) → {Number} - - -
- jsboot/p5typo.js, - line 203 -
- -

- - - -
-
- - -
- Calculates and returns the width of any character or text string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
theText - - -String - - - - the String of characters to measure
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);
- - - -
- - - - -
- -

- - inner toString(formatopt) → {String} - - -
- jsboot/p5color.js, - line 341 -
- -

- - - -
-
- - -
- This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
format - - -String - - - - - - <optional>
- - - - - - 		How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- the formatted string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let myColor;
function setup() {
  createCanvas(200, 200);
  stroke(255);
  myColor = color(100, 100, 250);
  fill(myColor);
}

function draw() {
  rotate(HALF_PI);
  text(myColor.toString(), 0, -5);
  text(myColor.toString('#rrggbb'), 0, -30);
  text(myColor.toString('rgba%'), 0, -55);
}
- - - -
- - - - -
- -

- - inner translate(vector) - - -
- jsboot/p5trans.js, - line 347 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
vector - - -p5.Vector - - - - the vector to translate by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner translate(x, y, zopt) - - -
- jsboot/p5trans.js, - line 313 -
- -

- - - -
-
- - -
- Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.

Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - left/right translation
y - - -Number - - - - - - - - - - up/down translation
z - - -Number - - - - - - <optional>
- - - - - - 		forward/backward translation (webgl only)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(30, 20);
rect(0, 0, 55, 55);

rect(0, 0, 55, 55); // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55); // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55); // Draw rect at new 0,0

function draw() {
  background(200);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  translate(p5.Vector.fromAngle(millis() / 1000, 40));
  rect(0, 0, 20, 20);
}
- - - -
- - - - -
- -

- - inner triangle(x1, y1, x2, y2, x3, y3) - - -
- jsboot/p5shape.js, - line 356 -
- -

- - - -
-
- - -
- A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
x3 - - -Number - - - - x-coordinate of the third point
y3 - - -Number - - - - y-coordinate of the third point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
triangle(30, 75, 58, 20, 86, 75);
- - - -
- - - - -
- -

- - inner trim(str) → {String} - - -
- jsboot/p5util.js, - line 1042 -
- -

- - - -
-
- - -
- Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - a String to be trimmed
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- a trimmed String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);
- - - -
- - - - -
- -

- - inner unchar(n) → {Number} - - -
- jsboot/p5util.js, - line 508 -
- -

- - - -
-
- - -
- Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
- - - -
- - - - -
- -

- - inner unhex(n) → {Number} - - -
- jsboot/p5util.js, - line 569 -
- -

- - - -
-
- - -
- Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of hexadecimal value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
- - - -
- - - - -
- -

- - inner vertex(x, y) - - -
- jsboot/p5shape.js, - line 460 -
- -

- - - -
-
- - -
- All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the vertex
y - - -Number - - - - y-coordinate of the vertex
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(3);
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
- - - -
- - - - -
- -

- - inner year() → {Integer} - - -
- jsboot/p5util.js, - line 1151 -
- -

- - - -
-
- - -
- The year() returns the current year as an integer (2014, 2015, 2016, etc). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current year - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var y = year();
text('Current year: \n' + y, 5, 50);
- - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

p5compat

- - - - -
- -
- -
- - - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - -

Classes

- - -
- -
-

- Color -
- module:p5compat~Color -
-

-
- - -
- - - - - - - - - - -

Members

- -
- - -
-

- static ColorConversion - -
- jsboot/p5color.js, - line 41 -
- -

- - -
-
- -
- Conversions adapted from . In these functions, hue is always in the range [0, 1], just like all other components are in the range [0, 1]. 'Brightness' and 'value' are used interchangeably. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly displayHeight - -
- jsboot/p5env.js, - line 202 -
- -

- - -
-
- -
- System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly displayWidth - -
- jsboot/p5env.js, - line 189 -
- -

- - -
-
- -
- System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly focused - -
- jsboot/p5env.js, - line 109 -
- -

- - -
-
- -
- Confirms if the window a p5.js program is in is "focused," meaning that the sketch will accept mouse or keyboard input. This variable is "true" if the window is focused and "false" if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
focused - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// To demonstrate, put two windows side by side.
// Click on the window that the p5 sketch isn't in!
function draw() {
  background(200);
  noStroke();
  fill(0, 200, 0);
  ellipse(25, 25, 50, 50);

  if (!focused) {
    // or "if (focused === false)"
    stroke(200, 0, 0);
    line(0, 0, 100, 100);
    line(100, 0, 0, 100);
  }
}
- - -
- - - - -
-

- static, readonly frameCount - -
- jsboot/p5env.js, - line 83 -
- -

- - -
-
- -
- The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
frameCount - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
- - -
- - - - -
-

- static, readonly height - -
- jsboot/p5env.js, - line 238 -
- -

- - -
-
- -
- System variable that stores the height of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
height - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly key - -
- jsboot/p5input.js, - line 507 -
- -

- - -
-
- -
- The system variable key always contains the value of the most recent key on the keyboard that was typed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Click any key to display it!
// (Not Guaranteed to be Case Sensitive)
function setup() {
  fill(245, 123, 158);
  textSize(50);
}

function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}
- - -
- - - - -
-

- static, readonly keyCode - -
- jsboot/p5input.js, - line 532 -
- -

- - -
-
- -
- The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyCode - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let fillVal = 126;
function draw() {
  fill(fillVal);
  rect(25, 25, 50, 50);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    fillVal = 255;
  } else if (keyCode === DOWN_ARROW) {
    fillVal = 0;
  }
  return false; // prevent default
}
- - -
- - - - -
-

- static, readonly keyIsPressed - -
- jsboot/p5input.js, - line 486 -
- -

- - -
-
- -
- The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
- - -
- - - - -
-

- static, readonly mouseButton - -
- jsboot/p5input.js, - line 278 -
- -

- - -
-
- -
- Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseButton - - -Constant - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      ellipse(50, 50, 50, 50);
    }
    if (mouseButton === RIGHT) {
      rect(25, 25, 50, 50);
    }
    if (mouseButton === CENTER) {
      triangle(23, 75, 50, 20, 78, 75);
    }
  }

  print(mouseButton);
}
- - -
- - - - -
-

- static, readonly mouseIsPressed - -
- jsboot/p5input.js, - line 301 -
- -

- - -
-
- -
- The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }

  print(mouseIsPressed);
}
- - -
- - - - -
-

- static, readonly mouseX - -
- jsboot/p5input.js, - line 53 -
- -

- - -
-
- -
- The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
- - -
- - - - -
-

- static, readonly mouseY - -
- jsboot/p5input.js, - line 71 -
- -

- - -
-
- -
- The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
- - -
- - - - -
-

- static, readonly pmouseX - -
- jsboot/p5input.js, - line 95 -
- -

- - -
-
- -
- The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas to leave a trail
function setup() {
  //slow down the frameRate to make it more visible
  frameRate(10);
}

function draw() {
  background(244, 248, 252);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + ' -> ' + mouseX);
}
- - -
- - - - -
-

- static, readonly pmouseY - -
- jsboot/p5input.js, - line 118 -
- -

- - -
-
- -
- The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);
  //draw a square only if the mouse is not moving
  if (mouseY === pmouseY && mouseX === pmouseX) {
    rect(20, 20, 60, 60);
  }

  print(pmouseY + ' -> ' + mouseY);
}
- - -
- - - - -
-

- static, readonly pwinMouseX - -
- jsboot/p5input.js, - line 213 -
- -

- - -
-
- -
- The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current x position is the horizontal mouse speed
  let speed = abs(winMouseX - pwinMouseX);
  //change the size of the circle
  //according to the horizontal speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly pwinMouseY - -
- jsboot/p5input.js, - line 247 -
- -

- - -
-
- -
- The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current y position is the vertical mouse speed
  let speed = abs(winMouseY - pwinMouseY);
  //change the size of the circle
  //according to the vertical speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly width - -
- jsboot/p5env.js, - line 230 -
- -

- - -
-
- -
- System variable that stores the width of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
width - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly windowHeight - -
- jsboot/p5env.js, - line 222 -
- -

- - -
-
- -
- System variable that stores the height of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly windowWidth - -
- jsboot/p5env.js, - line 212 -
- -

- - -
-
- -
- System variable that stores the width of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly winMouseX - -
- jsboot/p5input.js, - line 149 -
- -

- - -
-
- -
- The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the horizontal mouse position
  //relative to the window
  myCanvas.position(winMouseX + 1, windowHeight / 2);

  //the y of the square is relative to the canvas
  rect(20, mouseY, 60, 60);
}
- - -
- - - - -
-

- static, readonly winMouseY - -
- jsboot/p5input.js, - line 180 -
- -

- - -
-
- -
- The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the vertical mouse position
  //relative to the window
  myCanvas.position(windowWidth / 2, winMouseY + 1);

  //the x of the square is relative to the canvas
  rect(mouseX, 20, 60, 60);
}
- - -
- - - - -
-

- inner colorPatterns - -
- jsboot/p5color.js, - line 888 -
- -

- - -
-
- -
- Full color string patterns. The capture groups are necessary. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner namedColors - -
- jsboot/p5color.js, - line 722 -
- -

- - -
-
- -
- CSS named colors. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner WHITESPACE - -
- jsboot/p5color.js, - line 880 -
- -

- - -
-
- -
- These regular expressions are used to build up the patterns for matching viable CSS color strings: fragmenting the regexes in this way increases the legibility and comprehensibility of the code. Note that RGB values of .9 are not parsed by IE, but are supported here for color string consistency. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - static _cloneEnv() - - -
- jsboot/p5.js, - line 67 -
- -

- - - -
-
- - -
- deep copy the current environment. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _ensureMatrix() - - -
- jsboot/p5trans.js, - line 34 -
- -

- - - -
-
- - -
- make sure we have a 2x2 identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _PolyLine() - - -
- jsboot/p5shape.js, - line 550 -
- -

- - - -
-
- - -
- draw polygon by using lines. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transX(x, y) → {number} - - -
- jsboot/p5trans.js, - line 67 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated x coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transY(x, y) → {number} - - -
- jsboot/p5trans.js, - line 82 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated y coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static createCanvas() - - -
- jsboot/p5.js, - line 201 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static exit() - - -
- jsboot/p5.js, - line 231 -
- -

- - - -
-
- - -
- exit the script after the current Loop(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noSmooth() - - -
- jsboot/p5.js, - line 211 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noTint() - - -
- jsboot/p5.js, - line 226 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static settings() - - -
- jsboot/p5.js, - line 216 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static size() - - -
- jsboot/p5.js, - line 196 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static smooth() - - -
- jsboot/p5.js, - line 206 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static tint() - - -
- jsboot/p5.js, - line 221 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner abs(n) → {Number} - - -
- jsboot/p5math.js, - line 59 -
- -

- - - -
-
- - -
- Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to compute
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- absolute value of given number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
- - - -
- - - - -
- -

- - inner acos(value) → {Number} - - -
- jsboot/p5math.js, - line 1211 -
- -

- - - -
-
- - -
- The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc cosine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc cosine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);
- - - -
- - - - -
- -

- - inner alpha(color) → {Number} - - -
- jsboot/p5color.js, - line 1271 -
- -

- - - -
-
- - -
- Extracts the alpha value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the alpha value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
let c = color(0, 126, 255, 102);
fill(c);
rect(15, 15, 35, 70);
let value = alpha(c); // Sets 'value' to 102
fill(value);
rect(50, 15, 35, 70);
- - - -
- - - - -
- -

- - inner angleMode(mode) - - -
- jsboot/p5math.js, - line 1423 -
- -

- - - -
-
- - -
- Sets the current mode of p5 to given mode. Default mode is RADIANS. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either RADIANS or DEGREES
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}
- - - -
- - - - -
- -

- - inner append(array, value) → {Array} - - -
- jsboot/p5util.js, - line 30 -
- -

- - - -
-
- - -
- Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
array - - -Array - - - - Array to append
value - - -any - - - - to be added to the Array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the array that was appended to - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}
- - - -
- - - - -
- -

- - inner applyMatrix(a, b, c, d, e, f) - - -
- jsboot/p5trans.js, - line 90 -
- -

- - - -
-
- - -
- Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia. The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form: > The transformation matrix used when applyMatrix is called -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
b - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
c - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
d - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
e - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
f - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  // Equivalent to translate(x, y);
  applyMatrix(1, 0, 0, 1, 40 + step, 50);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  translate(50, 50);
  // Equivalent to scale(x, y);
  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, 0, TWO_PI);
  var cos_a = cos(angle);
  var sin_a = sin(angle);
  background(200);
  translate(50, 50);
  // Equivalent to rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, -PI / 4, PI / 4);
  background(200);
  translate(50, 50);
  // equivalent to shearX(angle);
  var shear_factor = 1 / tan(PI / 2 - angle);
  applyMatrix(1, 0, shear_factor, 1, 0, 0);
  rect(0, 0, 50, 50);
}
- - - -
- - - - -
- -

- - inner arc(x, y, w, h, start, stop, modeopt) - - -
- jsboot/p5shape.js, - line 33 -
- -

- - - -
-
- - -
- Draw an arc to the screen. If called with only x, y, w, h, start, and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.

The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the arc's ellipse
y - - -Number - - - - - - - - - - y-coordinate of the arc's ellipse
w - - -Number - - - - - - - - - - width of the arc's ellipse by default
h - - -Number - - - - - - - - - - height of the arc's ellipse by default
start - - -Number - - - - - - - - - - angle to start the arc, specified in radians
stop - - -Number - - - - - - - - - - angle to stop the arc, specified in radians
mode - - -Constant - - - - - - <optional>
- - - - - - 		optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
arc(50, 55, 50, 50, 0, HALF_PI);
noFill();
arc(50, 55, 60, 60, HALF_PI, PI);
arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
- - - -
- - - - -
- -

- - inner arrayCopy(src, srcPosition, dst, dstPosition, length) - - -
- jsboot/p5util.js, - line 52 -
- -

- - - -
-
- - -
- Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().

The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).

Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
src - - -Array - - - - the source Array
srcPosition - - -Integer - - - - starting position in the source Array
dst - - -Array - - - - the destination Array
dstPosition - - -Integer - - - - starting position in the destination Array
length - - -Integer - - - - number of Array elements to be copied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - -
Deprecated:
  • Yes
- - - - - - - - - - - - - - - -
- - - -
Example
- - 
var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]
- - - -
- - - - -
- -

- - inner asin(value) → {Number} - - -
- jsboot/p5math.js, - line 1237 -
- -

- - - -
-
- - -
- The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc sine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc sine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);
- - - -
- - - - -
- -

- - inner atan(value) → {Number} - - -
- jsboot/p5math.js, - line 1264 -
- -

- - - -
-
- - -
- The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc tangent is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);
- - - -
- - - - -
- -

- - inner atan2(y, x) → {Number} - - -
- jsboot/p5math.js, - line 1291 -
- -

- - - -
-
- - -
- Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor.

Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
y - - -Number - - - - y-coordinate of the point
x - - -Number - - - - x-coordinate of the point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given point - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}
- - - -
- - - - -
- -

- - inner background(color) - - -
- jsboot/p5color.js, - line 1702 -
- -

- - - -
-
- - -
- The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A Color object can also be provided to set the background color.

An Image can also be provided to set the background image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - any value created by the color() function
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
background(51);

// R, G & B integer values
background(255, 204, 0);

// H, S & B integer values
colorMode(HSB);
background(255, 204, 100);

// Named SVG/CSS color string
background('red');

// three-digit hexadecimal RGB notation
background('#fae');

// six-digit hexadecimal RGB notation
background('#222222');

// integer RGB notation
background('rgb(0,255,0)');

// integer RGBA notation
background('rgba(0,255,0, 0.25)');

// percentage RGB notation
background('rgb(100%,0%,10%)');

// percentage RGBA notation
background('rgba(100%,0%,100%,0.5)');

// p5 Color object
background(color(0, 0, 255));
- - - -
- - - - -
- -

- - inner background(colorstring, aopt) - - -
- jsboot/p5color.js, - line 1760 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
colorstring - - -String - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex
a - - -Number - - - - - - <optional>
- - - - - - 		opacity of the background relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(gray, aopt) - - -
- jsboot/p5color.js, - line 1769 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - specifies a value between white and black
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(v1, v2, v3, aopt) - - -
- jsboot/p5color.js, - line 1775 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value (depending on the current color mode)
v2 - - -Number - - - - - - - - - - green or saturation value (depending on the current color mode)
v3 - - -Number - - - - - - - - - - blue or brightness value (depending on the current color mode)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(values) - - -
- jsboot/p5color.js, - line 1786 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(bitmap, aopt) - - -
- jsboot/p5color.js, - line 1792 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
bitmap - - -Bitmap - - - - - - - - - - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner beginShape(kindopt) - - -
- jsboot/p5shape.js, - line 379 -
- -

- - - -
-
- - -
- Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.

The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.

Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
kind - - -Constant - - - - - - <optional>
- - - - - - 		either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

beginShape(LINES);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();

beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
- - - -
- - - - -
- -

- - inner blue(color) → {Number} - - -
- jsboot/p5color.js, - line 1291 -
- -

- - - -
-
- - -
- Extracts the blue value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the blue value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(175, 100, 220); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let blueValue = blue(c); // Get blue in 'c'
print(blueValue); // Prints "220.0"
fill(0, 0, blueValue); // Use 'blueValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner boolean(n) → {Boolean} - - -
- jsboot/p5util.js, - line 422 -
- -

- - - -
-
- - -
- Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
- - - -
- - - - -
- -

- - inner brightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1312 -
- -

- - - -
-
- - -
- Extracts the HSB brightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the brightness value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = brightness(c); // Sets 'value' to 255
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner byte(n) → {Number} - - -
- jsboot/p5util.js, - line 452 -
- -

- - - -
-
- - -
- Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- byte representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]
- - - -
- - - - -
- -

- - inner ceil(n) → {Integer} - - -
- jsboot/p5math.js, - line 77 -
- -

- - - -
-
- - -
- Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round up
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded up number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner char(n) → {String} - - -
- jsboot/p5util.js, - line 481 -
- -

- - - -
-
- - -
- Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
- - - -
- - - - -
- -

- - inner circle(x, y, d) - - -
- jsboot/p5shape.js, - line 133 -
- -

- - - -
-
- - -
- Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the centre of the circle.
y - - -Number - - - - y-coordinate of the centre of the circle.
d - - -Number - - - - diameter of the circle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a circle at location (30, 30) with a diameter of 20.
circle(30, 30, 20);
- - - -
- - - - -
- -

- - inner clear() - - -
- jsboot/p5color.js, - line 1813 -
- -

- - - -
-
- - -
- Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
  clear();
}
- - - -
- - - - -
- -

- - inner color(color) → {Color} - - -
- jsboot/p5color.js, - line 1472 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(value) → {Color} - - -
- jsboot/p5color.js, - line 1461 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(v1, v2, v3, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1449 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(values) → {Color} - - -
- jsboot/p5color.js, - line 1466 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(gray, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1333 -
- -

- - - -
-
- - -
- Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.

Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - number specifying value between white and black.
alpha - - -Number - - - - - - <optional>
- - - - - - 		alpha value relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- resulting color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(30, 20, 55, 55); // Draw rectangle

let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
ellipse(25, 25, 80, 80); // Draw left circle

// Using only one value with color()
// generates a grayscale value.
c = color(65); // Update 'c' with grayscale value
fill(c); // Use updated 'c' as fill color
ellipse(75, 75, 80, 80); // Draw right circle

// Named SVG & CSS colors may be used,
let c = color('magenta');
fill(c); // Use 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(20, 20, 60, 60); // Draw rectangle

// as can hex color codes:
noStroke(); // Don't draw a stroke around shapes
let c = color('#0f0');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('#00ff00');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// RGB and RGBA color strings are also supported:
// these all set to the same color (solid blue)
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('rgb(0,0,255)');
fill(c); // Use 'c' as fill color
rect(10, 10, 35, 35); // Draw rectangle

c = color('rgb(0%, 0%, 100%)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 35, 35); // Draw rectangle

c = color('rgba(0, 0, 255, 1)');
fill(c); // Use updated 'c' as fill color
rect(10, 55, 35, 35); // Draw rectangle

c = color('rgba(0%, 0%, 100%, 1)');
fill(c); // Use updated 'c' as fill color
rect(55, 55, 35, 35); // Draw rectangle

// HSL color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsl(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsla(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// HSB color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsb(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsba(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

let c; // Declare color 'c'
noStroke(); // Don't draw a stroke around shapes

// If no colorMode is specified, then the
// default of RGB with scale of 0-255 is used.
c = color(50, 55, 100); // Create a color for 'c'
fill(c); // Use color variable 'c' as fill color
rect(0, 10, 45, 80); // Draw left rect

colorMode(HSB, 100); // Use HSB with scale of 0-100
c = color(50, 55, 100); // Update 'c' with new color
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw right rect
- - - -
- - - - -
- -

- - inner colorMode(mode, maxopt) - - -
- jsboot/p5color.js, - line 1841 -
- -

- - - -
-
- - -
- colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.

Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - - either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
max - - -Number - - - - - - <optional>
- - - - - - 		range for all values
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(RGB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 0);
    point(i, j);
  }
}

noStroke();
colorMode(HSB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 100);
    point(i, j);
  }
}

colorMode(RGB, 255);
let c = color(127, 255, 0);

colorMode(RGB, 1);
let myColor = c._getRed();
text(myColor, 10, 10, 80, 80);

noFill();
colorMode(RGB, 255, 255, 255, 1);
background(255);

strokeWeight(4);
stroke(255, 0, 10, 0.3);
ellipse(40, 40, 50, 50);
ellipse(50, 50, 40, 40);
- - - -
- - - - -
- -

- - inner colorMode(mode, max1, max2, max3, maxAopt) - - -
- jsboot/p5color.js, - line 1894 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - -
max1 - - -Number - - - - - - - - - - range for the red or hue depending on the current color mode
max2 - - -Number - - - - - - - - - - range for the green or saturation depending on the current color mode
max3 - - -Number - - - - - - - - - - range for the blue or brightness/lightness depending on the current color mode
maxA - - -Number - - - - - - <optional>
- - - - - - 		range for the alpha
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner concat(a, b) → {Array} - - -
- jsboot/p5util.js, - line 120 -
- -

- - - -
-
- - -
- Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Array - - - - first Array to concatenate
b - - -Array - - - - second Array to concatenate
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- concatenated array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}
- - - -
- - - - -
- -

- - inner constrain(n, low, high) → {Number} - - -
- jsboot/p5math.js, - line 111 -
- -

- - - -
-
- - -
- Constrains a value between a minimum and maximum value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to constrain
low - - -Number - - - - minimum limit
high - - -Number - - - - maximum limit
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- constrained number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}
- - - -
- - - - -
- -

- - inner cos(angle) → {Number} - - -
- jsboot/p5math.js, - line 1319 -
- -

- - - -
-
- - -
- Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the cosine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner createNumberDict(key, value) → {NumberDict} - - -
- jsboot/p5util.js, - line 1191 -
- -

- - - -
-
- - -
- Creates a new instance of NumberDict using the key-value pair or object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number - - - -
value - - -Number - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -NumberDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}
- - - -
- - - - -
- -

- - inner createStringDict(key, value) → {StringDict} - - -
- jsboot/p5util.js, - line 1168 -
- -

- - - -
-
- - -
- Creates a new instance of p5.StringDict using the key-value pair or the object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
value - - -String - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StringDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}
- - - -
- - - - -
- -

- - inner createVector(xopt, yopt, zopt) → {p5.Vector} - - -
- jsboot/p5math.js, - line 26 -
- -

- - - -
-
- - -
- Creates a new PVector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -p5.Vector - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}
- - - -
- - - - -
- -

- - inner day() → {Integer} - - -
- jsboot/p5util.js, - line 1068 -
- -

- - - -
-
- - -
- The day() function returns the current day as a value from 1 - 31. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current day - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var d = day();
text('Current day: \n' + d, 5, 50);
- - - -
- - - - -
- -

- - inner degrees(radians) → {Number} - - -
- jsboot/p5math.js, - line 1380 -
- -

- - - -
-
- - -
- Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
radians - - -Number - - - - the radians value to convert to degrees
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees
- - - -
- - - - -
- -

- - inner displayDensity() → {Number} - - -
- jsboot/p5.js, - line 385 -
- -

- - - -
-
- - -
- Returns the pixel density of the current display the sketch is running on (always 1 for DOjS). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current pixel density of the display - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner dist(x1, y1, x2, y2) → {Number} - - -
- jsboot/p5math.js, - line 149 -
- -

- - - -
-
- - -
- Calculates the distance between two points. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- distance between the two points - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}
- - - -
- - - - -
- -

- - inner ellipse(x, y, w, hopt) - - -
- jsboot/p5shape.js, - line 77 -
- -

- - - -
-
- - -
- Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The origin may be changed with the ellipseMode() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the ellipse.
y - - -Number - - - - - - - - - - y-coordinate of the ellipse.
w - - -Number - - - - - - - - - - width of the ellipse.
h - - -Number - - - - - - <optional>
- - - - - - 		height of the ellipse.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(56, 46, 55, 55);
- - - -
- - - - -
- -

- - inner ellipseMode(mode) - - -
- jsboot/p5shape.js, - line 623 -
- -

- - - -
-
- - -
- Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are interpreted.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CENTER, RADIUS, CORNER, or CORNERS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipseMode(RADIUS); // Set ellipseMode to RADIUS
fill(255); // Set fill to white
ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER
fill(100); // Set fill to gray
ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode

ellipseMode(CORNER); // Set ellipseMode is CORNER
fill(255); // Set fill to white
ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode

ellipseMode(CORNERS); // Set ellipseMode to CORNERS
fill(100); // Set fill to gray
ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- - - -
- - - - -
- -

- - inner endShape(modeopt) - - -
- jsboot/p5shape.js, - line 482 -
- -

- - - -
-
- - -
- The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - <optional>
- - - - - - 		use CLOSE to close the shape
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noFill();

beginShape();
vertex(20, 20);
vertex(45, 20);
vertex(45, 80);
endShape(CLOSE);

beginShape();
vertex(50, 20);
vertex(75, 20);
vertex(75, 80);
endShape();

TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
- - - -
- - - - -
- -

- - inner exp(n) → {Number} - - -
- jsboot/p5math.js, - line 202 -
- -

- - - -
-
- - -
- Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - exponent to raise
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- e^n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}
- - - -
- - - - -
- -

- - inner fill(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2007 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(value) - - -
- jsboot/p5color.js, - line 2002 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(values) - - -
- jsboot/p5color.js, - line 2013 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(color) - - -
- jsboot/p5color.js, - line 2019 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the fill color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 1934 -
- -

- - - -
-
- - -
- Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the fill color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
fill(51);
rect(20, 20, 60, 60);

// R, G & B integer values
fill(255, 204, 0);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
fill(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
fill('red');
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
fill('#fae');
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
fill('#222222');
rect(20, 20, 60, 60);

// integer RGB notation
fill('rgb(0,255,0)');
rect(20, 20, 60, 60);

// integer RGBA notation
fill('rgba(0,255,0, 0.25)');
rect(20, 20, 60, 60);

// percentage RGB notation
fill('rgb(100%,0%,10%)');
rect(20, 20, 60, 60);

// percentage RGBA notation
fill('rgba(100%,0%,100%,0.5)');
rect(20, 20, 60, 60);

// p5 Color object
fill(color(0, 0, 255));
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner float(str) → {Number} - - -
- jsboot/p5util.js, - line 341 -
- -

- - - -
-
- - -
- Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN. When an array of values is passed in, then an array of floats of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - float string to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- floating point representation of string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);
- - - -
- - - - -
- -

- - inner floor(n) → {Integer} - - -
- jsboot/p5math.js, - line 246 -
- -

- - - -
-
- - -
- Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round down
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded down number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner frameRate(fps) - - -
- jsboot/p5env.js, - line 111 -
- -

- - - -
-
- - -
- Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations This is the same as setFrameRate(val).

Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().

Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fps - - -Number - - - - number of frames to be displayed every second
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rectX = 0;
let fr = 30; //starting FPS
let clr;

function setup() {
  background(200);
  frameRate(fr); // Attempt to refresh at starting FPS
  clr = color(255, 0, 0);
}

function draw() {
  background(200);
  rectX = rectX += 1; // Move Rectangle

  if (rectX >= width) {
    // If you go off screen.
    if (fr === 30) {
      clr = color(0, 0, 255);
      fr = 10;
      frameRate(fr); // make frameRate 10 FPS
    } else {
      clr = color(255, 0, 0);
      fr = 30;
      frameRate(fr); // make frameRate 30 FPS
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}
- - - -
- - - - -
- -

- - inner fullscreen(valopt) → {Boolean} - - -
- jsboot/p5env.js, - line 240 -
- -

- - - -
-
- - -
- If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
val - - -Boolean - - - - - - <optional>
- - - - - - 		whether the sketch should be in fullscreen mode or not
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- current fullscreen state - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clicking in the box toggles fullscreen on and off.
function setup() {
  background(200);
}
function mousePressed() {
  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}
- - - -
- - - - -
- -

- - inner getFrameRate() → {Number} - - -
- jsboot/p5env.js, - line 168 -
- -

- - - -
-
- - -
- Returns the current framerate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current frameRate - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner getURL() → {String} - - -
- jsboot/p5env.js, - line 294 -
- -

- - - -
-
- - -
- Gets the current URL. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- url - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let url;
let x = 100;

function setup() {
  fill(0);
  noStroke();
  url = getURL();
}

function draw() {
  background(200);
  text(url, x, height / 2);
  x--;
}
- - - -
- - - - -
- -

- - inner getURLParams() → {Object} - - -
- jsboot/p5env.js, - line 334 -
- -

- - - -
-
- - -
- Gets the current URL params as an Object. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- URL params - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Example: http://p5js.org?year=2014&month=May&day=15

function setup() {
  let params = getURLParams();
  text(params.day, 10, 20);
  text(params.month, 10, 40);
  text(params.year, 10, 60);
}
- - - -
- - - - -
- -

- - inner getURLPath() → {Array.<String>} - - -
- jsboot/p5env.js, - line 318 -
- -

- - - -
-
- - -
- Gets the current URL path as an array. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- path components - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let urlPath = getURLPath();
  for (let i = 0; i < urlPath.length; i++) {
    text(urlPath[i], 10, i * 20 + 20);
  }
}
- - - -
- - - - -
- -

- - inner green(color) → {Number} - - -
- jsboot/p5color.js, - line 1487 -
- -

- - - -
-
- - -
- Extracts the green value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the green value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(20, 75, 200); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let greenValue = green(c); // Get green in 'c'
print(greenValue); // Print "75.0"
fill(0, greenValue, 0); // Use 'greenValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner hex(n, digitsopt) → {String} - - -
- jsboot/p5util.js, - line 530 -
- -

- - - -
-
- - -
- Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Number - - - - - - - - - - value to parse
digits - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- hexadecimal string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- - - -
- - - - -
- -

- - inner hour() → {Integer} - - -
- jsboot/p5util.js, - line 1082 -
- -

- - - -
-
- - -
- The hour() function returns the current hour as a value from 0 - 23. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current hour - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var h = hour();
text('Current hour:\n' + h, 5, 50);
- - - -
- - - - -
- -

- - inner hue(color) → {Number} - - -
- jsboot/p5color.js, - line 1509 -
- -

- - - -
-
- - -
- Extracts the hue value from a color or pixel array. Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the hue - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = hue(c); // Sets 'value' to "0"
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner image(img, x, y) - - -
- jsboot/p5shape.js, - line 709 -
- -

- - - -
-
- - -
- Draw an image to the p5.js canvas. This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image. This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
img - - -Bitmap - - - - the image to display
x - - -Number - - - - the x-coordinate of the top-left corner of the image
y - - -Number - - - - the y-coordinate of the top-left corner of the image
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner imageMode(mode) - - -
- jsboot/p5shape.js, - line 759 -
- -

- - - -
-
- - -
- Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.

imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.

imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, or CENTER
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNER);
  image(img, 10, 10, 50, 50);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNERS);
  image(img, 10, 10, 90, 40);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CENTER);
  image(img, 50, 50, 80, 80);
}
- - - -
- - - - -
- -

- - inner int(n, radixopt) → {Number} - - -
- jsboot/p5util.js, - line 365 -
- -

- - - -
-
- - -
- Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -String -| - -Boolean -| - -Number - - - - - - - - - - value to parse
radix - - -Integer - - - - - - <optional>
- - - - - - 		the radix to convert to (default: 10)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
- - - -
- - - - -
- -

- - inner join(list, separator) → {String} - - -
- jsboot/p5util.js, - line 595 -
- -

- - - -
-
- - -
- Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - array of Strings to be joined
separator - - -String - - - - String to be placed between each item
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- joined String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);
- - - -
- - - - -
- -

- - inner keyPressed() - - -
- jsboot/p5input.js, - line 534 -
- -

- - - -
-
- - -
- The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    value = 255;
  } else if (keyCode === RIGHT_ARROW) {
    value = 0;
  }
}
- - - -
- - - - -
- -

- - inner keyReleased() - - -
- jsboot/p5input.js, - line 568 -
- -

- - - -
-
- - -
- The keyReleased() function is called once every time a key is released. See key and keyCode for more information.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
  return false; // prevent any default behavior
}
- - - -
- - - - -
- -

- - inner keyTyped() - - -
- jsboot/p5input.js, - line 592 -
- -

- - - -
-
- - -
- The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. The most recent key pressed will be stored in the key variable.

Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyTyped() {
  if (key === 'a') {
    value = 255;
  } else if (key === 'b') {
    value = 0;
  }
  // uncomment to prevent any default behavior
  // return false;
}
- - - -
- - - - -
- -

- - inner lerp(start, stop, amt) → {Number} - - -
- jsboot/p5math.js, - line 279 -
- -

- - - -
-
- - -
- Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
start - - -Number - - - - first value
stop - - -Number - - - - second value
amt - - -Number - - - - number
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- lerped value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}
- - - -
- - - - -
- -

- - inner lerpColor(c1, c2, amt) → {Color} - - -
- jsboot/p5color.js, - line 1536 -
- -

- - - -
-
- - -
- Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.

The way that colours are interpolated depends on the current color mode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c1 - - -Color - - - - interpolate from this color
c2 - - -Color - - - - interpolate to this color
amt - - -Number - - - - number between 0 and 1
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- interpolated color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
colorMode(RGB);
stroke(255);
background(51);
let from = color(218, 165, 32);
let to = color(72, 61, 139);
colorMode(RGB); // Try changing to HSB.
let interA = lerpColor(from, to, 0.33);
let interB = lerpColor(from, to, 0.66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
- - - -
- - - - -
- -

- - inner lightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1623 -
- -

- - - -
-
- - -
- Extracts the HSL lightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the lightness - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSL);
let c = color(156, 100, 50, 1);
fill(c);
rect(15, 20, 35, 60);
let value = lightness(c); // Sets 'value' to 50
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner line(x1, y1, x2, y2) - - -
- jsboot/p5shape.js, - line 152 -
- -

- - - -
-
- - -
- Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
line(30, 20, 85, 75);

line(30, 20, 85, 20);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
line(85, 75, 30, 75);
- - - -
- - - - -
- -

- - inner loadBytes(file) → {Array.<number>} - - -
- jsboot/p5.js, - line 543 -
- -

- - - -
-
- - -
- This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
file - - -string - - - - name of the file or URL to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<number> - - - - - -- an object whose 'bytes' property will be the loaded buffer - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let data;

function preload() {
  data = loadBytes('assets/mammals.xml');
}

function setup() {
  for (let i = 0; i < 5; i++) {
    console.log(data.bytes[i].toString(16));
  }
}
- - - -
- - - - -
- -

- - inner loadFont(path) → {Font} - - -
- jsboot/p5typo.js, - line 26 -
- -

- - - -
-
- - -
- Loads a GRX font file (.FNT) from a file Font Object.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Font - - - - - -- Font object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner loadImage(path) → {Bitmap} - - -
- jsboot/p5shape.js, - line 681 -
- -

- - - -
-
- - -
- Loads an image from a path and creates a Image from it.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - Path of the image to be loaded
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Bitmap - - - - - -- the Image object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner loadStrings(filename) → {Array.<String>} - - -
- jsboot/p5.js, - line 486 -
- -

- - - -
-
- - -
- Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.

Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.

This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let result;
function preload() {
  result = loadStrings('assets/test.txt');
}
function setup() {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}

function setup() {
  loadStrings('assets/test.txt', pickString);
}

function pickString(result) {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}
- - - -
- - - - -
- -

- - inner log(n) → {Number} - - -
- jsboot/p5math.js, - line 320 -
- -

- - - -
-
- - -
- Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number greater than 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- natural logarithm of n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}
- - - -
- - - - -
- -

- - inner loop() - - -
- jsboot/p5.js, - line 235 -
- -

- - - -
-
- - -
- By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop(). Avoid calling loop() from inside setup(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}
- - - -
- - - - -
- -

- - inner mag(a, b) → {Number} - - -
- jsboot/p5math.js, - line 370 -
- -

- - - -
-
- - -
- Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - first value
b - - -Number - - - - second value
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- magnitude of vector from (0,0) to (a,b) - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}
- - - -
- - - - -
- -

- - inner map(value, start1, stop1, start2, stop2, withinBoundsopt) → {Number} - - -
- jsboot/p5math.js, - line 402 -
- -

- - - -
-
- - -
- Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -Number - - - - - - - - - - the incoming value to be converted
start1 - - -Number - - - - - - - - - - lower bound of the value's current range
stop1 - - -Number - - - - - - - - - - upper bound of the value's current range
start2 - - -Number - - - - - - - - - - lower bound of the value's target range
stop2 - - -Number - - - - - - - - - - upper bound of the value's target range
withinBounds - - -Boolean - - - - - - <optional>
- - - - - - 		constrain the value to the newly mapped range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- remapped number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}
- - - -
- - - - -
- -

- - inner match(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 616 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);
- - - -
- - - - -
- -

- - inner matchAll(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 649 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- 2d Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);
- - - -
- - - - -
- -

- - inner max(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 448 -
- -

- - - -
-
- - -
- Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- maximum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner millis() → {Number} - - -
- jsboot/p5util.js, - line 1110 -
- -

- - - -
-
- - -
- Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the number of milliseconds since starting the program - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
- - - -
- - - - -
- -

- - inner min(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 486 -
- -

- - - -
-
- - -
- Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- minimum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner minute() → {Integer} - - -
- jsboot/p5util.js, - line 1096 -
- -

- - - -
-
- - -
- The minute() function returns the current minute as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current minute - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = minute();
text('Current minute: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner month() → {Integer} - - -
- jsboot/p5util.js, - line 1125 -
- -

- - - -
-
- - -
- The month() function returns the current month as a value from 1 - 12. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current month - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = month();
text('Current month: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner mouseClicked(eventopt) - - -
- jsboot/p5input.js, - line 422 -
- -

- - - -
-
- - -
- The mouseClicked() function is called once after a mouse button has been pressed and then released.

Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function mouseClicked() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseClicked() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseClicked(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseMoved(eventopt) - - -
- jsboot/p5input.js, - line 303 -
- -

- - - -
-
- - -
- The >mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move the mouse across the page
// to change its value

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function mouseMoved() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseMoved(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mousePressed(eventopt) - - -
- jsboot/p5input.js, - line 341 -
- -

- - - -
-
- - -
- The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mousePressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mousePressed(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseReleased(eventopt) - - -
- jsboot/p5input.js, - line 381 -
- -

- - - -
-
- - -
- The mouseReleased() function is called every time a mouse button is released.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseReleased() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseReleased(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner nf(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 692 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
left - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfc(num, rightopt) → {String} - - -
- jsboot/p5util.js, - line 789 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfp(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 853 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfs(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 901 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. The values for the digits, left, and right parameters should always be positive integers. (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner noCursor() - - -
- jsboot/p5.js, - line 408 -
- -

- - - -
-
- - -
- Hides the cursor from view. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}
- - - -
- - - - -
- -

- - inner noFill() - - -
- jsboot/p5color.js, - line 2031 -
- -

- - - -
-
- - -
- Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(15, 10, 55, 55);
noFill();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noFill();
  stroke(100, 100, 240);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner noise(x, yopt, zopt) → {Number} - - -
- jsboot/p5math.js, - line 969 -
- -

- - - -
-
- - -
- Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate in noise space
y - - -Number - - - - - - <optional>
- - - - - - 		y-coordinate in noise space
z - - -Number - - - - - - <optional>
- - - - - - 		z-coordinate in noise space
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- Perlin noise value (between 0 and 1) at specified coordinates - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}
- - - -
- - - - -
- -

- - inner noiseDetail(lod, falloff) - - -
- jsboot/p5math.js, - line 1113 -
- -

- - - -
-
- - -
- Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence.

By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise().

By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
lod - - -Number - - - - number of octaves to be used by the noise
falloff - - -Number - - - - falloff factor for each octave
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}
- - - -
- - - - -
- -

- - inner noLoop() - - -
- jsboot/p5.js, - line 271 -
- -

- - - -
-
- - -
- Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.

When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.

Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}
- - - -
- - - - -
- -

- - inner norm(value, start, stop) → {Number} - - -
- jsboot/p5math.js, - line 524 -
- -

- - - -
-
- - -
- Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - incoming value to be normalized
start - - -Number - - - - lower bound of the value's current range
stop - - -Number - - - - upper bound of the value's current range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- normalized number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}
- - - -
- - - - -
- -

- - inner noStroke() - - -
- jsboot/p5color.js, - line 2058 -
- -

- - - -
-
- - -
- Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noStroke();
  fill(240, 150, 150);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner pixelDensity(val) - - -
- jsboot/p5env.js, - line 267 -
- -

- - - -
-
- - -
- Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
val - - -Number - - - - whether or how much the sketch should scale
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  pixelDensity(1);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

function setup() {
  pixelDensity(3.0);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner point(x, y, zopt) - - -
- jsboot/p5shape.js, - line 189 -
- -

- - - -
-
- - -
- Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x-coordinate
y - - -Number - - - - - - - - - - the y-coordinate
z - - -Number - - - - - - <optional>
- - - - - - 		the z-coordinate (for WebGL mode)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
point(30, 20);
point(85, 20);
point(85, 75);
point(30, 75);
- - - -
- - - - -
- -

- - inner pop() - - -
- jsboot/p5.js, - line 631 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
translate(50, 0);
strokeWeight(10);
fill(204, 153, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner pow(n, e) → {Number} - - -
- jsboot/p5math.js, - line 570 -
- -

- - - -
-
- - -
- Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to Math.pow(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - base of the exponential expression
e - - -Number - - - - power by which to raise the base
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- n^e - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 45 -
- -

- - - -
-
- - -
- The println() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 26 -
- -

- - - -
-
- - -
- The print() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner push() - - -
- jsboot/p5.js, - line 580 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
translate(50, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner quad(x1, y1, x2, y2, x3, y3, x4, y4) - - -
- jsboot/p5shape.js, - line 211 -
- -

- - - -
-
- - -
- Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
x3 - - -Number - - - - the x-coordinate of the third point
y3 - - -Number - - - - the y-coordinate of the third point
x4 - - -Number - - - - the x-coordinate of the fourth point
y4 - - -Number - - - - the y-coordinate of the fourth point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
quad(38, 31, 86, 20, 69, 63, 30, 76);
- - - -
- - - - -
- -

- - inner radians(degrees) → {Number} - - -
- jsboot/p5math.js, - line 1402 -
- -

- - - -
-
- - -
- Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
degrees - - -Number - - - - the degree value to convert to radians
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians
- - - -
- - - - -
- -

- - inner random(minopt, maxopt) → {Number} - - -
- jsboot/p5math.js, - line 817 -
- -

- - - -
-
- - -
- Return a random floating-point number. Takes either 0, 1 or 2 arguments. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If one argument is given and it is an array, returns a random element from that array. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
min - - -Number - - - - - - <optional>
- - - - - - 		the lower bound (inclusive)
max - - -Number - - - - - - <optional>
- - - - - - 		the upper bound (exclusive)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word
- - - -
- - - - -
- -

- - inner randomGaussian(mean, sd) → {Number} - - -
- jsboot/p5math.js, - line 882 -
- -

- - - -
-
- - -
- Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned.

Takes either 0, 1 or 2 arguments.
If no args, returns a mean of 0 and standard deviation of 1.
If one arg, that arg is the mean (standard deviation is 1).
If two args, first is mean, second is standard deviation. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mean - - -Number - - - - the mean
sd - - -Number - - - - the standard deviation
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}
- - - -
- - - - -
- -

- - inner randomSeed(seed) - - -
- jsboot/p5math.js, - line 794 -
- -

- - - -
-
- - -
- Sets the seed value for random(). By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
seed - - -Number - - - - the seed value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}
- - - -
- - - - -
- -

- - inner rect(x, y, w, h) - - -
- jsboot/p5shape.js, - line 240 -
- -

- - - -
-
- - -
- Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the rectangle.
y - - -Number - - - - y-coordinate of the rectangle.
w - - -Number - - - - width of the rectangle.
h - - -Number - - - - height of the rectangle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a rectangle at location (30, 20) with a width and height of 55.
rect(30, 20, 55, 55);
- - - -
- - - - -
- -

- - inner rectMode(mode) - - -
- jsboot/p5shape.js, - line 568 -
- -

- - - -
-
- - -
- Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, CENTER, or RADIUS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rectMode(CORNER); // Default rectMode is CORNER
fill(255); // Set fill to white
rect(25, 25, 50, 50); // Draw white rect using CORNER mode

rectMode(CORNERS); // Set rectMode to CORNERS
fill(100); // Set fill to gray
rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode

rectMode(RADIUS); // Set rectMode to RADIUS
fill(255); // Set fill to white
rect(50, 50, 30, 30); // Draw white rect using RADIUS mode

rectMode(CENTER); // Set rectMode to CENTER
fill(100); // Set fill to gray
rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- - - -
- - - - -
- -

- - inner red(color) → {Number} - - -
- jsboot/p5color.js, - line 1644 -
- -

- - - -
-
- - -
- Extracts the red value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the red value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let redValue = red(c); // Get red in 'c'
print(redValue); // Print "255.0"
fill(redValue, 0, 0); // Use 'redValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle

colorMode(RGB, 255);
let c = color(127, 255, 0);
colorMode(RGB, 1);
let myColor = red(c);
print(myColor);
- - - -
- - - - -
- -

- - inner redraw(nopt) - - -
- jsboot/p5.js, - line 325 -
- -

- - - -
-
- - -
- Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.

In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).

The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop().

In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Integer - - - - - - <optional>
- - - - - - 		Redraw for n-times. The default value is 1.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}
- - - -
- - - - -
- -

- - inner resetMatrix() - - -
- jsboot/p5trans.js, - line 192 -
- -

- - - -
-
- - -
- Replaces the current matrix with the identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(50, 50);
applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
rect(0, 0, 20, 20);
// Note that the translate is also reset.
resetMatrix();
rect(0, 0, 20, 20);
- - - -
- - - - -
- -

- - inner reverse(list) → {Array} - - -
- jsboot/p5util.js, - line 148 -
- -

- - - -
-
- - -
- Reverses the order of an array, maps to Array.reverse() -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to reverse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the reversed list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}
- - - -
- - - - -
- -

- - inner rotate(angle) - - -
- jsboot/p5trans.js, - line 208 -
- -

- - - -
-
- - -
- Rotates a shape the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.

Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again.

Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle of rotation, specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 52, 52);
- - - -
- - - - -
- -

- - inner round(n) → {Integer} - - -
- jsboot/p5math.js, - line 598 -
- -

- - - -
-
- - -
- Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner saturation(color) → {Number} - - -
- jsboot/p5color.js, - line 1671 -
- -

- - - -
-
- - -
- Extracts the saturation value from a color or pixel array. Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the saturation value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = saturation(c); // Sets 'value' to 126
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner saveStrings(list, filename, extensionopt) - - -
- jsboot/p5.js, - line 436 -
- -

- - - -
-
- - -
- Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array.<String> - - - - - - - - - - string array to be written
filename - - -String - - - - - - - - - - filename for output
extension - - -String - - - - - - <optional>
- - - - - - 		the filename's extension
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let words = 'apple bear cat dog';

// .split() outputs an Array
let list = split(words, ' ');

function setup() {
  createCanvas(100, 100);
  background(200);
  text('click here to save', 10, 10, 70, 80);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    saveStrings(list, 'nouns.txt');
  }
}

// Saves the following to a file called 'nouns.txt':
//
// apple
// bear
// cat
// dog
- - - -
- - - - -
- -

- - inner scale(s, yopt) - - -
- jsboot/p5trans.js, - line 366 -
- -

- - - -
-
- - -
- Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.

Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.

Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
s - - -Number -| - -p5.Vector -| - -Array.<Number> - - - - - - - - - - percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given
y - - -Number - - - - - - <optional>
- - - - - - 		percent to scale the object in the y-axis
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

rect(30, 20, 50, 50);
scale(0.5, 1.3);
rect(30, 20, 50, 50);
- - - -
- - - - -
- -

- - inner scale(scales) - - -
- jsboot/p5trans.js, - line 396 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
scales - - -p5.Vector -| - -Array.<Number> - - - - per-axis percents to scale the object
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner second() → {Integer} - - -
- jsboot/p5util.js, - line 1138 -
- -

- - - -
-
- - -
- The second() function returns the current second as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current second - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var s = second();
text('Current second: \n' + s, 5, 50);
- - - -
- - - - -
- -

- - inner setAlpha(alpha) - - -
- jsboot/p5color.js, - line 595 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
alpha - - -Number - - - - the new alpha value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let squareColor;

function setup() {
  ellipseMode(CORNERS);
  strokeWeight(4);
  squareColor = color(100, 50, 150);
}

function draw() {
  background(255);

  noFill();
  stroke(0);
  ellipse(10, 10, width - 10, height - 10);

  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  fill(squareColor);
  noStroke();
  rect(13, 13, width - 26, height - 26);
}
- - - -
- - - - -
- -

- - inner setBlue(blue) - - -
- jsboot/p5color.js, - line 575 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
blue - - -Number - - - - the new blue value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setGreen(green) - - -
- jsboot/p5color.js, - line 555 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
green - - -Number - - - - the new green value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setRed(red) - - -
- jsboot/p5color.js, - line 535 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
red - - -Number - - - - the new red value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner shearX(angle) - - -
- jsboot/p5trans.js, - line 245 -
- -

- - - -
-
- - -
- Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shearY(angle) - - -
- jsboot/p5trans.js, - line 279 -
- -

- - - -
-
- - -
- Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shorten(list) → {Array} - - -
- jsboot/p5util.js, - line 167 -
- -

- - - -
-
- - -
- Decreases an array by one element and returns the shortened array, maps to Array.pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to shorten
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shortened Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}
- - - -
- - - - -
- -

- - inner shuffle(array, boolopt) → {Array} - - -
- jsboot/p5util.js, - line 188 -
- -

- - - -
-
- - -
- Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
array - - -Array - - - - - - - - - - Array to shuffle
bool - - -Boolean - - - - - - <optional>
- - - - - - 		modify passed array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shuffled Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}
- - - -
- - - - -
- -

- - inner sin(angle) → {Number} - - -
- jsboot/p5math.js, - line 1339 -
- -

- - - -
-
- - -
- Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the sine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner sort(list, countopt) → {Array} - - -
- jsboot/p5util.js, - line 228 -
- -

- - - -
-
- - -
- Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to sort
count - - -Integer - - - - - - <optional>
- - - - - - 		number of elements to sort, starting from 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the sorted list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}
- - - -
- - - - -
- -

- - inner splice(list, value, position) → {Array} - - -
- jsboot/p5util.js, - line 272 -
- -

- - - -
-
- - -
- Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to splice into
value - - -any - - - - value to be spliced in
position - - -Integer - - - - in the array from which to insert data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}
- - - -
- - - - -
- -

- - inner split(value, delim) → {Array.<String>} - - -
- jsboot/p5util.js, - line 965 -
- -

- - - -
-
- - -
- The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - the String to be split
delim - - -String - - - - the String used to separate the data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
- - - -
- - - - -
- -

- - inner splitTokens(value, delimopt) → {Array.<String>} - - -
- jsboot/p5util.js, - line 991 -
- -

- - - -
-
- - -
- The splitTokens() function splits a String at one or many character delimiters or "tokens." The delim parameter specifies the character or characters to be used as a boundary.

If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -String - - - - - - - - - - the String to be split
delim - - -String - - - - - - <optional>
- - - - - - 		list of individual Strings that will be used as separators
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
- - - -
- - - - -
- -

- - inner sq(n) → {Number} - - -
- jsboot/p5math.js, - line 631 -
- -

- - - -
-
- - -
- Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to square
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- squared number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner sqrt(n) → {Number} - - -
- jsboot/p5math.js, - line 672 -
- -

- - - -
-
- - -
- Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - non-negative number to square root
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- square root of number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner square(x, y, s) - - -
- jsboot/p5shape.js, - line 331 -
- -

- - - -
-
- - -
- Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the square.
y - - -Number - - - - y-coordinate of the square.
s - - -Number - - - - side size of the square.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
- - - -
- - - - -
- -

- - inner str(n) → {String} - - -
- jsboot/p5util.js, - line 398 -
- -

- - - -
-
- - -
- Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
- - - -
- - - - -
- -

- - inner stroke(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2170 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(value) - - -
- jsboot/p5color.js, - line 2165 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(color) - - -
- jsboot/p5color.js, - line 2182 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the stroke color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 2084 -
- -

- - - -
-
- - -
- Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the stroke color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
strokeWeight(4);
stroke(51);
rect(20, 20, 60, 60);

// R, G & B integer values
stroke(255, 204, 0);
strokeWeight(4);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
strokeWeight(4);
stroke(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
stroke('red');
strokeWeight(4);
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
stroke('#fae');
strokeWeight(4);
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
stroke('#222222');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGB notation
stroke('rgb(0,255,0)');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGBA notation
stroke('rgba(0,255,0,0.25)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGB notation
stroke('rgb(100%,0%,10%)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGBA notation
stroke('rgba(100%,0%,100%,0.5)');
strokeWeight(4);
rect(20, 20, 60, 60);

// p5 Color object
stroke(color(0, 0, 255));
strokeWeight(4);
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner stroke(values) - - -
- jsboot/p5color.js, - line 2176 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner strokeWeight(weight) - - -
- jsboot/p5shape.js, - line 810 -
- -

- - - -
-
- - -
- Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
weight - - -Number - - - - the weight (in pixels) of the stroke
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(1); // Default
line(20, 20, 80, 20);
strokeWeight(4); // Thicker
line(20, 40, 80, 40);
strokeWeight(10); // Beastly
line(20, 70, 80, 70);
- - - -
- - - - -
- -

- - inner subset(list, start, countopt) → {Array} - - -
- jsboot/p5util.js, - line 304 -
- -

- - - -
-
- - -
- Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to extract from
start - - -Integer - - - - - - - - - - position to begin
count - - -Integer - - - - - - <optional>
- - - - - - 		number of values to extract
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- Array of extracted elements - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}
- - - -
- - - - -
- -

- - inner tan(angle) → {Number} - - -
- jsboot/p5math.js, - line 1359 -
- -

- - - -
-
- - -
- Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the tangent of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner text(str, x, y) - - -
- jsboot/p5typo.js, - line 39 -
- -

- - - -
-
- - -
- Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.

The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.

The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String -| - -Object -| - -Array -| - -Number -| - -Boolean - - - - the alphanumeric symbols to be displayed
x - - -Number - - - - x-coordinate of text
y - - -Number - - - - y-coordinate of text
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}
- - - -
- - - - -
- -

- - inner textAlign(horizAlign, vertAlignopt) - - -
- jsboot/p5typo.js, - line 148 -
- -

- - - -
-
- - -
- Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
horizAlign - - -Constant - - - - - - - - - - horizontal alignment, either LEFT, CENTER, or RIGHT
vertAlign - - -Constant - - - - - - <optional>
- - - - - - 		vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);
- - - -
- - - - -
- -

- - inner textFont() → {Object} - - -
- jsboot/p5typo.js, - line 114 -
- -

- - - -
-
- - -
- Sets the current font that will be drawn with the text() function.

-
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- the current font - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}
- - - -
- - - - -
- -

- - inner textSize() → {Number} - - -
- jsboot/p5typo.js, - line 230 -
- -

- - - -
-
- - -
- Gets the current font size. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner textWidth(theText) → {Number} - - -
- jsboot/p5typo.js, - line 203 -
- -

- - - -
-
- - -
- Calculates and returns the width of any character or text string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
theText - - -String - - - - the String of characters to measure
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);
- - - -
- - - - -
- -

- - inner toString(formatopt) → {String} - - -
- jsboot/p5color.js, - line 341 -
- -

- - - -
-
- - -
- This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
format - - -String - - - - - - <optional>
- - - - - - 		How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- the formatted string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let myColor;
function setup() {
  createCanvas(200, 200);
  stroke(255);
  myColor = color(100, 100, 250);
  fill(myColor);
}

function draw() {
  rotate(HALF_PI);
  text(myColor.toString(), 0, -5);
  text(myColor.toString('#rrggbb'), 0, -30);
  text(myColor.toString('rgba%'), 0, -55);
}
- - - -
- - - - -
- -

- - inner translate(vector) - - -
- jsboot/p5trans.js, - line 347 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
vector - - -p5.Vector - - - - the vector to translate by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner translate(x, y, zopt) - - -
- jsboot/p5trans.js, - line 313 -
- -

- - - -
-
- - -
- Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.

Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - left/right translation
y - - -Number - - - - - - - - - - up/down translation
z - - -Number - - - - - - <optional>
- - - - - - 		forward/backward translation (webgl only)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(30, 20);
rect(0, 0, 55, 55);

rect(0, 0, 55, 55); // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55); // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55); // Draw rect at new 0,0

function draw() {
  background(200);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  translate(p5.Vector.fromAngle(millis() / 1000, 40));
  rect(0, 0, 20, 20);
}
- - - -
- - - - -
- -

- - inner triangle(x1, y1, x2, y2, x3, y3) - - -
- jsboot/p5shape.js, - line 356 -
- -

- - - -
-
- - -
- A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
x3 - - -Number - - - - x-coordinate of the third point
y3 - - -Number - - - - y-coordinate of the third point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
triangle(30, 75, 58, 20, 86, 75);
- - - -
- - - - -
- -

- - inner trim(str) → {String} - - -
- jsboot/p5util.js, - line 1042 -
- -

- - - -
-
- - -
- Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - a String to be trimmed
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- a trimmed String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);
- - - -
- - - - -
- -

- - inner unchar(n) → {Number} - - -
- jsboot/p5util.js, - line 508 -
- -

- - - -
-
- - -
- Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
- - - -
- - - - -
- -

- - inner unhex(n) → {Number} - - -
- jsboot/p5util.js, - line 569 -
- -

- - - -
-
- - -
- Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of hexadecimal value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
- - - -
- - - - -
- -

- - inner vertex(x, y) - - -
- jsboot/p5shape.js, - line 460 -
- -

- - - -
-
- - -
- All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the vertex
y - - -Number - - - - y-coordinate of the vertex
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(3);
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
- - - -
- - - - -
- -

- - inner year() → {Integer} - - -
- jsboot/p5util.js, - line 1151 -
- -

- - - -
-
- - -
- The year() returns the current year as an integer (2014, 2015, 2016, etc). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current year - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var y = year();
text('Current year: \n' + y, 5, 50);
- - - -
- -
- - - - - -
- -
- - - - - - - -
- -
- -

p5compat

- - - - -
- -
- -
- - - - - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - -
- - - - - - - -

Classes

- - -
- -
-

- Color -
- module:p5compat~Color -
-

-
- - -
- - - - - - - - - - -

Members

- -
- - -
-

- static ColorConversion - -
- jsboot/p5color.js, - line 41 -
- -

- - -
-
- -
- Conversions adapted from . In these functions, hue is always in the range [0, 1], just like all other components are in the range [0, 1]. 'Brightness' and 'value' are used interchangeably. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly displayHeight - -
- jsboot/p5env.js, - line 202 -
- -

- - -
-
- -
- System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly displayWidth - -
- jsboot/p5env.js, - line 189 -
- -

- - -
-
- -
- System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
displayWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(displayWidth, displayHeight);
- - -
- - - - -
-

- static, readonly focused - -
- jsboot/p5env.js, - line 109 -
- -

- - -
-
- -
- Confirms if the window a p5.js program is in is "focused," meaning that the sketch will accept mouse or keyboard input. This variable is "true" if the window is focused and "false" if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
focused - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// To demonstrate, put two windows side by side.
// Click on the window that the p5 sketch isn't in!
function draw() {
  background(200);
  noStroke();
  fill(0, 200, 0);
  ellipse(25, 25, 50, 50);

  if (!focused) {
    // or "if (focused === false)"
    stroke(200, 0, 0);
    line(0, 0, 100, 100);
    line(100, 0, 0, 100);
  }
}
- - -
- - - - -
-

- static, readonly frameCount - -
- jsboot/p5env.js, - line 83 -
- -

- - -
-
- -
- The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
frameCount - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
- - -
- - - - -
-

- static, readonly height - -
- jsboot/p5env.js, - line 238 -
- -

- - -
-
- -
- System variable that stores the height of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
height - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly key - -
- jsboot/p5input.js, - line 507 -
- -

- - -
-
- -
- The system variable key always contains the value of the most recent key on the keyboard that was typed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Click any key to display it!
// (Not Guaranteed to be Case Sensitive)
function setup() {
  fill(245, 123, 158);
  textSize(50);
}

function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}
- - -
- - - - -
-

- static, readonly keyCode - -
- jsboot/p5input.js, - line 532 -
- -

- - -
-
- -
- The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyCode - - -Integer - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let fillVal = 126;
function draw() {
  fill(fillVal);
  rect(25, 25, 50, 50);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    fillVal = 255;
  } else if (keyCode === DOWN_ARROW) {
    fillVal = 0;
  }
  return false; // prevent default
}
- - -
- - - - -
-

- static, readonly keyIsPressed - -
- jsboot/p5input.js, - line 486 -
- -

- - -
-
- -
- The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
keyIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
- - -
- - - - -
-

- static, readonly mouseButton - -
- jsboot/p5input.js, - line 278 -
- -

- - -
-
- -
- Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseButton - - -Constant - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      ellipse(50, 50, 50, 50);
    }
    if (mouseButton === RIGHT) {
      rect(25, 25, 50, 50);
    }
    if (mouseButton === CENTER) {
      triangle(23, 75, 50, 20, 78, 75);
    }
  }

  print(mouseButton);
}
- - -
- - - - -
-

- static, readonly mouseIsPressed - -
- jsboot/p5input.js, - line 301 -
- -

- - -
-
- -
- The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseIsPressed - - -Boolean - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }

  print(mouseIsPressed);
}
- - -
- - - - -
-

- static, readonly mouseX - -
- jsboot/p5input.js, - line 53 -
- -

- - -
-
- -
- The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
- - -
- - - - -
-

- static, readonly mouseY - -
- jsboot/p5input.js, - line 71 -
- -

- - -
-
- -
- The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
- - -
- - - - -
-

- static, readonly pmouseX - -
- jsboot/p5input.js, - line 95 -
- -

- - -
-
- -
- The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
// Move the mouse across the canvas to leave a trail
function setup() {
  //slow down the frameRate to make it more visible
  frameRate(10);
}

function draw() {
  background(244, 248, 252);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + ' -> ' + mouseX);
}
- - -
- - - - -
-

- static, readonly pmouseY - -
- jsboot/p5input.js, - line 118 -
- -

- - -
-
- -
- The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pmouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
function draw() {
  background(237, 34, 93);
  fill(0);
  //draw a square only if the mouse is not moving
  if (mouseY === pmouseY && mouseX === pmouseX) {
    rect(20, 20, 60, 60);
  }

  print(pmouseY + ' -> ' + mouseY);
}
- - -
- - - - -
-

- static, readonly pwinMouseX - -
- jsboot/p5input.js, - line 213 -
- -

- - -
-
- -
- The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current x position is the horizontal mouse speed
  let speed = abs(winMouseX - pwinMouseX);
  //change the size of the circle
  //according to the horizontal speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly pwinMouseY - -
- jsboot/p5input.js, - line 247 -
- -

- - -
-
- -
- The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
pwinMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  noStroke();
  fill(237, 34, 93);
}

function draw() {
  clear();
  //the difference between previous and
  //current y position is the vertical mouse speed
  let speed = abs(winMouseY - pwinMouseY);
  //change the size of the circle
  //according to the vertical speed
  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
  //move the canvas to the mouse position
  myCanvas.position(winMouseX + 1, winMouseY + 1);
}
- - -
- - - - -
-

- static, readonly width - -
- jsboot/p5env.js, - line 230 -
- -

- - -
-
- -
- System variable that stores the width of the drawing canvas. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
width - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- static, readonly windowHeight - -
- jsboot/p5env.js, - line 222 -
- -

- - -
-
- -
- System variable that stores the height of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowHeight - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly windowWidth - -
- jsboot/p5env.js, - line 212 -
- -

- - -
-
- -
- System variable that stores the width of the inner window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
windowWidth - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
createCanvas(windowWidth, windowHeight);
- - -
- - - - -
-

- static, readonly winMouseX - -
- jsboot/p5input.js, - line 149 -
- -

- - -
-
- -
- The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseX - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the horizontal mouse position
  //relative to the window
  myCanvas.position(winMouseX + 1, windowHeight / 2);

  //the y of the square is relative to the canvas
  rect(20, mouseY, 60, 60);
}
- - -
- - - - -
-

- static, readonly winMouseY - -
- jsboot/p5input.js, - line 180 -
- -

- - -
-
- -
- The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. -
- - - - - - - -
Properties:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
winMouseY - - -Number - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
Example
- - 
let myCanvas;

function setup() {
  //use a variable to store a pointer to the canvas
  myCanvas = createCanvas(100, 100);
  const body = document.getElementsByTagName('body')[0];
  myCanvas.parent(body);
}

function draw() {
  background(237, 34, 93);
  fill(0);

  //move the canvas to the vertical mouse position
  //relative to the window
  myCanvas.position(windowWidth / 2, winMouseY + 1);

  //the x of the square is relative to the canvas
  rect(mouseX, 20, 60, 60);
}
- - -
- - - - -
-

- inner colorPatterns - -
- jsboot/p5color.js, - line 888 -
- -

- - -
-
- -
- Full color string patterns. The capture groups are necessary. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner namedColors - -
- jsboot/p5color.js, - line 722 -
- -

- - -
-
- -
- CSS named colors. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
-

- inner WHITESPACE - -
- jsboot/p5color.js, - line 880 -
- -

- - -
-
- -
- These regular expressions are used to build up the patterns for matching viable CSS color strings: fragmenting the regexes in this way increases the legibility and comprehensibility of the code. Note that RGB values of .9 are not parsed by IE, but are supported here for color string consistency. -
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- -
- - - -

Methods

- -
- - -
- -

- - static _cloneEnv() - - -
- jsboot/p5.js, - line 67 -
- -

- - - -
-
- - -
- deep copy the current environment. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _ensureMatrix() - - -
- jsboot/p5trans.js, - line 34 -
- -

- - - -
-
- - -
- make sure we have a 2x2 identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _PolyLine() - - -
- jsboot/p5shape.js, - line 550 -
- -

- - - -
-
- - -
- draw polygon by using lines. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transX(x, y) → {number} - - -
- jsboot/p5trans.js, - line 67 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated x coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static _transY(x, y) → {number} - - -
- jsboot/p5trans.js, - line 82 -
- -

- - - -
-
- - -
- translate a point with the current matrix (if any). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -number - - - - point
y - - -number - - - - point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- the translated y coordinate. - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static createCanvas() - - -
- jsboot/p5.js, - line 201 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static exit() - - -
- jsboot/p5.js, - line 231 -
- -

- - - -
-
- - -
- exit the script after the current Loop(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noSmooth() - - -
- jsboot/p5.js, - line 211 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static noTint() - - -
- jsboot/p5.js, - line 226 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static settings() - - -
- jsboot/p5.js, - line 216 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static size() - - -
- jsboot/p5.js, - line 196 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static smooth() - - -
- jsboot/p5.js, - line 206 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static tint() - - -
- jsboot/p5.js, - line 221 -
- -

- - - -
-
- - -
- ignored -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner abs(n) → {Number} - - -
- jsboot/p5math.js, - line 59 -
- -

- - - -
-
- - -
- Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to compute
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- absolute value of given number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
- - - -
- - - - -
- -

- - inner acos(value) → {Number} - - -
- jsboot/p5math.js, - line 1211 -
- -

- - - -
-
- - -
- The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc cosine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc cosine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);
- - - -
- - - - -
- -

- - inner alpha(color) → {Number} - - -
- jsboot/p5color.js, - line 1271 -
- -

- - - -
-
- - -
- Extracts the alpha value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the alpha value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
let c = color(0, 126, 255, 102);
fill(c);
rect(15, 15, 35, 70);
let value = alpha(c); // Sets 'value' to 102
fill(value);
rect(50, 15, 35, 70);
- - - -
- - - - -
- -

- - inner angleMode(mode) - - -
- jsboot/p5math.js, - line 1423 -
- -

- - - -
-
- - -
- Sets the current mode of p5 to given mode. Default mode is RADIANS. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either RADIANS or DEGREES
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}
- - - -
- - - - -
- -

- - inner append(array, value) → {Array} - - -
- jsboot/p5util.js, - line 30 -
- -

- - - -
-
- - -
- Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
array - - -Array - - - - Array to append
value - - -any - - - - to be added to the Array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the array that was appended to - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}
- - - -
- - - - -
- -

- - inner applyMatrix(a, b, c, d, e, f) - - -
- jsboot/p5trans.js, - line 90 -
- -

- - - -
-
- - -
- Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia. The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form: > The transformation matrix used when applyMatrix is called -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
b - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
c - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
d - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
e - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
f - - -Number - - - - numbers which define the 2x3 matrix to be multiplied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  // Equivalent to translate(x, y);
  applyMatrix(1, 0, 0, 1, 40 + step, 50);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  background(200);
  translate(50, 50);
  // Equivalent to scale(x, y);
  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, 0, TWO_PI);
  var cos_a = cos(angle);
  var sin_a = sin(angle);
  background(200);
  translate(50, 50);
  // Equivalent to rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  var step = frameCount % 20;
  var angle = map(step, 0, 20, -PI / 4, PI / 4);
  background(200);
  translate(50, 50);
  // equivalent to shearX(angle);
  var shear_factor = 1 / tan(PI / 2 - angle);
  applyMatrix(1, 0, shear_factor, 1, 0, 0);
  rect(0, 0, 50, 50);
}
- - - -
- - - - -
- -

- - inner arc(x, y, w, h, start, stop, modeopt) - - -
- jsboot/p5shape.js, - line 33 -
- -

- - - -
-
- - -
- Draw an arc to the screen. If called with only x, y, w, h, start, and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.

The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the arc's ellipse
y - - -Number - - - - - - - - - - y-coordinate of the arc's ellipse
w - - -Number - - - - - - - - - - width of the arc's ellipse by default
h - - -Number - - - - - - - - - - height of the arc's ellipse by default
start - - -Number - - - - - - - - - - angle to start the arc, specified in radians
stop - - -Number - - - - - - - - - - angle to stop the arc, specified in radians
mode - - -Constant - - - - - - <optional>
- - - - - - 		optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
arc(50, 55, 50, 50, 0, HALF_PI);
noFill();
arc(50, 55, 60, 60, HALF_PI, PI);
arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);

arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
- - - -
- - - - -
- -

- - inner arrayCopy(src, srcPosition, dst, dstPosition, length) - - -
- jsboot/p5util.js, - line 52 -
- -

- - - -
-
- - -
- Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().

The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).

Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
src - - -Array - - - - the source Array
srcPosition - - -Integer - - - - starting position in the source Array
dst - - -Array - - - - the destination Array
dstPosition - - -Integer - - - - starting position in the destination Array
length - - -Integer - - - - number of Array elements to be copied
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - -
Deprecated:
  • Yes
- - - - - - - - - - - - - - - -
- - - -
Example
- - 
var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]
- - - -
- - - - -
- -

- - inner asin(value) → {Number} - - -
- jsboot/p5math.js, - line 1237 -
- -

- - - -
-
- - -
- The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc sine is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc sine of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);
- - - -
- - - - -
- -

- - inner atan(value) → {Number} - - -
- jsboot/p5math.js, - line 1264 -
- -

- - - -
-
- - -
- The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - the value whose arc tangent is to be returned
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);
- - - -
- - - - -
- -

- - inner atan2(y, x) → {Number} - - -
- jsboot/p5math.js, - line 1291 -
- -

- - - -
-
- - -
- Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor.

Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
y - - -Number - - - - y-coordinate of the point
x - - -Number - - - - x-coordinate of the point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the arc tangent of the given point - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}
- - - -
- - - - -
- -

- - inner background(color) - - -
- jsboot/p5color.js, - line 1702 -
- -

- - - -
-
- - -
- The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A Color object can also be provided to set the background color.

An Image can also be provided to set the background image. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - any value created by the color() function
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
background(51);

// R, G & B integer values
background(255, 204, 0);

// H, S & B integer values
colorMode(HSB);
background(255, 204, 100);

// Named SVG/CSS color string
background('red');

// three-digit hexadecimal RGB notation
background('#fae');

// six-digit hexadecimal RGB notation
background('#222222');

// integer RGB notation
background('rgb(0,255,0)');

// integer RGBA notation
background('rgba(0,255,0, 0.25)');

// percentage RGB notation
background('rgb(100%,0%,10%)');

// percentage RGBA notation
background('rgba(100%,0%,100%,0.5)');

// p5 Color object
background(color(0, 0, 255));
- - - -
- - - - -
- -

- - inner background(colorstring, aopt) - - -
- jsboot/p5color.js, - line 1760 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
colorstring - - -String - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex
a - - -Number - - - - - - <optional>
- - - - - - 		opacity of the background relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(gray, aopt) - - -
- jsboot/p5color.js, - line 1769 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - specifies a value between white and black
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(v1, v2, v3, aopt) - - -
- jsboot/p5color.js, - line 1775 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value (depending on the current color mode)
v2 - - -Number - - - - - - - - - - green or saturation value (depending on the current color mode)
v3 - - -Number - - - - - - - - - - blue or brightness value (depending on the current color mode)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(values) - - -
- jsboot/p5color.js, - line 1786 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner background(bitmap, aopt) - - -
- jsboot/p5color.js, - line 1792 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
bitmap - - -Bitmap - - - - - - - - - - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
a - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner beginShape(kindopt) - - -
- jsboot/p5shape.js, - line 379 -
- -

- - - -
-
- - -
- Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.

The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.

Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
kind - - -Constant - - - - - - <optional>
- - - - - - 		either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

beginShape(LINES);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();

beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
- - - -
- - - - -
- -

- - inner blue(color) → {Number} - - -
- jsboot/p5color.js, - line 1291 -
- -

- - - -
-
- - -
- Extracts the blue value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the blue value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(175, 100, 220); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let blueValue = blue(c); // Get blue in 'c'
print(blueValue); // Prints "220.0"
fill(0, 0, blueValue); // Use 'blueValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner boolean(n) → {Boolean} - - -
- jsboot/p5util.js, - line 422 -
- -

- - - -
-
- - -
- Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
- - - -
- - - - -
- -

- - inner brightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1312 -
- -

- - - -
-
- - -
- Extracts the HSB brightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the brightness value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = brightness(c); // Sets 'value' to 255
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner byte(n) → {Number} - - -
- jsboot/p5util.js, - line 452 -
- -

- - - -
-
- - -
- Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- byte representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]
- - - -
- - - - -
- -

- - inner ceil(n) → {Integer} - - -
- jsboot/p5math.js, - line 77 -
- -

- - - -
-
- - -
- Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round up
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded up number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner char(n) → {String} - - -
- jsboot/p5util.js, - line 481 -
- -

- - - -
-
- - -
- Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Number - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
- - - -
- - - - -
- -

- - inner circle(x, y, d) - - -
- jsboot/p5shape.js, - line 133 -
- -

- - - -
-
- - -
- Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the centre of the circle.
y - - -Number - - - - y-coordinate of the centre of the circle.
d - - -Number - - - - diameter of the circle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a circle at location (30, 30) with a diameter of 20.
circle(30, 30, 20);
- - - -
- - - - -
- -

- - inner clear() - - -
- jsboot/p5color.js, - line 1813 -
- -

- - - -
-
- - -
- Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
  clear();
}
- - - -
- - - - -
- -

- - inner color(color) → {Color} - - -
- jsboot/p5color.js, - line 1472 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(value) → {Color} - - -
- jsboot/p5color.js, - line 1461 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(v1, v2, v3, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1449 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(values) → {Color} - - -
- jsboot/p5color.js, - line 1466 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner color(gray, alphaopt) → {Color} - - -
- jsboot/p5color.js, - line 1333 -
- -

- - - -
-
- - -
- Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.

Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - number specifying value between white and black.
alpha - - -Number - - - - - - <optional>
- - - - - - 		alpha value relative to current color range (default is 0-255)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- resulting color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(30, 20, 55, 55); // Draw rectangle

let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
ellipse(25, 25, 80, 80); // Draw left circle

// Using only one value with color()
// generates a grayscale value.
c = color(65); // Update 'c' with grayscale value
fill(c); // Use updated 'c' as fill color
ellipse(75, 75, 80, 80); // Draw right circle

// Named SVG & CSS colors may be used,
let c = color('magenta');
fill(c); // Use 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(20, 20, 60, 60); // Draw rectangle

// as can hex color codes:
noStroke(); // Don't draw a stroke around shapes
let c = color('#0f0');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('#00ff00');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// RGB and RGBA color strings are also supported:
// these all set to the same color (solid blue)
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('rgb(0,0,255)');
fill(c); // Use 'c' as fill color
rect(10, 10, 35, 35); // Draw rectangle

c = color('rgb(0%, 0%, 100%)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 35, 35); // Draw rectangle

c = color('rgba(0, 0, 255, 1)');
fill(c); // Use updated 'c' as fill color
rect(10, 55, 35, 35); // Draw rectangle

c = color('rgba(0%, 0%, 100%, 1)');
fill(c); // Use updated 'c' as fill color
rect(55, 55, 35, 35); // Draw rectangle

// HSL color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsl(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsla(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

// HSB color is also supported and can be specified
// by value
let c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsb(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsba(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle

let c; // Declare color 'c'
noStroke(); // Don't draw a stroke around shapes

// If no colorMode is specified, then the
// default of RGB with scale of 0-255 is used.
c = color(50, 55, 100); // Create a color for 'c'
fill(c); // Use color variable 'c' as fill color
rect(0, 10, 45, 80); // Draw left rect

colorMode(HSB, 100); // Use HSB with scale of 0-100
c = color(50, 55, 100); // Update 'c' with new color
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw right rect
- - - -
- - - - -
- -

- - inner colorMode(mode, maxopt) - - -
- jsboot/p5color.js, - line 1841 -
- -

- - - -
-
- - -
- colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.

Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - - either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
max - - -Number - - - - - - <optional>
- - - - - - 		range for all values
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(RGB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 0);
    point(i, j);
  }
}

noStroke();
colorMode(HSB, 100);
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < 100; j++) {
    stroke(i, j, 100);
    point(i, j);
  }
}

colorMode(RGB, 255);
let c = color(127, 255, 0);

colorMode(RGB, 1);
let myColor = c._getRed();
text(myColor, 10, 10, 80, 80);

noFill();
colorMode(RGB, 255, 255, 255, 1);
background(255);

strokeWeight(4);
stroke(255, 0, 10, 0.3);
ellipse(40, 40, 50, 50);
ellipse(50, 50, 40, 40);
- - - -
- - - - -
- -

- - inner colorMode(mode, max1, max2, max3, maxAopt) - - -
- jsboot/p5color.js, - line 1894 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - - - - -
max1 - - -Number - - - - - - - - - - range for the red or hue depending on the current color mode
max2 - - -Number - - - - - - - - - - range for the green or saturation depending on the current color mode
max3 - - -Number - - - - - - - - - - range for the blue or brightness/lightness depending on the current color mode
maxA - - -Number - - - - - - <optional>
- - - - - - 		range for the alpha
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner concat(a, b) → {Array} - - -
- jsboot/p5util.js, - line 120 -
- -

- - - -
-
- - -
- Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Array - - - - first Array to concatenate
b - - -Array - - - - second Array to concatenate
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- concatenated array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}
- - - -
- - - - -
- -

- - inner constrain(n, low, high) → {Number} - - -
- jsboot/p5math.js, - line 111 -
- -

- - - -
-
- - -
- Constrains a value between a minimum and maximum value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to constrain
low - - -Number - - - - minimum limit
high - - -Number - - - - maximum limit
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- constrained number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}
- - - -
- - - - -
- -

- - inner cos(angle) → {Number} - - -
- jsboot/p5math.js, - line 1319 -
- -

- - - -
-
- - -
- Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the cosine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner createNumberDict(key, value) → {NumberDict} - - -
- jsboot/p5util.js, - line 1191 -
- -

- - - -
-
- - -
- Creates a new instance of NumberDict using the key-value pair or object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number - - - -
value - - -Number - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -NumberDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}
- - - -
- - - - -
- -

- - inner createStringDict(key, value) → {StringDict} - - -
- jsboot/p5util.js, - line 1168 -
- -

- - - -
-
- - -
- Creates a new instance of p5.StringDict using the key-value pair or the object you provide. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -String - - - -
value - - -String - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -StringDict - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}
- - - -
- - - - -
- -

- - inner createVector(xopt, yopt, zopt) → {p5.Vector} - - -
- jsboot/p5math.js, - line 26 -
- -

- - - -
-
- - -
- Creates a new PVector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -p5.Vector - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}
- - - -
- - - - -
- -

- - inner day() → {Integer} - - -
- jsboot/p5util.js, - line 1068 -
- -

- - - -
-
- - -
- The day() function returns the current day as a value from 1 - 31. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current day - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var d = day();
text('Current day: \n' + d, 5, 50);
- - - -
- - - - -
- -

- - inner degrees(radians) → {Number} - - -
- jsboot/p5math.js, - line 1380 -
- -

- - - -
-
- - -
- Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
radians - - -Number - - - - the radians value to convert to degrees
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees
- - - -
- - - - -
- -

- - inner displayDensity() → {Number} - - -
- jsboot/p5.js, - line 385 -
- -

- - - -
-
- - -
- Returns the pixel density of the current display the sketch is running on (always 1 for DOjS). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current pixel density of the display - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner dist(x1, y1, x2, y2) → {Number} - - -
- jsboot/p5math.js, - line 149 -
- -

- - - -
-
- - -
- Calculates the distance between two points. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- distance between the two points - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}
- - - -
- - - - -
- -

- - inner ellipse(x, y, w, hopt) - - -
- jsboot/p5shape.js, - line 77 -
- -

- - - -
-
- - -
- Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The origin may be changed with the ellipseMode() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate of the ellipse.
y - - -Number - - - - - - - - - - y-coordinate of the ellipse.
w - - -Number - - - - - - - - - - width of the ellipse.
h - - -Number - - - - - - <optional>
- - - - - - 		height of the ellipse.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(56, 46, 55, 55);
- - - -
- - - - -
- -

- - inner ellipseMode(mode) - - -
- jsboot/p5shape.js, - line 623 -
- -

- - - -
-
- - -
- Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are interpreted.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CENTER, RADIUS, CORNER, or CORNERS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipseMode(RADIUS); // Set ellipseMode to RADIUS
fill(255); // Set fill to white
ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER
fill(100); // Set fill to gray
ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode

ellipseMode(CORNER); // Set ellipseMode is CORNER
fill(255); // Set fill to white
ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode

ellipseMode(CORNERS); // Set ellipseMode to CORNERS
fill(100); // Set fill to gray
ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- - - -
- - - - -
- -

- - inner endShape(modeopt) - - -
- jsboot/p5shape.js, - line 482 -
- -

- - - -
-
- - -
- The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
mode - - -Constant - - - - - - <optional>
- - - - - - 		use CLOSE to close the shape
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noFill();

beginShape();
vertex(20, 20);
vertex(45, 20);
vertex(45, 80);
endShape(CLOSE);

beginShape();
vertex(50, 20);
vertex(75, 20);
vertex(75, 80);
endShape();

TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
- - - -
- - - - -
- -

- - inner exp(n) → {Number} - - -
- jsboot/p5math.js, - line 202 -
- -

- - - -
-
- - -
- Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - exponent to raise
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- e^n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}
- - - -
- - - - -
- -

- - inner fill(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2007 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(value) - - -
- jsboot/p5color.js, - line 2002 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(values) - - -
- jsboot/p5color.js, - line 2013 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(color) - - -
- jsboot/p5color.js, - line 2019 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the fill color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner fill(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 1934 -
- -

- - - -
-
- - -
- Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the fill color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
fill(51);
rect(20, 20, 60, 60);

// R, G & B integer values
fill(255, 204, 0);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
fill(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
fill('red');
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
fill('#fae');
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
fill('#222222');
rect(20, 20, 60, 60);

// integer RGB notation
fill('rgb(0,255,0)');
rect(20, 20, 60, 60);

// integer RGBA notation
fill('rgba(0,255,0, 0.25)');
rect(20, 20, 60, 60);

// percentage RGB notation
fill('rgb(100%,0%,10%)');
rect(20, 20, 60, 60);

// percentage RGBA notation
fill('rgba(100%,0%,100%,0.5)');
rect(20, 20, 60, 60);

// p5 Color object
fill(color(0, 0, 255));
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner float(str) → {Number} - - -
- jsboot/p5util.js, - line 341 -
- -

- - - -
-
- - -
- Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN. When an array of values is passed in, then an array of floats of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - float string to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- floating point representation of string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);
- - - -
- - - - -
- -

- - inner floor(n) → {Integer} - - -
- jsboot/p5math.js, - line 246 -
- -

- - - -
-
- - -
- Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round down
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded down number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner frameRate(fps) - - -
- jsboot/p5env.js, - line 111 -
- -

- - - -
-
- - -
- Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations This is the same as setFrameRate(val).

Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().

Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
fps - - -Number - - - - number of frames to be displayed every second
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let rectX = 0;
let fr = 30; //starting FPS
let clr;

function setup() {
  background(200);
  frameRate(fr); // Attempt to refresh at starting FPS
  clr = color(255, 0, 0);
}

function draw() {
  background(200);
  rectX = rectX += 1; // Move Rectangle

  if (rectX >= width) {
    // If you go off screen.
    if (fr === 30) {
      clr = color(0, 0, 255);
      fr = 10;
      frameRate(fr); // make frameRate 10 FPS
    } else {
      clr = color(255, 0, 0);
      fr = 30;
      frameRate(fr); // make frameRate 30 FPS
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}
- - - -
- - - - -
- -

- - inner fullscreen(valopt) → {Boolean} - - -
- jsboot/p5env.js, - line 240 -
- -

- - - -
-
- - -
- If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
val - - -Boolean - - - - - - <optional>
- - - - - - 		whether the sketch should be in fullscreen mode or not
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- current fullscreen state - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Clicking in the box toggles fullscreen on and off.
function setup() {
  background(200);
}
function mousePressed() {
  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}
- - - -
- - - - -
- -

- - inner getFrameRate() → {Number} - - -
- jsboot/p5env.js, - line 168 -
- -

- - - -
-
- - -
- Returns the current framerate. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- current frameRate - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner getURL() → {String} - - -
- jsboot/p5env.js, - line 294 -
- -

- - - -
-
- - -
- Gets the current URL. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- url - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let url;
let x = 100;

function setup() {
  fill(0);
  noStroke();
  url = getURL();
}

function draw() {
  background(200);
  text(url, x, height / 2);
  x--;
}
- - - -
- - - - -
- -

- - inner getURLParams() → {Object} - - -
- jsboot/p5env.js, - line 334 -
- -

- - - -
-
- - -
- Gets the current URL params as an Object. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- URL params - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Example: http://p5js.org?year=2014&month=May&day=15

function setup() {
  let params = getURLParams();
  text(params.day, 10, 20);
  text(params.month, 10, 40);
  text(params.year, 10, 60);
}
- - - -
- - - - -
- -

- - inner getURLPath() → {Array.<String>} - - -
- jsboot/p5env.js, - line 318 -
- -

- - - -
-
- - -
- Gets the current URL path as an array. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- path components - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let urlPath = getURLPath();
  for (let i = 0; i < urlPath.length; i++) {
    text(urlPath[i], 10, i * 20 + 20);
  }
}
- - - -
- - - - -
- -

- - inner green(color) → {Number} - - -
- jsboot/p5color.js, - line 1487 -
- -

- - - -
-
- - -
- Extracts the green value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the green value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(20, 75, 200); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let greenValue = green(c); // Get green in 'c'
print(greenValue); // Print "75.0"
fill(0, greenValue, 0); // Use 'greenValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle
- - - -
- - - - -
- -

- - inner hex(n, digitsopt) → {String} - - -
- jsboot/p5util.js, - line 530 -
- -

- - - -
-
- - -
- Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Number - - - - - - - - - - value to parse
digits - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- hexadecimal string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- - - -
- - - - -
- -

- - inner hour() → {Integer} - - -
- jsboot/p5util.js, - line 1082 -
- -

- - - -
-
- - -
- The hour() function returns the current hour as a value from 0 - 23. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current hour - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var h = hour();
text('Current hour:\n' + h, 5, 50);
- - - -
- - - - -
- -

- - inner hue(color) → {Number} - - -
- jsboot/p5color.js, - line 1509 -
- -

- - - -
-
- - -
- Extracts the hue value from a color or pixel array. Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the hue - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = hue(c); // Sets 'value' to "0"
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner image(img, x, y) - - -
- jsboot/p5shape.js, - line 709 -
- -

- - - -
-
- - -
- Draw an image to the p5.js canvas. This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image. This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
img - - -Bitmap - - - - the image to display
x - - -Number - - - - the x-coordinate of the top-left corner of the image
y - - -Number - - - - the y-coordinate of the top-left corner of the image
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner imageMode(mode) - - -
- jsboot/p5shape.js, - line 759 -
- -

- - - -
-
- - -
- Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.

imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.

imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, or CENTER
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNER);
  image(img, 10, 10, 50, 50);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CORNERS);
  image(img, 10, 10, 90, 40);
}

let img;
function setup() {
  img = loadImage('assets/bricks.jpg');
  imageMode(CENTER);
  image(img, 50, 50, 80, 80);
}
- - - -
- - - - -
- -

- - inner int(n, radixopt) → {Number} - - -
- jsboot/p5util.js, - line 365 -
- -

- - - -
-
- - -
- Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -String -| - -Boolean -| - -Number - - - - - - - - - - value to parse
radix - - -Integer - - - - - - <optional>
- - - - - - 		the radix to convert to (default: 10)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
- - - -
- - - - -
- -

- - inner join(list, separator) → {String} - - -
- jsboot/p5util.js, - line 595 -
- -

- - - -
-
- - -
- Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - array of Strings to be joined
separator - - -String - - - - String to be placed between each item
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- joined String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);
- - - -
- - - - -
- -

- - inner keyPressed() - - -
- jsboot/p5input.js, - line 534 -
- -

- - - -
-
- - -
- The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    value = 255;
  } else if (keyCode === RIGHT_ARROW) {
    value = 0;
  }
}
- - - -
- - - - -
- -

- - inner keyReleased() - - -
- jsboot/p5input.js, - line 568 -
- -

- - - -
-
- - -
- The keyReleased() function is called once every time a key is released. See key and keyCode for more information.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
  return false; // prevent any default behavior
}
- - - -
- - - - -
- -

- - inner keyTyped() - - -
- jsboot/p5input.js, - line 592 -
- -

- - - -
-
- - -
- The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. The most recent key pressed will be stored in the key variable.

Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyTyped() {
  if (key === 'a') {
    value = 255;
  } else if (key === 'b') {
    value = 0;
  }
  // uncomment to prevent any default behavior
  // return false;
}
- - - -
- - - - -
- -

- - inner lerp(start, stop, amt) → {Number} - - -
- jsboot/p5math.js, - line 279 -
- -

- - - -
-
- - -
- Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
start - - -Number - - - - first value
stop - - -Number - - - - second value
amt - - -Number - - - - number
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- lerped value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}
- - - -
- - - - -
- -

- - inner lerpColor(c1, c2, amt) → {Color} - - -
- jsboot/p5color.js, - line 1536 -
- -

- - - -
-
- - -
- Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.

The way that colours are interpolated depends on the current color mode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
c1 - - -Color - - - - interpolate from this color
c2 - - -Color - - - - interpolate to this color
amt - - -Number - - - - number between 0 and 1
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Color - - - - - -- interpolated color - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
colorMode(RGB);
stroke(255);
background(51);
let from = color(218, 165, 32);
let to = color(72, 61, 139);
colorMode(RGB); // Try changing to HSB.
let interA = lerpColor(from, to, 0.33);
let interB = lerpColor(from, to, 0.66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
- - - -
- - - - -
- -

- - inner lightness(color) → {Number} - - -
- jsboot/p5color.js, - line 1623 -
- -

- - - -
-
- - -
- Extracts the HSL lightness value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the lightness - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSL);
let c = color(156, 100, 50, 1);
fill(c);
rect(15, 20, 35, 60);
let value = lightness(c); // Sets 'value' to 50
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner line(x1, y1, x2, y2) - - -
- jsboot/p5shape.js, - line 152 -
- -

- - - -
-
- - -
- Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
line(30, 20, 85, 75);

line(30, 20, 85, 20);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
line(85, 75, 30, 75);
- - - -
- - - - -
- -

- - inner loadBytes(file) → {Array.<number>} - - -
- jsboot/p5.js, - line 543 -
- -

- - - -
-
- - -
- This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
file - - -string - - - - name of the file or URL to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<number> - - - - - -- an object whose 'bytes' property will be the loaded buffer - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let data;

function preload() {
  data = loadBytes('assets/mammals.xml');
}

function setup() {
  for (let i = 0; i < 5; i++) {
    console.log(data.bytes[i].toString(16));
  }
}
- - - -
- - - - -
- -

- - inner loadFont(path) → {Font} - - -
- jsboot/p5typo.js, - line 26 -
- -

- - - -
-
- - -
- Loads a GRX font file (.FNT) from a file Font Object.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Font - - - - - -- Font object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner loadImage(path) → {Bitmap} - - -
- jsboot/p5shape.js, - line 681 -
- -

- - - -
-
- - -
- Loads an image from a path and creates a Image from it.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
path - - -String - - - - Path of the image to be loaded
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Bitmap - - - - - -- the Image object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let img;
function setup() {
  img = loadImage('assets/laDefense.jpg');
  image(img, 0, 0);
}
- - - -
- - - - -
- -

- - inner loadStrings(filename) → {Array.<String>} - - -
- jsboot/p5.js, - line 486 -
- -

- - - -
-
- - -
- Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.

Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.

This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. This method is suitable for fetching files up to size of 64MB. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
filename - - -String - - - - name of the file or url to load
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let result;
function preload() {
  result = loadStrings('assets/test.txt');
}
function setup() {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}

function setup() {
  loadStrings('assets/test.txt', pickString);
}

function pickString(result) {
  background(200);
  let ind = floor(random(result.length));
  text(result[ind], 10, 10, 80, 80);
}
- - - -
- - - - -
- -

- - inner log(n) → {Number} - - -
- jsboot/p5math.js, - line 320 -
- -

- - - -
-
- - -
- Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number greater than 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- natural logarithm of n - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}
- - - -
- - - - -
- -

- - inner loop() - - -
- jsboot/p5.js, - line 235 -
- -

- - - -
-
- - -
- By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop(). Avoid calling loop() from inside setup(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}
- - - -
- - - - -
- -

- - inner mag(a, b) → {Number} - - -
- jsboot/p5math.js, - line 370 -
- -

- - - -
-
- - -
- Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
a - - -Number - - - - first value
b - - -Number - - - - second value
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- magnitude of vector from (0,0) to (a,b) - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}
- - - -
- - - - -
- -

- - inner map(value, start1, stop1, start2, stop2, withinBoundsopt) → {Number} - - -
- jsboot/p5math.js, - line 402 -
- -

- - - -
-
- - -
- Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -Number - - - - - - - - - - the incoming value to be converted
start1 - - -Number - - - - - - - - - - lower bound of the value's current range
stop1 - - -Number - - - - - - - - - - upper bound of the value's current range
start2 - - -Number - - - - - - - - - - lower bound of the value's target range
stop2 - - -Number - - - - - - - - - - upper bound of the value's target range
withinBounds - - -Boolean - - - - - - <optional>
- - - - - - 		constrain the value to the newly mapped range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- remapped number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}
- - - -
- - - - -
- -

- - inner match(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 616 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);
- - - -
- - - - -
- -

- - inner matchAll(str, regexp) → {Array.<String>} - - -
- jsboot/p5util.js, - line 649 -
- -

- - - -
-
- - -
- This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.

To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.

If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - the String to be searched
regexp - - -String - - - - the regexp to be used for matching
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- 2d Array of Strings found - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);
- - - -
- - - - -
- -

- - inner max(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 448 -
- -

- - - -
-
- - -
- Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- maximum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner millis() → {Number} - - -
- jsboot/p5util.js, - line 1110 -
- -

- - - -
-
- - -
- Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the number of milliseconds since starting the program - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
- - - -
- - - - -
- -

- - inner min(n0, n1) → {Number} - - -
- jsboot/p5math.js, - line 486 -
- -

- - - -
-
- - -
- Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n0 - - -Number - - - - Number to compare
n1 - - -Number - - - - Number to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- minimum Number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}
- - - -
- - - - -
- -

- - inner minute() → {Integer} - - -
- jsboot/p5util.js, - line 1096 -
- -

- - - -
-
- - -
- The minute() function returns the current minute as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current minute - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = minute();
text('Current minute: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner month() → {Integer} - - -
- jsboot/p5util.js, - line 1125 -
- -

- - - -
-
- - -
- The month() function returns the current month as a value from 1 - 12. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current month - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var m = month();
text('Current month: \n' + m, 5, 50);
- - - -
- - - - -
- -

- - inner mouseClicked(eventopt) - - -
- jsboot/p5input.js, - line 422 -
- -

- - - -
-
- - -
- The mouseClicked() function is called once after a mouse button has been pressed and then released.

Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function mouseClicked() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseClicked() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseClicked(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseMoved(eventopt) - - -
- jsboot/p5input.js, - line 303 -
- -

- - - -
-
- - -
- The >mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Move the mouse across the page
// to change its value

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function mouseMoved() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseMoved(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mousePressed(eventopt) - - -
- jsboot/p5input.js, - line 341 -
- -

- - - -
-
- - -
- The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mousePressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mousePressed(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner mouseReleased(eventopt) - - -
- jsboot/p5input.js, - line 381 -
- -

- - - -
-
- - -
- The mouseReleased() function is called every time a mouse button is released.

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
event - - -Object - - - - - - <optional>
- - - - - - 		optional MouseEvent callback argument.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Click within the image to change
// the value of the rectangle
// after the mouse has been clicked

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseReleased() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}

// returns a MouseEvent object
// as a callback argument
function mouseReleased(event) {
  console.log(event);
}
- - - -
- - - - -
- -

- - inner nf(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 692 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
left - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfc(num, rightopt) → {String} - - -
- jsboot/p5util.js, - line 789 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number -| - -String - - - - - - - - - - the Number to format
right - - -Integer -| - -String - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfp(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 853 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner nfs(num, leftopt, rightopt) → {String} - - -
- jsboot/p5util.js, - line 901 -
- -

- - - -
-
- - -
- Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. The values for the digits, left, and right parameters should always be positive integers. (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
num - - -Number - - - - - - - - - - the Number to format
left - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the left of the decimal point
right - - -Integer - - - - - - <optional>
- - - - - - 		number of digits to the right of the decimal point
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- formatted String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}
- - - -
- - - - -
- -

- - inner noCursor() - - -
- jsboot/p5.js, - line 408 -
- -

- - - -
-
- - -
- Hides the cursor from view. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}
- - - -
- - - - -
- -

- - inner noFill() - - -
- jsboot/p5color.js, - line 2031 -
- -

- - - -
-
- - -
- Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(15, 10, 55, 55);
noFill();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noFill();
  stroke(100, 100, 240);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner noise(x, yopt, zopt) → {Number} - - -
- jsboot/p5math.js, - line 969 -
- -

- - - -
-
- - -
- Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x-coordinate in noise space
y - - -Number - - - - - - <optional>
- - - - - - 		y-coordinate in noise space
z - - -Number - - - - - - <optional>
- - - - - - 		z-coordinate in noise space
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- Perlin noise value (between 0 and 1) at specified coordinates - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}
- - - -
- - - - -
- -

- - inner noiseDetail(lod, falloff) - - -
- jsboot/p5math.js, - line 1113 -
- -

- - - -
-
- - -
- Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence.

By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise().

By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
lod - - -Number - - - - number of octaves to be used by the noise
falloff - - -Number - - - - falloff factor for each octave
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}
- - - -
- - - - -
- -

- - inner noLoop() - - -
- jsboot/p5.js, - line 271 -
- -

- - - -
-
- - -
- Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.

When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.

Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}
- - - -
- - - - -
- -

- - inner norm(value, start, stop) → {Number} - - -
- jsboot/p5math.js, - line 524 -
- -

- - - -
-
- - -
- Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -Number - - - - incoming value to be normalized
start - - -Number - - - - lower bound of the value's current range
stop - - -Number - - - - upper bound of the value's current range
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- normalized number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}
- - - -
- - - - -
- -

- - inner noStroke() - - -
- jsboot/p5color.js, - line 2058 -
- -

- - - -
-
- - -
- Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
rect(20, 20, 60, 60);

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(0);
  noStroke();
  fill(240, 150, 150);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(45, 45, 45);
}
- - - -
- - - - -
- -

- - inner pixelDensity(val) - - -
- jsboot/p5env.js, - line 267 -
- -

- - - -
-
- - -
- Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
val - - -Number - - - - whether or how much the sketch should scale
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  pixelDensity(1);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

function setup() {
  pixelDensity(3.0);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}
- - - -
- - - - -
- -

- - inner point(x, y, zopt) - - -
- jsboot/p5shape.js, - line 189 -
- -

- - - -
-
- - -
- Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x-coordinate
y - - -Number - - - - - - - - - - the y-coordinate
z - - -Number - - - - - - <optional>
- - - - - - 		the z-coordinate (for WebGL mode)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
point(30, 20);
point(85, 20);
point(85, 75);
point(30, 75);
- - - -
- - - - -
- -

- - inner pop() - - -
- jsboot/p5.js, - line 631 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
translate(50, 0);
strokeWeight(10);
fill(204, 153, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner pow(n, e) → {Number} - - -
- jsboot/p5math.js, - line 570 -
- -

- - - -
-
- - -
- Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to Math.pow(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - base of the exponential expression
e - - -Number - - - - power by which to raise the base
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- n^e - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 45 -
- -

- - - -
-
- - -
- The println() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner print(contents) - - -
- jsboot/p5env.js, - line 26 -
- -

- - - -
-
- - -
- The print() function writes to the logfile. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
contents - - -Any - - - - any combination of Number, String, Object, Boolean, Array to print
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10"
- - - -
- - - - -
- -

- - inner push() - - -
- jsboot/p5.js, - line 580 -
- -

- - - -
-
- - -
- The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)

push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(). -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
translate(50, 0);
ellipse(0, 50, 33, 33); // Middle circle
pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
</code>
</div>
<div>
<code>
ellipse(0, 50, 33, 33); // Left circle

push(); // Start a new drawing state
strokeWeight(10);
fill(204, 153, 0);
ellipse(33, 50, 33, 33); // Left-middle circle

push(); // Start another new drawing state
stroke(0, 102, 153);
ellipse(66, 50, 33, 33); // Right-middle circle
pop(); // Restore previous state

pop(); // Restore original state

ellipse(100, 50, 33, 33); // Right circle
- - - -
- - - - -
- -

- - inner quad(x1, y1, x2, y2, x3, y3, x4, y4) - - -
- jsboot/p5shape.js, - line 211 -
- -

- - - -
-
- - -
- Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - the x-coordinate of the first point
y1 - - -Number - - - - the y-coordinate of the first point
x2 - - -Number - - - - the x-coordinate of the second point
y2 - - -Number - - - - the y-coordinate of the second point
x3 - - -Number - - - - the x-coordinate of the third point
y3 - - -Number - - - - the y-coordinate of the third point
x4 - - -Number - - - - the x-coordinate of the fourth point
y4 - - -Number - - - - the y-coordinate of the fourth point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
quad(38, 31, 86, 20, 69, 63, 30, 76);
- - - -
- - - - -
- -

- - inner radians(degrees) → {Number} - - -
- jsboot/p5math.js, - line 1402 -
- -

- - - -
-
- - -
- Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
degrees - - -Number - - - - the degree value to convert to radians
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the converted angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians
- - - -
- - - - -
- -

- - inner random(minopt, maxopt) → {Number} - - -
- jsboot/p5math.js, - line 817 -
- -

- - - -
-
- - -
- Return a random floating-point number. Takes either 0, 1 or 2 arguments. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If one argument is given and it is an array, returns a random element from that array. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
min - - -Number - - - - - - <optional>
- - - - - - 		the lower bound (inclusive)
max - - -Number - - - - - - <optional>
- - - - - - 		the upper bound (exclusive)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word
- - - -
- - - - -
- -

- - inner randomGaussian(mean, sd) → {Number} - - -
- jsboot/p5math.js, - line 882 -
- -

- - - -
-
- - -
- Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned.

Takes either 0, 1 or 2 arguments.
If no args, returns a mean of 0 and standard deviation of 1.
If one arg, that arg is the mean (standard deviation is 1).
If two args, first is mean, second is standard deviation. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mean - - -Number - - - - the mean
sd - - -Number - - - - the standard deviation
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the random number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}
- - - -
- - - - -
- -

- - inner randomSeed(seed) - - -
- jsboot/p5math.js, - line 794 -
- -

- - - -
-
- - -
- Sets the seed value for random(). By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
seed - - -Number - - - - the seed value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}
- - - -
- - - - -
- -

- - inner rect(x, y, w, h) - - -
- jsboot/p5shape.js, - line 240 -
- -

- - - -
-
- - -
- Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the rectangle.
y - - -Number - - - - y-coordinate of the rectangle.
w - - -Number - - - - width of the rectangle.
h - - -Number - - - - height of the rectangle.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a rectangle at location (30, 20) with a width and height of 55.
rect(30, 20, 55, 55);
- - - -
- - - - -
- -

- - inner rectMode(mode) - - -
- jsboot/p5shape.js, - line 568 -
- -

- - - -
-
- - -
- Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

The parameter must be written in ALL CAPS because Javascript is a case-sensitive language. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
mode - - -Constant - - - - either CORNER, CORNERS, CENTER, or RADIUS
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rectMode(CORNER); // Default rectMode is CORNER
fill(255); // Set fill to white
rect(25, 25, 50, 50); // Draw white rect using CORNER mode

rectMode(CORNERS); // Set rectMode to CORNERS
fill(100); // Set fill to gray
rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode

rectMode(RADIUS); // Set rectMode to RADIUS
fill(255); // Set fill to white
rect(50, 50, 30, 30); // Draw white rect using RADIUS mode

rectMode(CENTER); // Set rectMode to CENTER
fill(100); // Set fill to gray
rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- - - -
- - - - -
- -

- - inner red(color) → {Number} - - -
- jsboot/p5color.js, - line 1644 -
- -

- - - -
-
- - -
- Extracts the red value from a color or pixel array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the red value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
rect(15, 20, 35, 60); // Draw left rectangle

let redValue = red(c); // Get red in 'c'
print(redValue); // Print "255.0"
fill(redValue, 0, 0); // Use 'redValue' in new fill
rect(50, 20, 35, 60); // Draw right rectangle

colorMode(RGB, 255);
let c = color(127, 255, 0);
colorMode(RGB, 1);
let myColor = red(c);
print(myColor);
- - - -
- - - - -
- -

- - inner redraw(nopt) - - -
- jsboot/p5.js, - line 325 -
- -

- - - -
-
- - -
- Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.

In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).

The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop().

In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
n - - -Integer - - - - - - <optional>
- - - - - - 		Redraw for n-times. The default value is 1.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}
- - - -
- - - - -
- -

- - inner resetMatrix() - - -
- jsboot/p5trans.js, - line 192 -
- -

- - - -
-
- - -
- Replaces the current matrix with the identity matrix. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(50, 50);
applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
rect(0, 0, 20, 20);
// Note that the translate is also reset.
resetMatrix();
rect(0, 0, 20, 20);
- - - -
- - - - -
- -

- - inner reverse(list) → {Array} - - -
- jsboot/p5util.js, - line 148 -
- -

- - - -
-
- - -
- Reverses the order of an array, maps to Array.reverse() -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to reverse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the reversed list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}
- - - -
- - - - -
- -

- - inner rotate(angle) - - -
- jsboot/p5trans.js, - line 208 -
- -

- - - -
-
- - -
- Rotates a shape the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.

Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again.

Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle of rotation, specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 52, 52);
- - - -
- - - - -
- -

- - inner round(n) → {Integer} - - -
- jsboot/p5math.js, - line 598 -
- -

- - - -
-
- - -
- Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to round
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- rounded number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}
- - - -
- - - - -
- -

- - inner saturation(color) → {Number} - - -
- jsboot/p5color.js, - line 1671 -
- -

- - - -
-
- - -
- Extracts the saturation value from a color or pixel array. Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color -| - -Array.<Number> -| - -String - - - - Color object, color components, or CSS color
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the saturation value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
noStroke();
colorMode(HSB, 255);
let c = color(0, 126, 255);
fill(c);
rect(15, 20, 35, 60);
let value = saturation(c); // Sets 'value' to 126
fill(value);
rect(50, 20, 35, 60);
- - - -
- - - - -
- -

- - inner saveStrings(list, filename, extensionopt) - - -
- jsboot/p5.js, - line 436 -
- -

- - - -
-
- - -
- Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array.<String> - - - - - - - - - - string array to be written
filename - - -String - - - - - - - - - - filename for output
extension - - -String - - - - - - <optional>
- - - - - - 		the filename's extension
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let words = 'apple bear cat dog';

// .split() outputs an Array
let list = split(words, ' ');

function setup() {
  createCanvas(100, 100);
  background(200);
  text('click here to save', 10, 10, 70, 80);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    saveStrings(list, 'nouns.txt');
  }
}

// Saves the following to a file called 'nouns.txt':
//
// apple
// bear
// cat
// dog
- - - -
- - - - -
- -

- - inner scale(s, yopt) - - -
- jsboot/p5trans.js, - line 366 -
- -

- - - -
-
- - -
- Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.

Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.

Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
s - - -Number -| - -p5.Vector -| - -Array.<Number> - - - - - - - - - - percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given
y - - -Number - - - - - - <optional>
- - - - - - 		percent to scale the object in the y-axis
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

rect(30, 20, 50, 50);
scale(0.5, 1.3);
rect(30, 20, 50, 50);
- - - -
- - - - -
- -

- - inner scale(scales) - - -
- jsboot/p5trans.js, - line 396 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
scales - - -p5.Vector -| - -Array.<Number> - - - - per-axis percents to scale the object
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner second() → {Integer} - - -
- jsboot/p5util.js, - line 1138 -
- -

- - - -
-
- - -
- The second() function returns the current second as a value from 0 - 59. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current second - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var s = second();
text('Current second: \n' + s, 5, 50);
- - - -
- - - - -
- -

- - inner setAlpha(alpha) - - -
- jsboot/p5color.js, - line 595 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
alpha - - -Number - - - - the new alpha value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let squareColor;

function setup() {
  ellipseMode(CORNERS);
  strokeWeight(4);
  squareColor = color(100, 50, 150);
}

function draw() {
  background(255);

  noFill();
  stroke(0);
  ellipse(10, 10, width - 10, height - 10);

  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  fill(squareColor);
  noStroke();
  rect(13, 13, width - 26, height - 26);
}
- - - -
- - - - -
- -

- - inner setBlue(blue) - - -
- jsboot/p5color.js, - line 575 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
blue - - -Number - - - - the new blue value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setGreen(green) - - -
- jsboot/p5color.js, - line 555 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
green - - -Number - - - - the new green value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner setRed(red) - - -
- jsboot/p5color.js, - line 535 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
red - - -Number - - - - the new red value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
- - - -
- - - - -
- -

- - inner shearX(angle) - - -
- jsboot/p5trans.js, - line 245 -
- -

- - - -
-
- - -
- Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shearY(angle) - - -
- jsboot/p5trans.js, - line 279 -
- -

- - - -
-
- - -
- Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.

Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.

Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - angle of shear specified in radians or degrees, depending on current angleMode
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
- - - -
- - - - -
- -

- - inner shorten(list) → {Array} - - -
- jsboot/p5util.js, - line 167 -
- -

- - - -
-
- - -
- Decreases an array by one element and returns the shortened array, maps to Array.pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to shorten
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shortened Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}
- - - -
- - - - -
- -

- - inner shuffle(array, boolopt) → {Array} - - -
- jsboot/p5util.js, - line 188 -
- -

- - - -
-
- - -
- Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
array - - -Array - - - - - - - - - - Array to shuffle
bool - - -Boolean - - - - - - <optional>
- - - - - - 		modify passed array
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- shuffled Array - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}
- - - -
- - - - -
- -

- - inner sin(angle) → {Number} - - -
- jsboot/p5math.js, - line 1339 -
- -

- - - -
-
- - -
- Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the sine of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner sort(list, countopt) → {Array} - - -
- jsboot/p5util.js, - line 228 -
- -

- - - -
-
- - -
- Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to sort
count - - -Integer - - - - - - <optional>
- - - - - - 		number of elements to sort, starting from 0
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the sorted list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}
- - - -
- - - - -
- -

- - inner splice(list, value, position) → {Array} - - -
- jsboot/p5util.js, - line 272 -
- -

- - - -
-
- - -
- Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.) -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
list - - -Array - - - - Array to splice into
value - - -any - - - - value to be spliced in
position - - -Integer - - - - in the array from which to insert data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- the list - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}
- - - -
- - - - -
- -

- - inner split(value, delim) → {Array.<String>} - - -
- jsboot/p5util.js, - line 965 -
- -

- - - -
-
- - -
- The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - the String to be split
delim - - -String - - - - the String used to separate the data
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
- - - -
- - - - -
- -

- - inner splitTokens(value, delimopt) → {Array.<String>} - - -
- jsboot/p5util.js, - line 991 -
- -

- - - -
-
- - -
- The splitTokens() function splits a String at one or many character delimiters or "tokens." The delim parameter specifies the character or characters to be used as a boundary.

If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
value - - -String - - - - - - - - - - the String to be split
delim - - -String - - - - - - <optional>
- - - - - - 		list of individual Strings that will be used as separators
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<String> - - - - - -- Array of Strings - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
- - - -
- - - - -
- -

- - inner sq(n) → {Number} - - -
- jsboot/p5math.js, - line 631 -
- -

- - - -
-
- - -
- Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - number to square
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- squared number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner sqrt(n) → {Number} - - -
- jsboot/p5math.js, - line 672 -
- -

- - - -
-
- - -
- Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - non-negative number to square root
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- square root of number - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}
- - - -
- - - - -
- -

- - inner square(x, y, s) - - -
- jsboot/p5shape.js, - line 331 -
- -

- - - -
-
- - -
- Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the square.
y - - -Number - - - - y-coordinate of the square.
s - - -Number - - - - side size of the square.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
- - - -
- - - - -
- -

- - inner str(n) → {String} - - -
- jsboot/p5util.js, - line 398 -
- -

- - - -
-
- - -
- Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String -| - -Boolean -| - -Number -| - -Array - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- string representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
- - - -
- - - - -
- -

- - inner stroke(gray, alphaopt) - - -
- jsboot/p5color.js, - line 2170 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
gray - - -Number - - - - - - - - - - a gray value
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(value) - - -
- jsboot/p5color.js, - line 2165 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -String - - - - a color string
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(color) - - -
- jsboot/p5color.js, - line 2182 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color - - -Color - - - - the stroke color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner stroke(v1, v2, v3, alphaopt) - - -
- jsboot/p5color.js, - line 2084 -
- -

- - - -
-
- - -
- Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5 Color object can also be provided to set the stroke color. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
v3 - - -Number - - - - - - - - - - blue or brightness value relative to the current color range
alpha - - -Number - - - - - - <optional>
- - - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Grayscale integer value
strokeWeight(4);
stroke(51);
rect(20, 20, 60, 60);

// R, G & B integer values
stroke(255, 204, 0);
strokeWeight(4);
rect(20, 20, 60, 60);

// H, S & B integer values
colorMode(HSB);
strokeWeight(4);
stroke(255, 204, 100);
rect(20, 20, 60, 60);

// Named SVG/CSS color string
stroke('red');
strokeWeight(4);
rect(20, 20, 60, 60);

// three-digit hexadecimal RGB notation
stroke('#fae');
strokeWeight(4);
rect(20, 20, 60, 60);

// six-digit hexadecimal RGB notation
stroke('#222222');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGB notation
stroke('rgb(0,255,0)');
strokeWeight(4);
rect(20, 20, 60, 60);

// integer RGBA notation
stroke('rgba(0,255,0,0.25)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGB notation
stroke('rgb(100%,0%,10%)');
strokeWeight(4);
rect(20, 20, 60, 60);

// percentage RGBA notation
stroke('rgba(100%,0%,100%,0.5)');
strokeWeight(4);
rect(20, 20, 60, 60);

// p5 Color object
stroke(color(0, 0, 255));
strokeWeight(4);
rect(20, 20, 60, 60);
- - - -
- - - - -
- -

- - inner stroke(values) - - -
- jsboot/p5color.js, - line 2176 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
values - - -Array.<Number> - - - - an array containing the red,green,blue & and alpha components of the color
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner strokeWeight(weight) - - -
- jsboot/p5shape.js, - line 810 -
- -

- - - -
-
- - -
- Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
weight - - -Number - - - - the weight (in pixels) of the stroke
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(1); // Default
line(20, 20, 80, 20);
strokeWeight(4); // Thicker
line(20, 40, 80, 40);
strokeWeight(10); // Beastly
line(20, 70, 80, 70);
- - - -
- - - - -
- -

- - inner subset(list, start, countopt) → {Array} - - -
- jsboot/p5util.js, - line 304 -
- -

- - - -
-
- - -
- Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
list - - -Array - - - - - - - - - - Array to extract from
start - - -Integer - - - - - - - - - - position to begin
count - - -Integer - - - - - - <optional>
- - - - - - 		number of values to extract
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Array - - - - - -- Array of extracted elements - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}
- - - -
- - - - -
- -

- - inner tan(angle) → {Number} - - -
- jsboot/p5math.js, - line 1359 -
- -

- - - -
-
- - -
- Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -Number - - - - the angle
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the tangent of the angle - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}
- - - -
- - - - -
- -

- - inner text(str, x, y) - - -
- jsboot/p5typo.js, - line 39 -
- -

- - - -
-
- - -
- Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.

The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.

The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.

-
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String -| - -Object -| - -Array -| - -Number -| - -Boolean - - - - the alphanumeric symbols to be displayed
x - - -Number - - - - x-coordinate of text
y - - -Number - - - - y-coordinate of text
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}
- - - -
- - - - -
- -

- - inner textAlign(horizAlign, vertAlignopt) - - -
- jsboot/p5typo.js, - line 148 -
- -

- - - -
-
- - -
- Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
horizAlign - - -Constant - - - - - - - - - - horizontal alignment, either LEFT, CENTER, or RIGHT
vertAlign - - -Constant - - - - - - <optional>
- - - - - - 		vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);
- - - -
- - - - -
- -

- - inner textFont() → {Object} - - -
- jsboot/p5typo.js, - line 114 -
- -

- - - -
-
- - -
- Sets the current font that will be drawn with the text() function.

-
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Object - - - - - -- the current font - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}
- - - -
- - - - -
- -

- - inner textSize() → {Number} - - -
- jsboot/p5typo.js, - line 230 -
- -

- - - -
-
- - -
- Gets the current font size. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner textWidth(theText) → {Number} - - -
- jsboot/p5typo.js, - line 203 -
- -

- - - -
-
- - -
- Calculates and returns the width of any character or text string. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
theText - - -String - - - - the String of characters to measure
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);
- - - -
- - - - -
- -

- - inner toString(formatopt) → {String} - - -
- jsboot/p5color.js, - line 341 -
- -

- - - -
-
- - -
- This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
format - - -String - - - - - - <optional>
- - - - - - 		How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- the formatted string - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let myColor;
function setup() {
  createCanvas(200, 200);
  stroke(255);
  myColor = color(100, 100, 250);
  fill(myColor);
}

function draw() {
  rotate(HALF_PI);
  text(myColor.toString(), 0, -5);
  text(myColor.toString('#rrggbb'), 0, -30);
  text(myColor.toString('rgba%'), 0, -55);
}
- - - -
- - - - -
- -

- - inner translate(vector) - - -
- jsboot/p5trans.js, - line 347 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
vector - - -p5.Vector - - - - the vector to translate by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner translate(x, y, zopt) - - -
- jsboot/p5trans.js, - line 313 -
- -

- - - -
-
- - -
- Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.

Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop(). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - left/right translation
y - - -Number - - - - - - - - - - up/down translation
z - - -Number - - - - - - <optional>
- - - - - - 		forward/backward translation (webgl only)
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
translate(30, 20);
rect(0, 0, 55, 55);

rect(0, 0, 55, 55); // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55); // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55); // Draw rect at new 0,0

function draw() {
  background(200);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  translate(p5.Vector.fromAngle(millis() / 1000, 40));
  rect(0, 0, 20, 20);
}
- - - -
- - - - -
- -

- - inner triangle(x1, y1, x2, y2, x3, y3) - - -
- jsboot/p5shape.js, - line 356 -
- -

- - - -
-
- - -
- A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x1 - - -Number - - - - x-coordinate of the first point
y1 - - -Number - - - - y-coordinate of the first point
x2 - - -Number - - - - x-coordinate of the second point
y2 - - -Number - - - - y-coordinate of the second point
x3 - - -Number - - - - x-coordinate of the third point
y3 - - -Number - - - - y-coordinate of the third point
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
triangle(30, 75, 58, 20, 86, 75);
- - - -
- - - - -
- -

- - inner trim(str) → {String} - - -
- jsboot/p5util.js, - line 1042 -
- -

- - - -
-
- - -
- Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
str - - -String - - - - a String to be trimmed
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - -- a trimmed String - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);
- - - -
- - - - -
- -

- - inner unchar(n) → {Number} - - -
- jsboot/p5util.js, - line 508 -
- -

- - - -
-
- - -
- Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
- - - -
- - - - -
- -

- - inner unhex(n) → {Number} - - -
- jsboot/p5util.js, - line 569 -
- -

- - - -
-
- - -
- Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -String - - - - value to parse
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- integer representation of hexadecimal value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
- - - -
- - - - -
- -

- - inner vertex(x, y) - - -
- jsboot/p5shape.js, - line 460 -
- -

- - - -
-
- - -
- All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - x-coordinate of the vertex
y - - -Number - - - - y-coordinate of the vertex
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
strokeWeight(3);
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
- - - -
- - - - -
- -

- - inner year() → {Integer} - - -
- jsboot/p5util.js, - line 1151 -
- -

- - - -
-
- - -
- The year() returns the current year as an integer (2014, 2015, 2016, etc). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the current year - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
var y = year();
text('Current year: \n' + y, 5, 50);
- - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/p5compat.PVector.html b/doc/html/p5compat.PVector.html deleted file mode 100644 index 84587aa6..00000000 --- a/doc/html/p5compat.PVector.html +++ /dev/null @@ -1,331 +0,0 @@ - - - - - Class: PVector | Class: PVector - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

PVector(xopt, yopt, zopt)

- - -
- -
- -
- - - -
- -

- - new PVector(xopt, yopt, zopt) - - -
- jsboot/p5vect.js, - line 26 -
- -

- - - -
-
- - -
- A class to describe a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. The datatype, however, stores the components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude and direction can be accessed via the methods mag() and heading().

In many of the examples, you will see PVector used to describe a position, velocity, or acceleration. For example, if you consider a rectangle moving across the screen, at any given instant it has a position (a vector that points from the origin to its location), a velocity (the rate at which the object's position changes per time unit, expressed as a vector), and acceleration (the rate at which the object's velocity changes per time unit, expressed as a vector).

Since vectors represent groupings of values, we cannot simply use traditional addition/multiplication/etc. Instead, we'll need to do some "vector" math, which is made easy by the methods inside the PVector class. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v1 = createVector(40, 50);
let v2 = createVector(40, 50);

ellipse(v1.x, v1.y, 50, 50);
ellipse(v2.x, v2.y, 50, 50);
v1.add(v2);
ellipse(v1.x, v1.y, 50, 50);
- - - -
- - -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/p5compat.module_NumberDict-NumberDict.html b/doc/html/p5compat.module_NumberDict-NumberDict.html deleted file mode 100644 index f80ab6f2..00000000 --- a/doc/html/p5compat.module_NumberDict-NumberDict.html +++ /dev/null @@ -1,210 +0,0 @@ - - - - - Class: NumberDict | Class: NumberDict - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

- .NumberDict~NumberDict()

- - -
- -
- -
- - - -
- -

- - new NumberDict() - - -
- jsboot/p5util.js, - line 1473 -
- -

- - - -
-
- - -
- A simple Dictionary class for Numbers. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - -

Extends

- - - - -
    -
  • TypedDict
    • -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/p5compat.module_NumberDict.html b/doc/html/p5compat.module_NumberDict.html deleted file mode 100644 index 9b1cea38..00000000 --- a/doc/html/p5compat.module_NumberDict.html +++ /dev/null @@ -1,1289 +0,0 @@ - - - - - Module: NumberDict | Module: NumberDict - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -
- -
- -
- - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - - - - -

Classes

- - -
- -
-

- NumberDict -
- p5compat.module:NumberDict~NumberDict -
-

-
- - -
- - - - - - - - - - - - -

Methods

- -
- - -
- -

- - inner add(Key, Number) - - -
- jsboot/p5util.js, - line 1493 -
- -

- - - -
-
- - -
- Add the given number to the value currently stored at the given key. The sum then replaces the value previously stored in the Dictionary. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
Key - - -Number - - - - for the value you wish to add to
Number - - -Number - - - - to add to the value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(2, 5);
  myDictionary.add(2, 2);
  print(myDictionary.get(2)); // logs 7 to console.
}
- - - -
- - - - -
- -

- - inner div(Key, Amount) - - -
- jsboot/p5util.js, - line 1555 -
- -

- - - -
-
- - -
- Divide the given number with the value currently stored at the given key. The quotient then replaces the value previously stored in the Dictionary. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
Key - - -Number - - - - for value you wish to divide
Amount - - -Number - - - - to divide the value by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(2, 8);
  myDictionary.div(2, 2);
  print(myDictionary.get(2)); // logs 4 to console.
}
- - - -
- - - - -
- -

- - inner maxKey() → {Number} - - -
- jsboot/p5util.js, - line 1671 -
- -

- - - -
-
- - -
- Return the highest key currently used in the Dictionary. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
  let highestKey = myDictionary.maxKey(); // value is 4
  print(highestKey);
}
- - - -
- - - - -
- -

- - inner maxValue() → {Number} - - -
- jsboot/p5util.js, - line 1617 -
- -

- - - -
-
- - -
- Return the highest number currently stored in the Dictionary. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
  let highestValue = myDictionary.maxValue(); // value is 3
  print(highestValue);
}
- - - -
- - - - -
- -

- - inner minKey() → {Number} - - -
- jsboot/p5util.js, - line 1655 -
- -

- - - -
-
- - -
- Return the lowest key currently used in the Dictionary. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
  let lowestKey = myDictionary.minKey(); // value is 1.2
  print(lowestKey);
}
- - - -
- - - - -
- -

- - inner minValue() → {Number} - - -
- jsboot/p5util.js, - line 1600 -
- -

- - - -
-
- - -
- Return the lowest number currently stored in the Dictionary. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
  let lowestValue = myDictionary.minValue(); // value is -10
  print(lowestValue);
}
- - - -
- - - - -
- -

- - inner mult(Key, Amount) - - -
- jsboot/p5util.js, - line 1533 -
- -

- - - -
-
- - -
- Multiply the given number with the value currently stored at the given key. The product then replaces the value previously stored in the Dictionary. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
Key - - -Number - - - - for value you wish to multiply
Amount - - -Number - - - - to multiply the value by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(2, 4);
  myDictionary.mult(2, 2);
  print(myDictionary.get(2)); // logs 8 to console.
}
- - - -
- - - - -
- -

- - inner sub(Key, Number) - - -
- jsboot/p5util.js, - line 1515 -
- -

- - - -
-
- - -
- Subtract the given number from the value currently stored at the given key. The difference then replaces the value previously stored in the Dictionary. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
Key - - -Number - - - - for the value you wish to subtract from
Number - - -Number - - - - to subtract from the value
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(2, 5);
  myDictionary.sub(2, 2);
  print(myDictionary.get(2)); // logs 3 to console.
}
- - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/p5compat.module_PVector.html b/doc/html/p5compat.module_PVector.html deleted file mode 100644 index 3f13b98c..00000000 --- a/doc/html/p5compat.module_PVector.html +++ /dev/null @@ -1,6163 +0,0 @@ - - - - - Module: PVector | Module: PVector - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -
- -
- -
- - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - - - - - - - - - - - - - - -

Methods

- -
- - -
- -

- - static add(v1, v2, target) - - -
- jsboot/p5vect.js, - line 1303 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
v1 - - -PVector - - - - a PVector to add
v2 - - -PVector - - - - a PVector to add
target - - -PVector - - - - the vector to receive the result
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static cross(v1, v2) → {Number} - - -
- jsboot/p5vect.js, - line 1391 -
- -

- - - -
-
- - -
- Calculates the cross product of two vectors. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
v1 - - -PVector - - - - the first PVector
v2 - - -PVector - - - - the second PVector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the cross product - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static dist(v1, v2) → {Number} - - -
- jsboot/p5vect.js, - line 1404 -
- -

- - - -
-
- - -
- Calculates the Euclidean distance between two points (considering a point as a vector object). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
v1 - - -PVector - - - - the first PVector
v2 - - -PVector - - - - the second PVector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the distance - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static div(v, n, target) - - -
- jsboot/p5vect.js, - line 1359 -
- -

- - - -
-
- - -
- Divides a vector by a scalar and returns a new vector. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
v - - -PVector - - - - the vector to divide
n - - -Number - - - -
target - - -PVector - - - - if undefined a new vector will be created
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static dot(v1, v2) → {Number} - - -
- jsboot/p5vect.js, - line 1378 -
- -

- - - -
-
- - -
- Calculates the dot product of two vectors. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
v1 - - -PVector - - - - the first PVector
v2 - - -PVector - - - - the second PVector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the dot product - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static fromAngle(angle, lengthopt) → {PVector} - - -
- jsboot/p5vect.js, - line 1141 -
- -

- - - -
-
- - -
- Make a new 2D vector from an angle -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
angle - - -Number - - - - - - - - - - the desired angle, in radians
length - - -Number - - - - - - <optional>
- - - - - - 		the length of the new vector (defaults to 1)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -PVector - - - - - -- the new PVector object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(200);

  // Create a variable, proportional to the mouseX,
  // varying from 0-360, to represent an angle in degrees.
  angleMode(DEGREES);
  let myDegrees = map(mouseX, 0, width, 0, 360);

  // Display that variable in an onscreen text.
  // (Note the nfc() function to truncate additional decimal places,
  // and the "\xB0" character for the degree symbol.)
  let readout = 'angle = ' + nfc(myDegrees, 1) + '\xB0';
  noStroke();
  fill(0);
  text(readout, 5, 15);

  // Create a PVector using the fromAngle function,
  // and extract its x and y components.
  let v = PVector.fromAngle(radians(myDegrees), 30);
  let vx = v.x;
  let vy = v.y;

  push();
  translate(width / 2, height / 2);
  noFill();
  stroke(150);
  line(0, 0, 30, 0);
  stroke(0);
  line(0, 0, vx, vy);
  pop();
}
- - - -
- - - - -
- -

- - static fromAngles(theta, phi, lengthopt) → {PVector} - - -
- jsboot/p5vect.js, - line 1189 -
- -

- - - -
-
- - -
- Make a new 3D vector from a pair of ISO spherical angles -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
theta - - -Number - - - - - - - - - - the polar angle, in radians (zero is up)
phi - - -Number - - - - - - - - - - the azimuthal angle, in radians (zero is out of the screen)
length - - -Number - - - - - - <optional>
- - - - - - 		the length of the new vector (defaults to 1)
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -PVector - - - - - -- the new PVector object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
* function setup() {
  createCanvas(100, 100, WEBGL);
  fill(255);
  noStroke();
}
function draw() {
  background(255);

  let t = millis() / 1000;

  // add three point lights
  pointLight(color('#f00'), PVector.fromAngles(t * 1.0, t * 1.3, 100));
  pointLight(color('#0f0'), PVector.fromAngles(t * 1.1, t * 1.2, 100));
  pointLight(color('#00f'), PVector.fromAngles(t * 1.2, t * 1.1, 100));

  sphere(35);
}
- - - -
- - - - -
- -

- - static lerp(v1, v2, amt) → {Number} - - -
- jsboot/p5vect.js, - line 1418 -
- -

- - - -
-
- - -
- Linear interpolate a vector to another vector and return the result as a new vector. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
v1 - - -PVector - - - -
v2 - - -PVector - - - -
amt - - -Number - - - -
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the lerped value - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static mag(vecT) → {Number} - - -
- jsboot/p5vect.js, - line 1439 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
vecT - - -PVector - - - - the vector to return the magnitude of
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the magnitude of vecT - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static mult(v, n, target) - - -
- jsboot/p5vect.js, - line 1340 -
- -

- - - -
-
- - -
- Multiplies a vector by a scalar and returns a new vector. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
v - - -PVector - - - - the vector to multiply
n - - -Number - - - -
target - - -PVector - - - - if undefined a new vector will be created
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - static random2D() → {PVector} - - -
- jsboot/p5vect.js, - line 1234 -
- -

- - - -
-
- - -
- Make a new 2D unit vector from a random angle -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -PVector - - - - - -- the new PVector object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = PVector.random2D();
// May make v's attributes something like:
// [0.61554617, -0.51195765, 0.0] or
// [-0.4695841, -0.14366731, 0.0] or
// [0.6091097, -0.22805278, 0.0]
print(v);

function setup() {
  frameRate(1);
}

function draw() {
  background(240);

  let v0 = createVector(50, 50);
  let v1 = PVector.random2D();
  drawArrow(v0, v1.mult(50), 'black');
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - static random3D() → {PVector} - - -
- jsboot/p5vect.js, - line 1279 -
- -

- - - -
-
- - -
- Make a new random 3D unit vector. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -PVector - - - - - -- the new PVector object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = PVector.random3D();
// May make v's attributes something like:
// [0.61554617, -0.51195765, 0.599168] or
// [-0.4695841, -0.14366731, -0.8711202] or
// [0.6091097, -0.22805278, -0.7595902]
print(v);
- - - -
- - - - -
- -

- - static sub(v1, v2, target) - - -
- jsboot/p5vect.js, - line 1320 -
- -

- - - -
-
- - -
- Subtracts one PVector from another and returns a new one. The second vector (v2) is subtracted from the first (v1), resulting in v1-v2. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
v1 - - -PVector - - - - a PVector to subtract from
v2 - - -PVector - - - - a PVector to subtract
target - - -PVector - - - - if undefined a new vector will be created
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner add(x, yopt, zopt) - - -
- jsboot/p5vect.js, - line 206 -
- -

- - - -
-
- - -
- Adds x, y, and z components to a vector, adds one vector to another, or adds two independent vectors together. The version of the method that adds two vectors together is a static method and returns a PVector, the others acts directly on the vector. See the examples for more context. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x component of the vector to be added
y - - -Number - - - - - - <optional>
- - - - - - 		the y component of the vector to be added
z - - -Number - - - - - - <optional>
- - - - - - 		the z component of the vector to be added
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = createVector(1, 2, 3);
v.add(4, 5, 6);
// v's components are set to [5, 7, 9]
// Static method
let v1 = createVector(1, 2, 3);
let v2 = createVector(2, 3, 4);

let v3 = PVector.add(v1, v2);
// v3 has components [3, 5, 7]
print(v3);

// red vector + blue vector = purple vector
function draw() {
  background(240);

  let v0 = createVector(0, 0);
  let v1 = createVector(mouseX, mouseY);
  drawArrow(v0, v1, 'red');

  let v2 = createVector(-30, 20);
  drawArrow(v1, v2, 'blue');

  let v3 = PVector.add(v1, v2);
  drawArrow(v0, v3, 'purple');
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner angleBetween(the) → {Number} - - -
- jsboot/p5vect.js, - line 937 -
- -

- - - -
-
- - -
- Calculates and returns the angle (in radians) between two vectors. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
the - - -PVector - - - - x, y, and z components of a PVector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the angle between (in radians) - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v1 = createVector(1, 0, 0);
let v2 = createVector(0, 1, 0);

let angle = v1.angleBetween(v2);
// angle is PI/2
print(angle);

function draw() {
  background(240);
  let v0 = createVector(50, 50);

  let v1 = createVector(50, 0);
  drawArrow(v0, v1, 'red');

  let v2 = createVector(mouseX - 50, mouseY - 50);
  drawArrow(v0, v2, 'blue');

  let angleBetween = v1.angleBetween(v2);
  noStroke();
  text(
    'angle between: ' +
      angleBetween.toFixed(2) +
      ' radians or ' +
      degrees(angleBetween).toFixed(2) +
      ' degrees',
    10,
    50,
    90,
    50
  );
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner array() → {Array.<Number>} - - -
- jsboot/p5vect.js, - line 1070 -
- -

- - - -
-
- - -
- Return a representation of this vector as a float array. This is only for temporary use. If used in any other fashion, the contents should be copied by using the PVector.copy() method to copy into your own array. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Array.<Number> - - - - - -- an Array with the 3 values - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
* function setup() {
  let v = createVector(20, 30);
  print(v.array()); // Prints : Array [20, 30, 0]
}

let v = createVector(10.0, 20.0, 30.0);
let f = v.array();
print(f[0]); // Prints "10.0"
print(f[1]); // Prints "20.0"
print(f[2]); // Prints "30.0"
- - - -
- - - - -
- -

- - inner copy() → {PVector} - - -
- jsboot/p5vect.js, - line 191 -
- -

- - - -
-
- - -
- Gets a copy of the vector, returns a PVector object. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -PVector - - - - - -- the copy of the PVector object - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v1 = createVector(1, 2, 3);
let v2 = v1.copy();
print(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);
// Prints "true"
- - - -
- - - - -
- -

- - inner cross(v) → {PVector} - - -
- jsboot/p5vect.js, - line 597 -
- -

- - - -
-
- - -
- Calculates and returns a vector composed of the cross product between two vectors. Both the static and non static methods return a new PVector. See the examples for more context. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
v - - -PVector - - - - PVector to be crossed
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -PVector - - - - - -- PVector composed of cross product - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v1 = createVector(1, 2, 3);
let v2 = createVector(1, 2, 3);

v1.cross(v2); // v's components are [0, 0, 0]

// Static method
let v1 = createVector(1, 0, 0);
let v2 = createVector(0, 1, 0);

let crossProduct = PVector.cross(v1, v2);
// crossProduct has components [0, 0, 1]
print(crossProduct);
- - - -
- - - - -
- -

- - inner dist(v) → {Number} - - -
- jsboot/p5vect.js, - line 627 -
- -

- - - -
-
- - -
- Calculates the Euclidean distance between two points (considering a point as a vector object). -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
v - - -PVector - - - - the x, y, and z coordinates of a PVector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the distance - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v1 = createVector(1, 0, 0);
let v2 = createVector(0, 1, 0);

let distance = v1.dist(v2); // distance is 1.4142...
print(distance);

// Static method
let v1 = createVector(1, 0, 0);
let v2 = createVector(0, 1, 0);

let distance = PVector.dist(v1, v2);
// distance is 1.4142...
print(distance);

function draw() {
  background(240);

  let v0 = createVector(0, 0);

  let v1 = createVector(70, 50);
  drawArrow(v0, v1, 'red');

  let v2 = createVector(mouseX, mouseY);
  drawArrow(v0, v2, 'blue');

  noStroke();
  text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner div(n) - - -
- jsboot/p5vect.js, - line 411 -
- -

- - - -
-
- - -
- Divide the vector by a scalar. The static version of this method creates a new PVector while the non static version acts on the vector directly. See the examples for more context. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -number - - - - the number to divide the vector by
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = createVector(6, 4, 2);
v.div(2); //v's components are set to [3, 2, 1]

// Static method
let v1 = createVector(6, 4, 2);
let v2 = PVector.div(v1, 2);
// v2 has components [3, 2, 1]
print(v2);

function draw() {
  background(240);

  let v0 = createVector(0, 100);
  let v1 = createVector(50, -50);
  drawArrow(v0, v1, 'red');

  let num = map(mouseX, 0, width, 10, 0.5, true);
  let v2 = PVector.div(v1, num);
  drawArrow(v0, v2, 'blue');

  noStroke();
  text('divided by ' + num.toFixed(2), 10, 90);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner dot(value) → {Number} - - -
- jsboot/p5vect.js, - line 585 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -PVector - - - - value component of the vector or a PVector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner dot(x, yopt, zopt) → {Number} - - -
- jsboot/p5vect.js, - line 562 -
- -

- - - -
-
- - -
- Calculates the dot product of two vectors. The version of the method that computes the dot product of two independent vectors is a static method. See the examples for more context. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the dot product - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v1 = createVector(1, 2, 3);
let v2 = createVector(2, 3, 4);

print(v1.dot(v2)); // Prints "20"

//Static method
let v1 = createVector(1, 2, 3);
let v2 = createVector(3, 2, 1);
print(PVector.dot(v1, v2)); // Prints "10"
- - - -
- - - - -
- -

- - inner equals(xopt, yopt, zopt) → {Boolean} - - -
- jsboot/p5vect.js, - line 1094 -
- -

- - - -
-
- - -
- Equality check against a PVector -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		the x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		the y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		the z component of the vector
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- whether the vectors are equals - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
* let v1 = createVector(5, 10, 20);
let v2 = createVector(5, 10, 20);
let v3 = createVector(13, 10, 19);

print(v1.equals(v2.x, v2.y, v2.z)); // true
print(v1.equals(v3.x, v3.y, v3.z)); // false

let v1 = createVector(10.0, 20.0, 30.0);
let v2 = createVector(10.0, 20.0, 30.0);
let v3 = createVector(0.0, 0.0, 0.0);
print(v1.equals(v2)); // true
print(v1.equals(v3)); // false
- - - -
- - - - -
- -

- - inner equals(value) → {Boolean} - - -
- jsboot/p5vect.js, - line 1116 -
- -

- - - -
-
- - - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
value - - -PVector -| - -Array - - - - the vector to compare
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - -
- -

- - inner heading() → {Number} - - -
- jsboot/p5vect.js, - line 830 -
- -

- - - -
-
- - -
- Calculate the angle of rotation for this vector (only 2D vectors) -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- the angle of rotation - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
* function setup() {
  let v1 = createVector(30, 50);
  print(v1.heading()); // 1.0303768265243125

  v1 = createVector(40, 50);
  print(v1.heading()); // 0.8960553845713439

  v1 = createVector(30, 70);
  print(v1.heading()); // 1.1659045405098132
}

function draw() {
  background(240);

  let v0 = createVector(50, 50);
  let v1 = createVector(mouseX - 50, mouseY - 50);

  drawArrow(v0, v1, 'black');

  let myHeading = v1.heading();
  noStroke();
  text(
    'vector heading: ' +
      myHeading.toFixed(2) +
      ' radians or ' +
      degrees(myHeading).toFixed(2) +
      ' degrees',
    10,
    50,
    90,
    50
  );
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner lerp(x, y, z, amt) - - -
- jsboot/p5vect.js, - line 1001 -
- -

- - - -
-
- - -
- Linear interpolate the vector to another vector -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
x - - -Number - - - - the x component
y - - -Number - - - - the y component
z - - -Number - - - - the z component
amt - - -Number - - - - the amount of interpolation; some value between 0.0 (old vector) and 1.0 (new vector). 0.9 is very near the new vector. 0.5 is halfway in between.
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = createVector(1, 1, 0);

v.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]

let v1 = createVector(0, 0, 0);
let v2 = createVector(100, 100, 0);

let v3 = PVector.lerp(v1, v2, 0.5);
// v3 has components [50,50,0]
print(v3);

let step = 0.01;
let amount = 0;

function draw() {
  background(240);
  let v0 = createVector(0, 0);

  let v1 = createVector(mouseX, mouseY);
  drawArrow(v0, v1, 'red');

  let v2 = createVector(90, 90);
  drawArrow(v0, v2, 'blue');

  if (amount > 1 || amount < 0) {
    step *= -1;
  }
  amount += step;
  let v3 = PVector.lerp(v1, v2, amount);

  drawArrow(v0, v3, 'purple');
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner limit(max) - - -
- jsboot/p5vect.js, - line 734 -
- -

- - - -
-
- - -
- Limit the magnitude of this vector to the value used for the max parameter. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
max - - -Number - - - - the maximum magnitude for the vector
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = createVector(10, 20, 2);
// v has components [10.0, 20.0, 2.0]
v.limit(5);
// v's components are set to
// [2.2271771, 4.4543543, 0.4454354]
* * function draw() {
  background(240);

  let v0 = createVector(50, 50);
  let v1 = createVector(mouseX - 50, mouseY - 50);

  drawArrow(v0, v1, 'red');
  drawArrow(v0, v1.limit(35), 'blue');

  noFill();
  ellipse(50, 50, 35 * 2);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner mag() → {Number} - - -
- jsboot/p5vect.js, - line 476 -
- -

- - - -
-
- - -
- Calculates the magnitude (length) of the vector and returns the result as a float (this is simply the equation sqrt(x*x + y*y + z*z).) -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Number - - - - - -- magnitude of the vector - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function draw() {
  background(240);

  let v0 = createVector(0, 0);
  let v1 = createVector(mouseX, mouseY);
  drawArrow(v0, v1, 'black');

  noStroke();
  text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
* * let v = createVector(20.0, 30.0, 40.0);
let m = v.mag();
print(m); // Prints "53.85164807134504"
- - - -
- - - - -
- -

- - inner magSq() → {number} - - -
- jsboot/p5vect.js, - line 516 -
- -

- - - -
-
- - -
- Calculates the squared magnitude of the vector and returns the result as a float (this is simply the equation (x*x + y*y + z*z).) Faster if the real length is not required in the case of comparing vectors, etc. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -number - - - - - -- squared magnitude of the vector - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
// Static method
let v1 = createVector(6, 4, 2);
print(v1.magSq()); // Prints "56"

function draw() {
  background(240);

  let v0 = createVector(0, 0);
  let v1 = createVector(mouseX, mouseY);
  drawArrow(v0, v1, 'black');

  noStroke();
  text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner mult(n) - - -
- jsboot/p5vect.js, - line 349 -
- -

- - - -
-
- - -
- Multiply the vector by a scalar. The static version of this method creates a new PVector while the non static version acts on the vector directly. See the examples for more context. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
n - - -Number - - - - the number to multiply with the vector
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = createVector(1, 2, 3);
v.mult(2);
// v's components are set to [2, 4, 6]

// Static method
let v1 = createVector(1, 2, 3);
let v2 = PVector.mult(v1, 2);
// v2 has components [2, 4, 6]
print(v2);

function draw() {
  background(240);

  let v0 = createVector(50, 50);
  let v1 = createVector(25, -25);
  drawArrow(v0, v1, 'red');

  let num = map(mouseX, 0, width, -2, 2, true);
  let v2 = PVector.mult(v1, num);
  drawArrow(v0, v2, 'blue');

  noStroke();
  text('multiplied by ' + num.toFixed(2), 5, 90);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner normalize() → {PVector} - - -
- jsboot/p5vect.js, - line 686 -
- -

- - - -
-
- - -
- Normalize the vector to length 1 (make it a unit vector). -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -PVector - - - - - -- normalized PVector - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = createVector(10, 20, 2);
// v has components [10.0, 20.0, 2.0]
v.normalize();
// v's components are set to
// [0.4454354, 0.8908708, 0.089087084]
* * function draw() {
  background(240);

  let v0 = createVector(50, 50);
  let v1 = createVector(mouseX - 50, mouseY - 50);

  drawArrow(v0, v1, 'red');
  v1.normalize();
  drawArrow(v0, v1.mult(35), 'blue');

  noFill();
  ellipse(50, 50, 35 * 2);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner rotate(angle) - - -
- jsboot/p5vect.js, - line 890 -
- -

- - - -
-
- - -
- Rotate the vector by an angle (only 2D vectors), magnitude remains the same -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
angle - - -number - - - - the angle of rotation
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = createVector(10.0, 20.0);
// v has components [10.0, 20.0, 0.0]
v.rotate(HALF_PI);
// v's components are set to [-20.0, 9.999999, 0.0]

let angle = 0;
function draw() {
  background(240);

  let v0 = createVector(50, 50);
  let v1 = createVector(50, 0);

  drawArrow(v0, v1.rotate(angle), 'black');
  angle += 0.01;
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner set(xopt, yopt, zopt) - - -
- jsboot/p5vect.js, - line 122 -
- -

- - - -
-
- - -
- Sets the x, y, and z component of the vector using two or three separate variables, the data from a PVector, or the values from a float array. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - <optional>
- - - - - - 		the x component of the vector
y - - -Number - - - - - - <optional>
- - - - - - 		the y component of the vector
z - - -Number - - - - - - <optional>
- - - - - - 		the z component of the vector
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let v = createVector(1, 2, 3);
  v.set(4, 5, 6); // Sets vector to [4, 5, 6]

  let v1 = createVector(0, 0, 0);
  let arr = [1, 2, 3];
  v1.set(arr); // Sets vector to [1, 2, 3]
}

let v0, v1;
function setup() {
  createCanvas(100, 100);

  v0 = createVector(0, 0);
  v1 = createVector(50, 50);
}

function draw() {
  background(240);

  drawArrow(v0, v1, 'black');
  v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));

  noStroke();
  text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner setMag(len) - - -
- jsboot/p5vect.js, - line 783 -
- -

- - - -
-
- - -
- Set the magnitude of this vector to the value used for the len parameter. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
len - - -number - - - - the new length for this vector
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = createVector(10, 20, 2);
// v has components [10.0, 20.0, 2.0]
v.setMag(10);
// v's components are set to [6.0, 8.0, 0.0]

function draw() {
  background(240);

  let v0 = createVector(0, 0);
  let v1 = createVector(50, 50);

  drawArrow(v0, v1, 'red');

  let length = map(mouseX, 0, width, 0, 141, true);
  v1.setMag(length);
  drawArrow(v0, v1, 'blue');

  noStroke();
  text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner sub(x, yopt, zopt) - - -
- jsboot/p5vect.js, - line 277 -
- -

- - - -
-
- - -
- Subtracts x, y, and z components from a vector, subtracts one vector from another, or subtracts two independent vectors. The version of the method that subtracts two vectors is a static method and returns a PVector, the other acts directly on the vector. See the examples for more context. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeAttributesDescription
x - - -Number - - - - - - - - - - the x component of the vector to subtract
y - - -Number - - - - - - <optional>
- - - - - - 		the y component of the vector to subtract
z - - -Number - - - - - - <optional>
- - - - - - 		the z component of the vector to subtract
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
let v = createVector(4, 5, 6);
v.sub(1, 1, 1);
// v's components are set to [3, 4, 5]

// Static method
let v1 = createVector(2, 3, 4);
let v2 = createVector(1, 2, 3);

let v3 = PVector.sub(v1, v2);
// v3 has components [1, 1, 1]
print(v3);

// red vector - blue vector = purple vector
function draw() {
  background(240);

  let v0 = createVector(0, 0);
  let v1 = createVector(70, 50);
  drawArrow(v0, v1, 'red');

  let v2 = createVector(mouseX, mouseY);
  drawArrow(v0, v2, 'blue');

  let v3 = PVector.sub(v1, v2);
  drawArrow(v2, v3, 'purple');
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- - - - -
- -

- - inner toString() → {String} - - -
- jsboot/p5vect.js, - line 80 -
- -

- - - -
-
- - -
- Returns a string representation of a vector v by calling String(v) or v.toString(). This method is useful for logging vectors in the console. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -String - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let v = createVector(20, 30);
  print(String(v)); // prints "PVector Object : [20, 30, 0]"
}

function draw() {
  background(240);

  let v0 = createVector(0, 0);
  let v1 = createVector(mouseX, mouseY);
  drawArrow(v0, v1, 'black');

  noStroke();
  text(v1.toString(), 10, 25, 90, 75);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}
- - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/p5compat.module_StringDict-StringDict.html b/doc/html/p5compat.module_StringDict-StringDict.html deleted file mode 100644 index 7c79d83d..00000000 --- a/doc/html/p5compat.module_StringDict-StringDict.html +++ /dev/null @@ -1,210 +0,0 @@ - - - - - Class: StringDict | Class: StringDict - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

- .StringDict~StringDict()

- - -
- -
- -
- - - -
- -

- - new StringDict() - - -
- jsboot/p5util.js, - line 1452 -
- -

- - - -
-
- - -
- A simple Dictionary class for Strings. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - -

Extends

- - - - -
    -
  • TypedDict
    • -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/p5compat.module_StringDict.html b/doc/html/p5compat.module_StringDict.html deleted file mode 100644 index c9bd03a1..00000000 --- a/doc/html/p5compat.module_StringDict.html +++ /dev/null @@ -1,165 +0,0 @@ - - - - - Module: StringDict | Module: StringDict - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -
- - - -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/p5compat.module_TypedDict-TypedDict.html b/doc/html/p5compat.module_TypedDict-TypedDict.html deleted file mode 100644 index 85030e0d..00000000 --- a/doc/html/p5compat.module_TypedDict-TypedDict.html +++ /dev/null @@ -1,199 +0,0 @@ - - - - - Class: TypedDict | Class: TypedDict - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -

- .TypedDict~TypedDict()

- - -
- -
- -
- - - -
- -

- - new TypedDict() - - -
- jsboot/p5util.js, - line 1218 -
- -

- - - -
-
- - -
- Base class for all p5.Dictionary types. Specifically typed Dictionary classes inherit from this class. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/p5compat.module_TypedDict.html b/doc/html/p5compat.module_TypedDict.html deleted file mode 100644 index d8708d01..00000000 --- a/doc/html/p5compat.module_TypedDict.html +++ /dev/null @@ -1,1398 +0,0 @@ - - - - - Module: TypedDict | Module: TypedDict - - - - - - - - - - - - - -
- -
- - - - - -
- -
- -
- -
- -
- - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - - - - -

Classes

- - -
- -
-

- TypedDict -
- p5compat.module:TypedDict~TypedDict -
-

-
- - -
- - - - - - - - - - - - -

Methods

- -
- - -
- -

- - inner clear() - - -
- jsboot/p5util.js, - line 1354 -
- -

- - - -
-
- - -
- Removes all previously stored key-value pairs from the Dictionary. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // prints 'true'
  myDictionary.clear();
  print(myDictionary.hasKey('p5')); // prints 'false'
}
- - - -
- - - - -
- -

- - inner create(key, value) - - -
- jsboot/p5util.js, - line 1326 -
- -

- - - -
-
- - -
- Creates a new key-value pair in the Dictionary. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number -| - -String - - - -
value - - -Number -| - -String - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  myDictionary.create('happy', 'coding');
  myDictionary.print();
  // above logs "key: p5 - value: js, key: happy - value: coding" to console
}
- - - -
- - - - -
- -

- - inner get(the) → {Number|String} - - -
- jsboot/p5util.js, - line 1270 -
- -

- - - -
-
- - -
- Returns the value stored at the given key. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
the - - -Number -| - -String - - - - key you want to access
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Number -| - -String - - - - - -- the value stored at that key - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  let myValue = myDictionary.get('p5');
  print(myValue === 'js'); // logs true to console
}
- - - -
- - - - -
- -

- - inner hasKey(key) → {Boolean} - - -
- jsboot/p5util.js, - line 1252 -
- -

- - - -
-
- - -
- Returns true if the given key exists in the Dictionary, otherwise returns false. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number -| - -String - - - - that you want to look up
- -
- - - - - - - - - - - - - -
-
Returns:
- - - - - -Boolean - - - - - -- whether that key exists in Dictionary - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console
}
- - - -
- - - - -
- -

- - inner print() - - -
- jsboot/p5util.js, - line 1395 -
- -

- - - -
-
- - -
- Logs the set of items currently stored in the Dictionary to the console. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  myDictionary.create('happy', 'coding');
  myDictionary.print();
  // above logs "key: p5 - value: js, key: happy - value: coding" to console
}
- - - -
- - - - -
- -

- - inner remove(key) - - -
- jsboot/p5util.js, - line 1370 -
- -

- - - -
-
- - -
- Removes the key-value pair stored at the given key from the Dictionary. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number -| - -String - - - - for the pair to remove
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  myDictionary.create('happy', 'coding');
  myDictionary.print();
  // above logs "key: p5 - value: js, key: happy - value: coding" to console
  myDictionary.remove('p5');
  myDictionary.print();
  // above logs "key: happy value: coding" to console
}
- - - -
- - - - -
- -

- - inner saveJSON() - - -
- jsboot/p5util.js, - line 1414 -
- -

- - - -
-
- - -
- Converts the Dictionary into a JSON file for local download. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  createCanvas(100, 100);
  background(200);
  text('click here to save', 10, 10, 70, 80);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    createStringDict({
      john: 1940,
      paul: 1942,
      george: 1943,
      ringo: 1940
    }).saveJSON('beatles');
  }
}
- - - -
- - - - -
- -

- - inner set(key, value) - - -
- jsboot/p5util.js, - line 1292 -
- -

- - - -
-
- - -
- Updates the value associated with the given key in case it already exists in the Dictionary. Otherwise a new key-value pair is added. -
- - - - - - - - - -
-
Parameters:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
key - - -Number -| - -String - - - -
value - - -Number -| - -String - - - -
- -
- - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createStringDict('p5', 'js');
  myDictionary.set('p5', 'JS');
  myDictionary.print(); // logs "key: p5 - value: JS" to console
}
- - - -
- - - - -
- -

- - inner size() → {Integer} - - -
- jsboot/p5util.js, - line 1234 -
- -

- - - -
-
- - -
- Returns the number of key-value pairs currently stored in the Dictionary. -
- - - - - - - - - - - - - - - - - - - - - -
-
Returns:
- - - - - -Integer - - - - - -- the number of key-value pairs in the Dictionary - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
Example
- - 
function setup() {
  let myDictionary = createNumberDict(1, 10);
  myDictionary.create(2, 20);
  myDictionary.create(3, 30);
  print(myDictionary.size()); // logs 3 to the console
}
- - - -
- -
- - - - - -
- -
- - - - -
- -
- -
NHN Entertainment. Frontend Development Lab
-
- - - - - - - - - \ No newline at end of file diff --git a/doc/html/scripts/jquery.min.js b/doc/html/scripts/jquery.min.js deleted file mode 100644 index 45477c0b..00000000 --- a/doc/html/scripts/jquery.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! jQuery v1.8.3 jquery.com | jquery.org/license */ -(function(e,t){function _(e){var t=M[e]={};return v.each(e.split(y),function(e,n){t[n]=!0}),t}function H(e,n,r){if(r===t&&e.nodeType===1){var i="data-"+n.replace(P,"-$1").toLowerCase();r=e.getAttribute(i);if(typeof r=="string"){try{r=r==="true"?!0:r==="false"?!1:r==="null"?null:+r+""===r?+r:D.test(r)?v.parseJSON(r):r}catch(s){}v.data(e,n,r)}else r=t}return r}function B(e){var t;for(t in e){if(t==="data"&&v.isEmptyObject(e[t]))continue;if(t!=="toJSON")return!1}return!0}function et(){return!1}function tt(){return!0}function ut(e){return!e||!e.parentNode||e.parentNode.nodeType===11}function at(e,t){do e=e[t];while(e&&e.nodeType!==1);return e}function ft(e,t,n){t=t||0;if(v.isFunction(t))return v.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return v.grep(e,function(e,r){return e===t===n});if(typeof t=="string"){var r=v.grep(e,function(e){return e.nodeType===1});if(it.test(t))return v.filter(t,r,!n);t=v.filter(t,r)}return v.grep(e,function(e,r){return v.inArray(e,t)>=0===n})}function lt(e){var t=ct.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}function Lt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function At(e,t){if(t.nodeType!==1||!v.hasData(e))return;var n,r,i,s=v._data(e),o=v._data(t,s),u=s.events;if(u){delete o.handle,o.events={};for(n in u)for(r=0,i=u[n].length;r").appendTo(i.body),n=t.css("display");t.remove();if(n==="none"||n===""){Pt=i.body.appendChild(Pt||v.extend(i.createElement("iframe"),{frameBorder:0,width:0,height:0}));if(!Ht||!Pt.createElement)Ht=(Pt.contentWindow||Pt.contentDocument).document,Ht.write(""),Ht.close();t=Ht.body.appendChild(Ht.createElement(e)),n=Dt(t,"display"),i.body.removeChild(Pt)}return Wt[e]=n,n}function fn(e,t,n,r){var i;if(v.isArray(t))v.each(t,function(t,i){n||sn.test(e)?r(e,i):fn(e+"["+(typeof i=="object"?t:"")+"]",i,n,r)});else if(!n&&v.type(t)==="object")for(i in t)fn(e+"["+i+"]",t[i],n,r);else r(e,t)}function Cn(e){return function(t,n){typeof t!="string"&&(n=t,t="*");var r,i,s,o=t.toLowerCase().split(y),u=0,a=o.length;if(v.isFunction(n))for(;u)[^>]*$|#([\w\-]*)$)/,E=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,S=/^[\],:{}\s]*$/,x=/(?:^|:|,)(?:\s*\[)+/g,T=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,N=/"[^"\\\r\n]*"|true|false|null|-?(?:\d\d*\.|)\d+(?:[eE][\-+]?\d+|)/g,C=/^-ms-/,k=/-([\da-z])/gi,L=function(e,t){return(t+"").toUpperCase()},A=function(){i.addEventListener?(i.removeEventListener("DOMContentLoaded",A,!1),v.ready()):i.readyState==="complete"&&(i.detachEvent("onreadystatechange",A),v.ready())},O={};v.fn=v.prototype={constructor:v,init:function(e,n,r){var s,o,u,a;if(!e)return this;if(e.nodeType)return this.context=this[0]=e,this.length=1,this;if(typeof e=="string"){e.charAt(0)==="<"&&e.charAt(e.length-1)===">"&&e.length>=3?s=[null,e,null]:s=w.exec(e);if(s&&(s[1]||!n)){if(s[1])return n=n instanceof v?n[0]:n,a=n&&n.nodeType?n.ownerDocument||n:i,e=v.parseHTML(s[1],a,!0),E.test(s[1])&&v.isPlainObject(n)&&this.attr.call(e,n,!0),v.merge(this,e);o=i.getElementById(s[2]);if(o&&o.parentNode){if(o.id!==s[2])return r.find(e);this.length=1,this[0]=o}return this.context=i,this.selector=e,this}return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e)}return v.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),v.makeArray(e,this))},selector:"",jquery:"1.8.3",length:0,size:function(){return this.length},toArray:function(){return l.call(this)},get:function(e){return e==null?this.toArray():e<0?this[this.length+e]:this[e]},pushStack:function(e,t,n){var r=v.merge(this.constructor(),e);return r.prevObject=this,r.context=this.context,t==="find"?r.selector=this.selector+(this.selector?" ":"")+n:t&&(r.selector=this.selector+"."+t+"("+n+")"),r},each:function(e,t){return v.each(this,e,t)},ready:function(e){return v.ready.promise().done(e),this},eq:function(e){return e=+e,e===-1?this.slice(e):this.slice(e,e+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(l.apply(this,arguments),"slice",l.call(arguments).join(","))},map:function(e){return this.pushStack(v.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:[].sort,splice:[].splice},v.fn.init.prototype=v.fn,v.extend=v.fn.extend=function(){var e,n,r,i,s,o,u=arguments[0]||{},a=1,f=arguments.length,l=!1;typeof u=="boolean"&&(l=u,u=arguments[1]||{},a=2),typeof u!="object"&&!v.isFunction(u)&&(u={}),f===a&&(u=this,--a);for(;a0)return;r.resolveWith(i,[v]),v.fn.trigger&&v(i).trigger("ready").off("ready")},isFunction:function(e){return v.type(e)==="function"},isArray:Array.isArray||function(e){return v.type(e)==="array"},isWindow:function(e){return e!=null&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return e==null?String(e):O[h.call(e)]||"object"},isPlainObject:function(e){if(!e||v.type(e)!=="object"||e.nodeType||v.isWindow(e))return!1;try{if(e.constructor&&!p.call(e,"constructor")&&!p.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(n){return!1}var r;for(r in e);return r===t||p.call(e,r)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw new Error(e)},parseHTML:function(e,t,n){var r;return!e||typeof e!="string"?null:(typeof t=="boolean"&&(n=t,t=0),t=t||i,(r=E.exec(e))?[t.createElement(r[1])]:(r=v.buildFragment([e],t,n?null:[]),v.merge([],(r.cacheable?v.clone(r.fragment):r.fragment).childNodes)))},parseJSON:function(t){if(!t||typeof t!="string")return null;t=v.trim(t);if(e.JSON&&e.JSON.parse)return e.JSON.parse(t);if(S.test(t.replace(T,"@").replace(N,"]").replace(x,"")))return(new Function("return "+t))();v.error("Invalid JSON: "+t)},parseXML:function(n){var r,i;if(!n||typeof n!="string")return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(s){r=t}return(!r||!r.documentElement||r.getElementsByTagName("parsererror").length)&&v.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&g.test(t)&&(e.execScript||function(t){e.eval.call(e,t)})(t)},camelCase:function(e){return e.replace(C,"ms-").replace(k,L)},nodeName:function(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()},each:function(e,n,r){var i,s=0,o=e.length,u=o===t||v.isFunction(e);if(r){if(u){for(i in e)if(n.apply(e[i],r)===!1)break}else for(;s0&&e[0]&&e[a-1]||a===0||v.isArray(e));if(f)for(;u-1)a.splice(n,1),i&&(n<=o&&o--,n<=u&&u--)}),this},has:function(e){return v.inArray(e,a)>-1},empty:function(){return a=[],this},disable:function(){return a=f=n=t,this},disabled:function(){return!a},lock:function(){return f=t,n||c.disable(),this},locked:function(){return!f},fireWith:function(e,t){return t=t||[],t=[e,t.slice?t.slice():t],a&&(!r||f)&&(i?f.push(t):l(t)),this},fire:function(){return c.fireWith(this,arguments),this},fired:function(){return!!r}};return c},v.extend({Deferred:function(e){var t=[["resolve","done",v.Callbacks("once memory"),"resolved"],["reject","fail",v.Callbacks("once memory"),"rejected"],["notify","progress",v.Callbacks("memory")]],n="pending",r={state:function(){return n},always:function(){return i.done(arguments).fail(arguments),this},then:function(){var e=arguments;return v.Deferred(function(n){v.each(t,function(t,r){var s=r[0],o=e[t];i[r[1]](v.isFunction(o)?function(){var e=o.apply(this,arguments);e&&v.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[s+"With"](this===i?n:this,[e])}:n[s])}),e=null}).promise()},promise:function(e){return e!=null?v.extend(e,r):r}},i={};return r.pipe=r.then,v.each(t,function(e,s){var o=s[2],u=s[3];r[s[1]]=o.add,u&&o.add(function(){n=u},t[e^1][2].disable,t[2][2].lock),i[s[0]]=o.fire,i[s[0]+"With"]=o.fireWith}),r.promise(i),e&&e.call(i,i),i},when:function(e){var t=0,n=l.call(arguments),r=n.length,i=r!==1||e&&v.isFunction(e.promise)?r:0,s=i===1?e:v.Deferred(),o=function(e,t,n){return function(r){t[e]=this,n[e]=arguments.length>1?l.call(arguments):r,n===u?s.notifyWith(t,n):--i||s.resolveWith(t,n)}},u,a,f;if(r>1){u=new Array(r),a=new Array(r),f=new Array(r);for(;t
a",n=p.getElementsByTagName("*"),r=p.getElementsByTagName("a")[0];if(!n||!r||!n.length)return{};s=i.createElement("select"),o=s.appendChild(i.createElement("option")),u=p.getElementsByTagName("input")[0],r.style.cssText="top:1px;float:left;opacity:.5",t={leadingWhitespace:p.firstChild.nodeType===3,tbody:!p.getElementsByTagName("tbody").length,htmlSerialize:!!p.getElementsByTagName("link").length,style:/top/.test(r.getAttribute("style")),hrefNormalized:r.getAttribute("href")==="/a",opacity:/^0.5/.test(r.style.opacity),cssFloat:!!r.style.cssFloat,checkOn:u.value==="on",optSelected:o.selected,getSetAttribute:p.className!=="t",enctype:!!i.createElement("form").enctype,html5Clone:i.createElement("nav").cloneNode(!0).outerHTML!=="<:nav>",boxModel:i.compatMode==="CSS1Compat",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0,boxSizingReliable:!0,pixelPosition:!1},u.checked=!0,t.noCloneChecked=u.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!o.disabled;try{delete p.test}catch(d){t.deleteExpando=!1}!p.addEventListener&&p.attachEvent&&p.fireEvent&&(p.attachEvent("onclick",h=function(){t.noCloneEvent=!1}),p.cloneNode(!0).fireEvent("onclick"),p.detachEvent("onclick",h)),u=i.createElement("input"),u.value="t",u.setAttribute("type","radio"),t.radioValue=u.value==="t",u.setAttribute("checked","checked"),u.setAttribute("name","t"),p.appendChild(u),a=i.createDocumentFragment(),a.appendChild(p.lastChild),t.checkClone=a.cloneNode(!0).cloneNode(!0).lastChild.checked,t.appendChecked=u.checked,a.removeChild(u),a.appendChild(p);if(p.attachEvent)for(l in{submit:!0,change:!0,focusin:!0})f="on"+l,c=f in p,c||(p.setAttribute(f,"return;"),c=typeof p[f]=="function"),t[l+"Bubbles"]=c;return v(function(){var n,r,s,o,u="padding:0;margin:0;border:0;display:block;overflow:hidden;",a=i.getElementsByTagName("body")[0];if(!a)return;n=i.createElement("div"),n.style.cssText="visibility:hidden;border:0;width:0;height:0;position:static;top:0;margin-top:1px",a.insertBefore(n,a.firstChild),r=i.createElement("div"),n.appendChild(r),r.innerHTML="
t
",s=r.getElementsByTagName("td"),s[0].style.cssText="padding:0;margin:0;border:0;display:none",c=s[0].offsetHeight===0,s[0].style.display="",s[1].style.display="none",t.reliableHiddenOffsets=c&&s[0].offsetHeight===0,r.innerHTML="",r.style.cssText="box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;",t.boxSizing=r.offsetWidth===4,t.doesNotIncludeMarginInBodyOffset=a.offsetTop!==1,e.getComputedStyle&&(t.pixelPosition=(e.getComputedStyle(r,null)||{}).top!=="1%",t.boxSizingReliable=(e.getComputedStyle(r,null)||{width:"4px"}).width==="4px",o=i.createElement("div"),o.style.cssText=r.style.cssText=u,o.style.marginRight=o.style.width="0",r.style.width="1px",r.appendChild(o),t.reliableMarginRight=!parseFloat((e.getComputedStyle(o,null)||{}).marginRight)),typeof r.style.zoom!="undefined"&&(r.innerHTML="",r.style.cssText=u+"width:1px;padding:1px;display:inline;zoom:1",t.inlineBlockNeedsLayout=r.offsetWidth===3,r.style.display="block",r.style.overflow="visible",r.innerHTML="
",r.firstChild.style.width="5px",t.shrinkWrapBlocks=r.offsetWidth!==3,n.style.zoom=1),a.removeChild(n),n=r=s=o=null}),a.removeChild(p),n=r=s=o=u=a=p=null,t}();var D=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,P=/([A-Z])/g;v.extend({cache:{},deletedIds:[],uuid:0,expando:"jQuery"+(v.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(e){return e=e.nodeType?v.cache[e[v.expando]]:e[v.expando],!!e&&!B(e)},data:function(e,n,r,i){if(!v.acceptData(e))return;var s,o,u=v.expando,a=typeof n=="string",f=e.nodeType,l=f?v.cache:e,c=f?e[u]:e[u]&&u;if((!c||!l[c]||!i&&!l[c].data)&&a&&r===t)return;c||(f?e[u]=c=v.deletedIds.pop()||v.guid++:c=u),l[c]||(l[c]={},f||(l[c].toJSON=v.noop));if(typeof n=="object"||typeof n=="function")i?l[c]=v.extend(l[c],n):l[c].data=v.extend(l[c].data,n);return s=l[c],i||(s.data||(s.data={}),s=s.data),r!==t&&(s[v.camelCase(n)]=r),a?(o=s[n],o==null&&(o=s[v.camelCase(n)])):o=s,o},removeData:function(e,t,n){if(!v.acceptData(e))return;var r,i,s,o=e.nodeType,u=o?v.cache:e,a=o?e[v.expando]:v.expando;if(!u[a])return;if(t){r=n?u[a]:u[a].data;if(r){v.isArray(t)||(t in r?t=[t]:(t=v.camelCase(t),t in r?t=[t]:t=t.split(" ")));for(i=0,s=t.length;i1,null,!1))},removeData:function(e){return this.each(function(){v.removeData(this,e)})}}),v.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=v._data(e,t),n&&(!r||v.isArray(n)?r=v._data(e,t,v.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=v.queue(e,t),r=n.length,i=n.shift(),s=v._queueHooks(e,t),o=function(){v.dequeue(e,t)};i==="inprogress"&&(i=n.shift(),r--),i&&(t==="fx"&&n.unshift("inprogress"),delete s.stop,i.call(e,o,s)),!r&&s&&s.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return v._data(e,n)||v._data(e,n,{empty:v.Callbacks("once memory").add(function(){v.removeData(e,t+"queue",!0),v.removeData(e,n,!0)})})}}),v.fn.extend({queue:function(e,n){var r=2;return typeof e!="string"&&(n=e,e="fx",r--),arguments.length1)},removeAttr:function(e){return this.each(function(){v.removeAttr(this,e)})},prop:function(e,t){return v.access(this,v.prop,e,t,arguments.length>1)},removeProp:function(e){return e=v.propFix[e]||e,this.each(function(){try{this[e]=t,delete this[e]}catch(n){}})},addClass:function(e){var t,n,r,i,s,o,u;if(v.isFunction(e))return this.each(function(t){v(this).addClass(e.call(this,t,this.className))});if(e&&typeof e=="string"){t=e.split(y);for(n=0,r=this.length;n=0)r=r.replace(" "+n[s]+" "," ");i.className=e?v.trim(r):""}}}return this},toggleClass:function(e,t){var n=typeof e,r=typeof t=="boolean";return v.isFunction(e)?this.each(function(n){v(this).toggleClass(e.call(this,n,this.className,t),t)}):this.each(function(){if(n==="string"){var i,s=0,o=v(this),u=t,a=e.split(y);while(i=a[s++])u=r?u:!o.hasClass(i),o[u?"addClass":"removeClass"](i)}else if(n==="undefined"||n==="boolean")this.className&&v._data(this,"__className__",this.className),this.className=this.className||e===!1?"":v._data(this,"__className__")||""})},hasClass:function(e){var t=" "+e+" ",n=0,r=this.length;for(;n=0)return!0;return!1},val:function(e){var n,r,i,s=this[0];if(!arguments.length){if(s)return n=v.valHooks[s.type]||v.valHooks[s.nodeName.toLowerCase()],n&&"get"in n&&(r=n.get(s,"value"))!==t?r:(r=s.value,typeof r=="string"?r.replace(R,""):r==null?"":r);return}return i=v.isFunction(e),this.each(function(r){var s,o=v(this);if(this.nodeType!==1)return;i?s=e.call(this,r,o.val()):s=e,s==null?s="":typeof s=="number"?s+="":v.isArray(s)&&(s=v.map(s,function(e){return e==null?"":e+""})),n=v.valHooks[this.type]||v.valHooks[this.nodeName.toLowerCase()];if(!n||!("set"in n)||n.set(this,s,"value")===t)this.value=s})}}),v.extend({valHooks:{option:{get:function(e){var t=e.attributes.value;return!t||t.specified?e.value:e.text}},select:{get:function(e){var t,n,r=e.options,i=e.selectedIndex,s=e.type==="select-one"||i<0,o=s?null:[],u=s?i+1:r.length,a=i<0?u:s?i:0;for(;a=0}),n.length||(e.selectedIndex=-1),n}}},attrFn:{},attr:function(e,n,r,i){var s,o,u,a=e.nodeType;if(!e||a===3||a===8||a===2)return;if(i&&v.isFunction(v.fn[n]))return v(e)[n](r);if(typeof e.getAttribute=="undefined")return v.prop(e,n,r);u=a!==1||!v.isXMLDoc(e),u&&(n=n.toLowerCase(),o=v.attrHooks[n]||(X.test(n)?F:j));if(r!==t){if(r===null){v.removeAttr(e,n);return}return o&&"set"in o&&u&&(s=o.set(e,r,n))!==t?s:(e.setAttribute(n,r+""),r)}return o&&"get"in o&&u&&(s=o.get(e,n))!==null?s:(s=e.getAttribute(n),s===null?t:s)},removeAttr:function(e,t){var n,r,i,s,o=0;if(t&&e.nodeType===1){r=t.split(y);for(;o=0}})});var $=/^(?:textarea|input|select)$/i,J=/^([^\.]*|)(?:\.(.+)|)$/,K=/(?:^|\s)hover(\.\S+|)\b/,Q=/^key/,G=/^(?:mouse|contextmenu)|click/,Y=/^(?:focusinfocus|focusoutblur)$/,Z=function(e){return v.event.special.hover?e:e.replace(K,"mouseenter$1 mouseleave$1")};v.event={add:function(e,n,r,i,s){var o,u,a,f,l,c,h,p,d,m,g;if(e.nodeType===3||e.nodeType===8||!n||!r||!(o=v._data(e)))return;r.handler&&(d=r,r=d.handler,s=d.selector),r.guid||(r.guid=v.guid++),a=o.events,a||(o.events=a={}),u=o.handle,u||(o.handle=u=function(e){return typeof v=="undefined"||!!e&&v.event.triggered===e.type?t:v.event.dispatch.apply(u.elem,arguments)},u.elem=e),n=v.trim(Z(n)).split(" ");for(f=0;f=0&&(y=y.slice(0,-1),a=!0),y.indexOf(".")>=0&&(b=y.split("."),y=b.shift(),b.sort());if((!s||v.event.customEvent[y])&&!v.event.global[y])return;n=typeof n=="object"?n[v.expando]?n:new v.Event(y,n):new v.Event(y),n.type=y,n.isTrigger=!0,n.exclusive=a,n.namespace=b.join("."),n.namespace_re=n.namespace?new RegExp("(^|\\.)"+b.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,h=y.indexOf(":")<0?"on"+y:"";if(!s){u=v.cache;for(f in u)u[f].events&&u[f].events[y]&&v.event.trigger(n,r,u[f].handle.elem,!0);return}n.result=t,n.target||(n.target=s),r=r!=null?v.makeArray(r):[],r.unshift(n),p=v.event.special[y]||{};if(p.trigger&&p.trigger.apply(s,r)===!1)return;m=[[s,p.bindType||y]];if(!o&&!p.noBubble&&!v.isWindow(s)){g=p.delegateType||y,l=Y.test(g+y)?s:s.parentNode;for(c=s;l;l=l.parentNode)m.push([l,g]),c=l;c===(s.ownerDocument||i)&&m.push([c.defaultView||c.parentWindow||e,g])}for(f=0;f=0:v.find(h,this,null,[s]).length),u[h]&&f.push(c);f.length&&w.push({elem:s,matches:f})}d.length>m&&w.push({elem:this,matches:d.slice(m)});for(r=0;r0?this.on(t,null,e,n):this.trigger(t)},Q.test(t)&&(v.event.fixHooks[t]=v.event.keyHooks),G.test(t)&&(v.event.fixHooks[t]=v.event.mouseHooks)}),function(e,t){function nt(e,t,n,r){n=n||[],t=t||g;var i,s,a,f,l=t.nodeType;if(!e||typeof e!="string")return n;if(l!==1&&l!==9)return[];a=o(t);if(!a&&!r)if(i=R.exec(e))if(f=i[1]){if(l===9){s=t.getElementById(f);if(!s||!s.parentNode)return n;if(s.id===f)return n.push(s),n}else if(t.ownerDocument&&(s=t.ownerDocument.getElementById(f))&&u(t,s)&&s.id===f)return n.push(s),n}else{if(i[2])return S.apply(n,x.call(t.getElementsByTagName(e),0)),n;if((f=i[3])&&Z&&t.getElementsByClassName)return S.apply(n,x.call(t.getElementsByClassName(f),0)),n}return vt(e.replace(j,"$1"),t,n,r,a)}function rt(e){return function(t){var n=t.nodeName.toLowerCase();return n==="input"&&t.type===e}}function it(e){return function(t){var n=t.nodeName.toLowerCase();return(n==="input"||n==="button")&&t.type===e}}function st(e){return N(function(t){return t=+t,N(function(n,r){var i,s=e([],n.length,t),o=s.length;while(o--)n[i=s[o]]&&(n[i]=!(r[i]=n[i]))})})}function ot(e,t,n){if(e===t)return n;var r=e.nextSibling;while(r){if(r===t)return-1;r=r.nextSibling}return 1}function ut(e,t){var n,r,s,o,u,a,f,l=L[d][e+" "];if(l)return t?0:l.slice(0);u=e,a=[],f=i.preFilter;while(u){if(!n||(r=F.exec(u)))r&&(u=u.slice(r[0].length)||u),a.push(s=[]);n=!1;if(r=I.exec(u))s.push(n=new m(r.shift())),u=u.slice(n.length),n.type=r[0].replace(j," ");for(o in i.filter)(r=J[o].exec(u))&&(!f[o]||(r=f[o](r)))&&(s.push(n=new m(r.shift())),u=u.slice(n.length),n.type=o,n.matches=r);if(!n)break}return t?u.length:u?nt.error(e):L(e,a).slice(0)}function at(e,t,r){var i=t.dir,s=r&&t.dir==="parentNode",o=w++;return t.first?function(t,n,r){while(t=t[i])if(s||t.nodeType===1)return e(t,n,r)}:function(t,r,u){if(!u){var a,f=b+" "+o+" ",l=f+n;while(t=t[i])if(s||t.nodeType===1){if((a=t[d])===l)return t.sizset;if(typeof a=="string"&&a.indexOf(f)===0){if(t.sizset)return t}else{t[d]=l;if(e(t,r,u))return t.sizset=!0,t;t.sizset=!1}}}else while(t=t[i])if(s||t.nodeType===1)if(e(t,r,u))return t}}function ft(e){return e.length>1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function lt(e,t,n,r,i){var s,o=[],u=0,a=e.length,f=t!=null;for(;u-1&&(s[f]=!(o[f]=c))}}else g=lt(g===o?g.splice(d,g.length):g),i?i(null,o,g,a):S.apply(o,g)})}function ht(e){var t,n,r,s=e.length,o=i.relative[e[0].type],u=o||i.relative[" "],a=o?1:0,f=at(function(e){return e===t},u,!0),l=at(function(e){return T.call(t,e)>-1},u,!0),h=[function(e,n,r){return!o&&(r||n!==c)||((t=n).nodeType?f(e,n,r):l(e,n,r))}];for(;a1&&ft(h),a>1&&e.slice(0,a-1).join("").replace(j,"$1"),n,a0,s=e.length>0,o=function(u,a,f,l,h){var p,d,v,m=[],y=0,w="0",x=u&&[],T=h!=null,N=c,C=u||s&&i.find.TAG("*",h&&a.parentNode||a),k=b+=N==null?1:Math.E;T&&(c=a!==g&&a,n=o.el);for(;(p=C[w])!=null;w++){if(s&&p){for(d=0;v=e[d];d++)if(v(p,a,f)){l.push(p);break}T&&(b=k,n=++o.el)}r&&((p=!v&&p)&&y--,u&&x.push(p))}y+=w;if(r&&w!==y){for(d=0;v=t[d];d++)v(x,m,a,f);if(u){if(y>0)while(w--)!x[w]&&!m[w]&&(m[w]=E.call(l));m=lt(m)}S.apply(l,m),T&&!u&&m.length>0&&y+t.length>1&&nt.uniqueSort(l)}return T&&(b=k,c=N),x};return o.el=0,r?N(o):o}function dt(e,t,n){var r=0,i=t.length;for(;r2&&(f=u[0]).type==="ID"&&t.nodeType===9&&!s&&i.relative[u[1].type]){t=i.find.ID(f.matches[0].replace($,""),t,s)[0];if(!t)return n;e=e.slice(u.shift().length)}for(o=J.POS.test(e)?-1:u.length-1;o>=0;o--){f=u[o];if(i.relative[l=f.type])break;if(c=i.find[l])if(r=c(f.matches[0].replace($,""),z.test(u[0].type)&&t.parentNode||t,s)){u.splice(o,1),e=r.length&&u.join("");if(!e)return S.apply(n,x.call(r,0)),n;break}}}return a(e,h)(r,t,s,n,z.test(e)),n}function mt(){}var n,r,i,s,o,u,a,f,l,c,h=!0,p="undefined",d=("sizcache"+Math.random()).replace(".",""),m=String,g=e.document,y=g.documentElement,b=0,w=0,E=[].pop,S=[].push,x=[].slice,T=[].indexOf||function(e){var t=0,n=this.length;for(;ti.cacheLength&&delete e[t.shift()],e[n+" "]=r},e)},k=C(),L=C(),A=C(),O="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[-\\w]|[^\\x00-\\xa0])+",_=M.replace("w","w#"),D="([*^$|!~]?=)",P="\\["+O+"*("+M+")"+O+"*(?:"+D+O+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+_+")|)|)"+O+"*\\]",H=":("+M+")(?:\\((?:(['\"])((?:\\\\.|[^\\\\])*?)\\2|([^()[\\]]*|(?:(?:"+P+")|[^:]|\\\\.)*|.*))\\)|)",B=":(even|odd|eq|gt|lt|nth|first|last)(?:\\("+O+"*((?:-\\d)?\\d*)"+O+"*\\)|)(?=[^-]|$)",j=new RegExp("^"+O+"+|((?:^|[^\\\\])(?:\\\\.)*)"+O+"+$","g"),F=new RegExp("^"+O+"*,"+O+"*"),I=new RegExp("^"+O+"*([\\x20\\t\\r\\n\\f>+~])"+O+"*"),q=new RegExp(H),R=/^(?:#([\w\-]+)|(\w+)|\.([\w\-]+))$/,U=/^:not/,z=/[\x20\t\r\n\f]*[+~]/,W=/:not\($/,X=/h\d/i,V=/input|select|textarea|button/i,$=/\\(?!\\)/g,J={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),NAME:new RegExp("^\\[name=['\"]?("+M+")['\"]?\\]"),TAG:new RegExp("^("+M.replace("w","w*")+")"),ATTR:new RegExp("^"+P),PSEUDO:new RegExp("^"+H),POS:new RegExp(B,"i"),CHILD:new RegExp("^:(only|nth|first|last)-child(?:\\("+O+"*(even|odd|(([+-]|)(\\d*)n|)"+O+"*(?:([+-]|)"+O+"*(\\d+)|))"+O+"*\\)|)","i"),needsContext:new RegExp("^"+O+"*[>+~]|"+B,"i")},K=function(e){var t=g.createElement("div");try{return e(t)}catch(n){return!1}finally{t=null}},Q=K(function(e){return e.appendChild(g.createComment("")),!e.getElementsByTagName("*").length}),G=K(function(e){return e.innerHTML="",e.firstChild&&typeof e.firstChild.getAttribute!==p&&e.firstChild.getAttribute("href")==="#"}),Y=K(function(e){e.innerHTML="";var t=typeof e.lastChild.getAttribute("multiple");return t!=="boolean"&&t!=="string"}),Z=K(function(e){return e.innerHTML="",!e.getElementsByClassName||!e.getElementsByClassName("e").length?!1:(e.lastChild.className="e",e.getElementsByClassName("e").length===2)}),et=K(function(e){e.id=d+0,e.innerHTML="
",y.insertBefore(e,y.firstChild);var t=g.getElementsByName&&g.getElementsByName(d).length===2+g.getElementsByName(d+0).length;return r=!g.getElementById(d),y.removeChild(e),t});try{x.call(y.childNodes,0)[0].nodeType}catch(tt){x=function(e){var t,n=[];for(;t=this[e];e++)n.push(t);return n}}nt.matches=function(e,t){return nt(e,null,null,t)},nt.matchesSelector=function(e,t){return nt(t,null,null,[e]).length>0},s=nt.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(i===1||i===9||i===11){if(typeof e.textContent=="string")return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=s(e)}else if(i===3||i===4)return e.nodeValue}else for(;t=e[r];r++)n+=s(t);return n},o=nt.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return t?t.nodeName!=="HTML":!1},u=nt.contains=y.contains?function(e,t){var n=e.nodeType===9?e.documentElement:e,r=t&&t.parentNode;return e===r||!!(r&&r.nodeType===1&&n.contains&&n.contains(r))}:y.compareDocumentPosition?function(e,t){return t&&!!(e.compareDocumentPosition(t)&16)}:function(e,t){while(t=t.parentNode)if(t===e)return!0;return!1},nt.attr=function(e,t){var n,r=o(e);return r||(t=t.toLowerCase()),(n=i.attrHandle[t])?n(e):r||Y?e.getAttribute(t):(n=e.getAttributeNode(t),n?typeof e[t]=="boolean"?e[t]?t:null:n.specified?n.value:null:null)},i=nt.selectors={cacheLength:50,createPseudo:N,match:J,attrHandle:G?{}:{href:function(e){return e.getAttribute("href",2)},type:function(e){return e.getAttribute("type")}},find:{ID:r?function(e,t,n){if(typeof t.getElementById!==p&&!n){var r=t.getElementById(e);return r&&r.parentNode?[r]:[]}}:function(e,n,r){if(typeof n.getElementById!==p&&!r){var i=n.getElementById(e);return i?i.id===e||typeof i.getAttributeNode!==p&&i.getAttributeNode("id").value===e?[i]:t:[]}},TAG:Q?function(e,t){if(typeof t.getElementsByTagName!==p)return t.getElementsByTagName(e)}:function(e,t){var n=t.getElementsByTagName(e);if(e==="*"){var r,i=[],s=0;for(;r=n[s];s++)r.nodeType===1&&i.push(r);return i}return n},NAME:et&&function(e,t){if(typeof t.getElementsByName!==p)return t.getElementsByName(name)},CLASS:Z&&function(e,t,n){if(typeof t.getElementsByClassName!==p&&!n)return t.getElementsByClassName(e)}},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace($,""),e[3]=(e[4]||e[5]||"").replace($,""),e[2]==="~="&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),e[1]==="nth"?(e[2]||nt.error(e[0]),e[3]=+(e[3]?e[4]+(e[5]||1):2*(e[2]==="even"||e[2]==="odd")),e[4]=+(e[6]+e[7]||e[2]==="odd")):e[2]&&nt.error(e[0]),e},PSEUDO:function(e){var t,n;if(J.CHILD.test(e[0]))return null;if(e[3])e[2]=e[3];else if(t=e[4])q.test(t)&&(n=ut(t,!0))&&(n=t.indexOf(")",t.length-n)-t.length)&&(t=t.slice(0,n),e[0]=e[0].slice(0,n)),e[2]=t;return e.slice(0,3)}},filter:{ID:r?function(e){return e=e.replace($,""),function(t){return t.getAttribute("id")===e}}:function(e){return e=e.replace($,""),function(t){var n=typeof t.getAttributeNode!==p&&t.getAttributeNode("id");return n&&n.value===e}},TAG:function(e){return e==="*"?function(){return!0}:(e=e.replace($,"").toLowerCase(),function(t){return t.nodeName&&t.nodeName.toLowerCase()===e})},CLASS:function(e){var t=k[d][e+" "];return t||(t=new RegExp("(^|"+O+")"+e+"("+O+"|$)"))&&k(e,function(e){return t.test(e.className||typeof e.getAttribute!==p&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r,i){var s=nt.attr(r,e);return s==null?t==="!=":t?(s+="",t==="="?s===n:t==="!="?s!==n:t==="^="?n&&s.indexOf(n)===0:t==="*="?n&&s.indexOf(n)>-1:t==="$="?n&&s.substr(s.length-n.length)===n:t==="~="?(" "+s+" ").indexOf(n)>-1:t==="|="?s===n||s.substr(0,n.length+1)===n+"-":!1):!0}},CHILD:function(e,t,n,r){return e==="nth"?function(e){var t,i,s=e.parentNode;if(n===1&&r===0)return!0;if(s){i=0;for(t=s.firstChild;t;t=t.nextSibling)if(t.nodeType===1){i++;if(e===t)break}}return i-=r,i===n||i%n===0&&i/n>=0}:function(t){var n=t;switch(e){case"only":case"first":while(n=n.previousSibling)if(n.nodeType===1)return!1;if(e==="first")return!0;n=t;case"last":while(n=n.nextSibling)if(n.nodeType===1)return!1;return!0}}},PSEUDO:function(e,t){var n,r=i.pseudos[e]||i.setFilters[e.toLowerCase()]||nt.error("unsupported pseudo: "+e);return r[d]?r(t):r.length>1?(n=[e,e,"",t],i.setFilters.hasOwnProperty(e.toLowerCase())?N(function(e,n){var i,s=r(e,t),o=s.length;while(o--)i=T.call(e,s[o]),e[i]=!(n[i]=s[o])}):function(e){return r(e,0,n)}):r}},pseudos:{not:N(function(e){var t=[],n=[],r=a(e.replace(j,"$1"));return r[d]?N(function(e,t,n,i){var s,o=r(e,null,i,[]),u=e.length;while(u--)if(s=o[u])e[u]=!(t[u]=s)}):function(e,i,s){return t[0]=e,r(t,null,s,n),!n.pop()}}),has:N(function(e){return function(t){return nt(e,t).length>0}}),contains:N(function(e){return function(t){return(t.textContent||t.innerText||s(t)).indexOf(e)>-1}}),enabled:function(e){return e.disabled===!1},disabled:function(e){return e.disabled===!0},checked:function(e){var t=e.nodeName.toLowerCase();return t==="input"&&!!e.checked||t==="option"&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,e.selected===!0},parent:function(e){return!i.pseudos.empty(e)},empty:function(e){var t;e=e.firstChild;while(e){if(e.nodeName>"@"||(t=e.nodeType)===3||t===4)return!1;e=e.nextSibling}return!0},header:function(e){return X.test(e.nodeName)},text:function(e){var t,n;return e.nodeName.toLowerCase()==="input"&&(t=e.type)==="text"&&((n=e.getAttribute("type"))==null||n.toLowerCase()===t)},radio:rt("radio"),checkbox:rt("checkbox"),file:rt("file"),password:rt("password"),image:rt("image"),submit:it("submit"),reset:it("reset"),button:function(e){var t=e.nodeName.toLowerCase();return t==="input"&&e.type==="button"||t==="button"},input:function(e){return V.test(e.nodeName)},focus:function(e){var t=e.ownerDocument;return e===t.activeElement&&(!t.hasFocus||t.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},active:function(e){return e===e.ownerDocument.activeElement},first:st(function(){return[0]}),last:st(function(e,t){return[t-1]}),eq:st(function(e,t,n){return[n<0?n+t:n]}),even:st(function(e,t){for(var n=0;n=0;)e.push(r);return e}),gt:st(function(e,t,n){for(var r=n<0?n+t:n;++r",e.querySelectorAll("[selected]").length||i.push("\\["+O+"*(?:checked|disabled|ismap|multiple|readonly|selected|value)"),e.querySelectorAll(":checked").length||i.push(":checked")}),K(function(e){e.innerHTML="

",e.querySelectorAll("[test^='']").length&&i.push("[*^$]="+O+"*(?:\"\"|'')"),e.innerHTML="",e.querySelectorAll(":enabled").length||i.push(":enabled",":disabled")}),i=new RegExp(i.join("|")),vt=function(e,r,s,o,u){if(!o&&!u&&!i.test(e)){var a,f,l=!0,c=d,h=r,p=r.nodeType===9&&e;if(r.nodeType===1&&r.nodeName.toLowerCase()!=="object"){a=ut(e),(l=r.getAttribute("id"))?c=l.replace(n,"\\$&"):r.setAttribute("id",c),c="[id='"+c+"'] ",f=a.length;while(f--)a[f]=c+a[f].join("");h=z.test(e)&&r.parentNode||r,p=a.join(",")}if(p)try{return S.apply(s,x.call(h.querySelectorAll(p),0)),s}catch(v){}finally{l||r.removeAttribute("id")}}return t(e,r,s,o,u)},u&&(K(function(t){e=u.call(t,"div");try{u.call(t,"[test!='']:sizzle"),s.push("!=",H)}catch(n){}}),s=new RegExp(s.join("|")),nt.matchesSelector=function(t,n){n=n.replace(r,"='$1']");if(!o(t)&&!s.test(n)&&!i.test(n))try{var a=u.call(t,n);if(a||e||t.document&&t.document.nodeType!==11)return a}catch(f){}return nt(n,null,null,[t]).length>0})}(),i.pseudos.nth=i.pseudos.eq,i.filters=mt.prototype=i.pseudos,i.setFilters=new mt,nt.attr=v.attr,v.find=nt,v.expr=nt.selectors,v.expr[":"]=v.expr.pseudos,v.unique=nt.uniqueSort,v.text=nt.getText,v.isXMLDoc=nt.isXML,v.contains=nt.contains}(e);var nt=/Until$/,rt=/^(?:parents|prev(?:Until|All))/,it=/^.[^:#\[\.,]*$/,st=v.expr.match.needsContext,ot={children:!0,contents:!0,next:!0,prev:!0};v.fn.extend({find:function(e){var t,n,r,i,s,o,u=this;if(typeof e!="string")return v(e).filter(function(){for(t=0,n=u.length;t0)for(i=r;i=0:v.filter(e,this).length>0:this.filter(e).length>0)},closest:function(e,t){var n,r=0,i=this.length,s=[],o=st.test(e)||typeof e!="string"?v(e,t||this.context):0;for(;r-1:v.find.matchesSelector(n,e)){s.push(n);break}n=n.parentNode}}return s=s.length>1?v.unique(s):s,this.pushStack(s,"closest",e)},index:function(e){return e?typeof e=="string"?v.inArray(this[0],v(e)):v.inArray(e.jquery?e[0]:e,this):this[0]&&this[0].parentNode?this.prevAll().length:-1},add:function(e,t){var n=typeof e=="string"?v(e,t):v.makeArray(e&&e.nodeType?[e]:e),r=v.merge(this.get(),n);return this.pushStack(ut(n[0])||ut(r[0])?r:v.unique(r))},addBack:function(e){return this.add(e==null?this.prevObject:this.prevObject.filter(e))}}),v.fn.andSelf=v.fn.addBack,v.each({parent:function(e){var t=e.parentNode;return t&&t.nodeType!==11?t:null},parents:function(e){return v.dir(e,"parentNode")},parentsUntil:function(e,t,n){return v.dir(e,"parentNode",n)},next:function(e){return at(e,"nextSibling")},prev:function(e){return at(e,"previousSibling")},nextAll:function(e){return v.dir(e,"nextSibling")},prevAll:function(e){return v.dir(e,"previousSibling")},nextUntil:function(e,t,n){return v.dir(e,"nextSibling",n)},prevUntil:function(e,t,n){return v.dir(e,"previousSibling",n)},siblings:function(e){return v.sibling((e.parentNode||{}).firstChild,e)},children:function(e){return v.sibling(e.firstChild)},contents:function(e){return v.nodeName(e,"iframe")?e.contentDocument||e.contentWindow.document:v.merge([],e.childNodes)}},function(e,t){v.fn[e]=function(n,r){var i=v.map(this,t,n);return nt.test(e)||(r=n),r&&typeof r=="string"&&(i=v.filter(r,i)),i=this.length>1&&!ot[e]?v.unique(i):i,this.length>1&&rt.test(e)&&(i=i.reverse()),this.pushStack(i,e,l.call(arguments).join(","))}}),v.extend({filter:function(e,t,n){return n&&(e=":not("+e+")"),t.length===1?v.find.matchesSelector(t[0],e)?[t[0]]:[]:v.find.matches(e,t)},dir:function(e,n,r){var i=[],s=e[n];while(s&&s.nodeType!==9&&(r===t||s.nodeType!==1||!v(s).is(r)))s.nodeType===1&&i.push(s),s=s[n];return i},sibling:function(e,t){var n=[];for(;e;e=e.nextSibling)e.nodeType===1&&e!==t&&n.push(e);return n}});var ct="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",ht=/ jQuery\d+="(?:null|\d+)"/g,pt=/^\s+/,dt=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,vt=/<([\w:]+)/,mt=/]","i"),Et=/^(?:checkbox|radio)$/,St=/checked\s*(?:[^=]|=\s*.checked.)/i,xt=/\/(java|ecma)script/i,Tt=/^\s*\s*$/g,Nt={option:[1,""],legend:[1,"
","
"],thead:[1,"","
"],tr:[2,"","
"],td:[3,"","
"],col:[2,"","
"],area:[1,"",""],_default:[0,"",""]},Ct=lt(i),kt=Ct.appendChild(i.createElement("div"));Nt.optgroup=Nt.option,Nt.tbody=Nt.tfoot=Nt.colgroup=Nt.caption=Nt.thead,Nt.th=Nt.td,v.support.htmlSerialize||(Nt._default=[1,"X
","
"]),v.fn.extend({text:function(e){return v.access(this,function(e){return e===t?v.text(this):this.empty().append((this[0]&&this[0].ownerDocument||i).createTextNode(e))},null,e,arguments.length)},wrapAll:function(e){if(v.isFunction(e))return this.each(function(t){v(this).wrapAll(e.call(this,t))});if(this[0]){var t=v(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstChild&&e.firstChild.nodeType===1)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return v.isFunction(e)?this.each(function(t){v(this).wrapInner(e.call(this,t))}):this.each(function(){var t=v(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=v.isFunction(e);return this.each(function(n){v(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){v.nodeName(this,"body")||v(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(e){(this.nodeType===1||this.nodeType===11)&&this.appendChild(e)})},prepend:function(){return this.domManip(arguments,!0,function(e){(this.nodeType===1||this.nodeType===11)&&this.insertBefore(e,this.firstChild)})},before:function(){if(!ut(this[0]))return this.domManip(arguments,!1,function(e){this.parentNode.insertBefore(e,this)});if(arguments.length){var e=v.clean(arguments);return this.pushStack(v.merge(e,this),"before",this.selector)}},after:function(){if(!ut(this[0]))return this.domManip(arguments,!1,function(e){this.parentNode.insertBefore(e,this.nextSibling)});if(arguments.length){var e=v.clean(arguments);return this.pushStack(v.merge(this,e),"after",this.selector)}},remove:function(e,t){var n,r=0;for(;(n=this[r])!=null;r++)if(!e||v.filter(e,[n]).length)!t&&n.nodeType===1&&(v.cleanData(n.getElementsByTagName("*")),v.cleanData([n])),n.parentNode&&n.parentNode.removeChild(n);return this},empty:function(){var e,t=0;for(;(e=this[t])!=null;t++){e.nodeType===1&&v.cleanData(e.getElementsByTagName("*"));while(e.firstChild)e.removeChild(e.firstChild)}return this},clone:function(e,t){return e=e==null?!1:e,t=t==null?e:t,this.map(function(){return v.clone(this,e,t)})},html:function(e){return v.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return n.nodeType===1?n.innerHTML.replace(ht,""):t;if(typeof e=="string"&&!yt.test(e)&&(v.support.htmlSerialize||!wt.test(e))&&(v.support.leadingWhitespace||!pt.test(e))&&!Nt[(vt.exec(e)||["",""])[1].toLowerCase()]){e=e.replace(dt,"<$1>");try{for(;r1&&typeof f=="string"&&St.test(f))return this.each(function(){v(this).domManip(e,n,r)});if(v.isFunction(f))return this.each(function(i){var s=v(this);e[0]=f.call(this,i,n?s.html():t),s.domManip(e,n,r)});if(this[0]){i=v.buildFragment(e,this,l),o=i.fragment,s=o.firstChild,o.childNodes.length===1&&(o=s);if(s){n=n&&v.nodeName(s,"tr");for(u=i.cacheable||c-1;a0?this.clone(!0):this).get(),v(o[i])[t](r),s=s.concat(r);return this.pushStack(s,e,o.selector)}}),v.extend({clone:function(e,t,n){var r,i,s,o;v.support.html5Clone||v.isXMLDoc(e)||!wt.test("<"+e.nodeName+">")?o=e.cloneNode(!0):(kt.innerHTML=e.outerHTML,kt.removeChild(o=kt.firstChild));if((!v.support.noCloneEvent||!v.support.noCloneChecked)&&(e.nodeType===1||e.nodeType===11)&&!v.isXMLDoc(e)){Ot(e,o),r=Mt(e),i=Mt(o);for(s=0;r[s];++s)i[s]&&Ot(r[s],i[s])}if(t){At(e,o);if(n){r=Mt(e),i=Mt(o);for(s=0;r[s];++s)At(r[s],i[s])}}return r=i=null,o},clean:function(e,t,n,r){var s,o,u,a,f,l,c,h,p,d,m,g,y=t===i&&Ct,b=[];if(!t||typeof t.createDocumentFragment=="undefined")t=i;for(s=0;(u=e[s])!=null;s++){typeof u=="number"&&(u+="");if(!u)continue;if(typeof u=="string")if(!gt.test(u))u=t.createTextNode(u);else{y=y||lt(t),c=t.createElement("div"),y.appendChild(c),u=u.replace(dt,"<$1>"),a=(vt.exec(u)||["",""])[1].toLowerCase(),f=Nt[a]||Nt._default,l=f[0],c.innerHTML=f[1]+u+f[2];while(l--)c=c.lastChild;if(!v.support.tbody){h=mt.test(u),p=a==="table"&&!h?c.firstChild&&c.firstChild.childNodes:f[1]===""&&!h?c.childNodes:[];for(o=p.length-1;o>=0;--o)v.nodeName(p[o],"tbody")&&!p[o].childNodes.length&&p[o].parentNode.removeChild(p[o])}!v.support.leadingWhitespace&&pt.test(u)&&c.insertBefore(t.createTextNode(pt.exec(u)[0]),c.firstChild),u=c.childNodes,c.parentNode.removeChild(c)}u.nodeType?b.push(u):v.merge(b,u)}c&&(u=c=y=null);if(!v.support.appendChecked)for(s=0;(u=b[s])!=null;s++)v.nodeName(u,"input")?_t(u):typeof u.getElementsByTagName!="undefined"&&v.grep(u.getElementsByTagName("input"),_t);if(n){m=function(e){if(!e.type||xt.test(e.type))return r?r.push(e.parentNode?e.parentNode.removeChild(e):e):n.appendChild(e)};for(s=0;(u=b[s])!=null;s++)if(!v.nodeName(u,"script")||!m(u))n.appendChild(u),typeof u.getElementsByTagName!="undefined"&&(g=v.grep(v.merge([],u.getElementsByTagName("script")),m),b.splice.apply(b,[s+1,0].concat(g)),s+=g.length)}return b},cleanData:function(e,t){var n,r,i,s,o=0,u=v.expando,a=v.cache,f=v.support.deleteExpando,l=v.event.special;for(;(i=e[o])!=null;o++)if(t||v.acceptData(i)){r=i[u],n=r&&a[r];if(n){if(n.events)for(s in n.events)l[s]?v.event.remove(i,s):v.removeEvent(i,s,n.handle);a[r]&&(delete a[r],f?delete i[u]:i.removeAttribute?i.removeAttribute(u):i[u]=null,v.deletedIds.push(r))}}}}),function(){var e,t;v.uaMatch=function(e){e=e.toLowerCase();var t=/(chrome)[ \/]([\w.]+)/.exec(e)||/(webkit)[ \/]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||e.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[];return{browser:t[1]||"",version:t[2]||"0"}},e=v.uaMatch(o.userAgent),t={},e.browser&&(t[e.browser]=!0,t.version=e.version),t.chrome?t.webkit=!0:t.webkit&&(t.safari=!0),v.browser=t,v.sub=function(){function e(t,n){return new e.fn.init(t,n)}v.extend(!0,e,this),e.superclass=this,e.fn=e.prototype=this(),e.fn.constructor=e,e.sub=this.sub,e.fn.init=function(r,i){return i&&i instanceof v&&!(i instanceof e)&&(i=e(i)),v.fn.init.call(this,r,i,t)},e.fn.init.prototype=e.fn;var t=e(i);return e}}();var Dt,Pt,Ht,Bt=/alpha\([^)]*\)/i,jt=/opacity=([^)]*)/,Ft=/^(top|right|bottom|left)$/,It=/^(none|table(?!-c[ea]).+)/,qt=/^margin/,Rt=new RegExp("^("+m+")(.*)$","i"),Ut=new RegExp("^("+m+")(?!px)[a-z%]+$","i"),zt=new RegExp("^([-+])=("+m+")","i"),Wt={BODY:"block"},Xt={position:"absolute",visibility:"hidden",display:"block"},Vt={letterSpacing:0,fontWeight:400},$t=["Top","Right","Bottom","Left"],Jt=["Webkit","O","Moz","ms"],Kt=v.fn.toggle;v.fn.extend({css:function(e,n){return v.access(this,function(e,n,r){return r!==t?v.style(e,n,r):v.css(e,n)},e,n,arguments.length>1)},show:function(){return Yt(this,!0)},hide:function(){return Yt(this)},toggle:function(e,t){var n=typeof e=="boolean";return v.isFunction(e)&&v.isFunction(t)?Kt.apply(this,arguments):this.each(function(){(n?e:Gt(this))?v(this).show():v(this).hide()})}}),v.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Dt(e,"opacity");return n===""?"1":n}}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":v.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(!e||e.nodeType===3||e.nodeType===8||!e.style)return;var s,o,u,a=v.camelCase(n),f=e.style;n=v.cssProps[a]||(v.cssProps[a]=Qt(f,a)),u=v.cssHooks[n]||v.cssHooks[a];if(r===t)return u&&"get"in u&&(s=u.get(e,!1,i))!==t?s:f[n];o=typeof r,o==="string"&&(s=zt.exec(r))&&(r=(s[1]+1)*s[2]+parseFloat(v.css(e,n)),o="number");if(r==null||o==="number"&&isNaN(r))return;o==="number"&&!v.cssNumber[a]&&(r+="px");if(!u||!("set"in u)||(r=u.set(e,r,i))!==t)try{f[n]=r}catch(l){}},css:function(e,n,r,i){var s,o,u,a=v.camelCase(n);return n=v.cssProps[a]||(v.cssProps[a]=Qt(e.style,a)),u=v.cssHooks[n]||v.cssHooks[a],u&&"get"in u&&(s=u.get(e,!0,i)),s===t&&(s=Dt(e,n)),s==="normal"&&n in Vt&&(s=Vt[n]),r||i!==t?(o=parseFloat(s),r||v.isNumeric(o)?o||0:s):s},swap:function(e,t,n){var r,i,s={};for(i in t)s[i]=e.style[i],e.style[i]=t[i];r=n.call(e);for(i in t)e.style[i]=s[i];return r}}),e.getComputedStyle?Dt=function(t,n){var r,i,s,o,u=e.getComputedStyle(t,null),a=t.style;return u&&(r=u.getPropertyValue(n)||u[n],r===""&&!v.contains(t.ownerDocument,t)&&(r=v.style(t,n)),Ut.test(r)&&qt.test(n)&&(i=a.width,s=a.minWidth,o=a.maxWidth,a.minWidth=a.maxWidth=a.width=r,r=u.width,a.width=i,a.minWidth=s,a.maxWidth=o)),r}:i.documentElement.currentStyle&&(Dt=function(e,t){var n,r,i=e.currentStyle&&e.currentStyle[t],s=e.style;return i==null&&s&&s[t]&&(i=s[t]),Ut.test(i)&&!Ft.test(t)&&(n=s.left,r=e.runtimeStyle&&e.runtimeStyle.left,r&&(e.runtimeStyle.left=e.currentStyle.left),s.left=t==="fontSize"?"1em":i,i=s.pixelLeft+"px",s.left=n,r&&(e.runtimeStyle.left=r)),i===""?"auto":i}),v.each(["height","width"],function(e,t){v.cssHooks[t]={get:function(e,n,r){if(n)return e.offsetWidth===0&&It.test(Dt(e,"display"))?v.swap(e,Xt,function(){return tn(e,t,r)}):tn(e,t,r)},set:function(e,n,r){return Zt(e,n,r?en(e,t,r,v.support.boxSizing&&v.css(e,"boxSizing")==="border-box"):0)}}}),v.support.opacity||(v.cssHooks.opacity={get:function(e,t){return jt.test((t&&e.currentStyle?e.currentStyle.filter:e.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":t?"1":""},set:function(e,t){var n=e.style,r=e.currentStyle,i=v.isNumeric(t)?"alpha(opacity="+t*100+")":"",s=r&&r.filter||n.filter||"";n.zoom=1;if(t>=1&&v.trim(s.replace(Bt,""))===""&&n.removeAttribute){n.removeAttribute("filter");if(r&&!r.filter)return}n.filter=Bt.test(s)?s.replace(Bt,i):s+" "+i}}),v(function(){v.support.reliableMarginRight||(v.cssHooks.marginRight={get:function(e,t){return v.swap(e,{display:"inline-block"},function(){if(t)return Dt(e,"marginRight")})}}),!v.support.pixelPosition&&v.fn.position&&v.each(["top","left"],function(e,t){v.cssHooks[t]={get:function(e,n){if(n){var r=Dt(e,t);return Ut.test(r)?v(e).position()[t]+"px":r}}}})}),v.expr&&v.expr.filters&&(v.expr.filters.hidden=function(e){return e.offsetWidth===0&&e.offsetHeight===0||!v.support.reliableHiddenOffsets&&(e.style&&e.style.display||Dt(e,"display"))==="none"},v.expr.filters.visible=function(e){return!v.expr.filters.hidden(e)}),v.each({margin:"",padding:"",border:"Width"},function(e,t){v.cssHooks[e+t]={expand:function(n){var r,i=typeof n=="string"?n.split(" "):[n],s={};for(r=0;r<4;r++)s[e+$t[r]+t]=i[r]||i[r-2]||i[0];return s}},qt.test(e)||(v.cssHooks[e+t].set=Zt)});var rn=/%20/g,sn=/\[\]$/,on=/\r?\n/g,un=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,an=/^(?:select|textarea)/i;v.fn.extend({serialize:function(){return v.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?v.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||an.test(this.nodeName)||un.test(this.type))}).map(function(e,t){var n=v(this).val();return n==null?null:v.isArray(n)?v.map(n,function(e,n){return{name:t.name,value:e.replace(on,"\r\n")}}):{name:t.name,value:n.replace(on,"\r\n")}}).get()}}),v.param=function(e,n){var r,i=[],s=function(e,t){t=v.isFunction(t)?t():t==null?"":t,i[i.length]=encodeURIComponent(e)+"="+encodeURIComponent(t)};n===t&&(n=v.ajaxSettings&&v.ajaxSettings.traditional);if(v.isArray(e)||e.jquery&&!v.isPlainObject(e))v.each(e,function(){s(this.name,this.value)});else for(r in e)fn(r,e[r],n,s);return i.join("&").replace(rn,"+")};var ln,cn,hn=/#.*$/,pn=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,dn=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,vn=/^(?:GET|HEAD)$/,mn=/^\/\//,gn=/\?/,yn=/)<[^<]*)*<\/script>/gi,bn=/([?&])_=[^&]*/,wn=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,En=v.fn.load,Sn={},xn={},Tn=["*/"]+["*"];try{cn=s.href}catch(Nn){cn=i.createElement("a"),cn.href="",cn=cn.href}ln=wn.exec(cn.toLowerCase())||[],v.fn.load=function(e,n,r){if(typeof e!="string"&&En)return En.apply(this,arguments);if(!this.length)return this;var i,s,o,u=this,a=e.indexOf(" ");return a>=0&&(i=e.slice(a,e.length),e=e.slice(0,a)),v.isFunction(n)?(r=n,n=t):n&&typeof n=="object"&&(s="POST"),v.ajax({url:e,type:s,dataType:"html",data:n,complete:function(e,t){r&&u.each(r,o||[e.responseText,t,e])}}).done(function(e){o=arguments,u.html(i?v("
").append(e.replace(yn,"")).find(i):e)}),this},v.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(e,t){v.fn[t]=function(e){return this.on(t,e)}}),v.each(["get","post"],function(e,n){v[n]=function(e,r,i,s){return v.isFunction(r)&&(s=s||i,i=r,r=t),v.ajax({type:n,url:e,data:r,success:i,dataType:s})}}),v.extend({getScript:function(e,n){return v.get(e,t,n,"script")},getJSON:function(e,t,n){return v.get(e,t,n,"json")},ajaxSetup:function(e,t){return t?Ln(e,v.ajaxSettings):(t=e,e=v.ajaxSettings),Ln(e,t),e},ajaxSettings:{url:cn,isLocal:dn.test(ln[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded; charset=UTF-8",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":Tn},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":e.String,"text html":!0,"text json":v.parseJSON,"text xml":v.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:Cn(Sn),ajaxTransport:Cn(xn),ajax:function(e,n){function T(e,n,s,a){var l,y,b,w,S,T=n;if(E===2)return;E=2,u&&clearTimeout(u),o=t,i=a||"",x.readyState=e>0?4:0,s&&(w=An(c,x,s));if(e>=200&&e<300||e===304)c.ifModified&&(S=x.getResponseHeader("Last-Modified"),S&&(v.lastModified[r]=S),S=x.getResponseHeader("Etag"),S&&(v.etag[r]=S)),e===304?(T="notmodified",l=!0):(l=On(c,w),T=l.state,y=l.data,b=l.error,l=!b);else{b=T;if(!T||e)T="error",e<0&&(e=0)}x.status=e,x.statusText=(n||T)+"",l?d.resolveWith(h,[y,T,x]):d.rejectWith(h,[x,T,b]),x.statusCode(g),g=t,f&&p.trigger("ajax"+(l?"Success":"Error"),[x,c,l?y:b]),m.fireWith(h,[x,T]),f&&(p.trigger("ajaxComplete",[x,c]),--v.active||v.event.trigger("ajaxStop"))}typeof e=="object"&&(n=e,e=t),n=n||{};var r,i,s,o,u,a,f,l,c=v.ajaxSetup({},n),h=c.context||c,p=h!==c&&(h.nodeType||h instanceof v)?v(h):v.event,d=v.Deferred(),m=v.Callbacks("once memory"),g=c.statusCode||{},b={},w={},E=0,S="canceled",x={readyState:0,setRequestHeader:function(e,t){if(!E){var n=e.toLowerCase();e=w[n]=w[n]||e,b[e]=t}return this},getAllResponseHeaders:function(){return E===2?i:null},getResponseHeader:function(e){var n;if(E===2){if(!s){s={};while(n=pn.exec(i))s[n[1].toLowerCase()]=n[2]}n=s[e.toLowerCase()]}return n===t?null:n},overrideMimeType:function(e){return E||(c.mimeType=e),this},abort:function(e){return e=e||S,o&&o.abort(e),T(0,e),this}};d.promise(x),x.success=x.done,x.error=x.fail,x.complete=m.add,x.statusCode=function(e){if(e){var t;if(E<2)for(t in e)g[t]=[g[t],e[t]];else t=e[x.status],x.always(t)}return this},c.url=((e||c.url)+"").replace(hn,"").replace(mn,ln[1]+"//"),c.dataTypes=v.trim(c.dataType||"*").toLowerCase().split(y),c.crossDomain==null&&(a=wn.exec(c.url.toLowerCase()),c.crossDomain=!(!a||a[1]===ln[1]&&a[2]===ln[2]&&(a[3]||(a[1]==="http:"?80:443))==(ln[3]||(ln[1]==="http:"?80:443)))),c.data&&c.processData&&typeof c.data!="string"&&(c.data=v.param(c.data,c.traditional)),kn(Sn,c,n,x);if(E===2)return x;f=c.global,c.type=c.type.toUpperCase(),c.hasContent=!vn.test(c.type),f&&v.active++===0&&v.event.trigger("ajaxStart");if(!c.hasContent){c.data&&(c.url+=(gn.test(c.url)?"&":"?")+c.data,delete c.data),r=c.url;if(c.cache===!1){var N=v.now(),C=c.url.replace(bn,"$1_="+N);c.url=C+(C===c.url?(gn.test(c.url)?"&":"?")+"_="+N:"")}}(c.data&&c.hasContent&&c.contentType!==!1||n.contentType)&&x.setRequestHeader("Content-Type",c.contentType),c.ifModified&&(r=r||c.url,v.lastModified[r]&&x.setRequestHeader("If-Modified-Since",v.lastModified[r]),v.etag[r]&&x.setRequestHeader("If-None-Match",v.etag[r])),x.setRequestHeader("Accept",c.dataTypes[0]&&c.accepts[c.dataTypes[0]]?c.accepts[c.dataTypes[0]]+(c.dataTypes[0]!=="*"?", "+Tn+"; q=0.01":""):c.accepts["*"]);for(l in c.headers)x.setRequestHeader(l,c.headers[l]);if(!c.beforeSend||c.beforeSend.call(h,x,c)!==!1&&E!==2){S="abort";for(l in{success:1,error:1,complete:1})x[l](c[l]);o=kn(xn,c,n,x);if(!o)T(-1,"No Transport");else{x.readyState=1,f&&p.trigger("ajaxSend",[x,c]),c.async&&c.timeout>0&&(u=setTimeout(function(){x.abort("timeout")},c.timeout));try{E=1,o.send(b,T)}catch(k){if(!(E<2))throw k;T(-1,k)}}return x}return x.abort()},active:0,lastModified:{},etag:{}});var Mn=[],_n=/\?/,Dn=/(=)\?(?=&|$)|\?\?/,Pn=v.now();v.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Mn.pop()||v.expando+"_"+Pn++;return this[e]=!0,e}}),v.ajaxPrefilter("json jsonp",function(n,r,i){var s,o,u,a=n.data,f=n.url,l=n.jsonp!==!1,c=l&&Dn.test(f),h=l&&!c&&typeof a=="string"&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Dn.test(a);if(n.dataTypes[0]==="jsonp"||c||h)return s=n.jsonpCallback=v.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,o=e[s],c?n.url=f.replace(Dn,"$1"+s):h?n.data=a.replace(Dn,"$1"+s):l&&(n.url+=(_n.test(f)?"&":"?")+n.jsonp+"="+s),n.converters["script json"]=function(){return u||v.error(s+" was not called"),u[0]},n.dataTypes[0]="json",e[s]=function(){u=arguments},i.always(function(){e[s]=o,n[s]&&(n.jsonpCallback=r.jsonpCallback,Mn.push(s)),u&&v.isFunction(o)&&o(u[0]),u=o=t}),"script"}),v.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(e){return v.globalEval(e),e}}}),v.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),v.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=i.head||i.getElementsByTagName("head")[0]||i.documentElement;return{send:function(s,o){n=i.createElement("script"),n.async="async",e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,i){if(i||!n.readyState||/loaded|complete/.test(n.readyState))n.onload=n.onreadystatechange=null,r&&n.parentNode&&r.removeChild(n),n=t,i||o(200,"success")},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(0,1)}}}});var Hn,Bn=e.ActiveXObject?function(){for(var e in Hn)Hn[e](0,1)}:!1,jn=0;v.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&Fn()||In()}:Fn,function(e){v.extend(v.support,{ajax:!!e,cors:!!e&&"withCredentials"in e})}(v.ajaxSettings.xhr()),v.support.ajax&&v.ajaxTransport(function(n){if(!n.crossDomain||v.support.cors){var r;return{send:function(i,s){var o,u,a=n.xhr();n.username?a.open(n.type,n.url,n.async,n.username,n.password):a.open(n.type,n.url,n.async);if(n.xhrFields)for(u in n.xhrFields)a[u]=n.xhrFields[u];n.mimeType&&a.overrideMimeType&&a.overrideMimeType(n.mimeType),!n.crossDomain&&!i["X-Requested-With"]&&(i["X-Requested-With"]="XMLHttpRequest");try{for(u in i)a.setRequestHeader(u,i[u])}catch(f){}a.send(n.hasContent&&n.data||null),r=function(e,i){var u,f,l,c,h;try{if(r&&(i||a.readyState===4)){r=t,o&&(a.onreadystatechange=v.noop,Bn&&delete Hn[o]);if(i)a.readyState!==4&&a.abort();else{u=a.status,l=a.getAllResponseHeaders(),c={},h=a.responseXML,h&&h.documentElement&&(c.xml=h);try{c.text=a.responseText}catch(p){}try{f=a.statusText}catch(p){f=""}!u&&n.isLocal&&!n.crossDomain?u=c.text?200:404:u===1223&&(u=204)}}}catch(d){i||s(-1,d)}c&&s(u,f,c,l)},n.async?a.readyState===4?setTimeout(r,0):(o=++jn,Bn&&(Hn||(Hn={},v(e).unload(Bn)),Hn[o]=r),a.onreadystatechange=r):r()},abort:function(){r&&r(0,1)}}}});var qn,Rn,Un=/^(?:toggle|show|hide)$/,zn=new RegExp("^(?:([-+])=|)("+m+")([a-z%]*)$","i"),Wn=/queueHooks$/,Xn=[Gn],Vn={"*":[function(e,t){var n,r,i=this.createTween(e,t),s=zn.exec(t),o=i.cur(),u=+o||0,a=1,f=20;if(s){n=+s[2],r=s[3]||(v.cssNumber[e]?"":"px");if(r!=="px"&&u){u=v.css(i.elem,e,!0)||n||1;do a=a||".5",u/=a,v.style(i.elem,e,u+r);while(a!==(a=i.cur()/o)&&a!==1&&--f)}i.unit=r,i.start=u,i.end=s[1]?u+(s[1]+1)*n:n}return i}]};v.Animation=v.extend(Kn,{tweener:function(e,t){v.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;r-1,f={},l={},c,h;a?(l=i.position(),c=l.top,h=l.left):(c=parseFloat(o)||0,h=parseFloat(u)||0),v.isFunction(t)&&(t=t.call(e,n,s)),t.top!=null&&(f.top=t.top-s.top+c),t.left!=null&&(f.left=t.left-s.left+h),"using"in t?t.using.call(e,f):i.css(f)}},v.fn.extend({position:function(){if(!this[0])return;var e=this[0],t=this.offsetParent(),n=this.offset(),r=er.test(t[0].nodeName)?{top:0,left:0}:t.offset();return n.top-=parseFloat(v.css(e,"marginTop"))||0,n.left-=parseFloat(v.css(e,"marginLeft"))||0,r.top+=parseFloat(v.css(t[0],"borderTopWidth"))||0,r.left+=parseFloat(v.css(t[0],"borderLeftWidth"))||0,{top:n.top-r.top,left:n.left-r.left}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||i.body;while(e&&!er.test(e.nodeName)&&v.css(e,"position")==="static")e=e.offsetParent;return e||i.body})}}),v.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);v.fn[e]=function(i){return v.access(this,function(e,i,s){var o=tr(e);if(s===t)return o?n in o?o[n]:o.document.documentElement[i]:e[i];o?o.scrollTo(r?v(o).scrollLeft():s,r?s:v(o).scrollTop()):e[i]=s},e,i,arguments.length,null)}}),v.each({Height:"height",Width:"width"},function(e,n){v.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){v.fn[i]=function(i,s){var o=arguments.length&&(r||typeof i!="boolean"),u=r||(i===!0||s===!0?"margin":"border");return v.access(this,function(n,r,i){var s;return v.isWindow(n)?n.document.documentElement["client"+e]:n.nodeType===9?(s=n.documentElement,Math.max(n.body["scroll"+e],s["scroll"+e],n.body["offset"+e],s["offset"+e],s["client"+e])):i===t?v.css(n,r,i,u):v.style(n,r,i,u)},n,o?i:t,o,null)}})}),e.jQuery=e.$=v,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return v})})(window); diff --git a/doc/html/scripts/linenumber.js b/doc/html/scripts/linenumber.js deleted file mode 100644 index d7ac9c07..00000000 --- a/doc/html/scripts/linenumber.js +++ /dev/null @@ -1,30 +0,0 @@ -/*global document */ -(function() { - var source = document.getElementsByClassName('prettyprint source linenums'); - var i = 0; - var lineNumber = 0; - var lineId; - var lines; - var totalLines; - var anchorHash; - var lineNumberHTML = ''; - - if (source && source[0]) { - anchorHash = document.location.hash.substring(1); - lines = source[0].getElementsByTagName('li'); - totalLines = lines.length; - - for (; i < totalLines; i++) { - lineNumber++; - lineId = 'line' + lineNumber; - lines[i].id = lineId; - - lineNumberHTML = '' + (i + 1) + ' : '; - - lines[i].insertAdjacentHTML('afterBegin', lineNumberHTML); - if (lineId === anchorHash) { - lines[i].className += ' selected'; - } - } - } -})(); diff --git a/doc/html/scripts/prettify/Apache-License-2.0.txt b/doc/html/scripts/prettify/Apache-License-2.0.txt deleted file mode 100644 index d6456956..00000000 --- a/doc/html/scripts/prettify/Apache-License-2.0.txt +++ /dev/null @@ -1,202 +0,0 @@ - - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright [yyyy] [name of copyright owner] - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/doc/html/scripts/prettify/lang-css.js b/doc/html/scripts/prettify/lang-css.js deleted file mode 100644 index 041e1f59..00000000 --- a/doc/html/scripts/prettify/lang-css.js +++ /dev/null @@ -1,2 +0,0 @@ -PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n "]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com", -/^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]); diff --git a/doc/html/scripts/prettify/prettify.js b/doc/html/scripts/prettify/prettify.js deleted file mode 100644 index eef5ad7e..00000000 --- a/doc/html/scripts/prettify/prettify.js +++ /dev/null @@ -1,28 +0,0 @@ -var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; -(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a= -[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;ci[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m), -l=[],p={},d=0,g=e.length;d=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, -q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/, -q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g, -"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a), -a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e} -for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], -"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"], -H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], -J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+ -I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]), -["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css", -/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}), -["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes", -hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p=0){var k=k.match(g),f,b;if(b= -!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p - 1; -} - -function makeListItemHtml(item, inputText) { - var itemText = item.text; - var itemHref = item.href; - var $parent = $(item).closest('div'); - var memberof = ''; - - if ($parent.length && $parent.attr('id')) { - memberof = $parent.attr('id').replace('_sub', ''); - } else { - memberof = $(item).closest('div').find('h3').text(); - } - - if (memberof) { - memberof = '' + memberof + ''; - } - - itemText = itemText.replace(new RegExp(inputText, 'ig'), function(matched) { - return '' + matched + ''; - }); - - return '
  • ' + itemText + '' + memberof + '
    • '; -} - -function removeWhiteSpace(value) { - return value.replace(/\s/g, ''); -} - -/*************** TOOGLE SUB NAV ***************/ -function toggleSubNav(e) { - $(e.currentTarget).next().toggleClass('hidden'); - $(e.currentTarget).find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); -} - -$lnb.find('.lnb-api').each(function() { - $(this).find('.toggle-subnav') - .filter(function() { - return $(this).next(':empty').length === 0; - }).each(function() { - $(this).removeClass('hidden').on('click', toggleSubNav); - }); -}); diff --git a/doc/html/styles/bootstrap.min.css b/doc/html/styles/bootstrap.min.css deleted file mode 100644 index ed3905e0..00000000 --- a/doc/html/styles/bootstrap.min.css +++ /dev/null @@ -1,6 +0,0 @@ -/*! - * Bootstrap v3.3.7 (http://getbootstrap.com) - * Copyright 2011-2016 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\002a"}.glyphicon-plus:before{content:"\002b"}.glyphicon-eur:before,.glyphicon-euro:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.glyphicon-cog:before{content:"\e019"}.glyphicon-trash:before{content:"\e020"}.glyphicon-home:before{content:"\e021"}.glyphicon-file:before{content:"\e022"}.glyphicon-time:before{content:"\e023"}.glyphicon-road:before{content:"\e024"}.glyphicon-download-alt:before{content:"\e025"}.glyphicon-download:before{content:"\e026"}.glyphicon-upload:before{content:"\e027"}.glyphicon-inbox:before{content:"\e028"}.glyphicon-play-circle:before{content:"\e029"}.glyphicon-repeat:before{content:"\e030"}.glyphicon-refresh:before{content:"\e031"}.glyphicon-list-alt:before{content:"\e032"}.glyphicon-lock:before{content:"\e033"}.glyphicon-flag:before{content:"\e034"}.glyphicon-headphones:before{content:"\e035"}.glyphicon-volume-off:before{content:"\e036"}.glyphicon-volume-down:before{content:"\e037"}.glyphicon-volume-up:before{content:"\e038"}.glyphicon-qrcode:before{content:"\e039"}.glyphicon-barcode:before{content:"\e040"}.glyphicon-tag:before{content:"\e041"}.glyphicon-tags:before{content:"\e042"}.glyphicon-book:before{content:"\e043"}.glyphicon-bookmark:before{content:"\e044"}.glyphicon-print:before{content:"\e045"}.glyphicon-camera:before{content:"\e046"}.glyphicon-font:before{content:"\e047"}.glyphicon-bold:before{content:"\e048"}.glyphicon-italic:before{content:"\e049"}.glyphicon-text-height:before{content:"\e050"}.glyphicon-text-width:before{content:"\e051"}.glyphicon-align-left:before{content:"\e052"}.glyphicon-align-center:before{content:"\e053"}.glyphicon-align-right:before{content:"\e054"}.glyphicon-align-justify:before{content:"\e055"}.glyphicon-list:before{content:"\e056"}.glyphicon-indent-left:before{content:"\e057"}.glyphicon-indent-right:before{content:"\e058"}.glyphicon-facetime-video:before{content:"\e059"}.glyphicon-picture:before{content:"\e060"}.glyphicon-map-marker:before{content:"\e062"}.glyphicon-adjust:before{content:"\e063"}.glyphicon-tint:before{content:"\e064"}.glyphicon-edit:before{content:"\e065"}.glyphicon-share:before{content:"\e066"}.glyphicon-check:before{content:"\e067"}.glyphicon-move:before{content:"\e068"}.glyphicon-step-backward:before{content:"\e069"}.glyphicon-fast-backward:before{content:"\e070"}.glyphicon-backward:before{content:"\e071"}.glyphicon-play:before{content:"\e072"}.glyphicon-pause:before{content:"\e073"}.glyphicon-stop:before{content:"\e074"}.glyphicon-forward:before{content:"\e075"}.glyphicon-fast-forward:before{content:"\e076"}.glyphicon-step-forward:before{content:"\e077"}.glyphicon-eject:before{content:"\e078"}.glyphicon-chevron-left:before{content:"\e079"}.glyphicon-chevron-right:before{content:"\e080"}.glyphicon-plus-sign:before{content:"\e081"}.glyphicon-minus-sign:before{content:"\e082"}.glyphicon-remove-sign:before{content:"\e083"}.glyphicon-ok-sign:before{content:"\e084"}.glyphicon-question-sign:before{content:"\e085"}.glyphicon-info-sign:before{content:"\e086"}.glyphicon-screenshot:before{content:"\e087"}.glyphicon-remove-circle:before{content:"\e088"}.glyphicon-ok-circle:before{content:"\e089"}.glyphicon-ban-circle:before{content:"\e090"}.glyphicon-arrow-left:before{content:"\e091"}.glyphicon-arrow-right:before{content:"\e092"}.glyphicon-arrow-up:before{content:"\e093"}.glyphicon-arrow-down:before{content:"\e094"}.glyphicon-share-alt:before{content:"\e095"}.glyphicon-resize-full:before{content:"\e096"}.glyphicon-resize-small:before{content:"\e097"}.glyphicon-exclamation-sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{content:"\e109"}.glyphicon-random:before{content:"\e110"}.glyphicon-comment:before{content:"\e111"}.glyphicon-magnet:before{content:"\e112"}.glyphicon-chevron-up:before{content:"\e113"}.glyphicon-chevron-down:before{content:"\e114"}.glyphicon-retweet:before{content:"\e115"}.glyphicon-shopping-cart:before{content:"\e116"}.glyphicon-folder-close:before{content:"\e117"}.glyphicon-folder-open:before{content:"\e118"}.glyphicon-resize-vertical:before{content:"\e119"}.glyphicon-resize-horizontal:before{content:"\e120"}.glyphicon-hdd:before{content:"\e121"}.glyphicon-bullhorn:before{content:"\e122"}.glyphicon-bell:before{content:"\e123"}.glyphicon-certificate:before{content:"\e124"}.glyphicon-thumbs-up:before{content:"\e125"}.glyphicon-thumbs-down:before{content:"\e126"}.glyphicon-hand-right:before{content:"\e127"}.glyphicon-hand-left:before{content:"\e128"}.glyphicon-hand-up:before{content:"\e129"}.glyphicon-hand-down:before{content:"\e130"}.glyphicon-circle-arrow-right:before{content:"\e131"}.glyphicon-circle-arrow-left:before{content:"\e132"}.glyphicon-circle-arrow-up:before{content:"\e133"}.glyphicon-circle-arrow-down:before{content:"\e134"}.glyphicon-globe:before{content:"\e135"}.glyphicon-wrench:before{content:"\e136"}.glyphicon-tasks:before{content:"\e137"}.glyphicon-filter:before{content:"\e138"}.glyphicon-briefcase:before{content:"\e139"}.glyphicon-fullscreen:before{content:"\e140"}.glyphicon-dashboard:before{content:"\e141"}.glyphicon-paperclip:before{content:"\e142"}.glyphicon-heart-empty:before{content:"\e143"}.glyphicon-link:before{content:"\e144"}.glyphicon-phone:before{content:"\e145"}.glyphicon-pushpin:before{content:"\e146"}.glyphicon-usd:before{content:"\e148"}.glyphicon-gbp:before{content:"\e149"}.glyphicon-sort:before{content:"\e150"}.glyphicon-sort-by-alphabet:before{content:"\e151"}.glyphicon-sort-by-alphabet-alt:before{content:"\e152"}.glyphicon-sort-by-order:before{content:"\e153"}.glyphicon-sort-by-order-alt:before{content:"\e154"}.glyphicon-sort-by-attributes:before{content:"\e155"}.glyphicon-sort-by-attributes-alt:before{content:"\e156"}.glyphicon-unchecked:before{content:"\e157"}.glyphicon-expand:before{content:"\e158"}.glyphicon-collapse-down:before{content:"\e159"}.glyphicon-collapse-up:before{content:"\e160"}.glyphicon-log-in:before{content:"\e161"}.glyphicon-flash:before{content:"\e162"}.glyphicon-log-out:before{content:"\e163"}.glyphicon-new-window:before{content:"\e164"}.glyphicon-record:before{content:"\e165"}.glyphicon-save:before{content:"\e166"}.glyphicon-open:before{content:"\e167"}.glyphicon-saved:before{content:"\e168"}.glyphicon-import:before{content:"\e169"}.glyphicon-export:before{content:"\e170"}.glyphicon-send:before{content:"\e171"}.glyphicon-floppy-disk:before{content:"\e172"}.glyphicon-floppy-saved:before{content:"\e173"}.glyphicon-floppy-remove:before{content:"\e174"}.glyphicon-floppy-save:before{content:"\e175"}.glyphicon-floppy-open:before{content:"\e176"}.glyphicon-credit-card:before{content:"\e177"}.glyphicon-transfer:before{content:"\e178"}.glyphicon-cutlery:before{content:"\e179"}.glyphicon-header:before{content:"\e180"}.glyphicon-compressed:before{content:"\e181"}.glyphicon-earphone:before{content:"\e182"}.glyphicon-phone-alt:before{content:"\e183"}.glyphicon-tower:before{content:"\e184"}.glyphicon-stats:before{content:"\e185"}.glyphicon-sd-video:before{content:"\e186"}.glyphicon-hd-video:before{content:"\e187"}.glyphicon-subtitles:before{content:"\e188"}.glyphicon-sound-stereo:before{content:"\e189"}.glyphicon-sound-dolby:before{content:"\e190"}.glyphicon-sound-5-1:before{content:"\e191"}.glyphicon-sound-6-1:before{content:"\e192"}.glyphicon-sound-7-1:before{content:"\e193"}.glyphicon-copyright-mark:before{content:"\e194"}.glyphicon-registration-mark:before{content:"\e195"}.glyphicon-cloud-download:before{content:"\e197"}.glyphicon-cloud-upload:before{content:"\e198"}.glyphicon-tree-conifer:before{content:"\e199"}.glyphicon-tree-deciduous:before{content:"\e200"}.glyphicon-cd:before{content:"\e201"}.glyphicon-save-file:before{content:"\e202"}.glyphicon-open-file:before{content:"\e203"}.glyphicon-level-up:before{content:"\e204"}.glyphicon-copy:before{content:"\e205"}.glyphicon-paste:before{content:"\e206"}.glyphicon-alert:before{content:"\e209"}.glyphicon-equalizer:before{content:"\e210"}.glyphicon-king:before{content:"\e211"}.glyphicon-queen:before{content:"\e212"}.glyphicon-pawn:before{content:"\e213"}.glyphicon-bishop:before{content:"\e214"}.glyphicon-knight:before{content:"\e215"}.glyphicon-baby-formula:before{content:"\e216"}.glyphicon-tent:before{content:"\26fa"}.glyphicon-blackboard:before{content:"\e218"}.glyphicon-bed:before{content:"\e219"}.glyphicon-apple:before{content:"\f8ff"}.glyphicon-erase:before{content:"\e221"}.glyphicon-hourglass:before{content:"\231b"}.glyphicon-lamp:before{content:"\e223"}.glyphicon-duplicate:before{content:"\e224"}.glyphicon-piggy-bank:before{content:"\e225"}.glyphicon-scissors:before{content:"\e226"}.glyphicon-bitcoin:before{content:"\e227"}.glyphicon-btc:before{content:"\e227"}.glyphicon-xbt:before{content:"\e227"}.glyphicon-yen:before{content:"\00a5"}.glyphicon-jpy:before{content:"\00a5"}.glyphicon-ruble:before{content:"\20bd"}.glyphicon-rub:before{content:"\20bd"}.glyphicon-scale:before{content:"\e230"}.glyphicon-ice-lolly:before{content:"\e231"}.glyphicon-ice-lolly-tasted:before{content:"\e232"}.glyphicon-education:before{content:"\e233"}.glyphicon-option-horizontal:before{content:"\e234"}.glyphicon-option-vertical:before{content:"\e235"}.glyphicon-menu-hamburger:before{content:"\e236"}.glyphicon-modal-window:before{content:"\e237"}.glyphicon-oil:before{content:"\e238"}.glyphicon-grain:before{content:"\e239"}.glyphicon-sunglasses:before{content:"\e240"}.glyphicon-text-size:before{content:"\e241"}.glyphicon-text-color:before{content:"\e242"}.glyphicon-text-background:before{content:"\e243"}.glyphicon-object-align-top:before{content:"\e244"}.glyphicon-object-align-bottom:before{content:"\e245"}.glyphicon-object-align-horizontal:before{content:"\e246"}.glyphicon-object-align-left:before{content:"\e247"}.glyphicon-object-align-vertical:before{content:"\e248"}.glyphicon-object-align-right:before{content:"\e249"}.glyphicon-triangle-right:before{content:"\e250"}.glyphicon-triangle-left:before{content:"\e251"}.glyphicon-triangle-bottom:before{content:"\e252"}.glyphicon-triangle-top:before{content:"\e253"}.glyphicon-console:before{content:"\e254"}.glyphicon-superscript:before{content:"\e255"}.glyphicon-subscript:before{content:"\e256"}.glyphicon-menu-left:before{content:"\e257"}.glyphicon-menu-right:before{content:"\e258"}.glyphicon-menu-down:before{content:"\e259"}.glyphicon-menu-up:before{content:"\e260"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.small,small{font-size:85%}.mark,mark{padding:.2em;background-color:#fcf8e3}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777}.text-primary{color:#337ab7}a.text-primary:focus,a.text-primary:hover{color:#286090}.text-success{color:#3c763d}a.text-success:focus,a.text-success:hover{color:#2b542c}.text-info{color:#31708f}a.text-info:focus,a.text-info:hover{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:focus,a.text-warning:hover{color:#66512c}.text-danger{color:#a94442}a.text-danger:focus,a.text-danger:hover{color:#843534}.bg-primary{color:#fff;background-color:#337ab7}a.bg-primary:focus,a.bg-primary:hover{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:focus,a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:focus,a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:focus,a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:focus,a.bg-danger:hover{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ol,ul{margin-top:0;margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;margin-left:-5px;list-style:none}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-top:0;margin-bottom:20px}dd,dt{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #777}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child{margin-bottom:0}blockquote .small,blockquote footer,blockquote small{display:block;font-size:80%;line-height:1.42857143;color:#777}blockquote .small:before,blockquote footer:before,blockquote small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;text-align:right;border-right:5px solid #eee;border-left:0}.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before{content:''}.blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after{content:'\00A0 \2014'}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;font-weight:700;-webkit-box-shadow:none;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}table col[class*=col-]{position:static;display:table-column;float:none}table td[class*=col-],table th[class*=col-]{position:static;display:table-cell;float:none}.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#f5f5f5}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover{background-color:#e8e8e8}.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#dff0d8}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover{background-color:#d0e9c6}.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#d9edf7}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover{background-color:#c4e3f3}.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#fcf8e3}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover{background-color:#faf2cc}.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#f2dede}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px\9;line-height:normal}input[type=file]{display:block}input[type=range]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{background-color:transparent;border:0}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}input[type=search]{-webkit-appearance:none}@media screen and (-webkit-min-device-pixel-ratio:0){input[type=date].form-control,input[type=time].form-control,input[type=datetime-local].form-control,input[type=month].form-control{line-height:34px}.input-group-sm input[type=date],.input-group-sm input[type=time],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],input[type=date].input-sm,input[type=time].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm{line-height:30px}.input-group-lg input[type=date],.input-group-lg input[type=time],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],input[type=date].input-lg,input[type=time].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg{line-height:46px}}.form-group{margin-bottom:15px}.checkbox,.radio{position:relative;display:block;margin-top:10px;margin-bottom:10px}.checkbox label,.radio label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{position:absolute;margin-top:4px\9;margin-left:-20px}.checkbox+.checkbox,.radio+.radio{margin-top:-5px}.checkbox-inline,.radio-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0;margin-left:10px}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed}.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline{cursor:not-allowed}.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{cursor:not-allowed}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}select[multiple].input-sm,textarea.input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm select[multiple].form-control,.form-group-sm textarea.form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-lg{height:46px;line-height:46px}select[multiple].input-lg,textarea.input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg select[multiple].form-control,.form-group-lg textarea.form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.3333333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback{width:46px;height:46px;line-height:46px}.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;background-color:#fcf8e3;border-color:#8a6d3b}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .checkbox label,.form-inline .radio label{padding-left:0}.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .checkbox,.form-horizontal .radio{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default.focus,.btn-default:focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{background-image:none}.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff;background-color:#204d74;border-color:#122b40}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}.btn-primary .badge{color:#337ab7;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{color:#fff;background-color:#398439;border-color:#255625}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{background-image:none}.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{background-image:none}.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#ec971f;border-color:#985f0d}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{color:#fff;background-color:#d58512;border-color:#985f0d}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{color:#fff;background-color:#ac2925;border-color:#761c19}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{font-weight:400;color:#337ab7;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#23527c;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#777;text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-group-xs>.btn,.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-property:height,visibility;-o-transition-property:height,visibility;transition-property:height,visibility}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}.dropdown,.dropup{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#777}.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px dashed;border-bottom:4px solid\9}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*=col-]{float:none;padding-right:0;padding-left:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn,textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn,textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn{height:auto}.input-group .form-control,.input-group-addon,.input-group-btn{display:table-cell}.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#777}.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{color:#fff;background-color:#337ab7}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}.navbar-form{padding:10px 15px;margin-top:8px;margin-right:-15px;margin-bottom:8px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1)}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .checkbox,.navbar-form .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .checkbox label,.navbar-form .radio label{padding-left:0}.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#9d9d9d}.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:focus,.navbar-inverse .navbar-nav>.disabled>a:hover{color:#444;background-color:transparent}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:focus,.navbar-inverse .navbar-nav>.open>a:hover{color:#fff;background-color:#080808}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#444;background-color:transparent}}.navbar-inverse .navbar-link{color:#9d9d9d}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#9d9d9d}.navbar-inverse .btn-link:focus,.navbar-inverse .btn-link:hover{color:#fff}.navbar-inverse .btn-link[disabled]:focus,.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:focus,fieldset[disabled] .navbar-inverse .btn-link:hover{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#777}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:focus,a.label:hover{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#777}.label-default[href]:focus,.label-default[href]:hover{background-color:#5e5e5e}.label-primary{background-color:#337ab7}.label-primary[href]:focus,.label-primary[href]:hover{background-color:#286090}.label-success{background-color:#5cb85c}.label-success[href]:focus,.label-success[href]:hover{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:focus,.label-info[href]:hover{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:focus,.label-warning[href]:hover{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:focus,.label-danger[href]:hover{background-color:#c9302c}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-group-xs>.btn .badge,.btn-xs .badge{top:0;padding:1px 5px}a.badge:focus,a.badge:hover{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron .h1,.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotron>hr{border-top-color:#d5d5d5}.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}.jumbotron .h1,.jumbotron h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.thumbnail a>img,.thumbnail>img{margin-right:auto;margin-left:auto}a.thumbnail.active,a.thumbnail:focus,a.thumbnail:hover{border-color:#337ab7}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-bar-striped,.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{overflow:hidden;zoom:1}.media-body{width:10000px}.media-object{display:block}.media-object.img-thumbnail{max-width:none}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-body,.media-left,.media-right{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{padding-left:0;margin-bottom:20px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}a.list-group-item,button.list-group-item{color:#555}a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:#333}a.list-group-item:focus,a.list-group-item:hover,button.list-group-item:focus,button.list-group-item:hover{color:#555;text-decoration:none;background-color:#f5f5f5}button.list-group-item{width:100%;text-align:left}.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover{color:#777;cursor:not-allowed;background-color:#eee}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text{color:#777}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{z-index:2;color:#fff;background-color:#337ab7;border-color:#337ab7}.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text{color:#c7ddef}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover,button.list-group-item-success.active,button.list-group-item-success.active:focus,button.list-group-item-success.active:hover{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#31708f;background-color:#d9edf7}a.list-group-item-info,button.list-group-item-info{color:#31708f}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover,button.list-group-item-info.active,button.list-group-item-info.active:focus,button.list-group-item-info.active:hover{color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning,button.list-group-item-warning{color:#8a6d3b}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover,button.list-group-item-warning.active,button.list-group-item-warning.active:focus,button.list-group-item-warning.active:hover{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover,button.list-group-item-danger.active,button.list-group-item-danger.active:focus,button.list-group-item-danger.active:hover{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:3px;border-top-right-radius:3px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption{padding-right:15px;padding-left:15px}.panel>.table-responsive:first-child>.table:first-child,.panel>.table:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:3px}.panel>.table-responsive:last-child>.table:last-child,.panel>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{margin-bottom:0;border:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:4px}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#ddd}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}.panel-primary{border-color:#337ab7}.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#337ab7}.panel-primary>.panel-heading .badge{color:#337ab7;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#337ab7}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#bce8f1}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1}.panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;filter:alpha(opacity=0);opacity:0;line-break:auto}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow{border-width:11px}.popover>.arrow:after{content:"";border-width:10px}.popover.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}.popover.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);background-color:rgba(0,0,0,0);filter:alpha(opacity=50);opacity:.5}.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block;margin-top:-10px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-10px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-10px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-lg,.visible-md,.visible-sm,.visible-xs{display:none!important}.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table!important}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table!important}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table!important}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table!important}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table!important}tr.visible-print{display:table-row!important}td.visible-print,th.visible-print{display:table-cell!important}}.visible-print-block{display:none!important}@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}@media print{.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}} -/*# sourceMappingURL=bootstrap.min.css.map */ \ No newline at end of file diff --git a/doc/html/styles/prettify-jsdoc.css b/doc/html/styles/prettify-jsdoc.css deleted file mode 100644 index 5a2526e3..00000000 --- a/doc/html/styles/prettify-jsdoc.css +++ /dev/null @@ -1,111 +0,0 @@ -/* JSDoc prettify.js theme */ - -/* plain text */ -.pln { - color: #000000; - font-weight: normal; - font-style: normal; -} - -/* string content */ -.str { - color: #006400; - font-weight: normal; - font-style: normal; -} - -/* a keyword */ -.kwd { - color: #000000; - font-weight: bold; - font-style: normal; -} - -/* a comment */ -.com { - font-weight: normal; - font-style: italic; -} - -/* a type name */ -.typ { - color: #000000; - font-weight: normal; - font-style: normal; -} - -/* a literal value */ -.lit { - color: #006400; - font-weight: normal; - font-style: normal; -} - -/* punctuation */ -.pun { - color: #000000; - font-weight: bold; - font-style: normal; -} - -/* lisp open bracket */ -.opn { - color: #000000; - font-weight: bold; - font-style: normal; -} - -/* lisp close bracket */ -.clo { - color: #000000; - font-weight: bold; - font-style: normal; -} - -/* a markup tag name */ -.tag { - color: #006400; - font-weight: normal; - font-style: normal; -} - -/* a markup attribute name */ -.atn { - color: #006400; - font-weight: normal; - font-style: normal; -} - -/* a markup attribute value */ -.atv { - color: #006400; - font-weight: normal; - font-style: normal; -} - -/* a declaration */ -.dec { - color: #000000; - font-weight: bold; - font-style: normal; -} - -/* a variable name */ -.var { - color: #000000; - font-weight: normal; - font-style: normal; -} - -/* a function name */ -.fun { - color: #000000; - font-weight: bold; - font-style: normal; -} - -/* Specify class=linenums on a pre to get line numbering */ -ol.linenums { - margin-top: 0; - margin-bottom: 0; -} diff --git a/doc/html/styles/prettify-tomorrow.css b/doc/html/styles/prettify-tomorrow.css deleted file mode 100644 index b6f92a78..00000000 --- a/doc/html/styles/prettify-tomorrow.css +++ /dev/null @@ -1,132 +0,0 @@ -/* Tomorrow Theme */ -/* Original theme - https://github.com/chriskempson/tomorrow-theme */ -/* Pretty printing styles. Used with prettify.js. */ -/* SPAN elements with the classes below are added by prettyprint. */ -/* plain text */ -.pln { - color: #4d4d4c; } - -@media screen { - /* string content */ - .str { - color: #718c00; } - - /* a keyword */ - .kwd { - color: #8959a8; } - - /* a comment */ - .com { - color: #8e908c; } - - /* a type name */ - .typ { - color: #4271ae; } - - /* a literal value */ - .lit { - color: #f5871f; } - - /* punctuation */ - .pun { - color: #4d4d4c; } - - /* lisp open bracket */ - .opn { - color: #4d4d4c; } - - /* lisp close bracket */ - .clo { - color: #4d4d4c; } - - /* a markup tag name */ - .tag { - color: #c82829; } - - /* a markup attribute name */ - .atn { - color: #f5871f; } - - /* a markup attribute value */ - .atv { - color: #3e999f; } - - /* a declaration */ - .dec { - color: #f5871f; } - - /* a variable name */ - .var { - color: #c82829; } - - /* a function name */ - .fun { - color: #4271ae; } } -/* Use higher contrast and text-weight for printable form. */ -@media print, projection { - .str { - color: #060; } - - .kwd { - color: #006; - font-weight: bold; } - - .com { - color: #600; - font-style: italic; } - - .typ { - color: #404; - font-weight: bold; } - - .lit { - color: #044; } - - .pun, .opn, .clo { - color: #440; } - - .tag { - color: #006; - font-weight: bold; } - - .atn { - color: #404; } - - .atv { - color: #060; } } -/* Style */ -/* -pre.prettyprint { - background: white; - font-family: Consolas, Monaco, 'Andale Mono', monospace; - font-size: 12px; - line-height: 1.5; - border: 1px solid #ccc; - padding: 10px; } -*/ - -/* Specify class=linenums on a pre to get line numbering */ -ol.linenums { - margin-top: 0; - margin-bottom: 0; } - -/* IE indents via margin-left */ -li.L0, -li.L1, -li.L2, -li.L3, -li.L4, -li.L5, -li.L6, -li.L7, -li.L8, -li.L9 { - /* */ } - -/* Alternate shading for lines */ -li.L1, -li.L3, -li.L5, -li.L7, -li.L9 { - /* */ } diff --git a/doc/html/styles/tui-doc.css b/doc/html/styles/tui-doc.css deleted file mode 100644 index aec9ed94..00000000 --- a/doc/html/styles/tui-doc.css +++ /dev/null @@ -1,485 +0,0 @@ -body { - font-size: 12px; - font-family: Helvetica Neue, Helvetica, Arial, Malgun gothic, '돋움', AppleSDGothicNeo; -} -ul, ol, li {list-style:none; padding-left:0; margin-left:0;} - -/* Navigation - LNB */ -.lnb { - width: 290px; - position: absolute; - bottom: 30px; - top: 0; - overflow: auto; - left: 0; - background-color: #161b1d; - padding: 0 20px; -} -.lnb .logo { - height: 13px; - margin: 20px auto 0; -} -.lnb .title { - text-align: center; - padding: 0 0 15px; -} -.lnb .title .link { - color: #fff; - font-style: italic; -} -.lnb h3 { - font-size: 1.5em; - color: #fa3282; -} -.lnb h3 a { - color: #fa3282; -} -.lnb h3 a:hover { - color: #9a3282; -} -.lnb .lnb-api li, -.lnb .lnb-examples li { - padding-top: 5px; - padding-bottom: 5px; - border-bottom: 1px solid #1f292e; -} -.lnb .lnb-api h3 a { - color: #fa3282; -} -.lnb .lnb-api h3 a:hover { - color: #fa3282; - text-decoration: underline; -} -.lnb .lnb-api a, -.lnb .lnb-examples a { - color: #7cafc2; -} -.lnb .lnb-api a:hover, -.lnb .lnb-examples a:hover { - color: #a3cfdf; -} -.lnb .lnb-api .toggle-subnav { - padding: 0 3px; - margin-bottom: 0; -} -.lnb .lnb-api .toggle-subnav:focus { - outline: 0; -} -.lnb .lnb-api .toggle-subnav { - font-size: 10px; -} -.lnb .member-type { - margin-top: 5px; - margin-left: 5px; - color: #568c3b; - font-weight: normal; - font-size: 10px; - cursor: text; -} -.lnb .inner li { - margin-left: 15px; - border-bottom: 0; - padding-top: 0; - padding-bottom: 0; - color: #bbb; -} -.lnb .inner a { - color: #bbb; -} -.lnb .inner a:hover { - color: #eee; -} - -.lnb .version { - color: #aaa; - font-size: 1.2em; -} - -/* LNB-TAB */ -.lnb-tab { - text-align: center; - text-decoration: none; -} -.lnb-tab li { - display: inline-block; - padding-top: 15px; -} -.lnb-tab li a { - color: #aaa; - font-size: 0.9em; -} -.lnb-tab li.selected a { - color: #fff; - font-size: 1em; -} -.lnb-tab li+li a h4:before { - content: "\007C"; - display: inline-block; - color: #999; - padding: 0 10px; -} - -/* MAIN-CONTENT */ -.main { - padding: 20px; - left: 297px; - right: 0; - top: 0; - bottom: 0; - position: absolute; - overflow: auto; - margin-bottom: 35px; -} -.main article ol, -.main article ul { - margin-left: 15px; -} -.main section header { - padding-top: 0; - border-bottom: 1px solid #999; -} -.main section header h2 { - font-size:18px; - font-weight:bold; - padding-left : 5px; - border-left: 5px solid #dc9656; -} -.main section article { - padding: 10px; -} -.main section article .container-overview { - padding: 15px 15px 0 15px; - border: 1px solid #dedede; - border-radius: 7px; -} -.main section article h3.subsection-title { - font-size:16px; - color: #fa3282; - padding:35px 0 0 5px; - border-bottom: 1px solid #dedede; -} -.main section article dl h4 { - font-size: 12px; - font-weight: bold; -} -.main section article dl h4 .signature { - font-size: 9pt; -} -.main section article dl h4 .type-signature { - font-size: 9pt; - color: #31708f; - font-weight: normal; -} -.main section article dl dt .name { - padding: 3px 10px; - background-color: #f4f7f8; -} -.main section article dl dd { - padding: 0 30px; -} -.main section article dl dd h5{ - font-weight: bold; -} -.main section article .container-source { - margin: -15px -15px 3px 0; - font-weight: normal; - font-size: 8pt; - text-align: right; - padding-right: 10px; -} -.main section article .container-returns { - margin-bottom: 7px; -} -.main section article .container-returns span, -.main section article .container-params table { - border-left: 3px solid #eee; - margin-left: 7px; - padding-left: 3px; - margin-bottom: 5px; -} -.main section article .container-returns p { - display: inline; -} -.main section article .container-properties h5, -.main section article .container-returns h5, -.main section article .container-params h5, -.main section article table th, -.main section article table td.type, -.main section article table td.attributes { - font-family: Verdana, sans-serif; - font-size: 90%; -} -.main section article table, -.main section article table th, -.main section article table td { - font-family: Verdana, sans-serif; - vertical-align: top; - border: 0; - padding: 1px 3px; -} -.main section article table td.name, -.main section article table td.type, -.main section article table td.attributes, -.main section article table td.default { - max-width: 100px; - min-width: 80px; - word-break: break-all; -} -.main section article table td.type, -.main section article table td.attributes { - color: #aaa; -} -.main section article table td p { - padding: 0; - margin: 0; -} -.main section article table td h6 { - padding: 0 0 0 3px; - margin: 3px 0 0 3px; - font-size: 85%; -} -.main section article .container-properties table.props { - margin-top: -3px; -} -.main .main-content article { - padding:0; -} -.main .container-overview, -.main .main-datail { - overflow: hidden; -} -.main .main-detail .tag-source { - float:left; - display:none; -} -.main .main-detail .tag-author { - float:left; -} -.main .main-detail .tag-author a { - color:#181818; - font-size:11px; - text-decoration:none; -} -.linenums li.selected { - background: #faebd7; -} -.iinenums .number { - color: #777; - display: inline-block; - width: 40px; -} - -/* FOOTER */ -footer { - padding-top: 3px; - line-height: 35px; - height: 35px; - position: fixed; - width: 100%; - bottom: 0; - background-color: #00beaa; - color: #ebf8ff; - text-align: center; -} - -/* README*/ -.readme { - font-size: 14px; -} -.readme p, -.readme ul, -.readme ol { - padding: 3px 0 3px 5px; -} -.readme li { - list-style: initial; -} -.readme img { - max-width: 100%; -} -.readme h1 { - font-size:24px; - font-weight:normal; - padding: 10px 0 5px 0; - border-bottom: 1px solid #428bca; -} -.readme pre { - margin: 15px 3px; -} -.readme li p { - padding: 10px 0; - color: #333; -} -.readme p a { - color:#c7254e; -} -.readme h2 { - padding-bottom: 3px; - border-bottom: 1px solid #dedede; - font-size: 22px; -} -.readme h3 { - font-size: 20px; - padding-bottom: 3px; -} - -.readme h4 { - font-size: 18px; -} -.readme h5 { - font-size: 16px; -} -.readme h6 { - font-size: 15px; -} -.readme table { - margin: 5px 30px 20px; -} -.readme table th, -.readme table td { - padding: 2px 20px 2px 5px; - border-bottom: 1px solid #dedede; -} -.readme section header h2 { - font-size:20px; - padding-left:10px; - border-left:5px solid #fa3282; -} -.readme section .container-overview { - color:#333; - border-radius: 2px; - border:1px solid #dedede; - padding:15px 15px 10px; -} -.readme section .container-overview .description { - color:#666; -} -.readme section .container-overview dt {float:left; } -.readme section .container-overview dd {float:left; margin-left:10px; } -.readme blockquote { - padding: inherit; - margin: inherit; - font-size: inherit; - color: #777; -} - -/* Search box */ -.search-container { - position: relative; - padding-bottom: 10px; -} -.search-container input { - padding: 7px; - width: 100%; - color: #aaa; - border: 1px solid #585858; - background-color: #373737; - border-radius: 2px; -} -.search-container a { - color: #fff; -} -.search-container strong { - color: pink; - font-weight: normal; -} -.search-container ul { - font-size: 13px; - position: absolute; - width: 100%; - background-color: #456e82; - border: 1px solid #1f292e; - border-radius: 0 0 2px 2px; - opacity: 0.9; - filter: alpha(opacity=90); -} -.search-container ul li { - text-align: left; - width: 100%; - padding: 4px 0 4px 7px; - overflow: hidden; - border: 0; - cursor: pointer; -} -.search-container ul li:hover, -.search-container ul li.highlight{ - background-color: #fff; -} -.search-container ul li:hover a, -.search-container ul li.highlight a { - color: #1f292e; - text-decoration: underline; -} -.search-container ul li:hover strong, -.search-container ul li.highlight strong { - color: #ff4141; -} -.search-container ul li .group { - font-size: 11px; - color: #ccc; - margin-left: 10px; -} -.search-container ul li:hover .group, -.search-container ul li.highlight .group { - color: #777; -} - -/* ETC */ -.logo { - width: 90px; - vertical-align: initial; -} -.hidden { - display: none; -} -.footer-text { - padding-left: 3px; - display: inline-block; -} -#example-nav { - margin-top: 15px; -} -#resizer { - width: 7px; - position: fixed; - left: 290px; - height: 100%; - background-color: #00beaa; - cursor: col-resize; -} -span.param-type { - color: #aaa; -} -pre.prettyprint { - font-size: 0.9em; - border-radius: 0; -} -span.icon { - font-size: 8pt; - border-radius: 3px; - padding: 1px 2px; -} -span.icon.green { - color: #3c763d; - background-color: #dff0d8; - border-color: #d6e9c6; -} -span.icon.blue { - color: #31708f; - background-color: #d9edf7; - border-color: #bce8f1; -} -span.icon.yellow { - color: #8a6d3b; - background-color: #fcf8e3; - border-color: #faebcc; -} -span.icon.red { - color: #A94443; - background-color: #f2dede; - border-color: #ebccd1; -} -span.arrow { - font-size: 8pt; - padding-right: 5px; -} diff --git a/doc/internal.js b/doc/internal.js index 0639fe5f..f509ff18 100644 --- a/doc/internal.js +++ b/doc/internal.js @@ -23,7 +23,7 @@ function Input(event) { } */ global = null; -/******** +/** * Other properties * * @module other @@ -420,6 +420,7 @@ function MsecTime() { } * Load the contents of a file into a string. Throws exception if loading fails. * @param {string} filename name of file to read. * @returns {string} the contents of the file. + * @throws Throws an error if reading fails. */ function Read(filename) { } @@ -427,6 +428,7 @@ function Read(filename) { } * Get directory listing. * @param {string} dname name of directory to list. * @returns {string[]} array of entry names. + * @throws Throws an error if listing fails. */ function List(dname) { } @@ -434,6 +436,7 @@ function List(dname) { } * Get information about a file / directory. * @param {string} name name of the file to get info for. * @returns {StatInfo} an info object. + * @throws Throws an error if stat fails. */ function Stat(name) { } diff --git a/edit.c b/edit.c index 2d26f4b1..6596dbc8 100644 --- a/edit.c +++ b/edit.c @@ -27,6 +27,7 @@ SOFTWARE. #include #include +#include #include #include #include @@ -43,6 +44,8 @@ SOFTWARE. #define EDI_TEMPLATE BOOT_DIR "template.txt" //!< filename for template file #define EDI_HELPFILE BOOT_DIR "help.txt" //!< filename for help file +#define EDI_CNP_SIZE 4096 //!< initial size of Copy&Paste buffer + /*********************** ** external variables ** ***********************/ @@ -53,15 +56,49 @@ extern syntax_t edi_wordlist[]; ************************/ static char* edi_load(edi_t* edi, char* fname); static char* edi_save(edi_t* edi, char* fname); +static bool edi_do_up(edi_t* edi); +static bool edi_do_down(edi_t* edi); +static void edi_do_left(edi_t* edi); +static void edi_do_right(edi_t* edi); +static void edi_do_bs(edi_t* edi); +static void edi_do_del(edi_t* edi); +static void edi_do_enter(edi_t* edi, bool autoindent); +static void edi_do_wordright(edi_t* edi); +static void edi_do_wordleft(edi_t* edi); +static void edi_do_tab(edi_t* edi); +static void edi_do_save(edi_t* edi); +static void edi_do_goto_line(edi_t* edi); +static bool edi_cmp(char* find, char* txt, int remainder); +static void edi_do_find(edi_t* edi, char find_buffer[80]); +static void edi_do_start(edi_t* edi); +static void edi_do_end(edi_t* edi); +static void edi_do_pageup(edi_t* edi); +static void edi_do_pagedown(edi_t* edi); +static void edi_do_insert_char(edi_t* edi, char ch); +static void edi_clear_cnp(edi_t* edi); +static void edi_copy_line(edi_t* edi, line_t* l, int start, int end, bool newline); +static void edi_do_copy(edi_t* edi); +static void edi_do_cut(edi_t* edi); +static void edi_do_paste(edi_t* edi); +static void edi_do_del_sel(edi_t* edi); +static edi_exit_t edi_loop(edi_t* edi); +static bool edi_colcmp(syntax_t* sy, char* txt, int remainder); +static int edi_syntax(line_t* l, int pos); +static void edi_get_cnp(edi_t* edi, cnp_t* cnp); +static void edi_sel_color(edi_t* edi, int x, int y); +static void edi_draw_line(edi_t* edi, line_t** l, int y, int offset, int line_num); static void edi_redraw(edi_t* edi); -static edi_exit_t edi_loop(edi_t* edi_ptr); static void edi_draw_status(edi_t* edi); static void edi_draw_commands(edi_t* edi); static edi_t* edi_init(char* fname); -static bool edi_colcmp(syntax_t* sy, char* txt, int remainder); -static int edi_syntax(line_t* l, int pos); +static void edi_shutdown(edi_t* edi); +static void edi_start_selection(edi_t* edi); +static void edi_goto_line(edi_t* edi, line_t* l, int line_num); +static void edi_do_del_line(edi_t* edi); +static void edi_do_backtab(edi_t* edi); #define EDI_NUM_COMMANDS 10 //!< number of commands + //! array with command texts char* edi_f_keys[] = {"Help", "", "Save", "Run", "", "", "Find", "", "Log", "Exit"}; @@ -247,21 +284,39 @@ static void edi_do_bs(edi_t* edi) { * @param edi the edi system to work on. */ static void edi_do_del(edi_t* edi) { - if (edi->x == edi->current->length && edi->current->next) { + if (edi->x >= edi->current->length && edi->current->next) { lin_joinnext(edi, edi->current); } else { - if (edi->current->length > 0 && edi->x != edi->current->length) { + if (edi->current->length > 0 && edi->x < edi->current->length) { lin_delch_right(edi, edi->current, edi->x); } } } +/** + * @brief delete current line. + * + * @param edi the edi system to work on. + */ +static void edi_do_del_line(edi_t* edi) { + lin_removeline(edi, edi->current); + if (edi->x > edi->current->length) { + edi->x = edi->current->length; + } +} + /** * @brief editor command: do NEWLINE. * * @param edi the edi system to work on. + * @param autoindent true for autoindentation, false to just insert a new line. */ -static void edi_do_enter(edi_t* edi) { +static void edi_do_enter(edi_t* edi, bool autoindent) { + int leading_spaces = 0; + while ((leading_spaces < edi->current->length) && (edi->current->txt[leading_spaces] == ' ')) { + leading_spaces++; + } + if (edi->x == edi->current->length) { line_t* l = lin_newline(); if (l) { @@ -273,6 +328,11 @@ static void edi_do_enter(edi_t* edi) { } edi->x = 0; edi_do_down(edi); + if (autoindent) { + for (int i = 0; i < leading_spaces; i++) { + edi_do_insert_char(edi, ' '); + } + } } /** @@ -318,6 +378,22 @@ static void edi_do_tab(edi_t* edi) { } } +/** + * @brief remove up to 4 leading spaces. + * + * @param edi the edi system to work on. + */ +static void edi_do_backtab(edi_t* edi) { + int oldX = edi->x; + edi->x = 0; + int i = 0; + while ((i < EDI_TABSIZE) && (edi->current->txt[0] == ' ')) { + edi_do_del(edi); + i++; + } + edi->x = oldX - i; +} + /** * @brief editor command: save the file. * @@ -342,15 +418,28 @@ static void edi_do_goto_line(edi_t* edi) { int line = atoi(buff) - 1; line_t* l = lin_find(edi, line); + if (l) { + edi_goto_line(edi, l, line); + } else { + dia_show_message(edi, "Line not found!"); + } +} + +/** + * @brief go to specific line. + * + * @param edi the edi system to work on. + * @param l the line. + * @param line_num the line number. + */ +static void edi_goto_line(edi_t* edi, line_t* l, int line_num) { if (l) { edi->current = edi->top = l; if (edi->x > edi->current->length) { edi->x = edi->current->length; } edi->y = 0; - edi->num = line; - } else { - dia_show_message(edi, "Line not found!"); + edi->num = line_num; } } @@ -495,6 +584,190 @@ static void edi_do_pagedown(edi_t* edi) { } } +/** + * @brief insert a character at cursor location. + * + * @param edi the edi system to work on. + * @param ch the character to insert (no newlines, these must be inserted using edi_do_enter()). + */ +static void edi_do_insert_char(edi_t* edi, char ch) { + lin_insertch(edi, edi->current, edi->x, ch); + edi_do_right(edi); +} + +/** + * @brief clear current cnp buffer. + * + * @param edi the edi system to work on. + */ +static void edi_clear_cnp(edi_t* edi) { + if (!edi->cnp) { + edi->cnp = malloc(EDI_CNP_SIZE); // TODO: handle alloc failure differently? + assert(edi->cnp); + } + edi->cnp[0] = 0; + edi->cnp_pos = 0; + edi->cnp_size = EDI_CNP_SIZE; +} + +/** + * @brief add the given line to the current cnp-buffer. + * + * @param edi the edi system to work on. + * @param l the line. + * @param start first character of line to add. + * @param end last character of line to add. + * @param newline true to terminate the copy with a newline, false to just copy the line and not add a newline. + */ +static void edi_copy_line(edi_t* edi, line_t* l, int start, int end, bool newline) { + if (end - start + 2 > edi->cnp_size - edi->cnp_pos) { + int newSize = edi->cnp_size * 2; + edi->cnp = realloc(edi->cnp, newSize); // TODO: handle alloc failure differently? + assert(edi->cnp); + edi->cnp_size = newSize; + } + + volatile char* dst = edi->cnp; + volatile char* src = l->txt; + while (start < end) { + dst[edi->cnp_pos] = src[start]; + start++; + edi->cnp_pos++; + } + + // append newline and null byte + if (newline) { + edi->cnp[edi->cnp_pos] = '\n'; + edi->cnp_pos++; + } + edi->cnp[edi->cnp_pos] = 0; +} + +/** + * @brief handle CTRL-C copy command. + * + * @param edi the edi system to work on. + */ +static void edi_do_copy(edi_t* edi) { + if (EDI_IS_SEL(edi)) { + edi_clear_cnp(edi); + cnp_t cnp; + edi_get_cnp(edi, &cnp); + + line_t* sLine = lin_find(edi, cnp.startY - 1); + line_t* eLine = lin_find(edi, cnp.endY - 1); + + if (sLine == eLine) { + // do copy when start==end + edi_copy_line(edi, sLine, cnp.startX, cnp.endX, false); + } else { + // do copy for multiple lines + edi_copy_line(edi, sLine, cnp.startX, sLine->length, true); // copy from first line + sLine = sLine->next; + + // copy in-between lines + while (sLine != eLine) { + edi_copy_line(edi, sLine, 0, sLine->length, true); + EDIF("%s\n", sLine->txt); + + sLine = sLine->next; + } + + // copy last line + edi_copy_line(edi, sLine, 0, cnp.endX, false); + } + } + if (edi->cnp && edi->cnp_pos > 0) { + EDIF("cnp='%s'\n", edi->cnp); + } else { + EDIF("cnp='%s'\n", "EMPTY"); + } +} + +/** + * @brief handle CTRL-X cut command. + * + * @param edi the edi system to work on. + */ +static void edi_do_cut(edi_t* edi) { + edi_do_copy(edi); + edi_do_del_sel(edi); +} + +/** + * @brief handle CTRL-V paste command. + * + * @param edi the edi system to work on. + */ +static void edi_do_paste(edi_t* edi) { + if (edi->cnp_pos) { + if (EDI_IS_SEL(edi)) { + edi_do_del_sel(edi); + } + + // now paste text + for (int i = 0; i < edi->cnp_pos; i++) { + if (edi->cnp[i] == '\n') { + edi_do_enter(edi, false); + } else { + edi_do_insert_char(edi, edi->cnp[i]); + } + } + edi_clear_selection(edi); + } +} + +/** + * @brief delete selected text. + * + * @param edi the edi system to work on. + */ +static void edi_do_del_sel(edi_t* edi) { + if (EDI_IS_SEL(edi)) { + cnp_t cnp; + edi_get_cnp(edi, &cnp); + + line_t* sLine = lin_find(edi, cnp.startY - 1); + line_t* eLine = lin_find(edi, cnp.endY - 1); + + if (sLine == eLine) { + edi->x = cnp.startX; + // delete when start==end + for (int i = 0; i < cnp.endX - cnp.startX; i++) { + lin_delch_right(edi, sLine, cnp.startX); + } + } else { + if (cnp.cursor_at_end) { + // move up until cursor is at line after selection start + while (edi->current != sLine->next) { + edi_do_up(edi); + EDIF("UP cur=%p, sLine=%p, eLine=%p\n", edi->current, sLine, eLine); + } + } else { + // move down once + edi_do_down(edi); + EDIF("DOWN cur=%p, sLine=%p, eLine=%p\n", edi->current, sLine, eLine); + } + + // now we are at the line after selection start, delete all lines until sLine is next to eLine + while (sLine->next != eLine) { + edi_do_del_line(edi); + EDIF("DEL cur=%p, sLine=%p, eLine=%p\n", edi->current, sLine, eLine); + } + edi_do_up(edi); + edi->x = cnp.startX; + + // now lines are next to each other and cursor at start of selection + int del_length = (sLine->length - cnp.startX) + cnp.endX + 1; + for (int i = 0; i < del_length; i++) { + EDIF("Now at %d, '%s'\n", edi->x, sLine->txt); + edi_do_del(edi); + } + } + edi_clear_selection(edi); + } +} + /** * @brief editor input loop. * @@ -508,85 +781,170 @@ static edi_exit_t edi_loop(edi_t* edi) { edi_exit_t exit = EDI_KEEPRUNNING; while (exit == EDI_KEEPRUNNING) { int ch = getxkey(); + + int shift = bioskey(_NKEYBRD_SHIFTSTATUS); + + // EDIF("ch = %02X, shift = %02X\n", ch, shift); + switch (ch) { case K_Left: case K_ELeft: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi_do_left(edi); break; case K_Right: case K_ERight: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi_do_right(edi); break; case K_Down: case K_EDown: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi_do_down(edi); break; case K_Up: case K_EUp: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi_do_up(edi); break; case K_BackSpace: - edi_do_bs(edi); + if (EDI_IS_SEL(edi)) { + edi_do_del_sel(edi); + } else { + edi_do_bs(edi); + } break; case K_Delete: case K_EDelete: - edi_do_del(edi); + if (EDI_IS_SEL(edi)) { + edi_do_del_sel(edi); + } else { + edi_do_del(edi); + } break; case K_Control_D: // delete line - lin_removeline(edi, edi->current); + edi_do_del_line(edi); break; case K_Control_L: // jump to line edi_do_goto_line(edi); break; + case K_Control_C: // Copy + edi_do_copy(edi); + break; + + case K_Control_X: // Cut + edi_do_cut(edi); + break; + + case K_Control_V: // Paste + edi_do_paste(edi); + break; + case K_Return: - edi_do_enter(edi); + edi_do_enter(edi, true); break; case K_Home: case K_EHome: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi->x = 0; break; case K_End: case K_EEnd: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi->x = edi->current->length; break; case K_Control_Home: case K_Control_EHome: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi_do_start(edi); break; case K_Control_End: case K_Control_EEnd: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi_do_end(edi); break; case K_Control_Left: case K_Control_ELeft: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi_do_wordleft(edi); break; case K_Control_Right: case K_Control_ERight: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi_do_wordright(edi); break; case K_PageUp: case K_EPageUp: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi_do_pageup(edi); break; case K_PageDown: case K_EPageDown: + if (EDI_SHIFT_DOWN(shift)) { + edi_start_selection(edi); + } else { + edi_clear_selection(edi); + } edi_do_pagedown(edi); break; @@ -594,11 +952,15 @@ static edi_exit_t edi_loop(edi_t* edi) { edi_do_tab(edi); break; + case K_BackTab: + edi_do_backtab(edi); + break; + case K_F1: // show help dia_show_file(edi, EDI_HELPFILE, &last_help_pos, false); break; - case K_Shift_F1: // context help + case K_Shift_F1: // context help TODO break; case K_F3: // save file @@ -652,8 +1014,8 @@ static edi_exit_t edi_loop(edi_t* edi) { #endif // DEBUG_ENABLED default: if (ch <= '~' && ch >= ' ') { - lin_insertch(edi, edi->current, edi->x, ch); - edi_do_right(edi); + edi_clear_selection(edi); + edi_do_insert_char(edi, ch); } break; } @@ -719,13 +1081,110 @@ static int edi_syntax(line_t* l, int pos) { return 0; } +/** + * @brief convert the current selection in the edi struct to an ordered description of the selection in a cnp struct. + * + * @param edi the edi system to work on. + * @param cnp an ordered version of the start-stop of the selection. + */ +static void edi_get_cnp(edi_t* edi, cnp_t* cnp) { + if (edi->num > edi->sel_line) { // selection stretches downwards + cnp->startX = edi->sel_char; + cnp->startY = edi->sel_line; + cnp->endX = edi->x; + cnp->endY = edi->num; + cnp->cursor_at_end = true; + } else if (edi->num < edi->sel_line) { // selection stretches upwards + cnp->startX = edi->x; + cnp->startY = edi->num; + cnp->endX = edi->sel_char; + cnp->endY = edi->sel_line; + cnp->cursor_at_end = false; + } else { // all on same line + cnp->startY = cnp->endY = edi->num; + + if (edi->x > edi->sel_char) { // selection goes to the right + cnp->startX = edi->sel_char; + cnp->endX = edi->x; + cnp->cursor_at_end = true; + } else if (edi->x < edi->sel_char) { // selection goes to the left + cnp->startX = edi->x; + cnp->endX = edi->sel_char; + cnp->cursor_at_end = false; + } else { // selection is on itself + cnp->startX = cnp->endX = edi->x; + cnp->cursor_at_end = true; + } + } +} + +/** + * @brief set background color for text according to current select status. + * + * @param edi the edi system to work on. + * @param x x-position in whole text. + * @param y y-position in whole text. + */ +static void edi_sel_color(edi_t* edi, int x, int y) { + textbackground(BLACK); + if (EDI_IS_SEL(edi)) { // check selection is active + cnp_t cnp; + edi_get_cnp(edi, &cnp); + + if ((cnp.startY == cnp.endY) && (y == cnp.startY)) { + if ((x >= cnp.startX) && (x < cnp.endX)) { + textbackground(BLUE); + } + } else { + if ((y == cnp.startY) && (x >= cnp.startX)) { + textbackground(BLUE); + } else if ((y > cnp.startY) && (y < cnp.endY)) { + textbackground(BLUE); + } else if ((y == cnp.endY) && (x < cnp.endX)) { + textbackground(BLUE); + } + } + } +} + +/** + * @brief draw given line onto screen. + * + * @param edi the edi system to work on. + * @param l the line to draw. + * @param y y position on the currently drawn screen. + * @param offset x-offset for the currently drawn screen (horizontal scrolling of long lines). + * @param line_num the line number of the currently drawn line (total number). + */ +static void edi_draw_line(edi_t* edi, line_t** l, int y, int offset, int line_num) { + textcolor(WHITE); + gotoxy(1, y); + int hskip = 0; + if (*l) { + for (int i = offset; i < (*l)->length && wherex() < edi->width; i++) { + if (hskip <= 0) { + textcolor(WHITE); + hskip = edi_syntax(*l, i); + } + edi_sel_color(edi, i, line_num); + putch((*l)->txt[i]); + if (hskip > 0) { + hskip--; + } + } + *l = (*l)->next; + } + textbackground(BLACK); + clreol(); +} + /** * @brief redraw editor screen. * * @param edi the edi system to work on. */ static void edi_redraw(edi_t* edi) { - int offset = 0; + int offset = 0; // x drawing offset if (edi->x > edi->width - 1) { offset = edi->x - edi->width + 1; } @@ -738,45 +1197,19 @@ static void edi_redraw(edi_t* edi) { textcolor(WHITE); // if offsets are changes redraw the whole screen - if (edi->last_top != edi->top || edi->last_offset != offset) { + if ((edi->last_top != edi->top) || (edi->last_offset != offset) || EDI_IS_SEL(edi)) { line_t* l = edi->top; + int line_num = edi->num - edi->y; for (int y = 2; y <= edi->height; y++) { - textcolor(WHITE); - gotoxy(1, y); - int hskip = 0; - if (l) { - for (int i = offset; i < l->length && wherex() < edi->width; i++) { - if (hskip <= 0) { - textcolor(WHITE); - hskip = edi_syntax(l, i); - } - putch(l->txt[i]); - if (hskip > 0) { - hskip--; - } - } - l = l->next; - } - clreol(); + edi_draw_line(edi, &l, y, offset, line_num); + line_num++; } edi_draw_commands(edi); } else { // if not, only redraw current line - textcolor(WHITE); - gotoxy(1, edi->y + 2); - int hskip = 0; - for (int i = offset; i < edi->current->length && wherex() < edi->width; i++) { - if (hskip <= 0) { - textcolor(WHITE); - hskip = edi_syntax(edi->current, i); - } - putch(edi->current->txt[i]); - if (hskip > 0) { - hskip--; - } - } - clreol(); + line_t* l = edi->current; + edi_draw_line(edi, &l, edi->y + 2, offset, edi->num); } // set cursor to current position @@ -882,9 +1315,32 @@ static void edi_shutdown(edi_t* edi) { normvideo(); } +/** + * @brief start selection of text at current cursor position. + * + * @param edi the edi system to work on. + */ +static void edi_start_selection(edi_t* edi) { + if (!EDI_IS_SEL(edi)) { + edi->sel_line = edi->num; + edi->sel_char = edi->x; + } +} + /*********************** ** exported functions ** ***********************/ +/** + * @brief clear currently selected text. + * + * @param edi the edi system to work on. + */ +void edi_clear_selection(edi_t* edi) { + edi->sel_line = -1; + edi->sel_char = -1; + edi->last_offset = -1; +} + /** * @brief edi the given file. * diff --git a/edit.h b/edit.h index 8322eae2..9c491de9 100644 --- a/edit.h +++ b/edit.h @@ -59,6 +59,23 @@ SOFTWARE. #define EDIF(str, ...) #endif // DEBUG_ENABLED +#define EDI_SHIFT_DOWN(s) (s & 0x03) +#define EDI_CTRL_DOWN(s) (s & 0x04) +#define EDI_ALT_DOWN(s) (s & 0x08) + +#define EDI_IS_SEL(e) (edi->sel_line != -1) + +//! add a keyord to array +#define EDI_SYNTAX(c, w) \ + { c, sizeof(w) - 1, w } + +#define EDI_SYNTAX_EOL(c, w) \ + { c, -1, w } + +//! end array +#define EDI_SYNTAX_END \ + { 0, 0, NULL } + /************* ** typedefs ** *************/ @@ -88,7 +105,7 @@ typedef struct _edi { line_t *top; //!< first line on screen int width; //!< width of editor window int height; //!< height of editor window - int x; //!< cursor x pos on screen (starting with 0) + int x; //!< cursor x pos on line (starting with 0) int y; //!< cursor y pos on screen (starting with 0) int num; //!< current line number char *name; //!< name of the file @@ -97,6 +114,12 @@ typedef struct _edi { char *msg; //!< message to display in next loop line_t *last_top; //!< last y drawing position int last_offset; //!< last x drawing position + + int sel_line; //!< start of selection (line) + int sel_char; //!< start of selection (char) + char *cnp; //!< current copy buffer + int cnp_pos; //!< current usage of buffer + int cnp_size; //!< max size of buffer } edi_t; //! syntax highlight entry @@ -106,20 +129,19 @@ typedef struct _syntax { char *word; //!< keyword } syntax_t; -//! add a keyord to array -#define EDI_SYNTAX(c, w) \ - { c, sizeof(w) - 1, w } - -#define EDI_SYNTAX_EOL(c, w) \ - { c, -1, w } - -//! end array -#define EDI_SYNTAX_END \ - { 0, 0, NULL } +//! copy and paste helper struct where start and end of the selection is ordered from top to bottom +typedef struct _cnp { + int startX; //!< x-start of selection + int startY; //!< y-start of selection + int endX; //!< x-end of selection + int endY; //!< y-start of selection + bool cursor_at_end; //!< indicates if the cursor is at the end of the selection or the start +} cnp_t; /*********************** ** exported functions ** ***********************/ extern edi_exit_t edi_edit(char *fname); +extern void edi_clear_selection(edi_t *edi); #endif // __EDI_H__ diff --git a/funcs.c b/funcs.c index b919992c..5977486d 100644 --- a/funcs.c +++ b/funcs.c @@ -320,7 +320,7 @@ static void f_MouseSetLimits(js_State *J) { } /** - * @brief mose mouse cursor + * @brief mouse mouse cursor * MouseWarp(x:number, y:number) * * @param J the JS context. diff --git a/gfx.c b/gfx.c index a2292cd0..244076b9 100644 --- a/gfx.c +++ b/gfx.c @@ -34,6 +34,7 @@ SOFTWARE. #include "DOjS.h" #include "color.h" #include "funcs.h" +#include "gfx.h" #include "util.h" /************ diff --git a/ipx.h b/ipx.h index 4867b893..d4348eb1 100644 --- a/ipx.h +++ b/ipx.h @@ -101,6 +101,6 @@ typedef struct { ** exported functions ** ***********************/ extern bool init_ipx(js_State *J); -extern void shutdown_ipx(); +extern void shutdown_ipx(void); #endif // __IPX_H__ diff --git a/jsboot/a3d.js b/jsboot/a3d.js new file mode 100644 index 00000000..361ef978 --- /dev/null +++ b/jsboot/a3d.js @@ -0,0 +1,365 @@ +/* +MIT License + +Copyright (c) 2019 Andre Seidelt + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ + +/** @module a3d */ + +/** + * polytype definition. + */ +POLYTYPE = { + FLAT: 0, + GCOL: 1, + GRGB: 2, + ATEX: 3, + PTEX: 4, + ATEX_MASK: 5, + PTEX_MASK: 6, + ATEX_LIT: 7, + PTEX_LIT: 8, + ATEX_MASK_LIT: 9, + PTEX_MASK_LIT: 10, + ATEX_TRANS: 11, + PTEX_TRANS: 12, + ATEX_MASK_TRANS: 13, + PTEX_MASK_TRANS: 14, + MAX: 15, + ZBUF: 16 +}; + +function GetEmptyMatrix() { + return { + v: [ + /* 3x3 */ + [0, 0, 0], + [0, 0, 0], + [0, 0, 0] + ], + + /* zero translation */ + t: [0, 0, 0] + }; +} + +function GetIdentityMatrix() { + return { + v: [ + /* 3x3 identity */ + [1.0, 0.0, 0.0], + [0.0, 1.0, 0.0], + [0.0, 0.0, 1.0] + ], + + /* zero translation */ + t: [0.0, 0.0, 0.0] + }; +} + +function GetTranslationMatrix(x, y, z) { + var m = GetIdentityMatrix(); + + m.t[0] = x; + m.t[1] = y; + m.t[2] = z; + + return m; +} + +function GetScalingMatrix(x, y, z) { + var m = GetIdentityMatrix(); + + m.v[0][0] = x; + m.v[1][1] = y; + m.v[2][2] = z; + + return m; +} + +function GetXRotatateMatrix(r) { + var c = Math.cos(r); + var s = Math.sin(r); + + m = GetIdentityMatrix(); + + m.v[1][1] = c; + m.v[1][2] = -s; + + m.v[2][1] = s; + m.v[2][2] = c; + + return m; +} + +function GetYRotatateMatrix(r) { + var c = Math.cos(r); + var s = Math.sin(r); + + m = GetIdentityMatrix(); + + m.v[0][0] = c; + m.v[0][2] = s; + + m.v[2][0] = -s; + m.v[2][2] = c; + + return m; +} + +function GetZRotatateMatrix(r) { + var c = Math.cos(r); + var s = Math.sin(r); + + m = GetIdentityMatrix(); + + m.v[0][0] = c; + m.v[0][1] = -s; + + m.v[1][0] = s; + m.v[1][1] = c; + + return m; +} + +function GetRotationMatrix(x, y, z) { + var sin_x = Math.sin(x); + var cos_x = Math.cos(x); + + var sin_y = Math.sin(y); + var cos_y = Math.cos(y); + + var sin_z = Math.sin(z); + var cos_z = Math.cos(z); + + var sinx_siny = sin_x * sin_y; + var cosx_siny = cos_x * sin_y; + + m.v[0][0] = cos_y * cos_z; + m.v[0][1] = cos_y * sin_z; + m.v[0][2] = -sin_y; + + m.v[1][0] = (sinx_siny * cos_z) - (cos_x * sin_z); + m.v[1][1] = (sinx_siny * sin_z) + (cos_x * cos_z); + m.v[1][2] = (cosx_siny * sin_z) - (sin_x * cos_z); + + m.v[2][0] = (cosx_siny * cos_z) + (sin_x * sin_z); + m.v[2][1] = sin_x * cos_y; + m.v[2][2] = cos_x * cos_y; + + m.t[0] = m.t[1] = m.t[2] = 0; + + return m; +} + +function GetAlignMatrix(m, xfront, yfront, zfront, xup, yup, zup) { + xfront = -xfront; + yfront = -yfront; + zfront = -zfront; + + var nfront = NormalizeVector(xfront, yfront, zfront); + var right = CrossProduct(xup, yup, zup, nfront[0], nfront[1], nfront[2]); + var nright = NormalizeVector(right[0], right[1], right[2]); + var up = CrossProduct(nfront[0], nfront[1], nfront[2], nright[0], nright[1], nright[2]); + /* No need to normalize up here, since right and front are perpendicular and normalized. */ + + m.v[0][0] = nright[0]; + m.v[0][1] = up[0]; + m.v[0][2] = nfront[0]; + + m.v[1][0] = nright[1]; + m.v[1][1] = up[1]; + m.v[1][2] = nfront[1]; + + m.v[2][0] = nright[2]; + m.v[2][1] = up[2]; + m.v[2][2] = nfront[2]; + + m.t[0] = m.t[1] = m.t[2] = 0; +} + +function GetVectorRotationMatrix(m, x, y, z, a) { + var aTmp = a * Math.PI / 128.0; + var s = Math.sin(aTmp); + var c = Math.cos(aTmp); + var cc = 1 - c; + var norm = NormalizeVector(x, y, z); + x = norm[0]; + y = norm[1]; + z = norm[2]; + + m.v[0][0] = (cc * x * x) + c; + m.v[0][1] = (cc * x * y) + (z * s); + m.v[0][2] = (cc * x * z) - (y * s); + + m.v[1][0] = (cc * x * y) - (z * s); + m.v[1][1] = (cc * y * y) + c; + m.v[1][2] = (cc * z * y) + (x * s); + + m.v[2][0] = (cc * x * z) + (y * s); + m.v[2][1] = (cc * y * z) - (x * s); + m.v[2][2] = (cc * z * z) + c; + + m.t[0] = m.t[1] = m.t[2] = 0; +} + +function GetTransformationMatrix(m, scale, xrot, yrot, zrot, x, y, z) { + var sin_x = Math.sin(x); + var cos_x = Math.cos(x); + + var sin_y = Math.sin(y); + var cos_y = Math.cos(y); + + var sin_z = Math.sin(z); + var cos_z = Math.cos(z); + + var sinx_siny = sin_x * sin_y; + var cosx_siny = cos_x * sin_y; + + m.v[0][0] = (cos_y * cos_z) * scale; + m.v[0][1] = (cos_y * sin_z) * scale; + m.v[0][2] = (-sin_y) * scale; + + m.v[1][0] = ((sinx_siny * cos_z) - (cos_x * sin_z)) * scale; + m.v[1][1] = ((sinx_siny * sin_z) + (cos_x * cos_z)) * scale; + m.v[1][2] = (sin_x * cos_y) * scale; + + m.v[2][0] = ((cosx_siny * cos_z) + (sin_x * sin_z)) * scale; + m.v[2][1] = ((cosx_siny * sin_z) - (sin_x * cos_z)) * scale; + m.v[2][2] = (cos_x * cos_y) * scale; + + m.t[0] = x; + m.t[1] = y; + m.t[2] = z; +} + +function GetCameraMatrix(m, x, y, z, xfront, yfront, zfront, xup, yup, zup, fov, aspect) { + /* make 'in-front' into a unit vector, and negate it */ + var nfront = NormalizeVector(xfront, yfront, zfront); + xfront = -nfront[0]; + yfront = -nfront[1]; + zfront = -nfront[2]; + + /* make sure 'up' is at right angles to 'in-front', and normalize */ + d = DotProduct(xup, yup, zup, xfront, yfront, zfront); + xup -= d * xfront; + yup -= d * yfront; + zup -= d * zfront; + var nup = NormalizeVector(xup, yup, zup); + + /* calculate the 'sideways' vector */ + var side = CrossProduct(nup[0], nup[1], nup[2], xfront, yfront, zfront); + + /* set matrix rotation parameters */ + var camera = GetEmptyMatrix(); + camera.v[0][0] = side[0]; + camera.v[0][1] = side[1]; + camera.v[0][2] = side[2]; + + camera.v[1][0] = nup[0]; + camera.v[1][1] = nup[1]; + camera.v[1][2] = nup[2] + + camera.v[2][0] = nfront[0]; + camera.v[2][1] = nfront[1]; + camera.v[2][2] = nfront[2]; + + /* set matrix translation parameters */ + camera.t[0] = -(x * side[0] + y * side[1] + z * side[2]); + camera.t[1] = -(x * up[0] + y * up[1] + z * up[2]); + camera.t[2] = -(x * nfront[0] + y * nfront[1] + z * nfront[2]); + + /* construct a scaling matrix to deal with aspect ratio and FOV */ + var width = Math.tan(64.0 - fov / 2); + var scale = GetScalingMatrix(width, -aspect * width, -1.0); + + /* combine the camera and scaling matrices */ + return MatrixMul(camera, scale); +} + +function QTranslateMatrix(m, x, y, z) { + m.t[0] += x; + m.t[1] += y; + m.t[2] += z; +} + +function QScaleMatrix(m, scale) { + for (var i = 0; i < 3; i++) { + for (var j = 0; j < 3; j++) { + m.v[i][j] *= scale; + } + } +} + +function MatrixMul(m1, m2) { + var out = GetEmptyMatrix(); + + for (var i = 0; i < 3; i++) { + for (var j = 0; j < 3; j++) { + out.v[i][j] = (m1.v[0][j] * m2.v[i][0]) + + (m1.v[1][j] * m2.v[i][1]) + + (m1.v[2][j] * m2.v[i][2]); + } + + out.t[i] = (m1.t[0] * m2.v[i][0]) + + (m1.t[1] * m2.v[i][1]) + + (m1.t[2] * m2.v[i][2]) + + m2.t[i]; + } + return out; +} + +function VectorLength_f(x, y, z) { + return Math.sqrt(x * x + y * y + z * z); +} + +function NormalizeVector(x, y, z) { + var length = 1.0 / VectorLength(x, y, z); + + x *= length; + y *= length; + z *= length; + + return [x, y, z, 0, 0, 0]; +} + +function DotProduct(x1, y1, z1, x2, y2, z2) { + return (x1 * x2) + (y1 * y2) + (z1 * z2); +} + +function CrossProduct(x1, y1, z1, x2, y2, z2) { + var xout = (y1 * z2) - (z1 * y2); + var yout = (z1 * x2) - (x1 * z2); + var zout = (x1 * y2) - (y1 * x2); + + return [xout, yout, zout, 0, 0, 0]; +} + +function PolygonZNormal(v1, v2, v3) { + return ((v2[0] - v1[0]) * (v3[1] - v2[1])) - ((v3[0] - v2[0]) * (v2[1] - v1[1])); +} + +function ApplyMatrix(m, x, y, z) { + var xout = (x * m.v[0][0] + y * m.v[0][1] + z * m.v[0][2] + m.t[0]); + var yout = (x * m.v[1][0] + y * m.v[1][1] + z * m.v[1][2] + m.t[1]); + var zout = (x * m.v[2][0] + y * m.v[2][1] + z * m.v[2][2] + m.t[2]); + + return [xout, yout, zout, 0, 0, 0]; +} + diff --git a/jsboot/help.txt b/jsboot/help.txt index 2385f4ab..02ddf099 100644 --- a/jsboot/help.txt +++ b/jsboot/help.txt @@ -16,17 +16,23 @@ Usage: DOjS.EXE [-r] [-s

    ::]