From 8cb33a5bab793c01e6bc8db8456747dd404d5f52 Mon Sep 17 00:00:00 2001 From: Ilu Date: Sun, 26 May 2019 12:33:02 +0200 Subject: [PATCH] Version 0.9.6 (the crashing creation) --- CHANGELOG.md | 10 + DOjS.c | 4 +- DOjS.h | 4 +- allegro-4.2.2-xc-master/xmake.sh | 1 + color.c | 7 +- doc/html/ArcInfo.html | 2 +- doc/html/Bitmap.html | 2 +- doc/html/Event.html | 2 +- doc/html/File.html | 2 +- doc/html/Font.html | 2 +- doc/html/IpxAddress.html | 2 +- doc/html/IpxPacket.html | 2 +- doc/html/MemInfo.html | 2 +- doc/html/Midi.html | 2 +- doc/html/Sample.html | 2 +- doc/html/StatInfo.html | 2 +- doc/html/doc_classes.js.html | 2 +- doc/html/doc_internal.js.html | 2 +- doc/html/doc_objects.js.html | 2 +- doc/html/global.html | 2 +- doc/html/index.html | 2 +- doc/html/jsboot_color.js.html | 2 +- doc/html/jsboot_file.js.html | 2 +- doc/html/jsboot_func.js.html | 2 +- doc/html/jsboot_ipx.js.html | 2 +- doc/html/jsboot_p5.js.html | 7 +- doc/html/jsboot_p5color.js.html | 4 +- doc/html/jsboot_p5env.js.html | 2 +- doc/html/jsboot_p5input.js.html | 2 +- doc/html/jsboot_p5math.js.html | 2 +- doc/html/jsboot_p5shape.js.html | 17 +- doc/html/jsboot_p5trans.js.html | 2 +- doc/html/jsboot_p5typo.js.html | 8 +- doc/html/jsboot_p5util.js.html | 2 +- doc/html/jsboot_p5vect.js.html | 2 +- doc/html/module-color.html | 2 +- doc/html/module-gfx.html | 2 +- doc/html/module-ipx.html | 6 +- doc/html/module-midi.html | 2 +- doc/html/module-other.html | 2 +- doc/html/module-p5compat-Color.html | 2 +- doc/html/module-p5compat.html | 37877 ++++++++-------- doc/html/p5compat.PVector.html | 2 +- ...p5compat.module_NumberDict-NumberDict.html | 2 +- doc/html/p5compat.module_NumberDict.html | 2 +- doc/html/p5compat.module_PVector.html | 2 +- ...p5compat.module_StringDict-StringDict.html | 2 +- doc/html/p5compat.module_StringDict.html | 2 +- .../p5compat.module_TypedDict-TypedDict.html | 2 +- doc/html/p5compat.module_TypedDict.html | 2 +- examples/ant2.js | 119 + examples/arcer.js | 24 +- examples/arcer2.js | 4 +- examples/arcer3.js | 2 +- examples/eyes.js | 45 + examples/eyes2.js | 47 + examples/fntcnt.js | 69 + examples/mand2.js | 114 + examples/mand3.js | 111 + examples/p5head.js | 110 + examples/unigen.js | 79 + font.c | 6 +- gfx.c | 2 +- jsboot/p5.js | 5 - jsboot/p5color.js | 2 +- jsboot/p5shape.js | 15 +- jsboot/p5typo.js | 6 +- mujs-1.0.5/Makefile | 28 +- mujs-1.0.5/docs/reference.html | 5 +- mujs-1.0.5/jscompile.c | 353 +- mujs-1.0.5/jscompile.h | 11 +- mujs-1.0.5/jsdate.c | 1374 +- mujs-1.0.5/jsdump.c | 25 +- mujs-1.0.5/jsfunction.c | 6 +- mujs-1.0.5/jsi.h | 4 +- mujs-1.0.5/jslex.c | 11 +- mujs-1.0.5/jsmath.c | 44 +- mujs-1.0.5/jsnumber.c | 55 +- mujs-1.0.5/jsobject.c | 13 +- mujs-1.0.5/jsparse.c | 111 +- mujs-1.0.5/jsregexp.c | 12 +- mujs-1.0.5/jsrun.c | 111 +- mujs-1.0.5/jsstring.c | 20 +- mujs-1.0.5/jsvalue.c | 9 +- mujs-1.0.5/jsvalue.h | 1 + mujs-1.0.5/main.c | 15 +- mujs-1.0.5/mujs.h | 6 +- mujs-1.0.5/opnames.h | 9 +- mujs-1.0.5/regexp.c | 79 +- mujs-1.0.5/utftype.c | 44 +- tests/colorp5.js | 35 + 91 files changed, 20694 insertions(+), 20470 deletions(-) create mode 100644 examples/ant2.js create mode 100644 examples/eyes.js create mode 100644 examples/eyes2.js create mode 100644 examples/fntcnt.js create mode 100644 examples/mand2.js create mode 100644 examples/mand3.js create mode 100644 examples/p5head.js create mode 100644 examples/unigen.js create mode 100644 tests/colorp5.js diff --git a/CHANGELOG.md b/CHANGELOG.md index f83abd64..245c9f39 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +**Version 0.9.6 (the crashing creation)** +* Fixed massive crash when using the builtin font in p5 compatibility layer +* Some API improvements +* Even more examples and a DOjS presentation done with DOjS +* Small fixes for `image()`, `arc()` and `text()` in p5 compatibility layer +* Enabled transparency for 24bpp and 32bpp mode (was only 32bpp before). +* Added useable alpha value to the return value of `GetPixel()` +* As always: more examples +* updated MuJS to latest version from http://git.ghostscript.com/?p=mujs.git;a=summary + **Version 0.9.5 (the changed creation)** * Replaced libmikmod, GRX and all sound code by Allegro 4.2.2. * Transparency/RGBA now works. diff --git a/DOjS.c b/DOjS.c index 4a1fb284..4ffeb223 100644 --- a/DOjS.c +++ b/DOjS.c @@ -244,9 +244,9 @@ static void run_script(char *script, int width, int bpp, bool no_sound, bool no_ // ut_dumpVideoModes(); #endif - if (bpp < 32) { + if (bpp < 24) { no_alpha = true; - LOG("BPP < 32, disabling alpha\n"); + LOG("BPP < 24, disabling alpha\n"); } // detect hardware and initialize subsystems diff --git a/DOjS.h b/DOjS.h index 0f49aee0..90bbc981 100644 --- a/DOjS.h +++ b/DOjS.h @@ -38,8 +38,8 @@ SOFTWARE. #define SYSINFO ">>> " //!< logfile line prefix for system messages -#define DOSJS_VERSION 0.95 //!< version number -#define DOSJS_VERSION_STR "V0.95" //!< version number as string +#define DOSJS_VERSION 0.96 //!< version number +#define DOSJS_VERSION_STR "V0.96" //!< version number as string #define BOOT_DIR "JSBOOT/" //!< directory with boot files. diff --git a/allegro-4.2.2-xc-master/xmake.sh b/allegro-4.2.2-xc-master/xmake.sh index 92e10c5f..9687abc2 100644 --- a/allegro-4.2.2-xc-master/xmake.sh +++ b/allegro-4.2.2-xc-master/xmake.sh @@ -27,6 +27,7 @@ MINGDIR=$INSTALL_BASE DJDIR=$INSTALL_BASE NATIVEPATH=$PATH PATH=$XC_PATH:$NATIVEPATH +DEBUGMODE=1 export CROSSCOMPILE MINGDIR DJDIR NATIVEPATH PATH XPREFIX diff --git a/color.c b/color.c index 6d33f607..35b98e9e 100644 --- a/color.c +++ b/color.c @@ -36,7 +36,12 @@ static void f_Color(js_State *J) { js_error(J, "Color needs four integer arguments"); return; } else { - js_pushnumber(J, makeacol(js_toint16(J, 1), js_toint16(J, 2), js_toint16(J, 3), js_toint16(J, 4))); + int r = js_toint16(J, 1); + int g = js_toint16(J, 2); + int b = js_toint16(J, 3); + int a = js_toint16(J, 4); + uint32_t rgba = makeacol(r, g, b, a); + js_pushnumber(J, rgba); } } diff --git a/doc/html/ArcInfo.html b/doc/html/ArcInfo.html index 28b748d9..0be3e89f 100644 --- a/doc/html/ArcInfo.html +++ b/doc/html/ArcInfo.html @@ -32,7 +32,7 @@

Class: ArcInfo

- +
diff --git a/doc/html/Bitmap.html b/doc/html/Bitmap.html index d1878e6c..2dce294b 100644 --- a/doc/html/Bitmap.html +++ b/doc/html/Bitmap.html @@ -32,7 +32,7 @@

Class: Bitmap

- +
diff --git a/doc/html/Event.html b/doc/html/Event.html index d3b9895a..02096d2a 100644 --- a/doc/html/Event.html +++ b/doc/html/Event.html @@ -32,7 +32,7 @@

Class: Event

- +
diff --git a/doc/html/File.html b/doc/html/File.html index 6306036b..78f62ae5 100644 --- a/doc/html/File.html +++ b/doc/html/File.html @@ -32,7 +32,7 @@

Class: File

- +
diff --git a/doc/html/Font.html b/doc/html/Font.html index 63838b97..c02f8c57 100644 --- a/doc/html/Font.html +++ b/doc/html/Font.html @@ -32,7 +32,7 @@

Class: Font

- +
diff --git a/doc/html/IpxAddress.html b/doc/html/IpxAddress.html index e9af2d76..8eed606d 100644 --- a/doc/html/IpxAddress.html +++ b/doc/html/IpxAddress.html @@ -32,7 +32,7 @@

Class: IpxAddress

- +
diff --git a/doc/html/IpxPacket.html b/doc/html/IpxPacket.html index 3e23539b..2fcd02aa 100644 --- a/doc/html/IpxPacket.html +++ b/doc/html/IpxPacket.html @@ -32,7 +32,7 @@

Class: IpxPacket

- +
diff --git a/doc/html/MemInfo.html b/doc/html/MemInfo.html index 6f1f0b90..a2ae9eb7 100644 --- a/doc/html/MemInfo.html +++ b/doc/html/MemInfo.html @@ -32,7 +32,7 @@

Class: MemInfo

- +
diff --git a/doc/html/Midi.html b/doc/html/Midi.html index 49ebac85..752d1187 100644 --- a/doc/html/Midi.html +++ b/doc/html/Midi.html @@ -32,7 +32,7 @@

Class: Midi

- +
diff --git a/doc/html/Sample.html b/doc/html/Sample.html index 9e22dea0..78255660 100644 --- a/doc/html/Sample.html +++ b/doc/html/Sample.html @@ -32,7 +32,7 @@

Class: Sample

- +
diff --git a/doc/html/StatInfo.html b/doc/html/StatInfo.html index 02a7b4ab..8cb51315 100644 --- a/doc/html/StatInfo.html +++ b/doc/html/StatInfo.html @@ -32,7 +32,7 @@

Class: StatInfo

- +
diff --git a/doc/html/doc_classes.js.html b/doc/html/doc_classes.js.html index 0c75c363..dda4bd8d 100644 --- a/doc/html/doc_classes.js.html +++ b/doc/html/doc_classes.js.html @@ -34,7 +34,7 @@

Source: doc/classes.js

- +
diff --git a/doc/html/doc_internal.js.html b/doc/html/doc_internal.js.html index 4a8b2f78..eb154935 100644 --- a/doc/html/doc_internal.js.html +++ b/doc/html/doc_internal.js.html @@ -34,7 +34,7 @@

Source: doc/internal.js

- +
diff --git a/doc/html/doc_objects.js.html b/doc/html/doc_objects.js.html index 806afb2f..0a20b3f6 100644 --- a/doc/html/doc_objects.js.html +++ b/doc/html/doc_objects.js.html @@ -34,7 +34,7 @@

Source: doc/objects.js

- +
diff --git a/doc/html/global.html b/doc/html/global.html index e225a9f4..5a14c29a 100644 --- a/doc/html/global.html +++ b/doc/html/global.html @@ -32,7 +32,7 @@

Global

- +
diff --git a/doc/html/index.html b/doc/html/index.html index 57deb535..f4abc5b4 100644 --- a/doc/html/index.html +++ b/doc/html/index.html @@ -32,7 +32,7 @@

Home

- +
diff --git a/doc/html/jsboot_color.js.html b/doc/html/jsboot_color.js.html index 7303dc10..786f948c 100644 --- a/doc/html/jsboot_color.js.html +++ b/doc/html/jsboot_color.js.html @@ -34,7 +34,7 @@

Source: jsboot/color.js

- +
diff --git a/doc/html/jsboot_file.js.html b/doc/html/jsboot_file.js.html index c7078ed5..d6519c4f 100644 --- a/doc/html/jsboot_file.js.html +++ b/doc/html/jsboot_file.js.html @@ -34,7 +34,7 @@

Source: jsboot/file.js

- +
diff --git a/doc/html/jsboot_func.js.html b/doc/html/jsboot_func.js.html index 6e5a3e6e..9ce757f6 100644 --- a/doc/html/jsboot_func.js.html +++ b/doc/html/jsboot_func.js.html @@ -34,7 +34,7 @@

Source: jsboot/func.js

- +
diff --git a/doc/html/jsboot_ipx.js.html b/doc/html/jsboot_ipx.js.html index 4e29e819..18b79ac1 100644 --- a/doc/html/jsboot_ipx.js.html +++ b/doc/html/jsboot_ipx.js.html @@ -34,7 +34,7 @@

Source: jsboot/ipx.js

- +
diff --git a/doc/html/jsboot_p5.js.html b/doc/html/jsboot_p5.js.html index 512ca52d..e7ab796b 100644 --- a/doc/html/jsboot_p5.js.html +++ b/doc/html/jsboot_p5.js.html @@ -34,7 +34,7 @@

Source: jsboot/p5.js

- +
@@ -263,11 +263,6 @@

Source: jsboot/p5.js

*/ exports.settings = function () { }; -/** - * ignored - */ -exports.imageMode = function () { }; - /** * ignored */ diff --git a/doc/html/jsboot_p5color.js.html b/doc/html/jsboot_p5color.js.html index 4d38c5e5..77a874df 100644 --- a/doc/html/jsboot_p5color.js.html +++ b/doc/html/jsboot_p5color.js.html @@ -34,7 +34,7 @@

Source: jsboot/p5color.js

- +
@@ -2070,7 +2070,7 @@

Source: jsboot/p5color.js

*/ exports.fill = function () { if (arguments[0] instanceof p5Color) { - _currentEnv._fill = arguments[0].toAllegro() + _currentEnv._fill = arguments[0].toAllegro(); } else { _currentEnv._fill = new p5Color(arguments).toAllegro(); } diff --git a/doc/html/jsboot_p5env.js.html b/doc/html/jsboot_p5env.js.html index 45fc7854..58d77d9f 100644 --- a/doc/html/jsboot_p5env.js.html +++ b/doc/html/jsboot_p5env.js.html @@ -34,7 +34,7 @@

Source: jsboot/p5env.js

- +
diff --git a/doc/html/jsboot_p5input.js.html b/doc/html/jsboot_p5input.js.html index ab8484ed..f36ca317 100644 --- a/doc/html/jsboot_p5input.js.html +++ b/doc/html/jsboot_p5input.js.html @@ -34,7 +34,7 @@

Source: jsboot/p5input.js

- +
diff --git a/doc/html/jsboot_p5math.js.html b/doc/html/jsboot_p5math.js.html index ba94875d..5154b58f 100644 --- a/doc/html/jsboot_p5math.js.html +++ b/doc/html/jsboot_p5math.js.html @@ -34,7 +34,7 @@

Source: jsboot/p5math.js

- +
diff --git a/doc/html/jsboot_p5shape.js.html b/doc/html/jsboot_p5shape.js.html index 898c99ef..4cc643b9 100644 --- a/doc/html/jsboot_p5shape.js.html +++ b/doc/html/jsboot_p5shape.js.html @@ -34,7 +34,7 @@

Source: jsboot/p5shape.js

- +
@@ -113,13 +113,12 @@

Source: jsboot/p5shape.js

* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE); */ exports.arc = function (x, y, w, h, start, end, style) { - //TODO: style = style || ARC.OPEN; - - if (_currentEnv._fill != NO_COLOR) { - FilledEllipseArc(x, y, w, h, start * 10 * RAD_TO_DEG, end * 10 * RAD_TO_DEG, _currentEnv._fill); - } if (_currentEnv._stroke != NO_COLOR) { - EllipseArc(x, y, w, h, start * 10 * RAD_TO_DEG, end * 10 * RAD_TO_DEG, _currentEnv._stroke); + 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); + } } }; @@ -786,8 +785,8 @@

Source: jsboot/p5shape.js

exports.image = function (img, x, y) { var x1 = x; var y1 = y; - var w = img.width; - var h = img.height; + var w = img.bm.width; + var h = img.bm.height; if (_currentEnv._imageMode === CORNER) { } else if (_currentEnv._imageMode === CORNERS) { diff --git a/doc/html/jsboot_p5trans.js.html b/doc/html/jsboot_p5trans.js.html index 5da44175..866f5ba9 100644 --- a/doc/html/jsboot_p5trans.js.html +++ b/doc/html/jsboot_p5trans.js.html @@ -34,7 +34,7 @@

Source: jsboot/p5trans.js

- +
diff --git a/doc/html/jsboot_p5typo.js.html b/doc/html/jsboot_p5typo.js.html index e6f9a675..72612c29 100644 --- a/doc/html/jsboot_p5typo.js.html +++ b/doc/html/jsboot_p5typo.js.html @@ -34,7 +34,7 @@

Source: jsboot/p5typo.js

- +
@@ -148,13 +148,13 @@

Source: jsboot/p5typo.js

switch (_currentEnv._txtAlignX) { case LEFT: - _currentEnv._font.DrawStringLeft(x, y, str, _currentEnv._fill); + _currentEnv._font.DrawStringLeft(x, y, str, _currentEnv._fill, NO_COLOR); break; case CENTER: - _currentEnv._font.DrawStringCenter(x, y, str, _currentEnv._fill); + _currentEnv._font.DrawStringCenter(x, y, str, _currentEnv._fill, NO_COLOR); break; case RIGHT: - _currentEnv._font.DrawStringRight(x, y, str, _currentEnv._fill); + _currentEnv._font.DrawStringRight(x, y, str, _currentEnv._fill, NO_COLOR); break; } }; diff --git a/doc/html/jsboot_p5util.js.html b/doc/html/jsboot_p5util.js.html index 8ffcb04c..4a4183cc 100644 --- a/doc/html/jsboot_p5util.js.html +++ b/doc/html/jsboot_p5util.js.html @@ -34,7 +34,7 @@

Source: jsboot/p5util.js

- +
diff --git a/doc/html/jsboot_p5vect.js.html b/doc/html/jsboot_p5vect.js.html index 2642ebf7..a736183f 100644 --- a/doc/html/jsboot_p5vect.js.html +++ b/doc/html/jsboot_p5vect.js.html @@ -34,7 +34,7 @@

Source: jsboot/p5vect.js

- +
diff --git a/doc/html/module-color.html b/doc/html/module-color.html index 0365fcea..7e52cbfe 100644 --- a/doc/html/module-color.html +++ b/doc/html/module-color.html @@ -32,7 +32,7 @@

Module: color

- +
diff --git a/doc/html/module-gfx.html b/doc/html/module-gfx.html index cdc5c61b..52ad0a84 100644 --- a/doc/html/module-gfx.html +++ b/doc/html/module-gfx.html @@ -32,7 +32,7 @@

Module: gfx

- +
diff --git a/doc/html/module-ipx.html b/doc/html/module-ipx.html index e3fb4d60..c69861f6 100644 --- a/doc/html/module-ipx.html +++ b/doc/html/module-ipx.html @@ -32,7 +32,7 @@

Module: ipx

- +
@@ -58,8 +58,6 @@

ipx

-
IPX network functions.
- @@ -2188,6 +2186,8 @@

ipx

+
IPX network functions.
+ diff --git a/doc/html/module-midi.html b/doc/html/module-midi.html index 1b9a18e6..528fa4fe 100644 --- a/doc/html/module-midi.html +++ b/doc/html/module-midi.html @@ -32,7 +32,7 @@

Module: midi

    - +
    diff --git a/doc/html/module-other.html b/doc/html/module-other.html index 48bd14f0..56721b2f 100644 --- a/doc/html/module-other.html +++ b/doc/html/module-other.html @@ -32,7 +32,7 @@

    Module: other

    - +
    diff --git a/doc/html/module-p5compat-Color.html b/doc/html/module-p5compat-Color.html index 9c227bbf..361b76d5 100644 --- a/doc/html/module-p5compat-Color.html +++ b/doc/html/module-p5compat-Color.html @@ -32,7 +32,7 @@

    Class: Color

    - +
    diff --git a/doc/html/module-p5compat.html b/doc/html/module-p5compat.html index 725df826..3d7d8c1b 100644 --- a/doc/html/module-p5compat.html +++ b/doc/html/module-p5compat.html @@ -32,7 +32,7 @@

    Module: p5compat

    - +
    @@ -3276,7 +3276,7 @@

    jsboot/p5shape.js, - line 551 + line 550

    @@ -3820,7 +3820,7 @@

    jsboot/p5.js, - line 236 + line 231

    @@ -3902,14 +3902,14 @@

    -

    +

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

    @@ -3991,14 +3991,14 @@

    -

    +

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

    @@ -4080,14 +4080,14 @@

    -

    +

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

    @@ -4169,14 +4169,14 @@

    -

    +

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

    @@ -4258,14 +4258,14 @@

    -

    +

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

    @@ -4347,14 +4347,14 @@

    -

    +

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

    @@ -4436,14 +4436,14 @@

    -

    +

    - static tint() + inner abs(n) → {Number}
    - jsboot/p5.js, - line 226 + jsboot/p5math.js, + line 59

    @@ -4455,7 +4455,7 @@

    - ignored + Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive.
    @@ -4466,6 +4466,58 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    n + + +Number + + + + number to compute
    + +
    + + + @@ -4476,7 +4528,26 @@

    +
    +
    Returns:
    + + + + +Number + + + + + +- absolute value of given number + + + + + +
    @@ -4517,6 +4588,11 @@

    +

    Example
    + + 
    function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
    + + @@ -4525,14 +4601,14 @@

    -

    +

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

    @@ -4544,7 +4620,7 @@

    - Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. + 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).
    @@ -4580,7 +4656,7 @@

    Parameters:
    - n + value @@ -4596,7 +4672,7 @@
    Parameters:
    - number to compute + the value whose arc cosine is to be returned @@ -4630,7 +4706,7 @@
    Returns:
    -- absolute value of given number +- the arc cosine of the given value @@ -4679,7 +4755,7 @@
    Returns:
    Example
    - 
    function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}
    + 
    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);
    @@ -4690,14 +4766,14 @@
    Example
    -

    +

    - inner acos(value) → {Number} + inner alpha(color) → {Number}
    - jsboot/p5math.js, - line 1211 + jsboot/p5color.js, + line 1271

    @@ -4709,7 +4785,7 @@

    - 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). + Extracts the alpha value from a color or pixel array.
    @@ -4745,13 +4821,19 @@

    Parameters:
    - value + color -Number +Color +| + +Array.<Number> +| + +String @@ -4761,7 +4843,7 @@
    Parameters:
    - the value whose arc cosine is to be returned + Color object, color components, or CSS color @@ -4795,7 +4877,7 @@
    Returns:
    -- the arc cosine of the given value +- the alpha value @@ -4844,7 +4926,7 @@
    Returns:
    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);
    + 
    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);
    @@ -4855,14 +4937,14 @@
    Example
    -

    +

    - inner alpha(color) → {Number} + inner angleMode(mode)
    - jsboot/p5color.js, - line 1271 + jsboot/p5math.js, + line 1423

    @@ -4874,7 +4956,7 @@

    - Extracts the alpha value from a color or pixel array. + Sets the current mode of p5 to given mode. Default mode is RADIANS.
    @@ -4910,19 +4992,13 @@

    Parameters:
    - color + mode -Color -| - -Array.<Number> -| - -String +Constant @@ -4932,7 +5008,7 @@
    Parameters:
    - Color object, color components, or CSS color + either RADIANS or DEGREES @@ -4953,27 +5029,6 @@
    Parameters:
    -
    -
    Returns:
    - - - - - -Number - - - - - -- the alpha value - - - - - -
    - @@ -5015,7 +5070,7 @@
    Returns:
    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);
    + 
    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
}
    @@ -5026,14 +5081,14 @@
    Example
    -

    +

    - inner angleMode(mode) + inner append(array, value) → {Array}
    - jsboot/p5math.js, - line 1423 + jsboot/p5util.js, + line 30

    @@ -5045,7 +5100,7 @@

    - Sets the current mode of p5 to given mode. Default mode is RADIANS. + Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push().
    @@ -5081,13 +5136,13 @@

    Parameters:
    - mode + array -Constant +Array @@ -5097,7 +5152,30 @@
    Parameters:
    - either RADIANS or DEGREES + Array to append + + + + + + + value + + + + + +any + + + + + + + + + + to be added to the Array @@ -5117,194 +5195,27 @@
    Parameters:
    - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    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 - - - - - -
    + +
    +
    Returns:
    + + + + + +Array + + + + + +- the array that was appended to + + + + + +
    @@ -6717,12 +6628,12 @@
    Example

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

    @@ -6733,6 +6644,10 @@

    +
    + 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. +
    + @@ -6754,8 +6669,6 @@
    Parameters:
    Type - Attributes - @@ -6768,64 +6681,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - specifies a value between white and black - - - - - - - a + color -Number +Color - - - <optional>
    - - - - - - - - + any value created by the color() function @@ -6885,6 +6757,11 @@
    Parameters:
    +
    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));
    + +
    @@ -6895,12 +6772,12 @@

    Parameters:

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

    @@ -6946,75 +6823,13 @@
    Parameters:
    - 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 + colorstring -Number +String @@ -7032,7 +6847,7 @@
    Parameters:
    - blue or brightness value (depending on the current color mode) + color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex @@ -7065,7 +6880,7 @@
    Parameters:
    - + opacity of the background relative to current color range (default is 0-255) @@ -7135,12 +6950,12 @@
    Parameters:

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

    @@ -7172,6 +6987,8 @@
    Parameters:
    Type + Attributes + @@ -7184,23 +7001,64 @@
    Parameters:
    - values + gray -Array.<Number> +Number + + + + + + - an array containing the red,green,blue & and alpha components of the color + + + specifies a value between white and black + + + + + + + a + + + + + +Number + + + + + + + + + <optional>
    + + + + + + + + + + + @@ -7270,12 +7128,12 @@
    Parameters:

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

    @@ -7321,13 +7179,13 @@
    Parameters:
    - bitmap + v1 -Bitmap +Number @@ -7345,14 +7203,14 @@
    Parameters:
    - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window) + red or hue value (depending on the current color mode) - a + v2 @@ -7367,8 +7225,6 @@
    Parameters:
    - <optional>
    - @@ -7378,146 +7234,71 @@
    Parameters:
    - + green or saturation value (depending on the current color mode) - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
    + + + v3 - -
    - -

    + - 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. -
    - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - + + + - + - - - + + - - + + + - + @@ -7577,11 +7358,6 @@
    Parameters:
    -
    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));
    - - @@ -7592,12 +7368,12 @@
    Example

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

    @@ -7629,8 +7405,6 @@
    Parameters:
    - - @@ -7643,64 +7417,23 @@
    Parameters:
    - - - - - - - - - - - - - - - - - - - + - - - + @@ -7768,14 +7501,14 @@
    Parameters:
    -

    +

    - inner beginShape(kindopt) + inner background(bitmap, aopt)
    - jsboot/p5shape.js, - line 380 + jsboot/p5color.js, + line 1792

    @@ -7786,10 +7519,6 @@

    -
    - 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(). -
    - @@ -7825,13 +7554,13 @@
    Parameters:

    - + + - - - -
    Name + - TypeDescription
    blue or brightness value (depending on the current color mode)
    colora -Color +Number + + <optional>
    + + + + + +     		any value created by the color() function
    TypeAttributes
    colorstring - - -String - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex
    avalues -Number +Array.<Number> - - <optional>
    - - - - - -     		opacity of the background relative to current color range (default is 0-255)an array containing the red,green,blue & and alpha components of the color
    kindbitmap -Constant +Bitmap @@ -7840,8 +7569,6 @@
    Parameters:
    		 - <optional>
    - @@ -7851,157 +7578,40 @@
    Parameters:
    -     		either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIPimage created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    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:
    - - - - - - - - - - - - - - - - - - - - + + + - + @@ -8022,27 +7632,6 @@
    Parameters:
    -
    -
    Returns:
    - - - - - -Number - - - - - -- the blue value - - - - - -
    - @@ -8082,11 +7671,6 @@
    Returns:
    -
    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
    - - @@ -8095,14 +7679,14 @@
    Example
    -

    +

    - inner boolean(n) → {Boolean} + inner beginShape(kindopt)
    - jsboot/p5util.js, - line 422 + jsboot/p5shape.js, + line 379

    @@ -8114,7 +7698,7 @@

    - 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. + 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().
    @@ -8138,6 +7722,8 @@

    Parameters:
    + + @@ -8150,32 +7736,33 @@
    Parameters:
    - + + - + + + @@ -8196,27 +7783,6 @@
    Parameters:
    -
    -
    Returns:
    - - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
    - @@ -8258,7 +7824,7 @@
    Returns:
    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]
    + 
    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);
    @@ -8269,14 +7835,14 @@
    Example
    -

    +

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

    @@ -8288,7 +7854,7 @@

    - Extracts the HSB brightness value from a color or pixel array. + Extracts the blue value from a color or pixel array.
    @@ -8380,7 +7946,7 @@

    Returns:
    -- the brightness value +- the blue value @@ -8429,7 +7995,7 @@
    Returns:
    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);
    + 
    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
    @@ -8440,14 +8006,14 @@
    Example
    -

    +

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

    @@ -8459,7 +8025,7 @@

    - 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. + 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.
    @@ -8508,6 +8074,9 @@

    Parameters:
    | Number +| + +Array @@ -8545,13 +8114,13 @@
    Returns:
    -Number +Boolean -- byte representation of value +- boolean representation of value @@ -8600,7 +8169,7 @@
    Returns:
    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]
    + 
    print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
    @@ -8611,14 +8180,14 @@
    Example
    -

    +

    - inner ceil(n) → {Integer} + inner brightness(color) → {Number}
    - jsboot/p5math.js, - line 77 + jsboot/p5color.js, + line 1312

    @@ -8630,7 +8199,7 @@

    - 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. + Extracts the HSB brightness value from a color or pixel array.
    @@ -8666,13 +8235,19 @@

    Parameters:
    - + + @@ -8710,13 +8285,13 @@
    Returns:
    -Integer +Number -- rounded up number +- the brightness value @@ -8765,7 +8340,7 @@
    Returns:
    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);
}
    + 
    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);
    @@ -8776,14 +8351,14 @@
    Example
    -

    +

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

    @@ -8795,7 +8370,7 @@

    - 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. + 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.
    @@ -8840,6 +8415,9 @@

    Parameters:
    String | +Boolean +| + Number @@ -8878,13 +8456,13 @@
    Returns:
    -String +Number -- string representation of value +- byte representation of value @@ -8933,7 +8511,7 @@
    Returns:
    Example
    - 
    print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
    + 
    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]
    @@ -8944,14 +8522,14 @@
    Example
    -

    +

    - inner circle(x, y, d) + inner ceil(n) → {Integer}
    - jsboot/p5shape.js, - line 134 + jsboot/p5math.js, + line 77

    @@ -8963,7 +8541,7 @@

    - 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. + 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.
    @@ -8999,53 +8577,7 @@

    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + @@ -9082,99 +8614,26 @@
    Parameters:
    - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    Example
    +
    +
    Returns:
    - 
    // 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. -
    - +Integer - - - - - +- rounded up number - - - - - + +
    @@ -9217,7 +8676,7 @@

    Example
    - 
    // Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

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

function mousePressed() {
  clear();
}
    + 
    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);
}
    @@ -9228,14 +8687,14 @@
    Example
    -

    +

    - inner color(gray, alphaopt) → {Color} + inner char(n) → {String}
    - jsboot/p5color.js, - line 1333 + jsboot/p5util.js, + line 481

    @@ -9247,7 +8706,7 @@

    - 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. + 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.
    @@ -9271,8 +8730,6 @@

    Parameters:
    - - @@ -9285,43 +8742,15 @@
    Parameters:
    - + - - - - - - - - - - - - - - - - +String +| - - - - + @@ -9370,13 +8789,13 @@
    Returns:
    -Color +String -- resulting color +- string representation of value @@ -9425,7 +8844,7 @@
    Returns:
    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
    + 
    print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
    @@ -9436,14 +8855,14 @@
    Example
    -

    +

    - inner color(values) → {Color} + inner circle(x, y, d)
    - jsboot/p5color.js, - line 1466 + jsboot/p5shape.js, + line 133

    @@ -9454,6 +8873,10 @@

    +
    + 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. +
    + @@ -9487,13 +8910,13 @@
    Parameters:

    - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -9524,28 +8993,103 @@
    Parameters:
    -
    -
    Returns:
    - - + -Color +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    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.
    + + + + + + + + + + + + + + + + + + + +
    @@ -9582,6 +9126,11 @@
    Returns:
    +
    Example
    + + 
    // Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

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

function mousePressed() {
  clear();
}
    + +
    @@ -9592,12 +9141,12 @@
    Returns:

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

    @@ -9641,13 +9190,13 @@
    Parameters:
    - + + @@ -9746,12 +9295,12 @@
    Returns:

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

    @@ -9783,8 +9332,6 @@
    Parameters:
    - - @@ -9797,126 +9344,23 @@
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - + @@ -10005,12 +9449,12 @@
    Returns:

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

    @@ -10042,6 +9486,8 @@
    Parameters:
    + + @@ -10054,19 +9500,122 @@
    Parameters:
    - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -10157,14 +9706,14 @@
    Returns:
    -

    +

    - inner colorMode(mode, max1, max2, max3, maxAopt) + inner color(values) → {Color}
    jsboot/p5color.js, - line 1894 + line 1466

    @@ -10196,8 +9745,6 @@
    Parameters:
    - - @@ -10210,180 +9757,65 @@
    Parameters:
    - + - - - + + +
    NameTypeDescription
    colora -Color -| - -Array.<Number> -| - -String +Number + + <optional>
    + + + + + +     		Color object, color components, or CSS color
    TypeAttributes
    nkind -String -| - -Boolean -| - -Number -| - -Array +Constant + + <optional>
    + + + + +     		value to parseeither POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
    ncolor -Number +Color +| + +Array.<Number> +| + +String @@ -8682,7 +8257,7 @@
    Parameters:
    -     		number to round upColor object, color components, or CSS color
    x - - -Number - - - - x-coordinate of the centre of the circle.
    y - - -Number - - - - y-coordinate of the centre of the circle.
    dn @@ -9061,7 +8593,7 @@
    Parameters:
    -     		diameter of the circle.number to round up
    TypeAttributes
    grayn -Number - - - - - - - - - - number specifying value between white and black.
    alpha - - Number @@ -9329,20 +8758,10 @@
    Parameters:
    		 - - <optional>
    - - - - - -     		alpha value relative to current color range (default is 0-255)value to parse
    valuesx -Array.<Number> +Number @@ -9503,7 +8926,53 @@
    Parameters:
    -     		an array containing the red,green,blue & and alpha components of the colorx-coordinate of the centre of the circle.
    y + + +Number + + + + y-coordinate of the centre of the circle.
    d + + +Number + + + + diameter of the circle.
    valuecolor -String +Color @@ -9657,7 +9206,7 @@
    Parameters:
    -     		a color string
    TypeAttributes
    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
    alphavalue -Number +String - - <optional>
    - - - - -     		a color string
    TypeAttributes
    colorv1 -Color +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>
    + + + + + +     		TypeAttributes
    modevalues -Constant +Array.<Number> - - - - - - an array containing the red,green,blue & and alpha components of the color
    - - - 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 - + - - + - - - + - + + +
    +
    Returns:
    + - - - - range for the blue or brightness/lightness depending on the current color mode - - +Color - - - maxA - - - - -Number - - - - - - <optional>
    - - - - - - - range for the alpha - - - - - -
    - - - - - - - - - - - -
    @@ -10428,14 +9860,14 @@
    Parameters:
    -

    +

    - inner colorMode(mode, maxopt) + inner color(gray, alphaopt) → {Color}
    jsboot/p5color.js, - line 1841 + line 1333

    @@ -10447,7 +9879,7 @@

    - 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. + 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.
    @@ -10485,13 +9917,13 @@

    Parameters:
    - mode + gray -Constant +Number @@ -10509,14 +9941,14 @@
    Parameters:
    - either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness) + number specifying value between white and black. - max + alpha @@ -10542,7 +9974,7 @@
    Parameters:
    - range for all values + alpha value relative to current color range (default is 0-255) @@ -10563,6 +9995,27 @@
    Parameters:
    +
    +
    Returns:
    + + + + + +Color + + + + + +- resulting color + + + + + +
    + @@ -10604,7 +10057,7 @@
    Parameters:
    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);
    + 
    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
    @@ -10615,14 +10068,14 @@
    Example
    -

    +

    - inner concat(a, b) → {Array} + inner colorMode(mode, maxopt)
    - jsboot/p5util.js, - line 120 + jsboot/p5color.js, + line 1841

    @@ -10634,7 +10087,7 @@

    - Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. + 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.
    @@ -10658,6 +10111,8 @@

    Parameters:
    Type + Attributes + @@ -10670,46 +10125,64 @@
    Parameters:
    - a + mode -Array +Constant + + + + + + - first Array to concatenate + + + either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness) - b + max -Array +Number + + + <optional>
    + + + + + - second Array to concatenate + + + range for all values @@ -10730,27 +10203,6 @@
    Parameters:
    -
    -
    Returns:
    - - - - - -Array - - - - - -- concatenated array - - - - - -
    - @@ -10792,7 +10244,7 @@
    Returns:
    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]
}
    + 
    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);
    @@ -10803,14 +10255,14 @@
    Example
    -

    +

    - inner constrain(n, low, high) → {Number} + inner colorMode(mode, max1, max2, max3, maxAopt)
    - jsboot/p5math.js, - line 111 + jsboot/p5color.js, + line 1894

    @@ -10821,10 +10273,6 @@

    -
    - Constrains a value between a minimum and maximum value. -
    - @@ -10846,6 +10294,8 @@
    Parameters:
    Type + Attributes + @@ -10858,30 +10308,38 @@
    Parameters:
    - n + mode -Number +Constant + + + + + + - number to constrain + + + - low + max1 @@ -10894,17 +10352,25 @@
    Parameters:
    + + + + + + - minimum limit + + + range for the red or hue depending on the current color mode - high + max2 @@ -10917,56 +10383,96 @@
    Parameters:
    + + + + + + + + - maximum limit + range for the green or saturation depending on the current color mode - - - - + + + max3 + - + + + +Number - - + + - + + + - + - -
    -
    Returns:
    - + + + + range for the blue or brightness/lightness depending on the current color mode + + + + + + maxA + + + + + Number + + + + + + <optional>
    + + -- constrained number + + + + + range for the alpha + + + + -
    + -
    + @@ -10976,6 +10482,9 @@
    Returns:
    + +
    + @@ -10997,13 +10506,16 @@
    Returns:
    -
    + -
    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
}
    + + + + +
    + @@ -11014,14 +10526,14 @@
    Example
    -

    +

    - inner cos(angle) → {Number} + inner concat(a, b) → {Array}
    - jsboot/p5math.js, - line 1319 + jsboot/p5util.js, + line 120

    @@ -11033,7 +10545,7 @@

    - Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. + Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays.
    @@ -11069,13 +10581,13 @@

    Parameters:
    - angle + a -Number +Array @@ -11085,7 +10597,30 @@
    Parameters:
    - the angle + first Array to concatenate + + + + + + + b + + + + + +Array + + + + + + + + + + second Array to concatenate @@ -11113,13 +10648,13 @@
    Returns:
    -Number +Array -- the cosine of the angle +- concatenated array @@ -11168,7 +10703,7 @@
    Returns:
    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;
}
    + 
    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]
}
    @@ -11179,14 +10714,14 @@
    Example
    -

    +

    - inner createNumberDict(key, value) → {NumberDict} + inner constrain(n, low, high) → {Number}
    - jsboot/p5util.js, - line 1191 + jsboot/p5math.js, + line 111

    @@ -11198,7 +10733,7 @@

    - Creates a new instance of NumberDict using the key-value pair or object you provide. + Constrains a value between a minimum and maximum value.
    @@ -11234,7 +10769,7 @@

    Parameters:
    - key + n @@ -11250,14 +10785,14 @@
    Parameters:
    - + number to constrain - value + low @@ -11273,7 +10808,30 @@
    Parameters:
    - + minimum limit + + + + + + + high + + + + + +Number + + + + + + + + + + maximum limit @@ -11301,12 +10859,14 @@
    Returns:
    -NumberDict +Number +- constrained number + @@ -11354,7 +10914,7 @@
    Returns:
    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
}
    + 
    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
}
    @@ -11365,14 +10925,14 @@
    Example
    -

    +

    - inner createStringDict(key, value) → {StringDict} + inner cos(angle) → {Number}
    - jsboot/p5util.js, - line 1168 + jsboot/p5math.js, + line 1319

    @@ -11384,7 +10944,7 @@

    - Creates a new instance of p5.StringDict using the key-value pair or the object you provide. + Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.
    @@ -11420,36 +10980,13 @@

    Parameters:
    - key - - - - - -String - - - - - - - - - - - - - - - - - value + angle -String +Number @@ -11459,7 +10996,7 @@
    Parameters:
    - + the angle @@ -11487,12 +11024,14 @@
    Returns:
    -StringDict +Number +- the cosine of the angle + @@ -11540,7 +11079,7 @@
    Returns:
    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
}
    + 
    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;
}
    @@ -11551,14 +11090,14 @@
    Example
    -

    +

    - inner createVector(xopt, yopt, zopt) → {p5.Vector} + inner createNumberDict(key, value) → {NumberDict}
    - jsboot/p5math.js, - line 26 + jsboot/p5util.js, + line 1191

    @@ -11570,7 +11109,7 @@

    - 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. + Creates a new instance of NumberDict using the key-value pair or object you provide.
    @@ -11594,8 +11133,6 @@

    Parameters:
    Type - Attributes - @@ -11608,40 +11145,7 @@
    Parameters:
    - x - - - - - -Number - - - - - - - - - <optional>
    - - - - - - - - - - - x component of the vector - - - - - - - y + key @@ -11654,27 +11158,17 @@
    Parameters:
    - - - <optional>
    - - - - - - - - y component of the vector + - z + value @@ -11687,20 +11181,10 @@
    Parameters:
    - - - <optional>
    - - - - - - - - z component of the vector + @@ -11728,7 +11212,7 @@
    Returns:
    -p5.Vector +NumberDict @@ -11781,7 +11265,7 @@
    Returns:
    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();
}
    + 
    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
}
    @@ -11792,129 +11276,14 @@
    Example
    -

    +

    - inner day() → {Integer} + inner createStringDict(key, value) → {StringDict}
    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 + line 1168

    @@ -11926,7 +11295,7 @@

    - 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. + Creates a new instance of p5.StringDict using the key-value pair or the object you provide.
    @@ -11962,13 +11331,13 @@

    Parameters:
    - radians + key -Number +String @@ -11978,7 +11347,30 @@
    Parameters:
    - the radians value to convert to degrees + + + + + + + + value + + + + + +String + + + + + + + + + + @@ -12006,13 +11398,532 @@
    Returns:
    -Number - +StringDict -- the converted angle + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + +
    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 @@ -12079,7 +11990,7 @@

    jsboot/p5.js, - line 390 + line 385

    @@ -12428,7 +12339,7 @@

    jsboot/p5shape.js, - line 78 + line 77

    @@ -12677,7 +12588,7 @@

    jsboot/p5shape.js, - line 624 + line 623

    @@ -12821,7 +12732,7 @@

    jsboot/p5shape.js, - line 483 + line 482

    @@ -13137,12 +13048,12 @@
    Example

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

    @@ -13153,10 +13064,6 @@

    -
    - 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. -
    - @@ -13192,69 +13099,7 @@
    Parameters:
    - 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 + gray @@ -13278,7 +13123,7 @@
    Parameters:
    - blue or brightness value relative to the current color range + a gray value @@ -13371,11 +13216,6 @@
    Parameters:
    -
    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);
    - -
    @@ -13386,12 +13226,12 @@

    Example

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

    @@ -13435,13 +13275,13 @@
    Parameters:
    - values + value -Array.<Number> +String @@ -13451,7 +13291,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + a color string @@ -13521,12 +13361,12 @@
    Parameters:

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

    @@ -13558,8 +13398,6 @@
    Parameters:
    Type - Attributes - @@ -13572,64 +13410,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + values -Number +Array.<Number> - - - <optional>
    - - - - - - - - + an array containing the red,green,blue & and alpha components of the color @@ -13834,12 +13631,12 @@
    Parameters:

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

    @@ -13850,6 +13647,10 @@

    +
    + 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. +
    + @@ -13871,6 +13672,8 @@
    Parameters:
    Type + Attributes + @@ -13883,23 +13686,126 @@
    Parameters:
    - value + v1 -String +Number + + + + + + - a color string + + + 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>
    + + + + + + + + + + + @@ -13959,6 +13865,11 @@
    Parameters:
    +
    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);
    + +
    @@ -15745,7 +15656,7 @@

    jsboot/p5shape.js, - line 710 + line 709

    @@ -15935,7 +15846,7 @@

    jsboot/p5shape.js, - line 760 + line 759

    @@ -17356,7 +17267,7 @@

    jsboot/p5shape.js, - line 153 + line 152

    @@ -17569,7 +17480,7 @@

    jsboot/p5.js, - line 548 + line 543

    @@ -17894,7 +17805,7 @@

    jsboot/p5shape.js, - line 682 + line 681

    @@ -18059,7 +17970,7 @@

    jsboot/p5.js, - line 491 + line 486

    @@ -18389,7 +18300,7 @@

    jsboot/p5.js, - line 240 + line 235

    @@ -21670,7 +21581,7 @@

    jsboot/p5.js, - line 413 + line 408

    @@ -22266,7 +22177,7 @@

    jsboot/p5.js, - line 276 + line 271

    @@ -22809,7 +22720,7 @@

    jsboot/p5shape.js, - line 190 + line 189

    @@ -23027,7 +22938,7 @@

    jsboot/p5.js, - line 636 + line 631

    @@ -23309,7 +23220,7 @@

    jsboot/p5env.js, - line 26 + line 45

    @@ -23321,7 +23232,7 @@

    - 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 (+). + 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 (+).
    @@ -23453,7 +23364,7 @@

    jsboot/p5env.js, - line 45 + line 26

    @@ -23465,7 +23376,7 @@

    - 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 (+). + 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 (+).
    @@ -23597,7 +23508,7 @@

    jsboot/p5.js, - line 585 + line 580

    @@ -23691,7 +23602,7 @@

    jsboot/p5shape.js, - line 212 + line 211

    @@ -24703,7 +24614,7 @@

    jsboot/p5shape.js, - line 241 + line 240

    @@ -24916,7 +24827,7 @@

    jsboot/p5shape.js, - line 569 + line 568

    @@ -25231,7 +25142,7 @@

    jsboot/p5.js, - line 330 + line 325

    @@ -26126,7 +26037,7 @@

    jsboot/p5.js, - line 441 + line 436

    @@ -26519,7 +26430,260 @@
    Parameters:
    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);
    + 
    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);
    @@ -26530,14 +26694,14 @@
    Example
    -

    +

    - inner scale(scales) + inner setAlpha(alpha)
    - jsboot/p5trans.js, - line 396 + jsboot/p5color.js, + line 595

    @@ -26581,16 +26745,13 @@
    Parameters:
    - scales + alpha -p5.Vector -| - -Array.<Number> +Number @@ -26600,7 +26761,7 @@
    Parameters:
    - per-axis percents to scale the object + the new alpha value @@ -26660,6 +26821,11 @@
    Parameters:
    +
    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);
}
    + + @@ -26668,14 +26834,14 @@
    Parameters:
    -

    +

    - inner second() → {Integer} + inner setBlue(blue)
    - jsboot/p5util.js, - line 1138 + jsboot/p5color.js, + line 575

    @@ -26686,8 +26852,62 @@

    -
    - The second() function returns the current second as a value from 0 - 59. + + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    blue + + +Number + + + + the new blue value
    +
    @@ -26705,35 +26925,146 @@

    + +
    + + + -
    -
    Returns:
    + + + + + + + + + + + + + + + + + + + + + + +
    + + + +

    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 +
    + +

    + + +
    +
    + -Integer + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + -- the current second + + + + + + + + + + + + + +
    NameTypeDescription
    green + + +Number + + the new green value
    +
    + + + + + + + + + + + +
    @@ -26772,7 +27103,7 @@
    Returns:
    Example
    - 
    var s = second();
text('Current second: \n' + s, 5, 50);
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -26783,14 +27114,14 @@
    Example
    -

    +

    - inner setAlpha(alpha) + inner setRed(red)
    jsboot/p5color.js, - line 595 + line 535

    @@ -26834,7 +27165,7 @@
    Parameters:
    - alpha + red @@ -26850,7 +27181,7 @@
    Parameters:
    - the new alpha value + the new red value @@ -26912,7 +27243,7 @@
    Parameters:
    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);
}
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -26923,14 +27254,14 @@
    Example
    -

    +

    - inner setBlue(blue) + inner shearX(angle)
    - jsboot/p5color.js, - line 575 + jsboot/p5trans.js, + line 245

    @@ -26941,6 +27272,10 @@

    +
    + 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. +
    + @@ -26974,7 +27309,7 @@
    Parameters:
    - blue + angle @@ -26990,7 +27325,7 @@
    Parameters:
    - the new blue value + angle of shear specified in radians or degrees, depending on current angleMode @@ -27052,7 +27387,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -27063,14 +27398,14 @@
    Example
    -

    +

    - inner setGreen(green) + inner shearY(angle)
    - jsboot/p5color.js, - line 555 + jsboot/p5trans.js, + line 279

    @@ -27081,6 +27416,10 @@

    +
    + 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. +
    + @@ -27114,7 +27453,7 @@
    Parameters:
    - green + angle @@ -27130,7 +27469,7 @@
    Parameters:
    - the new green value + angle of shear specified in radians or degrees, depending on current angleMode @@ -27192,7 +27531,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -27203,14 +27542,14 @@
    Example
    -

    +

    - inner setRed(red) + inner shorten(list) → {Array}
    - jsboot/p5color.js, - line 535 + jsboot/p5util.js, + line 167

    @@ -27221,6 +27560,10 @@

    +
    + Decreases an array by one element and returns the shortened array, maps to Array.pop(). +
    + @@ -27254,13 +27597,13 @@
    Parameters:
    - red + list -Number +Array @@ -27270,7 +27613,7 @@
    Parameters:
    - the new red value + Array to shorten @@ -27291,6 +27634,27 @@
    Parameters:
    +
    +
    Returns:
    + + + + + +Array + + + + + +- shortened Array + + + + + +
    + @@ -27332,7 +27696,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    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']
}
    @@ -27343,14 +27707,14 @@
    Example
    -

    +

    - inner shearX(angle) + inner shuffle(array, boolopt) → {Array}
    - jsboot/p5trans.js, - line 245 + jsboot/p5util.js, + line 188

    @@ -27362,7 +27726,7 @@

    - 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. + Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm.
    @@ -27386,6 +27750,8 @@

    Parameters:
    Type + Attributes + @@ -27398,67 +27764,71 @@
    Parameters:
    - angle + array -Number +Array + + - - - angle of shear specified in radians or degrees, depending on current angleMode - - - - - - - - - - - - - - + - + + + - + - + Array to shuffle + + + + bool + -
    + + + +Boolean - - - - + + - + + + + <optional>
    + - + - + + + - + - + modify passed array + + + + @@ -27470,118 +27840,32 @@
    Parameters:
    -
    - -
    Example
    +
    +
    Returns:
    - 
    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:
    - - - - - - - - - - - +Array - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    angle - - -Number +- shuffled Array - - angle of shear specified in radians or degrees, depending on current angleMode
    -
    - - - - - - - - - - - -
    @@ -27620,7 +27904,7 @@
    Parameters:
    Example
    - 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    + 
    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);
}
    @@ -27631,14 +27915,14 @@
    Example
    -

    +

    - inner shorten(list) → {Array} + inner sin(angle) → {Number}
    - jsboot/p5util.js, - line 167 + jsboot/p5math.js, + line 1339

    @@ -27650,7 +27934,7 @@

    - Decreases an array by one element and returns the shortened array, maps to Array.pop(). + Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.
    @@ -27686,13 +27970,13 @@

    Parameters:
    - list + angle -Array +Number @@ -27702,7 +27986,7 @@
    Parameters:
    - Array to shorten + the angle @@ -27730,13 +28014,13 @@
    Returns:
    -Array +Number -- shortened Array +- the sine of the angle @@ -27785,7 +28069,7 @@
    Returns:
    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']
}
    + 
    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;
}
    @@ -27796,14 +28080,14 @@
    Example
    -

    +

    - inner shuffle(array, boolopt) → {Array} + inner sort(list, countopt) → {Array}
    jsboot/p5util.js, - line 188 + line 228

    @@ -27815,7 +28099,7 @@

    - Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. + 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.
    @@ -27853,7 +28137,7 @@

    Parameters:
    - array + list @@ -27877,20 +28161,20 @@
    Parameters:
    - Array to shuffle + Array to sort - bool + count -Boolean +Integer @@ -27910,7 +28194,7 @@
    Parameters:
    - modify passed array + number of elements to sort, starting from 0 @@ -27944,7 +28228,7 @@
    Returns:
    -- shuffled Array +- the sorted list @@ -27993,7 +28277,7 @@
    Returns:
    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);
}
    + 
    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]
}
    @@ -28004,14 +28288,14 @@
    Example
    -

    +

    - inner sin(angle) → {Number} + inner splice(list, value, position) → {Array}
    - jsboot/p5math.js, - line 1339 + jsboot/p5util.js, + line 272

    @@ -28023,7 +28307,7 @@

    - Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. + 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.)
    @@ -28059,13 +28343,13 @@

    Parameters:
    - angle + list -Number +Array @@ -28075,189 +28359,37 @@
    Parameters:
    - the angle + Array to splice into - - - - - - - - - - - - - - - - - -
    -
    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:
    - - - - - - - - - - - - - - - - - - - - - - - + - - - + - + - - - + @@ -28317,7 +28439,7 @@
    Returns:
    -- the sorted list +- the list @@ -28366,7 +28488,7 @@
    Returns:
    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]
}
    + 
    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]
}
    @@ -28377,14 +28499,14 @@
    Example
    -

    +

    - inner splice(list, value, position) → {Array} + inner split(value, delim) → {Array.<String>}
    jsboot/p5util.js, - line 272 + line 965

    @@ -28396,7 +28518,7 @@

    - 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.) + 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.
    @@ -28430,29 +28552,6 @@

    Parameters:
    - - - - - - - - - - - - - - - - @@ -28461,7 +28560,7 @@
    Parameters:
    + - + + @@ -28522,13 +28621,13 @@
    Returns:
    -Array +Array.<String> -- the list +- Array of Strings @@ -28577,7 +28676,7 @@
    Returns:
    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]
}
    + 
    var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
    @@ -28588,14 +28687,14 @@
    Example
    -

    +

    - inner split(value, delim) → {Array.<String>} + inner splitTokens(value, delimopt) → {Array.<String>}
    jsboot/p5util.js, - line 965 + line 991

    @@ -28607,7 +28706,7 @@

    - 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. + 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.
    @@ -28631,6 +28730,8 @@

    Parameters:
    + + @@ -28656,6 +28757,14 @@
    Parameters:
    + + @@ -28679,10 +28788,20 @@
    Parameters:
    + - + + + @@ -28765,7 +28884,7 @@
    Returns:
    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);
    + 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    @@ -28776,14 +28895,14 @@
    Example
    -

    +

    - inner splitTokens(value, delimopt) → {Array.<String>} + inner sq(n) → {Number}
    - jsboot/p5util.js, - line 991 + jsboot/p5math.js, + line 631

    @@ -28795,7 +28914,7 @@

    - 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. + 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.
    @@ -28819,8 +28938,6 @@

    Parameters:
    - - @@ -28833,64 +28950,23 @@
    Parameters:
    - + - - - - - - - - - - - - - - - - - - - - - - + @@ -28918,13 +28994,13 @@
    Returns:
    -Array.<String> +Number -- Array of Strings +- squared number @@ -28973,7 +29049,7 @@
    Returns:
    Example
    - 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    + 
    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);
}
    @@ -28984,14 +29060,14 @@
    Example
    -

    +

    - inner sq(n) → {Number} + inner sqrt(n) → {Number}
    jsboot/p5math.js, - line 631 + line 672

    @@ -29003,7 +29079,7 @@

    - 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. + 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().
    @@ -29055,7 +29131,7 @@

    Parameters:
    -
    + @@ -29089,7 +29165,7 @@
    Returns:
    -- squared number +- square root of number @@ -29138,7 +29214,7 @@
    Returns:
    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);
}
    + 
    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);
}
    @@ -29149,14 +29225,14 @@
    Example
    -

    +

    - inner sqrt(n) → {Number} + inner square(x, y, s)
    - jsboot/p5math.js, - line 672 + jsboot/p5shape.js, + line 331

    @@ -29168,7 +29244,7 @@

    - 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(). + 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.
    @@ -29204,7 +29280,7 @@

    Parameters:
    - + + - -
    NameTypeAttributesDescription
    listvalue -Array +any - - - - - - Array to sortvalue to be spliced in
    countposition @@ -28270,20 +28402,10 @@
    Parameters:
    		 - - <optional>
    - - - - - -     		number of elements to sort, starting from 0in the array from which to insert data
    list - - -Array - - - - Array to splice into
    value -any +String @@ -28471,20 +28570,20 @@
    Parameters:
    -     		value to be spliced inthe String to be split
    positiondelim -Integer +String @@ -28494,7 +28593,7 @@
    Parameters:
    -     		in the array from which to insert datathe String used to separate the data
    TypeAttributes + + + + + + + + <optional>
    + + + + +     		the String used to separate the datalist of individual Strings that will be used as separators
    TypeAttributes
    valuen -String +Number - - - - - - the String to be split
    delim - - -String - - - - - - <optional>
    - - - - -     		list of individual Strings that will be used as separatorsnumber to square
    number to squarenon-negative number to square root
    nx @@ -29220,47 +29296,72 @@
    Parameters:
    -     		non-negative number to square rootx-coordinate of the square.
    -
    - + + + y + - + + + +Number - - + + - + - + + + y-coordinate of the square. + -
    -
    Returns:
    - + + + + s + + + + +Number + + -Number + + + side size of the square. + + + + +
    + -- square root of number + + + + + + - - @@ -29303,7 +29404,7 @@
    Returns:
    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);
}
    + 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    @@ -29314,14 +29415,14 @@
    Example
    -

    +

    - inner square(x, y, s) + inner str(n) → {String}
    - jsboot/p5shape.js, - line 332 + jsboot/p5util.js, + line 398

    @@ -29333,7 +29434,7 @@

    - 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. + 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.
    @@ -29369,13 +29470,22 @@

    Parameters:
    - x + n +String +| + +Boolean +| + Number +| + +Array @@ -29385,72 +29495,47 @@
    Parameters:
    - x-coordinate of the square. + value to parse + + - - - y - - - - - -Number - - - - + + - + - + - y-coordinate of the square. - + - - - s - + - - + +
    +
    Returns:
    + -Number - - - - - +String - side size of the square. - - - - -
    - - - +- string representation of value - - - + + @@ -29493,7 +29578,7 @@
    Parameters:
    Example
    - 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    + 
    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" ]
    @@ -29504,14 +29589,14 @@
    Example
    -

    +

    - inner str(n) → {String} + inner stroke(gray, alphaopt)
    - jsboot/p5util.js, - line 398 + jsboot/p5color.js, + line 2170

    @@ -29522,10 +29607,6 @@

    -
    - 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. -
    - @@ -29547,6 +29628,8 @@
    Parameters:
    Type + Attributes + @@ -29559,72 +29642,83 @@
    Parameters:
    - n + gray -String -| - -Boolean -| - Number -| - -Array + + - + - value to parse - + + + - - - + - - + a gray value + - + + + alpha + - + + + +Number - - + + - -
    -
    Returns:
    - + + + + <optional>
    + + + + -String + + + + + + +
    + + -- string representation of value + + + + - - @@ -29665,11 +29759,6 @@
    Returns:
    -
    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" ]
    - -
    @@ -29815,12 +29904,12 @@

    Parameters:

    - inner stroke(gray, alphaopt) + inner stroke(color)
    jsboot/p5color.js, - line 2170 + line 2182

    @@ -29852,8 +29941,6 @@
    Parameters:
    Type - Attributes - @@ -29866,64 +29953,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + color -Number +Color - - - <optional>
    - - - - - - - - + the stroke color @@ -29993,12 +30039,12 @@
    Parameters:

    - inner stroke(values) + inner stroke(v1, v2, v3, alphaopt)
    jsboot/p5color.js, - line 2176 + line 2084

    @@ -30009,6 +30055,10 @@

    +
    + 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. +
    + @@ -30030,6 +30080,8 @@
    Parameters:
    Type + Attributes + @@ -30042,158 +30094,126 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - + - + + + - + - + red or hue value relative to the current color range + - + + + v2 + - + + + +Number - - + + - + + + - + - + + + - -
    + + green or saturation value relative to the current color range + -
    - + + + v3 - -
    - -

    + - inner stroke(color) - -
    - jsboot/p5color.js, - line 2182 -
    - -

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - + + + - + - - - + + - - + + + - + @@ -30253,6 +30273,11 @@
    Parameters:
    +
    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);
    + + @@ -30263,12 +30288,12 @@
    Parameters:

    - inner stroke(v1, v2, v3, alphaopt) + inner stroke(values)
    jsboot/p5color.js, - line 2084 + line 2176

    @@ -30279,10 +30304,6 @@

    -
    - 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. -
    - @@ -30304,8 +30325,6 @@
    Parameters:

    - - @@ -30318,126 +30337,23 @@
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - + @@ -30497,11 +30413,6 @@
    Parameters:
    -
    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);
    - - @@ -30517,7 +30428,7 @@

    jsboot/p5shape.js, - line 811 + line 810

    @@ -32008,6 +31919,141 @@
    Example
    +
    + +

    + + inner translate(vector) + + +
    + jsboot/p5trans.js, + line 347 +
    + +

    + + + +
    +
    + + + + + + + + + + +
    +
    Parameters:
    + +
    Name + - TypeDescription
    blue or brightness value relative to the current color range
    coloralpha -Color +Number + + <optional>
    + + + + + +     		the stroke color
    TypeAttributes
    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
    alphavalues -Number +Array.<Number> - - <optional>
    - - - - -     		an array containing the red,green,blue & and alpha components of the color
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    vector + + +p5.Vector + + + + the vector to translate by
    + +
    + + + + + + + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + + +

    @@ -32226,141 +32272,6 @@

    Example
    -
    - -

    - - inner translate(vector) - - -
    - jsboot/p5trans.js, - line 347 -
    - -

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    vector - - -p5.Vector - - - - the vector to translate by
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
    - - - -

    @@ -32370,7 +32281,7 @@

    jsboot/p5shape.js, - line 357 + line 356

    @@ -33124,7 +33035,7 @@

    jsboot/p5shape.js, - line 461 + line 460

    @@ -35107,133 +35018,7 @@
    Properties:
    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);
}
    + 
    // Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
    @@ -35242,12 +35027,12 @@

    Example
    -

    - static, readonly pmouseY +

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

    @@ -35257,7 +35042,7 @@

    - 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. + 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.
    @@ -35294,7 +35079,7 @@
    Properties:
    - pmouseY + pmouseX @@ -35359,7 +35144,7 @@
    Properties:
    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);
}
    + 
    // 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);
}
    @@ -35368,12 +35153,12 @@

    Example
    -

    - static, readonly pwinMouseX +

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

    @@ -35383,7 +35168,7 @@

    - 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. + 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.
    @@ -35420,7 +35205,7 @@
    Properties:
    - pwinMouseX + pmouseY @@ -35485,7 +35270,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -35494,12 +35279,12 @@

    Example
    -

    - static, readonly pwinMouseY +

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

    @@ -35509,7 +35294,7 @@

    - 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. + 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.
    @@ -35546,7 +35331,7 @@
    Properties:
    - pwinMouseY + pwinMouseX @@ -35611,7 +35396,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -35620,12 +35405,12 @@

    Example
    -

    - static, readonly width +

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

    @@ -35635,7 +35420,7 @@

    - System variable that stores the width of the drawing canvas. + 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.
    @@ -35672,7 +35457,7 @@
    Properties:
    - width + pwinMouseY @@ -35735,18 +35520,23 @@
    Properties:
    +
    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 windowHeight +

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

    @@ -35756,7 +35546,7 @@

    - System variable that stores the height of the inner window. + System variable that stores the width of the drawing canvas.
    @@ -35793,7 +35583,7 @@
    Properties:
    - windowHeight + width @@ -35856,23 +35646,18 @@
    Properties:
    -
    Example
    - - 
    createCanvas(windowWidth, windowHeight);
    - -
    -

    - static, readonly windowWidth +

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

    @@ -35882,7 +35667,7 @@

    - System variable that stores the width of the inner window. + System variable that stores the height of the inner window.
    @@ -35919,7 +35704,7 @@
    Properties:
    - windowWidth + windowHeight @@ -35993,12 +35778,12 @@
    Example
    -

    - static, readonly winMouseX +

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

    @@ -36008,7 +35793,7 @@

    - The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. + System variable that stores the width of the inner window.
    @@ -36045,7 +35830,7 @@
    Properties:
    - winMouseX + windowWidth @@ -36110,7 +35895,7 @@
    Properties:
    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);
}
    + 
    createCanvas(windowWidth, windowHeight);
    @@ -36119,12 +35904,12 @@

    Example
    -

    - static, readonly winMouseY +

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

    @@ -36134,7 +35919,7 @@

    - The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. + The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window.
    @@ -36171,7 +35956,7 @@
    Properties:
    - winMouseY + winMouseX @@ -36236,7 +36021,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -36245,12 +36030,12 @@

    Example
    -

    - inner colorPatterns +

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

    @@ -36260,7 +36045,7 @@

    - Full color string patterns. The capture groups are necessary. + The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window.
    @@ -36271,142 +36056,56 @@

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - +

    Properties:
    -
    + + + + + - - -
    -

    - 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. -
    +
    +
    NameTypeDescription
    winMouseY + + +Number - - - + +
    - -
    @@ -36446,49 +36145,44 @@

    - - -

    +

    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);
}
    -

    Methods

    + -
    - + +
    +

    + inner colorPatterns -

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

    - - +
    + jsboot/p5color.js, + line 888 +
    +

    + +
    -
    - deep copy the current environment. + Full color string patterns. The capture groups are necessary.
    + - - +
    @@ -36504,8 +36198,7 @@

    - -
    + @@ -36520,55 +36213,64 @@

    +

    + +

    + + + +
    +

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

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

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

    - -
    -
    -
    - make sure we have a 2x2 identity matrix. -
    + @@ -36580,16 +36282,40 @@

    + + +

    + + + +
    +

    + 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. +
    + @@ -36630,21 +36356,28 @@

    +

    - + + + + +

    Methods

    + +
    -

    +

    - static _PolyLine() + static _cloneEnv()
    - jsboot/p5shape.js, - line 551 + jsboot/p5.js, + line 67

    @@ -36656,7 +36389,7 @@

    - draw polygon by using lines. + deep copy the current environment.
    @@ -36726,14 +36459,14 @@

    -

    +

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

    @@ -36745,7 +36478,7 @@

    - translate a point with the current matrix (if any). + make sure we have a 2x2 identity matrix.
    @@ -36756,78 +36489,44 @@

    -
    -
    Parameters:
    - - - - - - - - - - - - + - - - + - - - - - + - + - - +
    -
    - + - - - - + - + - + - + - - + - -
    NameTypeDescription
    x - - -number + + - - point
    y - - -number + + - - point
    -
    @@ -36837,30 +36536,59 @@

    Parameters:
    +

    + + + + + + +
    -
    -
    Returns:
    - +

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

    + + +
    +
    + +
    + draw polygon by using lines. +
    + -number + + + + + -- the translated x coordinate. + + + + - - @@ -36909,14 +36637,14 @@
    Returns:
    -

    +

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

    @@ -37037,7 +36765,7 @@
    Returns:
    -- the translated y coordinate. +- the translated x coordinate. @@ -37092,14 +36820,14 @@
    Returns:
    -

    +

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

    @@ -37111,7 +36839,7 @@

    - ignored + translate a point with the current matrix (if any).
    @@ -37122,13 +36850,78 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    x + + +number + + + + point
    y + + +number + + + + point
    +
    @@ -37137,6 +36930,35 @@

    + + + + + +
    +
    Returns:
    + + + + + +number + + + + + +- the translated y coordinate. + + + + + +
    + + + +
    @@ -37181,14 +37003,14 @@

    -

    +

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

    @@ -37200,7 +37022,7 @@

    - exit the script after the current Loop(). + ignored
    @@ -37270,14 +37092,14 @@

    -

    +

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

    @@ -37289,7 +37111,7 @@

    - ignored + exit the script after the current Loop().
    @@ -37455,7 +37277,7 @@

    jsboot/p5.js, - line 231 + line 226

    @@ -37811,7 +37633,7 @@

    jsboot/p5.js, - line 226 + line 221

    @@ -40072,7 +39894,151 @@
    Returns:
    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);
}
    + 
    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));
    @@ -40085,12 +40051,12 @@
    Example

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

    @@ -40136,13 +40102,13 @@
    Parameters:
    - gray + colorstring -Number +String @@ -40160,7 +40126,7 @@
    Parameters:
    - specifies a value between white and black + color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex @@ -40193,7 +40159,7 @@
    Parameters:
    - + opacity of the background relative to current color range (default is 0-255) @@ -40263,12 +40229,12 @@
    Parameters:

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

    @@ -40314,69 +40280,7 @@
    Parameters:
    - 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 + gray @@ -40400,7 +40304,7 @@
    Parameters:
    - blue or brightness value (depending on the current color mode) + specifies a value between white and black @@ -40503,12 +40407,12 @@
    Parameters:

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

    @@ -40540,6 +40444,8 @@
    Parameters:
    Type + Attributes + @@ -40552,150 +40458,75 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + - -
    + + red or hue value (depending on the current color mode) + -
    - + + + v2 - -
    - -

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

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - - - + + + - + - - - + + - - + + @@ -40816,12 +40647,12 @@
    Parameters:

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

    @@ -40832,10 +40663,6 @@

    -
    - 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. -
    - @@ -40869,13 +40696,13 @@
    Parameters:

    - + + @@ -40945,11 +40772,6 @@
    Parameters:
    -
    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));
    - - @@ -40960,12 +40782,12 @@
    Example

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

    @@ -41011,13 +40833,13 @@
    Parameters:
    - + + @@ -41068,7 +40890,7 @@
    Parameters:
    - + @@ -41143,7 +40965,7 @@

    jsboot/p5shape.js, - line 380 + line 379

    @@ -42319,7 +42141,7 @@

    jsboot/p5shape.js, - line 134 + line 133

    @@ -42598,12 +42420,12 @@
    Example

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

    @@ -42614,8 +42436,62 @@

    -
    - 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:
    + +

    Name + - TypeAttributesDescription
    green or saturation value (depending on the current color mode)
    bitmapv3 -Bitmap +Number @@ -40713,7 +40544,7 @@
    Parameters:
    -     		image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)blue or brightness value (depending on the current color mode)
    colorvalues -Color +Array.<Number> @@ -40885,7 +40712,7 @@
    Parameters:
    -     		any value created by the color() functionan array containing the red,green,blue & and alpha components of the color
    colorstringbitmap -String +Bitmap @@ -41035,7 +40857,7 @@
    Parameters:
    -     		color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit heximage created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
    opacity of the background relative to current color range (default is 0-255)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    color + + +Color + + + +
    +
    @@ -42626,6 +42502,256 @@

    + + + + +
    +
    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:
    @@ -42653,7 +42779,38 @@
    Parameters:
    - gray + v1 + + + + + +Number + + + + + + + + + + + + + + + + + + red or hue value relative to the current color range + + + + + + + v2 @@ -42677,14 +42834,14 @@
    Parameters:
    - number specifying value between white and black. + green or saturation value relative to the current color range - alpha + v3 @@ -42699,8 +42856,6 @@
    Parameters:
    - <optional>
    - @@ -42710,168 +42865,40 @@
    Parameters:
    - alpha value relative to current color range (default is 0-255) + blue or brightness value relative to the current color range - - - -
    - - - - - - - - - - - - - -
    -
    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
    - - - -
    - + alpha - -
    - -

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

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - +Number - - - - - - - - - - - - - + - + + + - + @@ -42960,12 +42987,12 @@
    Returns:

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

    @@ -43009,13 +43036,13 @@
    Parameters:
    - + + @@ -43114,12 +43141,12 @@
    Returns:

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

    @@ -43130,6 +43157,10 @@

    +
    + 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. +
    + @@ -43165,69 +43196,7 @@
    Parameters:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + @@ -43284,7 +43253,7 @@
    Parameters:
    - + @@ -43318,6 +43287,8 @@
    Returns:
    +- resulting color + @@ -43363,6 +43334,11 @@
    Returns:
    +
    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
    + + @@ -43371,14 +43347,14 @@
    Returns:
    -

    +

    - inner color(color) → {Color} + inner colorMode(mode, maxopt)
    jsboot/p5color.js, - line 1472 + line 1841

    @@ -43389,6 +43365,10 @@

    +
    + 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. +
    + @@ -43410,6 +43390,8 @@
    Parameters:

    + + @@ -43422,61 +43404,83 @@
    Parameters:
    - + + - - + - - -
    NameTypeDescription
    values + + + <optional>
    -Array.<Number> - - -     		an array containing the red,green,blue & and alpha components of the color
    valuevalues -String +Array.<Number> @@ -43025,7 +43052,7 @@
    Parameters:
    -     		a color stringan array containing the red,green,blue & and alpha components of the color
    v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
    v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
    v3gray @@ -43251,7 +43220,7 @@
    Parameters:
    -     		blue or brightness value relative to the current color rangenumber specifying value between white and black.
    alpha value relative to current color range (default is 0-255)
    TypeAttributes
    colormode -Color +Constant + + + + +
    + either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness) + -
    - + + + max + - + + + +Number - - + + - + + + + <optional>
    + - -
    -
    Returns:
    - + + + + -Color + range for all values + + + + +
    + + + + + + - - @@ -43517,6 +43521,11 @@
    Returns:
    +
    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);
    + +
    @@ -43794,193 +43803,6 @@

    Parameters:
    -
    - -

    - - 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);
    - - - -
    - - - -

    @@ -45447,7 +45269,7 @@

    jsboot/p5.js, - line 390 + line 385

    @@ -45796,7 +45618,7 @@

    jsboot/p5shape.js, - line 78 + line 77

    @@ -46045,7 +45867,7 @@

    jsboot/p5shape.js, - line 624 + line 623

    @@ -46189,7 +46011,7 @@

    jsboot/p5shape.js, - line 483 + line 482

    @@ -46505,12 +46327,12 @@
    Example

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

    @@ -46521,10 +46343,6 @@

    -
    - 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. -
    - @@ -46560,69 +46378,7 @@
    Parameters:
    - 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 + gray @@ -46646,7 +46402,7 @@
    Parameters:
    - blue or brightness value relative to the current color range + a gray value @@ -46739,11 +46495,6 @@
    Parameters:
    -
    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);
    - -
    @@ -46754,12 +46505,12 @@

    Example

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

    @@ -46803,13 +46554,13 @@
    Parameters:
    - values + value -Array.<Number> +String @@ -46819,7 +46570,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + a color string @@ -46889,12 +46640,12 @@
    Parameters:

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

    @@ -46926,8 +46677,6 @@
    Parameters:
    Type - Attributes - @@ -46940,64 +46689,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + values -Number +Array.<Number> - - - <optional>
    - - - - - - - - + an array containing the red,green,blue & and alpha components of the color @@ -47202,12 +46910,12 @@
    Parameters:

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

    @@ -47218,6 +46926,10 @@

    +
    + 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. +
    + @@ -47239,6 +46951,8 @@
    Parameters:
    Type + Attributes + @@ -47251,23 +46965,126 @@
    Parameters:
    - value + v1 -String +Number + + + + + + - a color string + + + 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>
    + + + + + + + + + + + @@ -47327,6 +47144,11 @@
    Parameters:
    +
    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);
    + +
    @@ -49113,7 +48935,7 @@

    jsboot/p5shape.js, - line 710 + line 709

    @@ -49303,7 +49125,7 @@

    jsboot/p5shape.js, - line 760 + line 759

    @@ -50724,7 +50546,7 @@

    jsboot/p5shape.js, - line 153 + line 152

    @@ -50937,7 +50759,7 @@

    jsboot/p5.js, - line 548 + line 543

    @@ -51262,7 +51084,7 @@

    jsboot/p5shape.js, - line 682 + line 681

    @@ -51427,7 +51249,7 @@

    jsboot/p5.js, - line 491 + line 486

    @@ -51757,7 +51579,7 @@

    jsboot/p5.js, - line 240 + line 235

    @@ -55038,7 +54860,7 @@

    jsboot/p5.js, - line 413 + line 408

    @@ -55634,7 +55456,7 @@

    jsboot/p5.js, - line 276 + line 271

    @@ -56177,7 +55999,7 @@

    jsboot/p5shape.js, - line 190 + line 189

    @@ -56395,7 +56217,7 @@

    jsboot/p5.js, - line 636 + line 631

    @@ -56677,7 +56499,7 @@

    jsboot/p5env.js, - line 26 + line 45

    @@ -56689,7 +56511,7 @@

    - 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 (+). + 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 (+).
    @@ -56821,7 +56643,7 @@

    jsboot/p5env.js, - line 45 + line 26

    @@ -56833,7 +56655,7 @@

    - 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 (+). + 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 (+).
    @@ -56965,7 +56787,7 @@

    jsboot/p5.js, - line 585 + line 580

    @@ -57059,7 +56881,7 @@

    jsboot/p5shape.js, - line 212 + line 211

    @@ -58071,7 +57893,7 @@

    jsboot/p5shape.js, - line 241 + line 240

    @@ -58284,7 +58106,7 @@

    jsboot/p5shape.js, - line 569 + line 568

    @@ -58599,7 +58421,7 @@

    jsboot/p5.js, - line 330 + line 325

    @@ -59494,7 +59316,7 @@

    jsboot/p5.js, - line 441 + line 436

    @@ -59887,7 +59709,260 @@
    Parameters:
    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);
    + 
    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);
    @@ -59898,14 +59973,14 @@
    Example
    -

    +

    - inner scale(scales) + inner setAlpha(alpha)
    - jsboot/p5trans.js, - line 396 + jsboot/p5color.js, + line 595

    @@ -59949,16 +60024,13 @@
    Parameters:
    - scales + alpha -p5.Vector -| - -Array.<Number> +Number @@ -59968,7 +60040,7 @@
    Parameters:
    - per-axis percents to scale the object + the new alpha value @@ -60028,6 +60100,11 @@
    Parameters:
    +
    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);
}
    + + @@ -60036,14 +60113,14 @@
    Parameters:
    -

    +

    - inner second() → {Integer} + inner setBlue(blue)
    - jsboot/p5util.js, - line 1138 + jsboot/p5color.js, + line 575

    @@ -60054,8 +60131,62 @@

    -
    - The second() function returns the current second as a value from 0 - 59. + + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    blue + + +Number + + + + the new blue value
    +
    @@ -60073,35 +60204,146 @@

    + +
    + + + -
    -
    Returns:
    + + + + + + + + + + + + + + + + + + + + + + +
    + + + +

    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 +
    + +

    + + +
    +
    + -Integer + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + -- the current second + + + + + + + + + + + + + +
    NameTypeDescription
    green + + +Number + + the new green value
    +
    + + + + + + + + + + + +
    @@ -60140,7 +60382,7 @@
    Returns:
    Example
    - 
    var s = second();
text('Current second: \n' + s, 5, 50);
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -60151,14 +60393,14 @@
    Example
    -

    +

    - inner setAlpha(alpha) + inner setRed(red)
    jsboot/p5color.js, - line 595 + line 535

    @@ -60202,7 +60444,7 @@
    Parameters:
    - alpha + red @@ -60218,7 +60460,7 @@
    Parameters:
    - the new alpha value + the new red value @@ -60280,7 +60522,7 @@
    Parameters:
    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);
}
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -60291,14 +60533,14 @@
    Example
    -

    +

    - inner setBlue(blue) + inner shearX(angle)
    - jsboot/p5color.js, - line 575 + jsboot/p5trans.js, + line 245

    @@ -60309,6 +60551,10 @@

    +
    + 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. +
    + @@ -60342,7 +60588,7 @@
    Parameters:
    - blue + angle @@ -60358,7 +60604,7 @@
    Parameters:
    - the new blue value + angle of shear specified in radians or degrees, depending on current angleMode @@ -60420,7 +60666,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -60431,14 +60677,14 @@
    Example
    -

    +

    - inner setGreen(green) + inner shearY(angle)
    - jsboot/p5color.js, - line 555 + jsboot/p5trans.js, + line 279

    @@ -60449,6 +60695,10 @@

    +
    + 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. +
    + @@ -60482,7 +60732,7 @@
    Parameters:
    - green + angle @@ -60498,7 +60748,7 @@
    Parameters:
    - the new green value + angle of shear specified in radians or degrees, depending on current angleMode @@ -60560,7 +60810,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -60571,14 +60821,14 @@
    Example
    -

    +

    - inner setRed(red) + inner shorten(list) → {Array}
    - jsboot/p5color.js, - line 535 + jsboot/p5util.js, + line 167

    @@ -60589,6 +60839,10 @@

    +
    + Decreases an array by one element and returns the shortened array, maps to Array.pop(). +
    + @@ -60622,13 +60876,13 @@
    Parameters:
    - red + list -Number +Array @@ -60638,7 +60892,7 @@
    Parameters:
    - the new red value + Array to shorten @@ -60659,6 +60913,27 @@
    Parameters:
    +
    +
    Returns:
    + + + + + +Array + + + + + +- shortened Array + + + + + +
    + @@ -60700,7 +60975,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    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']
}
    @@ -60711,14 +60986,14 @@
    Example
    -

    +

    - inner shearX(angle) + inner shuffle(array, boolopt) → {Array}
    - jsboot/p5trans.js, - line 245 + jsboot/p5util.js, + line 188

    @@ -60730,7 +61005,7 @@

    - 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. + Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm.
    @@ -60754,6 +61029,8 @@

    Parameters:
    Type + Attributes + @@ -60766,67 +61043,71 @@
    Parameters:
    - angle + array -Number +Array + + - - - angle of shear specified in radians or degrees, depending on current angleMode - - - - - - - - - - - - - - + - + + + - + - + Array to shuffle + + + + bool + -
    + + + +Boolean - - - - + + - + + + + <optional>
    + - + - + + + - + - + modify passed array + + + + @@ -60838,118 +61119,32 @@
    Parameters:
    -
    - -
    Example
    +
    +
    Returns:
    - 
    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:
    - - - - - - - - - - - +Array - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    angle - - -Number +- shuffled Array - - angle of shear specified in radians or degrees, depending on current angleMode
    -
    - - - - - - - - - - - -
    @@ -60988,7 +61183,7 @@
    Parameters:
    Example
    - 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    + 
    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);
}
    @@ -60999,14 +61194,14 @@
    Example
    -

    +

    - inner shorten(list) → {Array} + inner sin(angle) → {Number}
    - jsboot/p5util.js, - line 167 + jsboot/p5math.js, + line 1339

    @@ -61018,7 +61213,7 @@

    - Decreases an array by one element and returns the shortened array, maps to Array.pop(). + Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.
    @@ -61054,13 +61249,13 @@

    Parameters:
    - list + angle -Array +Number @@ -61070,7 +61265,7 @@
    Parameters:
    - Array to shorten + the angle @@ -61098,13 +61293,13 @@
    Returns:
    -Array +Number -- shortened Array +- the sine of the angle @@ -61153,7 +61348,7 @@
    Returns:
    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']
}
    + 
    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;
}
    @@ -61164,14 +61359,14 @@
    Example
    -

    +

    - inner shuffle(array, boolopt) → {Array} + inner sort(list, countopt) → {Array}
    jsboot/p5util.js, - line 188 + line 228

    @@ -61183,7 +61378,7 @@

    - Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. + 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.
    @@ -61221,7 +61416,7 @@

    Parameters:
    - array + list @@ -61245,20 +61440,20 @@
    Parameters:
    - Array to shuffle + Array to sort - bool + count -Boolean +Integer @@ -61278,7 +61473,7 @@
    Parameters:
    - modify passed array + number of elements to sort, starting from 0 @@ -61312,7 +61507,7 @@
    Returns:
    -- shuffled Array +- the sorted list @@ -61361,7 +61556,7 @@
    Returns:
    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);
}
    + 
    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]
}
    @@ -61372,14 +61567,14 @@
    Example
    -

    +

    - inner sin(angle) → {Number} + inner splice(list, value, position) → {Array}
    - jsboot/p5math.js, - line 1339 + jsboot/p5util.js, + line 272

    @@ -61391,7 +61586,7 @@

    - Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. + 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.)
    @@ -61427,13 +61622,13 @@

    Parameters:
    - angle + list -Number +Array @@ -61443,189 +61638,37 @@
    Parameters:
    - the angle + Array to splice into - - - - - - - - - - - - - - - - - -
    -
    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:
    - - - - - - - - - - - - - - - - - - - - - - - + - - - + - + - - - + @@ -61685,7 +61718,7 @@
    Returns:
    -- the sorted list +- the list @@ -61734,7 +61767,7 @@
    Returns:
    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]
}
    + 
    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]
}
    @@ -61745,14 +61778,14 @@
    Example
    -

    +

    - inner splice(list, value, position) → {Array} + inner split(value, delim) → {Array.<String>}
    jsboot/p5util.js, - line 272 + line 965

    @@ -61764,7 +61797,7 @@

    - 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.) + 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.
    @@ -61798,29 +61831,6 @@

    Parameters:
    - - - - - - - - - - - - - - - - @@ -61829,7 +61839,7 @@
    Parameters:
    + - + + @@ -61890,13 +61900,13 @@
    Returns:
    -Array +Array.<String> -- the list +- Array of Strings @@ -61945,7 +61955,7 @@
    Returns:
    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]
}
    + 
    var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
    @@ -61956,14 +61966,14 @@
    Example
    -

    +

    - inner split(value, delim) → {Array.<String>} + inner splitTokens(value, delimopt) → {Array.<String>}
    jsboot/p5util.js, - line 965 + line 991

    @@ -61975,7 +61985,7 @@

    - 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. + 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.
    @@ -61999,6 +62009,8 @@

    Parameters:
    + + @@ -62024,6 +62036,14 @@
    Parameters:
    + + @@ -62047,10 +62067,20 @@
    Parameters:
    + - + + + @@ -62133,7 +62163,7 @@
    Returns:
    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);
    + 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    @@ -62144,14 +62174,14 @@
    Example
    -

    +

    - inner splitTokens(value, delimopt) → {Array.<String>} + inner sq(n) → {Number}
    - jsboot/p5util.js, - line 991 + jsboot/p5math.js, + line 631

    @@ -62163,7 +62193,7 @@

    - 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. + 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.
    @@ -62187,8 +62217,6 @@

    Parameters:
    - - @@ -62201,64 +62229,23 @@
    Parameters:
    - + - - - - - - - - - - - - - - - - - - - - - - + @@ -62286,13 +62273,13 @@
    Returns:
    -Array.<String> +Number -- Array of Strings +- squared number @@ -62341,7 +62328,7 @@
    Returns:
    Example
    - 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    + 
    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);
}
    @@ -62352,14 +62339,14 @@
    Example
    -

    +

    - inner sq(n) → {Number} + inner sqrt(n) → {Number}
    jsboot/p5math.js, - line 631 + line 672

    @@ -62371,7 +62358,7 @@

    - 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. + 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().
    @@ -62423,7 +62410,7 @@

    Parameters:
    -
    + @@ -62457,7 +62444,7 @@
    Returns:
    -- squared number +- square root of number @@ -62506,7 +62493,7 @@
    Returns:
    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);
}
    + 
    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);
}
    @@ -62517,14 +62504,14 @@
    Example
    -

    +

    - inner sqrt(n) → {Number} + inner square(x, y, s)
    - jsboot/p5math.js, - line 672 + jsboot/p5shape.js, + line 331

    @@ -62536,7 +62523,7 @@

    - 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(). + 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.
    @@ -62572,7 +62559,7 @@

    Parameters:
    - + + - -
    NameTypeAttributesDescription
    listvalue -Array +any - - - - - - Array to sortvalue to be spliced in
    countposition @@ -61638,20 +61681,10 @@
    Parameters:
    		 - - <optional>
    - - - - - -     		number of elements to sort, starting from 0in the array from which to insert data
    list - - -Array - - - - Array to splice into
    value -any +String @@ -61839,20 +61849,20 @@
    Parameters:
    -     		value to be spliced inthe String to be split
    positiondelim -Integer +String @@ -61862,7 +61872,7 @@
    Parameters:
    -     		in the array from which to insert datathe String used to separate the data
    TypeAttributes + + + + + + + + <optional>
    + + + + +     		the String used to separate the datalist of individual Strings that will be used as separators
    TypeAttributes
    valuen -String +Number - - - - - - the String to be split
    delim - - -String - - - - - - <optional>
    - - - - -     		list of individual Strings that will be used as separatorsnumber to square
    number to squarenon-negative number to square root
    nx @@ -62588,47 +62575,72 @@
    Parameters:
    -     		non-negative number to square rootx-coordinate of the square.
    -
    - + + + y + - + + + +Number - - + + - + - + + + y-coordinate of the square. + -
    -
    Returns:
    - + + + + s + + + + +Number + + -Number + + + side size of the square. + + + + +
    + -- square root of number + + + + + + - - @@ -62671,7 +62683,7 @@
    Returns:
    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);
}
    + 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    @@ -62682,14 +62694,14 @@
    Example
    -

    +

    - inner square(x, y, s) + inner str(n) → {String}
    - jsboot/p5shape.js, - line 332 + jsboot/p5util.js, + line 398

    @@ -62701,7 +62713,7 @@

    - 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. + 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.
    @@ -62737,13 +62749,22 @@

    Parameters:
    - x + n +String +| + +Boolean +| + Number +| + +Array @@ -62753,72 +62774,47 @@
    Parameters:
    - x-coordinate of the square. + value to parse + + - - - y - - - - - -Number - - - - + + - + - + - y-coordinate of the square. - + - - - s - + - - + +
    +
    Returns:
    + -Number - - - - - +String - side size of the square. - - - - -
    - - - +- string representation of value - - - + + @@ -62861,7 +62857,7 @@
    Parameters:
    Example
    - 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    + 
    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" ]
    @@ -62872,14 +62868,14 @@
    Example
    -

    +

    - inner str(n) → {String} + inner stroke(gray, alphaopt)
    - jsboot/p5util.js, - line 398 + jsboot/p5color.js, + line 2170

    @@ -62890,10 +62886,6 @@

    -
    - 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. -
    - @@ -62915,6 +62907,8 @@
    Parameters:
    Type + Attributes + @@ -62927,72 +62921,83 @@
    Parameters:
    - n + gray -String -| - -Boolean -| - Number -| - -Array + + - + - value to parse - + + + - - - + - - + a gray value + - + + + alpha + - + + + +Number - - + + - -
    -
    Returns:
    - + + + + <optional>
    + + + + -String + + + + + + +
    + + -- string representation of value + + + + - - @@ -63033,11 +63038,6 @@
    Returns:
    -
    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" ]
    - -
    @@ -63183,12 +63183,12 @@

    Parameters:

    - inner stroke(gray, alphaopt) + inner stroke(color)
    jsboot/p5color.js, - line 2170 + line 2182

    @@ -63220,8 +63220,6 @@
    Parameters:
    Type - Attributes - @@ -63234,64 +63232,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + color -Number +Color - - - <optional>
    - - - - - - - - + the stroke color @@ -63361,12 +63318,12 @@
    Parameters:

    - inner stroke(values) + inner stroke(v1, v2, v3, alphaopt)
    jsboot/p5color.js, - line 2176 + line 2084

    @@ -63377,6 +63334,10 @@

    +
    + 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. +
    + @@ -63398,6 +63359,8 @@
    Parameters:
    Type + Attributes + @@ -63410,158 +63373,126 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - + - + + + - + - + red or hue value relative to the current color range + - + + + v2 + - + + + +Number - - + + - + + + - + - + + + - -
    + + green or saturation value relative to the current color range + -
    - + + + v3 - -
    - -

    + - inner stroke(color) - -
    - jsboot/p5color.js, - line 2182 -
    - -

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - + + + - + - - - + + - - + + + - + @@ -63621,6 +63552,11 @@
    Parameters:
    +
    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);
    + + @@ -63631,12 +63567,12 @@
    Parameters:

    - inner stroke(v1, v2, v3, alphaopt) + inner stroke(values)
    jsboot/p5color.js, - line 2084 + line 2176

    @@ -63647,10 +63583,6 @@

    -
    - 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. -
    - @@ -63672,8 +63604,6 @@
    Parameters:

    - - @@ -63686,126 +63616,23 @@
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - + @@ -63865,11 +63692,6 @@
    Parameters:
    -
    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);
    - - @@ -63885,7 +63707,7 @@

    jsboot/p5shape.js, - line 811 + line 810

    @@ -65376,6 +65198,141 @@
    Example
    +
    + +

    + + inner translate(vector) + + +
    + jsboot/p5trans.js, + line 347 +
    + +

    + + + +
    +
    + + + + + + + + + + +
    +
    Parameters:
    + +
    Name + - TypeDescription
    blue or brightness value relative to the current color range
    coloralpha -Color +Number + + <optional>
    + + + + + +     		the stroke color
    TypeAttributes
    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
    alphavalues -Number +Array.<Number> - - <optional>
    - - - - -     		an array containing the red,green,blue & and alpha components of the color
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    vector + + +p5.Vector + + + + the vector to translate by
    + +
    + + + + + + + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + + +

    @@ -65594,141 +65551,6 @@

    Example
    -
    - -

    - - inner translate(vector) - - -
    - jsboot/p5trans.js, - line 347 -
    - -

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    vector - - -p5.Vector - - - - the vector to translate by
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
    - - - -

    @@ -65738,7 +65560,7 @@

    jsboot/p5shape.js, - line 357 + line 356

    @@ -66492,7 +66314,7 @@

    jsboot/p5shape.js, - line 461 + line 460

    @@ -68475,133 +68297,7 @@
    Properties:
    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);
}
    + 
    // Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
    @@ -68610,12 +68306,12 @@

    Example
    -

    - static, readonly pmouseY +

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

    @@ -68625,7 +68321,7 @@

    - 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. + 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.
    @@ -68662,7 +68358,7 @@
    Properties:
    - pmouseY + pmouseX @@ -68727,7 +68423,7 @@
    Properties:
    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);
}
    + 
    // 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);
}
    @@ -68736,12 +68432,12 @@

    Example
    -

    - static, readonly pwinMouseX +

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

    @@ -68751,7 +68447,7 @@

    - 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. + 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.
    @@ -68788,7 +68484,7 @@
    Properties:
    - pwinMouseX + pmouseY @@ -68853,7 +68549,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -68862,12 +68558,12 @@

    Example
    -

    - static, readonly pwinMouseY +

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

    @@ -68877,7 +68573,7 @@

    - 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. + 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.
    @@ -68914,7 +68610,7 @@
    Properties:
    - pwinMouseY + pwinMouseX @@ -68979,7 +68675,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -68988,12 +68684,12 @@

    Example
    -

    - static, readonly width +

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

    @@ -69003,7 +68699,7 @@

    - System variable that stores the width of the drawing canvas. + 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.
    @@ -69040,7 +68736,7 @@
    Properties:
    - width + pwinMouseY @@ -69103,18 +68799,23 @@
    Properties:
    +
    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 windowHeight +

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

    @@ -69124,7 +68825,7 @@

    - System variable that stores the height of the inner window. + System variable that stores the width of the drawing canvas.
    @@ -69161,7 +68862,7 @@
    Properties:
    - windowHeight + width @@ -69224,23 +68925,18 @@
    Properties:
    -
    Example
    - - 
    createCanvas(windowWidth, windowHeight);
    - -
    -

    - static, readonly windowWidth +

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

    @@ -69250,7 +68946,7 @@

    - System variable that stores the width of the inner window. + System variable that stores the height of the inner window.
    @@ -69287,7 +68983,7 @@
    Properties:
    - windowWidth + windowHeight @@ -69361,12 +69057,12 @@
    Example
    -

    - static, readonly winMouseX +

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

    @@ -69376,7 +69072,7 @@

    - The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. + System variable that stores the width of the inner window.
    @@ -69413,7 +69109,7 @@
    Properties:
    - winMouseX + windowWidth @@ -69478,7 +69174,7 @@
    Properties:
    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);
}
    + 
    createCanvas(windowWidth, windowHeight);
    @@ -69487,12 +69183,12 @@

    Example
    -

    - static, readonly winMouseY +

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

    @@ -69502,7 +69198,7 @@

    - The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. + The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window.
    @@ -69539,7 +69235,7 @@
    Properties:
    - winMouseY + winMouseX @@ -69604,7 +69300,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -69613,12 +69309,12 @@

    Example
    -

    - inner colorPatterns +

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

    @@ -69628,7 +69324,7 @@

    - Full color string patterns. The capture groups are necessary. + The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window.
    @@ -69639,142 +69335,56 @@

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - +

    Properties:
    -
    + + + + + - - -
    -

    - 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. -
    +
    +
    NameTypeDescription
    winMouseY + + +Number - - - + +
    - -
    @@ -69814,49 +69424,44 @@

    - - -

    +

    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);
}
    -

    Methods

    + -
    - + +
    +

    + inner colorPatterns -

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

    - - +
    + jsboot/p5color.js, + line 888 +
    +

    + +
    -
    - deep copy the current environment. + Full color string patterns. The capture groups are necessary.
    + - - +
    @@ -69872,8 +69477,7 @@

    - -
    + @@ -69888,55 +69492,64 @@

    +

    + +

    + + + +
    +

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

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

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

    - -
    -
    -
    - make sure we have a 2x2 identity matrix. -
    + @@ -69948,16 +69561,40 @@

    +

    + + + + + +
    +

    + 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. +
    + @@ -69998,21 +69635,28 @@

    +

    - + + + + +

    Methods

    + +
    -

    +

    - static _PolyLine() + static _cloneEnv()
    - jsboot/p5shape.js, - line 551 + jsboot/p5.js, + line 67

    @@ -70024,7 +69668,7 @@

    - draw polygon by using lines. + deep copy the current environment.
    @@ -70094,14 +69738,14 @@

    -

    +

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

    @@ -70113,7 +69757,7 @@

    - translate a point with the current matrix (if any). + make sure we have a 2x2 identity matrix.
    @@ -70124,78 +69768,44 @@

    -
    -
    Parameters:
    - - - - - - - - - - - - + - - - + - - - - - + - + - - +
    -
    - + - - - - + - + - + - + - - + - -
    NameTypeDescription
    x - - -number + + - - point
    y - - -number + + - - point
    -
    @@ -70205,30 +69815,59 @@

    Parameters:
    +

    + + + + + + +
    -
    -
    Returns:
    - +

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

    + + +
    +
    + +
    + draw polygon by using lines. +
    + -number + + + + + -- the translated x coordinate. + + + + - - @@ -70277,14 +69916,14 @@
    Returns:
    -

    +

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

    @@ -70405,7 +70044,7 @@
    Returns:
    -- the translated y coordinate. +- the translated x coordinate. @@ -70460,14 +70099,14 @@
    Returns:
    -

    +

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

    @@ -70479,7 +70118,7 @@

    - ignored + translate a point with the current matrix (if any).
    @@ -70490,13 +70129,78 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    x + + +number + + + + point
    y + + +number + + + + point
    +
    @@ -70505,6 +70209,35 @@

    + + + + + +
    +
    Returns:
    + + + + + +number + + + + + +- the translated y coordinate. + + + + + +
    + + + +
    @@ -70549,14 +70282,14 @@

    -

    +

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

    @@ -70568,7 +70301,7 @@

    - exit the script after the current Loop(). + ignored
    @@ -70638,14 +70371,14 @@

    -

    +

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

    @@ -70657,7 +70390,7 @@

    - ignored + exit the script after the current Loop().
    @@ -70823,7 +70556,7 @@

    jsboot/p5.js, - line 231 + line 226

    @@ -71179,7 +70912,7 @@

    jsboot/p5.js, - line 226 + line 221

    @@ -73440,7 +73173,151 @@
    Returns:
    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);
}
    + 
    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));
    @@ -73453,12 +73330,12 @@
    Example

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

    @@ -73504,13 +73381,13 @@
    Parameters:
    - gray + colorstring -Number +String @@ -73528,7 +73405,7 @@
    Parameters:
    - specifies a value between white and black + color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex @@ -73561,7 +73438,7 @@
    Parameters:
    - + opacity of the background relative to current color range (default is 0-255) @@ -73631,12 +73508,12 @@
    Parameters:

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

    @@ -73682,69 +73559,7 @@
    Parameters:
    - 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 + gray @@ -73768,7 +73583,7 @@
    Parameters:
    - blue or brightness value (depending on the current color mode) + specifies a value between white and black @@ -73871,12 +73686,12 @@
    Parameters:

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

    @@ -73908,6 +73723,8 @@
    Parameters:
    Type + Attributes + @@ -73920,150 +73737,75 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + - -
    + + red or hue value (depending on the current color mode) + -
    - + + + v2 - -
    - -

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

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - - - + + + - + - - - + + - - + + @@ -74184,12 +73926,12 @@
    Parameters:

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

    @@ -74200,10 +73942,6 @@

    -
    - 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. -
    - @@ -74237,13 +73975,13 @@
    Parameters:

    - + + @@ -74313,11 +74051,6 @@
    Parameters:
    -
    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));
    - - @@ -74328,12 +74061,12 @@
    Example

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

    @@ -74379,13 +74112,13 @@
    Parameters:
    - + + @@ -74436,7 +74169,7 @@
    Parameters:
    - + @@ -74511,7 +74244,7 @@

    jsboot/p5shape.js, - line 380 + line 379

    @@ -75687,7 +75420,7 @@

    jsboot/p5shape.js, - line 134 + line 133

    @@ -75966,12 +75699,12 @@
    Example

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

    @@ -75982,8 +75715,62 @@

    -
    - 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:
    + +

    Name + - TypeAttributesDescription
    green or saturation value (depending on the current color mode)
    bitmapv3 -Bitmap +Number @@ -74081,7 +73823,7 @@
    Parameters:
    -     		image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)blue or brightness value (depending on the current color mode)
    colorvalues -Color +Array.<Number> @@ -74253,7 +73991,7 @@
    Parameters:
    -     		any value created by the color() functionan array containing the red,green,blue & and alpha components of the color
    colorstringbitmap -String +Bitmap @@ -74403,7 +74136,7 @@
    Parameters:
    -     		color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit heximage created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
    opacity of the background relative to current color range (default is 0-255)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    color + + +Color + + + +
    +
    @@ -75994,6 +75781,256 @@

    + + + + +
    +
    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:
    @@ -76021,7 +76058,38 @@
    Parameters:
    - gray + v1 + + + + + +Number + + + + + + + + + + + + + + + + + + red or hue value relative to the current color range + + + + + + + v2 @@ -76045,14 +76113,14 @@
    Parameters:
    - number specifying value between white and black. + green or saturation value relative to the current color range - alpha + v3 @@ -76067,8 +76135,6 @@
    Parameters:
    - <optional>
    - @@ -76078,168 +76144,40 @@
    Parameters:
    - alpha value relative to current color range (default is 0-255) + blue or brightness value relative to the current color range - - - -
    - - - - - - - - - - - - - -
    -
    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
    - - - -
    - + alpha - -
    - -

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

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - +Number - - - - - - - - - - - - - + - + + + - + @@ -76328,12 +76266,12 @@
    Returns:

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

    @@ -76377,13 +76315,13 @@
    Parameters:
    - + + @@ -76482,12 +76420,12 @@
    Returns:

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

    @@ -76498,6 +76436,10 @@

    +
    + 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. +
    + @@ -76533,69 +76475,7 @@
    Parameters:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + @@ -76652,7 +76532,7 @@
    Parameters:
    - + @@ -76686,6 +76566,8 @@
    Returns:
    +- resulting color + @@ -76731,6 +76613,11 @@
    Returns:
    +
    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
    + + @@ -76739,14 +76626,14 @@
    Returns:
    -

    +

    - inner color(color) → {Color} + inner colorMode(mode, maxopt)
    jsboot/p5color.js, - line 1472 + line 1841

    @@ -76757,6 +76644,10 @@

    +
    + 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. +
    + @@ -76778,6 +76669,8 @@
    Parameters:

    + + @@ -76790,61 +76683,83 @@
    Parameters:
    - + + - - + - - -
    NameTypeDescription
    values + + + <optional>
    -Array.<Number> - - -     		an array containing the red,green,blue & and alpha components of the color
    valuevalues -String +Array.<Number> @@ -76393,7 +76331,7 @@
    Parameters:
    -     		a color stringan array containing the red,green,blue & and alpha components of the color
    v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
    v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
    v3gray @@ -76619,7 +76499,7 @@
    Parameters:
    -     		blue or brightness value relative to the current color rangenumber specifying value between white and black.
    alpha value relative to current color range (default is 0-255)
    TypeAttributes
    colormode -Color +Constant + + + + +
    + either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness) + -
    - + + + max + - + + + +Number - - + + - + + + + <optional>
    + - -
    -
    Returns:
    - + + + + -Color + range for all values + + + + +
    + + + + + + - - @@ -76885,6 +76800,11 @@
    Returns:
    +
    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);
    + +
    @@ -77162,193 +77082,6 @@

    Parameters:
    -
    - -

    - - 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);
    - - - -
    - - - -

    @@ -78815,7 +78548,7 @@

    jsboot/p5.js, - line 390 + line 385

    @@ -79164,7 +78897,7 @@

    jsboot/p5shape.js, - line 78 + line 77

    @@ -79413,7 +79146,7 @@

    jsboot/p5shape.js, - line 624 + line 623

    @@ -79557,7 +79290,7 @@

    jsboot/p5shape.js, - line 483 + line 482

    @@ -79873,12 +79606,12 @@
    Example

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

    @@ -79889,10 +79622,6 @@

    -
    - 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. -
    - @@ -79928,69 +79657,7 @@
    Parameters:
    - 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 + gray @@ -80014,7 +79681,7 @@
    Parameters:
    - blue or brightness value relative to the current color range + a gray value @@ -80107,11 +79774,6 @@
    Parameters:
    -
    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);
    - -
    @@ -80122,12 +79784,12 @@

    Example

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

    @@ -80171,13 +79833,13 @@
    Parameters:
    - values + value -Array.<Number> +String @@ -80187,7 +79849,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + a color string @@ -80257,12 +79919,12 @@
    Parameters:

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

    @@ -80294,8 +79956,6 @@
    Parameters:
    Type - Attributes - @@ -80308,64 +79968,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + values -Number +Array.<Number> - - - <optional>
    - - - - - - - - + an array containing the red,green,blue & and alpha components of the color @@ -80570,12 +80189,12 @@
    Parameters:

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

    @@ -80586,6 +80205,10 @@

    +
    + 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. +
    + @@ -80607,6 +80230,8 @@
    Parameters:
    Type + Attributes + @@ -80619,23 +80244,126 @@
    Parameters:
    - value + v1 -String +Number + + + + + + - a color string + + + 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>
    + + + + + + + + + + + @@ -80695,6 +80423,11 @@
    Parameters:
    +
    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);
    + +
    @@ -82481,7 +82214,7 @@

    jsboot/p5shape.js, - line 710 + line 709

    @@ -82671,7 +82404,7 @@

    jsboot/p5shape.js, - line 760 + line 759

    @@ -84092,7 +83825,7 @@

    jsboot/p5shape.js, - line 153 + line 152

    @@ -84305,7 +84038,7 @@

    jsboot/p5.js, - line 548 + line 543

    @@ -84630,7 +84363,7 @@

    jsboot/p5shape.js, - line 682 + line 681

    @@ -84795,7 +84528,7 @@

    jsboot/p5.js, - line 491 + line 486

    @@ -85125,7 +84858,7 @@

    jsboot/p5.js, - line 240 + line 235

    @@ -88406,7 +88139,7 @@

    jsboot/p5.js, - line 413 + line 408

    @@ -89002,7 +88735,7 @@

    jsboot/p5.js, - line 276 + line 271

    @@ -89545,7 +89278,7 @@

    jsboot/p5shape.js, - line 190 + line 189

    @@ -89763,7 +89496,7 @@

    jsboot/p5.js, - line 636 + line 631

    @@ -90045,7 +89778,7 @@

    jsboot/p5env.js, - line 26 + line 45

    @@ -90057,7 +89790,7 @@

    - 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 (+). + 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 (+).
    @@ -90189,7 +89922,7 @@

    jsboot/p5env.js, - line 45 + line 26

    @@ -90201,7 +89934,7 @@

    - 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 (+). + 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 (+).
    @@ -90333,7 +90066,7 @@

    jsboot/p5.js, - line 585 + line 580

    @@ -90427,7 +90160,7 @@

    jsboot/p5shape.js, - line 212 + line 211

    @@ -91439,7 +91172,7 @@

    jsboot/p5shape.js, - line 241 + line 240

    @@ -91652,7 +91385,7 @@

    jsboot/p5shape.js, - line 569 + line 568

    @@ -91967,7 +91700,7 @@

    jsboot/p5.js, - line 330 + line 325

    @@ -92862,7 +92595,7 @@

    jsboot/p5.js, - line 441 + line 436

    @@ -93255,7 +92988,260 @@
    Parameters:
    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);
    + 
    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);
    @@ -93266,14 +93252,14 @@
    Example
    -

    +

    - inner scale(scales) + inner setAlpha(alpha)
    - jsboot/p5trans.js, - line 396 + jsboot/p5color.js, + line 595

    @@ -93317,16 +93303,13 @@
    Parameters:
    - scales + alpha -p5.Vector -| - -Array.<Number> +Number @@ -93336,7 +93319,7 @@
    Parameters:
    - per-axis percents to scale the object + the new alpha value @@ -93396,6 +93379,11 @@
    Parameters:
    +
    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);
}
    + + @@ -93404,14 +93392,14 @@
    Parameters:
    -

    +

    - inner second() → {Integer} + inner setBlue(blue)
    - jsboot/p5util.js, - line 1138 + jsboot/p5color.js, + line 575

    @@ -93422,8 +93410,62 @@

    -
    - The second() function returns the current second as a value from 0 - 59. + + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    blue + + +Number + + + + the new blue value
    +
    @@ -93441,35 +93483,146 @@

    + +
    + + + -
    -
    Returns:
    + + + + + + + + + + + + + + + + + + + + + + +
    + + + +

    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 +
    + +

    + + +
    +
    + -Integer + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + -- the current second + + + + + + + + + + + + + +
    NameTypeDescription
    green + + +Number + + the new green value
    +
    + + + + + + + + + + + +
    @@ -93508,7 +93661,7 @@
    Returns:
    Example
    - 
    var s = second();
text('Current second: \n' + s, 5, 50);
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -93519,14 +93672,14 @@
    Example
    -

    +

    - inner setAlpha(alpha) + inner setRed(red)
    jsboot/p5color.js, - line 595 + line 535

    @@ -93570,7 +93723,7 @@
    Parameters:
    - alpha + red @@ -93586,7 +93739,7 @@
    Parameters:
    - the new alpha value + the new red value @@ -93648,7 +93801,7 @@
    Parameters:
    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);
}
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -93659,14 +93812,14 @@
    Example
    -

    +

    - inner setBlue(blue) + inner shearX(angle)
    - jsboot/p5color.js, - line 575 + jsboot/p5trans.js, + line 245

    @@ -93677,6 +93830,10 @@

    +
    + 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. +
    + @@ -93710,7 +93867,7 @@
    Parameters:
    - blue + angle @@ -93726,7 +93883,7 @@
    Parameters:
    - the new blue value + angle of shear specified in radians or degrees, depending on current angleMode @@ -93788,7 +93945,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -93799,14 +93956,14 @@
    Example
    -

    +

    - inner setGreen(green) + inner shearY(angle)
    - jsboot/p5color.js, - line 555 + jsboot/p5trans.js, + line 279

    @@ -93817,6 +93974,10 @@

    +
    + 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. +
    + @@ -93850,7 +94011,7 @@
    Parameters:
    - green + angle @@ -93866,7 +94027,7 @@
    Parameters:
    - the new green value + angle of shear specified in radians or degrees, depending on current angleMode @@ -93928,7 +94089,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -93939,14 +94100,14 @@
    Example
    -

    +

    - inner setRed(red) + inner shorten(list) → {Array}
    - jsboot/p5color.js, - line 535 + jsboot/p5util.js, + line 167

    @@ -93957,6 +94118,10 @@

    +
    + Decreases an array by one element and returns the shortened array, maps to Array.pop(). +
    + @@ -93990,13 +94155,13 @@
    Parameters:
    - red + list -Number +Array @@ -94006,7 +94171,7 @@
    Parameters:
    - the new red value + Array to shorten @@ -94027,6 +94192,27 @@
    Parameters:
    +
    +
    Returns:
    + + + + + +Array + + + + + +- shortened Array + + + + + +
    + @@ -94068,7 +94254,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    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']
}
    @@ -94079,14 +94265,14 @@
    Example
    -

    +

    - inner shearX(angle) + inner shuffle(array, boolopt) → {Array}
    - jsboot/p5trans.js, - line 245 + jsboot/p5util.js, + line 188

    @@ -94098,7 +94284,7 @@

    - 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. + Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm.
    @@ -94122,6 +94308,8 @@

    Parameters:
    Type + Attributes + @@ -94134,67 +94322,71 @@
    Parameters:
    - angle + array -Number +Array + + - - - angle of shear specified in radians or degrees, depending on current angleMode - - - - - - - - - - - - - - + - + + + - + - + Array to shuffle + + + + bool + -
    + + + +Boolean - - - - + + - + + + + <optional>
    + - + - + + + - + - + modify passed array + + + + @@ -94206,118 +94398,32 @@
    Parameters:
    -
    - -
    Example
    +
    +
    Returns:
    - 
    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:
    - - - - - - - - - - - +Array - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    angle - - -Number +- shuffled Array - - angle of shear specified in radians or degrees, depending on current angleMode
    -
    - - - - - - - - - - - -
    @@ -94356,7 +94462,7 @@
    Parameters:
    Example
    - 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    + 
    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);
}
    @@ -94367,14 +94473,14 @@
    Example
    -

    +

    - inner shorten(list) → {Array} + inner sin(angle) → {Number}
    - jsboot/p5util.js, - line 167 + jsboot/p5math.js, + line 1339

    @@ -94386,7 +94492,7 @@

    - Decreases an array by one element and returns the shortened array, maps to Array.pop(). + Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.
    @@ -94422,13 +94528,13 @@

    Parameters:
    - list + angle -Array +Number @@ -94438,7 +94544,7 @@
    Parameters:
    - Array to shorten + the angle @@ -94466,13 +94572,13 @@
    Returns:
    -Array +Number -- shortened Array +- the sine of the angle @@ -94521,7 +94627,7 @@
    Returns:
    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']
}
    + 
    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;
}
    @@ -94532,14 +94638,14 @@
    Example
    -

    +

    - inner shuffle(array, boolopt) → {Array} + inner sort(list, countopt) → {Array}
    jsboot/p5util.js, - line 188 + line 228

    @@ -94551,7 +94657,7 @@

    - Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. + 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.
    @@ -94589,7 +94695,7 @@

    Parameters:
    - array + list @@ -94613,20 +94719,20 @@
    Parameters:
    - Array to shuffle + Array to sort - bool + count -Boolean +Integer @@ -94646,7 +94752,7 @@
    Parameters:
    - modify passed array + number of elements to sort, starting from 0 @@ -94680,7 +94786,7 @@
    Returns:
    -- shuffled Array +- the sorted list @@ -94729,7 +94835,7 @@
    Returns:
    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);
}
    + 
    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]
}
    @@ -94740,14 +94846,14 @@
    Example
    -

    +

    - inner sin(angle) → {Number} + inner splice(list, value, position) → {Array}
    - jsboot/p5math.js, - line 1339 + jsboot/p5util.js, + line 272

    @@ -94759,7 +94865,7 @@

    - Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. + 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.)
    @@ -94795,13 +94901,13 @@

    Parameters:
    - angle + list -Number +Array @@ -94811,189 +94917,37 @@
    Parameters:
    - the angle + Array to splice into - - - - - - - - - - - - - - - - - -
    -
    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:
    - - - - - - - - - - - - - - - - - - - - - - - + - - - + - + - - - + @@ -95053,7 +94997,7 @@
    Returns:
    -- the sorted list +- the list @@ -95102,7 +95046,7 @@
    Returns:
    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]
}
    + 
    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]
}
    @@ -95113,14 +95057,14 @@
    Example
    -

    +

    - inner splice(list, value, position) → {Array} + inner split(value, delim) → {Array.<String>}
    jsboot/p5util.js, - line 272 + line 965

    @@ -95132,7 +95076,7 @@

    - 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.) + 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.
    @@ -95166,29 +95110,6 @@

    Parameters:
    - - - - - - - - - - - - - - - - @@ -95197,7 +95118,7 @@
    Parameters:
    + - + + @@ -95258,13 +95179,13 @@
    Returns:
    -Array +Array.<String> -- the list +- Array of Strings @@ -95313,7 +95234,7 @@
    Returns:
    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]
}
    + 
    var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
    @@ -95324,14 +95245,14 @@
    Example
    -

    +

    - inner split(value, delim) → {Array.<String>} + inner splitTokens(value, delimopt) → {Array.<String>}
    jsboot/p5util.js, - line 965 + line 991

    @@ -95343,7 +95264,7 @@

    - 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. + 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.
    @@ -95367,6 +95288,8 @@

    Parameters:
    + + @@ -95392,6 +95315,14 @@
    Parameters:
    + + @@ -95415,10 +95346,20 @@
    Parameters:
    + - + + + @@ -95501,7 +95442,7 @@
    Returns:
    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);
    + 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    @@ -95512,14 +95453,14 @@
    Example
    -

    +

    - inner splitTokens(value, delimopt) → {Array.<String>} + inner sq(n) → {Number}
    - jsboot/p5util.js, - line 991 + jsboot/p5math.js, + line 631

    @@ -95531,7 +95472,7 @@

    - 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. + 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.
    @@ -95555,8 +95496,6 @@

    Parameters:
    - - @@ -95569,64 +95508,23 @@
    Parameters:
    - + - - - - - - - - - - - - - - - - - - - - - - + @@ -95654,13 +95552,13 @@
    Returns:
    -Array.<String> +Number -- Array of Strings +- squared number @@ -95709,7 +95607,7 @@
    Returns:
    Example
    - 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    + 
    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);
}
    @@ -95720,14 +95618,14 @@
    Example
    -

    +

    - inner sq(n) → {Number} + inner sqrt(n) → {Number}
    jsboot/p5math.js, - line 631 + line 672

    @@ -95739,7 +95637,7 @@

    - 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. + 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().
    @@ -95791,7 +95689,7 @@

    Parameters:
    -
    + @@ -95825,7 +95723,7 @@
    Returns:
    -- squared number +- square root of number @@ -95874,7 +95772,7 @@
    Returns:
    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);
}
    + 
    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);
}
    @@ -95885,14 +95783,14 @@
    Example
    -

    +

    - inner sqrt(n) → {Number} + inner square(x, y, s)
    - jsboot/p5math.js, - line 672 + jsboot/p5shape.js, + line 331

    @@ -95904,7 +95802,7 @@

    - 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(). + 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.
    @@ -95940,7 +95838,7 @@

    Parameters:
    - + + - -
    NameTypeAttributesDescription
    listvalue -Array +any - - - - - - Array to sortvalue to be spliced in
    countposition @@ -95006,20 +94960,10 @@
    Parameters:
    		 - - <optional>
    - - - - - -     		number of elements to sort, starting from 0in the array from which to insert data
    list - - -Array - - - - Array to splice into
    value -any +String @@ -95207,20 +95128,20 @@
    Parameters:
    -     		value to be spliced inthe String to be split
    positiondelim -Integer +String @@ -95230,7 +95151,7 @@
    Parameters:
    -     		in the array from which to insert datathe String used to separate the data
    TypeAttributes + + + + + + + + <optional>
    + + + + +     		the String used to separate the datalist of individual Strings that will be used as separators
    TypeAttributes
    valuen -String +Number - - - - - - the String to be split
    delim - - -String - - - - - - <optional>
    - - - - -     		list of individual Strings that will be used as separatorsnumber to square
    number to squarenon-negative number to square root
    nx @@ -95956,47 +95854,72 @@
    Parameters:
    -     		non-negative number to square rootx-coordinate of the square.
    -
    - + + + y + - + + + +Number - - + + - + - + + + y-coordinate of the square. + -
    -
    Returns:
    - + + + + s + + + + +Number + + -Number + + + side size of the square. + + + + +
    + -- square root of number + + + + + + - - @@ -96039,7 +95962,7 @@
    Returns:
    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);
}
    + 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    @@ -96050,14 +95973,14 @@
    Example
    -

    +

    - inner square(x, y, s) + inner str(n) → {String}
    - jsboot/p5shape.js, - line 332 + jsboot/p5util.js, + line 398

    @@ -96069,7 +95992,7 @@

    - 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. + 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.
    @@ -96105,13 +96028,22 @@

    Parameters:
    - x + n +String +| + +Boolean +| + Number +| + +Array @@ -96121,72 +96053,47 @@
    Parameters:
    - x-coordinate of the square. + value to parse + + - - - y - - - - - -Number - - - - + + - + - + - y-coordinate of the square. - + - - - s - + - - + +
    +
    Returns:
    + -Number - - - - - +String - side size of the square. - - - - -
    - - - +- string representation of value - - - + + @@ -96229,7 +96136,7 @@
    Parameters:
    Example
    - 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    + 
    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" ]
    @@ -96240,14 +96147,14 @@
    Example
    -

    +

    - inner str(n) → {String} + inner stroke(gray, alphaopt)
    - jsboot/p5util.js, - line 398 + jsboot/p5color.js, + line 2170

    @@ -96258,10 +96165,6 @@

    -
    - 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. -
    - @@ -96283,6 +96186,8 @@
    Parameters:
    Type + Attributes + @@ -96295,72 +96200,83 @@
    Parameters:
    - n + gray -String -| - -Boolean -| - Number -| - -Array + + - + - value to parse - + + + - - - + - - + a gray value + - + + + alpha + - + + + +Number - - + + - -
    -
    Returns:
    - + + + + <optional>
    + + + + -String + + + + + + +
    + + -- string representation of value + + + + - - @@ -96401,11 +96317,6 @@
    Returns:
    -
    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" ]
    - -
    @@ -96551,12 +96462,12 @@

    Parameters:

    - inner stroke(gray, alphaopt) + inner stroke(color)
    jsboot/p5color.js, - line 2170 + line 2182

    @@ -96588,8 +96499,6 @@
    Parameters:
    Type - Attributes - @@ -96602,64 +96511,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + color -Number +Color - - - <optional>
    - - - - - - - - + the stroke color @@ -96729,12 +96597,12 @@
    Parameters:

    - inner stroke(values) + inner stroke(v1, v2, v3, alphaopt)
    jsboot/p5color.js, - line 2176 + line 2084

    @@ -96745,6 +96613,10 @@

    +
    + 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. +
    + @@ -96766,6 +96638,8 @@
    Parameters:
    Type + Attributes + @@ -96778,158 +96652,126 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - + - + + + - + - + red or hue value relative to the current color range + - + + + v2 + - + + + +Number - - + + - + + + - + - + + + - -
    + + green or saturation value relative to the current color range + -
    - + + + v3 - -
    - -

    + - inner stroke(color) - -
    - jsboot/p5color.js, - line 2182 -
    - -

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - + + + - + - - - + + - - + + + - + @@ -96989,6 +96831,11 @@
    Parameters:
    +
    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);
    + + @@ -96999,12 +96846,12 @@
    Parameters:

    - inner stroke(v1, v2, v3, alphaopt) + inner stroke(values)
    jsboot/p5color.js, - line 2084 + line 2176

    @@ -97015,10 +96862,6 @@

    -
    - 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. -
    - @@ -97040,8 +96883,6 @@
    Parameters:

    - - @@ -97054,126 +96895,23 @@
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - + @@ -97233,11 +96971,6 @@
    Parameters:
    -
    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);
    - - @@ -97253,7 +96986,7 @@

    jsboot/p5shape.js, - line 811 + line 810

    @@ -98744,6 +98477,141 @@
    Example
    +
    + +

    + + inner translate(vector) + + +
    + jsboot/p5trans.js, + line 347 +
    + +

    + + + +
    +
    + + + + + + + + + + +
    +
    Parameters:
    + +
    Name + - TypeDescription
    blue or brightness value relative to the current color range
    coloralpha -Color +Number + + <optional>
    + + + + + +     		the stroke color
    TypeAttributes
    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
    alphavalues -Number +Array.<Number> - - <optional>
    - - - - -     		an array containing the red,green,blue & and alpha components of the color
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    vector + + +p5.Vector + + + + the vector to translate by
    + +
    + + + + + + + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + + +

    @@ -98962,141 +98830,6 @@

    Example
    -
    - -

    - - inner translate(vector) - - -
    - jsboot/p5trans.js, - line 347 -
    - -

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    vector - - -p5.Vector - - - - the vector to translate by
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
    - - - -

    @@ -99106,7 +98839,7 @@

    jsboot/p5shape.js, - line 357 + line 356

    @@ -99860,7 +99593,7 @@

    jsboot/p5shape.js, - line 461 + line 460

    @@ -101843,133 +101576,7 @@
    Properties:
    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);
}
    + 
    // Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
    @@ -101978,12 +101585,12 @@

    Example
    -

    - static, readonly pmouseY +

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

    @@ -101993,7 +101600,7 @@

    - 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. + 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.
    @@ -102030,7 +101637,7 @@
    Properties:
    - pmouseY + pmouseX @@ -102095,7 +101702,7 @@
    Properties:
    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);
}
    + 
    // 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);
}
    @@ -102104,12 +101711,12 @@

    Example
    -

    - static, readonly pwinMouseX +

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

    @@ -102119,7 +101726,7 @@

    - 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. + 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.
    @@ -102156,7 +101763,7 @@
    Properties:
    - pwinMouseX + pmouseY @@ -102221,7 +101828,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -102230,12 +101837,12 @@

    Example
    -

    - static, readonly pwinMouseY +

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

    @@ -102245,7 +101852,7 @@

    - 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. + 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.
    @@ -102282,7 +101889,7 @@
    Properties:
    - pwinMouseY + pwinMouseX @@ -102347,7 +101954,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -102356,12 +101963,12 @@

    Example
    -

    - static, readonly width +

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

    @@ -102371,7 +101978,7 @@

    - System variable that stores the width of the drawing canvas. + 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.
    @@ -102408,7 +102015,7 @@
    Properties:
    - width + pwinMouseY @@ -102471,18 +102078,23 @@
    Properties:
    +
    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 windowHeight +

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

    @@ -102492,7 +102104,7 @@

    - System variable that stores the height of the inner window. + System variable that stores the width of the drawing canvas.
    @@ -102529,7 +102141,7 @@
    Properties:
    - windowHeight + width @@ -102592,23 +102204,18 @@
    Properties:
    -
    Example
    - - 
    createCanvas(windowWidth, windowHeight);
    - -
    -

    - static, readonly windowWidth +

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

    @@ -102618,7 +102225,7 @@

    - System variable that stores the width of the inner window. + System variable that stores the height of the inner window.
    @@ -102655,7 +102262,7 @@
    Properties:
    - windowWidth + windowHeight @@ -102729,12 +102336,12 @@
    Example
    -

    - static, readonly winMouseX +

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

    @@ -102744,7 +102351,7 @@

    - The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. + System variable that stores the width of the inner window.
    @@ -102781,7 +102388,7 @@
    Properties:
    - winMouseX + windowWidth @@ -102846,7 +102453,7 @@
    Properties:
    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);
}
    + 
    createCanvas(windowWidth, windowHeight);
    @@ -102855,12 +102462,12 @@

    Example
    -

    - static, readonly winMouseY +

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

    @@ -102870,7 +102477,7 @@

    - The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. + The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window.
    @@ -102907,7 +102514,7 @@
    Properties:
    - winMouseY + winMouseX @@ -102972,7 +102579,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -102981,12 +102588,12 @@

    Example
    -

    - inner colorPatterns +

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

    @@ -102996,7 +102603,7 @@

    - Full color string patterns. The capture groups are necessary. + The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window.
    @@ -103007,142 +102614,56 @@

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - +

    Properties:
    -
    + + + + + - - -
    -

    - 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. -
    +
    +
    NameTypeDescription
    winMouseY + + +Number - - - + +
    - -
    @@ -103182,49 +102703,44 @@

    - - -

    +

    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);
}
    -

    Methods

    + -
    - + +
    +

    + inner colorPatterns -

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

    - - +
    + jsboot/p5color.js, + line 888 +
    +

    + +
    -
    - deep copy the current environment. + Full color string patterns. The capture groups are necessary.
    + - - +
    @@ -103240,8 +102756,7 @@

    - -
    + @@ -103256,55 +102771,64 @@

    +

    + +

    + + + +
    +

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

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

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

    - -
    -
    -
    - make sure we have a 2x2 identity matrix. -
    + @@ -103316,16 +102840,40 @@

    +

    + + + + + +
    +

    + 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. +
    + @@ -103366,21 +102914,28 @@

    +

    - + + + + +

    Methods

    + +
    -

    +

    - static _PolyLine() + static _cloneEnv()
    - jsboot/p5shape.js, - line 551 + jsboot/p5.js, + line 67

    @@ -103392,7 +102947,7 @@

    - draw polygon by using lines. + deep copy the current environment.
    @@ -103462,14 +103017,14 @@

    -

    +

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

    @@ -103481,7 +103036,7 @@

    - translate a point with the current matrix (if any). + make sure we have a 2x2 identity matrix.
    @@ -103492,78 +103047,44 @@

    -
    -
    Parameters:
    - - - - - - - - - - - - + - - - + - - - - - + - + - - +
    -
    - + - - - - + - + - + - + - - + - -
    NameTypeDescription
    x - - -number + + - - point
    y - - -number + + - - point
    -
    @@ -103573,30 +103094,59 @@

    Parameters:
    +

    + + + + + + +
    -
    -
    Returns:
    - +

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

    + + +
    +
    + +
    + draw polygon by using lines. +
    + -number + + + + + -- the translated x coordinate. + + + + - - @@ -103645,14 +103195,14 @@
    Returns:
    -

    +

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

    @@ -103773,7 +103323,7 @@
    Returns:
    -- the translated y coordinate. +- the translated x coordinate. @@ -103828,14 +103378,14 @@
    Returns:
    -

    +

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

    @@ -103847,7 +103397,7 @@

    - ignored + translate a point with the current matrix (if any).
    @@ -103858,13 +103408,78 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    x + + +number + + + + point
    y + + +number + + + + point
    +
    @@ -103873,6 +103488,35 @@

    + + + + + +
    +
    Returns:
    + + + + + +number + + + + + +- the translated y coordinate. + + + + + +
    + + + +
    @@ -103917,14 +103561,14 @@

    -

    +

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

    @@ -103936,7 +103580,7 @@

    - exit the script after the current Loop(). + ignored
    @@ -104006,14 +103650,14 @@

    -

    +

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

    @@ -104025,7 +103669,7 @@

    - ignored + exit the script after the current Loop().
    @@ -104191,7 +103835,7 @@

    jsboot/p5.js, - line 231 + line 226

    @@ -104547,7 +104191,7 @@

    jsboot/p5.js, - line 226 + line 221

    @@ -106808,7 +106452,151 @@
    Returns:
    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);
}
    + 
    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));
    @@ -106821,12 +106609,12 @@
    Example

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

    @@ -106872,13 +106660,13 @@
    Parameters:
    - gray + colorstring -Number +String @@ -106896,7 +106684,7 @@
    Parameters:
    - specifies a value between white and black + color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex @@ -106929,7 +106717,7 @@
    Parameters:
    - + opacity of the background relative to current color range (default is 0-255) @@ -106999,12 +106787,12 @@
    Parameters:

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

    @@ -107050,69 +106838,7 @@
    Parameters:
    - 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 + gray @@ -107136,7 +106862,7 @@
    Parameters:
    - blue or brightness value (depending on the current color mode) + specifies a value between white and black @@ -107239,12 +106965,12 @@
    Parameters:

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

    @@ -107276,6 +107002,8 @@
    Parameters:
    Type + Attributes + @@ -107288,150 +107016,75 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + - -
    + + red or hue value (depending on the current color mode) + -
    - + + + v2 - -
    - -

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

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - - - + + + - + - - - + + - - + + @@ -107552,12 +107205,12 @@
    Parameters:

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

    @@ -107568,10 +107221,6 @@

    -
    - 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. -
    - @@ -107605,13 +107254,13 @@
    Parameters:

    - + + @@ -107681,11 +107330,6 @@
    Parameters:
    -
    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));
    - - @@ -107696,12 +107340,12 @@
    Example

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

    @@ -107747,13 +107391,13 @@
    Parameters:
    - + + @@ -107804,7 +107448,7 @@
    Parameters:
    - + @@ -107879,7 +107523,7 @@

    jsboot/p5shape.js, - line 380 + line 379

    @@ -109055,7 +108699,7 @@

    jsboot/p5shape.js, - line 134 + line 133

    @@ -109334,12 +108978,12 @@
    Example

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

    @@ -109350,8 +108994,62 @@

    -
    - 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:
    + +

    Name + - TypeAttributesDescription
    green or saturation value (depending on the current color mode)
    bitmapv3 -Bitmap +Number @@ -107449,7 +107102,7 @@
    Parameters:
    -     		image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)blue or brightness value (depending on the current color mode)
    colorvalues -Color +Array.<Number> @@ -107621,7 +107270,7 @@
    Parameters:
    -     		any value created by the color() functionan array containing the red,green,blue & and alpha components of the color
    colorstringbitmap -String +Bitmap @@ -107771,7 +107415,7 @@
    Parameters:
    -     		color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit heximage created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
    opacity of the background relative to current color range (default is 0-255)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    color + + +Color + + + +
    +
    @@ -109362,6 +109060,256 @@

    + + + + +
    +
    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:
    @@ -109389,7 +109337,38 @@
    Parameters:
    - gray + v1 + + + + + +Number + + + + + + + + + + + + + + + + + + red or hue value relative to the current color range + + + + + + + v2 @@ -109413,14 +109392,14 @@
    Parameters:
    - number specifying value between white and black. + green or saturation value relative to the current color range - alpha + v3 @@ -109435,8 +109414,6 @@
    Parameters:
    - <optional>
    - @@ -109446,168 +109423,40 @@
    Parameters:
    - alpha value relative to current color range (default is 0-255) + blue or brightness value relative to the current color range - - - -
    - - - - - - - - - - - - - -
    -
    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
    - - - -
    - + alpha - -
    - -

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

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - +Number - - - - - - - - - - - - - + - + + + - + @@ -109696,12 +109545,12 @@
    Returns:

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

    @@ -109745,13 +109594,13 @@
    Parameters:
    - + + @@ -109850,12 +109699,12 @@
    Returns:

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

    @@ -109866,6 +109715,10 @@

    +
    + 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. +
    + @@ -109901,69 +109754,7 @@
    Parameters:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + @@ -110020,7 +109811,7 @@
    Parameters:
    - + @@ -110054,6 +109845,8 @@
    Returns:
    +- resulting color + @@ -110099,6 +109892,11 @@
    Returns:
    +
    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
    + + @@ -110107,14 +109905,14 @@
    Returns:
    -

    +

    - inner color(color) → {Color} + inner colorMode(mode, maxopt)
    jsboot/p5color.js, - line 1472 + line 1841

    @@ -110125,6 +109923,10 @@

    +
    + 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. +
    + @@ -110146,6 +109948,8 @@
    Parameters:

    + + @@ -110158,61 +109962,83 @@
    Parameters:
    - + + - - + - - -
    NameTypeDescription
    values + + + <optional>
    -Array.<Number> - - -     		an array containing the red,green,blue & and alpha components of the color
    valuevalues -String +Array.<Number> @@ -109761,7 +109610,7 @@
    Parameters:
    -     		a color stringan array containing the red,green,blue & and alpha components of the color
    v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
    v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
    v3gray @@ -109987,7 +109778,7 @@
    Parameters:
    -     		blue or brightness value relative to the current color rangenumber specifying value between white and black.
    alpha value relative to current color range (default is 0-255)
    TypeAttributes
    colormode -Color +Constant + + + + +
    + either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness) + -
    - + + + max + - + + + +Number - - + + - + + + + <optional>
    + - -
    -
    Returns:
    - + + + + -Color + range for all values + + + + +
    + + + + + + - - @@ -110253,6 +110079,11 @@
    Returns:
    +
    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);
    + +
    @@ -110530,193 +110361,6 @@

    Parameters:
    -
    - -

    - - 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);
    - - - -
    - - - -

    @@ -112183,7 +111827,7 @@

    jsboot/p5.js, - line 390 + line 385

    @@ -112532,7 +112176,7 @@

    jsboot/p5shape.js, - line 78 + line 77

    @@ -112781,7 +112425,7 @@

    jsboot/p5shape.js, - line 624 + line 623

    @@ -112925,7 +112569,7 @@

    jsboot/p5shape.js, - line 483 + line 482

    @@ -113241,12 +112885,12 @@
    Example

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

    @@ -113257,10 +112901,6 @@

    -
    - 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. -
    - @@ -113296,69 +112936,7 @@
    Parameters:
    - 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 + gray @@ -113382,7 +112960,7 @@
    Parameters:
    - blue or brightness value relative to the current color range + a gray value @@ -113475,11 +113053,6 @@
    Parameters:
    -
    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);
    - -
    @@ -113490,12 +113063,12 @@

    Example

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

    @@ -113539,13 +113112,13 @@
    Parameters:
    - values + value -Array.<Number> +String @@ -113555,7 +113128,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + a color string @@ -113625,12 +113198,12 @@
    Parameters:

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

    @@ -113662,8 +113235,6 @@
    Parameters:
    Type - Attributes - @@ -113676,64 +113247,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + values -Number +Array.<Number> - - - <optional>
    - - - - - - - - + an array containing the red,green,blue & and alpha components of the color @@ -113938,12 +113468,12 @@
    Parameters:

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

    @@ -113954,6 +113484,10 @@

    +
    + 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. +
    + @@ -113975,6 +113509,8 @@
    Parameters:
    Type + Attributes + @@ -113987,23 +113523,126 @@
    Parameters:
    - value + v1 -String +Number + + + + + + - a color string + + + 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>
    + + + + + + + + + + + @@ -114063,6 +113702,11 @@
    Parameters:
    +
    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);
    + +
    @@ -115849,7 +115493,7 @@

    jsboot/p5shape.js, - line 710 + line 709

    @@ -116039,7 +115683,7 @@

    jsboot/p5shape.js, - line 760 + line 759

    @@ -117460,7 +117104,7 @@

    jsboot/p5shape.js, - line 153 + line 152

    @@ -117673,7 +117317,7 @@

    jsboot/p5.js, - line 548 + line 543

    @@ -117998,7 +117642,7 @@

    jsboot/p5shape.js, - line 682 + line 681

    @@ -118163,7 +117807,7 @@

    jsboot/p5.js, - line 491 + line 486

    @@ -118493,7 +118137,7 @@

    jsboot/p5.js, - line 240 + line 235

    @@ -121774,7 +121418,7 @@

    jsboot/p5.js, - line 413 + line 408

    @@ -122370,7 +122014,7 @@

    jsboot/p5.js, - line 276 + line 271

    @@ -122913,7 +122557,7 @@

    jsboot/p5shape.js, - line 190 + line 189

    @@ -123131,7 +122775,7 @@

    jsboot/p5.js, - line 636 + line 631

    @@ -123413,7 +123057,7 @@

    jsboot/p5env.js, - line 26 + line 45

    @@ -123425,7 +123069,7 @@

    - 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 (+). + 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 (+).
    @@ -123557,7 +123201,7 @@

    jsboot/p5env.js, - line 45 + line 26

    @@ -123569,7 +123213,7 @@

    - 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 (+). + 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 (+).
    @@ -123701,7 +123345,7 @@

    jsboot/p5.js, - line 585 + line 580

    @@ -123795,7 +123439,7 @@

    jsboot/p5shape.js, - line 212 + line 211

    @@ -124807,7 +124451,7 @@

    jsboot/p5shape.js, - line 241 + line 240

    @@ -125020,7 +124664,7 @@

    jsboot/p5shape.js, - line 569 + line 568

    @@ -125335,7 +124979,7 @@

    jsboot/p5.js, - line 330 + line 325

    @@ -126230,7 +125874,7 @@

    jsboot/p5.js, - line 441 + line 436

    @@ -126623,7 +126267,260 @@
    Parameters:
    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);
    + 
    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);
    @@ -126634,14 +126531,14 @@
    Example
    -

    +

    - inner scale(scales) + inner setAlpha(alpha)
    - jsboot/p5trans.js, - line 396 + jsboot/p5color.js, + line 595

    @@ -126685,16 +126582,13 @@
    Parameters:
    - scales + alpha -p5.Vector -| - -Array.<Number> +Number @@ -126704,7 +126598,7 @@
    Parameters:
    - per-axis percents to scale the object + the new alpha value @@ -126764,6 +126658,11 @@
    Parameters:
    +
    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);
}
    + + @@ -126772,14 +126671,14 @@
    Parameters:
    -

    +

    - inner second() → {Integer} + inner setBlue(blue)
    - jsboot/p5util.js, - line 1138 + jsboot/p5color.js, + line 575

    @@ -126790,8 +126689,62 @@

    -
    - The second() function returns the current second as a value from 0 - 59. + + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    blue + + +Number + + + + the new blue value
    +
    @@ -126809,35 +126762,146 @@

    + +
    + + + -
    -
    Returns:
    + + + + + + + + + + + + + + + + + + + + + + +
    + + + +

    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 +
    + +

    + + +
    +
    + -Integer + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + -- the current second + + + + + + + + + + + + + +
    NameTypeDescription
    green + + +Number + + the new green value
    +
    + + + + + + + + + + + +
    @@ -126876,7 +126940,7 @@
    Returns:
    Example
    - 
    var s = second();
text('Current second: \n' + s, 5, 50);
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -126887,14 +126951,14 @@
    Example
    -

    +

    - inner setAlpha(alpha) + inner setRed(red)
    jsboot/p5color.js, - line 595 + line 535

    @@ -126938,7 +127002,7 @@
    Parameters:
    - alpha + red @@ -126954,7 +127018,7 @@
    Parameters:
    - the new alpha value + the new red value @@ -127016,7 +127080,7 @@
    Parameters:
    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);
}
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -127027,14 +127091,14 @@
    Example
    -

    +

    - inner setBlue(blue) + inner shearX(angle)
    - jsboot/p5color.js, - line 575 + jsboot/p5trans.js, + line 245

    @@ -127045,6 +127109,10 @@

    +
    + 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. +
    + @@ -127078,7 +127146,7 @@
    Parameters:
    - blue + angle @@ -127094,7 +127162,7 @@
    Parameters:
    - the new blue value + angle of shear specified in radians or degrees, depending on current angleMode @@ -127156,7 +127224,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -127167,14 +127235,14 @@
    Example
    -

    +

    - inner setGreen(green) + inner shearY(angle)
    - jsboot/p5color.js, - line 555 + jsboot/p5trans.js, + line 279

    @@ -127185,6 +127253,10 @@

    +
    + 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. +
    + @@ -127218,7 +127290,7 @@
    Parameters:
    - green + angle @@ -127234,7 +127306,7 @@
    Parameters:
    - the new green value + angle of shear specified in radians or degrees, depending on current angleMode @@ -127296,7 +127368,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -127307,14 +127379,14 @@
    Example
    -

    +

    - inner setRed(red) + inner shorten(list) → {Array}
    - jsboot/p5color.js, - line 535 + jsboot/p5util.js, + line 167

    @@ -127325,6 +127397,10 @@

    +
    + Decreases an array by one element and returns the shortened array, maps to Array.pop(). +
    + @@ -127358,13 +127434,13 @@
    Parameters:
    - red + list -Number +Array @@ -127374,7 +127450,7 @@
    Parameters:
    - the new red value + Array to shorten @@ -127395,6 +127471,27 @@
    Parameters:
    +
    +
    Returns:
    + + + + + +Array + + + + + +- shortened Array + + + + + +
    + @@ -127436,7 +127533,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    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']
}
    @@ -127447,14 +127544,14 @@
    Example
    -

    +

    - inner shearX(angle) + inner shuffle(array, boolopt) → {Array}
    - jsboot/p5trans.js, - line 245 + jsboot/p5util.js, + line 188

    @@ -127466,7 +127563,7 @@

    - 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. + Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm.
    @@ -127490,6 +127587,8 @@

    Parameters:
    Type + Attributes + @@ -127502,67 +127601,71 @@
    Parameters:
    - angle + array -Number +Array + + - - - angle of shear specified in radians or degrees, depending on current angleMode - - - - - - - - - - - - - - + - + + + - + - + Array to shuffle + + + + bool + -
    + + + +Boolean - - - - + + - + + + + <optional>
    + - + - + + + - + - + modify passed array + + + + @@ -127574,118 +127677,32 @@
    Parameters:
    -
    - -
    Example
    +
    +
    Returns:
    - 
    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:
    - - - - - - - - - - - +Array - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    angle - - -Number +- shuffled Array - - angle of shear specified in radians or degrees, depending on current angleMode
    -
    - - - - - - - - - - - -
    @@ -127724,7 +127741,7 @@
    Parameters:
    Example
    - 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    + 
    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);
}
    @@ -127735,14 +127752,14 @@
    Example
    -

    +

    - inner shorten(list) → {Array} + inner sin(angle) → {Number}
    - jsboot/p5util.js, - line 167 + jsboot/p5math.js, + line 1339

    @@ -127754,7 +127771,7 @@

    - Decreases an array by one element and returns the shortened array, maps to Array.pop(). + Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.
    @@ -127790,13 +127807,13 @@

    Parameters:
    - list + angle -Array +Number @@ -127806,7 +127823,7 @@
    Parameters:
    - Array to shorten + the angle @@ -127834,13 +127851,13 @@
    Returns:
    -Array +Number -- shortened Array +- the sine of the angle @@ -127889,7 +127906,7 @@
    Returns:
    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']
}
    + 
    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;
}
    @@ -127900,14 +127917,14 @@
    Example
    -

    +

    - inner shuffle(array, boolopt) → {Array} + inner sort(list, countopt) → {Array}
    jsboot/p5util.js, - line 188 + line 228

    @@ -127919,7 +127936,7 @@

    - Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. + 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.
    @@ -127957,7 +127974,7 @@

    Parameters:
    - array + list @@ -127981,20 +127998,20 @@
    Parameters:
    - Array to shuffle + Array to sort - bool + count -Boolean +Integer @@ -128014,7 +128031,7 @@
    Parameters:
    - modify passed array + number of elements to sort, starting from 0 @@ -128048,7 +128065,7 @@
    Returns:
    -- shuffled Array +- the sorted list @@ -128097,7 +128114,7 @@
    Returns:
    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);
}
    + 
    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]
}
    @@ -128108,14 +128125,14 @@
    Example
    -

    +

    - inner sin(angle) → {Number} + inner splice(list, value, position) → {Array}
    - jsboot/p5math.js, - line 1339 + jsboot/p5util.js, + line 272

    @@ -128127,7 +128144,7 @@

    - Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. + 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.)
    @@ -128163,13 +128180,13 @@

    Parameters:
    - angle + list -Number +Array @@ -128179,189 +128196,37 @@
    Parameters:
    - the angle + Array to splice into - - - - - - - - - - - - - - - - - -
    -
    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:
    - - - - - - - - - - - - - - - - - - - - - - - + - - - + - + - - - + @@ -128421,7 +128276,7 @@
    Returns:
    -- the sorted list +- the list @@ -128470,7 +128325,7 @@
    Returns:
    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]
}
    + 
    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]
}
    @@ -128481,14 +128336,14 @@
    Example
    -

    +

    - inner splice(list, value, position) → {Array} + inner split(value, delim) → {Array.<String>}
    jsboot/p5util.js, - line 272 + line 965

    @@ -128500,7 +128355,7 @@

    - 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.) + 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.
    @@ -128534,29 +128389,6 @@

    Parameters:
    - - - - - - - - - - - - - - - - @@ -128565,7 +128397,7 @@
    Parameters:
    + - + + @@ -128626,13 +128458,13 @@
    Returns:
    -Array +Array.<String> -- the list +- Array of Strings @@ -128681,7 +128513,7 @@
    Returns:
    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]
}
    + 
    var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
    @@ -128692,14 +128524,14 @@
    Example
    -

    +

    - inner split(value, delim) → {Array.<String>} + inner splitTokens(value, delimopt) → {Array.<String>}
    jsboot/p5util.js, - line 965 + line 991

    @@ -128711,7 +128543,7 @@

    - 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. + 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.
    @@ -128735,6 +128567,8 @@

    Parameters:
    + + @@ -128760,6 +128594,14 @@
    Parameters:
    + + @@ -128783,10 +128625,20 @@
    Parameters:
    + - + + + @@ -128869,7 +128721,7 @@
    Returns:
    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);
    + 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    @@ -128880,14 +128732,14 @@
    Example
    -

    +

    - inner splitTokens(value, delimopt) → {Array.<String>} + inner sq(n) → {Number}
    - jsboot/p5util.js, - line 991 + jsboot/p5math.js, + line 631

    @@ -128899,7 +128751,7 @@

    - 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. + 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.
    @@ -128923,8 +128775,6 @@

    Parameters:
    - - @@ -128937,64 +128787,23 @@
    Parameters:
    - + - - - - - - - - - - - - - - - - - - - - - - + @@ -129022,13 +128831,13 @@
    Returns:
    -Array.<String> +Number -- Array of Strings +- squared number @@ -129077,7 +128886,7 @@
    Returns:
    Example
    - 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    + 
    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);
}
    @@ -129088,14 +128897,14 @@
    Example
    -

    +

    - inner sq(n) → {Number} + inner sqrt(n) → {Number}
    jsboot/p5math.js, - line 631 + line 672

    @@ -129107,7 +128916,7 @@

    - 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. + 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().
    @@ -129159,7 +128968,7 @@

    Parameters:
    -
    + @@ -129193,7 +129002,7 @@
    Returns:
    -- squared number +- square root of number @@ -129242,7 +129051,7 @@
    Returns:
    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);
}
    + 
    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);
}
    @@ -129253,14 +129062,14 @@
    Example
    -

    +

    - inner sqrt(n) → {Number} + inner square(x, y, s)
    - jsboot/p5math.js, - line 672 + jsboot/p5shape.js, + line 331

    @@ -129272,7 +129081,7 @@

    - 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(). + 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.
    @@ -129308,7 +129117,7 @@

    Parameters:
    - + + - -
    NameTypeAttributesDescription
    listvalue -Array +any - - - - - - Array to sortvalue to be spliced in
    countposition @@ -128374,20 +128239,10 @@
    Parameters:
    		 - - <optional>
    - - - - - -     		number of elements to sort, starting from 0in the array from which to insert data
    list - - -Array - - - - Array to splice into
    value -any +String @@ -128575,20 +128407,20 @@
    Parameters:
    -     		value to be spliced inthe String to be split
    positiondelim -Integer +String @@ -128598,7 +128430,7 @@
    Parameters:
    -     		in the array from which to insert datathe String used to separate the data
    TypeAttributes + + + + + + + + <optional>
    + + + + +     		the String used to separate the datalist of individual Strings that will be used as separators
    TypeAttributes
    valuen -String +Number - - - - - - the String to be split
    delim - - -String - - - - - - <optional>
    - - - - -     		list of individual Strings that will be used as separatorsnumber to square
    number to squarenon-negative number to square root
    nx @@ -129324,47 +129133,72 @@
    Parameters:
    -     		non-negative number to square rootx-coordinate of the square.
    -
    - + + + y + - + + + +Number - - + + - + - + + + y-coordinate of the square. + -
    -
    Returns:
    - + + + + s + + + + +Number + + -Number + + + side size of the square. + + + + +
    + -- square root of number + + + + + + - - @@ -129407,7 +129241,7 @@
    Returns:
    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);
}
    + 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    @@ -129418,14 +129252,14 @@
    Example
    -

    +

    - inner square(x, y, s) + inner str(n) → {String}
    - jsboot/p5shape.js, - line 332 + jsboot/p5util.js, + line 398

    @@ -129437,7 +129271,7 @@

    - 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. + 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.
    @@ -129473,13 +129307,22 @@

    Parameters:
    - x + n +String +| + +Boolean +| + Number +| + +Array @@ -129489,72 +129332,47 @@
    Parameters:
    - x-coordinate of the square. + value to parse + + - - - y - - - - - -Number - - - - + + - + - + - y-coordinate of the square. - + - - - s - + - - + +
    +
    Returns:
    + -Number - - - - - +String - side size of the square. - - - - -
    - - - +- string representation of value - - - + + @@ -129597,7 +129415,7 @@
    Parameters:
    Example
    - 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    + 
    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" ]
    @@ -129608,14 +129426,14 @@
    Example
    -

    +

    - inner str(n) → {String} + inner stroke(gray, alphaopt)
    - jsboot/p5util.js, - line 398 + jsboot/p5color.js, + line 2170

    @@ -129626,10 +129444,6 @@

    -
    - 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. -
    - @@ -129651,6 +129465,8 @@
    Parameters:
    Type + Attributes + @@ -129663,72 +129479,83 @@
    Parameters:
    - n + gray -String -| - -Boolean -| - Number -| - -Array + + - + - value to parse - + + + - - - + - - + a gray value + - + + + alpha + - + + + +Number - - + + - -
    -
    Returns:
    - + + + + <optional>
    + + + + -String + + + + + + +
    + + -- string representation of value + + + + - - @@ -129769,11 +129596,6 @@
    Returns:
    -
    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" ]
    - -
    @@ -129919,12 +129741,12 @@

    Parameters:

    - inner stroke(gray, alphaopt) + inner stroke(color)
    jsboot/p5color.js, - line 2170 + line 2182

    @@ -129956,8 +129778,6 @@
    Parameters:
    Type - Attributes - @@ -129970,64 +129790,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + color -Number +Color - - - <optional>
    - - - - - - - - + the stroke color @@ -130097,12 +129876,12 @@
    Parameters:

    - inner stroke(values) + inner stroke(v1, v2, v3, alphaopt)
    jsboot/p5color.js, - line 2176 + line 2084

    @@ -130113,6 +129892,10 @@

    +
    + 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. +
    + @@ -130134,6 +129917,8 @@
    Parameters:
    Type + Attributes + @@ -130146,158 +129931,126 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - + - + + + - + - + red or hue value relative to the current color range + - + + + v2 + - + + + +Number - - + + - + + + - + - + + + - -
    + + green or saturation value relative to the current color range + -
    - + + + v3 - -
    - -

    + - inner stroke(color) - -
    - jsboot/p5color.js, - line 2182 -
    - -

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - + + + - + - - - + + - - + + + - + @@ -130357,6 +130110,11 @@
    Parameters:
    +
    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);
    + + @@ -130367,12 +130125,12 @@
    Parameters:

    - inner stroke(v1, v2, v3, alphaopt) + inner stroke(values)
    jsboot/p5color.js, - line 2084 + line 2176

    @@ -130383,10 +130141,6 @@

    -
    - 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. -
    - @@ -130408,8 +130162,6 @@
    Parameters:

    - - @@ -130422,126 +130174,23 @@
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - + @@ -130601,11 +130250,6 @@
    Parameters:
    -
    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);
    - - @@ -130621,7 +130265,7 @@

    jsboot/p5shape.js, - line 811 + line 810

    @@ -132112,6 +131756,141 @@
    Example
    +
    + +

    + + inner translate(vector) + + +
    + jsboot/p5trans.js, + line 347 +
    + +

    + + + +
    +
    + + + + + + + + + + +
    +
    Parameters:
    + +
    Name + - TypeDescription
    blue or brightness value relative to the current color range
    coloralpha -Color +Number + + <optional>
    + + + + + +     		the stroke color
    TypeAttributes
    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
    alphavalues -Number +Array.<Number> - - <optional>
    - - - - -     		an array containing the red,green,blue & and alpha components of the color
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    vector + + +p5.Vector + + + + the vector to translate by
    + +
    + + + + + + + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + + +

    @@ -132330,141 +132109,6 @@

    Example
    -
    - -

    - - inner translate(vector) - - -
    - jsboot/p5trans.js, - line 347 -
    - -

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    vector - - -p5.Vector - - - - the vector to translate by
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
    - - - -

    @@ -132474,7 +132118,7 @@

    jsboot/p5shape.js, - line 357 + line 356

    @@ -133228,7 +132872,7 @@

    jsboot/p5shape.js, - line 461 + line 460

    @@ -135211,133 +134855,7 @@
    Properties:
    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);
}
    + 
    // Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
    @@ -135346,12 +134864,12 @@

    Example
    -

    - static, readonly pmouseY +

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

    @@ -135361,7 +134879,7 @@

    - 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. + 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.
    @@ -135398,7 +134916,7 @@
    Properties:
    - pmouseY + pmouseX @@ -135463,7 +134981,7 @@
    Properties:
    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);
}
    + 
    // 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);
}
    @@ -135472,12 +134990,12 @@

    Example
    -

    - static, readonly pwinMouseX +

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

    @@ -135487,7 +135005,7 @@

    - 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. + 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.
    @@ -135524,7 +135042,7 @@
    Properties:
    - pwinMouseX + pmouseY @@ -135589,7 +135107,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -135598,12 +135116,12 @@

    Example
    -

    - static, readonly pwinMouseY +

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

    @@ -135613,7 +135131,7 @@

    - 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. + 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.
    @@ -135650,7 +135168,7 @@
    Properties:
    - pwinMouseY + pwinMouseX @@ -135715,7 +135233,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -135724,12 +135242,12 @@

    Example
    -

    - static, readonly width +

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

    @@ -135739,7 +135257,7 @@

    - System variable that stores the width of the drawing canvas. + 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.
    @@ -135776,7 +135294,7 @@
    Properties:
    - width + pwinMouseY @@ -135839,18 +135357,23 @@
    Properties:
    +
    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 windowHeight +

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

    @@ -135860,7 +135383,7 @@

    - System variable that stores the height of the inner window. + System variable that stores the width of the drawing canvas.
    @@ -135897,7 +135420,7 @@
    Properties:
    - windowHeight + width @@ -135960,23 +135483,18 @@
    Properties:
    -
    Example
    - - 
    createCanvas(windowWidth, windowHeight);
    - -
    -

    - static, readonly windowWidth +

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

    @@ -135986,7 +135504,7 @@

    - System variable that stores the width of the inner window. + System variable that stores the height of the inner window.
    @@ -136023,7 +135541,7 @@
    Properties:
    - windowWidth + windowHeight @@ -136097,12 +135615,12 @@
    Example
    -

    - static, readonly winMouseX +

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

    @@ -136112,7 +135630,7 @@

    - The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. + System variable that stores the width of the inner window.
    @@ -136149,7 +135667,7 @@
    Properties:
    - winMouseX + windowWidth @@ -136214,7 +135732,7 @@
    Properties:
    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);
}
    + 
    createCanvas(windowWidth, windowHeight);
    @@ -136223,12 +135741,12 @@

    Example
    -

    - static, readonly winMouseY +

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

    @@ -136238,7 +135756,7 @@

    - The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. + The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window.
    @@ -136275,7 +135793,7 @@
    Properties:
    - winMouseY + winMouseX @@ -136340,7 +135858,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -136349,12 +135867,12 @@

    Example
    -

    - inner colorPatterns +

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

    @@ -136364,7 +135882,7 @@

    - Full color string patterns. The capture groups are necessary. + The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window.
    @@ -136375,142 +135893,56 @@

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - +

    Properties:
    -
    + + + + + - - -
    -

    - 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. -
    +
    +
    NameTypeDescription
    winMouseY + + +Number - - - + +
    - -
    @@ -136550,49 +135982,44 @@

    - - -

    +

    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);
}
    -

    Methods

    + -
    - + +
    +

    + inner colorPatterns -

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

    - - +
    + jsboot/p5color.js, + line 888 +
    +

    + +
    -
    - deep copy the current environment. + Full color string patterns. The capture groups are necessary.
    + - - +
    @@ -136608,8 +136035,7 @@

    - -
    + @@ -136624,55 +136050,64 @@

    +

    + +

    + + + +
    +

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

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

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

    - -
    -
    -
    - make sure we have a 2x2 identity matrix. -
    + @@ -136684,16 +136119,40 @@

    +

    + + + + + +
    +

    + 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. +
    + @@ -136734,21 +136193,28 @@

    +

    - + + + + +

    Methods

    + +
    -

    +

    - static _PolyLine() + static _cloneEnv()
    - jsboot/p5shape.js, - line 551 + jsboot/p5.js, + line 67

    @@ -136760,7 +136226,7 @@

    - draw polygon by using lines. + deep copy the current environment.
    @@ -136830,14 +136296,14 @@

    -

    +

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

    @@ -136849,7 +136315,7 @@

    - translate a point with the current matrix (if any). + make sure we have a 2x2 identity matrix.
    @@ -136860,78 +136326,44 @@

    -
    -
    Parameters:
    - - - - - - - - - - - - + - - - + - - - - - + - + - - +
    -
    - + - - - - + - + - + - + - - + - -
    NameTypeDescription
    x - - -number + + - - point
    y - - -number + + - - point
    -
    @@ -136941,30 +136373,59 @@

    Parameters:
    +

    + + + + + + +
    -
    -
    Returns:
    - +

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

    + + +
    +
    + +
    + draw polygon by using lines. +
    + -number + + + + + -- the translated x coordinate. + + + + - - @@ -137013,14 +136474,14 @@
    Returns:
    -

    +

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

    @@ -137141,7 +136602,7 @@
    Returns:
    -- the translated y coordinate. +- the translated x coordinate. @@ -137196,14 +136657,14 @@
    Returns:
    -

    +

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

    @@ -137215,7 +136676,7 @@

    - ignored + translate a point with the current matrix (if any).
    @@ -137226,13 +136687,78 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    x + + +number + + + + point
    y + + +number + + + + point
    +
    @@ -137241,6 +136767,35 @@

    + + + + + +
    +
    Returns:
    + + + + + +number + + + + + +- the translated y coordinate. + + + + + +
    + + + +
    @@ -137285,14 +136840,14 @@

    -

    +

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

    @@ -137304,7 +136859,7 @@

    - exit the script after the current Loop(). + ignored
    @@ -137374,14 +136929,14 @@

    -

    +

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

    @@ -137393,7 +136948,7 @@

    - ignored + exit the script after the current Loop().
    @@ -137559,7 +137114,7 @@

    jsboot/p5.js, - line 231 + line 226

    @@ -137915,7 +137470,7 @@

    jsboot/p5.js, - line 226 + line 221

    @@ -140176,7 +139731,151 @@
    Returns:
    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);
}
    + 
    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));
    @@ -140189,12 +139888,12 @@
    Example

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

    @@ -140240,13 +139939,13 @@
    Parameters:
    - gray + colorstring -Number +String @@ -140264,7 +139963,7 @@
    Parameters:
    - specifies a value between white and black + color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex @@ -140297,7 +139996,7 @@
    Parameters:
    - + opacity of the background relative to current color range (default is 0-255) @@ -140367,12 +140066,12 @@
    Parameters:

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

    @@ -140418,69 +140117,7 @@
    Parameters:
    - 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 + gray @@ -140504,7 +140141,7 @@
    Parameters:
    - blue or brightness value (depending on the current color mode) + specifies a value between white and black @@ -140607,12 +140244,12 @@
    Parameters:

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

    @@ -140644,6 +140281,8 @@
    Parameters:
    Type + Attributes + @@ -140656,150 +140295,75 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + - -
    + + red or hue value (depending on the current color mode) + -
    - + + + v2 - -
    - -

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

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - - - + + + - + - - - + + - - + + @@ -140920,12 +140484,12 @@
    Parameters:

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

    @@ -140936,10 +140500,6 @@

    -
    - 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. -
    - @@ -140973,13 +140533,13 @@
    Parameters:

    - + + @@ -141049,11 +140609,6 @@
    Parameters:
    -
    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));
    - - @@ -141064,12 +140619,12 @@
    Example

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

    @@ -141115,13 +140670,13 @@
    Parameters:
    - + + @@ -141172,7 +140727,7 @@
    Parameters:
    - + @@ -141247,7 +140802,7 @@

    jsboot/p5shape.js, - line 380 + line 379

    @@ -142423,7 +141978,7 @@

    jsboot/p5shape.js, - line 134 + line 133

    @@ -142702,12 +142257,12 @@
    Example

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

    @@ -142718,8 +142273,62 @@

    -
    - 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:
    + +

    Name + - TypeAttributesDescription
    green or saturation value (depending on the current color mode)
    bitmapv3 -Bitmap +Number @@ -140817,7 +140381,7 @@
    Parameters:
    -     		image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)blue or brightness value (depending on the current color mode)
    colorvalues -Color +Array.<Number> @@ -140989,7 +140549,7 @@
    Parameters:
    -     		any value created by the color() functionan array containing the red,green,blue & and alpha components of the color
    colorstringbitmap -String +Bitmap @@ -141139,7 +140694,7 @@
    Parameters:
    -     		color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit heximage created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
    opacity of the background relative to current color range (default is 0-255)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    color + + +Color + + + +
    +
    @@ -142730,6 +142339,256 @@

    + + + + +
    +
    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:
    @@ -142757,7 +142616,38 @@
    Parameters:
    - gray + v1 + + + + + +Number + + + + + + + + + + + + + + + + + + red or hue value relative to the current color range + + + + + + + v2 @@ -142781,14 +142671,14 @@
    Parameters:
    - number specifying value between white and black. + green or saturation value relative to the current color range - alpha + v3 @@ -142803,8 +142693,6 @@
    Parameters:
    - <optional>
    - @@ -142814,168 +142702,40 @@
    Parameters:
    - alpha value relative to current color range (default is 0-255) + blue or brightness value relative to the current color range - - - -
    - - - - - - - - - - - - - -
    -
    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
    - - - -
    - + alpha - -
    - -

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

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - +Number - - - - - - - - - - - - - + - + + + - + @@ -143064,12 +142824,12 @@
    Returns:

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

    @@ -143113,13 +142873,13 @@
    Parameters:
    - + + @@ -143218,12 +142978,12 @@
    Returns:

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

    @@ -143234,6 +142994,10 @@

    +
    + 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. +
    + @@ -143269,69 +143033,7 @@
    Parameters:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + @@ -143388,7 +143090,7 @@
    Parameters:
    - + @@ -143422,6 +143124,8 @@
    Returns:
    +- resulting color + @@ -143467,6 +143171,11 @@
    Returns:
    +
    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
    + + @@ -143475,14 +143184,14 @@
    Returns:
    -

    +

    - inner color(color) → {Color} + inner colorMode(mode, maxopt)
    jsboot/p5color.js, - line 1472 + line 1841

    @@ -143493,6 +143202,10 @@

    +
    + 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. +
    + @@ -143514,6 +143227,8 @@
    Parameters:

    + + @@ -143526,61 +143241,83 @@
    Parameters:
    - + + - - + - - -
    NameTypeDescription
    values + + + <optional>
    -Array.<Number> - - -     		an array containing the red,green,blue & and alpha components of the color
    valuevalues -String +Array.<Number> @@ -143129,7 +142889,7 @@
    Parameters:
    -     		a color stringan array containing the red,green,blue & and alpha components of the color
    v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
    v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
    v3gray @@ -143355,7 +143057,7 @@
    Parameters:
    -     		blue or brightness value relative to the current color rangenumber specifying value between white and black.
    alpha value relative to current color range (default is 0-255)
    TypeAttributes
    colormode -Color +Constant + + + + +
    + either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness) + -
    - + + + max + - + + + +Number - - + + - + + + + <optional>
    + - -
    -
    Returns:
    - + + + + -Color + range for all values + + + + +
    + + + + + + - - @@ -143621,6 +143358,11 @@
    Returns:
    +
    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);
    + +
    @@ -143898,193 +143640,6 @@

    Parameters:
    -
    - -

    - - 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);
    - - - -
    - - - -

    @@ -145551,7 +145106,7 @@

    jsboot/p5.js, - line 390 + line 385

    @@ -145900,7 +145455,7 @@

    jsboot/p5shape.js, - line 78 + line 77

    @@ -146149,7 +145704,7 @@

    jsboot/p5shape.js, - line 624 + line 623

    @@ -146293,7 +145848,7 @@

    jsboot/p5shape.js, - line 483 + line 482

    @@ -146609,12 +146164,12 @@
    Example

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

    @@ -146625,10 +146180,6 @@

    -
    - 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. -
    - @@ -146664,69 +146215,7 @@
    Parameters:
    - 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 + gray @@ -146750,7 +146239,7 @@
    Parameters:
    - blue or brightness value relative to the current color range + a gray value @@ -146843,11 +146332,6 @@
    Parameters:
    -
    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);
    - -
    @@ -146858,12 +146342,12 @@

    Example

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

    @@ -146907,13 +146391,13 @@
    Parameters:
    - values + value -Array.<Number> +String @@ -146923,7 +146407,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + a color string @@ -146993,12 +146477,12 @@
    Parameters:

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

    @@ -147030,8 +146514,6 @@
    Parameters:
    Type - Attributes - @@ -147044,64 +146526,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + values -Number +Array.<Number> - - - <optional>
    - - - - - - - - + an array containing the red,green,blue & and alpha components of the color @@ -147306,12 +146747,12 @@
    Parameters:

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

    @@ -147322,6 +146763,10 @@

    +
    + 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. +
    + @@ -147343,6 +146788,8 @@
    Parameters:
    Type + Attributes + @@ -147355,23 +146802,126 @@
    Parameters:
    - value + v1 -String +Number + + + + + + - a color string + + + 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>
    + + + + + + + + + + + @@ -147431,6 +146981,11 @@
    Parameters:
    +
    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);
    + +
    @@ -149217,7 +148772,7 @@

    jsboot/p5shape.js, - line 710 + line 709

    @@ -149407,7 +148962,7 @@

    jsboot/p5shape.js, - line 760 + line 759

    @@ -150828,7 +150383,7 @@

    jsboot/p5shape.js, - line 153 + line 152

    @@ -151041,7 +150596,7 @@

    jsboot/p5.js, - line 548 + line 543

    @@ -151366,7 +150921,7 @@

    jsboot/p5shape.js, - line 682 + line 681

    @@ -151531,7 +151086,7 @@

    jsboot/p5.js, - line 491 + line 486

    @@ -151861,7 +151416,7 @@

    jsboot/p5.js, - line 240 + line 235

    @@ -155142,7 +154697,7 @@

    jsboot/p5.js, - line 413 + line 408

    @@ -155738,7 +155293,7 @@

    jsboot/p5.js, - line 276 + line 271

    @@ -156281,7 +155836,7 @@

    jsboot/p5shape.js, - line 190 + line 189

    @@ -156499,7 +156054,7 @@

    jsboot/p5.js, - line 636 + line 631

    @@ -156781,7 +156336,7 @@

    jsboot/p5env.js, - line 26 + line 45

    @@ -156793,7 +156348,7 @@

    - 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 (+). + 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 (+).
    @@ -156925,7 +156480,7 @@

    jsboot/p5env.js, - line 45 + line 26

    @@ -156937,7 +156492,7 @@

    - 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 (+). + 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 (+).
    @@ -157069,7 +156624,7 @@

    jsboot/p5.js, - line 585 + line 580

    @@ -157163,7 +156718,7 @@

    jsboot/p5shape.js, - line 212 + line 211

    @@ -158175,7 +157730,7 @@

    jsboot/p5shape.js, - line 241 + line 240

    @@ -158388,7 +157943,7 @@

    jsboot/p5shape.js, - line 569 + line 568

    @@ -158703,7 +158258,7 @@

    jsboot/p5.js, - line 330 + line 325

    @@ -159598,7 +159153,7 @@

    jsboot/p5.js, - line 441 + line 436

    @@ -159991,7 +159546,260 @@
    Parameters:
    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);
    + 
    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);
    @@ -160002,14 +159810,14 @@
    Example
    -

    +

    - inner scale(scales) + inner setAlpha(alpha)
    - jsboot/p5trans.js, - line 396 + jsboot/p5color.js, + line 595

    @@ -160053,16 +159861,13 @@
    Parameters:
    - scales + alpha -p5.Vector -| - -Array.<Number> +Number @@ -160072,7 +159877,7 @@
    Parameters:
    - per-axis percents to scale the object + the new alpha value @@ -160132,6 +159937,11 @@
    Parameters:
    +
    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);
}
    + + @@ -160140,14 +159950,14 @@
    Parameters:
    -

    +

    - inner second() → {Integer} + inner setBlue(blue)
    - jsboot/p5util.js, - line 1138 + jsboot/p5color.js, + line 575

    @@ -160158,8 +159968,62 @@

    -
    - The second() function returns the current second as a value from 0 - 59. + + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    blue + + +Number + + + + the new blue value
    +
    @@ -160177,35 +160041,146 @@

    + +
    + + + -
    -
    Returns:
    + + + + + + + + + + + + + + + + + + + + + + +
    + + + +

    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 +
    + +

    + + +
    +
    + -Integer + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + -- the current second + + + + + + + + + + + + + +
    NameTypeDescription
    green + + +Number + + the new green value
    +
    + + + + + + + + + + + +
    @@ -160244,7 +160219,7 @@
    Returns:
    Example
    - 
    var s = second();
text('Current second: \n' + s, 5, 50);
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -160255,14 +160230,14 @@
    Example
    -

    +

    - inner setAlpha(alpha) + inner setRed(red)
    jsboot/p5color.js, - line 595 + line 535

    @@ -160306,7 +160281,7 @@
    Parameters:
    - alpha + red @@ -160322,7 +160297,7 @@
    Parameters:
    - the new alpha value + the new red value @@ -160384,7 +160359,7 @@
    Parameters:
    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);
}
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -160395,14 +160370,14 @@
    Example
    -

    +

    - inner setBlue(blue) + inner shearX(angle)
    - jsboot/p5color.js, - line 575 + jsboot/p5trans.js, + line 245

    @@ -160413,6 +160388,10 @@

    +
    + 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. +
    + @@ -160446,7 +160425,7 @@
    Parameters:
    - blue + angle @@ -160462,7 +160441,7 @@
    Parameters:
    - the new blue value + angle of shear specified in radians or degrees, depending on current angleMode @@ -160524,7 +160503,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -160535,14 +160514,14 @@
    Example
    -

    +

    - inner setGreen(green) + inner shearY(angle)
    - jsboot/p5color.js, - line 555 + jsboot/p5trans.js, + line 279

    @@ -160553,6 +160532,10 @@

    +
    + 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. +
    + @@ -160586,7 +160569,7 @@
    Parameters:
    - green + angle @@ -160602,7 +160585,7 @@
    Parameters:
    - the new green value + angle of shear specified in radians or degrees, depending on current angleMode @@ -160664,7 +160647,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -160675,14 +160658,14 @@
    Example
    -

    +

    - inner setRed(red) + inner shorten(list) → {Array}
    - jsboot/p5color.js, - line 535 + jsboot/p5util.js, + line 167

    @@ -160693,6 +160676,10 @@

    +
    + Decreases an array by one element and returns the shortened array, maps to Array.pop(). +
    + @@ -160726,13 +160713,13 @@
    Parameters:
    - red + list -Number +Array @@ -160742,7 +160729,7 @@
    Parameters:
    - the new red value + Array to shorten @@ -160763,6 +160750,27 @@
    Parameters:
    +
    +
    Returns:
    + + + + + +Array + + + + + +- shortened Array + + + + + +
    + @@ -160804,7 +160812,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    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']
}
    @@ -160815,14 +160823,14 @@
    Example
    -

    +

    - inner shearX(angle) + inner shuffle(array, boolopt) → {Array}
    - jsboot/p5trans.js, - line 245 + jsboot/p5util.js, + line 188

    @@ -160834,7 +160842,7 @@

    - 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. + Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm.
    @@ -160858,6 +160866,8 @@

    Parameters:
    Type + Attributes + @@ -160870,67 +160880,71 @@
    Parameters:
    - angle + array -Number +Array + + - - - angle of shear specified in radians or degrees, depending on current angleMode - - - - - - - - - - - - - - + - + + + - + - + Array to shuffle + + + + bool + -
    + + + +Boolean - - - - + + - + + + + <optional>
    + - + - + + + - + - + modify passed array + + + + @@ -160942,118 +160956,32 @@
    Parameters:
    -
    - -
    Example
    +
    +
    Returns:
    - 
    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:
    - - - - - - - - - - - +Array - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    angle - - -Number +- shuffled Array - - angle of shear specified in radians or degrees, depending on current angleMode
    -
    - - - - - - - - - - - -
    @@ -161092,7 +161020,7 @@
    Parameters:
    Example
    - 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    + 
    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);
}
    @@ -161103,14 +161031,14 @@
    Example
    -

    +

    - inner shorten(list) → {Array} + inner sin(angle) → {Number}
    - jsboot/p5util.js, - line 167 + jsboot/p5math.js, + line 1339

    @@ -161122,7 +161050,7 @@

    - Decreases an array by one element and returns the shortened array, maps to Array.pop(). + Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.
    @@ -161158,13 +161086,13 @@

    Parameters:
    - list + angle -Array +Number @@ -161174,7 +161102,7 @@
    Parameters:
    - Array to shorten + the angle @@ -161202,13 +161130,13 @@
    Returns:
    -Array +Number -- shortened Array +- the sine of the angle @@ -161257,7 +161185,7 @@
    Returns:
    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']
}
    + 
    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;
}
    @@ -161268,14 +161196,14 @@
    Example
    -

    +

    - inner shuffle(array, boolopt) → {Array} + inner sort(list, countopt) → {Array}
    jsboot/p5util.js, - line 188 + line 228

    @@ -161287,7 +161215,7 @@

    - Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. + 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.
    @@ -161325,7 +161253,7 @@

    Parameters:
    - array + list @@ -161349,20 +161277,20 @@
    Parameters:
    - Array to shuffle + Array to sort - bool + count -Boolean +Integer @@ -161382,7 +161310,7 @@
    Parameters:
    - modify passed array + number of elements to sort, starting from 0 @@ -161416,7 +161344,7 @@
    Returns:
    -- shuffled Array +- the sorted list @@ -161465,7 +161393,7 @@
    Returns:
    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);
}
    + 
    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]
}
    @@ -161476,14 +161404,14 @@
    Example
    -

    +

    - inner sin(angle) → {Number} + inner splice(list, value, position) → {Array}
    - jsboot/p5math.js, - line 1339 + jsboot/p5util.js, + line 272

    @@ -161495,7 +161423,7 @@

    - Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. + 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.)
    @@ -161531,13 +161459,13 @@

    Parameters:
    - angle + list -Number +Array @@ -161547,189 +161475,37 @@
    Parameters:
    - the angle + Array to splice into - - - - - - - - - - - - - - - - - -
    -
    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:
    - - - - - - - - - - - - - - - - - - - - - - - + - - - + - + - - - + @@ -161789,7 +161555,7 @@
    Returns:
    -- the sorted list +- the list @@ -161838,7 +161604,7 @@
    Returns:
    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]
}
    + 
    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]
}
    @@ -161849,14 +161615,14 @@
    Example
    -

    +

    - inner splice(list, value, position) → {Array} + inner split(value, delim) → {Array.<String>}
    jsboot/p5util.js, - line 272 + line 965

    @@ -161868,7 +161634,7 @@

    - 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.) + 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.
    @@ -161902,29 +161668,6 @@

    Parameters:
    - - - - - - - - - - - - - - - - @@ -161933,7 +161676,7 @@
    Parameters:
    + - + + @@ -161994,13 +161737,13 @@
    Returns:
    -Array +Array.<String> -- the list +- Array of Strings @@ -162049,7 +161792,7 @@
    Returns:
    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]
}
    + 
    var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
    @@ -162060,14 +161803,14 @@
    Example
    -

    +

    - inner split(value, delim) → {Array.<String>} + inner splitTokens(value, delimopt) → {Array.<String>}
    jsboot/p5util.js, - line 965 + line 991

    @@ -162079,7 +161822,7 @@

    - 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. + 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.
    @@ -162103,6 +161846,8 @@

    Parameters:
    + + @@ -162128,6 +161873,14 @@
    Parameters:
    + + @@ -162151,10 +161904,20 @@
    Parameters:
    + - + + + @@ -162237,7 +162000,7 @@
    Returns:
    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);
    + 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    @@ -162248,14 +162011,14 @@
    Example
    -

    +

    - inner splitTokens(value, delimopt) → {Array.<String>} + inner sq(n) → {Number}
    - jsboot/p5util.js, - line 991 + jsboot/p5math.js, + line 631

    @@ -162267,7 +162030,7 @@

    - 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. + 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.
    @@ -162291,8 +162054,6 @@

    Parameters:
    - - @@ -162305,64 +162066,23 @@
    Parameters:
    - + - - - - - - - - - - - - - - - - - - - - - - + @@ -162390,13 +162110,13 @@
    Returns:
    -Array.<String> +Number -- Array of Strings +- squared number @@ -162445,7 +162165,7 @@
    Returns:
    Example
    - 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    + 
    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);
}
    @@ -162456,14 +162176,14 @@
    Example
    -

    +

    - inner sq(n) → {Number} + inner sqrt(n) → {Number}
    jsboot/p5math.js, - line 631 + line 672

    @@ -162475,7 +162195,7 @@

    - 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. + 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().
    @@ -162527,7 +162247,7 @@

    Parameters:
    -
    + @@ -162561,7 +162281,7 @@
    Returns:
    -- squared number +- square root of number @@ -162610,7 +162330,7 @@
    Returns:
    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);
}
    + 
    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);
}
    @@ -162621,14 +162341,14 @@
    Example
    -

    +

    - inner sqrt(n) → {Number} + inner square(x, y, s)
    - jsboot/p5math.js, - line 672 + jsboot/p5shape.js, + line 331

    @@ -162640,7 +162360,7 @@

    - 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(). + 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.
    @@ -162676,7 +162396,7 @@

    Parameters:
    - + + - -
    NameTypeAttributesDescription
    listvalue -Array +any - - - - - - Array to sortvalue to be spliced in
    countposition @@ -161742,20 +161518,10 @@
    Parameters:
    		 - - <optional>
    - - - - - -     		number of elements to sort, starting from 0in the array from which to insert data
    list - - -Array - - - - Array to splice into
    value -any +String @@ -161943,20 +161686,20 @@
    Parameters:
    -     		value to be spliced inthe String to be split
    positiondelim -Integer +String @@ -161966,7 +161709,7 @@
    Parameters:
    -     		in the array from which to insert datathe String used to separate the data
    TypeAttributes + + + + + + + + <optional>
    + + + + +     		the String used to separate the datalist of individual Strings that will be used as separators
    TypeAttributes
    valuen -String +Number - - - - - - the String to be split
    delim - - -String - - - - - - <optional>
    - - - - -     		list of individual Strings that will be used as separatorsnumber to square
    number to squarenon-negative number to square root
    nx @@ -162692,47 +162412,72 @@
    Parameters:
    -     		non-negative number to square rootx-coordinate of the square.
    -
    - + + + y + - + + + +Number - - + + - + - + + + y-coordinate of the square. + -
    -
    Returns:
    - + + + + s + + + + +Number + + -Number + + + side size of the square. + + + + +
    + -- square root of number + + + + + + - - @@ -162775,7 +162520,7 @@
    Returns:
    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);
}
    + 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    @@ -162786,14 +162531,14 @@
    Example
    -

    +

    - inner square(x, y, s) + inner str(n) → {String}
    - jsboot/p5shape.js, - line 332 + jsboot/p5util.js, + line 398

    @@ -162805,7 +162550,7 @@

    - 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. + 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.
    @@ -162841,13 +162586,22 @@

    Parameters:
    - x + n +String +| + +Boolean +| + Number +| + +Array @@ -162857,72 +162611,47 @@
    Parameters:
    - x-coordinate of the square. + value to parse + + - - - y - - - - - -Number - - - - + + - + - + - y-coordinate of the square. - + - - - s - + - - + +
    +
    Returns:
    + -Number - - - - - +String - side size of the square. - - - - -
    - - - +- string representation of value - - - + + @@ -162965,7 +162694,7 @@
    Parameters:
    Example
    - 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    + 
    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" ]
    @@ -162976,14 +162705,14 @@
    Example
    -

    +

    - inner str(n) → {String} + inner stroke(gray, alphaopt)
    - jsboot/p5util.js, - line 398 + jsboot/p5color.js, + line 2170

    @@ -162994,10 +162723,6 @@

    -
    - 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. -
    - @@ -163019,6 +162744,8 @@
    Parameters:
    Type + Attributes + @@ -163031,72 +162758,83 @@
    Parameters:
    - n + gray -String -| - -Boolean -| - Number -| - -Array + + - + - value to parse - + + + - - - + - - + a gray value + - + + + alpha + - + + + +Number - - + + - -
    -
    Returns:
    - + + + + <optional>
    + + + + -String + + + + + + +
    + + -- string representation of value + + + + - - @@ -163137,11 +162875,6 @@
    Returns:
    -
    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" ]
    - -
    @@ -163287,12 +163020,12 @@

    Parameters:

    - inner stroke(gray, alphaopt) + inner stroke(color)
    jsboot/p5color.js, - line 2170 + line 2182

    @@ -163324,8 +163057,6 @@
    Parameters:
    Type - Attributes - @@ -163338,64 +163069,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + color -Number +Color - - - <optional>
    - - - - - - - - + the stroke color @@ -163465,12 +163155,12 @@
    Parameters:

    - inner stroke(values) + inner stroke(v1, v2, v3, alphaopt)
    jsboot/p5color.js, - line 2176 + line 2084

    @@ -163481,6 +163171,10 @@

    +
    + 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. +
    + @@ -163502,6 +163196,8 @@
    Parameters:
    Type + Attributes + @@ -163514,158 +163210,126 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - + - + + + - + - + red or hue value relative to the current color range + - + + + v2 + - + + + +Number - - + + - + + + - + - + + + - -
    + + green or saturation value relative to the current color range + -
    - + + + v3 - -
    - -

    + - inner stroke(color) - -
    - jsboot/p5color.js, - line 2182 -
    - -

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - + + + - + - - - + + - - + + + - + @@ -163725,6 +163389,11 @@
    Parameters:
    +
    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);
    + + @@ -163735,12 +163404,12 @@
    Parameters:

    - inner stroke(v1, v2, v3, alphaopt) + inner stroke(values)
    jsboot/p5color.js, - line 2084 + line 2176

    @@ -163751,10 +163420,6 @@

    -
    - 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. -
    - @@ -163776,8 +163441,6 @@
    Parameters:

    - - @@ -163790,126 +163453,23 @@
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - + @@ -163969,11 +163529,6 @@
    Parameters:
    -
    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);
    - - @@ -163989,7 +163544,7 @@

    jsboot/p5shape.js, - line 811 + line 810

    @@ -165480,6 +165035,141 @@
    Example
    +
    + +

    + + inner translate(vector) + + +
    + jsboot/p5trans.js, + line 347 +
    + +

    + + + +
    +
    + + + + + + + + + + +
    +
    Parameters:
    + +
    Name + - TypeDescription
    blue or brightness value relative to the current color range
    coloralpha -Color +Number + + <optional>
    + + + + + +     		the stroke color
    TypeAttributes
    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
    alphavalues -Number +Array.<Number> - - <optional>
    - - - - -     		an array containing the red,green,blue & and alpha components of the color
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    vector + + +p5.Vector + + + + the vector to translate by
    + +
    + + + + + + + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + + +

    @@ -165698,141 +165388,6 @@

    Example
    -
    - -

    - - inner translate(vector) - - -
    - jsboot/p5trans.js, - line 347 -
    - -

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    vector - - -p5.Vector - - - - the vector to translate by
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
    - - - -

    @@ -165842,7 +165397,7 @@

    jsboot/p5shape.js, - line 357 + line 356

    @@ -166596,7 +166151,7 @@

    jsboot/p5shape.js, - line 461 + line 460

    @@ -168579,133 +168134,7 @@
    Properties:
    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);
}
    + 
    // Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
    @@ -168714,12 +168143,12 @@

    Example
    -

    - static, readonly pmouseY +

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

    @@ -168729,7 +168158,7 @@

    - 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. + 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.
    @@ -168766,7 +168195,7 @@
    Properties:
    - pmouseY + pmouseX @@ -168831,7 +168260,7 @@
    Properties:
    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);
}
    + 
    // 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);
}
    @@ -168840,12 +168269,12 @@

    Example
    -

    - static, readonly pwinMouseX +

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

    @@ -168855,7 +168284,7 @@

    - 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. + 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.
    @@ -168892,7 +168321,7 @@
    Properties:
    - pwinMouseX + pmouseY @@ -168957,7 +168386,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -168966,12 +168395,12 @@

    Example
    -

    - static, readonly pwinMouseY +

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

    @@ -168981,7 +168410,7 @@

    - 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. + 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.
    @@ -169018,7 +168447,7 @@
    Properties:
    - pwinMouseY + pwinMouseX @@ -169083,7 +168512,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -169092,12 +168521,12 @@

    Example
    -

    - static, readonly width +

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

    @@ -169107,7 +168536,7 @@

    - System variable that stores the width of the drawing canvas. + 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.
    @@ -169144,7 +168573,7 @@
    Properties:
    - width + pwinMouseY @@ -169207,18 +168636,23 @@
    Properties:
    +
    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 windowHeight +

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

    @@ -169228,7 +168662,7 @@

    - System variable that stores the height of the inner window. + System variable that stores the width of the drawing canvas.
    @@ -169265,7 +168699,7 @@
    Properties:
    - windowHeight + width @@ -169328,23 +168762,18 @@
    Properties:
    -
    Example
    - - 
    createCanvas(windowWidth, windowHeight);
    - -
    -

    - static, readonly windowWidth +

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

    @@ -169354,7 +168783,7 @@

    - System variable that stores the width of the inner window. + System variable that stores the height of the inner window.
    @@ -169391,7 +168820,7 @@
    Properties:
    - windowWidth + windowHeight @@ -169465,12 +168894,12 @@
    Example
    -

    - static, readonly winMouseX +

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

    @@ -169480,7 +168909,7 @@

    - The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. + System variable that stores the width of the inner window.
    @@ -169517,7 +168946,7 @@
    Properties:
    - winMouseX + windowWidth @@ -169582,7 +169011,7 @@
    Properties:
    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);
}
    + 
    createCanvas(windowWidth, windowHeight);
    @@ -169591,12 +169020,12 @@

    Example
    -

    - static, readonly winMouseY +

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

    @@ -169606,7 +169035,7 @@

    - The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. + The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window.
    @@ -169643,7 +169072,7 @@
    Properties:
    - winMouseY + winMouseX @@ -169708,7 +169137,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -169717,12 +169146,12 @@

    Example
    -

    - inner colorPatterns +

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

    @@ -169732,7 +169161,7 @@

    - Full color string patterns. The capture groups are necessary. + The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window.
    @@ -169743,142 +169172,56 @@

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - +

    Properties:
    -
    + + + + + - - -
    -

    - 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. -
    +
    +
    NameTypeDescription
    winMouseY + + +Number - - - + +
    - -
    @@ -169918,49 +169261,44 @@

    - - -

    +

    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);
}
    -

    Methods

    + -
    - + +
    +

    + inner colorPatterns -

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

    - - +
    + jsboot/p5color.js, + line 888 +
    +

    + +
    -
    - deep copy the current environment. + Full color string patterns. The capture groups are necessary.
    + - - +
    @@ -169976,8 +169314,7 @@

    - -
    + @@ -169992,55 +169329,64 @@

    +

    + +

    + + + +
    +

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

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

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

    - -
    -
    -
    - make sure we have a 2x2 identity matrix. -
    + @@ -170052,16 +169398,40 @@

    +

    + + + + + +
    +

    + 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. +
    + @@ -170102,21 +169472,28 @@

    +

    - + + + + +

    Methods

    + +
    -

    +

    - static _PolyLine() + static _cloneEnv()
    - jsboot/p5shape.js, - line 551 + jsboot/p5.js, + line 67

    @@ -170128,7 +169505,7 @@

    - draw polygon by using lines. + deep copy the current environment.
    @@ -170198,14 +169575,14 @@

    -

    +

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

    @@ -170217,7 +169594,7 @@

    - translate a point with the current matrix (if any). + make sure we have a 2x2 identity matrix.
    @@ -170228,78 +169605,44 @@

    -
    -
    Parameters:
    - - - - - - - - - - - - + - - - + - - - - - + - + - - +
    -
    - + - - - - + - + - + - + - - + - -
    NameTypeDescription
    x - - -number + + - - point
    y - - -number + + - - point
    -
    @@ -170309,30 +169652,59 @@

    Parameters:
    +

    + + + + + + +
    -
    -
    Returns:
    - +

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

    + + +
    +
    + +
    + draw polygon by using lines. +
    + -number + + + + + -- the translated x coordinate. + + + + - - @@ -170381,14 +169753,14 @@
    Returns:
    -

    +

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

    @@ -170509,7 +169881,7 @@
    Returns:
    -- the translated y coordinate. +- the translated x coordinate. @@ -170564,14 +169936,14 @@
    Returns:
    -

    +

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

    @@ -170583,7 +169955,7 @@

    - ignored + translate a point with the current matrix (if any).
    @@ -170594,13 +169966,78 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    x + + +number + + + + point
    y + + +number + + + + point
    +
    @@ -170609,6 +170046,35 @@

    + + + + + +
    +
    Returns:
    + + + + + +number + + + + + +- the translated y coordinate. + + + + + +
    + + + +
    @@ -170653,14 +170119,14 @@

    -

    +

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

    @@ -170672,7 +170138,7 @@

    - exit the script after the current Loop(). + ignored
    @@ -170742,14 +170208,14 @@

    -

    +

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

    @@ -170761,7 +170227,7 @@

    - ignored + exit the script after the current Loop().
    @@ -170927,7 +170393,7 @@

    jsboot/p5.js, - line 231 + line 226

    @@ -171283,7 +170749,7 @@

    jsboot/p5.js, - line 226 + line 221

    @@ -173544,7 +173010,151 @@
    Returns:
    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);
}
    + 
    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));
    @@ -173557,12 +173167,12 @@
    Example

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

    @@ -173608,13 +173218,13 @@
    Parameters:
    - gray + colorstring -Number +String @@ -173632,7 +173242,7 @@
    Parameters:
    - specifies a value between white and black + color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex @@ -173665,7 +173275,7 @@
    Parameters:
    - + opacity of the background relative to current color range (default is 0-255) @@ -173735,12 +173345,12 @@
    Parameters:

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

    @@ -173786,69 +173396,7 @@
    Parameters:
    - 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 + gray @@ -173872,7 +173420,7 @@
    Parameters:
    - blue or brightness value (depending on the current color mode) + specifies a value between white and black @@ -173975,12 +173523,12 @@
    Parameters:

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

    @@ -174012,6 +173560,8 @@
    Parameters:
    Type + Attributes + @@ -174024,150 +173574,75 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + - -
    + + red or hue value (depending on the current color mode) + -
    - + + + v2 - -
    - -

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

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - - - + + + - + - - - + + - - + + @@ -174288,12 +173763,12 @@
    Parameters:

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

    @@ -174304,10 +173779,6 @@

    -
    - 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. -
    - @@ -174341,13 +173812,13 @@
    Parameters:

    - + + @@ -174417,11 +173888,6 @@
    Parameters:
    -
    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));
    - - @@ -174432,12 +173898,12 @@
    Example

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

    @@ -174483,13 +173949,13 @@
    Parameters:
    - + + @@ -174540,7 +174006,7 @@
    Parameters:
    - + @@ -174615,7 +174081,7 @@

    jsboot/p5shape.js, - line 380 + line 379

    @@ -175791,7 +175257,7 @@

    jsboot/p5shape.js, - line 134 + line 133

    @@ -176055,11 +175521,319 @@

    -

    Example
    - - 
    // Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

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

function mousePressed() {
  clear();
}
    - - +
    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:
    + +
    Name + - TypeAttributesDescription
    green or saturation value (depending on the current color mode)
    bitmapv3 -Bitmap +Number @@ -174185,7 +173660,7 @@
    Parameters:
    -     		image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)blue or brightness value (depending on the current color mode)
    colorvalues -Color +Array.<Number> @@ -174357,7 +173828,7 @@
    Parameters:
    -     		any value created by the color() functionan array containing the red,green,blue & and alpha components of the color
    colorstringbitmap -String +Bitmap @@ -174507,7 +173973,7 @@
    Parameters:
    -     		color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit heximage created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
    opacity of the background relative to current color range (default is 0-255)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    color + + +Color + + + +
    + +
    + + + + + + + + + + + + + +
    +
    Returns:
    + + + + + +Color + + + + + + + + + +
    + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + + + +
    + +

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

    + + + +
    +
    + + + + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    value + + +String + + + + a color string
    + +
    + + + + + + + + + + + + + +
    +
    Returns:
    + + + + + +Color + + + + + + + + + +
    + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    @@ -176070,12 +175844,12 @@

    Example

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

    @@ -176086,10 +175860,6 @@

    -
    - 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. -
    - @@ -176125,7 +175895,7 @@
    Parameters:
    - gray + v1 @@ -176149,14 +175919,14 @@
    Parameters:
    - number specifying value between white and black. + red or hue value relative to the current color range - alpha + v2 @@ -176171,8 +175941,6 @@
    Parameters:
    - <optional>
    - @@ -176182,168 +175950,71 @@
    Parameters:
    - alpha value relative to current color range (default is 0-255) + green or saturation value relative to the current color range - - - - - - - - - - - - - - + + + v3 + - -
    -
    Returns:
    - + + - - - -Color - - - - - -- resulting color - - +Number -
    - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    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 color(values) → {Color} - -
    - jsboot/p5color.js, - line 1466 -
    - -

    - - - -
    -
    - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - - - + + + - + - - - + + - - + + + - + @@ -176432,12 +176103,12 @@
    Returns:

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

    @@ -176481,13 +176152,13 @@
    Parameters:
    - + + @@ -176586,12 +176257,12 @@
    Returns:

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

    @@ -176602,6 +176273,10 @@

    +
    + 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. +
    + @@ -176637,69 +176312,7 @@
    Parameters:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + @@ -176756,7 +176369,7 @@
    Parameters:
    - + @@ -176790,6 +176403,8 @@
    Returns:
    +- resulting color + @@ -176835,6 +176450,11 @@
    Returns:
    +
    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
    + + @@ -176843,14 +176463,14 @@
    Returns:
    -

    +

    - inner color(color) → {Color} + inner colorMode(mode, maxopt)
    jsboot/p5color.js, - line 1472 + line 1841

    @@ -176861,6 +176481,10 @@

    +
    + 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. +
    + @@ -176882,6 +176506,8 @@
    Parameters:

    + + @@ -176894,61 +176520,83 @@
    Parameters:
    - + + - - + - - -
    NameTypeDescription
    blue or brightness value relative to the current color range
    valuesalpha -Array.<Number> +Number + + <optional>
    + + + + + +     		an array containing the red,green,blue & and alpha components of the color
    valuevalues -String +Array.<Number> @@ -176497,7 +176168,7 @@
    Parameters:
    -     		a color stringan array containing the red,green,blue & and alpha components of the color
    v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
    v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
    v3gray @@ -176723,7 +176336,7 @@
    Parameters:
    -     		blue or brightness value relative to the current color rangenumber specifying value between white and black.
    alpha value relative to current color range (default is 0-255)
    TypeAttributes
    colormode -Color +Constant + + + + +
    + either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness) + -
    - + + + max + - + + + +Number - - + + - + + + + <optional>
    + - -
    -
    Returns:
    - + + + + -Color + range for all values + + + + +
    + + + + + + - - @@ -176989,6 +176637,11 @@
    Returns:
    +
    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);
    + +
    @@ -177266,193 +176919,6 @@

    Parameters:
    -
    - -

    - - 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);
    - - - -
    - - - -

    @@ -178919,7 +178385,7 @@

    jsboot/p5.js, - line 390 + line 385

    @@ -179268,7 +178734,7 @@

    jsboot/p5shape.js, - line 78 + line 77

    @@ -179517,7 +178983,7 @@

    jsboot/p5shape.js, - line 624 + line 623

    @@ -179661,7 +179127,7 @@

    jsboot/p5shape.js, - line 483 + line 482

    @@ -179977,12 +179443,12 @@
    Example

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

    @@ -179993,10 +179459,6 @@

    -
    - 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. -
    - @@ -180032,69 +179494,7 @@
    Parameters:
    - 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 + gray @@ -180118,7 +179518,7 @@
    Parameters:
    - blue or brightness value relative to the current color range + a gray value @@ -180211,11 +179611,6 @@
    Parameters:
    -
    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);
    - -
    @@ -180226,12 +179621,12 @@

    Example

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

    @@ -180275,13 +179670,13 @@
    Parameters:
    - values + value -Array.<Number> +String @@ -180291,7 +179686,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + a color string @@ -180361,12 +179756,12 @@
    Parameters:

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

    @@ -180398,8 +179793,6 @@
    Parameters:
    Type - Attributes - @@ -180412,64 +179805,23 @@
    Parameters:
    - gray + values -Number +Array.<Number> - - - - - - - - - - - - a gray value - - - - - - - alpha - - - - - -Number - - - - - - <optional>
    - - - - - - - - - - - + an array containing the red,green,blue & and alpha components of the color @@ -180674,12 +180026,12 @@
    Parameters:

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

    @@ -180690,6 +180042,10 @@

    +
    + 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. +
    + @@ -180711,6 +180067,8 @@
    Parameters:
    Type + Attributes + @@ -180723,23 +180081,126 @@
    Parameters:
    - value + v1 -String +Number + + + + + + - a color string + + + 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>
    + + + + + + + + + + + @@ -180799,6 +180260,11 @@
    Parameters:
    +
    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);
    + +
    @@ -182585,7 +182051,7 @@

    jsboot/p5shape.js, - line 710 + line 709

    @@ -182775,7 +182241,7 @@

    jsboot/p5shape.js, - line 760 + line 759

    @@ -184196,7 +183662,7 @@

    jsboot/p5shape.js, - line 153 + line 152

    @@ -184409,7 +183875,7 @@

    jsboot/p5.js, - line 548 + line 543

    @@ -184734,7 +184200,7 @@

    jsboot/p5shape.js, - line 682 + line 681

    @@ -184899,7 +184365,7 @@

    jsboot/p5.js, - line 491 + line 486

    @@ -185229,7 +184695,7 @@

    jsboot/p5.js, - line 240 + line 235

    @@ -188510,7 +187976,7 @@

    jsboot/p5.js, - line 413 + line 408

    @@ -189106,7 +188572,7 @@

    jsboot/p5.js, - line 276 + line 271

    @@ -189649,7 +189115,7 @@

    jsboot/p5shape.js, - line 190 + line 189

    @@ -189867,7 +189333,7 @@

    jsboot/p5.js, - line 636 + line 631

    @@ -190149,7 +189615,7 @@

    jsboot/p5env.js, - line 26 + line 45

    @@ -190161,7 +189627,7 @@

    - 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 (+). + 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 (+).
    @@ -190293,7 +189759,7 @@

    jsboot/p5env.js, - line 45 + line 26

    @@ -190305,7 +189771,7 @@

    - 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 (+). + 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 (+).
    @@ -190437,7 +189903,7 @@

    jsboot/p5.js, - line 585 + line 580

    @@ -190531,7 +189997,7 @@

    jsboot/p5shape.js, - line 212 + line 211

    @@ -191543,7 +191009,7 @@

    jsboot/p5shape.js, - line 241 + line 240

    @@ -191756,7 +191222,7 @@

    jsboot/p5shape.js, - line 569 + line 568

    @@ -192071,7 +191537,7 @@

    jsboot/p5.js, - line 330 + line 325

    @@ -192966,7 +192432,7 @@

    jsboot/p5.js, - line 441 + line 436

    @@ -196161,7 +195627,7 @@

    jsboot/p5shape.js, - line 332 + line 331

    @@ -196520,12 +195986,12 @@
    Example

    - inner stroke(value) + inner stroke(gray, alphaopt)
    jsboot/p5color.js, - line 2165 + line 2170

    @@ -196557,6 +196023,8 @@
    Parameters:
    Type + Attributes + @@ -196569,23 +196037,64 @@
    Parameters:
    - value + gray -String +Number + + + + + + + + - a color string + a gray value + + + + + + + alpha + + + + + +Number + + + + + + + + + <optional>
    + + + + + + + + + + + @@ -196655,12 +196164,12 @@
    Parameters:

    - inner stroke(gray, alphaopt) + inner stroke(value)
    jsboot/p5color.js, - line 2170 + line 2165

    @@ -196692,8 +196201,6 @@
    Parameters:
    Type - Attributes - @@ -196706,64 +196213,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + value -Number +String - - - <optional>
    - - - - - - - - + a color string @@ -196833,12 +196299,12 @@
    Parameters:

    - inner stroke(values) + inner stroke(color)
    jsboot/p5color.js, - line 2176 + line 2182

    @@ -196882,13 +196348,13 @@
    Parameters:
    - values + color -Array.<Number> +Color @@ -196898,7 +196364,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + the stroke color @@ -196968,12 +196434,12 @@
    Parameters:

    - inner stroke(color) + inner stroke(v1, v2, v3, alphaopt)
    jsboot/p5color.js, - line 2182 + line 2084

    @@ -196984,6 +196450,10 @@

    +
    + 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. +
    + @@ -197005,6 +196475,8 @@
    Parameters:
    Type + Attributes + @@ -197017,23 +196489,126 @@
    Parameters:
    - color + v1 -Color +Number + + + + + + - the stroke color + + + 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>
    + + + + + + + + + + + @@ -197093,6 +196668,11 @@
    Parameters:
    +
    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);
    + +
    @@ -197103,12 +196683,12 @@

    Parameters:

    - inner stroke(v1, v2, v3, alphaopt) + inner stroke(values)
    jsboot/p5color.js, - line 2084 + line 2176

    @@ -197119,10 +196699,6 @@

    -
    - 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. -
    - @@ -197144,8 +196720,6 @@
    Parameters:
    Type - Attributes - @@ -197158,126 +196732,23 @@
    Parameters:
    - 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 + values -Number +Array.<Number> - - - <optional>
    - - - - - - - - + an array containing the red,green,blue & and alpha components of the color @@ -197337,11 +196808,6 @@
    Parameters:
    -
    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);
    - -
    @@ -197357,7 +196823,7 @@

    jsboot/p5shape.js, - line 811 + line 810

    @@ -198852,12 +198318,12 @@
    Example

    - inner translate(x, y, zopt) + inner translate(vector)
    jsboot/p5trans.js, - line 313 + line 347

    @@ -198868,10 +198334,6 @@

    -
    - 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(). -
    - @@ -198893,8 +198355,6 @@
    Parameters:
    Type - Attributes - @@ -198907,95 +198367,23 @@
    Parameters:
    - x - - - - - -Number - - - - - - - - - - - - - - - - - - left/right translation - - - - - - - y - - - - - -Number - - - - - - - - - - - - - - - - - - up/down translation - - - - - - - z + vector -Number +p5.Vector - - - <optional>
    - - - - - - - - forward/backward translation (webgl only) + the vector to translate by @@ -199055,11 +198443,6 @@
    Parameters:
    -
    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);
}
    - -
    @@ -199070,12 +198453,12 @@

    Example

    - inner translate(vector) + inner translate(x, y, zopt)
    jsboot/p5trans.js, - line 347 + line 313

    @@ -199086,6 +198469,10 @@

    +
    + 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(). +
    + @@ -199107,6 +198494,8 @@
    Parameters:
    Type + Attributes + @@ -199119,23 +198508,95 @@
    Parameters:
    - vector + x -p5.Vector +Number + + + + + + + + - the vector to translate by + left/right translation + + + + + + + y + + + + + +Number + + + + + + + + + + + + + + + + + + up/down translation + + + + + + + z + + + + + +Number + + + + + + + + + <optional>
    + + + + + + + + + + + forward/backward translation (webgl only) @@ -199195,6 +198656,11 @@
    Parameters:
    +
    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);
}
    + +
    @@ -199210,7 +198676,7 @@

    jsboot/p5shape.js, - line 357 + line 356

    @@ -199964,7 +199430,7 @@

    jsboot/p5shape.js, - line 461 + line 460

    @@ -200266,6 +199732,8 @@

    p5compat

    +
    This module provides compatibility with p5js. Use Include('p5'); on the first line of your script to activate.
    + @@ -200566,259 +200034,7 @@
    Properties:
    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);
  }
}
    + 
    createCanvas(displayWidth, displayHeight);
    @@ -200827,12 +200043,12 @@

    Example
    -

    - static, readonly frameCount +

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

    @@ -200842,7 +200058,7 @@

    - 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. + 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.
    @@ -200879,13 +200095,13 @@
    Properties:
    - frameCount + displayWidth -Integer +Number @@ -200944,7 +200160,7 @@
    Properties:
    Example
    - 
    function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
    + 
    createCanvas(displayWidth, displayHeight);
    @@ -200953,12 +200169,12 @@

    Example
    -

    - static, readonly height +

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

    @@ -200968,7 +200184,7 @@

    - System variable that stores the height of the drawing canvas. + 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.
    @@ -201005,13 +200221,13 @@
    Properties:
    - height + focused -Number +Boolean @@ -201068,18 +200284,23 @@
    Properties:
    +
    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 key +

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

    @@ -201089,7 +200310,7 @@

    - The system variable key always contains the value of the most recent key on the keyboard that was typed. + 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.
    @@ -201126,13 +200347,13 @@
    Properties:
    - key + frameCount -String +Integer @@ -201191,7 +200412,7 @@
    Properties:
    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.
}
    + 
    function setup() {
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
    @@ -201200,12 +200421,133 @@

    Example
    -

    - static, readonly keyCode +

    + 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 532 + line 507

    @@ -201215,7 +200557,7 @@

    - 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. + The system variable key always contains the value of the most recent key on the keyboard that was typed.
    @@ -201252,13 +200594,13 @@
    Properties:
    - keyCode + key -Integer +String @@ -201317,7 +200659,7 @@
    Properties:
    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
}
    + 
    // 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.
}
    @@ -201326,12 +200668,12 @@

    Example
    -

    - static, readonly keyIsPressed +

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

    @@ -201341,7 +200683,7 @@

    - The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. + 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.
    @@ -201378,13 +200720,13 @@
    Properties:
    - keyIsPressed + keyCode -Boolean +Integer @@ -201443,7 +200785,7 @@
    Properties:
    Example
    - 
    function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
    + 
    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
}
    @@ -201452,12 +200794,12 @@

    Example
    -

    - static, readonly mouseButton +

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

    @@ -201467,7 +200809,7 @@

    - 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. + The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed.
    @@ -201504,13 +200846,13 @@
    Properties:
    - mouseButton + keyIsPressed -Constant +Boolean @@ -201569,7 +200911,7 @@
    Properties:
    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);
}
    + 
    function draw() {
  if (keyIsPressed === true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}
    @@ -201578,12 +200920,12 @@

    Example
    -

    - static, readonly mouseIsPressed +

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

    @@ -201593,7 +200935,7 @@

    - The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. + 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.
    @@ -201630,13 +200972,13 @@
    Properties:
    - mouseIsPressed + mouseButton -Boolean +Constant @@ -201695,7 +201037,7 @@
    Properties:
    Example
    - 
    function draw() {
  background(237, 34, 93);
  fill(0);

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

  print(mouseIsPressed);
}
    + 
    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);
}
    @@ -201704,12 +201046,12 @@

    Example
    -

    - static, readonly mouseX +

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

    @@ -201719,7 +201061,7 @@

    - 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. + The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not.
    @@ -201756,13 +201098,13 @@
    Properties:
    - mouseX + mouseIsPressed -Number +Boolean @@ -201821,7 +201163,7 @@
    Properties:
    Example
    - 
    // Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
    + 
    function draw() {
  background(237, 34, 93);
  fill(0);

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

  print(mouseIsPressed);
}
    @@ -201830,12 +201172,12 @@

    Example
    -

    - static, readonly mouseY +

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

    @@ -201845,7 +201187,7 @@

    - 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. + 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.
    @@ -201882,7 +201224,7 @@
    Properties:
    - mouseY + mouseX @@ -201947,7 +201289,7 @@
    Properties:
    Example
    - 
    // Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
    + 
    // Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
    @@ -201956,12 +201298,12 @@

    Example
    -

    - static, readonly pmouseX +

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

    @@ -201971,7 +201313,7 @@

    - 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. + 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.
    @@ -202008,7 +201350,7 @@
    Properties:
    - pmouseX + mouseY @@ -202073,7 +201415,7 @@
    Properties:
    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);
}
    + 
    // Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
    @@ -202082,12 +201424,12 @@

    Example
    -

    - static, readonly pmouseY +

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

    @@ -202097,7 +201439,7 @@

    - 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. + 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.
    @@ -202134,7 +201476,7 @@
    Properties:
    - pmouseY + pmouseX @@ -202199,7 +201541,7 @@
    Properties:
    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);
}
    + 
    // 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);
}
    @@ -202208,12 +201550,12 @@

    Example
    -

    - static, readonly pwinMouseX +

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

    @@ -202223,7 +201565,7 @@

    - 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. + 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.
    @@ -202260,7 +201602,7 @@
    Properties:
    - pwinMouseX + pmouseY @@ -202325,7 +201667,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -202334,12 +201676,12 @@

    Example
    -

    - static, readonly pwinMouseY +

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

    @@ -202349,7 +201691,7 @@

    - 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. + 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.
    @@ -202386,7 +201728,7 @@
    Properties:
    - pwinMouseY + pwinMouseX @@ -202451,7 +201793,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -202460,12 +201802,12 @@

    Example
    -

    - static, readonly width +

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

    @@ -202475,7 +201817,7 @@

    - System variable that stores the width of the drawing canvas. + 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.
    @@ -202512,7 +201854,7 @@
    Properties:
    - width + pwinMouseY @@ -202575,18 +201917,23 @@
    Properties:
    +
    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 windowHeight +

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

    @@ -202596,7 +201943,7 @@

    - System variable that stores the height of the inner window. + System variable that stores the width of the drawing canvas.
    @@ -202633,7 +201980,7 @@
    Properties:
    - windowHeight + width @@ -202696,23 +202043,18 @@
    Properties:
    -
    Example
    - - 
    createCanvas(windowWidth, windowHeight);
    - -
    -

    - static, readonly windowWidth +

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

    @@ -202722,7 +202064,7 @@

    - System variable that stores the width of the inner window. + System variable that stores the height of the inner window.
    @@ -202759,7 +202101,7 @@
    Properties:
    - windowWidth + windowHeight @@ -202833,12 +202175,12 @@
    Example
    -

    - static, readonly winMouseX +

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

    @@ -202848,7 +202190,7 @@

    - The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. + System variable that stores the width of the inner window.
    @@ -202885,7 +202227,7 @@
    Properties:
    - winMouseX + windowWidth @@ -202950,7 +202292,7 @@
    Properties:
    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);
}
    + 
    createCanvas(windowWidth, windowHeight);
    @@ -202959,12 +202301,12 @@

    Example
    -

    - static, readonly winMouseY +

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

    @@ -202974,7 +202316,7 @@

    - The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. + The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window.
    @@ -203011,7 +202353,7 @@
    Properties:
    - winMouseY + winMouseX @@ -203076,7 +202418,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -203085,12 +202427,12 @@

    Example
    -

    - inner colorPatterns +

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

    @@ -203100,7 +202442,7 @@

    - Full color string patterns. The capture groups are necessary. + The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window.
    @@ -203111,142 +202453,56 @@

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - +

    Properties:
    -
    + + + + + - - -
    -

    - 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. -
    +
    +
    NameTypeDescription
    winMouseY + + +Number - - - + +
    - -
    @@ -203286,49 +202542,44 @@

    - - -

    +

    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);
}
    -

    Methods

    + -
    - + +
    +

    + inner colorPatterns -

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

    - - +
    + jsboot/p5color.js, + line 888 +
    +

    + +
    -
    - deep copy the current environment. + Full color string patterns. The capture groups are necessary.
    + - - +
    @@ -203344,8 +202595,7 @@

    - -
    + @@ -203360,55 +202610,64 @@

    +

    + +

    + + + +
    +

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

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

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

    - -
    -
    -
    - make sure we have a 2x2 identity matrix. -
    + @@ -203420,16 +202679,40 @@

    +

    + + + + + +
    +

    + 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. +
    + @@ -203470,21 +202753,28 @@

    +

    - + + + + +

    Methods

    + +
    -

    +

    - static _PolyLine() + static _cloneEnv()
    - jsboot/p5shape.js, - line 551 + jsboot/p5.js, + line 67

    @@ -203496,7 +202786,7 @@

    - draw polygon by using lines. + deep copy the current environment.
    @@ -203566,14 +202856,14 @@

    -

    +

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

    @@ -203585,7 +202875,7 @@

    - translate a point with the current matrix (if any). + make sure we have a 2x2 identity matrix.
    @@ -203596,78 +202886,44 @@

    -
    -
    Parameters:
    - - - - - - - - - - - - + - - - + - - - - - + - + - - +
    -
    - + - - - - + - + - + - + - - + - -
    NameTypeDescription
    x - - -number + + - - point
    y - - -number + + - - point
    -
    @@ -203677,30 +202933,59 @@

    Parameters:
    +

    + + + + + + +
    -
    -
    Returns:
    - +

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

    + + +
    +
    + +
    + draw polygon by using lines. +
    + -number + + + + + -- the translated x coordinate. + + + + - - @@ -203749,14 +203034,14 @@
    Returns:
    -

    +

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

    @@ -203877,7 +203162,7 @@
    Returns:
    -- the translated y coordinate. +- the translated x coordinate. @@ -203932,14 +203217,14 @@
    Returns:
    -

    +

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

    @@ -203951,7 +203236,7 @@

    - ignored + translate a point with the current matrix (if any).
    @@ -203962,13 +203247,78 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    x + + +number + + + + point
    y + + +number + + + + point
    +
    @@ -203977,6 +203327,35 @@

    + + + + + +
    +
    Returns:
    + + + + + +number + + + + + +- the translated y coordinate. + + + + + +
    + + + +
    @@ -204021,14 +203400,14 @@

    -

    +

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

    @@ -204040,7 +203419,7 @@

    - exit the script after the current Loop(). + ignored
    @@ -204110,14 +203489,14 @@

    -

    +

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

    @@ -204129,7 +203508,7 @@

    - ignored + exit the script after the current Loop().
    @@ -204295,7 +203674,7 @@

    jsboot/p5.js, - line 231 + line 226

    @@ -204651,7 +204030,7 @@

    jsboot/p5.js, - line 226 + line 221

    @@ -206912,7 +206291,151 @@
    Returns:
    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);
}
    + 
    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));
    @@ -206925,12 +206448,12 @@
    Example

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

    @@ -206976,13 +206499,13 @@
    Parameters:
    - gray + colorstring -Number +String @@ -207000,7 +206523,7 @@
    Parameters:
    - specifies a value between white and black + color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex @@ -207033,7 +206556,7 @@
    Parameters:
    - + opacity of the background relative to current color range (default is 0-255) @@ -207103,12 +206626,12 @@
    Parameters:

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

    @@ -207154,69 +206677,7 @@
    Parameters:
    - 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 + gray @@ -207240,7 +206701,7 @@
    Parameters:
    - blue or brightness value (depending on the current color mode) + specifies a value between white and black @@ -207343,12 +206804,12 @@
    Parameters:

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

    @@ -207380,6 +206841,8 @@
    Parameters:
    Type + Attributes + @@ -207392,150 +206855,75 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + - -
    + + red or hue value (depending on the current color mode) + -
    - + + + v2 - -
    - -

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

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - - - + + + - + - - - + + - - + + @@ -207656,12 +207044,12 @@
    Parameters:

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

    @@ -207672,10 +207060,6 @@

    -
    - 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. -
    - @@ -207709,13 +207093,13 @@
    Parameters:

    - + + @@ -207785,11 +207169,6 @@
    Parameters:
    -
    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));
    - - @@ -207800,12 +207179,12 @@
    Example

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

    @@ -207851,13 +207230,13 @@
    Parameters:
    - + + @@ -207908,7 +207287,7 @@
    Parameters:
    - + @@ -207983,7 +207362,7 @@

    jsboot/p5shape.js, - line 380 + line 379

    @@ -209159,7 +208538,7 @@

    jsboot/p5shape.js, - line 134 + line 133

    @@ -209438,12 +208817,12 @@
    Example

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

    @@ -209454,8 +208833,62 @@

    -
    - 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:
    + +

    Name + - TypeAttributesDescription
    green or saturation value (depending on the current color mode)
    bitmapv3 -Bitmap +Number @@ -207553,7 +206941,7 @@
    Parameters:
    -     		image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)blue or brightness value (depending on the current color mode)
    colorvalues -Color +Array.<Number> @@ -207725,7 +207109,7 @@
    Parameters:
    -     		any value created by the color() functionan array containing the red,green,blue & and alpha components of the color
    colorstringbitmap -String +Bitmap @@ -207875,7 +207254,7 @@
    Parameters:
    -     		color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit heximage created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
    opacity of the background relative to current color range (default is 0-255)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    color + + +Color + + + +
    +
    @@ -209466,6 +208899,256 @@

    + + + + +
    +
    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:
    @@ -209493,7 +209176,38 @@
    Parameters:
    - gray + v1 + + + + + +Number + + + + + + + + + + + + + + + + + + red or hue value relative to the current color range + + + + + + + v2 @@ -209517,14 +209231,14 @@
    Parameters:
    - number specifying value between white and black. + green or saturation value relative to the current color range - alpha + v3 @@ -209539,8 +209253,6 @@
    Parameters:
    - <optional>
    - @@ -209550,168 +209262,40 @@
    Parameters:
    - alpha value relative to current color range (default is 0-255) + blue or brightness value relative to the current color range - - - -
    - - - - - - - - - - - - - -
    -
    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
    - - - -
    - + alpha - -
    - -

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

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - +Number - - - - - - - - - - - - - + - + + + - + @@ -209800,12 +209384,12 @@
    Returns:

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

    @@ -209849,13 +209433,13 @@
    Parameters:
    - + + @@ -209954,12 +209538,12 @@
    Returns:

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

    @@ -209970,6 +209554,10 @@

    +
    + 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. +
    + @@ -210005,69 +209593,7 @@
    Parameters:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + @@ -210124,7 +209650,7 @@
    Parameters:
    - + @@ -210158,6 +209684,8 @@
    Returns:
    +- resulting color + @@ -210203,6 +209731,11 @@
    Returns:
    +
    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
    + + @@ -210211,14 +209744,14 @@
    Returns:
    -

    +

    - inner color(color) → {Color} + inner colorMode(mode, maxopt)
    jsboot/p5color.js, - line 1472 + line 1841

    @@ -210229,6 +209762,10 @@

    +
    + 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. +
    + @@ -210250,6 +209787,8 @@
    Parameters:

    + + @@ -210262,61 +209801,83 @@
    Parameters:
    - + + - - + - - -
    NameTypeDescription
    values + + + <optional>
    -Array.<Number> - - -     		an array containing the red,green,blue & and alpha components of the color
    valuevalues -String +Array.<Number> @@ -209865,7 +209449,7 @@
    Parameters:
    -     		a color stringan array containing the red,green,blue & and alpha components of the color
    v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
    v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
    v3gray @@ -210091,7 +209617,7 @@
    Parameters:
    -     		blue or brightness value relative to the current color rangenumber specifying value between white and black.
    alpha value relative to current color range (default is 0-255)
    TypeAttributes
    colormode -Color +Constant + + + + +
    + either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness) + -
    - + + + max + - + + + +Number - - + + - + + + + <optional>
    + - -
    -
    Returns:
    - + + + + -Color + range for all values + + + + +
    + + + + + + - - @@ -210357,6 +209918,11 @@
    Returns:
    +
    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);
    + +
    @@ -210634,193 +210200,6 @@

    Parameters:
    -
    - -

    - - 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);
    - - - -
    - - - -

    @@ -212287,7 +211666,7 @@

    jsboot/p5.js, - line 390 + line 385

    @@ -212636,7 +212015,7 @@

    jsboot/p5shape.js, - line 78 + line 77

    @@ -212885,7 +212264,7 @@

    jsboot/p5shape.js, - line 624 + line 623

    @@ -213029,7 +212408,7 @@

    jsboot/p5shape.js, - line 483 + line 482

    @@ -213345,12 +212724,12 @@
    Example

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

    @@ -213361,10 +212740,6 @@

    -
    - 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. -
    - @@ -213400,69 +212775,7 @@
    Parameters:
    - 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 + gray @@ -213486,7 +212799,7 @@
    Parameters:
    - blue or brightness value relative to the current color range + a gray value @@ -213579,11 +212892,6 @@
    Parameters:
    -
    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);
    - -
    @@ -213594,12 +212902,12 @@

    Example

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

    @@ -213643,13 +212951,13 @@
    Parameters:
    - values + value -Array.<Number> +String @@ -213659,7 +212967,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + a color string @@ -213729,12 +213037,12 @@
    Parameters:

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

    @@ -213766,8 +213074,6 @@
    Parameters:
    Type - Attributes - @@ -213780,64 +213086,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + values -Number +Array.<Number> - - - <optional>
    - - - - - - - - + an array containing the red,green,blue & and alpha components of the color @@ -214042,12 +213307,12 @@
    Parameters:

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

    @@ -214058,6 +213323,10 @@

    +
    + 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. +
    + @@ -214079,6 +213348,8 @@
    Parameters:
    Type + Attributes + @@ -214091,23 +213362,126 @@
    Parameters:
    - value + v1 -String +Number + + + + + + - a color string + + + 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>
    + + + + + + + + + + + @@ -214167,6 +213541,11 @@
    Parameters:
    +
    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);
    + +
    @@ -215953,7 +215332,7 @@

    jsboot/p5shape.js, - line 710 + line 709

    @@ -216143,7 +215522,7 @@

    jsboot/p5shape.js, - line 760 + line 759

    @@ -217564,7 +216943,7 @@

    jsboot/p5shape.js, - line 153 + line 152

    @@ -217777,7 +217156,7 @@

    jsboot/p5.js, - line 548 + line 543

    @@ -218102,7 +217481,7 @@

    jsboot/p5shape.js, - line 682 + line 681

    @@ -218267,7 +217646,7 @@

    jsboot/p5.js, - line 491 + line 486

    @@ -218597,7 +217976,7 @@

    jsboot/p5.js, - line 240 + line 235

    @@ -221878,7 +221257,7 @@

    jsboot/p5.js, - line 413 + line 408

    @@ -222474,7 +221853,7 @@

    jsboot/p5.js, - line 276 + line 271

    @@ -223017,7 +222396,7 @@

    jsboot/p5shape.js, - line 190 + line 189

    @@ -223235,7 +222614,7 @@

    jsboot/p5.js, - line 636 + line 631

    @@ -223517,7 +222896,7 @@

    jsboot/p5env.js, - line 26 + line 45

    @@ -223529,7 +222908,7 @@

    - 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 (+). + 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 (+).
    @@ -223661,7 +223040,7 @@

    jsboot/p5env.js, - line 45 + line 26

    @@ -223673,7 +223052,7 @@

    - 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 (+). + 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 (+).
    @@ -223805,7 +223184,7 @@

    jsboot/p5.js, - line 585 + line 580

    @@ -223899,7 +223278,7 @@

    jsboot/p5shape.js, - line 212 + line 211

    @@ -224911,7 +224290,7 @@

    jsboot/p5shape.js, - line 241 + line 240

    @@ -225124,7 +224503,7 @@

    jsboot/p5shape.js, - line 569 + line 568

    @@ -225439,7 +224818,7 @@

    jsboot/p5.js, - line 330 + line 325

    @@ -226334,7 +225713,7 @@

    jsboot/p5.js, - line 441 + line 436

    @@ -226727,7 +226106,260 @@
    Parameters:
    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);
    + 
    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);
    @@ -226738,14 +226370,14 @@
    Example
    -

    +

    - inner scale(scales) + inner setAlpha(alpha)
    - jsboot/p5trans.js, - line 396 + jsboot/p5color.js, + line 595

    @@ -226789,16 +226421,13 @@
    Parameters:
    - scales + alpha -p5.Vector -| - -Array.<Number> +Number @@ -226808,7 +226437,7 @@
    Parameters:
    - per-axis percents to scale the object + the new alpha value @@ -226868,6 +226497,11 @@
    Parameters:
    +
    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);
}
    + + @@ -226876,14 +226510,14 @@
    Parameters:
    -

    +

    - inner second() → {Integer} + inner setBlue(blue)
    - jsboot/p5util.js, - line 1138 + jsboot/p5color.js, + line 575

    @@ -226894,8 +226528,62 @@

    -
    - The second() function returns the current second as a value from 0 - 59. + + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    blue + + +Number + + + + the new blue value
    +
    @@ -226913,35 +226601,146 @@

    + +
    + + + -
    -
    Returns:
    + + + + + + + + + + + + + + + + + + + + + + +
    + + + +

    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 +
    + +

    + + +
    +
    + -Integer + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + -- the current second + + + + + + + + + + + + + +
    NameTypeDescription
    green + + +Number + + the new green value
    +
    + + + + + + + + + + + +
    @@ -226980,7 +226779,7 @@
    Returns:
    Example
    - 
    var s = second();
text('Current second: \n' + s, 5, 50);
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -226991,14 +226790,14 @@
    Example
    -

    +

    - inner setAlpha(alpha) + inner setRed(red)
    jsboot/p5color.js, - line 595 + line 535

    @@ -227042,7 +226841,7 @@
    Parameters:
    - alpha + red @@ -227058,7 +226857,7 @@
    Parameters:
    - the new alpha value + the new red value @@ -227120,7 +226919,7 @@
    Parameters:
    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);
}
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -227131,14 +226930,14 @@
    Example
    -

    +

    - inner setBlue(blue) + inner shearX(angle)
    - jsboot/p5color.js, - line 575 + jsboot/p5trans.js, + line 245

    @@ -227149,6 +226948,10 @@

    +
    + 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. +
    + @@ -227182,7 +226985,7 @@
    Parameters:
    - blue + angle @@ -227198,7 +227001,7 @@
    Parameters:
    - the new blue value + angle of shear specified in radians or degrees, depending on current angleMode @@ -227260,7 +227063,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -227271,14 +227074,14 @@
    Example
    -

    +

    - inner setGreen(green) + inner shearY(angle)
    - jsboot/p5color.js, - line 555 + jsboot/p5trans.js, + line 279

    @@ -227289,6 +227092,10 @@

    +
    + 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. +
    + @@ -227322,7 +227129,7 @@
    Parameters:
    - green + angle @@ -227338,7 +227145,7 @@
    Parameters:
    - the new green value + angle of shear specified in radians or degrees, depending on current angleMode @@ -227400,7 +227207,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -227411,14 +227218,14 @@
    Example
    -

    +

    - inner setRed(red) + inner shorten(list) → {Array}
    - jsboot/p5color.js, - line 535 + jsboot/p5util.js, + line 167

    @@ -227429,6 +227236,10 @@

    +
    + Decreases an array by one element and returns the shortened array, maps to Array.pop(). +
    + @@ -227462,13 +227273,13 @@
    Parameters:
    - red + list -Number +Array @@ -227478,7 +227289,7 @@
    Parameters:
    - the new red value + Array to shorten @@ -227499,6 +227310,27 @@
    Parameters:
    +
    +
    Returns:
    + + + + + +Array + + + + + +- shortened Array + + + + + +
    + @@ -227540,7 +227372,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    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']
}
    @@ -227551,14 +227383,14 @@
    Example
    -

    +

    - inner shearX(angle) + inner shuffle(array, boolopt) → {Array}
    - jsboot/p5trans.js, - line 245 + jsboot/p5util.js, + line 188

    @@ -227570,7 +227402,7 @@

    - 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. + Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm.
    @@ -227594,6 +227426,8 @@

    Parameters:
    Type + Attributes + @@ -227606,67 +227440,71 @@
    Parameters:
    - angle + array -Number +Array + + - - - angle of shear specified in radians or degrees, depending on current angleMode - - - - - - - - - - - - - - + - + + + - + - + Array to shuffle + + + + bool + -
    + + + +Boolean - - - - + + - + + + + <optional>
    + - + - + + + - + - + modify passed array + + + + @@ -227678,118 +227516,32 @@
    Parameters:
    -
    - -
    Example
    +
    +
    Returns:
    - 
    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:
    - - - - - - - - - - - +Array - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    angle - - -Number +- shuffled Array - - angle of shear specified in radians or degrees, depending on current angleMode
    -
    - - - - - - - - - - - -
    @@ -227828,7 +227580,7 @@
    Parameters:
    Example
    - 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    + 
    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);
}
    @@ -227839,14 +227591,14 @@
    Example
    -

    +

    - inner shorten(list) → {Array} + inner sin(angle) → {Number}
    - jsboot/p5util.js, - line 167 + jsboot/p5math.js, + line 1339

    @@ -227858,7 +227610,7 @@

    - Decreases an array by one element and returns the shortened array, maps to Array.pop(). + Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.
    @@ -227894,13 +227646,13 @@

    Parameters:
    - list + angle -Array +Number @@ -227910,7 +227662,7 @@
    Parameters:
    - Array to shorten + the angle @@ -227938,13 +227690,13 @@
    Returns:
    -Array +Number -- shortened Array +- the sine of the angle @@ -227993,7 +227745,7 @@
    Returns:
    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']
}
    + 
    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;
}
    @@ -228004,14 +227756,14 @@
    Example
    -

    +

    - inner shuffle(array, boolopt) → {Array} + inner sort(list, countopt) → {Array}
    jsboot/p5util.js, - line 188 + line 228

    @@ -228023,7 +227775,7 @@

    - Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. + 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.
    @@ -228061,7 +227813,7 @@

    Parameters:
    - array + list @@ -228085,20 +227837,20 @@
    Parameters:
    - Array to shuffle + Array to sort - bool + count -Boolean +Integer @@ -228118,7 +227870,7 @@
    Parameters:
    - modify passed array + number of elements to sort, starting from 0 @@ -228152,7 +227904,7 @@
    Returns:
    -- shuffled Array +- the sorted list @@ -228201,7 +227953,7 @@
    Returns:
    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);
}
    + 
    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]
}
    @@ -228212,14 +227964,14 @@
    Example
    -

    +

    - inner sin(angle) → {Number} + inner splice(list, value, position) → {Array}
    - jsboot/p5math.js, - line 1339 + jsboot/p5util.js, + line 272

    @@ -228231,7 +227983,7 @@

    - Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. + 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.)
    @@ -228267,13 +228019,13 @@

    Parameters:
    - angle + list -Number +Array @@ -228283,189 +228035,37 @@
    Parameters:
    - the angle + Array to splice into - - - - - - - - - - - - - - - - - -
    -
    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:
    - - - - - - - - - - - - - - - - - - - - - - - + - - - + - + - - - + @@ -228525,7 +228115,7 @@
    Returns:
    -- the sorted list +- the list @@ -228574,7 +228164,7 @@
    Returns:
    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]
}
    + 
    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]
}
    @@ -228585,14 +228175,14 @@
    Example
    -

    +

    - inner splice(list, value, position) → {Array} + inner split(value, delim) → {Array.<String>}
    jsboot/p5util.js, - line 272 + line 965

    @@ -228604,7 +228194,7 @@

    - 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.) + 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.
    @@ -228638,29 +228228,6 @@

    Parameters:
    - - - - - - - - - - - - - - - - @@ -228669,7 +228236,7 @@
    Parameters:
    + - + + @@ -228730,13 +228297,13 @@
    Returns:
    -Array +Array.<String> -- the list +- Array of Strings @@ -228785,7 +228352,7 @@
    Returns:
    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]
}
    + 
    var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
    @@ -228796,14 +228363,14 @@
    Example
    -

    +

    - inner split(value, delim) → {Array.<String>} + inner splitTokens(value, delimopt) → {Array.<String>}
    jsboot/p5util.js, - line 965 + line 991

    @@ -228815,7 +228382,7 @@

    - 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. + 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.
    @@ -228839,6 +228406,8 @@

    Parameters:
    + + @@ -228864,6 +228433,14 @@
    Parameters:
    + + @@ -228887,10 +228464,20 @@
    Parameters:
    + - + + + @@ -228973,7 +228560,7 @@
    Returns:
    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);
    + 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    @@ -228984,14 +228571,14 @@
    Example
    -

    +

    - inner splitTokens(value, delimopt) → {Array.<String>} + inner sq(n) → {Number}
    - jsboot/p5util.js, - line 991 + jsboot/p5math.js, + line 631

    @@ -229003,7 +228590,7 @@

    - 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. + 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.
    @@ -229027,8 +228614,6 @@

    Parameters:
    - - @@ -229041,64 +228626,23 @@
    Parameters:
    - + - - - - - - - - - - - - - - - - - - - - - - + @@ -229126,13 +228670,13 @@
    Returns:
    -Array.<String> +Number -- Array of Strings +- squared number @@ -229181,7 +228725,7 @@
    Returns:
    Example
    - 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    + 
    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);
}
    @@ -229192,14 +228736,14 @@
    Example
    -

    +

    - inner sq(n) → {Number} + inner sqrt(n) → {Number}
    jsboot/p5math.js, - line 631 + line 672

    @@ -229211,7 +228755,7 @@

    - 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. + 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().
    @@ -229263,7 +228807,7 @@

    Parameters:
    -
    + @@ -229297,7 +228841,7 @@
    Returns:
    -- squared number +- square root of number @@ -229346,7 +228890,7 @@
    Returns:
    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);
}
    + 
    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);
}
    @@ -229357,14 +228901,14 @@
    Example
    -

    +

    - inner sqrt(n) → {Number} + inner square(x, y, s)
    - jsboot/p5math.js, - line 672 + jsboot/p5shape.js, + line 331

    @@ -229376,7 +228920,7 @@

    - 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(). + 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.
    @@ -229412,7 +228956,7 @@

    Parameters:
    - + + - -
    NameTypeAttributesDescription
    listvalue -Array +any - - - - - - Array to sortvalue to be spliced in
    countposition @@ -228478,20 +228078,10 @@
    Parameters:
    		 - - <optional>
    - - - - - -     		number of elements to sort, starting from 0in the array from which to insert data
    list - - -Array - - - - Array to splice into
    value -any +String @@ -228679,20 +228246,20 @@
    Parameters:
    -     		value to be spliced inthe String to be split
    positiondelim -Integer +String @@ -228702,7 +228269,7 @@
    Parameters:
    -     		in the array from which to insert datathe String used to separate the data
    TypeAttributes + + + + + + + + <optional>
    + + + + +     		the String used to separate the datalist of individual Strings that will be used as separators
    TypeAttributes
    valuen -String +Number - - - - - - the String to be split
    delim - - -String - - - - - - <optional>
    - - - - -     		list of individual Strings that will be used as separatorsnumber to square
    number to squarenon-negative number to square root
    nx @@ -229428,47 +228972,72 @@
    Parameters:
    -     		non-negative number to square rootx-coordinate of the square.
    -
    - + + + y + - + + + +Number - - + + - + - + + + y-coordinate of the square. + -
    -
    Returns:
    - + + + + s + + + + +Number + + -Number + + + side size of the square. + + + + +
    + -- square root of number + + + + + + - - @@ -229511,7 +229080,7 @@
    Returns:
    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);
}
    + 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    @@ -229522,14 +229091,14 @@
    Example
    -

    +

    - inner square(x, y, s) + inner str(n) → {String}
    - jsboot/p5shape.js, - line 332 + jsboot/p5util.js, + line 398

    @@ -229541,7 +229110,7 @@

    - 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. + 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.
    @@ -229577,13 +229146,22 @@

    Parameters:
    - x + n +String +| + +Boolean +| + Number +| + +Array @@ -229593,72 +229171,47 @@
    Parameters:
    - x-coordinate of the square. + value to parse + + - - - y - - - - - -Number - - - - + + - + - + - y-coordinate of the square. - + - - - s - + - - + +
    +
    Returns:
    + -Number - - - - - +String - side size of the square. - - - - -
    - - - +- string representation of value - - - + + @@ -229701,7 +229254,7 @@
    Parameters:
    Example
    - 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    + 
    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" ]
    @@ -229712,14 +229265,14 @@
    Example
    -

    +

    - inner str(n) → {String} + inner stroke(gray, alphaopt)
    - jsboot/p5util.js, - line 398 + jsboot/p5color.js, + line 2170

    @@ -229730,10 +229283,6 @@

    -
    - 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. -
    - @@ -229755,6 +229304,8 @@
    Parameters:
    Type + Attributes + @@ -229767,72 +229318,83 @@
    Parameters:
    - n + gray -String -| - -Boolean -| - Number -| - -Array + + - + - value to parse - + + + - - - + - - + a gray value + - + + + alpha + - + + + +Number - - + + - -
    -
    Returns:
    - + + + + <optional>
    + + + + -String + + + + + + +
    + + -- string representation of value + + + + - - @@ -229873,11 +229435,6 @@
    Returns:
    -
    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" ]
    - -
    @@ -230023,12 +229580,12 @@

    Parameters:

    - inner stroke(gray, alphaopt) + inner stroke(color)
    jsboot/p5color.js, - line 2170 + line 2182

    @@ -230060,8 +229617,6 @@
    Parameters:
    Type - Attributes - @@ -230074,64 +229629,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + color -Number +Color - - - <optional>
    - - - - - - - - + the stroke color @@ -230201,12 +229715,12 @@
    Parameters:

    - inner stroke(values) + inner stroke(v1, v2, v3, alphaopt)
    jsboot/p5color.js, - line 2176 + line 2084

    @@ -230217,6 +229731,10 @@

    +
    + 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. +
    + @@ -230238,6 +229756,8 @@
    Parameters:
    Type + Attributes + @@ -230250,158 +229770,126 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - + - + + + - + - + red or hue value relative to the current color range + - + + + v2 + - + + + +Number - - + + - + + + - + - + + + - -
    + + green or saturation value relative to the current color range + -
    - + + + v3 - -
    - -

    + - inner stroke(color) - -
    - jsboot/p5color.js, - line 2182 -
    - -

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - + + + - + - - - + + - - + + + - + @@ -230461,6 +229949,11 @@
    Parameters:
    +
    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);
    + + @@ -230471,12 +229964,12 @@
    Parameters:

    - inner stroke(v1, v2, v3, alphaopt) + inner stroke(values)
    jsboot/p5color.js, - line 2084 + line 2176

    @@ -230487,10 +229980,6 @@

    -
    - 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. -
    - @@ -230512,8 +230001,6 @@
    Parameters:

    - - @@ -230526,126 +230013,23 @@
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - + @@ -230705,11 +230089,6 @@
    Parameters:
    -
    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);
    - - @@ -230725,7 +230104,7 @@

    jsboot/p5shape.js, - line 811 + line 810

    @@ -232216,6 +231595,141 @@
    Example
    +
    + +

    + + inner translate(vector) + + +
    + jsboot/p5trans.js, + line 347 +
    + +

    + + + +
    +
    + + + + + + + + + + +
    +
    Parameters:
    + +
    Name + - TypeDescription
    blue or brightness value relative to the current color range
    coloralpha -Color +Number + + <optional>
    + + + + + +     		the stroke color
    TypeAttributes
    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
    alphavalues -Number +Array.<Number> - - <optional>
    - - - - -     		an array containing the red,green,blue & and alpha components of the color
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    vector + + +p5.Vector + + + + the vector to translate by
    + +
    + + + + + + + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + + +

    @@ -232434,141 +231948,6 @@

    Example
    -
    - -

    - - inner translate(vector) - - -
    - jsboot/p5trans.js, - line 347 -
    - -

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    vector - - -p5.Vector - - - - the vector to translate by
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
    - - - -

    @@ -232578,7 +231957,7 @@

    jsboot/p5shape.js, - line 357 + line 356

    @@ -233332,7 +232711,7 @@

    jsboot/p5shape.js, - line 461 + line 460

    @@ -235315,133 +234694,7 @@
    Properties:
    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);
}
    + 
    // Move the mouse across the canvas
function draw() {
  background(244, 248, 252);
  line(0, mouseY, 100, mouseY);
}
    @@ -235450,12 +234703,12 @@

    Example
    -

    - static, readonly pmouseY +

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

    @@ -235465,7 +234718,7 @@

    - 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. + 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.
    @@ -235502,7 +234755,7 @@
    Properties:
    - pmouseY + pmouseX @@ -235567,7 +234820,7 @@
    Properties:
    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);
}
    + 
    // 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);
}
    @@ -235576,12 +234829,12 @@

    Example
    -

    - static, readonly pwinMouseX +

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

    @@ -235591,7 +234844,7 @@

    - 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. + 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.
    @@ -235628,7 +234881,7 @@
    Properties:
    - pwinMouseX + pmouseY @@ -235693,7 +234946,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -235702,12 +234955,12 @@

    Example
    -

    - static, readonly pwinMouseY +

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

    @@ -235717,7 +234970,7 @@

    - 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. + 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.
    @@ -235754,7 +235007,7 @@
    Properties:
    - pwinMouseY + pwinMouseX @@ -235819,7 +235072,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -235828,12 +235081,12 @@

    Example
    -

    - static, readonly width +

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

    @@ -235843,7 +235096,7 @@

    - System variable that stores the width of the drawing canvas. + 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.
    @@ -235880,7 +235133,7 @@
    Properties:
    - width + pwinMouseY @@ -235943,18 +235196,23 @@
    Properties:
    +
    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 windowHeight +

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

    @@ -235964,7 +235222,7 @@

    - System variable that stores the height of the inner window. + System variable that stores the width of the drawing canvas.
    @@ -236001,7 +235259,7 @@
    Properties:
    - windowHeight + width @@ -236064,23 +235322,18 @@
    Properties:
    -
    Example
    - - 
    createCanvas(windowWidth, windowHeight);
    - -
    -

    - static, readonly windowWidth +

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

    @@ -236090,7 +235343,7 @@

    - System variable that stores the width of the inner window. + System variable that stores the height of the inner window.
    @@ -236127,7 +235380,7 @@
    Properties:
    - windowWidth + windowHeight @@ -236201,12 +235454,12 @@
    Example
    -

    - static, readonly winMouseX +

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

    @@ -236216,7 +235469,7 @@

    - The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. + System variable that stores the width of the inner window.
    @@ -236253,7 +235506,7 @@
    Properties:
    - winMouseX + windowWidth @@ -236318,7 +235571,7 @@
    Properties:
    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);
}
    + 
    createCanvas(windowWidth, windowHeight);
    @@ -236327,12 +235580,12 @@

    Example
    -

    - static, readonly winMouseY +

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

    @@ -236342,7 +235595,7 @@

    - The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. + The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window.
    @@ -236379,7 +235632,7 @@
    Properties:
    - winMouseY + winMouseX @@ -236444,7 +235697,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -236453,12 +235706,12 @@

    Example
    -

    - inner colorPatterns +

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

    @@ -236468,7 +235721,7 @@

    - Full color string patterns. The capture groups are necessary. + The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window.
    @@ -236479,142 +235732,56 @@

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - +

    Properties:
    -
    + + + + + - - -
    -

    - 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. -
    +
    +
    NameTypeDescription
    winMouseY + + +Number - - - + +
    - -
    @@ -236654,49 +235821,44 @@

    - - -

    +

    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);
}
    -

    Methods

    + -
    - + +
    +

    + inner colorPatterns -

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

    - - +
    + jsboot/p5color.js, + line 888 +
    +

    + +
    -
    - deep copy the current environment. + Full color string patterns. The capture groups are necessary.
    + - - +
    @@ -236712,8 +235874,7 @@

    - -
    + @@ -236728,55 +235889,64 @@

    +

    + +

    + + + +
    +

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

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

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

    - -
    -
    -
    - make sure we have a 2x2 identity matrix. -
    + @@ -236788,16 +235958,40 @@

    +

    + + + + + +
    +

    + 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. +
    + @@ -236838,21 +236032,28 @@

    +

    - + + + + +

    Methods

    + +
    -

    +

    - static _PolyLine() + static _cloneEnv()
    - jsboot/p5shape.js, - line 551 + jsboot/p5.js, + line 67

    @@ -236864,7 +236065,7 @@

    - draw polygon by using lines. + deep copy the current environment.
    @@ -236934,14 +236135,14 @@

    -

    +

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

    @@ -236953,7 +236154,7 @@

    - translate a point with the current matrix (if any). + make sure we have a 2x2 identity matrix.
    @@ -236964,78 +236165,44 @@

    -
    -
    Parameters:
    - - - - - - - - - - - - + - - - + - - - - - + - + - - +
    -
    - + - - - - + - + - + - + - - + - -
    NameTypeDescription
    x - - -number + + - - point
    y - - -number + + - - point
    -
    @@ -237045,30 +236212,59 @@

    Parameters:
    +

    + + + + + + +
    -
    -
    Returns:
    - +

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

    + + +
    +
    + +
    + draw polygon by using lines. +
    + -number + + + + + -- the translated x coordinate. + + + + - - @@ -237117,14 +236313,14 @@
    Returns:
    -

    +

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

    @@ -237245,7 +236441,7 @@
    Returns:
    -- the translated y coordinate. +- the translated x coordinate. @@ -237300,14 +236496,14 @@
    Returns:
    -

    +

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

    @@ -237319,7 +236515,7 @@

    - ignored + translate a point with the current matrix (if any).
    @@ -237330,13 +236526,78 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    x + + +number + + + + point
    y + + +number + + + + point
    +
    @@ -237345,6 +236606,35 @@

    + + + + + +
    +
    Returns:
    + + + + + +number + + + + + +- the translated y coordinate. + + + + + +
    + + + +
    @@ -237389,14 +236679,14 @@

    -

    +

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

    @@ -237408,7 +236698,7 @@

    - exit the script after the current Loop(). + ignored
    @@ -237478,14 +236768,14 @@

    -

    +

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

    @@ -237497,7 +236787,7 @@

    - ignored + exit the script after the current Loop().
    @@ -237663,7 +236953,7 @@

    jsboot/p5.js, - line 231 + line 226

    @@ -238019,7 +237309,7 @@

    jsboot/p5.js, - line 226 + line 221

    @@ -240280,7 +239570,151 @@
    Returns:
    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);
}
    + 
    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));
    @@ -240293,12 +239727,12 @@
    Example

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

    @@ -240344,13 +239778,13 @@
    Parameters:
    - gray + colorstring -Number +String @@ -240368,7 +239802,7 @@
    Parameters:
    - specifies a value between white and black + color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex @@ -240401,7 +239835,7 @@
    Parameters:
    - + opacity of the background relative to current color range (default is 0-255) @@ -240471,12 +239905,12 @@
    Parameters:

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

    @@ -240522,69 +239956,7 @@
    Parameters:
    - 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 + gray @@ -240608,7 +239980,7 @@
    Parameters:
    - blue or brightness value (depending on the current color mode) + specifies a value between white and black @@ -240711,12 +240083,12 @@
    Parameters:

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

    @@ -240748,6 +240120,8 @@
    Parameters:
    Type + Attributes + @@ -240760,150 +240134,75 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + - -
    + + red or hue value (depending on the current color mode) + -
    - + + + v2 - -
    - -

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

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - - - + + + - + - - - + + - - + + @@ -241024,12 +240323,12 @@
    Parameters:

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

    @@ -241040,10 +240339,6 @@

    -
    - 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. -
    - @@ -241077,13 +240372,13 @@
    Parameters:

    - + + @@ -241153,11 +240448,6 @@
    Parameters:
    -
    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));
    - - @@ -241168,12 +240458,12 @@
    Example

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

    @@ -241219,13 +240509,13 @@
    Parameters:
    - + + @@ -241276,7 +240566,7 @@
    Parameters:
    - + @@ -241351,7 +240641,7 @@

    jsboot/p5shape.js, - line 380 + line 379

    @@ -242527,7 +241817,7 @@

    jsboot/p5shape.js, - line 134 + line 133

    @@ -242806,12 +242096,12 @@
    Example

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

    @@ -242822,8 +242112,62 @@

    -
    - 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:
    + +

    Name + - TypeAttributesDescription
    green or saturation value (depending on the current color mode)
    bitmapv3 -Bitmap +Number @@ -240921,7 +240220,7 @@
    Parameters:
    -     		image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)blue or brightness value (depending on the current color mode)
    colorvalues -Color +Array.<Number> @@ -241093,7 +240388,7 @@
    Parameters:
    -     		any value created by the color() functionan array containing the red,green,blue & and alpha components of the color
    colorstringbitmap -String +Bitmap @@ -241243,7 +240533,7 @@
    Parameters:
    -     		color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit heximage created with loadImage() or createImage(), to set as background (must be same size as the sketch window)
    opacity of the background relative to current color range (default is 0-255)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    color + + +Color + + + +
    +
    @@ -242834,6 +242178,256 @@

    + + + + +
    +
    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:
    @@ -242861,7 +242455,38 @@
    Parameters:
    - gray + v1 + + + + + +Number + + + + + + + + + + + + + + + + + + red or hue value relative to the current color range + + + + + + + v2 @@ -242885,14 +242510,14 @@
    Parameters:
    - number specifying value between white and black. + green or saturation value relative to the current color range - alpha + v3 @@ -242907,8 +242532,6 @@
    Parameters:
    - <optional>
    - @@ -242918,168 +242541,40 @@
    Parameters:
    - alpha value relative to current color range (default is 0-255) + blue or brightness value relative to the current color range - - - -
    - - - - - - - - - - - - - -
    -
    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
    - - - -
    - + alpha - -
    - -

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

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - +Number - - - - - - - - - - - - - + - + + + - + @@ -243168,12 +242663,12 @@
    Returns:

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

    @@ -243217,13 +242712,13 @@
    Parameters:
    - + + @@ -243322,12 +242817,12 @@
    Returns:

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

    @@ -243338,6 +242833,10 @@

    +
    + 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. +
    + @@ -243373,69 +242872,7 @@
    Parameters:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + @@ -243492,7 +242929,7 @@
    Parameters:
    - + @@ -243526,6 +242963,8 @@
    Returns:
    +- resulting color + @@ -243571,6 +243010,11 @@
    Returns:
    +
    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
    + + @@ -243579,14 +243023,14 @@
    Returns:
    -

    +

    - inner color(color) → {Color} + inner colorMode(mode, maxopt)
    jsboot/p5color.js, - line 1472 + line 1841

    @@ -243597,6 +243041,10 @@

    +
    + 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. +
    + @@ -243618,6 +243066,8 @@
    Parameters:

    + + @@ -243630,61 +243080,83 @@
    Parameters:
    - + + - - + - - -
    NameTypeDescription
    values + + + <optional>
    -Array.<Number> - - -     		an array containing the red,green,blue & and alpha components of the color
    valuevalues -String +Array.<Number> @@ -243233,7 +242728,7 @@
    Parameters:
    -     		a color stringan array containing the red,green,blue & and alpha components of the color
    v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
    v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
    v3gray @@ -243459,7 +242896,7 @@
    Parameters:
    -     		blue or brightness value relative to the current color rangenumber specifying value between white and black.
    alpha value relative to current color range (default is 0-255)
    TypeAttributes
    colormode -Color +Constant + + + + +
    + either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness) + -
    - + + + max + - + + + +Number - - + + - + + + + <optional>
    + - -
    -
    Returns:
    - + + + + -Color + range for all values + + + + +
    + + + + + + - - @@ -243725,6 +243197,11 @@
    Returns:
    +
    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);
    + +
    @@ -244002,193 +243479,6 @@

    Parameters:
    -
    - -

    - - 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);
    - - - -
    - - - -

    @@ -245655,7 +244945,7 @@

    jsboot/p5.js, - line 390 + line 385

    @@ -246004,7 +245294,7 @@

    jsboot/p5shape.js, - line 78 + line 77

    @@ -246253,7 +245543,7 @@

    jsboot/p5shape.js, - line 624 + line 623

    @@ -246397,7 +245687,7 @@

    jsboot/p5shape.js, - line 483 + line 482

    @@ -246713,12 +246003,12 @@
    Example

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

    @@ -246729,10 +246019,6 @@

    -
    - 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. -
    - @@ -246768,69 +246054,7 @@
    Parameters:
    - 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 + gray @@ -246854,7 +246078,7 @@
    Parameters:
    - blue or brightness value relative to the current color range + a gray value @@ -246947,11 +246171,6 @@
    Parameters:
    -
    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);
    - -
    @@ -246962,12 +246181,12 @@

    Example

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

    @@ -247011,13 +246230,13 @@
    Parameters:
    - values + value -Array.<Number> +String @@ -247027,7 +246246,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + a color string @@ -247097,12 +246316,12 @@
    Parameters:

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

    @@ -247134,8 +246353,6 @@
    Parameters:
    Type - Attributes - @@ -247148,64 +246365,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + values -Number +Array.<Number> - - - <optional>
    - - - - - - - - + an array containing the red,green,blue & and alpha components of the color @@ -247410,12 +246586,12 @@
    Parameters:

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

    @@ -247426,6 +246602,10 @@

    +
    + 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. +
    + @@ -247447,6 +246627,8 @@
    Parameters:
    Type + Attributes + @@ -247459,23 +246641,126 @@
    Parameters:
    - value + v1 -String +Number + + + + + + - a color string + + + 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>
    + + + + + + + + + + + @@ -247535,6 +246820,11 @@
    Parameters:
    +
    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);
    + +
    @@ -249321,7 +248611,7 @@

    jsboot/p5shape.js, - line 710 + line 709

    @@ -249511,7 +248801,7 @@

    jsboot/p5shape.js, - line 760 + line 759

    @@ -250932,7 +250222,7 @@

    jsboot/p5shape.js, - line 153 + line 152

    @@ -251145,7 +250435,7 @@

    jsboot/p5.js, - line 548 + line 543

    @@ -251470,7 +250760,7 @@

    jsboot/p5shape.js, - line 682 + line 681

    @@ -251635,7 +250925,7 @@

    jsboot/p5.js, - line 491 + line 486

    @@ -251965,7 +251255,7 @@

    jsboot/p5.js, - line 240 + line 235

    @@ -255246,7 +254536,7 @@

    jsboot/p5.js, - line 413 + line 408

    @@ -255842,7 +255132,7 @@

    jsboot/p5.js, - line 276 + line 271

    @@ -256385,7 +255675,7 @@

    jsboot/p5shape.js, - line 190 + line 189

    @@ -256603,7 +255893,7 @@

    jsboot/p5.js, - line 636 + line 631

    @@ -256885,7 +256175,7 @@

    jsboot/p5env.js, - line 26 + line 45

    @@ -256897,7 +256187,7 @@

    - 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 (+). + 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 (+).
    @@ -257029,7 +256319,7 @@

    jsboot/p5env.js, - line 45 + line 26

    @@ -257041,7 +256331,7 @@

    - 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 (+). + 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 (+).
    @@ -257173,7 +256463,7 @@

    jsboot/p5.js, - line 585 + line 580

    @@ -257267,7 +256557,7 @@

    jsboot/p5shape.js, - line 212 + line 211

    @@ -258279,7 +257569,7 @@

    jsboot/p5shape.js, - line 241 + line 240

    @@ -258492,7 +257782,7 @@

    jsboot/p5shape.js, - line 569 + line 568

    @@ -258807,7 +258097,7 @@

    jsboot/p5.js, - line 330 + line 325

    @@ -259702,7 +258992,7 @@

    jsboot/p5.js, - line 441 + line 436

    @@ -260095,7 +259385,260 @@
    Parameters:
    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);
    + 
    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);
    @@ -260106,14 +259649,14 @@
    Example
    -

    +

    - inner scale(scales) + inner setAlpha(alpha)
    - jsboot/p5trans.js, - line 396 + jsboot/p5color.js, + line 595

    @@ -260157,16 +259700,13 @@
    Parameters:
    - scales + alpha -p5.Vector -| - -Array.<Number> +Number @@ -260176,7 +259716,7 @@
    Parameters:
    - per-axis percents to scale the object + the new alpha value @@ -260236,6 +259776,11 @@
    Parameters:
    +
    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);
}
    + + @@ -260244,14 +259789,14 @@
    Parameters:
    -

    +

    - inner second() → {Integer} + inner setBlue(blue)
    - jsboot/p5util.js, - line 1138 + jsboot/p5color.js, + line 575

    @@ -260262,8 +259807,62 @@

    -
    - The second() function returns the current second as a value from 0 - 59. + + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    blue + + +Number + + + + the new blue value
    +
    @@ -260281,35 +259880,146 @@

    + +
    + + + -
    -
    Returns:
    + + + + + + + + + + + + + + + + + + + + + + +
    + + + +

    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 +
    + +

    + + +
    +
    + -Integer + + + + + + + +
    +
    Parameters:
    + + + + + + + + + + + + + + + + -- the current second + + + + + + + + + + + + + +
    NameTypeDescription
    green + + +Number + + the new green value
    +
    + + + + + + + + + + + +
    @@ -260348,7 +260058,7 @@
    Returns:
    Example
    - 
    var s = second();
text('Current second: \n' + s, 5, 50);
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -260359,14 +260069,14 @@
    Example
    -

    +

    - inner setAlpha(alpha) + inner setRed(red)
    jsboot/p5color.js, - line 595 + line 535

    @@ -260410,7 +260120,7 @@
    Parameters:
    - alpha + red @@ -260426,7 +260136,7 @@
    Parameters:
    - the new alpha value + the new red value @@ -260488,7 +260198,7 @@
    Parameters:
    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);
}
    + 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    @@ -260499,14 +260209,14 @@
    Example
    -

    +

    - inner setBlue(blue) + inner shearX(angle)
    - jsboot/p5color.js, - line 575 + jsboot/p5trans.js, + line 245

    @@ -260517,6 +260227,10 @@

    +
    + 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. +
    + @@ -260550,7 +260264,7 @@
    Parameters:
    - blue + angle @@ -260566,7 +260280,7 @@
    Parameters:
    - the new blue value + angle of shear specified in radians or degrees, depending on current angleMode @@ -260628,7 +260342,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearX(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -260639,14 +260353,14 @@
    Example
    -

    +

    - inner setGreen(green) + inner shearY(angle)
    - jsboot/p5color.js, - line 555 + jsboot/p5trans.js, + line 279

    @@ -260657,6 +260371,10 @@

    +
    + 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. +
    + @@ -260690,7 +260408,7 @@
    Parameters:
    - green + angle @@ -260706,7 +260424,7 @@
    Parameters:
    - the new green value + angle of shear specified in radians or degrees, depending on current angleMode @@ -260768,7 +260486,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    @@ -260779,14 +260497,14 @@
    Example
    -

    +

    - inner setRed(red) + inner shorten(list) → {Array}
    - jsboot/p5color.js, - line 535 + jsboot/p5util.js, + line 167

    @@ -260797,6 +260515,10 @@

    +
    + Decreases an array by one element and returns the shortened array, maps to Array.pop(). +
    + @@ -260830,13 +260552,13 @@
    Parameters:
    - red + list -Number +Array @@ -260846,7 +260568,7 @@
    Parameters:
    - the new red value + Array to shorten @@ -260867,6 +260589,27 @@
    Parameters:
    +
    +
    Returns:
    + + + + + +Array + + + + + +- shortened Array + + + + + +
    + @@ -260908,7 +260651,7 @@
    Parameters:
    Example
    - 
    let backgroundColor;

function setup() {
  backgroundColor = color(100, 50, 150);
}

function draw() {
  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  background(backgroundColor);
}
    + 
    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']
}
    @@ -260919,14 +260662,14 @@
    Example
    -

    +

    - inner shearX(angle) + inner shuffle(array, boolopt) → {Array}
    - jsboot/p5trans.js, - line 245 + jsboot/p5util.js, + line 188

    @@ -260938,7 +260681,7 @@

    - 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. + Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm.
    @@ -260962,6 +260705,8 @@

    Parameters:
    Type + Attributes + @@ -260974,67 +260719,71 @@
    Parameters:
    - angle + array -Number +Array + + - - - angle of shear specified in radians or degrees, depending on current angleMode - - - - - - - - - - - - - - + - + + + - + - + Array to shuffle + + + + bool + -
    + + + +Boolean - - - - + + - + + + + <optional>
    + - + - + + + - + - + modify passed array + + + + @@ -261046,118 +260795,32 @@
    Parameters:
    -
    - -
    Example
    +
    +
    Returns:
    - 
    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:
    - - - - - - - - - - - +Array - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    angle - - -Number +- shuffled Array - - angle of shear specified in radians or degrees, depending on current angleMode
    -
    - - - - - - - - - - - -
    @@ -261196,7 +260859,7 @@
    Parameters:
    Example
    - 
    translate(width / 4, height / 4);
shearY(PI / 4.0);
rect(0, 0, 30, 30);
    + 
    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);
}
    @@ -261207,14 +260870,14 @@
    Example
    -

    +

    - inner shorten(list) → {Array} + inner sin(angle) → {Number}
    - jsboot/p5util.js, - line 167 + jsboot/p5math.js, + line 1339

    @@ -261226,7 +260889,7 @@

    - Decreases an array by one element and returns the shortened array, maps to Array.pop(). + Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.
    @@ -261262,13 +260925,13 @@

    Parameters:
    - list + angle -Array +Number @@ -261278,7 +260941,7 @@
    Parameters:
    - Array to shorten + the angle @@ -261306,13 +260969,13 @@
    Returns:
    -Array +Number -- shortened Array +- the sine of the angle @@ -261361,7 +261024,7 @@
    Returns:
    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']
}
    + 
    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;
}
    @@ -261372,14 +261035,14 @@
    Example
    -

    +

    - inner shuffle(array, boolopt) → {Array} + inner sort(list, countopt) → {Array}
    jsboot/p5util.js, - line 188 + line 228

    @@ -261391,7 +261054,7 @@

    - Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. + 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.
    @@ -261429,7 +261092,7 @@

    Parameters:
    - array + list @@ -261453,20 +261116,20 @@
    Parameters:
    - Array to shuffle + Array to sort - bool + count -Boolean +Integer @@ -261486,7 +261149,7 @@
    Parameters:
    - modify passed array + number of elements to sort, starting from 0 @@ -261520,7 +261183,7 @@
    Returns:
    -- shuffled Array +- the sorted list @@ -261569,7 +261232,7 @@
    Returns:
    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);
}
    + 
    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]
}
    @@ -261580,14 +261243,14 @@
    Example
    -

    +

    - inner sin(angle) → {Number} + inner splice(list, value, position) → {Array}
    - jsboot/p5math.js, - line 1339 + jsboot/p5util.js, + line 272

    @@ -261599,7 +261262,7 @@

    - Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. + 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.)
    @@ -261635,13 +261298,13 @@

    Parameters:
    - angle + list -Number +Array @@ -261651,189 +261314,37 @@
    Parameters:
    - the angle + Array to splice into - - - - - - - - - - - - - - - - - -
    -
    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:
    - - - - - - - - - - - - - - - - - - - - - - - + - - - + - + - - - + @@ -261893,7 +261394,7 @@
    Returns:
    -- the sorted list +- the list @@ -261942,7 +261443,7 @@
    Returns:
    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]
}
    + 
    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]
}
    @@ -261953,14 +261454,14 @@
    Example
    -

    +

    - inner splice(list, value, position) → {Array} + inner split(value, delim) → {Array.<String>}
    jsboot/p5util.js, - line 272 + line 965

    @@ -261972,7 +261473,7 @@

    - 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.) + 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.
    @@ -262006,29 +261507,6 @@

    Parameters:
    - - - - - - - - - - - - - - - - @@ -262037,7 +261515,7 @@
    Parameters:
    + - + + @@ -262098,13 +261576,13 @@
    Returns:
    -Array +Array.<String> -- the list +- Array of Strings @@ -262153,7 +261631,7 @@
    Returns:
    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]
}
    + 
    var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);
    @@ -262164,14 +261642,14 @@
    Example
    -

    +

    - inner split(value, delim) → {Array.<String>} + inner splitTokens(value, delimopt) → {Array.<String>}
    jsboot/p5util.js, - line 965 + line 991

    @@ -262183,7 +261661,7 @@

    - 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. + 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.
    @@ -262207,6 +261685,8 @@

    Parameters:
    + + @@ -262232,6 +261712,14 @@
    Parameters:
    + + @@ -262255,10 +261743,20 @@
    Parameters:
    + - + + + @@ -262341,7 +261839,7 @@
    Returns:
    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);
    + 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    @@ -262352,14 +261850,14 @@
    Example
    -

    +

    - inner splitTokens(value, delimopt) → {Array.<String>} + inner sq(n) → {Number}
    - jsboot/p5util.js, - line 991 + jsboot/p5math.js, + line 631

    @@ -262371,7 +261869,7 @@

    - 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. + 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.
    @@ -262395,8 +261893,6 @@

    Parameters:
    - - @@ -262409,64 +261905,23 @@
    Parameters:
    - + - - - - - - - - - - - - - - - - - - - - - - + @@ -262494,13 +261949,13 @@
    Returns:
    -Array.<String> +Number -- Array of Strings +- squared number @@ -262549,7 +262004,7 @@
    Returns:
    Example
    - 
    function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}
    + 
    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);
}
    @@ -262560,14 +262015,14 @@
    Example
    -

    +

    - inner sq(n) → {Number} + inner sqrt(n) → {Number}
    jsboot/p5math.js, - line 631 + line 672

    @@ -262579,7 +262034,7 @@

    - 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. + 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().
    @@ -262631,7 +262086,7 @@

    Parameters:
    -
    + @@ -262665,7 +262120,7 @@
    Returns:
    -- squared number +- square root of number @@ -262714,7 +262169,7 @@
    Returns:
    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);
}
    + 
    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);
}
    @@ -262725,14 +262180,14 @@
    Example
    -

    +

    - inner sqrt(n) → {Number} + inner square(x, y, s)
    - jsboot/p5math.js, - line 672 + jsboot/p5shape.js, + line 331

    @@ -262744,7 +262199,7 @@

    - 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(). + 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.
    @@ -262780,7 +262235,7 @@

    Parameters:
    - + + - -
    NameTypeAttributesDescription
    listvalue -Array +any - - - - - - Array to sortvalue to be spliced in
    countposition @@ -261846,20 +261357,10 @@
    Parameters:
    		 - - <optional>
    - - - - - -     		number of elements to sort, starting from 0in the array from which to insert data
    list - - -Array - - - - Array to splice into
    value -any +String @@ -262047,20 +261525,20 @@
    Parameters:
    -     		value to be spliced inthe String to be split
    positiondelim -Integer +String @@ -262070,7 +261548,7 @@
    Parameters:
    -     		in the array from which to insert datathe String used to separate the data
    TypeAttributes + + + + + + + + <optional>
    + + + + +     		the String used to separate the datalist of individual Strings that will be used as separators
    TypeAttributes
    valuen -String +Number - - - - - - the String to be split
    delim - - -String - - - - - - <optional>
    - - - - -     		list of individual Strings that will be used as separatorsnumber to square
    number to squarenon-negative number to square root
    nx @@ -262796,47 +262251,72 @@
    Parameters:
    -     		non-negative number to square rootx-coordinate of the square.
    -
    - + + + y + - + + + +Number - - + + - + - + + + y-coordinate of the square. + -
    -
    Returns:
    - + + + + s + + + + +Number + + -Number + + + side size of the square. + + + + +
    + -- square root of number + + + + + + - - @@ -262879,7 +262359,7 @@
    Returns:
    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);
}
    + 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    @@ -262890,14 +262370,14 @@
    Example
    -

    +

    - inner square(x, y, s) + inner str(n) → {String}
    - jsboot/p5shape.js, - line 332 + jsboot/p5util.js, + line 398

    @@ -262909,7 +262389,7 @@

    - 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. + 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.
    @@ -262945,13 +262425,22 @@

    Parameters:
    - x + n +String +| + +Boolean +| + Number +| + +Array @@ -262961,72 +262450,47 @@
    Parameters:
    - x-coordinate of the square. + value to parse + + - - - y - - - - - -Number - - - - + + - + - + - y-coordinate of the square. - + - - - s - + - - + +
    +
    Returns:
    + -Number - - - - - +String - side size of the square. - - - - -
    - - - +- string representation of value - - - + + @@ -263069,7 +262533,7 @@
    Parameters:
    Example
    - 
    // Draw a square at location (30, 20) with a side size of 55.
square(30, 20, 55);
    + 
    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" ]
    @@ -263080,14 +262544,14 @@
    Example
    -

    +

    - inner str(n) → {String} + inner stroke(gray, alphaopt)
    - jsboot/p5util.js, - line 398 + jsboot/p5color.js, + line 2170

    @@ -263098,10 +262562,6 @@

    -
    - 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. -
    - @@ -263123,6 +262583,8 @@
    Parameters:
    Type + Attributes + @@ -263135,72 +262597,83 @@
    Parameters:
    - n + gray -String -| - -Boolean -| - Number -| - -Array + + - + - value to parse - + + + - - - + - - + a gray value + - + + + alpha + - + + + +Number - - + + - -
    -
    Returns:
    - + + + + <optional>
    + + + + -String + + + + + + +
    + + -- string representation of value + + + + - - @@ -263241,11 +262714,6 @@
    Returns:
    -
    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" ]
    - -
    @@ -263391,12 +262859,12 @@

    Parameters:

    - inner stroke(gray, alphaopt) + inner stroke(color)
    jsboot/p5color.js, - line 2170 + line 2182

    @@ -263428,8 +262896,6 @@
    Parameters:
    Type - Attributes - @@ -263442,64 +262908,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - a gray value - - - - - - - alpha + color -Number +Color - - - <optional>
    - - - - - - - - + the stroke color @@ -263569,12 +262994,12 @@
    Parameters:

    - inner stroke(values) + inner stroke(v1, v2, v3, alphaopt)
    jsboot/p5color.js, - line 2176 + line 2084

    @@ -263585,6 +263010,10 @@

    +
    + 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. +
    + @@ -263606,6 +263035,8 @@
    Parameters:
    Type + Attributes + @@ -263618,158 +263049,126 @@
    Parameters:
    - values + v1 -Array.<Number> +Number + + - - - an array containing the red,green,blue & and alpha components of the color - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - + - + + + - + - + red or hue value relative to the current color range + - + + + v2 + - + + + +Number - - + + - + + + - + - + + + - -
    + + green or saturation value relative to the current color range + -
    - + + + v3 - -
    - -

    + - inner stroke(color) - -
    - jsboot/p5color.js, - line 2182 -
    - -

    - - - -
    -
    - - - - +Number - - + + - -
    -
    Parameters:
    - - - - - - - + + + - + + + - + - - - + + - - + + + - + @@ -263829,6 +263228,11 @@
    Parameters:
    +
    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);
    + + @@ -263839,12 +263243,12 @@
    Parameters:

    - inner stroke(v1, v2, v3, alphaopt) + inner stroke(values)
    jsboot/p5color.js, - line 2084 + line 2176

    @@ -263855,10 +263259,6 @@

    -
    - 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. -
    - @@ -263880,8 +263280,6 @@
    Parameters:

    - - @@ -263894,126 +263292,23 @@
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - + @@ -264073,11 +263368,6 @@
    Parameters:
    -
    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);
    - - @@ -264093,7 +263383,7 @@

    jsboot/p5shape.js, - line 811 + line 810

    @@ -265584,6 +264874,141 @@
    Example
    +
    + +

    + + inner translate(vector) + + +
    + jsboot/p5trans.js, + line 347 +
    + +

    + + + +
    +
    + + + + + + + + + + +
    +
    Parameters:
    + +
    Name + - TypeDescription
    blue or brightness value relative to the current color range
    coloralpha -Color +Number + + <optional>
    + + + + + +     		the stroke color
    TypeAttributes
    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
    alphavalues -Number +Array.<Number> - - <optional>
    - - - - -     		an array containing the red,green,blue & and alpha components of the color
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    vector + + +p5.Vector + + + + the vector to translate by
    + +
    + + + + + + + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + + +

    @@ -265802,141 +265227,6 @@

    Example
    -
    - -

    - - inner translate(vector) - - -
    - jsboot/p5trans.js, - line 347 -
    - -

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    vector - - -p5.Vector - - - - the vector to translate by
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
    - - - -

    @@ -265946,7 +265236,7 @@

    jsboot/p5shape.js, - line 357 + line 356

    @@ -266700,7 +265990,7 @@

    jsboot/p5shape.js, - line 461 + line 460

    @@ -267002,8 +266292,6 @@

    p5compat

    -
    This module provides compatibility with p5js. Use Include('p5'); on the first line of your script to activate.
    - @@ -269187,144 +268475,23 @@
    Properties:
    -
    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 - - - -
    - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - +
    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 windowHeight +

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

    @@ -269334,7 +268501,7 @@

    - System variable that stores the height of the inner window. + System variable that stores the width of the drawing canvas.
    @@ -269371,7 +268538,7 @@
    Properties:
    - windowHeight + width @@ -269434,23 +268601,18 @@
    Properties:
    -
    Example
    - - 
    createCanvas(windowWidth, windowHeight);
    - -
    -

    - static, readonly windowWidth +

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

    @@ -269460,7 +268622,7 @@

    - System variable that stores the width of the inner window. + System variable that stores the height of the inner window.
    @@ -269497,7 +268659,7 @@
    Properties:
    - windowWidth + windowHeight @@ -269571,12 +268733,12 @@
    Example
    -

    - static, readonly winMouseX +

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

    @@ -269586,7 +268748,7 @@

    - The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. + System variable that stores the width of the inner window.
    @@ -269623,7 +268785,7 @@
    Properties:
    - winMouseX + windowWidth @@ -269688,7 +268850,7 @@
    Properties:
    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);
}
    + 
    createCanvas(windowWidth, windowHeight);
    @@ -269697,12 +268859,12 @@

    Example
    -

    - static, readonly winMouseY +

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

    @@ -269712,7 +268874,7 @@

    - The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. + The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window.
    @@ -269749,7 +268911,7 @@
    Properties:
    - winMouseY + winMouseX @@ -269814,7 +268976,7 @@
    Properties:
    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);
}
    + 
    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);
}
    @@ -269823,12 +268985,12 @@

    Example
    -

    - inner colorPatterns +

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

    @@ -269838,7 +269000,7 @@

    - Full color string patterns. The capture groups are necessary. + The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window.
    @@ -269849,73 +269011,56 @@

    -
    - - - - - - - - - - - - - - +
    Properties:
    - + + + + + + - + - + - + - + + + + - - + + + + + - -
    -

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

    + +
    + - -
    - -
    - CSS named colors. -
    +
    +
    NameTypeDescription
    winMouseY + + +Number - - - + +
    - -
    @@ -269955,18 +269100,23 @@

    +

    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 WHITESPACE +

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

    @@ -269976,7 +269126,7 @@

    - 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. + Full color string patterns. The capture groups are necessary.
    @@ -270026,59 +269176,32 @@

    -

    - - - -

    Methods

    - -
    - + +
    +

    + inner namedColors -

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

    - - +
    + jsboot/p5color.js, + line 722 +
    +

    + +
    -
    - deep copy the current environment. + CSS named colors.
    + @@ -270119,55 +269242,35 @@

    +

    + -
    +

    + inner WHITESPACE -

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

    - - +
    + jsboot/p5color.js, + line 880 +
    +

    + +
    -
    - make sure we have a 2x2 identity matrix. + 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.
    + @@ -270208,21 +269311,28 @@

    +

    - + + + + +

    Methods

    + +
    -

    +

    - static _PolyLine() + static _cloneEnv()
    - jsboot/p5shape.js, - line 551 + jsboot/p5.js, + line 67

    @@ -270234,7 +269344,7 @@

    - draw polygon by using lines. + deep copy the current environment.
    @@ -270304,14 +269414,14 @@

    -

    +

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

    @@ -270323,7 +269433,7 @@

    - translate a point with the current matrix (if any). + make sure we have a 2x2 identity matrix.
    @@ -270334,78 +269444,44 @@

    -
    -
    Parameters:
    - - - - - - - - - - - - + - - - + - - - - - + - + - - +
    -
    - + - - - - + - + - + - + - - + - -
    NameTypeDescription
    x - - -number + + - - point
    y - - -number + + - - point
    -
    @@ -270415,30 +269491,59 @@

    Parameters:
    +

    + + + + + + +
    -
    -
    Returns:
    - +

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

    + + +
    +
    + +
    + draw polygon by using lines. +
    + -number + + + + + -- the translated x coordinate. + + + + - - @@ -270487,14 +269592,14 @@
    Returns:
    -

    +

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

    @@ -270615,7 +269720,7 @@
    Returns:
    -- the translated y coordinate. +- the translated x coordinate. @@ -270670,14 +269775,14 @@
    Returns:
    -

    +

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

    @@ -270689,7 +269794,7 @@

    - ignored + translate a point with the current matrix (if any).
    @@ -270700,6 +269805,81 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    x + + +number + + + + point
    y + + +number + + + + point
    + +
    + + + @@ -270710,7 +269890,26 @@

    +
    +
    Returns:
    + + + + +number + + + + + +- the translated y coordinate. + + + + + +
    @@ -270759,14 +269958,14 @@

    -

    +

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

    @@ -270778,7 +269977,7 @@

    - exit the script after the current Loop(). + ignored
    @@ -270848,14 +270047,14 @@

    -

    +

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

    @@ -270867,7 +270066,7 @@

    - ignored + exit the script after the current Loop().
    @@ -271033,7 +270232,7 @@

    jsboot/p5.js, - line 231 + line 226

    @@ -271389,7 +270588,7 @@

    jsboot/p5.js, - line 226 + line 221

    @@ -273663,12 +272862,12 @@
    Example

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

    @@ -273679,6 +272878,10 @@

    +
    + 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. +
    + @@ -273700,8 +272903,6 @@
    Parameters:
    Type - Attributes - @@ -273714,64 +272915,23 @@
    Parameters:
    - gray - - - - - -Number - - - - - - - - - - - - - - - - - - specifies a value between white and black - - - - - - - a + color -Number +Color - - - <optional>
    - - - - - - - - + any value created by the color() function @@ -273827,248 +272987,13 @@
    Parameters:
    - - - - - -
    - - - - -
    - -

    - - 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>
    - - - - - -
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - +
    - - - +
    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));
    @@ -274081,12 +273006,12 @@
    Parameters:

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

    @@ -274118,6 +273043,8 @@
    Parameters:
    Type + Attributes + @@ -274130,23 +273057,64 @@
    Parameters:
    - values + colorstring -Array.<Number> +String + + + + + + - an array containing the red,green,blue & and alpha components of the color + + + 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) @@ -274216,12 +273184,12 @@
    Parameters:

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

    @@ -274267,13 +273235,13 @@
    Parameters:
    - bitmap + gray -Bitmap +Number @@ -274291,7 +273259,7 @@
    Parameters:
    - image created with loadImage() or createImage(), to set as background (must be same size as the sketch window) + specifies a value between white and black @@ -274394,12 +273362,12 @@
    Parameters:

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

    @@ -274410,10 +273378,6 @@

    -
    - 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. -
    - @@ -274435,6 +273399,8 @@
    Parameters:
    Type + Attributes + @@ -274447,23 +273413,126 @@
    Parameters:
    - color + v1 -Color +Number + + + + + + + + - any value created by the color() function + 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>
    + + + + + + + + + + + @@ -274523,11 +273592,6 @@
    Parameters:
    -
    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));
    - -
    @@ -274538,12 +273602,12 @@

    Example

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

    @@ -274575,8 +273639,6 @@
    Parameters:
    Type - Attributes - @@ -274589,64 +273651,23 @@
    Parameters:
    - colorstring - - - - - -String - - - - - - - - - - - - - - - - - - color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex - - - - - - - a + values -Number +Array.<Number> - - - <optional>
    - - - - - - - - opacity of the background relative to current color range (default is 0-255) + an array containing the red,green,blue & and alpha components of the color @@ -274714,14 +273735,14 @@
    Parameters:
    -

    +

    - inner beginShape(kindopt) + inner background(bitmap, aopt)
    - jsboot/p5shape.js, - line 380 + jsboot/p5color.js, + line 1792

    @@ -274732,10 +273753,6 @@

    -
    - 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(). -
    - @@ -274771,13 +273788,13 @@
    Parameters:
    - kind + bitmap -Constant +Bitmap @@ -274786,8 +273803,6 @@
    Parameters:
    - <optional>
    - @@ -274797,157 +273812,40 @@
    Parameters:
    - either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP + image created with loadImage() or createImage(), to set as background (must be same size as the sketch window) - - - - - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    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:
    - - - - - - - - - - - - - - - - - - - - - + + - + + + @@ -274968,27 +273866,6 @@
    Parameters:
    -
    -
    Returns:
    - - - - - -Number - - - - - -- the blue value - - - - - -
    - @@ -275028,11 +273905,6 @@
    Returns:
    -
    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
    - - @@ -275041,14 +273913,14 @@
    Example
    -

    +

    - inner boolean(n) → {Boolean} + inner beginShape(kindopt)
    - jsboot/p5util.js, - line 422 + jsboot/p5shape.js, + line 379

    @@ -275060,7 +273932,7 @@

    - 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. + 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().
    @@ -275084,6 +273956,8 @@

    Parameters:
    + + @@ -275096,32 +273970,33 @@
    Parameters:
    - + + - + + + @@ -275142,27 +274017,6 @@
    Parameters:
    -
    -
    Returns:
    - - - - - -Boolean - - - - - -- boolean representation of value - - - - - -
    - @@ -275204,7 +274058,7 @@
    Returns:
    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]
    + 
    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);
    @@ -275215,14 +274069,14 @@
    Example
    -

    +

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

    @@ -275234,7 +274088,7 @@

    - Extracts the HSB brightness value from a color or pixel array. + Extracts the blue value from a color or pixel array.
    @@ -275326,7 +274180,7 @@

    Returns:
    -- the brightness value +- the blue value @@ -275375,7 +274229,7 @@
    Returns:
    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);
    + 
    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
    @@ -275386,14 +274240,14 @@
    Example
    -

    +

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

    @@ -275405,7 +274259,7 @@

    - 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. + 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.
    @@ -275454,6 +274308,9 @@

    Parameters:
    | Number +| + +Array @@ -275491,13 +274348,13 @@
    Returns:
    -Number +Boolean -- byte representation of value +- boolean representation of value @@ -275546,7 +274403,7 @@
    Returns:
    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]
    + 
    print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]
    @@ -275557,14 +274414,14 @@
    Example
    -

    +

    - inner ceil(n) → {Integer} + inner brightness(color) → {Number}
    - jsboot/p5math.js, - line 77 + jsboot/p5color.js, + line 1312

    @@ -275576,7 +274433,7 @@

    - 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. + Extracts the HSB brightness value from a color or pixel array.
    @@ -275612,13 +274469,19 @@

    Parameters:
    - + + @@ -275656,13 +274519,13 @@
    Returns:
    -Integer +Number -- rounded up number +- the brightness value @@ -275711,7 +274574,7 @@
    Returns:
    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);
}
    + 
    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);
    @@ -275722,14 +274585,14 @@
    Example
    -

    +

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

    @@ -275741,7 +274604,7 @@

    - 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. + 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.
    @@ -275786,6 +274649,9 @@

    Parameters:
    String | +Boolean +| + Number @@ -275824,13 +274690,13 @@
    Returns:
    -String +Number -- string representation of value +- byte representation of value @@ -275879,7 +274745,7 @@
    Returns:
    Example
    - 
    print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
    + 
    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]
    @@ -275890,14 +274756,14 @@
    Example
    -

    +

    - inner circle(x, y, d) + inner ceil(n) → {Integer}
    - jsboot/p5shape.js, - line 134 + jsboot/p5math.js, + line 77

    @@ -275909,7 +274775,7 @@

    - 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. + 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.
    @@ -275945,7 +274811,7 @@

    Parameters:
    - + + + +
    NameTypeDescription
    colora -Color -| - -Array.<Number> -| - -String +Number + + <optional>
    + + + + +     		Color object, color components, or CSS color
    TypeAttributes
    nkind -String -| - -Boolean -| - -Number -| - -Array +Constant + + <optional>
    + + + + +     		value to parseeither POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, or QUAD_STRIP
    ncolor -Number +Color +| + +Array.<Number> +| + +String @@ -275628,7 +274491,7 @@
    Parameters:
    -     		number to round upColor object, color components, or CSS color
    xn @@ -275961,72 +274827,47 @@
    Parameters:
    -     		x-coordinate of the centre of the circle.number to round up
    - - - y - - - - - -Number - - - - +
    + - + - + - y-coordinate of the centre of the circle. - + - - - d - + - - + +
    +
    Returns:
    + -Number - - - - - +Integer - diameter of the circle. - - - - -
    - - - +- rounded up number - - - + + @@ -276069,7 +274910,7 @@
    Parameters:
    Example
    - 
    // Draw a circle at location (30, 30) with a diameter of 20.
circle(30, 30, 20);
    + 
    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);
}
    @@ -276080,14 +274921,14 @@
    Example
    -

    +

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

    @@ -276099,7 +274940,7 @@

    - 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. + 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.
    @@ -276110,6 +274951,61 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    n + + +String +| + +Number + + + + value to parse
    + +
    + + + @@ -276120,7 +275016,26 @@

    +
    +
    Returns:
    + + + + + +String + + + + +- string representation of value + + + + + +
    @@ -276163,7 +275078,7 @@

    Example
    - 
    // Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

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

function mousePressed() {
  clear();
}
    + 
    print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"
    @@ -276174,14 +275089,14 @@
    Example
    -

    +

    - inner color(gray, alphaopt) → {Color} + inner circle(x, y, d)
    - jsboot/p5color.js, - line 1333 + jsboot/p5shape.js, + line 133

    @@ -276193,7 +275108,7 @@

    - 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. + 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.
    @@ -276217,8 +275132,6 @@

    Parameters:
    Type - Attributes - @@ -276231,7 +275144,7 @@
    Parameters:
    - gray + x @@ -276244,25 +275157,17 @@
    Parameters:
    - - - - - - - - - number specifying value between white and black. + x-coordinate of the centre of the circle. - alpha + y @@ -276275,20 +275180,33 @@
    Parameters:
    - - - <optional>
    - - + + + y-coordinate of the centre of the circle. + + + + + + d + + + + - +Number + + + + + - alpha value relative to current color range (default is 0-255) + diameter of the circle. @@ -276309,30 +275227,103 @@
    Parameters:
    -
    -
    Returns:
    - - + -Color +
    + + + + + + -- resulting color + + + + + + + + + + + + + + + + + +
    + +
    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.
    + + + + + + + + + + + + + + + + + + + +
    @@ -276371,7 +275362,7 @@
    Returns:
    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
    + 
    // Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

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

function mousePressed() {
  clear();
}
    @@ -276384,12 +275375,12 @@
    Example

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

    @@ -276433,13 +275424,13 @@
    Parameters:
    - values + color -Array.<Number> +Color @@ -276449,7 +275440,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + @@ -276951,12 +275942,12 @@
    Returns:

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

    @@ -277000,13 +275991,13 @@
    Parameters:
    - color + values -Color +Array.<Number> @@ -277016,7 +276007,7 @@
    Parameters:
    - + an array containing the red,green,blue & and alpha components of the color @@ -277103,14 +276094,14 @@
    Returns:
    -

    +

    - inner colorMode(mode, max1, max2, max3, maxAopt) + inner color(gray, alphaopt) → {Color}
    jsboot/p5color.js, - line 1894 + line 1333

    @@ -277121,6 +276112,10 @@

    +
    + 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. +
    + @@ -277156,13 +276151,13 @@
    Parameters:
    - mode + gray -Constant +Number @@ -277180,14 +276175,14 @@
    Parameters:
    - + number specifying value between white and black. - max1 + alpha @@ -277202,6 +276197,8 @@
    Parameters:
    + <optional>
    + @@ -277211,51 +276208,164 @@
    Parameters:
    - range for the red or hue depending on the current color mode + alpha value relative to current color range (default is 0-255) + + - - - max2 - + + - - + + + + + + + + + + + +
    +
    Returns:
    + -Number - - + +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 +
    +

    - range for the green or saturation depending on the current color mode - + + +
    +
    + + +
    + 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:
    + + + + + + + + + + + + + + + + + + + + + + - + + - + + @@ -277366,6 +276476,11 @@
    Parameters:
    +
    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);
    + + @@ -277376,12 +276491,12 @@
    Parameters:

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

    @@ -277392,10 +276507,6 @@

    -
    - 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. -
    - @@ -277455,14 +276566,107 @@
    Parameters:
    -

    + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -277548,11 +276752,6 @@
    Parameters:
    -
    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);
    - - @@ -279025,7 +278224,7 @@

    jsboot/p5.js, - line 390 + line 385

    @@ -279374,7 +278573,7 @@

    jsboot/p5shape.js, - line 78 + line 77

    @@ -279623,7 +278822,7 @@

    jsboot/p5shape.js, - line 624 + line 623

    @@ -279767,7 +278966,7 @@

    jsboot/p5shape.js, - line 483 + line 482

    @@ -280083,12 +279282,12 @@
    Example

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

    @@ -280099,10 +279298,6 @@

    -
    - 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. -
    - @@ -280138,69 +279333,7 @@
    Parameters:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + @@ -280317,11 +279450,6 @@
    Parameters:
    -
    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);
    - - @@ -280332,12 +279460,12 @@
    Example

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

    @@ -280381,13 +279509,13 @@
    Parameters:
    - + + @@ -280467,12 +279595,12 @@
    Parameters:

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

    @@ -280504,8 +279632,6 @@
    Parameters:
    - - @@ -280518,64 +279644,23 @@
    Parameters:
    - - - - - - - - - - - - - - - - - - - + - - - - + @@ -280780,12 +279865,12 @@
    Parameters:

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

    @@ -280796,6 +279881,10 @@

    +
    + 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. +
    + @@ -280817,6 +279906,8 @@
    Parameters:

    + + @@ -280829,23 +279920,126 @@
    Parameters:
    - + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -280905,6 +280099,11 @@
    Parameters:
    +
    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);
    + + @@ -282691,7 +281890,7 @@

    jsboot/p5shape.js, - line 710 + line 709

    @@ -282881,7 +282080,7 @@

    jsboot/p5shape.js, - line 760 + line 759

    @@ -284302,7 +283501,7 @@

    jsboot/p5shape.js, - line 153 + line 152

    @@ -284515,7 +283714,7 @@

    jsboot/p5.js, - line 548 + line 543

    @@ -284840,7 +284039,7 @@

    jsboot/p5shape.js, - line 682 + line 681

    @@ -285005,7 +284204,7 @@

    jsboot/p5.js, - line 491 + line 486

    @@ -285335,7 +284534,7 @@

    jsboot/p5.js, - line 240 + line 235

    @@ -288616,7 +287815,7 @@

    jsboot/p5.js, - line 413 + line 408

    @@ -289212,7 +288411,7 @@

    jsboot/p5.js, - line 276 + line 271

    @@ -289755,7 +288954,7 @@

    jsboot/p5shape.js, - line 190 + line 189

    @@ -289973,7 +289172,7 @@

    jsboot/p5.js, - line 636 + line 631

    @@ -290255,7 +289454,7 @@

    jsboot/p5env.js, - line 26 + line 45

    @@ -290267,7 +289466,7 @@

    - 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 (+). + 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 (+).
    @@ -290399,7 +289598,7 @@

    jsboot/p5env.js, - line 45 + line 26

    @@ -290411,7 +289610,7 @@

    - 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 (+). + 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 (+).
    @@ -290543,7 +289742,7 @@

    jsboot/p5.js, - line 585 + line 580

    @@ -290637,7 +289836,7 @@

    jsboot/p5shape.js, - line 212 + line 211

    @@ -291649,7 +290848,7 @@

    jsboot/p5shape.js, - line 241 + line 240

    @@ -291862,7 +291061,7 @@

    jsboot/p5shape.js, - line 569 + line 568

    @@ -292177,7 +291376,7 @@

    jsboot/p5.js, - line 330 + line 325

    @@ -293072,7 +292271,7 @@

    jsboot/p5.js, - line 441 + line 436

    @@ -296267,7 +295466,7 @@

    jsboot/p5shape.js, - line 332 + line 331

    @@ -296622,141 +295821,6 @@
    Example
    -
    - -

    - - inner stroke(value) - - -
    - jsboot/p5color.js, - line 2165 -
    - -

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - -
    NameTypeAttributesDescription
    max3mode -Number +Constant @@ -277273,14 +276383,14 @@
    Parameters:
    -     		range for the blue or brightness/lightness depending on the current color modeeither RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
    maxAmax @@ -277306,7 +276416,7 @@
    Parameters:
    -     		range for the alpharange for all values
    either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)
    maxmax1 + + +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 @@ -277488,7 +276692,7 @@
    Parameters:
    -     		range for all valuesrange for the alpha
    v1 - - -Number - - - - - - - - - - red or hue value relative to the current color range
    v2 - - -Number - - - - - - - - - - green or saturation value relative to the current color range
    v3gray @@ -280224,7 +279357,7 @@
    Parameters:
    -     		blue or brightness value relative to the current color rangea gray value
    valuesvalue -Array.<Number> +String @@ -280397,7 +279525,7 @@
    Parameters:
    -     		an array containing the red,green,blue & and alpha components of the colora color string
    TypeAttributes
    gray - - -Number - - - - - - - - - - a gray value
    alphavalues -Number +Array.<Number> - - <optional>
    - - - - -     		an array containing the red,green,blue & and alpha components of the color
    TypeAttributes
    valuev1 -String +Number + + + + + a color stringred 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>
    + + + + + +
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    value - - -String - - - - a color string
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
    - - - -

    @@ -296939,12 +296003,12 @@

    Parameters:

    - inner stroke(values) + inner stroke(value)
    jsboot/p5color.js, - line 2176 + line 2165

    @@ -296988,13 +296052,13 @@
    Parameters:
    - values + value -Array.<Number> +String @@ -297004,7 +296068,7 @@
    Parameters:
    - an array containing the red,green,blue & and alpha components of the color + a color string @@ -297454,6 +296518,141 @@
    Example
    +
    + +

    + + 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
    + +
    + + + + + + + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + + +

    @@ -297463,7 +296662,7 @@

    jsboot/p5shape.js, - line 811 + line 810

    @@ -298495,11 +297694,119 @@
    Returns:
    -
    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);
}
    - - +
    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 + + + + + + + + + +
    + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    @@ -298508,14 +297815,14 @@

    Example
    -

    +

    - inner textSize() → {Number} + inner textWidth(theText) → {Number}
    jsboot/p5typo.js, - line 230 + line 203

    @@ -298527,7 +297834,7 @@

    - Gets the current font size. + Calculates and returns the width of any character or text string.
    @@ -298538,6 +297845,56 @@

    +
    +
    Parameters:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    theText + + +String + + + + the String of characters to measure
    + +
    + @@ -298608,6 +297965,11 @@

    Returns:
    +
    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);
    + + @@ -298616,14 +297978,14 @@
    Returns:
    -

    +

    - inner textWidth(theText) → {Number} + inner toString(formatopt) → {String}
    - jsboot/p5typo.js, - line 203 + jsboot/p5color.js, + line 341

    @@ -298635,7 +297997,7 @@

    - Calculates and returns the width of any character or text string. + This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries.
    @@ -298659,6 +298021,8 @@

    Parameters:
    Type + Attributes + @@ -298671,7 +298035,7 @@
    Parameters:
    - theText + format @@ -298684,10 +298048,20 @@
    Parameters:
    + + + <optional>
    + + + + + - the String of characters to measure + + + 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. @@ -298715,12 +298089,14 @@
    Returns:
    -Number +String +- the formatted string + @@ -298768,7 +298144,7 @@
    Returns:
    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);
    + 
    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);
}
    @@ -298779,14 +298155,14 @@
    Example
    -

    +

    - inner toString(formatopt) → {String} + inner translate(vector)
    - jsboot/p5color.js, - line 341 + jsboot/p5trans.js, + line 347

    @@ -298797,10 +298173,6 @@

    -
    - This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -
    - @@ -298822,8 +298194,6 @@
    Parameters:
    Type - Attributes - @@ -298836,33 +298206,23 @@
    Parameters:
    - format + vector -String +p5.Vector - - - <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. + the vector to translate by @@ -298883,27 +298243,6 @@
    Parameters:
    -
    -
    Returns:
    - - - - - -String - - - - - -- the formatted string - - - - - -
    - @@ -298943,11 +298282,6 @@
    Returns:
    -
    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);
}
    - -
    @@ -299172,141 +298506,6 @@

    Example
    -
    - -

    - - inner translate(vector) - - -
    - jsboot/p5trans.js, - line 347 -
    - -

    - - - -
    -
    - - - - - - - - - - -
    -
    Parameters:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    vector - - -p5.Vector - - - - the vector to translate by
    - -
    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
    - - - -

    @@ -299316,7 +298515,7 @@

    jsboot/p5shape.js, - line 357 + line 356

    @@ -300070,7 +299269,7 @@

    jsboot/p5shape.js, - line 461 + line 460

    diff --git a/doc/html/p5compat.PVector.html b/doc/html/p5compat.PVector.html index 939a68c0..84587aa6 100644 --- a/doc/html/p5compat.PVector.html +++ b/doc/html/p5compat.PVector.html @@ -32,7 +32,7 @@

    Class: PVector

      - +
      diff --git a/doc/html/p5compat.module_NumberDict-NumberDict.html b/doc/html/p5compat.module_NumberDict-NumberDict.html index dbf2a333..f80ab6f2 100644 --- a/doc/html/p5compat.module_NumberDict-NumberDict.html +++ b/doc/html/p5compat.module_NumberDict-NumberDict.html @@ -32,7 +32,7 @@

      Class: NumberDict

        - +
        diff --git a/doc/html/p5compat.module_NumberDict.html b/doc/html/p5compat.module_NumberDict.html index 2018f790..9b1cea38 100644 --- a/doc/html/p5compat.module_NumberDict.html +++ b/doc/html/p5compat.module_NumberDict.html @@ -32,7 +32,7 @@

        Module: NumberDict

          - +
          diff --git a/doc/html/p5compat.module_PVector.html b/doc/html/p5compat.module_PVector.html index dcdf1a94..3f13b98c 100644 --- a/doc/html/p5compat.module_PVector.html +++ b/doc/html/p5compat.module_PVector.html @@ -32,7 +32,7 @@

          Module: PVector

            - +
            diff --git a/doc/html/p5compat.module_StringDict-StringDict.html b/doc/html/p5compat.module_StringDict-StringDict.html index af4769ed..7c79d83d 100644 --- a/doc/html/p5compat.module_StringDict-StringDict.html +++ b/doc/html/p5compat.module_StringDict-StringDict.html @@ -32,7 +32,7 @@

            Class: StringDict

              - +
              diff --git a/doc/html/p5compat.module_StringDict.html b/doc/html/p5compat.module_StringDict.html index c2639805..c9bd03a1 100644 --- a/doc/html/p5compat.module_StringDict.html +++ b/doc/html/p5compat.module_StringDict.html @@ -32,7 +32,7 @@

              Module: StringDict

                - +
                diff --git a/doc/html/p5compat.module_TypedDict-TypedDict.html b/doc/html/p5compat.module_TypedDict-TypedDict.html index 7d1b67c3..85030e0d 100644 --- a/doc/html/p5compat.module_TypedDict-TypedDict.html +++ b/doc/html/p5compat.module_TypedDict-TypedDict.html @@ -32,7 +32,7 @@

                Class: TypedDict

                  - +
                  diff --git a/doc/html/p5compat.module_TypedDict.html b/doc/html/p5compat.module_TypedDict.html index 0b46849a..d8708d01 100644 --- a/doc/html/p5compat.module_TypedDict.html +++ b/doc/html/p5compat.module_TypedDict.html @@ -32,7 +32,7 @@

                  Module: TypedDict

                    - +
                    diff --git a/examples/ant2.js b/examples/ant2.js new file mode 100644 index 00000000..9f02c0cd --- /dev/null +++ b/examples/ant2.js @@ -0,0 +1,119 @@ +/* +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('p5'); + +UP = 1; +DOWN = 2; +LEFT = 3; +RIGHT = 4; + +var antX, antY; +var dir; + +var field; + +function setup() { + dir = DOWN; + antX = width / 2; + antY = height / 2; + + // create playfield + field = new Array(height); + for (var y = 0; y < height; y++) { + var line = new Array(width); + for (var x = 0; x < width; x++) { + line[x] = 0; + } + field[y] = line; + } + + background(0); + colorMode(HSB); +} + +function draw() { + var cell = field[antY][antX]; + if (cell >= 0) { + switch (dir) { + case LEFT: + dir = DOWN; + break; + case RIGHT: + dir = UP; + break; + case UP: + dir = LEFT; + break; + case DOWN: + dir = RIGHT; + break; + } + cell += 4; + stroke(cell, 255, 255); + cell *= -1; + } else { + switch (dir) { + case LEFT: + dir = UP; + break; + case RIGHT: + dir = DOWN; + break; + case UP: + dir = RIGHT; + break; + case DOWN: + dir = LEFT; + break; + } + cell *= -1; + cell += 4; + stroke(0, 0, 0); + } + field[antY][antX] = cell; + point(antX, antY); + + // move ant + switch (dir) { + case LEFT: + if (antX > 0) { + antX--; + } + break; + case RIGHT: + if (antX < width) { + antX++; + } + break; + case UP: + if (antY > 0) { + antY--; + } + break; + case DOWN: + if (antY < height) { + antY++; + } + break; + } +} diff --git a/examples/arcer.js b/examples/arcer.js index e0079dca..6ca95d24 100644 --- a/examples/arcer.js +++ b/examples/arcer.js @@ -25,23 +25,23 @@ Include('p5'); ** This function is called once when the script is started. */ function setup() { - centerX = width / 2; - centerY = height / 2; - colorMode(HSB); - frameRate(10); + centerX = width / 2; + centerY = height / 2; + colorMode(HSB); + frameRate(10); } /* ** This function is repeatedly until ESC is pressed or Stop() is called. */ function draw() { - var r = random(0, min(width, height) / 2); - var start = random(0, 255); - var end = random(0, 255); - var c = random(0, 255); - var cCol = color(c, 255, 255); - var lCol = color(c, 128, 255); + var r = random(0, min(width, height) / 2); + var start = random(0, 3600); + var end = random(0, 3600); + var c = random(0, 255); + var cCol = color(c, 255, 255); + var lCol = color(c, 128, 255); - var ai = CircleArc(centerX, centerY, r, start, end, cCol); - Line(centerX, centerY, ai.startX, ai.startY, lCol); + var ai = CircleArc(centerX, centerY, r, start, end, cCol.toAllegro()); + Line(centerX, centerY, ai.startX, ai.startY, lCol.toAllegro()); } diff --git a/examples/arcer2.js b/examples/arcer2.js index 70759b7f..5ecb622b 100644 --- a/examples/arcer2.js +++ b/examples/arcer2.js @@ -43,9 +43,9 @@ function draw() { var cCol = color(c, 255, 255); var lCol = color(c, 128, 255); - var ai = CircleArc(centerX, centerY, r, start, start + size, cCol); + var ai = CircleArc(centerX, centerY, r, start, start + size, cCol.toAllegro()); if (lastAI) { - Line(lastAI.endX, lastAI.endY, ai.startX, ai.startY, lCol); + Line(lastAI.endX, lastAI.endY, ai.startX, ai.startY, lCol.toAllegro()); } start += size; diff --git a/examples/arcer3.js b/examples/arcer3.js index 154df918..a923fb03 100644 --- a/examples/arcer3.js +++ b/examples/arcer3.js @@ -39,7 +39,7 @@ function setup() { arcs.push({ start: random(0, 3600), length: random(0, 3600), - col: color(random(0, 255), 255, 255), + col: color(random(0, 255), 255, 255).toAllegro(), r: i }); } diff --git a/examples/eyes.js b/examples/eyes.js new file mode 100644 index 00000000..1067f56d --- /dev/null +++ b/examples/eyes.js @@ -0,0 +1,45 @@ +/* +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('p5'); + +function setup() { + createCanvas(windowWidth, windowHeight); + background(10); + frameRate(2); + colorMode(HSB, height, height, height); + noStroke(); + r = height; +} + +function draw() { + if (r > 0) { + fill(r, height - r, height - r / 2); + circle(width / 2, height / 2, r); + r -= random(height / 10); + } +} + +function mousePressed() { + background(0); + r = height; +} diff --git a/examples/eyes2.js b/examples/eyes2.js new file mode 100644 index 00000000..059667cc --- /dev/null +++ b/examples/eyes2.js @@ -0,0 +1,47 @@ +/* +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('p5'); + +function setup() { + createCanvas(windowWidth, windowHeight); + background(10); + frameRate(200); + colorMode(HSB, height, height, height, 100); + noStroke(); + r = height; +} + +function draw() { + if (r > 0) { + fill(r, height - r, height - r / 2, 2); + circle(width / 2, height / 2, r); + r -= random(height / 10); + } else { + r = height; + } +} + +function mousePressed() { + background(0); + r = height; +} diff --git a/examples/fntcnt.js b/examples/fntcnt.js new file mode 100644 index 00000000..04950165 --- /dev/null +++ b/examples/fntcnt.js @@ -0,0 +1,69 @@ +/* +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. +*/ + +fontList = []; +startIdx = 0; +endIdx = -1; + +FONT_DIR = 'jsboot/fonts'; + +function Setup() { + fileNames = List(FONT_DIR); + fileNames.forEach(function (e) { + if (e != ".." && e != ".") { + var name = FONT_DIR + "/" + e; + Println("Loading " + name); + try { + fontList.push(new Font(name)); + } catch (e) { + Println(e); + } + } + }); +} + +function Loop() { + ClearScreen(EGA.GREEN); + var yPos = 0; + for (var i = startIdx; i < fontList.length; i++) { + if (yPos + fontList[i].height > SizeY()) { + break; + } + var name = fontList[i].filename.split("/")[2]; + var str = name + " / This is a test of the emergency broadcast system where the quick brown fox jumps over the fence!"; + fontList[i].DrawStringLeft(10, yPos, str, EGA.WHITE, NO_COLOR); + yPos += 4 + fontList[i].height; + endIdx = i; + } +} + +function Input(e) { + // next page if available, else exit + if ((e.key & 0xFF) == CharCode(" ")) { + Println("SPACE!"); + if (endIdx == fontList.length - 1) { + Stop(); + } else { + startIdx = endIdx; + } + } +} diff --git a/examples/mand2.js b/examples/mand2.js new file mode 100644 index 00000000..54c7ffdc --- /dev/null +++ b/examples/mand2.js @@ -0,0 +1,114 @@ +/** +The original source was taken from the Duktape JS engine: +https://duktape.org/ + +It was modified to run with DOjS by Andre Seidelt . + +=============== +Duktape license +=============== + +(http://opensource.org/licenses/MIT) + +Copyright (c) 2013-2018 by Duktape authors (see AUTHORS.rst) + +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('p5'); + +inc = 20; + +function setup() { + restart(); + + frameRate(300); + rectMode(CENTER); + noStroke(); + colorMode(HSB, 100, 1, 1); +} + +function restart() { + w = width; + h = height; + i = 0; + j = 0; + + x0 = y0 = 0; +} + +function draw() { + var iter = 100; + var k, c; + var xx, yy, xx2, yy2; + + for (k = 0, xx = 0, yy = 0, c = inc; k < iter; k++) { + /* z -> z^2 + c + * -> (xx+i*yy)^2 + (x0+i*y0) + * -> xx*xx+i*2*xx*yy-yy*yy + x0 + i*y0 + * -> (xx*xx - yy*yy + x0) + i*(2*xx*yy + y0) + */ + + xx2 = xx * xx; yy2 = yy * yy; + + if (xx2 + yy2 < 4.0) { + yy = 2 * xx * yy + y0; + xx = xx2 - yy2 + x0; + } else { + /* xx^2 + yy^2 >= 4.0 */ + if (k < 3) { + c = map(1, 0, 4, inc, 1); + } + else if (k < 5) { + c = map(2, 0, 4, inc, 1); + } + else if (k < 10) { + c = map(3, 0, 4, inc, 1); + } + else { + c = map(4, 0, 4, inc, 1); + } + break; + } + } + + fill(0, 0, 0); + rect(j, i, inc, inc); + + if (k != iter) { + fill(k, 1, 1); + rect(j, i, c, c); + } + + j += inc; + x0 = (j / w) * 3.0 - 2.0; + if (j >= w) { + j = 0; + i += inc; + y0 = (i / h) * 2.5 - 1.25; + } + if (i >= h) { + inc--; + if (inc <= 0) { + noLoop(); + } else { + restart(); + } + } +} diff --git a/examples/mand3.js b/examples/mand3.js new file mode 100644 index 00000000..22bf76f7 --- /dev/null +++ b/examples/mand3.js @@ -0,0 +1,111 @@ +/** +The original source was taken from the Duktape JS engine: +https://duktape.org/ + +It was modified to run with DOjS by Andre Seidelt . + +=============== +Duktape license +=============== + +(http://opensource.org/licenses/MIT) + +Copyright (c) 2013-2018 by Duktape authors (see AUTHORS.rst) + +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('p5'); + +inc = 20; + +function setup() { + restart(); + + frameRate(300); + ellipseMode(CENTER); + noStroke(); + colorMode(HSB, 100, 1, 1, 100); +} + +function restart() { + w = width; + h = height; + i = 0; + j = 0; + + x0 = y0 = 0; +} + +function draw() { + var iter = 100; + var k, c; + var xx, yy, xx2, yy2; + + for (k = 0, xx = 0, yy = 0, c = inc; k < iter; k++) { + /* z -> z^2 + c + * -> (xx+i*yy)^2 + (x0+i*y0) + * -> xx*xx+i*2*xx*yy-yy*yy + x0 + i*y0 + * -> (xx*xx - yy*yy + x0) + i*(2*xx*yy + y0) + */ + + xx2 = xx * xx; yy2 = yy * yy; + + if (xx2 + yy2 < 4.0) { + yy = 2 * xx * yy + y0; + xx = xx2 - yy2 + x0; + } else { + /* xx^2 + yy^2 >= 4.0 */ + if (k < 3) { + c = map(1, 0, 4, inc, 1); + } + else if (k < 5) { + c = map(2, 0, 4, inc, 1); + } + else if (k < 10) { + c = map(3, 0, 4, inc, 1); + } + else { + c = map(4, 0, 4, inc, 1); + } + break; + } + } + + if (k != iter) { + fill(k, 1, 1, 20); + circle(j, i, c); + } + + j += inc; + x0 = (j / w) * 3.0 - 2.0; + if (j >= w) { + j = 0; + i += inc; + y0 = (i / h) * 2.5 - 1.25; + } + if (i >= h) { + inc--; + if (inc <= 0) { + noLoop(); + } else { + restart(); + } + } +} diff --git a/examples/p5head.js b/examples/p5head.js new file mode 100644 index 00000000..b76f8686 --- /dev/null +++ b/examples/p5head.js @@ -0,0 +1,110 @@ +/* + PROCESSINGJS.COM HEADER ANIMATION + MIT License - F1lT3R/Hyper-Metrix + Native Processing Compatible + */ + +Include('p5'); + +// Set number of circles +var count = 20; +// Set maximum and minimum circle size +var maxSize = 100; +var minSize = 20; +// Build float array to store circle properties +var e = []; +// Set size of dot in circle center +var ds = 2; +// Set drag switch to false +var dragging = false; +// integers showing which circle (the first index in e) that's locked, and its position in relation to the mouse +var lockedCircle; +var lockedOffsetX; +var lockedOffsetY; +// If user presses mouse... + +// Set up canvas +function setup() { + // Stroke/line/border thickness + strokeWeight(1); + // Initiate array with random values for circles + for (var j = 0; j < count; j++) { + e.push([0, 0, 0, 0, 0]); + e[j][0] = random(width); // X + e[j][1] = random(height); // Y + e[j][2] = random(minSize, maxSize); // Radius + e[j][3] = random(-.12, .12); // X Speed + e[j][4] = random(-.12, .12); // Y Speed + } +} + +// Begin main draw loop (called 25 times per second) +function draw() { + // Fill background black + background(0); + // Begin looping through circle array + for (var j = 0; j < count; j++) { + // Disable shape stroke/border + noStroke(); + // Cache diameter and radius of current circle + var radi = e[j][2]; + var diam = radi / 2; + if (sq(e[j][0] - mouseX) + sq(e[j][1] - mouseY) < sq(e[j][2] / 2)) + fill(64, 187, 128, 100); // green if mouseover + else + fill(64, 128, 187, 100); // regular + if ((lockedCircle == j && dragging)) { + // Move the particle's coordinates to the mouse's position, minus its original offset + e[j][0] = mouseX - lockedOffsetX; + e[j][1] = mouseY - lockedOffsetY; + } + // Draw circle + ellipse(e[j][0], e[j][1], radi, radi); + // Move circle + e[j][0] += e[j][3]; + e[j][1] += e[j][4]; + + + /* Wrap edges of canvas so circles leave the top + and re-enter the bottom, etc... */ + if (e[j][0] < -diam) { + e[j][0] = width + diam; + } + if (e[j][0] > width + diam) { + e[j][0] = -diam; + } + if (e[j][1] < 0 - diam) { + e[j][1] = height + diam; + } + if (e[j][1] > height + diam) { + e[j][1] = -diam; + } + + // If current circle is selected... + if ((lockedCircle == j && dragging)) { + // Set fill color of center dot to white.. + fill(255, 255, 255, 255); + // ..and set stroke color of line to green. + stroke(128, 255, 0, 100); + } + else { + // otherwise set center dot color to black.. + fill(0, 0, 0, 255); + // and set line color to turquoise. + stroke(64, 128, 128, 255); + } + + // Loop through all circles + for (var k = 0; k < count; k++) { + // If the circles are close... + if (sq(e[j][0] - e[k][0]) + sq(e[j][1] - e[k][1]) < sq(diam)) { + // Stroke a line from current circle to adjacent circle + line(e[j][0], e[j][1], e[k][0], e[k][1]); + } + } + // Turn off stroke/border + noStroke(); + // Draw dot in center of circle + rect(e[j][0] - ds, e[j][1] - ds, ds * 2, ds * 2); + } +} diff --git a/examples/unigen.js b/examples/unigen.js new file mode 100644 index 00000000..19344230 --- /dev/null +++ b/examples/unigen.js @@ -0,0 +1,79 @@ +/** + * This work is licensed under Attribution-ShareAlike 3.0 Unported. + * https://creativecommons.org/licenses/by-sa/3.0/ + * + * Original by reona + * https://twitter.com/reona396/status/1125291157162868736 + * + * The original source can be found here: + * https://www.openprocessing.org/sketch/707543 + * + * It was modified to run with DOjS by Andre Seidelt . + */ + +Include('p5'); + +var stars = []; +var starsNum = 50; +var starsSizeMax; +var count = 0; + +function setup() { + createCanvas(windowWidth, windowHeight); + colorMode(HSB, 360, 100, 100, 100); + frameRate(10); + background(0); + noStroke(); + starsSizeMax = width > height ? width / 20 : height / 20; + + for (var i = 0; i < starsNum; i++) { + stars.push(new Star()); + } +} + +function draw() { + // blendMode(BLEND); + background(0, 30); + + // blendMode(ADD); + for (var i = 0; i < stars.length; i++) { + stars[i].display(); + } + + count++; + + if (count > 25) { + stars = []; + for (var i = 0; i < starsNum; i++) { + stars.push(new Star()); + } + count = 0; + } +} + +function Star() { + this.ox = random(width); + this.oy = random(height); + this.R = random(10, starsSizeMax); + this.lightNum = floor(random(10, 60)); + this.c = random(360); + this.cRange = random(360); + + this.display = function () { + for (var i = 0; i < this.lightNum; i++) { + var vertexNum = floor(random(3, 8)); + fill(random(this.c, this.c + this.cRange) % 360, random(50, 100), random(30, 100), 5); + + push(); + translate(this.ox, this.oy); + beginShape(); + for (var j = 0; j < vertexNum; j++) { + var r = random(this.R); + var t = random(TWO_PI); + vertex(r * cos(t), r * sin(t)); + } + endShape(CLOSE); + pop(); + } + } +} diff --git a/font.c b/font.c index 676c871f..a15f4402 100644 --- a/font.c +++ b/font.c @@ -40,7 +40,9 @@ SOFTWARE. */ static void Font_Finalize(js_State *J, void *data) { FONT *f = (FONT *)data; - destroy_font(f); + if (f != font) { + destroy_font(f); + } } /** @@ -73,7 +75,7 @@ static void new_Font(js_State *J) { js_defproperty(J, -2, "filename", JS_READONLY | JS_DONTENUM | JS_DONTCONF); js_pushnumber(J, text_height(f)); - js_defproperty(J, -2, "height", 0); + js_defproperty(J, -2, "height", JS_READONLY | JS_DONTENUM | JS_DONTCONF); } /** diff --git a/gfx.c b/gfx.c index f3a438e0..a2292cd0 100644 --- a/gfx.c +++ b/gfx.c @@ -643,7 +643,7 @@ static void f_SaveTgaImage(js_State *J) { static void f_GetPixel(js_State *J) { int x = js_toint16(J, 1); int y = js_toint16(J, 2); - js_pushnumber(J, getpixel(cur, x, y)); + js_pushnumber(J, getpixel(cur, x, y) | 0xFE000000); } /** diff --git a/jsboot/p5.js b/jsboot/p5.js index 48266acc..c6983088 100644 --- a/jsboot/p5.js +++ b/jsboot/p5.js @@ -215,11 +215,6 @@ exports.noSmooth = function () { }; */ exports.settings = function () { }; -/** - * ignored - */ -exports.imageMode = function () { }; - /** * ignored */ diff --git a/jsboot/p5color.js b/jsboot/p5color.js index f77befc0..67045614 100644 --- a/jsboot/p5color.js +++ b/jsboot/p5color.js @@ -2022,7 +2022,7 @@ exports.colorMode = function (mode, max1, max2, max3, maxA) { */ exports.fill = function () { if (arguments[0] instanceof p5Color) { - _currentEnv._fill = arguments[0].toAllegro() + _currentEnv._fill = arguments[0].toAllegro(); } else { _currentEnv._fill = new p5Color(arguments).toAllegro(); } diff --git a/jsboot/p5shape.js b/jsboot/p5shape.js index 51f8277b..9c77e117 100644 --- a/jsboot/p5shape.js +++ b/jsboot/p5shape.js @@ -65,13 +65,12 @@ exports._shape = []; * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE); */ exports.arc = function (x, y, w, h, start, end, style) { - //TODO: style = style || ARC.OPEN; - - if (_currentEnv._fill != NO_COLOR) { - FilledEllipseArc(x, y, w, h, start * 10 * RAD_TO_DEG, end * 10 * RAD_TO_DEG, _currentEnv._fill); - } if (_currentEnv._stroke != NO_COLOR) { - EllipseArc(x, y, w, h, start * 10 * RAD_TO_DEG, end * 10 * RAD_TO_DEG, _currentEnv._stroke); + 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); + } } }; @@ -738,8 +737,8 @@ exports.loadImage = function (path) { exports.image = function (img, x, y) { var x1 = x; var y1 = y; - var w = img.width; - var h = img.height; + var w = img.bm.width; + var h = img.bm.height; if (_currentEnv._imageMode === CORNER) { } else if (_currentEnv._imageMode === CORNERS) { diff --git a/jsboot/p5typo.js b/jsboot/p5typo.js index a147479b..42ea6491 100644 --- a/jsboot/p5typo.js +++ b/jsboot/p5typo.js @@ -100,13 +100,13 @@ exports.text = function (str, x, y) { switch (_currentEnv._txtAlignX) { case LEFT: - _currentEnv._font.DrawStringLeft(x, y, str, _currentEnv._fill); + _currentEnv._font.DrawStringLeft(x, y, str, _currentEnv._fill, NO_COLOR); break; case CENTER: - _currentEnv._font.DrawStringCenter(x, y, str, _currentEnv._fill); + _currentEnv._font.DrawStringCenter(x, y, str, _currentEnv._fill, NO_COLOR); break; case RIGHT: - _currentEnv._font.DrawStringRight(x, y, str, _currentEnv._fill); + _currentEnv._font.DrawStringRight(x, y, str, _currentEnv._fill, NO_COLOR); break; } }; diff --git a/mujs-1.0.5/Makefile b/mujs-1.0.5/Makefile index 45646bb9..44e2990d 100644 --- a/mujs-1.0.5/Makefile +++ b/mujs-1.0.5/Makefile @@ -31,7 +31,7 @@ else ifeq "$(build)" "sanitize" CFLAGS += -pipe -g -fsanitize=address -fno-omit-frame-pointer LDFLAGS += -fsanitize=address else - CFLAGS += -O2 -march=i386 -mtune=i586 -ffast-math + CFLAGS += -O2 -march=i386 -mtune=i586 -ffast-math LDFLAGS += -Wl,-s endif @@ -49,9 +49,10 @@ OUT := build/$(build) SRCS := $(wildcard js*.c utf*.c regexp.c) HDRS := $(wildcard js*.h mujs.h utf.h regexp.h) -default: static -static: $(OUT)/mujs-pp $(OUT)/mujs $(OUT)/libmujs.a $(OUT)/mujs.pc -shared: static $(OUT)/libmujs.so +default: shell +shell: $(OUT)/mujs $(OUT)/mujs-pp +static: $(OUT)/libmujs.a +shared: $(OUT)/libmujs.so astnames.h: jsparse.h grep -E '(AST|EXP|STM)_' jsparse.h | sed 's/^[^A-Z]*\(AST_\)*/"/;s/,.*/",/' | tr A-Z a-z > $@ @@ -88,6 +89,7 @@ $(OUT)/mujs-pp: $(OUT)/libmujs.o $(OUT)/pp.o @ mkdir -p $(dir $@) $(CC) $(LDFLAGS) -o $@ $^ -lm +.PHONY: $(OUT)/mujs.pc $(OUT)/mujs.pc: @ echo Creating $@ @ echo > $@ Name: mujs @@ -100,20 +102,20 @@ $(OUT)/mujs.pc: watch: @ while ! inotifywait -q -e modify $(SRCS) $(HDRS) ; do time -p $(MAKE) ; done -install-common: release +install-common: shell $(OUT)/mujs.pc install -d $(DESTDIR)$(incdir) install -d $(DESTDIR)$(libdir) install -d $(DESTDIR)$(libdir)/pkgconfig install -d $(DESTDIR)$(bindir) install -m 644 mujs.h $(DESTDIR)$(incdir) - install -m 644 build/release/mujs.pc $(DESTDIR)$(libdir)/pkgconfig - install -m 755 build/release/mujs $(DESTDIR)$(bindir) + install -m 644 $(OUT)/mujs.pc $(DESTDIR)$(libdir)/pkgconfig + install -m 755 $(OUT)/mujs $(DESTDIR)$(bindir) -install-static: install-common - install -m 644 build/release/libmujs.a $(DESTDIR)$(libdir) +install-static: install-common static + install -m 644 $(OUT)/libmujs.a $(DESTDIR)$(libdir) -install-shared: install-common - install -m 755 build/release/libmujs.so $(DESTDIR)$(libdir) +install-shared: install-common shared + install -m 755 $(OUT)/libmujs.so $(DESTDIR)$(libdir) install: install-static @@ -138,8 +140,8 @@ sanitize: $(MAKE) build=sanitize release: - $(MAKE) build=release shared + $(MAKE) build=release -.PHONY: default static shared clean nuke +.PHONY: default static shared shell clean nuke .PHONY: install install-common install-shared install-static .PHONY: debug sanitize release diff --git a/mujs-1.0.5/docs/reference.html b/mujs-1.0.5/docs/reference.html index 31eb3620..48b2850e 100644 --- a/mujs-1.0.5/docs/reference.html +++ b/mujs-1.0.5/docs/reference.html @@ -365,13 +365,12 @@

                    Stack manipulation

                     int js_gettop(js_State *J);
-void js_settop(js_State *J, int idx); -- not implemented yet
 void js_pop(js_State *J, int n);
 void js_rot(js_State *J, int n);
 void js_copy(js_State *J, int idx);
 void js_remove(js_State *J, int idx);
-void js_insert(js_State *J, int idx); -- not implemented yet
-void js_replace(js_State* J, int idx); -- not implemented yet
+void js_insert(js_State *J, int idx);
+void js_replace(js_State* J, int idx);

                    Comparisons and arithmetic

                    diff --git a/mujs-1.0.5/jscompile.c b/mujs-1.0.5/jscompile.c index 325d1b21..a0b276a6 100644 --- a/mujs-1.0.5/jscompile.c +++ b/mujs-1.0.5/jscompile.c @@ -51,7 +51,7 @@ static void checkfutureword(JF, js_Ast *exp) } } -static js_Function *newfun(js_State *J, js_Ast *name, js_Ast *params, js_Ast *body, int script, int default_strict) +static js_Function *newfun(js_State *J, int line, js_Ast *name, js_Ast *params, js_Ast *body, int script, int default_strict) { js_Function *F = js_malloc(J, sizeof *F); memset(F, 0, sizeof *F); @@ -61,7 +61,7 @@ static js_Function *newfun(js_State *J, js_Ast *name, js_Ast *params, js_Ast *bo ++J->gccounter; F->filename = js_intern(J, J->filename); - F->line = name ? name->line : params ? params->line : body ? body->line : 1; + F->line = line; F->script = script; F->strict = default_strict; F->name = name ? name->string : ""; @@ -85,17 +85,19 @@ static void emitraw(JF, int value) } static void emit(JF, int value) +{ + emitraw(J, F, F->lastline); + emitraw(J, F, value); +} + +static void emitarg(JF, int value) { emitraw(J, F, value); } static void emitline(JF, js_Ast *node) { - if (F->lastline != node->line) { - F->lastline = node->line; - emit(J, F, OP_LINE); - emitraw(J, F, node->line); - } + F->lastline = node->line; } static int addfunction(JF, js_Function *value) @@ -136,7 +138,7 @@ static int addstring(JF, const char *value) return F->strlen++; } -static void addlocal(JF, js_Ast *ident, int reuse) +static int addlocal(JF, js_Ast *ident, int reuse) { const char *name = ident->string; if (F->strict) { @@ -144,13 +146,16 @@ static void addlocal(JF, js_Ast *ident, int reuse) jsC_error(J, ident, "redefining 'arguments' is not allowed in strict mode"); if (!strcmp(name, "eval")) jsC_error(J, ident, "redefining 'eval' is not allowed in strict mode"); + } else { + if (!strcmp(name, "eval")) + js_evalerror(J, "%s:%d: invalid use of 'eval'", J->filename, ident->line); } if (reuse || F->strict) { int i; for (i = 0; i < F->varlen; ++i) { if (!strcmp(F->vartab[i], name)) { if (reuse) - return; + return i+1; if (F->strict) jsC_error(J, ident, "duplicate formal parameter '%s'", name); } @@ -160,7 +165,8 @@ static void addlocal(JF, js_Ast *ident, int reuse) F->varcap = F->varcap ? F->varcap * 2 : 16; F->vartab = js_realloc(J, F->vartab, F->varcap * sizeof *F->vartab); } - F->vartab[F->varlen++] = name; + F->vartab[F->varlen] = name; + return ++F->varlen; } static int findlocal(JF, const char *name) @@ -174,55 +180,65 @@ static int findlocal(JF, const char *name) static void emitfunction(JF, js_Function *fun) { + F->lightweight = 0; emit(J, F, OP_CLOSURE); - emitraw(J, F, addfunction(J, F, fun)); + emitarg(J, F, addfunction(J, F, fun)); } static void emitnumber(JF, double num) { if (num == 0) { - emit(J, F, OP_NUMBER_0); + emit(J, F, OP_INTEGER); + emitarg(J, F, 32768); if (signbit(num)) emit(J, F, OP_NEG); - } else if (num == 1) { - emit(J, F, OP_NUMBER_1); - } else if (num == (js_Instruction)num) { - emit(J, F, OP_NUMBER_POS); - emitraw(J, F, (js_Instruction)num); - } else if (num < 0 && -num == (js_Instruction)(-num)) { - emit(J, F, OP_NUMBER_NEG); - emitraw(J, F, (js_Instruction)(-num)); } else { - emit(J, F, OP_NUMBER); - emitraw(J, F, addnumber(J, F, num)); + double nv = num + 32768; + js_Instruction iv = nv; + if (nv == iv) { + emit(J, F, OP_INTEGER); + emitarg(J, F, iv); + } else { + emit(J, F, OP_NUMBER); + emitarg(J, F, addnumber(J, F, num)); + } } } static void emitstring(JF, int opcode, const char *str) { emit(J, F, opcode); - emitraw(J, F, addstring(J, F, str)); + emitarg(J, F, addstring(J, F, str)); } static void emitlocal(JF, int oploc, int opvar, js_Ast *ident) { + int is_arguments = !strcmp(ident->string, "arguments"); + int is_eval = !strcmp(ident->string, "eval"); int i; + + if (is_arguments) { + F->lightweight = 0; + F->arguments = 1; + } + checkfutureword(J, F, ident); if (F->strict && oploc == OP_SETLOCAL) { - if (!strcmp(ident->string, "arguments")) + if (is_arguments) jsC_error(J, ident, "'arguments' is read-only in strict mode"); - if (!strcmp(ident->string, "eval")) + if (is_eval) jsC_error(J, ident, "'eval' is read-only in strict mode"); } - if (F->lightweight) { - i = findlocal(J, F, ident->string); - if (i >= 0) { - emit(J, F, oploc); - emitraw(J, F, i); - return; - } + if (is_eval) + js_evalerror(J, "%s:%d: invalid use of 'eval'", J->filename, ident->line); + + i = findlocal(J, F, ident->string); + if (i < 0) { + emitstring(J, F, opvar, ident->string); + } else { + emit(J, F, oploc); + emitarg(J, F, i); } - emitstring(J, F, opvar, ident->string); } static int here(JF) @@ -232,9 +248,10 @@ static int here(JF) static int emitjump(JF, int opcode) { - int inst = F->codelen + 1; + int inst; emit(J, F, opcode); - emitraw(J, F, 0); + inst = F->codelen; + emitarg(J, F, 0); return inst; } @@ -243,7 +260,7 @@ static void emitjumpto(JF, int opcode, int dest) emit(J, F, opcode); if (dest != (js_Instruction)dest) js_syntaxerror(J, "jump address integer overflow"); - emitraw(J, F, dest); + emitarg(J, F, dest); } static void labelto(JF, int inst, int addr) @@ -262,16 +279,20 @@ static void label(JF, int inst) static void ctypeof(JF, js_Ast *exp) { - if (exp->type == EXP_IDENTIFIER) - emitlocal(J, F, OP_GETLOCAL, OP_HASVAR, exp); - else - cexp(J, F, exp); + if (exp->a->type == EXP_IDENTIFIER) { + emitline(J, F, exp->a); + emitlocal(J, F, OP_GETLOCAL, OP_HASVAR, exp->a); + } else { + cexp(J, F, exp->a); + } + emitline(J, F, exp); emit(J, F, OP_TYPEOF); } static void cunary(JF, js_Ast *exp, int opcode) { cexp(J, F, exp->a); + emitline(J, F, exp); emit(J, F, opcode); } @@ -279,6 +300,7 @@ static void cbinary(JF, js_Ast *exp, int opcode) { cexp(J, F, exp->a); cexp(J, F, exp->b); + emitline(J, F, exp); emit(J, F, opcode); } @@ -287,9 +309,10 @@ static void carray(JF, js_Ast *list) int i = 0; while (list) { if (list->a->type != EXP_UNDEF) { - emitnumber(J, F, i++); emitline(J, F, list->a); + emitnumber(J, F, i++); cexp(J, F, list->a); + emitline(J, F, list->a); emit(J, F, OP_INITPROP); } else { ++i; @@ -330,12 +353,15 @@ static void cobject(JF, js_Ast *list) js_Ast *kv = list->a; js_Ast *prop = kv->a; - if (prop->type == AST_IDENTIFIER || prop->type == EXP_STRING) + if (prop->type == AST_IDENTIFIER || prop->type == EXP_STRING) { + emitline(J, F, prop); emitstring(J, F, OP_STRING, prop->string); - else if (prop->type == EXP_NUMBER) + } else if (prop->type == EXP_NUMBER) { + emitline(J, F, prop); emitnumber(J, F, prop->number); - else + } else { jsC_error(J, prop, "invalid property name in object initializer"); + } if (F->strict) checkdup(J, F, head, kv); @@ -343,16 +369,18 @@ static void cobject(JF, js_Ast *list) switch (kv->type) { default: /* impossible */ break; case EXP_PROP_VAL: - emitline(J, F, kv->b); cexp(J, F, kv->b); + emitline(J, F, kv); emit(J, F, OP_INITPROP); break; case EXP_PROP_GET: - emitfunction(J, F, newfun(J, NULL, NULL, kv->c, 0, F->strict)); + emitfunction(J, F, newfun(J, prop->line, NULL, NULL, kv->c, 0, F->strict)); + emitline(J, F, kv); emit(J, F, OP_INITGETTER); break; case EXP_PROP_SET: - emitfunction(J, F, newfun(J, NULL, kv->b, kv->c, 0, F->strict)); + emitfunction(J, F, newfun(J, prop->line, NULL, kv->b, kv->c, 0, F->strict)); + emitline(J, F, kv); emit(J, F, OP_INITSETTER); break; } @@ -379,17 +407,20 @@ static void cassign(JF, js_Ast *exp) switch (lhs->type) { case EXP_IDENTIFIER: cexp(J, F, rhs); + emitline(J, F, exp); emitlocal(J, F, OP_SETLOCAL, OP_SETVAR, lhs); break; case EXP_INDEX: cexp(J, F, lhs->a); cexp(J, F, lhs->b); cexp(J, F, rhs); + emitline(J, F, exp); emit(J, F, OP_SETPROP); break; case EXP_MEMBER: cexp(J, F, lhs->a); cexp(J, F, rhs); + emitline(J, F, exp); emitstring(J, F, OP_SETPROP_S, lhs->b->string); break; default: @@ -404,6 +435,7 @@ static void cassignforin(JF, js_Ast *stm) if (stm->type == STM_FOR_IN_VAR) { if (lhs->b) jsC_error(J, lhs->b, "more than one loop variable in for-in statement"); + emitline(J, F, lhs->a); emitlocal(J, F, OP_SETLOCAL, OP_SETVAR, lhs->a->a); /* list(var-init(ident)) */ emit(J, F, OP_POP); return; @@ -411,18 +443,21 @@ static void cassignforin(JF, js_Ast *stm) switch (lhs->type) { case EXP_IDENTIFIER: + emitline(J, F, lhs); emitlocal(J, F, OP_SETLOCAL, OP_SETVAR, lhs); emit(J, F, OP_POP); break; case EXP_INDEX: cexp(J, F, lhs->a); cexp(J, F, lhs->b); + emitline(J, F, lhs); emit(J, F, OP_ROT3); emit(J, F, OP_SETPROP); emit(J, F, OP_POP); break; case EXP_MEMBER: cexp(J, F, lhs->a); + emitline(J, F, lhs); emit(J, F, OP_ROT2); emitstring(J, F, OP_SETPROP_S, lhs->b->string); emit(J, F, OP_POP); @@ -436,16 +471,19 @@ static void cassignop1(JF, js_Ast *lhs) { switch (lhs->type) { case EXP_IDENTIFIER: + emitline(J, F, lhs); emitlocal(J, F, OP_GETLOCAL, OP_GETVAR, lhs); break; case EXP_INDEX: cexp(J, F, lhs->a); cexp(J, F, lhs->b); + emitline(J, F, lhs); emit(J, F, OP_DUP2); emit(J, F, OP_GETPROP); break; case EXP_MEMBER: cexp(J, F, lhs->a); + emitline(J, F, lhs); emit(J, F, OP_DUP); emitstring(J, F, OP_GETPROP_S, lhs->b->string); break; @@ -458,14 +496,17 @@ static void cassignop2(JF, js_Ast *lhs, int postfix) { switch (lhs->type) { case EXP_IDENTIFIER: + emitline(J, F, lhs); if (postfix) emit(J, F, OP_ROT2); emitlocal(J, F, OP_SETLOCAL, OP_SETVAR, lhs); break; case EXP_INDEX: + emitline(J, F, lhs); if (postfix) emit(J, F, OP_ROT4); emit(J, F, OP_SETPROP); break; case EXP_MEMBER: + emitline(J, F, lhs); if (postfix) emit(J, F, OP_ROT3); emitstring(J, F, OP_SETPROP_S, lhs->b->string); break; @@ -480,26 +521,31 @@ static void cassignop(JF, js_Ast *exp, int opcode) js_Ast *rhs = exp->b; cassignop1(J, F, lhs); cexp(J, F, rhs); + emitline(J, F, exp); emit(J, F, opcode); cassignop2(J, F, lhs, 0); } static void cdelete(JF, js_Ast *exp) { - switch (exp->type) { + js_Ast *arg = exp->a; + switch (arg->type) { case EXP_IDENTIFIER: if (F->strict) jsC_error(J, exp, "delete on an unqualified name is not allowed in strict mode"); - emitlocal(J, F, OP_DELLOCAL, OP_DELVAR, exp); + emitline(J, F, exp); + emitlocal(J, F, OP_DELLOCAL, OP_DELVAR, arg); break; case EXP_INDEX: - cexp(J, F, exp->a); - cexp(J, F, exp->b); + cexp(J, F, arg->a); + cexp(J, F, arg->b); + emitline(J, F, exp); emit(J, F, OP_DELPROP); break; case EXP_MEMBER: - cexp(J, F, exp->a); - emitstring(J, F, OP_DELPROP_S, exp->b->string); + cexp(J, F, arg->a); + emitline(J, F, exp); + emitstring(J, F, OP_DELPROP_S, arg->b->string); break; default: jsC_error(J, exp, "invalid l-value in delete expression"); @@ -509,6 +555,7 @@ static void cdelete(JF, js_Ast *exp) static void ceval(JF, js_Ast *fun, js_Ast *args) { int n = cargs(J, F, args); + F->lightweight = 0; if (n == 0) emit(J, F, OP_UNDEF); else while (n-- > 1) @@ -546,7 +593,7 @@ static void ccall(JF, js_Ast *fun, js_Ast *args) } n = cargs(J, F, args); emit(J, F, OP_CALL); - emitraw(J, F, n); + emitarg(J, F, n); } static void cexp(JF, js_Ast *exp) @@ -555,46 +602,74 @@ static void cexp(JF, js_Ast *exp) int n; switch (exp->type) { - case EXP_STRING: emitstring(J, F, OP_STRING, exp->string); break; - case EXP_NUMBER: emitnumber(J, F, exp->number); break; - case EXP_UNDEF: emit(J, F, OP_UNDEF); break; - case EXP_NULL: emit(J, F, OP_NULL); break; - case EXP_TRUE: emit(J, F, OP_TRUE); break; - case EXP_FALSE: emit(J, F, OP_FALSE); break; - case EXP_THIS: emit(J, F, OP_THIS); break; + case EXP_STRING: + emitline(J, F, exp); + emitstring(J, F, OP_STRING, exp->string); + break; + case EXP_NUMBER: + emitline(J, F, exp); + emitnumber(J, F, exp->number); + break; + case EXP_UNDEF: + emitline(J, F, exp); + emit(J, F, OP_UNDEF); + break; + case EXP_NULL: + emitline(J, F, exp); + emit(J, F, OP_NULL); + break; + case EXP_TRUE: + emitline(J, F, exp); + emit(J, F, OP_TRUE); + break; + case EXP_FALSE: + emitline(J, F, exp); + emit(J, F, OP_FALSE); + break; + case EXP_THIS: + emitline(J, F, exp); + emit(J, F, OP_THIS); + break; case EXP_REGEXP: + emitline(J, F, exp); emit(J, F, OP_NEWREGEXP); - emitraw(J, F, addstring(J, F, exp->string)); - emitraw(J, F, exp->number); + emitarg(J, F, addstring(J, F, exp->string)); + emitarg(J, F, exp->number); break; case EXP_OBJECT: + emitline(J, F, exp); emit(J, F, OP_NEWOBJECT); cobject(J, F, exp->a); break; case EXP_ARRAY: + emitline(J, F, exp); emit(J, F, OP_NEWARRAY); carray(J, F, exp->a); break; case EXP_FUN: - emitfunction(J, F, newfun(J, exp->a, exp->b, exp->c, 0, F->strict)); + emitline(J, F, exp); + emitfunction(J, F, newfun(J, exp->line, exp->a, exp->b, exp->c, 0, F->strict)); break; case EXP_IDENTIFIER: + emitline(J, F, exp); emitlocal(J, F, OP_GETLOCAL, OP_GETVAR, exp); break; case EXP_INDEX: cexp(J, F, exp->a); cexp(J, F, exp->b); + emitline(J, F, exp); emit(J, F, OP_GETPROP); break; case EXP_MEMBER: cexp(J, F, exp->a); + emitline(J, F, exp); emitstring(J, F, OP_GETPROP_S, exp->b->string); break; @@ -605,28 +680,32 @@ static void cexp(JF, js_Ast *exp) case EXP_NEW: cexp(J, F, exp->a); n = cargs(J, F, exp->b); + emitline(J, F, exp); emit(J, F, OP_NEW); - emitraw(J, F, n); + emitarg(J, F, n); break; case EXP_DELETE: - cdelete(J, F, exp->a); + cdelete(J, F, exp); break; case EXP_PREINC: cassignop1(J, F, exp->a); + emitline(J, F, exp); emit(J, F, OP_INC); cassignop2(J, F, exp->a, 0); break; case EXP_PREDEC: cassignop1(J, F, exp->a); + emitline(J, F, exp); emit(J, F, OP_DEC); cassignop2(J, F, exp->a, 0); break; case EXP_POSTINC: cassignop1(J, F, exp->a); + emitline(J, F, exp); emit(J, F, OP_POSTINC); cassignop2(J, F, exp->a, 1); emit(J, F, OP_POP); @@ -634,6 +713,7 @@ static void cexp(JF, js_Ast *exp) case EXP_POSTDEC: cassignop1(J, F, exp->a); + emitline(J, F, exp); emit(J, F, OP_POSTDEC); cassignop2(J, F, exp->a, 1); emit(J, F, OP_POP); @@ -641,11 +721,12 @@ static void cexp(JF, js_Ast *exp) case EXP_VOID: cexp(J, F, exp->a); + emitline(J, F, exp); emit(J, F, OP_POP); emit(J, F, OP_UNDEF); break; - case EXP_TYPEOF: ctypeof(J, F, exp->a); break; + case EXP_TYPEOF: ctypeof(J, F, exp); break; case EXP_POS: cunary(J, F, exp, OP_POS); break; case EXP_NEG: cunary(J, F, exp, OP_NEG); break; case EXP_BITNOT: cunary(J, F, exp, OP_BITNOT); break; @@ -688,12 +769,14 @@ static void cexp(JF, js_Ast *exp) case EXP_COMMA: cexp(J, F, exp->a); + emitline(J, F, exp); emit(J, F, OP_POP); cexp(J, F, exp->b); break; case EXP_LOGOR: cexp(J, F, exp->a); + emitline(J, F, exp); emit(J, F, OP_DUP); end = emitjump(J, F, OP_JTRUE); emit(J, F, OP_POP); @@ -703,6 +786,7 @@ static void cexp(JF, js_Ast *exp) case EXP_LOGAND: cexp(J, F, exp->a); + emitline(J, F, exp); emit(J, F, OP_DUP); end = emitjump(J, F, OP_JFALSE); emit(J, F, OP_POP); @@ -712,6 +796,7 @@ static void cexp(JF, js_Ast *exp) case EXP_COND: cexp(J, F, exp->a); + emitline(J, F, exp); then = emitjump(J, F, OP_JTRUE); cexp(J, F, exp->c); end = emitjump(J, F, OP_JUMP); @@ -820,12 +905,16 @@ static void cexit(JF, enum js_AstType T, js_Ast *node, js_Ast *target) do { prev = node, node = node->parent; switch (node->type) { - default: /* impossible */ break; + default: + /* impossible */ + break; case STM_WITH: + emitline(J, F, node); emit(J, F, OP_ENDWITH); break; case STM_FOR_IN: case STM_FOR_IN_VAR: + emitline(J, F, node); /* pop the iterator if leaving the loop */ if (F->script) { if (T == STM_RETURN || T == STM_BREAK || (T == STM_CONTINUE && target != node)) { @@ -846,6 +935,7 @@ static void cexit(JF, enum js_AstType T, js_Ast *node, js_Ast *target) } break; case STM_TRY: + emitline(J, F, node); /* came from try block */ if (prev == node->a) { emit(J, F, OP_ENDTRY); @@ -897,6 +987,7 @@ static void ctrycatch(JF, js_Ast *trystm, js_Ast *catchvar, js_Ast *catchstm) if (!strcmp(catchvar->string, "eval")) jsC_error(J, catchvar, "redefining 'eval' is not allowed in strict mode"); } + emitline(J, F, catchvar); emitstring(J, F, OP_CATCH, catchvar->string); cstm(J, F, catchstm); emit(J, F, OP_ENDCATCH); @@ -928,9 +1019,11 @@ static void ctrycatchfinally(JF, js_Ast *trystm, js_Ast *catchvar, js_Ast *catch if (!strcmp(catchvar->string, "eval")) jsC_error(J, catchvar, "redefining 'eval' is not allowed in strict mode"); } + emitline(J, F, catchvar); emitstring(J, F, OP_CATCH, catchvar->string); cstm(J, F, catchstm); emit(J, F, OP_ENDCATCH); + emit(J, F, OP_ENDTRY); L3 = emitjump(J, F, OP_JUMP); /* skip past the try block to the finally block */ } label(J, F, L1); @@ -958,18 +1051,20 @@ static void cswitch(JF, js_Ast *ref, js_Ast *head) def = clause; } else { cexp(J, F, clause->a); + emitline(J, F, clause); clause->casejump = emitjump(J, F, OP_JCASE); } } emit(J, F, OP_POP); if (def) { + emitline(J, F, def); def->casejump = emitjump(J, F, OP_JUMP); end = 0; } else { end = emitjump(J, F, OP_JUMP); } - /* emit the casue clause bodies */ + /* emit the case clause bodies */ for (node = head; node; node = node->b) { clause = node->a; label(J, F, clause->casejump); @@ -991,6 +1086,7 @@ static void cvarinit(JF, js_Ast *list) js_Ast *var = list->a; if (var->b) { cexp(J, F, var->b); + emitline(J, F, var); emitlocal(J, F, OP_SETLOCAL, OP_SETVAR, var->a); emit(J, F, OP_POP); } @@ -1015,6 +1111,7 @@ static void cstm(JF, js_Ast *stm) case STM_EMPTY: if (F->script) { + emitline(J, F, stm); emit(J, F, OP_POP); emit(J, F, OP_UNDEF); } @@ -1027,14 +1124,17 @@ static void cstm(JF, js_Ast *stm) case STM_IF: if (stm->c) { cexp(J, F, stm->a); + emitline(J, F, stm); then = emitjump(J, F, OP_JTRUE); cstm(J, F, stm->c); + emitline(J, F, stm); end = emitjump(J, F, OP_JUMP); label(J, F, then); cstm(J, F, stm->b); label(J, F, end); } else { cexp(J, F, stm->a); + emitline(J, F, stm); end = emitjump(J, F, OP_JFALSE); cstm(J, F, stm->b); label(J, F, end); @@ -1046,6 +1146,7 @@ static void cstm(JF, js_Ast *stm) cstm(J, F, stm->a); cont = here(J, F); cexp(J, F, stm->b); + emitline(J, F, stm); emitjumpto(J, F, OP_JTRUE, loop); labeljumps(J, F, stm->jumps, here(J,F), cont); break; @@ -1053,8 +1154,10 @@ static void cstm(JF, js_Ast *stm) case STM_WHILE: loop = here(J, F); cexp(J, F, stm->a); + emitline(J, F, stm); end = emitjump(J, F, OP_JFALSE); cstm(J, F, stm->b); + emitline(J, F, stm); emitjumpto(J, F, OP_JUMP, loop); label(J, F, end); labeljumps(J, F, stm->jumps, here(J,F), loop); @@ -1073,6 +1176,7 @@ static void cstm(JF, js_Ast *stm) loop = here(J, F); if (stm->b) { cexp(J, F, stm->b); + emitline(J, F, stm); end = emitjump(J, F, OP_JFALSE); } else { end = 0; @@ -1083,6 +1187,7 @@ static void cstm(JF, js_Ast *stm) cexp(J, F, stm->c); emit(J, F, OP_POP); } + emitline(J, F, stm); emitjumpto(J, F, OP_JUMP, loop); if (end) label(J, F, end); @@ -1092,9 +1197,11 @@ static void cstm(JF, js_Ast *stm) case STM_FOR_IN: case STM_FOR_IN_VAR: cexp(J, F, stm->b); + emitline(J, F, stm); emit(J, F, OP_ITERATOR); loop = here(J, F); { + emitline(J, F, stm); emit(J, F, OP_NEXTITER); end = emitjump(J, F, OP_JFALSE); cassignforin(J, F, stm); @@ -1105,6 +1212,7 @@ static void cstm(JF, js_Ast *stm) } else { cstm(J, F, stm->c); } + emitline(J, F, stm); emitjumpto(J, F, OP_JUMP, loop); } label(J, F, end); @@ -1138,6 +1246,7 @@ static void cstm(JF, js_Ast *stm) jsC_error(J, stm, "unlabelled break must be inside loop or switch"); } cexit(J, F, STM_BREAK, stm, target); + emitline(J, F, stm); addjump(J, F, STM_BREAK, target, emitjump(J, F, OP_JUMP)); break; @@ -1153,6 +1262,7 @@ static void cstm(JF, js_Ast *stm) jsC_error(J, stm, "continue must be inside loop"); } cexit(J, F, STM_CONTINUE, stm, target); + emitline(J, F, stm); addjump(J, F, STM_CONTINUE, target, emitjump(J, F, OP_JUMP)); break; @@ -1165,25 +1275,32 @@ static void cstm(JF, js_Ast *stm) if (!target) jsC_error(J, stm, "return not in function"); cexit(J, F, STM_RETURN, stm, target); + emitline(J, F, stm); emit(J, F, OP_RETURN); break; case STM_THROW: cexp(J, F, stm->a); + emitline(J, F, stm); emit(J, F, OP_THROW); break; case STM_WITH: + F->lightweight = 0; if (F->strict) jsC_error(J, stm->a, "'with' statements are not allowed in strict mode"); cexp(J, F, stm->a); + emitline(J, F, stm); emit(J, F, OP_WITH); cstm(J, F, stm->b); + emitline(J, F, stm); emit(J, F, OP_ENDWITH); break; case STM_TRY: + emitline(J, F, stm); if (stm->b && stm->c) { + F->lightweight = 0; if (stm->d) ctrycatchfinally(J, F, stm->a, stm->b, stm->c, stm->d); else @@ -1194,15 +1311,18 @@ static void cstm(JF, js_Ast *stm) break; case STM_DEBUGGER: + emitline(J, F, stm); emit(J, F, OP_DEBUGGER); break; default: if (F->script) { + emitline(J, F, stm); emit(J, F, OP_POP); cexp(J, F, stm); } else { cexp(J, F, stm); + emitline(J, F, stm); emit(J, F, OP_POP); } break; @@ -1217,41 +1337,6 @@ static void cstmlist(JF, js_Ast *list) } } -/* Analyze */ - -static void analyze(JF, js_Ast *node) -{ - if (isfun(node->type)) { - F->lightweight = 0; - return; /* don't scan inner functions */ - } - - if (node->type == STM_WITH) { - F->lightweight = 0; - } - - if (node->type == STM_TRY && node->c) { - F->lightweight = 0; - } - - if (node->type == EXP_IDENTIFIER) { - if (!strcmp(node->string, "arguments")) { - F->lightweight = 0; - F->arguments = 1; - } else if (!strcmp(node->string, "eval")) { - /* eval may only be used as a direct function call */ - if (!node->parent || node->parent->type != EXP_CALL || node->parent->a != node) - js_evalerror(J, "%s:%d: invalid use of 'eval'", J->filename, node->line); - F->lightweight = 0; - } - } - - if (node->a) analyze(J, F, node->a); - if (node->b) analyze(J, F, node->b); - if (node->c) analyze(J, F, node->c); - if (node->d) analyze(J, F, node->d); -} - /* Declarations and programs */ static int listlength(js_Ast *list) @@ -1261,31 +1346,32 @@ static int listlength(js_Ast *list) return n; } -static int cparams(JF, js_Ast *list, js_Ast *fname) +static void cparams(JF, js_Ast *list, js_Ast *fname) { - int shadow = 0; F->numparams = listlength(list); while (list) { checkfutureword(J, F, list->a); addlocal(J, F, list->a, 0); - if (fname && !strcmp(fname->string, list->a->string)) - shadow = 1; list = list->b; } - return shadow; } static void cvardecs(JF, js_Ast *node) { + if (node->type == AST_LIST) { + while (node) { + cvardecs(J, F, node->a); + node = node->b; + } + return; + } + if (isfun(node->type)) return; /* stop at inner functions */ if (node->type == EXP_VAR) { checkfutureword(J, F, node->a); - if (F->lightweight) - addlocal(J, F, node->a, 1); - else - emitstring(J, F, OP_DEFVAR, node->a->string); + addlocal(J, F, node->a, 1); } if (node->a) cvardecs(J, F, node->a); @@ -1299,8 +1385,12 @@ static void cfundecs(JF, js_Ast *list) while (list) { js_Ast *stm = list->a; if (stm->type == AST_FUNDEC) { - emitfunction(J, F, newfun(J, stm->a, stm->b, stm->c, 0, F->strict)); - emitstring(J, F, OP_INITVAR, stm->a->string); + emitline(J, F, stm); + emitfunction(J, F, newfun(J, stm->line, stm->a, stm->b, stm->c, 0, F->strict)); + emitline(J, F, stm); + emit(J, F, OP_SETLOCAL); + emitarg(J, F, addlocal(J, F, stm->a, 0)); + emit(J, F, OP_POP); } list = list->b; } @@ -1308,41 +1398,36 @@ static void cfundecs(JF, js_Ast *list) static void cfunbody(JF, js_Ast *name, js_Ast *params, js_Ast *body) { - int shadow; - F->lightweight = 1; F->arguments = 0; if (F->script) F->lightweight = 0; - if (body) - analyze(J, F, body); - /* Check if first statement is 'use strict': */ if (body && body->type == AST_LIST && body->a && body->a->type == EXP_STRING) if (!strcmp(body->a->string, "use strict")) F->strict = 1; - shadow = cparams(J, F, params, name); + F->lastline = F->line; - if (name && !shadow) { - checkfutureword(J, F, name); - emit(J, F, OP_CURRENT); - if (F->lightweight) { - addlocal(J, F, name, 0); - emit(J, F, OP_INITLOCAL); - emitraw(J, F, findlocal(J, F, name->string)); - } else { - emitstring(J, F, OP_INITVAR, name->string); - } - } + cparams(J, F, params, name); if (body) { cvardecs(J, F, body); cfundecs(J, F, body); } + if (name) { + checkfutureword(J, F, name); + if (findlocal(J, F, name->string) < 0) { + emit(J, F, OP_CURRENT); + emit(J, F, OP_SETLOCAL); + emitarg(J, F, addlocal(J, F, name, 0)); + emit(J, F, OP_POP); + } + } + if (F->script) { emit(J, F, OP_UNDEF); cstmlist(J, F, body); @@ -1356,10 +1441,10 @@ static void cfunbody(JF, js_Ast *name, js_Ast *params, js_Ast *body) js_Function *jsC_compilefunction(js_State *J, js_Ast *prog) { - return newfun(J, prog->a, prog->b, prog->c, 0, J->default_strict); + return newfun(J, prog->line, prog->a, prog->b, prog->c, 0, J->default_strict); } js_Function *jsC_compilescript(js_State *J, js_Ast *prog, int default_strict) { - return newfun(J, NULL, NULL, prog, 1, default_strict); + return newfun(J, prog ? prog->line : 0, NULL, NULL, prog, 1, default_strict); } diff --git a/mujs-1.0.5/jscompile.h b/mujs-1.0.5/jscompile.h index 83926c13..172f8fdd 100644 --- a/mujs-1.0.5/jscompile.h +++ b/mujs-1.0.5/jscompile.h @@ -10,11 +10,7 @@ enum js_OpCode OP_ROT3, /* A B C -- C A B */ OP_ROT4, /* A B C D -- D A B C */ - OP_NUMBER_0, /* -- 0 */ - OP_NUMBER_1, /* -- 1 */ - OP_NUMBER_POS, /* -K- K */ - OP_NUMBER_NEG, /* -K- -K */ - + OP_INTEGER, /* -K- (number-32768) */ OP_NUMBER, /* -N- */ OP_STRING, /* -S- */ OP_CLOSURE, /* -F- */ @@ -31,13 +27,10 @@ enum js_OpCode OP_THIS, OP_CURRENT, /* currently executing function object */ - OP_INITLOCAL, /* -K- */ OP_GETLOCAL, /* -K- */ OP_SETLOCAL, /* -K- */ OP_DELLOCAL, /* -K- false */ - OP_INITVAR, /* -S- */ - OP_DEFVAR, /* -S- */ OP_HASVAR, /* -S- ( | undefined ) */ OP_GETVAR, /* -S- */ OP_SETVAR, /* -S- */ @@ -112,8 +105,6 @@ enum js_OpCode OP_JTRUE, OP_JFALSE, OP_RETURN, - - OP_LINE, /* -K- */ }; struct js_Function diff --git a/mujs-1.0.5/jsdate.c b/mujs-1.0.5/jsdate.c index 8ce7e5f3..77693d43 100644 --- a/mujs-1.0.5/jsdate.c +++ b/mujs-1.0.5/jsdate.c @@ -1,6 +1,6 @@ -#include "jsbuiltin.h" #include "jsi.h" #include "jsvalue.h" +#include "jsbuiltin.h" #include @@ -10,751 +10,803 @@ #include #endif -#define js_optnumber(J, I, V) (js_isdefined(J, I) ? js_tonumber(J, I) : V) - -static double Now(void) { - // #if defined(__unix__) || defined(__APPLE__) - // struct timeval tv; - // gettimeofday(&tv, NULL); - // return floor(tv.tv_sec * 1000.0 + tv.tv_usec / 1000.0); - // #elif defined(_WIN32) - // struct _timeb tv; - // _ftime(&tv); - // return tv.time * 1000.0 + tv.millitm; - // #else - return time(NULL) * 1000.0; - // #endif -} - -static double LocalTZA(void) { - static int once = 1; - static double tza = 0; - if (once) { - time_t now = time(NULL); - time_t utc = mktime(gmtime(&now)); - time_t loc = mktime(localtime(&now)); - tza = (loc - utc) * 1000; - once = 0; - } - return tza; -} - -static double DaylightSavingTA(double t) { return 0; /* TODO */ } +#define js_optnumber(J,I,V) (js_isdefined(J,I) ? js_tonumber(J,I) : V) + +static double Now(void) +{ +// #if defined(__unix__) || defined(__APPLE__) +// struct timeval tv; +// gettimeofday(&tv, NULL); +// return floor(tv.tv_sec * 1000.0 + tv.tv_usec / 1000.0); +// #elif defined(_WIN32) +// struct _timeb tv; +// _ftime(&tv); +// return tv.time * 1000.0 + tv.millitm; +// #else + return time(NULL) * 1000.0; +//#endif +} + +static double LocalTZA(void) +{ + static int once = 1; + static double tza = 0; + if (once) { + time_t now = time(NULL); + time_t utc = mktime(gmtime(&now)); + time_t loc = mktime(localtime(&now)); + tza = (loc - utc) * 1000; + once = 0; + } + return tza; +} + +static double DaylightSavingTA(double t) +{ + return 0; /* TODO */ +} /* Helpers from the ECMA 262 specification */ -#define HoursPerDay 24.0 -#define MinutesPerDay (HoursPerDay * MinutesPerHour) -#define MinutesPerHour 60.0 -#define SecondsPerDay (MinutesPerDay * SecondsPerMinute) -#define SecondsPerHour (MinutesPerHour * SecondsPerMinute) -#define SecondsPerMinute 60.0 - -#define msPerDay (SecondsPerDay * msPerSecond) -#define msPerHour (SecondsPerHour * msPerSecond) -#define msPerMinute (SecondsPerMinute * msPerSecond) -#define msPerSecond 1000.0 - -static double pmod(double x, double y) { - x = fmod(x, y); - if (x < 0) - x += y; - return x; -} - -static int Day(double t) { return floor(t / msPerDay); } - -static double TimeWithinDay(double t) { return pmod(t, msPerDay); } - -static int DaysInYear(int y) { - return y % 4 == 0 && (y % 100 || (y % 400 == 0)) ? 366 : 365; -} - -static int DayFromYear(int y) { - return 365 * (y - 1970) + floor((y - 1969) / 4.0) - - floor((y - 1901) / 100.0) + floor((y - 1601) / 400.0); -} - -static double TimeFromYear(int y) { return DayFromYear(y) * msPerDay; } - -static int YearFromTime(double t) { - int y = floor(t / (msPerDay * 365.2425)) + 1970; - double t2 = TimeFromYear(y); - if (t2 > t) - --y; - else if (t2 + msPerDay * DaysInYear(y) <= t) - ++y; - return y; -} - -static int InLeapYear(int t) { return DaysInYear(YearFromTime(t)) == 366; } - -static int DayWithinYear(double t) { - return Day(t) - DayFromYear(YearFromTime(t)); -} - -static int MonthFromTime(double t) { - int day = DayWithinYear(t); - int leap = InLeapYear(t); - if (day < 31) - return 0; - if (day < 59 + leap) - return 1; - if (day < 90 + leap) - return 2; - if (day < 120 + leap) - return 3; - if (day < 151 + leap) - return 4; - if (day < 181 + leap) - return 5; - if (day < 212 + leap) - return 6; - if (day < 243 + leap) - return 7; - if (day < 273 + leap) - return 8; - if (day < 304 + leap) - return 9; - if (day < 334 + leap) - return 10; - return 11; +#define HoursPerDay 24.0 +#define MinutesPerDay (HoursPerDay * MinutesPerHour) +#define MinutesPerHour 60.0 +#define SecondsPerDay (MinutesPerDay * SecondsPerMinute) +#define SecondsPerHour (MinutesPerHour * SecondsPerMinute) +#define SecondsPerMinute 60.0 + +#define msPerDay (SecondsPerDay * msPerSecond) +#define msPerHour (SecondsPerHour * msPerSecond) +#define msPerMinute (SecondsPerMinute * msPerSecond) +#define msPerSecond 1000.0 + +static double pmod(double x, double y) +{ + x = fmod(x, y); + if (x < 0) + x += y; + return x; +} + +static int Day(double t) +{ + return floor(t / msPerDay); } -static int DateFromTime(double t) { - int day = DayWithinYear(t); - int leap = InLeapYear(t); - switch (MonthFromTime(t)) { - case 0: - return day + 1; - case 1: - return day - 30; - case 2: - return day - 58 - leap; - case 3: - return day - 89 - leap; - case 4: - return day - 119 - leap; - case 5: - return day - 150 - leap; - case 6: - return day - 180 - leap; - case 7: - return day - 211 - leap; - case 8: - return day - 242 - leap; - case 9: - return day - 272 - leap; - case 10: - return day - 303 - leap; - default: - return day - 333 - leap; - } -} - -static int WeekDay(double t) { return pmod(Day(t) + 4, 7); } - -static double LocalTime(double utc) { - return utc + LocalTZA() + DaylightSavingTA(utc); -} - -static double UTC(double loc) { - return loc - LocalTZA() - DaylightSavingTA(loc - LocalTZA()); -} - -static int HourFromTime(double t) { - return pmod(floor(t / msPerHour), HoursPerDay); -} - -static int MinFromTime(double t) { - return pmod(floor(t / msPerMinute), MinutesPerHour); -} - -static int SecFromTime(double t) { - return pmod(floor(t / msPerSecond), SecondsPerMinute); -} - -static int msFromTime(double t) { return pmod(t, msPerSecond); } - -static double MakeTime(double hour, double min, double sec, double ms) { - return ((hour * MinutesPerHour + min) * SecondsPerMinute + sec) * - msPerSecond + - ms; -} - -static double MakeDay(double y, double m, double date) { - /* - * The following array contains the day of year for the first day of - * each month, where index 0 is January, and day 0 is January 1. - */ - static const double firstDayOfMonth[2][12] = { - {0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334}, - {0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335}}; - - double yd, md; - int im; - - y += floor(m / 12); - m = pmod(m, 12); - - im = (int)m; - if (im < 0 || im >= 12) - return NAN; - - yd = floor(TimeFromYear(y) / msPerDay); - md = firstDayOfMonth[InLeapYear(y)][im]; - - return yd + md + date - 1; -} - -static double MakeDate(double day, double time) { - return day * msPerDay + time; -} - -static double TimeClip(double t) { - if (!isfinite(t)) - return NAN; - if (fabs(t) > 8.64e15) - return NAN; - return t < 0 ? -floor(-t) : floor(t); -} - -static int toint(const char **sp, int w, int *v) { - const char *s = *sp; - *v = 0; - while (w--) { - if (*s < '0' || *s > '9') - return 0; - *v = *v * 10 + (*s++ - '0'); - } - *sp = s; - return 1; -} - -static double parseDateTime(const char *s) { - int y = 1970, m = 1, d = 1, H = 0, M = 0, S = 0, ms = 0; - int tza = 0; - double t; - - /* Parse ISO 8601 formatted date and time: */ - /* YYYY("-"MM("-"DD)?)?("T"HH":"mm(":"ss("."sss)?)?("Z"|[+-]HH(":"mm)?)?)? */ - - if (!toint(&s, 4, &y)) - return NAN; - if (*s == '-') { - s += 1; - if (!toint(&s, 2, &m)) - return NAN; - if (*s == '-') { - s += 1; - if (!toint(&s, 2, &d)) - return NAN; - } - } - - if (*s == 'T') { - s += 1; - if (!toint(&s, 2, &H)) - return NAN; - if (*s != ':') - return NAN; - s += 1; - if (!toint(&s, 2, &M)) - return NAN; - if (*s == ':') { - s += 1; - if (!toint(&s, 2, &S)) - return NAN; - if (*s == '.') { - s += 1; - if (!toint(&s, 3, &ms)) - return NAN; - } - } - if (*s == 'Z') { - s += 1; - tza = 0; - } else if (*s == '+' || *s == '-') { - int tzh = 0, tzm = 0; - int tzs = *s == '+' ? 1 : -1; - s += 1; - if (!toint(&s, 2, &tzh)) - return NAN; - if (*s == ':') { - s += 1; - if (!toint(&s, 2, &tzm)) - return NAN; - } - if (tzh > 23 || tzm > 59) - return NAN; - tza = tzs * (tzh * msPerHour + tzm * msPerMinute); - } else { - tza = LocalTZA(); - } - } - - if (*s) - return NAN; - - if (m < 1 || m > 12) - return NAN; - if (d < 1 || d > 31) - return NAN; - if (H < 0 || H > 24) - return NAN; - if (M < 0 || M > 59) - return NAN; - if (S < 0 || S > 59) - return NAN; - if (ms < 0 || ms > 999) - return NAN; - if (H == 24 && (M != 0 || S != 0 || ms != 0)) - return NAN; - - /* TODO: DaylightSavingTA on local times */ - t = MakeDate(MakeDay(y, m - 1, d), MakeTime(H, M, S, ms)); - return t - tza; +static double TimeWithinDay(double t) +{ + return pmod(t, msPerDay); } -/* date formatting */ - -static char *fmtdate(char *buf, double t) { - int y = YearFromTime(t); - int m = MonthFromTime(t); - int d = DateFromTime(t); - if (!isfinite(t)) - return "Invalid Date"; - sprintf(buf, "%04d-%02d-%02d", y, m + 1, d); - return buf; -} - -static char *fmttime(char *buf, double t, double tza) { - int H = HourFromTime(t); - int M = MinFromTime(t); - int S = SecFromTime(t); - int ms = msFromTime(t); - int tzh = HourFromTime(fabs(tza)); - int tzm = MinFromTime(fabs(tza)); - if (!isfinite(t)) - return "Invalid Date"; - if (tza == 0) - sprintf(buf, "%02d:%02d:%02d.%03dZ", H, M, S, ms); - else if (tza < 0) - sprintf(buf, "%02d:%02d:%02d.%03d-%02d:%02d", H, M, S, ms, tzh, tzm); - else - sprintf(buf, "%02d:%02d:%02d.%03d+%02d:%02d", H, M, S, ms, tzh, tzm); - return buf; -} - -static char *fmtdatetime(char *buf, double t, double tza) { - char dbuf[20], tbuf[20]; - if (!isfinite(t)) - return "Invalid Date"; - fmtdate(dbuf, t); - fmttime(tbuf, t, tza); - sprintf(buf, "%sT%s", dbuf, tbuf); - return buf; +static int DaysInYear(int y) +{ + return y % 4 == 0 && (y % 100 || (y % 400 == 0)) ? 366 : 365; } -/* Date functions */ +static int DayFromYear(int y) +{ + return 365 * (y - 1970) + + floor((y - 1969) / 4.0) - + floor((y - 1901) / 100.0) + + floor((y - 1601) / 400.0); +} -static double js_todate(js_State *J, int idx) { - js_Object *self = js_toobject(J, idx); - if (self->type != JS_CDATE) - js_typeerror(J, "not a date"); - return self->u.number; +static double TimeFromYear(int y) +{ + return DayFromYear(y) * msPerDay; } -static void js_setdate(js_State *J, int idx, double t) { - js_Object *self = js_toobject(J, idx); - if (self->type != JS_CDATE) - js_typeerror(J, "not a date"); - self->u.number = TimeClip(t); - js_pushnumber(J, self->u.number); +static int YearFromTime(double t) +{ + int y = floor(t / (msPerDay * 365.2425)) + 1970; + double t2 = TimeFromYear(y); + if (t2 > t) + --y; + else if (t2 + msPerDay * DaysInYear(y) <= t) + ++y; + return y; } -static void D_parse(js_State *J) { - double t = parseDateTime(js_tostring(J, 1)); - js_pushnumber(J, t); +static int InLeapYear(int t) +{ + return DaysInYear(YearFromTime(t)) == 366; } -static void D_UTC(js_State *J) { - double y, m, d, H, M, S, ms, t; - y = js_tonumber(J, 1); - if (y < 100) - y += 1900; - m = js_tonumber(J, 2); - d = js_optnumber(J, 3, 1); - H = js_optnumber(J, 4, 0); - M = js_optnumber(J, 5, 0); - S = js_optnumber(J, 6, 0); - ms = js_optnumber(J, 7, 0); - t = MakeDate(MakeDay(y, m, d), MakeTime(H, M, S, ms)); - t = TimeClip(t); - js_pushnumber(J, t); +static int DayWithinYear(double t) +{ + return Day(t) - DayFromYear(YearFromTime(t)); } -static void D_now(js_State *J) { js_pushnumber(J, Now()); } +static int MonthFromTime(double t) +{ + int day = DayWithinYear(t); + int leap = InLeapYear(t); + if (day < 31) return 0; + if (day < 59 + leap) return 1; + if (day < 90 + leap) return 2; + if (day < 120 + leap) return 3; + if (day < 151 + leap) return 4; + if (day < 181 + leap) return 5; + if (day < 212 + leap) return 6; + if (day < 243 + leap) return 7; + if (day < 273 + leap) return 8; + if (day < 304 + leap) return 9; + if (day < 334 + leap) return 10; + return 11; +} -static void jsB_Date(js_State *J) { - char buf[64]; - js_pushstring(J, fmtdatetime(buf, LocalTime(Now()), LocalTZA())); +static int DateFromTime(double t) +{ + int day = DayWithinYear(t); + int leap = InLeapYear(t); + switch (MonthFromTime(t)) { + case 0: return day + 1; + case 1: return day - 30; + case 2: return day - 58 - leap; + case 3: return day - 89 - leap; + case 4: return day - 119 - leap; + case 5: return day - 150 - leap; + case 6: return day - 180 - leap; + case 7: return day - 211 - leap; + case 8: return day - 242 - leap; + case 9: return day - 272 - leap; + case 10: return day - 303 - leap; + default : return day - 333 - leap; + } } -static void jsB_new_Date(js_State *J) { - int top = js_gettop(J); - js_Object *obj; - double t; +static int WeekDay(double t) +{ + return pmod(Day(t) + 4, 7); +} - if (top == 1) - t = Now(); - else if (top == 2) { - js_toprimitive(J, 1, JS_HNONE); - if (js_isstring(J, 1)) - t = parseDateTime(js_tostring(J, 1)); - else - t = TimeClip(js_tonumber(J, 1)); - } else { - double y, m, d, H, M, S, ms; - y = js_tonumber(J, 1); - if (y < 100) - y += 1900; - m = js_tonumber(J, 2); - d = js_optnumber(J, 3, 1); - H = js_optnumber(J, 4, 0); - M = js_optnumber(J, 5, 0); - S = js_optnumber(J, 6, 0); - ms = js_optnumber(J, 7, 0); - t = MakeDate(MakeDay(y, m, d), MakeTime(H, M, S, ms)); - t = TimeClip(UTC(t)); - } +static double LocalTime(double utc) +{ + return utc + LocalTZA() + DaylightSavingTA(utc); +} - obj = jsV_newobject(J, JS_CDATE, J->Date_prototype); - obj->u.number = t; +static double UTC(double loc) +{ + return loc - LocalTZA() - DaylightSavingTA(loc - LocalTZA()); +} - js_pushobject(J, obj); +static int HourFromTime(double t) +{ + return pmod(floor(t / msPerHour), HoursPerDay); } -static void Dp_valueOf(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, t); +static int MinFromTime(double t) +{ + return pmod(floor(t / msPerMinute), MinutesPerHour); +} + +static int SecFromTime(double t) +{ + return pmod(floor(t / msPerSecond), SecondsPerMinute); +} + +static int msFromTime(double t) +{ + return pmod(t, msPerSecond); +} + +static double MakeTime(double hour, double min, double sec, double ms) +{ + return ((hour * MinutesPerHour + min) * SecondsPerMinute + sec) * msPerSecond + ms; +} + +static double MakeDay(double y, double m, double date) +{ + /* + * The following array contains the day of year for the first day of + * each month, where index 0 is January, and day 0 is January 1. + */ + static const double firstDayOfMonth[2][12] = { + {0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334}, + {0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335} + }; + + double yd, md; + int im; + + y += floor(m / 12); + m = pmod(m, 12); + + im = (int)m; + if (im < 0 || im >= 12) + return NAN; + + yd = floor(TimeFromYear(y) / msPerDay); + md = firstDayOfMonth[InLeapYear(y)][im]; + + return yd + md + date - 1; +} + +static double MakeDate(double day, double time) +{ + return day * msPerDay + time; +} + +static double TimeClip(double t) +{ + if (!isfinite(t)) + return NAN; + if (fabs(t) > 8.64e15) + return NAN; + return t < 0 ? -floor(-t) : floor(t); +} + +static int toint(const char **sp, int w, int *v) +{ + const char *s = *sp; + *v = 0; + while (w--) { + if (*s < '0' || *s > '9') + return 0; + *v = *v * 10 + (*s++ - '0'); + } + *sp = s; + return 1; +} + +static double parseDateTime(const char *s) +{ + int y = 1970, m = 1, d = 1, H = 0, M = 0, S = 0, ms = 0; + int tza = 0; + double t; + + /* Parse ISO 8601 formatted date and time: */ + /* YYYY("-"MM("-"DD)?)?("T"HH":"mm(":"ss("."sss)?)?("Z"|[+-]HH(":"mm)?)?)? */ + + if (!toint(&s, 4, &y)) return NAN; + if (*s == '-') { + s += 1; + if (!toint(&s, 2, &m)) return NAN; + if (*s == '-') { + s += 1; + if (!toint(&s, 2, &d)) return NAN; + } + } + + if (*s == 'T') { + s += 1; + if (!toint(&s, 2, &H)) return NAN; + if (*s != ':') return NAN; + s += 1; + if (!toint(&s, 2, &M)) return NAN; + if (*s == ':') { + s += 1; + if (!toint(&s, 2, &S)) return NAN; + if (*s == '.') { + s += 1; + if (!toint(&s, 3, &ms)) return NAN; + } + } + if (*s == 'Z') { + s += 1; + tza = 0; + } else if (*s == '+' || *s == '-') { + int tzh = 0, tzm = 0; + int tzs = *s == '+' ? 1 : -1; + s += 1; + if (!toint(&s, 2, &tzh)) return NAN; + if (*s == ':') { + s += 1; + if (!toint(&s, 2, &tzm)) return NAN; + } + if (tzh > 23 || tzm > 59) return NAN; + tza = tzs * (tzh * msPerHour + tzm * msPerMinute); + } else { + tza = LocalTZA(); + } + } + + if (*s) return NAN; + + if (m < 1 || m > 12) return NAN; + if (d < 1 || d > 31) return NAN; + if (H < 0 || H > 24) return NAN; + if (M < 0 || M > 59) return NAN; + if (S < 0 || S > 59) return NAN; + if (ms < 0 || ms > 999) return NAN; + if (H == 24 && (M != 0 || S != 0 || ms != 0)) return NAN; + + /* TODO: DaylightSavingTA on local times */ + t = MakeDate(MakeDay(y, m-1, d), MakeTime(H, M, S, ms)); + return t - tza; } -static void Dp_toString(js_State *J) { - char buf[64]; - double t = js_todate(J, 0); - js_pushstring(J, fmtdatetime(buf, LocalTime(t), LocalTZA())); +/* date formatting */ + +static char *fmtdate(char *buf, double t) +{ + int y = YearFromTime(t); + int m = MonthFromTime(t); + int d = DateFromTime(t); + if (!isfinite(t)) + return "Invalid Date"; + sprintf(buf, "%04d-%02d-%02d", y, m+1, d); + return buf; +} + +static char *fmttime(char *buf, double t, double tza) +{ + int H = HourFromTime(t); + int M = MinFromTime(t); + int S = SecFromTime(t); + int ms = msFromTime(t); + int tzh = HourFromTime(fabs(tza)); + int tzm = MinFromTime(fabs(tza)); + if (!isfinite(t)) + return "Invalid Date"; + if (tza == 0) + sprintf(buf, "%02d:%02d:%02d.%03dZ", H, M, S, ms); + else if (tza < 0) + sprintf(buf, "%02d:%02d:%02d.%03d-%02d:%02d", H, M, S, ms, tzh, tzm); + else + sprintf(buf, "%02d:%02d:%02d.%03d+%02d:%02d", H, M, S, ms, tzh, tzm); + return buf; +} + +static char *fmtdatetime(char *buf, double t, double tza) +{ + char dbuf[20], tbuf[20]; + if (!isfinite(t)) + return "Invalid Date"; + fmtdate(dbuf, t); + fmttime(tbuf, t, tza); + sprintf(buf, "%sT%s", dbuf, tbuf); + return buf; } -static void Dp_toDateString(js_State *J) { - char buf[64]; - double t = js_todate(J, 0); - js_pushstring(J, fmtdate(buf, LocalTime(t))); +/* Date functions */ + +static double js_todate(js_State *J, int idx) +{ + js_Object *self = js_toobject(J, idx); + if (self->type != JS_CDATE) + js_typeerror(J, "not a date"); + return self->u.number; +} + +static void js_setdate(js_State *J, int idx, double t) +{ + js_Object *self = js_toobject(J, idx); + if (self->type != JS_CDATE) + js_typeerror(J, "not a date"); + self->u.number = TimeClip(t); + js_pushnumber(J, self->u.number); +} + +static void D_parse(js_State *J) +{ + double t = parseDateTime(js_tostring(J, 1)); + js_pushnumber(J, t); +} + +static void D_UTC(js_State *J) +{ + double y, m, d, H, M, S, ms, t; + y = js_tonumber(J, 1); + if (y < 100) y += 1900; + m = js_tonumber(J, 2); + d = js_optnumber(J, 3, 1); + H = js_optnumber(J, 4, 0); + M = js_optnumber(J, 5, 0); + S = js_optnumber(J, 6, 0); + ms = js_optnumber(J, 7, 0); + t = MakeDate(MakeDay(y, m, d), MakeTime(H, M, S, ms)); + t = TimeClip(t); + js_pushnumber(J, t); +} + +static void D_now(js_State *J) +{ + js_pushnumber(J, Now()); +} + +static void jsB_Date(js_State *J) +{ + char buf[64]; + js_pushstring(J, fmtdatetime(buf, LocalTime(Now()), LocalTZA())); +} + +static void jsB_new_Date(js_State *J) +{ + int top = js_gettop(J); + js_Object *obj; + double t; + + if (top == 1) + t = Now(); + else if (top == 2) { + js_toprimitive(J, 1, JS_HNONE); + if (js_isstring(J, 1)) + t = parseDateTime(js_tostring(J, 1)); + else + t = TimeClip(js_tonumber(J, 1)); + } else { + double y, m, d, H, M, S, ms; + y = js_tonumber(J, 1); + if (y < 100) y += 1900; + m = js_tonumber(J, 2); + d = js_optnumber(J, 3, 1); + H = js_optnumber(J, 4, 0); + M = js_optnumber(J, 5, 0); + S = js_optnumber(J, 6, 0); + ms = js_optnumber(J, 7, 0); + t = MakeDate(MakeDay(y, m, d), MakeTime(H, M, S, ms)); + t = TimeClip(UTC(t)); + } + + obj = jsV_newobject(J, JS_CDATE, J->Date_prototype); + obj->u.number = t; + + js_pushobject(J, obj); } -static void Dp_toTimeString(js_State *J) { - char buf[64]; - double t = js_todate(J, 0); - js_pushstring(J, fmttime(buf, LocalTime(t), LocalTZA())); +static void Dp_valueOf(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, t); } -static void Dp_toUTCString(js_State *J) { - char buf[64]; - double t = js_todate(J, 0); - js_pushstring(J, fmtdatetime(buf, t, 0)); +static void Dp_toString(js_State *J) +{ + char buf[64]; + double t = js_todate(J, 0); + js_pushstring(J, fmtdatetime(buf, LocalTime(t), LocalTZA())); } -static void Dp_toISOString(js_State *J) { - char buf[64]; - double t = js_todate(J, 0); - if (!isfinite(t)) - js_rangeerror(J, "invalid date"); - js_pushstring(J, fmtdatetime(buf, t, 0)); +static void Dp_toDateString(js_State *J) +{ + char buf[64]; + double t = js_todate(J, 0); + js_pushstring(J, fmtdate(buf, LocalTime(t))); } -static void Dp_getFullYear(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, YearFromTime(LocalTime(t))); +static void Dp_toTimeString(js_State *J) +{ + char buf[64]; + double t = js_todate(J, 0); + js_pushstring(J, fmttime(buf, LocalTime(t), LocalTZA())); } -static void Dp_getMonth(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, MonthFromTime(LocalTime(t))); +static void Dp_toUTCString(js_State *J) +{ + char buf[64]; + double t = js_todate(J, 0); + js_pushstring(J, fmtdatetime(buf, t, 0)); } -static void Dp_getDate(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, DateFromTime(LocalTime(t))); +static void Dp_toISOString(js_State *J) +{ + char buf[64]; + double t = js_todate(J, 0); + if (!isfinite(t)) + js_rangeerror(J, "invalid date"); + js_pushstring(J, fmtdatetime(buf, t, 0)); } -static void Dp_getDay(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, WeekDay(LocalTime(t))); +static void Dp_getFullYear(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, YearFromTime(LocalTime(t))); } -static void Dp_getHours(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, HourFromTime(LocalTime(t))); +static void Dp_getMonth(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, MonthFromTime(LocalTime(t))); } -static void Dp_getMinutes(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, MinFromTime(LocalTime(t))); +static void Dp_getDate(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, DateFromTime(LocalTime(t))); } -static void Dp_getSeconds(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, SecFromTime(LocalTime(t))); +static void Dp_getDay(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, WeekDay(LocalTime(t))); } -static void Dp_getMilliseconds(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, msFromTime(LocalTime(t))); +static void Dp_getHours(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, HourFromTime(LocalTime(t))); } -static void Dp_getUTCFullYear(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, YearFromTime(t)); +static void Dp_getMinutes(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, MinFromTime(LocalTime(t))); } -static void Dp_getUTCMonth(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, MonthFromTime(t)); +static void Dp_getSeconds(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, SecFromTime(LocalTime(t))); } -static void Dp_getUTCDate(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, DateFromTime(t)); +static void Dp_getMilliseconds(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, msFromTime(LocalTime(t))); } -static void Dp_getUTCDay(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, WeekDay(t)); +static void Dp_getUTCFullYear(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, YearFromTime(t)); } -static void Dp_getUTCHours(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, HourFromTime(t)); +static void Dp_getUTCMonth(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, MonthFromTime(t)); } -static void Dp_getUTCMinutes(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, MinFromTime(t)); +static void Dp_getUTCDate(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, DateFromTime(t)); } -static void Dp_getUTCSeconds(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, SecFromTime(t)); +static void Dp_getUTCDay(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, WeekDay(t)); } -static void Dp_getUTCMilliseconds(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, msFromTime(t)); +static void Dp_getUTCHours(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, HourFromTime(t)); } -static void Dp_getTimezoneOffset(js_State *J) { - double t = js_todate(J, 0); - js_pushnumber(J, (t - LocalTime(t)) / msPerMinute); +static void Dp_getUTCMinutes(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, MinFromTime(t)); } -static void Dp_setTime(js_State *J) { js_setdate(J, 0, js_tonumber(J, 1)); } +static void Dp_getUTCSeconds(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, SecFromTime(t)); +} -static void Dp_setMilliseconds(js_State *J) { - double t = LocalTime(js_todate(J, 0)); - double h = HourFromTime(t); - double m = MinFromTime(t); - double s = SecFromTime(t); - double ms = js_tonumber(J, 1); - js_setdate(J, 0, UTC(MakeDate(Day(t), MakeTime(h, m, s, ms)))); +static void Dp_getUTCMilliseconds(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, msFromTime(t)); } -static void Dp_setSeconds(js_State *J) { - double t = LocalTime(js_todate(J, 0)); - double h = HourFromTime(t); - double m = MinFromTime(t); - double s = js_tonumber(J, 1); - double ms = js_optnumber(J, 2, msFromTime(t)); - js_setdate(J, 0, UTC(MakeDate(Day(t), MakeTime(h, m, s, ms)))); +static void Dp_getTimezoneOffset(js_State *J) +{ + double t = js_todate(J, 0); + js_pushnumber(J, (t - LocalTime(t)) / msPerMinute); } -static void Dp_setMinutes(js_State *J) { - double t = LocalTime(js_todate(J, 0)); - double h = HourFromTime(t); - double m = js_tonumber(J, 1); - double s = js_optnumber(J, 2, SecFromTime(t)); - double ms = js_optnumber(J, 3, msFromTime(t)); - js_setdate(J, 0, UTC(MakeDate(Day(t), MakeTime(h, m, s, ms)))); +static void Dp_setTime(js_State *J) +{ + js_setdate(J, 0, js_tonumber(J, 1)); } -static void Dp_setHours(js_State *J) { - double t = LocalTime(js_todate(J, 0)); - double h = js_tonumber(J, 1); - double m = js_optnumber(J, 2, MinFromTime(t)); - double s = js_optnumber(J, 3, SecFromTime(t)); - double ms = js_optnumber(J, 4, msFromTime(t)); - js_setdate(J, 0, UTC(MakeDate(Day(t), MakeTime(h, m, s, ms)))); +static void Dp_setMilliseconds(js_State *J) +{ + double t = LocalTime(js_todate(J, 0)); + double h = HourFromTime(t); + double m = MinFromTime(t); + double s = SecFromTime(t); + double ms = js_tonumber(J, 1); + js_setdate(J, 0, UTC(MakeDate(Day(t), MakeTime(h, m, s, ms)))); } -static void Dp_setDate(js_State *J) { - double t = LocalTime(js_todate(J, 0)); - double y = YearFromTime(t); - double m = MonthFromTime(t); - double d = js_tonumber(J, 1); - js_setdate(J, 0, UTC(MakeDate(MakeDay(y, m, d), TimeWithinDay(t)))); +static void Dp_setSeconds(js_State *J) +{ + double t = LocalTime(js_todate(J, 0)); + double h = HourFromTime(t); + double m = MinFromTime(t); + double s = js_tonumber(J, 1); + double ms = js_optnumber(J, 2, msFromTime(t)); + js_setdate(J, 0, UTC(MakeDate(Day(t), MakeTime(h, m, s, ms)))); } -static void Dp_setMonth(js_State *J) { - double t = LocalTime(js_todate(J, 0)); - double y = YearFromTime(t); - double m = js_tonumber(J, 1); - double d = js_optnumber(J, 3, DateFromTime(t)); - js_setdate(J, 0, UTC(MakeDate(MakeDay(y, m, d), TimeWithinDay(t)))); +static void Dp_setMinutes(js_State *J) +{ + double t = LocalTime(js_todate(J, 0)); + double h = HourFromTime(t); + double m = js_tonumber(J, 1); + double s = js_optnumber(J, 2, SecFromTime(t)); + double ms = js_optnumber(J, 3, msFromTime(t)); + js_setdate(J, 0, UTC(MakeDate(Day(t), MakeTime(h, m, s, ms)))); } -static void Dp_setFullYear(js_State *J) { - double t = LocalTime(js_todate(J, 0)); - double y = js_tonumber(J, 1); - double m = js_optnumber(J, 2, MonthFromTime(t)); - double d = js_optnumber(J, 3, DateFromTime(t)); - js_setdate(J, 0, UTC(MakeDate(MakeDay(y, m, d), TimeWithinDay(t)))); +static void Dp_setHours(js_State *J) +{ + double t = LocalTime(js_todate(J, 0)); + double h = js_tonumber(J, 1); + double m = js_optnumber(J, 2, MinFromTime(t)); + double s = js_optnumber(J, 3, SecFromTime(t)); + double ms = js_optnumber(J, 4, msFromTime(t)); + js_setdate(J, 0, UTC(MakeDate(Day(t), MakeTime(h, m, s, ms)))); } -static void Dp_setUTCMilliseconds(js_State *J) { - double t = js_todate(J, 0); - double h = HourFromTime(t); - double m = MinFromTime(t); - double s = SecFromTime(t); - double ms = js_tonumber(J, 1); - js_setdate(J, 0, MakeDate(Day(t), MakeTime(h, m, s, ms))); -} - -static void Dp_setUTCSeconds(js_State *J) { - double t = js_todate(J, 0); - double h = HourFromTime(t); - double m = MinFromTime(t); - double s = js_tonumber(J, 1); - double ms = js_optnumber(J, 2, msFromTime(t)); - js_setdate(J, 0, MakeDate(Day(t), MakeTime(h, m, s, ms))); -} - -static void Dp_setUTCMinutes(js_State *J) { - double t = js_todate(J, 0); - double h = HourFromTime(t); - double m = js_tonumber(J, 1); - double s = js_optnumber(J, 2, SecFromTime(t)); - double ms = js_optnumber(J, 3, msFromTime(t)); - js_setdate(J, 0, MakeDate(Day(t), MakeTime(h, m, s, ms))); -} - -static void Dp_setUTCHours(js_State *J) { - double t = js_todate(J, 0); - double h = js_tonumber(J, 1); - double m = js_optnumber(J, 2, HourFromTime(t)); - double s = js_optnumber(J, 3, SecFromTime(t)); - double ms = js_optnumber(J, 4, msFromTime(t)); - js_setdate(J, 0, MakeDate(Day(t), MakeTime(h, m, s, ms))); -} - -static void Dp_setUTCDate(js_State *J) { - double t = js_todate(J, 0); - double y = YearFromTime(t); - double m = MonthFromTime(t); - double d = js_tonumber(J, 1); - js_setdate(J, 0, MakeDate(MakeDay(y, m, d), TimeWithinDay(t))); -} - -static void Dp_setUTCMonth(js_State *J) { - double t = js_todate(J, 0); - double y = YearFromTime(t); - double m = js_tonumber(J, 1); - double d = js_optnumber(J, 3, DateFromTime(t)); - js_setdate(J, 0, MakeDate(MakeDay(y, m, d), TimeWithinDay(t))); -} - -static void Dp_setUTCFullYear(js_State *J) { - double t = js_todate(J, 0); - double y = js_tonumber(J, 1); - double m = js_optnumber(J, 2, MonthFromTime(t)); - double d = js_optnumber(J, 3, DateFromTime(t)); - js_setdate(J, 0, MakeDate(MakeDay(y, m, d), TimeWithinDay(t))); -} - -static void Dp_toJSON(js_State *J) { - js_copy(J, 0); - js_toprimitive(J, -1, JS_HNUMBER); - if (js_isnumber(J, -1) && !isfinite(js_tonumber(J, -1))) { - js_pushnull(J); - return; - } - js_pop(J, 1); - - js_getproperty(J, 0, "toISOString"); - if (!js_iscallable(J, -1)) - js_typeerror(J, "Date.prototype.toJSON: this.toISOString not a function"); - js_copy(J, 0); - js_call(J, 0); -} - -void jsB_initdate(js_State *J) { - J->Date_prototype->u.number = 0; - - js_pushobject(J, J->Date_prototype); - { - jsB_propf(J, "Date.prototype.valueOf", Dp_valueOf, 0); - jsB_propf(J, "Date.prototype.toString", Dp_toString, 0); - jsB_propf(J, "Date.prototype.toDateString", Dp_toDateString, 0); - jsB_propf(J, "Date.prototype.toTimeString", Dp_toTimeString, 0); - jsB_propf(J, "Date.prototype.toLocaleString", Dp_toString, 0); - jsB_propf(J, "Date.prototype.toLocaleDateString", Dp_toDateString, 0); - jsB_propf(J, "Date.prototype.toLocaleTimeString", Dp_toTimeString, 0); - jsB_propf(J, "Date.prototype.toUTCString", Dp_toUTCString, 0); - - jsB_propf(J, "Date.prototype.getTime", Dp_valueOf, 0); - jsB_propf(J, "Date.prototype.getFullYear", Dp_getFullYear, 0); - jsB_propf(J, "Date.prototype.getUTCFullYear", Dp_getUTCFullYear, 0); - jsB_propf(J, "Date.prototype.getMonth", Dp_getMonth, 0); - jsB_propf(J, "Date.prototype.getUTCMonth", Dp_getUTCMonth, 0); - jsB_propf(J, "Date.prototype.getDate", Dp_getDate, 0); - jsB_propf(J, "Date.prototype.getUTCDate", Dp_getUTCDate, 0); - jsB_propf(J, "Date.prototype.getDay", Dp_getDay, 0); - jsB_propf(J, "Date.prototype.getUTCDay", Dp_getUTCDay, 0); - jsB_propf(J, "Date.prototype.getHours", Dp_getHours, 0); - jsB_propf(J, "Date.prototype.getUTCHours", Dp_getUTCHours, 0); - jsB_propf(J, "Date.prototype.getMinutes", Dp_getMinutes, 0); - jsB_propf(J, "Date.prototype.getUTCMinutes", Dp_getUTCMinutes, 0); - jsB_propf(J, "Date.prototype.getSeconds", Dp_getSeconds, 0); - jsB_propf(J, "Date.prototype.getUTCSeconds", Dp_getUTCSeconds, 0); - jsB_propf(J, "Date.prototype.getMilliseconds", Dp_getMilliseconds, 0); - jsB_propf(J, "Date.prototype.getUTCMilliseconds", Dp_getUTCMilliseconds, 0); - jsB_propf(J, "Date.prototype.getTimezoneOffset", Dp_getTimezoneOffset, 0); - - jsB_propf(J, "Date.prototype.setTime", Dp_setTime, 1); - jsB_propf(J, "Date.prototype.setMilliseconds", Dp_setMilliseconds, 1); - jsB_propf(J, "Date.prototype.setUTCMilliseconds", Dp_setUTCMilliseconds, 1); - jsB_propf(J, "Date.prototype.setSeconds", Dp_setSeconds, 2); - jsB_propf(J, "Date.prototype.setUTCSeconds", Dp_setUTCSeconds, 2); - jsB_propf(J, "Date.prototype.setMinutes", Dp_setMinutes, 3); - jsB_propf(J, "Date.prototype.setUTCMinutes", Dp_setUTCMinutes, 3); - jsB_propf(J, "Date.prototype.setHours", Dp_setHours, 4); - jsB_propf(J, "Date.prototype.setUTCHours", Dp_setUTCHours, 4); - jsB_propf(J, "Date.prototype.setDate", Dp_setDate, 1); - jsB_propf(J, "Date.prototype.setUTCDate", Dp_setUTCDate, 1); - jsB_propf(J, "Date.prototype.setMonth", Dp_setMonth, 2); - jsB_propf(J, "Date.prototype.setUTCMonth", Dp_setUTCMonth, 2); - jsB_propf(J, "Date.prototype.setFullYear", Dp_setFullYear, 3); - jsB_propf(J, "Date.prototype.setUTCFullYear", Dp_setUTCFullYear, 3); - - /* ES5 */ - jsB_propf(J, "Date.prototype.toISOString", Dp_toISOString, 0); - jsB_propf(J, "Date.prototype.toJSON", Dp_toJSON, 1); - } - js_newcconstructor(J, jsB_Date, jsB_new_Date, "Date", 0); /* 1 */ - { - jsB_propf(J, "Date.parse", D_parse, 1); - jsB_propf(J, "Date.UTC", D_UTC, 7); - - /* ES5 */ - jsB_propf(J, "Date.now", D_now, 0); - } - js_defglobal(J, "Date", JS_DONTENUM); +static void Dp_setDate(js_State *J) +{ + double t = LocalTime(js_todate(J, 0)); + double y = YearFromTime(t); + double m = MonthFromTime(t); + double d = js_tonumber(J, 1); + js_setdate(J, 0, UTC(MakeDate(MakeDay(y, m, d), TimeWithinDay(t)))); +} + +static void Dp_setMonth(js_State *J) +{ + double t = LocalTime(js_todate(J, 0)); + double y = YearFromTime(t); + double m = js_tonumber(J, 1); + double d = js_optnumber(J, 3, DateFromTime(t)); + js_setdate(J, 0, UTC(MakeDate(MakeDay(y, m, d), TimeWithinDay(t)))); +} + +static void Dp_setFullYear(js_State *J) +{ + double t = LocalTime(js_todate(J, 0)); + double y = js_tonumber(J, 1); + double m = js_optnumber(J, 2, MonthFromTime(t)); + double d = js_optnumber(J, 3, DateFromTime(t)); + js_setdate(J, 0, UTC(MakeDate(MakeDay(y, m, d), TimeWithinDay(t)))); +} + +static void Dp_setUTCMilliseconds(js_State *J) +{ + double t = js_todate(J, 0); + double h = HourFromTime(t); + double m = MinFromTime(t); + double s = SecFromTime(t); + double ms = js_tonumber(J, 1); + js_setdate(J, 0, MakeDate(Day(t), MakeTime(h, m, s, ms))); +} + +static void Dp_setUTCSeconds(js_State *J) +{ + double t = js_todate(J, 0); + double h = HourFromTime(t); + double m = MinFromTime(t); + double s = js_tonumber(J, 1); + double ms = js_optnumber(J, 2, msFromTime(t)); + js_setdate(J, 0, MakeDate(Day(t), MakeTime(h, m, s, ms))); +} + +static void Dp_setUTCMinutes(js_State *J) +{ + double t = js_todate(J, 0); + double h = HourFromTime(t); + double m = js_tonumber(J, 1); + double s = js_optnumber(J, 2, SecFromTime(t)); + double ms = js_optnumber(J, 3, msFromTime(t)); + js_setdate(J, 0, MakeDate(Day(t), MakeTime(h, m, s, ms))); +} + +static void Dp_setUTCHours(js_State *J) +{ + double t = js_todate(J, 0); + double h = js_tonumber(J, 1); + double m = js_optnumber(J, 2, HourFromTime(t)); + double s = js_optnumber(J, 3, SecFromTime(t)); + double ms = js_optnumber(J, 4, msFromTime(t)); + js_setdate(J, 0, MakeDate(Day(t), MakeTime(h, m, s, ms))); +} + +static void Dp_setUTCDate(js_State *J) +{ + double t = js_todate(J, 0); + double y = YearFromTime(t); + double m = MonthFromTime(t); + double d = js_tonumber(J, 1); + js_setdate(J, 0, MakeDate(MakeDay(y, m, d), TimeWithinDay(t))); +} + +static void Dp_setUTCMonth(js_State *J) +{ + double t = js_todate(J, 0); + double y = YearFromTime(t); + double m = js_tonumber(J, 1); + double d = js_optnumber(J, 3, DateFromTime(t)); + js_setdate(J, 0, MakeDate(MakeDay(y, m, d), TimeWithinDay(t))); +} + +static void Dp_setUTCFullYear(js_State *J) +{ + double t = js_todate(J, 0); + double y = js_tonumber(J, 1); + double m = js_optnumber(J, 2, MonthFromTime(t)); + double d = js_optnumber(J, 3, DateFromTime(t)); + js_setdate(J, 0, MakeDate(MakeDay(y, m, d), TimeWithinDay(t))); +} + +static void Dp_toJSON(js_State *J) +{ + js_copy(J, 0); + js_toprimitive(J, -1, JS_HNUMBER); + if (js_isnumber(J, -1) && !isfinite(js_tonumber(J, -1))) { + js_pushnull(J); + return; + } + js_pop(J, 1); + + js_getproperty(J, 0, "toISOString"); + if (!js_iscallable(J, -1)) + js_typeerror(J, "this.toISOString is not a function"); + js_copy(J, 0); + js_call(J, 0); +} + +void jsB_initdate(js_State *J) +{ + J->Date_prototype->u.number = 0; + + js_pushobject(J, J->Date_prototype); + { + jsB_propf(J, "Date.prototype.valueOf", Dp_valueOf, 0); + jsB_propf(J, "Date.prototype.toString", Dp_toString, 0); + jsB_propf(J, "Date.prototype.toDateString", Dp_toDateString, 0); + jsB_propf(J, "Date.prototype.toTimeString", Dp_toTimeString, 0); + jsB_propf(J, "Date.prototype.toLocaleString", Dp_toString, 0); + jsB_propf(J, "Date.prototype.toLocaleDateString", Dp_toDateString, 0); + jsB_propf(J, "Date.prototype.toLocaleTimeString", Dp_toTimeString, 0); + jsB_propf(J, "Date.prototype.toUTCString", Dp_toUTCString, 0); + + jsB_propf(J, "Date.prototype.getTime", Dp_valueOf, 0); + jsB_propf(J, "Date.prototype.getFullYear", Dp_getFullYear, 0); + jsB_propf(J, "Date.prototype.getUTCFullYear", Dp_getUTCFullYear, 0); + jsB_propf(J, "Date.prototype.getMonth", Dp_getMonth, 0); + jsB_propf(J, "Date.prototype.getUTCMonth", Dp_getUTCMonth, 0); + jsB_propf(J, "Date.prototype.getDate", Dp_getDate, 0); + jsB_propf(J, "Date.prototype.getUTCDate", Dp_getUTCDate, 0); + jsB_propf(J, "Date.prototype.getDay", Dp_getDay, 0); + jsB_propf(J, "Date.prototype.getUTCDay", Dp_getUTCDay, 0); + jsB_propf(J, "Date.prototype.getHours", Dp_getHours, 0); + jsB_propf(J, "Date.prototype.getUTCHours", Dp_getUTCHours, 0); + jsB_propf(J, "Date.prototype.getMinutes", Dp_getMinutes, 0); + jsB_propf(J, "Date.prototype.getUTCMinutes", Dp_getUTCMinutes, 0); + jsB_propf(J, "Date.prototype.getSeconds", Dp_getSeconds, 0); + jsB_propf(J, "Date.prototype.getUTCSeconds", Dp_getUTCSeconds, 0); + jsB_propf(J, "Date.prototype.getMilliseconds", Dp_getMilliseconds, 0); + jsB_propf(J, "Date.prototype.getUTCMilliseconds", Dp_getUTCMilliseconds, 0); + jsB_propf(J, "Date.prototype.getTimezoneOffset", Dp_getTimezoneOffset, 0); + + jsB_propf(J, "Date.prototype.setTime", Dp_setTime, 1); + jsB_propf(J, "Date.prototype.setMilliseconds", Dp_setMilliseconds, 1); + jsB_propf(J, "Date.prototype.setUTCMilliseconds", Dp_setUTCMilliseconds, 1); + jsB_propf(J, "Date.prototype.setSeconds", Dp_setSeconds, 2); + jsB_propf(J, "Date.prototype.setUTCSeconds", Dp_setUTCSeconds, 2); + jsB_propf(J, "Date.prototype.setMinutes", Dp_setMinutes, 3); + jsB_propf(J, "Date.prototype.setUTCMinutes", Dp_setUTCMinutes, 3); + jsB_propf(J, "Date.prototype.setHours", Dp_setHours, 4); + jsB_propf(J, "Date.prototype.setUTCHours", Dp_setUTCHours, 4); + jsB_propf(J, "Date.prototype.setDate", Dp_setDate, 1); + jsB_propf(J, "Date.prototype.setUTCDate", Dp_setUTCDate, 1); + jsB_propf(J, "Date.prototype.setMonth", Dp_setMonth, 2); + jsB_propf(J, "Date.prototype.setUTCMonth", Dp_setUTCMonth, 2); + jsB_propf(J, "Date.prototype.setFullYear", Dp_setFullYear, 3); + jsB_propf(J, "Date.prototype.setUTCFullYear", Dp_setUTCFullYear, 3); + + /* ES5 */ + jsB_propf(J, "Date.prototype.toISOString", Dp_toISOString, 0); + jsB_propf(J, "Date.prototype.toJSON", Dp_toJSON, 1); + } + js_newcconstructor(J, jsB_Date, jsB_new_Date, "Date", 0); /* 1 */ + { + jsB_propf(J, "Date.parse", D_parse, 1); + jsB_propf(J, "Date.UTC", D_UTC, 7); + + /* ES5 */ + jsB_propf(J, "Date.now", D_now, 0); + } + js_defglobal(J, "Date", JS_DONTENUM); } diff --git a/mujs-1.0.5/jsdump.c b/mujs-1.0.5/jsdump.c index d3f089dd..560216d1 100644 --- a/mujs-1.0.5/jsdump.c +++ b/mujs-1.0.5/jsdump.c @@ -143,6 +143,11 @@ static void ps(const char *s) fputs(s, stdout); } +static void pn(int n) +{ + printf("%d", n); +} + static void in(int d) { if (minify < 1) @@ -702,6 +707,8 @@ static void snode(int d, js_Ast *node) pc('('); ps(astname[node->type]); + pc(':'); + pn(node->line); switch (node->type) { default: break; case AST_IDENTIFIER: pc(' '); ps(node->string); break; @@ -784,12 +791,16 @@ void jsC_dumpfunction(js_State *J, js_Function *F) printf("{\n"); while (p < end) { + int ln = *p++; int c = *p++; - printf("% 5d: ", (int)(p - F->code) - 1); + printf("%5d(%3d): ", (int)(p - F->code) - 2, ln); ps(opname[c]); switch (c) { + case OP_INTEGER: + printf(" %d", (*p++) - 32768); + break; case OP_NUMBER: printf(" %.9g", F->numtab[*p++]); break; @@ -803,8 +814,6 @@ void jsC_dumpfunction(js_State *J, js_Function *F) p += 2; break; - case OP_INITVAR: - case OP_DEFVAR: case OP_GETVAR: case OP_HASVAR: case OP_SETVAR: @@ -817,14 +826,13 @@ void jsC_dumpfunction(js_State *J, js_Function *F) ps(F->strtab[*p++]); break; - case OP_LINE: - case OP_CLOSURE: - case OP_INITLOCAL: case OP_GETLOCAL: case OP_SETLOCAL: case OP_DELLOCAL: - case OP_NUMBER_POS: - case OP_NUMBER_NEG: + printf(" %s", F->vartab[*p++ - 1]); + break; + + case OP_CLOSURE: case OP_CALL: case OP_NEW: case OP_JUMP: @@ -882,6 +890,7 @@ void js_dumpvalue(js_State *J, js_Value v) case JS_CNUMBER: printf("[Number %g]", v.u.object->u.number); break; case JS_CSTRING: printf("[String'%s']", v.u.object->u.s.string); break; case JS_CERROR: printf("[Error]"); break; + case JS_CARGUMENTS: printf("[Arguments %p]", (void*)v.u.object); break; case JS_CITERATOR: printf("[Iterator %p]", (void*)v.u.object); break; case JS_CUSERDATA: printf("[Userdata %s %p]", v.u.object->u.user.tag, v.u.object->u.user.data); diff --git a/mujs-1.0.5/jsfunction.c b/mujs-1.0.5/jsfunction.c index bdaaa933..f03e90c3 100644 --- a/mujs-1.0.5/jsfunction.c +++ b/mujs-1.0.5/jsfunction.c @@ -71,7 +71,7 @@ static void Fp_toString(js_State *J) if (i > 0) js_putc(J, &sb, ','); js_puts(J, &sb, F->vartab[i]); } - js_puts(J, &sb, ") { ... }"); + js_puts(J, &sb, ") { [byte code] }"); js_putc(J, &sb, 0); js_pushstring(J, sb->s); @@ -85,14 +85,14 @@ static void Fp_toString(js_State *J) js_puts(J, &sb, "function "); js_puts(J, &sb, self->u.c.name); - js_puts(J, &sb, "() { ... }"); + js_puts(J, &sb, "() { [native code] }"); js_putc(J, &sb, 0); js_pushstring(J, sb->s); js_endtry(J); js_free(J, sb); } else { - js_pushliteral(J, "function () { ... }"); + js_pushliteral(J, "function () { }"); } } diff --git a/mujs-1.0.5/jsi.h b/mujs-1.0.5/jsi.h index 20e0df66..d13a9fdd 100644 --- a/mujs-1.0.5/jsi.h +++ b/mujs-1.0.5/jsi.h @@ -93,6 +93,7 @@ double js_strtod(const char *as, char **aas); /* Private stack functions */ +void js_newarguments(js_State *J); void js_newfunction(js_State *J, js_Function *function, js_Environment *scope); void js_newscript(js_State *J, js_Function *function, js_Environment *scope); void js_loadeval(js_State *J, const char *filename, const char *source); @@ -179,7 +180,6 @@ struct js_State /* parser state */ int astdepth; - int astline; int lookahead; const char *text; double number; @@ -203,6 +203,8 @@ struct js_State js_Object *TypeError_prototype; js_Object *URIError_prototype; + unsigned int seed; /* Math.random seed */ + int nextref; /* for js_ref use */ js_Object *R; /* registry of hidden values */ js_Object *G; /* the global object */ diff --git a/mujs-1.0.5/jslex.c b/mujs-1.0.5/jslex.c index 86637e5b..36643cbd 100644 --- a/mujs-1.0.5/jslex.c +++ b/mujs-1.0.5/jslex.c @@ -117,9 +117,15 @@ int jsY_isnewline(int c) return c == 0xA || c == 0xD || c == 0x2028 || c == 0x2029; } +#ifndef isalpha #define isalpha(c) ((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z')) +#endif +#ifndef isdigit #define isdigit(c) (c >= '0' && c <= '9') +#endif +#ifndef ishex #define ishex(c) ((c >= 'a' && c <= 'f') || (c >= 'A' && c <= 'F')) +#endif static int jsY_isidentifierstart(int c) { @@ -739,8 +745,8 @@ static int lexjsonnumber(js_State *J) jsY_next(J); else jsY_error(J, "unexpected non-digit"); - if (jsY_accept(J, '.')) - { + + if (jsY_accept(J, '.')) { if (isdigit(J->lexchar)) while (isdigit(J->lexchar)) jsY_next(J); @@ -780,6 +786,7 @@ static int lexjsonescape(js_State *J) break; case '"': textpush(J, '"'); jsY_next(J); break; case '\\': textpush(J, '\\'); jsY_next(J); break; + case '/': textpush(J, '/'); jsY_next(J); break; case 'b': textpush(J, '\b'); jsY_next(J); break; case 'f': textpush(J, '\f'); jsY_next(J); break; case 'n': textpush(J, '\n'); jsY_next(J); break; diff --git a/mujs-1.0.5/jsmath.c b/mujs-1.0.5/jsmath.c index a4ea3a44..cbc66121 100644 --- a/mujs-1.0.5/jsmath.c +++ b/mujs-1.0.5/jsmath.c @@ -2,6 +2,34 @@ #include "jsvalue.h" #include "jsbuiltin.h" +#include + +#define JS_RAND_MAX (0x7fffffff) + +static unsigned int jsM_rand_temper(unsigned int x) +{ + x ^= x>>11; + x ^= x<<7 & 0x9D2C5680; + x ^= x<<15 & 0xEFC60000; + x ^= x>>18; + return x; +} + +static int jsM_rand_r(unsigned int *seed) +{ + return jsM_rand_temper(*seed = *seed * 1103515245 + 12345)/2; +} + +static double jsM_round(double x) +{ + if (isnan(x)) return x; + if (isinf(x)) return x; + if (x == 0) return x; + if (x > 0 && x < 0.5) return 0; + if (x < 0 && x >= -0.5) return -0; + return floor(x + 0.5); +} + static void Math_abs(js_State *J) { js_pushnumber(J, fabs(js_tonumber(J, 1))); @@ -66,23 +94,13 @@ static void Math_pow(js_State *J) static void Math_random(js_State *J) { - js_pushnumber(J, rand() / (RAND_MAX + 1.0)); -} - -static double do_round(double x) -{ - if (isnan(x)) return x; - if (isinf(x)) return x; - if (x == 0) return x; - if (x > 0 && x < 0.5) return 0; - if (x < 0 && x >= -0.5) return -0; - return floor(x + 0.5); + js_pushnumber(J, jsM_rand_r(&J->seed) / (JS_RAND_MAX + 1.0)); } static void Math_round(js_State *J) { double x = js_tonumber(J, 1); - js_pushnumber(J, do_round(x)); + js_pushnumber(J, jsM_round(x)); } static void Math_sin(js_State *J) @@ -138,6 +156,8 @@ static void Math_min(js_State *J) void jsB_initmath(js_State *J) { + J->seed = time(NULL); + js_pushobject(J, jsV_newobject(J, JS_CMATH, J->Object_prototype)); { jsB_propn(J, "E", 2.7182818284590452354); diff --git a/mujs-1.0.5/jsnumber.c b/mujs-1.0.5/jsnumber.c index 5915bd67..7050ff39 100644 --- a/mujs-1.0.5/jsnumber.c +++ b/mujs-1.0.5/jsnumber.c @@ -27,7 +27,7 @@ static void Np_valueOf(js_State *J) static void Np_toString(js_State *J) { - char buf[32]; + char buf[100]; js_Object *self = js_toobject(J, 0); int radix = js_isundefined(J, 1) ? 10 : js_tointeger(J, 1); if (self->type != JS_CNUMBER) @@ -42,7 +42,6 @@ static void Np_toString(js_State *J) /* lame number to string conversion for any radix from 2 to 36 */ { static const char digits[] = "0123456789abcdefghijklmnopqrstuvwxyz"; - char buf[100]; double number = self->u.number; int sign = self->u.number < 0; js_Buffer *sb = NULL; @@ -115,45 +114,63 @@ static void Np_toString(js_State *J) /* Customized ToString() on a number */ static void numtostr(js_State *J, const char *fmt, int w, double n) { - char buf[32], *e; - if (isnan(n)) js_pushliteral(J, "NaN"); - else if (isinf(n)) js_pushliteral(J, n < 0 ? "-Infinity" : "Infinity"); - else if (n == 0) js_pushliteral(J, "0"); - else { - if (w < 1) w = 1; - if (w > 17) w = 17; - sprintf(buf, fmt, w, n); - e = strchr(buf, 'e'); - if (e) { - int exp = atoi(e+1); - sprintf(e, "e%+d", exp); - } - js_pushstring(J, buf); + /* buf needs to fit printf("%.20f", 1e20) */ + char buf[50], *e; + sprintf(buf, fmt, w, n); + e = strchr(buf, 'e'); + if (e) { + int exp = atoi(e+1); + sprintf(e, "e%+d", exp); } + js_pushstring(J, buf); } static void Np_toFixed(js_State *J) { js_Object *self = js_toobject(J, 0); int width = js_tointeger(J, 1); + char buf[32]; + double x; if (self->type != JS_CNUMBER) js_typeerror(J, "not a number"); - numtostr(J, "%.*f", width, self->u.number); + if (width < 0) js_rangeerror(J, "precision %d out of range", width); + if (width > 20) js_rangeerror(J, "precision %d out of range", width); + x = self->u.number; + if (isnan(x) || isinf(x) || x <= -1e21 || x >= 1e21) + js_pushstring(J, jsV_numbertostring(J, buf, x)); + else + numtostr(J, "%.*f", width, x); } static void Np_toExponential(js_State *J) { js_Object *self = js_toobject(J, 0); int width = js_tointeger(J, 1); + char buf[32]; + double x; if (self->type != JS_CNUMBER) js_typeerror(J, "not a number"); - numtostr(J, "%.*e", width, self->u.number); + if (width < 0) js_rangeerror(J, "precision %d out of range", width); + if (width > 20) js_rangeerror(J, "precision %d out of range", width); + x = self->u.number; + if (isnan(x) || isinf(x)) + js_pushstring(J, jsV_numbertostring(J, buf, x)); + else + numtostr(J, "%.*e", width, self->u.number); } static void Np_toPrecision(js_State *J) { js_Object *self = js_toobject(J, 0); int width = js_tointeger(J, 1); + char buf[32]; + double x; if (self->type != JS_CNUMBER) js_typeerror(J, "not a number"); - numtostr(J, "%.*g", width, self->u.number); + if (width < 1) js_rangeerror(J, "precision %d out of range", width); + if (width > 21) js_rangeerror(J, "precision %d out of range", width); + x = self->u.number; + if (isnan(x) || isinf(x)) + js_pushstring(J, jsV_numbertostring(J, buf, x)); + else + numtostr(J, "%.*g", width, self->u.number); } void jsB_initnumber(js_State *J) diff --git a/mujs-1.0.5/jsobject.c b/mujs-1.0.5/jsobject.c index 32358748..27cdc96c 100644 --- a/mujs-1.0.5/jsobject.c +++ b/mujs-1.0.5/jsobject.c @@ -40,14 +40,15 @@ static void Op_toString(js_State *J) case JS_CDATE: js_pushliteral(J, "[object Date]"); break; case JS_CMATH: js_pushliteral(J, "[object Math]"); break; case JS_CJSON: js_pushliteral(J, "[object JSON]"); break; + case JS_CARGUMENTS: js_pushliteral(J, "[object Arguments]"); break; case JS_CITERATOR: js_pushliteral(J, "[Iterator]"); break; case JS_CUSERDATA: - js_pushliteral(J, "[object "); - js_pushliteral(J, self->u.user.tag); - js_concat(J); - js_pushliteral(J, "]"); - js_concat(J); - break; + js_pushliteral(J, "[object "); + js_pushliteral(J, self->u.user.tag); + js_concat(J); + js_pushliteral(J, "]"); + js_concat(J); + break; } } } diff --git a/mujs-1.0.5/jsparse.c b/mujs-1.0.5/jsparse.c index 1f460243..f91f491e 100644 --- a/mujs-1.0.5/jsparse.c +++ b/mujs-1.0.5/jsparse.c @@ -2,18 +2,18 @@ #include "jslex.h" #include "jsparse.h" -#define LIST(h) jsP_newnode(J, AST_LIST, h, 0, 0, 0) +#define LIST(h) jsP_newnode(J, AST_LIST, 0, h, 0, 0, 0) -#define EXP0(x) jsP_newnode(J, EXP_ ## x, 0, 0, 0, 0) -#define EXP1(x,a) jsP_newnode(J, EXP_ ## x, a, 0, 0, 0) -#define EXP2(x,a,b) jsP_newnode(J, EXP_ ## x, a, b, 0, 0) -#define EXP3(x,a,b,c) jsP_newnode(J, EXP_ ## x, a, b, c, 0) +#define EXP0(x) jsP_newnode(J, EXP_ ## x, line, 0, 0, 0, 0) +#define EXP1(x,a) jsP_newnode(J, EXP_ ## x, line, a, 0, 0, 0) +#define EXP2(x,a,b) jsP_newnode(J, EXP_ ## x, line, a, b, 0, 0) +#define EXP3(x,a,b,c) jsP_newnode(J, EXP_ ## x, line, a, b, c, 0) -#define STM0(x) jsP_newnode(J, STM_ ## x, 0, 0, 0, 0) -#define STM1(x,a) jsP_newnode(J, STM_ ## x, a, 0, 0, 0) -#define STM2(x,a,b) jsP_newnode(J, STM_ ## x, a, b, 0, 0) -#define STM3(x,a,b,c) jsP_newnode(J, STM_ ## x, a, b, c, 0) -#define STM4(x,a,b,c,d) jsP_newnode(J, STM_ ## x, a, b, c, d) +#define STM0(x) jsP_newnode(J, STM_ ## x, line, 0, 0, 0, 0) +#define STM1(x,a) jsP_newnode(J, STM_ ## x, line, a, 0, 0, 0) +#define STM2(x,a,b) jsP_newnode(J, STM_ ## x, line, a, b, 0, 0) +#define STM3(x,a,b,c) jsP_newnode(J, STM_ ## x, line, a, b, c, 0) +#define STM4(x,a,b,c,d) jsP_newnode(J, STM_ ## x, line, a, b, c, d) static js_Ast *expression(js_State *J, int notin); static js_Ast *assignment(js_State *J, int notin); @@ -59,12 +59,12 @@ static void jsP_warning(js_State *J, const char *fmt, ...) js_report(J, buf); } -static js_Ast *jsP_newnode(js_State *J, enum js_AstType type, js_Ast *a, js_Ast *b, js_Ast *c, js_Ast *d) +static js_Ast *jsP_newnode(js_State *J, enum js_AstType type, int line, js_Ast *a, js_Ast *b, js_Ast *c, js_Ast *d) { js_Ast *node = js_malloc(J, sizeof *node); node->type = type; - node->line = J->astline; + node->line = line; node->a = a; node->b = b; node->c = c; @@ -100,14 +100,14 @@ static js_Ast *jsP_list(js_Ast *head) static js_Ast *jsP_newstrnode(js_State *J, enum js_AstType type, const char *s) { - js_Ast *node = jsP_newnode(J, type, 0, 0, 0, 0); + js_Ast *node = jsP_newnode(J, type, J->lexline, 0, 0, 0, 0); node->string = s; return node; } static js_Ast *jsP_newnumnode(js_State *J, enum js_AstType type, double n) { - js_Ast *node = jsP_newnode(J, type, 0, 0, 0, 0); + js_Ast *node = jsP_newnode(J, type, J->lexline, 0, 0, 0, 0); node->number = n; return node; } @@ -138,7 +138,6 @@ void jsP_freeparse(js_State *J) static void jsP_next(js_State *J) { J->lookahead = jsY_lex(J); - J->astline = J->lexline; } #define jsP_accept(J,x) (J->lookahead == x ? (jsP_next(J), 1) : 0) @@ -188,6 +187,7 @@ static js_Ast *identifiername(js_State *J) static js_Ast *arrayelement(js_State *J) { + int line = J->lexline; if (J->lookahead == ',') return EXP0(UNDEF); return assignment(J, 0); @@ -224,6 +224,7 @@ static js_Ast *propname(js_State *J) static js_Ast *propassign(js_State *J) { js_Ast *name, *value, *arg, *body; + int line = J->lexline; name = propname(J); @@ -278,7 +279,7 @@ static js_Ast *parameters(js_State *J) return jsP_list(head); } -static js_Ast *fundec(js_State *J) +static js_Ast *fundec(js_State *J, int line) { js_Ast *a, *b, *c; a = identifier(J); @@ -286,10 +287,10 @@ static js_Ast *fundec(js_State *J) b = parameters(J); jsP_expect(J, ')'); c = funbody(J); - return jsP_newnode(J, AST_FUNDEC, a, b, c, 0); + return jsP_newnode(J, AST_FUNDEC, line, a, b, c, 0); } -static js_Ast *funstm(js_State *J) +static js_Ast *funstm(js_State *J, int line) { js_Ast *a, *b, *c; a = identifier(J); @@ -301,7 +302,7 @@ static js_Ast *funstm(js_State *J) return STM1(VAR, LIST(EXP2(VAR, a, EXP3(FUN, a, b, c)))); } -static js_Ast *funexp(js_State *J) +static js_Ast *funexp(js_State *J, int line) { js_Ast *a, *b, *c; a = identifieropt(J); @@ -317,6 +318,7 @@ static js_Ast *funexp(js_State *J) static js_Ast *primary(js_State *J) { js_Ast *a; + int line = J->lexline; if (J->lookahead == TK_IDENTIFIER) { a = jsP_newstrnode(J, EXP_IDENTIFIER, J->text); @@ -344,9 +346,21 @@ static js_Ast *primary(js_State *J) if (jsP_accept(J, TK_NULL)) return EXP0(NULL); if (jsP_accept(J, TK_TRUE)) return EXP0(TRUE); if (jsP_accept(J, TK_FALSE)) return EXP0(FALSE); - if (jsP_accept(J, '{')) { a = EXP1(OBJECT, objectliteral(J)); jsP_expect(J, '}'); return a; } - if (jsP_accept(J, '[')) { a = EXP1(ARRAY, arrayliteral(J)); jsP_expect(J, ']'); return a; } - if (jsP_accept(J, '(')) { a = expression(J, 0); jsP_expect(J, ')'); return a; } + if (jsP_accept(J, '{')) { + a = EXP1(OBJECT, objectliteral(J)); + jsP_expect(J, '}'); + return a; + } + if (jsP_accept(J, '[')) { + a = EXP1(ARRAY, arrayliteral(J)); + jsP_expect(J, ']'); + return a; + } + if (jsP_accept(J, '(')) { + a = expression(J, 0); + jsP_expect(J, ')'); + return a; + } jsP_error(J, "unexpected token in expression: %s", jsY_tokenstring(J->lookahead)); } @@ -366,6 +380,7 @@ static js_Ast *arguments(js_State *J) static js_Ast *newexp(js_State *J) { js_Ast *a, *b; + int line = J->lexline; if (jsP_accept(J, TK_NEW)) { a = memberexp(J); @@ -378,7 +393,7 @@ static js_Ast *newexp(js_State *J) } if (jsP_accept(J, TK_FUNCTION)) - return funexp(J); + return funexp(J, line); return primary(J); } @@ -386,9 +401,11 @@ static js_Ast *newexp(js_State *J) static js_Ast *memberexp(js_State *J) { js_Ast *a = newexp(J); + int line; SAVEREC(); loop: INCREC(); + line = J->lexline; if (jsP_accept(J, '.')) { a = EXP2(MEMBER, a, identifiername(J)); goto loop; } if (jsP_accept(J, '[')) { a = EXP2(INDEX, a, expression(J, 0)); jsP_expect(J, ']'); goto loop; } POPREC(); @@ -398,9 +415,11 @@ static js_Ast *memberexp(js_State *J) static js_Ast *callexp(js_State *J) { js_Ast *a = newexp(J); + int line; SAVEREC(); loop: INCREC(); + line = J->lexline; if (jsP_accept(J, '.')) { a = EXP2(MEMBER, a, identifiername(J)); goto loop; } if (jsP_accept(J, '[')) { a = EXP2(INDEX, a, expression(J, 0)); jsP_expect(J, ']'); goto loop; } if (jsP_accept(J, '(')) { a = EXP2(CALL, a, arguments(J)); jsP_expect(J, ')'); goto loop; } @@ -411,6 +430,7 @@ static js_Ast *callexp(js_State *J) static js_Ast *postfix(js_State *J) { js_Ast *a = callexp(J); + int line = J->lexline; if (!J->newline && jsP_accept(J, TK_INC)) return EXP1(POSTINC, a); if (!J->newline && jsP_accept(J, TK_DEC)) return EXP1(POSTDEC, a); return a; @@ -419,6 +439,7 @@ static js_Ast *postfix(js_State *J) static js_Ast *unary(js_State *J) { js_Ast *a; + int line = J->lexline; INCREC(); if (jsP_accept(J, TK_DELETE)) a = EXP1(DELETE, unary(J)); else if (jsP_accept(J, TK_VOID)) a = EXP1(VOID, unary(J)); @@ -437,9 +458,11 @@ static js_Ast *unary(js_State *J) static js_Ast *multiplicative(js_State *J) { js_Ast *a = unary(J); + int line; SAVEREC(); loop: INCREC(); + line = J->lexline; if (jsP_accept(J, '*')) { a = EXP2(MUL, a, unary(J)); goto loop; } if (jsP_accept(J, '/')) { a = EXP2(DIV, a, unary(J)); goto loop; } if (jsP_accept(J, '%')) { a = EXP2(MOD, a, unary(J)); goto loop; } @@ -450,9 +473,11 @@ static js_Ast *multiplicative(js_State *J) static js_Ast *additive(js_State *J) { js_Ast *a = multiplicative(J); + int line; SAVEREC(); loop: INCREC(); + line = J->lexline; if (jsP_accept(J, '+')) { a = EXP2(ADD, a, multiplicative(J)); goto loop; } if (jsP_accept(J, '-')) { a = EXP2(SUB, a, multiplicative(J)); goto loop; } POPREC(); @@ -462,9 +487,11 @@ static js_Ast *additive(js_State *J) static js_Ast *shift(js_State *J) { js_Ast *a = additive(J); + int line; SAVEREC(); loop: INCREC(); + line = J->lexline; if (jsP_accept(J, TK_SHL)) { a = EXP2(SHL, a, additive(J)); goto loop; } if (jsP_accept(J, TK_SHR)) { a = EXP2(SHR, a, additive(J)); goto loop; } if (jsP_accept(J, TK_USHR)) { a = EXP2(USHR, a, additive(J)); goto loop; } @@ -475,9 +502,11 @@ static js_Ast *shift(js_State *J) static js_Ast *relational(js_State *J, int notin) { js_Ast *a = shift(J); + int line; SAVEREC(); loop: INCREC(); + line = J->lexline; if (jsP_accept(J, '<')) { a = EXP2(LT, a, shift(J)); goto loop; } if (jsP_accept(J, '>')) { a = EXP2(GT, a, shift(J)); goto loop; } if (jsP_accept(J, TK_LE)) { a = EXP2(LE, a, shift(J)); goto loop; } @@ -491,9 +520,11 @@ static js_Ast *relational(js_State *J, int notin) static js_Ast *equality(js_State *J, int notin) { js_Ast *a = relational(J, notin); + int line; SAVEREC(); loop: INCREC(); + line = J->lexline; if (jsP_accept(J, TK_EQ)) { a = EXP2(EQ, a, relational(J, notin)); goto loop; } if (jsP_accept(J, TK_NE)) { a = EXP2(NE, a, relational(J, notin)); goto loop; } if (jsP_accept(J, TK_STRICTEQ)) { a = EXP2(STRICTEQ, a, relational(J, notin)); goto loop; } @@ -506,9 +537,11 @@ static js_Ast *bitand(js_State *J, int notin) { js_Ast *a = equality(J, notin); SAVEREC(); + int line = J->lexline; while (jsP_accept(J, '&')) { INCREC(); a = EXP2(BITAND, a, equality(J, notin)); + line = J->lexline; } POPREC(); return a; @@ -518,9 +551,11 @@ static js_Ast *bitxor(js_State *J, int notin) { js_Ast *a = bitand(J, notin); SAVEREC(); + int line = J->lexline; while (jsP_accept(J, '^')) { INCREC(); a = EXP2(BITXOR, a, bitand(J, notin)); + line = J->lexline; } POPREC(); return a; @@ -530,9 +565,11 @@ static js_Ast *bitor(js_State *J, int notin) { js_Ast *a = bitxor(J, notin); SAVEREC(); + int line = J->lexline; while (jsP_accept(J, '|')) { INCREC(); a = EXP2(BITOR, a, bitxor(J, notin)); + line = J->lexline; } POPREC(); return a; @@ -541,6 +578,7 @@ static js_Ast *bitor(js_State *J, int notin) static js_Ast *logand(js_State *J, int notin) { js_Ast *a = bitor(J, notin); + int line = J->lexline; if (jsP_accept(J, TK_AND)) { INCREC(); a = EXP2(LOGAND, a, logand(J, notin)); @@ -552,6 +590,7 @@ static js_Ast *logand(js_State *J, int notin) static js_Ast *logor(js_State *J, int notin) { js_Ast *a = logand(J, notin); + int line = J->lexline; if (jsP_accept(J, TK_OR)) { INCREC(); a = EXP2(LOGOR, a, logor(J, notin)); @@ -563,6 +602,7 @@ static js_Ast *logor(js_State *J, int notin) static js_Ast *conditional(js_State *J, int notin) { js_Ast *a = logor(J, notin); + int line = J->lexline; if (jsP_accept(J, '?')) { js_Ast *b, *c; INCREC(); @@ -578,6 +618,7 @@ static js_Ast *conditional(js_State *J, int notin) static js_Ast *assignment(js_State *J, int notin) { js_Ast *a = conditional(J, notin); + int line = J->lexline; INCREC(); if (jsP_accept(J, '=')) a = EXP2(ASS, a, assignment(J, notin)); else if (jsP_accept(J, TK_MUL_ASS)) a = EXP2(ASS_MUL, a, assignment(J, notin)); @@ -599,9 +640,11 @@ static js_Ast *expression(js_State *J, int notin) { js_Ast *a = assignment(J, notin); SAVEREC(); + int line = J->lexline; while (jsP_accept(J, ',')) { INCREC(); a = EXP2(COMMA, a, assignment(J, notin)); + line = J->lexline; } POPREC(); return a; @@ -612,6 +655,7 @@ static js_Ast *expression(js_State *J, int notin) static js_Ast *vardec(js_State *J, int notin) { js_Ast *a = identifier(J); + int line = J->lexline; if (jsP_accept(J, '=')) return EXP2(VAR, a, assignment(J, notin)); return EXP1(VAR, a); @@ -640,6 +684,7 @@ static js_Ast *statementlist(js_State *J) static js_Ast *caseclause(js_State *J) { js_Ast *a, *b; + int line = J->lexline; if (jsP_accept(J, TK_CASE)) { a = expression(J, 0); @@ -671,6 +716,7 @@ static js_Ast *caselist(js_State *J) static js_Ast *block(js_State *J) { js_Ast *a; + int line = J->lexline; jsP_expect(J, '{'); a = statementlist(J); jsP_expect(J, '}'); @@ -686,7 +732,7 @@ static js_Ast *forexpression(js_State *J, int end) return a; } -static js_Ast *forstatement(js_State *J) +static js_Ast *forstatement(js_State *J, int line) { js_Ast *a, *b, *c, *d; jsP_expect(J, '('); @@ -730,6 +776,7 @@ static js_Ast *statement(js_State *J) { js_Ast *a, *b, *c, *d; js_Ast *stm; + int line = J->lexline; INCREC(); @@ -779,7 +826,7 @@ static js_Ast *statement(js_State *J) } else if (jsP_accept(J, TK_FOR)) { - stm = forstatement(J); + stm = forstatement(J, line); } else if (jsP_accept(J, TK_CONTINUE)) { @@ -851,7 +898,7 @@ static js_Ast *statement(js_State *J) else if (jsP_accept(J, TK_FUNCTION)) { jsP_warning(J, "function statements are not standard"); - stm = funstm(J); + stm = funstm(J, line); } /* labelled statement or expression statement */ @@ -881,8 +928,9 @@ static js_Ast *statement(js_State *J) static js_Ast *scriptelement(js_State *J) { + int line = J->lexline; if (jsP_accept(J, TK_FUNCTION)) - return fundec(J); + return fundec(J, line); return statement(J); } @@ -942,6 +990,14 @@ static int jsP_foldconst(js_Ast *node) double x, y; int a, b; + if (node->type == AST_LIST) { + while (node) { + jsP_foldconst(node->a); + node = node->b; + } + return 0; + } + if (node->type == EXP_NUMBER) return 1; @@ -1000,6 +1056,7 @@ js_Ast *jsP_parse(js_State *J, const char *filename, const char *source) js_Ast *jsP_parsefunction(js_State *J, const char *filename, const char *params, const char *body) { js_Ast *p = NULL; + int line = 0; if (params) { jsY_initlex(J, filename, params); jsP_next(J); diff --git a/mujs-1.0.5/jsregexp.c b/mujs-1.0.5/jsregexp.c index 9f58e156..98b2a869 100644 --- a/mujs-1.0.5/jsregexp.c +++ b/mujs-1.0.5/jsregexp.c @@ -29,6 +29,7 @@ void js_newregexp(js_State *J, const char *pattern, int flags) void js_RegExp_prototype_exec(js_State *J, js_Regexp *re, const char *text) { + int result; int i; int opts; Resub m; @@ -46,7 +47,10 @@ void js_RegExp_prototype_exec(js_State *J, js_Regexp *re, const char *text) } } - if (!js_regexec(re->prog, text, &m, opts)) { + result = js_regexec(re->prog, text, &m, opts); + if (result < 0) + js_error(J, "regexec failed"); + if (result == 0) { js_newarray(J); js_pushstring(J, text); js_setproperty(J, -2, "input"); @@ -71,6 +75,7 @@ static void Rp_test(js_State *J) { js_Regexp *re; const char *text; + int result; int opts; Resub m; @@ -90,7 +95,10 @@ static void Rp_test(js_State *J) } } - if (!js_regexec(re->prog, text, &m, opts)) { + result = js_regexec(re->prog, text, &m, opts); + if (result < 0) + js_error(J, "regexec failed"); + if (result == 0) { if (re->flags & JS_REGEXP_G) re->last = re->last + (m.sub[0].ep - text); js_pushboolean(J, 1); diff --git a/mujs-1.0.5/jsrun.c b/mujs-1.0.5/jsrun.c index a53d2890..cb22668c 100644 --- a/mujs-1.0.5/jsrun.c +++ b/mujs-1.0.5/jsrun.c @@ -230,7 +230,7 @@ int js_iserror(js_State *J, int idx) return v->type == JS_TOBJECT && v->u.object->type == JS_CERROR; } -static const char *js_typeof(js_State *J, int idx) +const char *js_typeof(js_State *J, int idx) { js_Value *v = stackidx(J, idx); switch (v->type) { @@ -857,11 +857,6 @@ static void js_initvar(js_State *J, const char *name, int idx) jsR_defproperty(J, J->E->variables, name, JS_DONTENUM | JS_DONTCONF, stackidx(J, idx), NULL, NULL); } -static void js_defvar(js_State *J, const char *name) -{ - jsR_defproperty(J, J->E->variables, name, JS_DONTENUM | JS_DONTCONF, NULL, NULL, NULL); -} - static int js_hasvar(js_State *J, const char *name) { js_Environment *E = J->E; @@ -954,6 +949,7 @@ static void jsR_calllwfunction(js_State *J, int n, js_Function *F, js_Environmen js_pop(J, n - F->numparams); n = F->numparams; } + for (i = n; i < F->varlen; ++i) js_pushundefined(J); @@ -975,7 +971,7 @@ static void jsR_callfunction(js_State *J, int n, js_Function *F, js_Environment jsR_savescope(J, scope); if (F->arguments) { - js_newobject(J); + js_newarguments(J); if (!J->strict) { js_currentfunction(J); js_defproperty(J, -2, "callee", JS_DONTENUM); @@ -990,17 +986,16 @@ static void jsR_callfunction(js_State *J, int n, js_Function *F, js_Environment js_pop(J, 1); } - for (i = 0; i < F->numparams; ++i) { - if (i < n) - js_initvar(J, F->vartab[i], i + 1); - else { - js_pushundefined(J); - js_initvar(J, F->vartab[i], -1); - js_pop(J, 1); - } - } + for (i = 0; i < n && i < F->numparams; ++i) + js_initvar(J, F->vartab[i], i + 1); js_pop(J, n); + for (; i < F->varlen; ++i) { + js_pushundefined(J); + js_initvar(J, F->vartab[i], -1); + js_pop(J, 1); + } + jsR_run(J, F); v = *stackidx(J, -1); TOP = --BOT; /* clear stack */ @@ -1012,11 +1007,20 @@ static void jsR_callfunction(js_State *J, int n, js_Function *F, js_Environment static void jsR_callscript(js_State *J, int n, js_Function *F, js_Environment *scope) { js_Value v; + int i; if (scope) jsR_savescope(J, scope); + /* scripts take no arguments */ js_pop(J, n); + + for (i = 0; i < F->varlen; ++i) { + js_pushundefined(J); + js_initvar(J, F->vartab[i], -1); + js_pop(J, 1); + } + jsR_run(J, F); v = *stackidx(J, -1); TOP = --BOT; /* clear stack */ @@ -1056,7 +1060,7 @@ void js_call(js_State *J, int n) int savebot; if (!js_iscallable(J, -n-2)) - js_typeerror(J, "called object is not a function"); + js_typeerror(J, "%s is not callable", js_typeof(J, -n-2)); obj = js_toobject(J, -n-2); @@ -1090,7 +1094,7 @@ void js_construct(js_State *J, int n) js_Object *newobj; if (!js_iscallable(J, -n-1)) - js_typeerror(J, "called object is not a function"); + js_typeerror(J, "%s is not callable", js_typeof(J, -n-1)); obj = js_toobject(J, -n-1); @@ -1236,7 +1240,7 @@ static void jsR_dumpstack(js_State *J) printf("stack {\n"); for (i = 0; i < TOP; ++i) { putchar(i == BOT ? '>' : ' '); - printf("% 4d: ", i); + printf("%4d: ", i); js_dumpvalue(J, STACK[i]); putchar('\n'); } @@ -1286,6 +1290,8 @@ static void jsR_run(js_State *J, js_Function *F) js_Function **FT = F->funtab; double *NT = F->numtab; const char **ST = F->strtab; + const char **VT = F->vartab-1; + int lightweight = F->lightweight; js_Instruction *pcstart = F->code; js_Instruction *pc = F->code; enum js_OpCode opcode; @@ -1306,7 +1312,10 @@ static void jsR_run(js_State *J, js_Function *F) if (J->gccounter > JS_GCLIMIT) js_gc(J, 0); + J->trace[J->tracetop].line = *pc++; + opcode = *pc++; + switch (opcode) { case OP_POP: js_pop(J, 1); break; case OP_DUP: js_dup(J); break; @@ -1315,10 +1324,7 @@ static void jsR_run(js_State *J, js_Function *F) case OP_ROT3: js_rot3(J); break; case OP_ROT4: js_rot4(J); break; - case OP_NUMBER_0: js_pushnumber(J, 0); break; - case OP_NUMBER_1: js_pushnumber(J, 1); break; - case OP_NUMBER_POS: js_pushnumber(J, *pc++); break; - case OP_NUMBER_NEG: js_pushnumber(J, -(*pc++)); break; + case OP_INTEGER: js_pushnumber(J, *pc++ - 32768); break; case OP_NUMBER: js_pushnumber(J, NT[*pc++]); break; case OP_STRING: js_pushliteral(J, ST[*pc++]); break; @@ -1347,31 +1353,33 @@ static void jsR_run(js_State *J, js_Function *F) js_currentfunction(J); break; - case OP_INITLOCAL: - STACK[BOT + *pc++] = STACK[--TOP]; - break; - case OP_GETLOCAL: - CHECKSTACK(1); - STACK[TOP++] = STACK[BOT + *pc++]; + if (lightweight) { + CHECKSTACK(1); + STACK[TOP++] = STACK[BOT + *pc++]; + } else { + str = VT[*pc++]; + if (!js_hasvar(J, str)) + js_referenceerror(J, "'%s' is not defined", str); + } break; case OP_SETLOCAL: - STACK[BOT + *pc++] = STACK[TOP-1]; + if (lightweight) { + STACK[BOT + *pc++] = STACK[TOP-1]; + } else { + js_setvar(J, VT[*pc++]); + } break; case OP_DELLOCAL: - ++pc; - js_pushboolean(J, 0); - break; - - case OP_INITVAR: - js_initvar(J, ST[*pc++], -1); - js_pop(J, 1); - break; - - case OP_DEFVAR: - js_defvar(J, ST[*pc++]); + if (lightweight) { + ++pc; + js_pushboolean(J, 0); + } else { + b = js_delvar(J, VT[*pc++]); + js_pushboolean(J, b); + } break; case OP_GETVAR: @@ -1469,7 +1477,7 @@ static void jsR_run(js_State *J, js_Function *F) break; case OP_ITERATOR: - if (!js_isundefined(J, -1) && !js_isnull(J, -1)) { + if (js_iscoercible(J, -1)) { obj = jsV_newiterator(J, js_toobject(J, -1), 0); js_pop(J, 1); js_pushobject(J, obj); @@ -1477,11 +1485,16 @@ static void jsR_run(js_State *J, js_Function *F) break; case OP_NEXTITER: - obj = js_toobject(J, -1); - str = jsV_nextiterator(J, obj); - if (str) { - js_pushliteral(J, str); - js_pushboolean(J, 1); + if (js_isobject(J, -1)) { + obj = js_toobject(J, -1); + str = jsV_nextiterator(J, obj); + if (str) { + js_pushliteral(J, str); + js_pushboolean(J, 1); + } else { + js_pop(J, 1); + js_pushboolean(J, 0); + } } else { js_pop(J, 1); js_pushboolean(J, 0); @@ -1746,10 +1759,6 @@ static void jsR_run(js_State *J, js_Function *F) case OP_RETURN: J->strict = savestrict; return; - - case OP_LINE: - J->trace[J->tracetop].line = *pc++; - break; } } } diff --git a/mujs-1.0.5/jsstring.c b/mujs-1.0.5/jsstring.c index 9ac46ef8..29d2b8a5 100644 --- a/mujs-1.0.5/jsstring.c +++ b/mujs-1.0.5/jsstring.c @@ -4,6 +4,14 @@ #include "utf.h" #include "regexp.h" +static int js_doregexec(js_State *J, Reprog *prog, const char *string, Resub *sub, int eflags) +{ + int result = js_regexec(prog, string, sub, eflags); + if (result < 0) + js_error(J, "regexec failed"); + return result; +} + static const char *checkstring(js_State *J, int idx) { if (!js_iscoercible(J, idx)) @@ -343,7 +351,7 @@ static void Sp_match(js_State *J) a = text; e = text + strlen(text); while (a <= e) { - if (js_regexec(re->prog, a, &m, a > text ? REG_NOTBOL : 0)) + if (js_doregexec(J, re->prog, a, &m, a > text ? REG_NOTBOL : 0)) break; b = m.sub[0].sp; @@ -380,7 +388,7 @@ static void Sp_search(js_State *J) re = js_toregexp(J, -1); - if (!js_regexec(re->prog, text, &m, 0)) + if (!js_doregexec(J, re->prog, text, &m, 0)) js_pushnumber(J, js_utfptrtoidx(text, m.sub[0].sp)); else js_pushnumber(J, -1); @@ -397,7 +405,7 @@ static void Sp_replace_regexp(js_State *J) source = checkstring(J, 0); re = js_toregexp(J, 1); - if (js_regexec(re->prog, source, &m, 0)) { + if (js_doregexec(J, re->prog, source, &m, 0)) { js_copy(J, 0); return; } @@ -471,7 +479,7 @@ static void Sp_replace_regexp(js_State *J) else goto end; } - if (!js_regexec(re->prog, source, &m, REG_NOTBOL)) + if (!js_doregexec(J, re->prog, source, &m, REG_NOTBOL)) goto loop; } @@ -576,7 +584,7 @@ static void Sp_split_regexp(js_State *J) /* splitting the empty string */ if (e == text) { - if (js_regexec(re->prog, text, &m, 0)) { + if (js_doregexec(J, re->prog, text, &m, 0)) { if (len == limit) return; js_pushliteral(J, ""); js_setindex(J, -2, 0); @@ -586,7 +594,7 @@ static void Sp_split_regexp(js_State *J) p = a = text; while (a < e) { - if (js_regexec(re->prog, a, &m, a > text ? REG_NOTBOL : 0)) + if (js_doregexec(J, re->prog, a, &m, a > text ? REG_NOTBOL : 0)) break; /* no match */ b = m.sub[0].sp; diff --git a/mujs-1.0.5/jsvalue.c b/mujs-1.0.5/jsvalue.c index 027f8a51..45abb702 100644 --- a/mujs-1.0.5/jsvalue.c +++ b/mujs-1.0.5/jsvalue.c @@ -366,7 +366,9 @@ js_Object *jsV_toobject(js_State *J, js_Value *v) void js_newobjectx(js_State *J) { - js_Object *prototype = js_toobject(J, -1); + js_Object *prototype = NULL; + if (js_isobject(J, -1)) + prototype = js_toobject(J, -1); js_pop(J, 1); js_pushobject(J, jsV_newobject(J, JS_COBJECT, prototype)); } @@ -376,6 +378,11 @@ void js_newobject(js_State *J) js_pushobject(J, jsV_newobject(J, JS_COBJECT, J->Object_prototype)); } +void js_newarguments(js_State *J) +{ + js_pushobject(J, jsV_newobject(J, JS_CARGUMENTS, J->Object_prototype)); +} + void js_newarray(js_State *J) { js_pushobject(J, jsV_newobject(J, JS_CARRAY, J->Array_prototype)); diff --git a/mujs-1.0.5/jsvalue.h b/mujs-1.0.5/jsvalue.h index 09427daa..46424fe0 100644 --- a/mujs-1.0.5/jsvalue.h +++ b/mujs-1.0.5/jsvalue.h @@ -36,6 +36,7 @@ enum js_Class { JS_CDATE, JS_CMATH, JS_CJSON, + JS_CARGUMENTS, JS_CITERATOR, JS_CUSERDATA, }; diff --git a/mujs-1.0.5/main.c b/mujs-1.0.5/main.c index 68e2c093..d2573447 100644 --- a/mujs-1.0.5/main.c +++ b/mujs-1.0.5/main.c @@ -199,6 +199,11 @@ static void jsB_quit(js_State *J) exit(js_tonumber(J, 1)); } +static void jsB_repr(js_State *J) +{ + js_repr(J, 1); +} + static const char *require_js = "function require(name) {\n" "var cache = require.cache;\n" @@ -220,7 +225,7 @@ static const char *stacktrace_js = static int eval_print(js_State *J, const char *source) { - if (js_ploadstring(J, "[string]", source)) { + if (js_ploadstring(J, "[stdin]", source)) { fprintf(stderr, "%s\n", js_trystring(J, -1, "Error")); js_pop(J, 1); return 1; @@ -231,8 +236,9 @@ static int eval_print(js_State *J, const char *source) js_pop(J, 1); return 1; } - if (js_isdefined(J, -1)) - printf("%s\n", js_trystring(J, -1, "can't convert to string")); + if (js_isdefined(J, -1)) { + printf("%s\n", js_tryrepr(J, -1, "can't convert to string")); + } js_pop(J, 1); return 0; } @@ -316,6 +322,9 @@ main(int argc, char **argv) js_newcfunction(J, jsB_readline, "readline", 0); js_setglobal(J, "readline"); + js_newcfunction(J, jsB_repr, "repr", 0); + js_setglobal(J, "repr"); + js_newcfunction(J, jsB_quit, "quit", 1); js_setglobal(J, "quit"); diff --git a/mujs-1.0.5/mujs.h b/mujs-1.0.5/mujs.h index 075ad582..033670d1 100644 --- a/mujs-1.0.5/mujs.h +++ b/mujs-1.0.5/mujs.h @@ -193,7 +193,6 @@ short js_toint16(js_State *J, int idx); unsigned short js_touint16(js_State *J, int idx); int js_gettop(js_State *J); -void js_settop(js_State *J, int idx); void js_pop(js_State *J, int n); void js_rot(js_State *J, int n); void js_copy(js_State *J, int idx); @@ -214,6 +213,11 @@ int js_compare(js_State *J, int *okay); int js_equal(js_State *J); int js_strictequal(js_State *J); int js_instanceof(js_State *J); +const char *js_typeof(js_State *J, int idx); + +void js_repr(js_State *J, int idx); +const char *js_torepr(js_State *J, int idx); +const char *js_tryrepr(js_State *J, int idx, const char *error); #ifdef __cplusplus } diff --git a/mujs-1.0.5/opnames.h b/mujs-1.0.5/opnames.h index 82e97edf..56e270d2 100644 --- a/mujs-1.0.5/opnames.h +++ b/mujs-1.0.5/opnames.h @@ -4,10 +4,7 @@ "rot2", "rot3", "rot4", -"number_0", -"number_1", -"number_pos", -"number_neg", +"integer", "number", "string", "closure", @@ -20,12 +17,9 @@ "false", "this", "current", -"initlocal", "getlocal", "setlocal", "dellocal", -"initvar", -"defvar", "hasvar", "getvar", "setvar", @@ -87,4 +81,3 @@ "jtrue", "jfalse", "return", -"line", diff --git a/mujs-1.0.5/regexp.c b/mujs-1.0.5/regexp.c index d6771be0..9da46eb1 100644 --- a/mujs-1.0.5/regexp.c +++ b/mujs-1.0.5/regexp.c @@ -16,6 +16,7 @@ #define REPINF 255 #define MAXSUB REG_MAXSUB #define MAXPROG (32 << 10) +#define MAXREC 1024 typedef struct Reclass Reclass; typedef struct Renode Renode; @@ -156,9 +157,9 @@ static int lexcount(struct cstate *g) while (g->yychar != ',' && g->yychar != '}') { g->yymin = g->yymin * 10 + dec(g, g->yychar); g->yychar = *g->source++; + if (g->yymin >= REPINF) + die(g, "numeric overflow"); } - if (g->yymin < 0 || g->yymin >= REPINF) - die(g, "numeric overflow"); if (g->yychar == ',') { g->yychar = *g->source++; @@ -170,9 +171,9 @@ static int lexcount(struct cstate *g) while (g->yychar != '}') { g->yymax = g->yymax * 10 + dec(g, g->yychar); g->yychar = *g->source++; + if (g->yymax >= REPINF) + die(g, "numeric overflow"); } - if (g->yymax < 0 || g->yymax >= REPINF) - die(g, "numeric overflow"); } } else { g->yymax = g->yymin; @@ -836,6 +837,8 @@ Reprog *regcompx(void *(*alloc)(void *ctx, void *p, int n), void *ctx, if (!g.prog) die(&g, "cannot allocate regular expression"); n = strlen(pattern) * 2; + if (n > MAXPROG) + die(&g, "program too large"); if (n > 0) { g.pstart = g.pend = alloc(ctx, NULL, sizeof (Renode) * n); if (!g.pstart) @@ -965,87 +968,101 @@ static int strncmpcanon(const char *a, const char *b, int n) return 0; } -static int match(Reinst *pc, const char *sp, const char *bol, int flags, Resub *out) +static int match(Reinst *pc, const char *sp, const char *bol, int flags, Resub *out, int depth) { Resub scratch; + int result; int i; Rune c; + /* stack overflow */ + if (depth > MAXREC) + return -1; + for (;;) { switch (pc->opcode) { case I_END: - return 1; + return 0; case I_JUMP: pc = pc->x; break; case I_SPLIT: scratch = *out; - if (match(pc->x, sp, bol, flags, &scratch)) { + result = match(pc->x, sp, bol, flags, &scratch, depth+1); + if (result == -1) + return -1; + if (result == 0) { *out = scratch; - return 1; + return 0; } pc = pc->y; break; case I_PLA: - if (!match(pc->x, sp, bol, flags, out)) - return 0; + result = match(pc->x, sp, bol, flags, out, depth+1); + if (result == -1) + return -1; + if (result == 1) + return 1; pc = pc->y; break; case I_NLA: scratch = *out; - if (match(pc->x, sp, bol, flags, &scratch)) - return 0; + result = match(pc->x, sp, bol, flags, &scratch, depth+1); + if (result == -1) + return -1; + if (result == 0) + return 1; pc = pc->y; break; case I_ANYNL: sp += chartorune(&c, sp); if (c == 0) - return 0; + return 1; pc = pc + 1; break; case I_ANY: sp += chartorune(&c, sp); if (c == 0) - return 0; + return 1; if (isnewline(c)) - return 0; + return 1; pc = pc + 1; break; case I_CHAR: sp += chartorune(&c, sp); if (c == 0) - return 0; + return 1; if (flags & REG_ICASE) c = canon(c); if (c != pc->c) - return 0; + return 1; pc = pc + 1; break; case I_CCLASS: sp += chartorune(&c, sp); if (c == 0) - return 0; + return 1; if (flags & REG_ICASE) { if (!incclasscanon(pc->cc, canon(c))) - return 0; + return 1; } else { if (!incclass(pc->cc, c)) - return 0; + return 1; } pc = pc + 1; break; case I_NCCLASS: sp += chartorune(&c, sp); if (c == 0) - return 0; + return 1; if (flags & REG_ICASE) { if (incclasscanon(pc->cc, canon(c))) - return 0; + return 1; } else { if (incclass(pc->cc, c)) - return 0; + return 1; } pc = pc + 1; break; @@ -1053,10 +1070,10 @@ static int match(Reinst *pc, const char *sp, const char *bol, int flags, Resub * i = out->sub[pc->n].ep - out->sub[pc->n].sp; if (flags & REG_ICASE) { if (strncmpcanon(sp, out->sub[pc->n].sp, i)) - return 0; + return 1; } else { if (strncmp(sp, out->sub[pc->n].sp, i)) - return 0; + return 1; } if (i > 0) sp += i; @@ -1074,7 +1091,7 @@ static int match(Reinst *pc, const char *sp, const char *bol, int flags, Resub * break; } } - return 0; + return 1; case I_EOL: if (*sp == 0) { pc = pc + 1; @@ -1086,19 +1103,19 @@ static int match(Reinst *pc, const char *sp, const char *bol, int flags, Resub * break; } } - return 0; + return 1; case I_WORD: i = sp > bol && iswordchar(sp[-1]); i ^= iswordchar(sp[0]); if (!i) - return 0; + return 1; pc = pc + 1; break; case I_NWORD: i = sp > bol && iswordchar(sp[-1]); i ^= iswordchar(sp[0]); if (i) - return 0; + return 1; pc = pc + 1; break; @@ -1111,7 +1128,7 @@ static int match(Reinst *pc, const char *sp, const char *bol, int flags, Resub * pc = pc + 1; break; default: - return 0; + return 1; } } } @@ -1128,7 +1145,7 @@ int regexec(Reprog *prog, const char *sp, Resub *sub, int eflags) for (i = 0; i < MAXSUB; ++i) sub->sub[i].sp = sub->sub[i].ep = NULL; - return !match(prog->start, sp, sp, prog->flags | eflags, sub); + return match(prog->start, sp, sp, prog->flags | eflags, sub, 0); } #ifdef TEST diff --git a/mujs-1.0.5/utftype.c b/mujs-1.0.5/utftype.c index 3e99020e..cf30c2d3 100644 --- a/mujs-1.0.5/utftype.c +++ b/mujs-1.0.5/utftype.c @@ -7,8 +7,7 @@ * alpha ranges - * only covers ranges not in lower||upper */ -static -Rune __alpha2[] = +static const Rune __alpha2[] = { 0x00d8, 0x00f6, /* Ø - ö */ 0x00f8, 0x01f5, /* ø - ǵ */ @@ -168,8 +167,7 @@ Rune __alpha2[] = * alpha singlets - * only covers ranges not in lower||upper */ -static -Rune __alpha1[] = +static const Rune __alpha1[] = { 0x00aa, /* ª */ 0x00b5, /* µ */ @@ -208,8 +206,7 @@ Rune __alpha1[] = /* * space ranges */ -static -Rune __space2[] = +static const Rune __space2[] = { 0x0009, 0x000a, /* tab and newline */ 0x0020, 0x0020, /* space */ @@ -224,8 +221,7 @@ Rune __space2[] = * lower case ranges * 3rd col is conversion excess 500 */ -static -Rune __toupper2[] = +static const Rune __toupper2[] = { 0x0061, 0x007a, 468, /* a-z A-Z */ 0x00e0, 0x00f6, 468, /* à-ö À-Ö */ @@ -268,8 +264,7 @@ Rune __toupper2[] = * lower case singlets * 2nd col is conversion excess 500 */ -static -Rune __toupper1[] = +static const Rune __toupper1[] = { 0x00ff, 621, /* ÿ Ÿ */ 0x0101, 499, /* ā Ā */ @@ -617,8 +612,7 @@ Rune __toupper1[] = * upper case ranges * 3rd col is conversion excess 500 */ -static -Rune __tolower2[] = +static const Rune __tolower2[] = { 0x0041, 0x005a, 532, /* A-Z a-z */ 0x00c0, 0x00d6, 532, /* À-Ö à-ö */ @@ -662,8 +656,7 @@ Rune __tolower2[] = * upper case singlets * 2nd col is conversion excess 500 */ -static -Rune __tolower1[] = +static const Rune __tolower1[] = { 0x0100, 501, /* Ā ā */ 0x0102, 501, /* Ă ă */ @@ -1004,8 +997,7 @@ Rune __tolower1[] = * title characters are those between * upper and lower case. ie DZ Dz dz */ -static -Rune __totitle1[] = +static const Rune __totitle1[] = { 0x01c4, 501, /* DŽ Dž */ 0x01c6, 499, /* dž Dž */ @@ -1017,10 +1009,10 @@ Rune __totitle1[] = 0x01f3, 499, /* dz Dz */ }; -static Rune* -bsearch(Rune c, Rune *t, int n, int ne) +static const Rune * +bsearch(Rune c, const Rune *t, int n, int ne) { - Rune *p; + const Rune *p; int m; while(n > 1) { @@ -1040,7 +1032,7 @@ bsearch(Rune c, Rune *t, int n, int ne) Rune tolowerrune(Rune c) { - Rune *p; + const Rune *p; p = bsearch(c, __tolower2, nelem(__tolower2)/3, 3); if(p && c >= p[0] && c <= p[1]) @@ -1054,7 +1046,7 @@ tolowerrune(Rune c) Rune toupperrune(Rune c) { - Rune *p; + const Rune *p; p = bsearch(c, __toupper2, nelem(__toupper2)/3, 3); if(p && c >= p[0] && c <= p[1]) @@ -1068,7 +1060,7 @@ toupperrune(Rune c) Rune totitlerune(Rune c) { - Rune *p; + const Rune *p; p = bsearch(c, __totitle1, nelem(__totitle1)/2, 2); if(p && c == p[0]) @@ -1079,7 +1071,7 @@ totitlerune(Rune c) int islowerrune(Rune c) { - Rune *p; + const Rune *p; p = bsearch(c, __toupper2, nelem(__toupper2)/3, 3); if(p && c >= p[0] && c <= p[1]) @@ -1093,7 +1085,7 @@ islowerrune(Rune c) int isupperrune(Rune c) { - Rune *p; + const Rune *p; p = bsearch(c, __tolower2, nelem(__tolower2)/3, 3); if(p && c >= p[0] && c <= p[1]) @@ -1107,7 +1099,7 @@ isupperrune(Rune c) int isalpharune(Rune c) { - Rune *p; + const Rune *p; if(isupperrune(c) || islowerrune(c)) return 1; @@ -1129,7 +1121,7 @@ istitlerune(Rune c) int isspacerune(Rune c) { - Rune *p; + const Rune *p; p = bsearch(c, __space2, nelem(__space2)/2, 2); if(p && c >= p[0] && c <= p[1]) diff --git a/tests/colorp5.js b/tests/colorp5.js new file mode 100644 index 00000000..9dcf0fda --- /dev/null +++ b/tests/colorp5.js @@ -0,0 +1,35 @@ +/* + 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 + + 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 + */ + +Include('p5'); + +function setup() { + colorMode(RGB) + fill(1); + fill(1, 2); + fill(1, 2, 3); + fill(1, 2, 3, 4); + + noLoop(); +} + +function draw() { +}