docs: Use “×” for dimensions

Much like `'' !== false` and `null !==  undefined`, the typographical equivalent is `"x" !== "×"`. ☻

Author: Zearin

src/color/creating_reading.js

@@ -245,13 +245,13 @@ p5.prototype.brightness = function(c) {
  *
  * @alt
  * Yellow rect in middle right of canvas, with 55 pixel width and height.
- * Yellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.
+ * Yellow ellipse in top left of canvas, black ellipse in bottom right,both 80×80.
  * Bright fuchsia rect in middle of canvas, 60 pixel width and height.
- * Two bright green rects on opposite sides of the canvas, both 45x80.
- * Four blue rects in each corner of the canvas, each are 35x35.
- * Bright sea green rect on left and darker rect on right of canvas, both 45x80.
- * Dark green rect on left and lighter green rect on right of canvas, both 45x80.
- * Dark blue rect on left and light teal rect on right of canvas, both 45x80.
+ * Two bright green rects on opposite sides of the canvas, both 45×80.
+ * Four blue rects in each corner of the canvas, each are 35×x35.
+ * Bright sea green rect on left and darker rect on right of canvas, both 45×80.
+ * Dark green rect on left and lighter green rect on right of canvas, both 45×80.
+ * Dark blue rect on left and light teal rect on right of canvas, both 45×80.
  */
 
 /**
@@ -316,7 +316,7 @@ p5.prototype.color = function() {
  * </div>
  *
  * @alt
- * blue rect on left and green on right, both with black outlines & 35x60.
+ * blue rect on left and green on right, both with black outlines & 35×60.
  */
 p5.prototype.green = function(c) {
   p5._validateParameters('green', arguments);
@@ -351,7 +351,7 @@ p5.prototype.green = function(c) {
  * </div>
  *
  * @alt
- * salmon pink rect on left and black on right, both 35x60.
+ * salmon pink rect on left and black on right, both 35×60.
  */
 p5.prototype.hue = function(c) {
   p5._validateParameters('hue', arguments);
@@ -398,7 +398,7 @@ p5.prototype.hue = function(c) {
  * </div>
  *
  * @alt
- * 4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60
+ * 4 rects one tan, brown, brownish purple, purple, with white outlines & 20×60
  */
 
 p5.prototype.lerpColor = function(c1, c2, amt) {
@@ -472,7 +472,7 @@ p5.prototype.lerpColor = function(c1, c2, amt) {
  * </div>
  *
  * @alt
- * light pastel green rect on left and dark grey rect on right, both 35x60.
+ * light pastel green rect on left and dark grey rect on right, both 35×60.
  */
 p5.prototype.lightness = function(c) {
   p5._validateParameters('lightness', arguments);
@@ -511,7 +511,7 @@ p5.prototype.lightness = function(c) {
  * </div>
  *
  * @alt
- * yellow rect on left and red rect on right, both with black outlines and 35x60.
+ * yellow rect on left and red rect on right, both with black outlines and 35×60.
  * grey canvas
  */
 p5.prototype.red = function(c) {
@@ -546,7 +546,7 @@ p5.prototype.red = function(c) {
  * </div>
  *
  * @alt
- *deep pink rect on left and grey rect on right, both 35x60.
+ *deep pink rect on left and grey rect on right, both 35×60.
  */
 p5.prototype.saturation = function(c) {
   p5._validateParameters('saturation', arguments);

src/color/setting.js

@@ -283,7 +283,7 @@ p5.prototype.clear = function() {
  *Green to red gradient from bottom L to top R. shading originates from top left.
  *Rainbow gradient from left to right. Brightness increasing to white at top.
  *unknown image.
- *50x50 ellipse at middle L & 40x40 ellipse at center. Translucent pink outlines.
+ *50×50 ellipse at middle L & 40×40 ellipse at center. Translucent pink outlines.
  */
 
 /**
@@ -444,17 +444,17 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * </div>
  *
  * @alt
- * 60x60 dark charcoal grey rect with black outline in center of canvas.
- * 60x60 yellow rect with black outline in center of canvas.
- * 60x60 royal blue rect with black outline in center of canvas.
- * 60x60 red rect with black outline in center of canvas.
- * 60x60 pink rect with black outline in center of canvas.
- * 60x60 black rect with black outline in center of canvas.
- * 60x60 light green rect with black outline in center of canvas.
- * 60x60 soft green rect with black outline in center of canvas.
- * 60x60 red rect with black outline in center of canvas.
- * 60x60 dark fuchsia rect with black outline in center of canvas.
- * 60x60 blue rect with black outline in center of canvas.
+ * 60×60 dark charcoal grey rect with black outline in center of canvas.
+ * 60×60 yellow rect with black outline in center of canvas.
+ * 60×60 royal blue rect with black outline in center of canvas.
+ * 60×60 red rect with black outline in center of canvas.
+ * 60×60 pink rect with black outline in center of canvas.
+ * 60×60 black rect with black outline in center of canvas.
+ * 60×60 light green rect with black outline in center of canvas.
+ * 60×60 soft green rect with black outline in center of canvas.
+ * 60×60 red rect with black outline in center of canvas.
+ * 60×60 dark fuchsia rect with black outline in center of canvas.
+ * 60×60 blue rect with black outline in center of canvas.
  */
 
 /**
@@ -522,7 +522,7 @@ p5.prototype.fill = function(...args) {
  * </div>
  *
  * @alt
- * white rect top middle and noFill rect center. Both 60x60 with black outlines.
+ * white rect top middle and noFill rect center. Both 60×60 with black outlines.
  * black canvas with purple cube wireframe spinning
  */
 p5.prototype.noFill = function() {
@@ -562,7 +562,7 @@ p5.prototype.noFill = function() {
  * </div>
  *
  * @alt
- * 60x60 white rect at center. no outline.
+ * 60×60 white rect at center. no outline.
  * black canvas with pink cube spinning
  */
 p5.prototype.noStroke = function() {
@@ -696,17 +696,17 @@ p5.prototype.noStroke = function() {
  * </div>
  *
  * @alt
- * 60x60 white rect at center. Dark charcoal grey outline.
- * 60x60 white rect at center. Yellow outline.
- * 60x60 white rect at center. Royal blue outline.
- * 60x60 white rect at center. Red outline.
- * 60x60 white rect at center. Pink outline.
- * 60x60 white rect at center. Black outline.
- * 60x60 white rect at center. Bright green outline.
- * 60x60 white rect at center. Soft green outline.
- * 60x60 white rect at center. Red outline.
- * 60x60 white rect at center. Dark fuchsia outline.
- * 60x60 white rect at center. Blue outline.
+ * 60×60 white rect at center. Dark charcoal grey outline.
+ * 60×60 white rect at center. Yellow outline.
+ * 60×60 white rect at center. Royal blue outline.
+ * 60×60 white rect at center. Red outline.
+ * 60×60 white rect at center. Pink outline.
+ * 60×60 white rect at center. Black outline.
+ * 60×60 white rect at center. Bright green outline.
+ * 60×60 white rect at center. Soft green outline.
+ * 60×60 white rect at center. Red outline.
+ * 60×60 white rect at center. Dark fuchsia outline.
+ * 60×60 white rect at center. Blue outline.
  */
 
 /**
@@ -812,9 +812,9 @@ p5.prototype.stroke = function(...args) {
  * </div>
  *
  * @alt
- * 60x60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.
- * 60x60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.
- * 60x60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.
+ * 60×60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.
+ * 60×60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.
+ * 60×60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.
  */
 p5.prototype.erase = function(opacityFill = 255, opacityStroke = 255) {
   this._renderer.erase(opacityFill, opacityStroke);

src/core/constants.js

@@ -78,7 +78,7 @@ export const WAIT = 'wait';
  * </code></div>
  *
  * @alt
- * 80x80 white quarter-circle with curve toward bottom right of canvas.
+ * 80×80 white quarter-circle with curve toward bottom right of canvas.
  */
 export const HALF_PI = _PI / 2;
 /**
@@ -132,7 +132,7 @@ export const QUARTER_PI = _PI / 4;
  * </code></div>
  *
  * @alt
- * 80x80 white ellipse shape in center of canvas.
+ * 80×80 white ellipse shape in center of canvas.
  */
 export const TAU = _PI * 2;
 /**
@@ -150,7 +150,7 @@ export const TAU = _PI * 2;
  * </code></div>
  *
  * @alt
- * 80x80 white ellipse shape in center of canvas.
+ * 80×80 white ellipse shape in center of canvas.
  */
 export const TWO_PI = _PI * 2;
 /**

src/core/environment.js

@@ -153,14 +153,14 @@ p5.prototype.deltaTime = 0;
  * </code></div>
  *
  * @alt
- * green 50x50 ellipse at top left. Red X covers canvas when page focus changes
+ * green 50×50 ellipse at top left. Red X covers canvas when page focus changes
  */
 p5.prototype.focused = document.hasFocus();
 
 /**
  * Sets the cursor to a predefined symbol or an image, or makes it visible
  * if already hidden. If you are trying to set an image as the cursor, the
- * recommended size is 16x16 or 32x32 pixels. The values for parameters x and y
+ * recommended size is 16×16 or 32×32 pixels. The values for parameters x and y
  * must be less than the dimensions of the image.
  *
  * @method cursor
@@ -229,13 +229,13 @@ p5.prototype.cursor = function(type, x, y) {
  * Specifies the number of frames to be displayed every second. For example,
  * the function call frameRate(30) will attempt to refresh 30 times a second.
  * If the processor is not fast enough to maintain the specified rate, the
- * frame rate will not be achieved. Setting the frame rate within 
+ * frame rate will not be achieved. Setting the frame rate within
  * <a href="#/p5/setup">setup()</a> is recommended. The default frame rate is
- * based on the frame rate of the display (here also called "refresh rate"), 
+ * based on the frame rate of the display (here also called "refresh rate"),
  * which is set to 60 frames per second on most computers. A frame rate of 24
- * frames per second (usual for movies) or above will be enough for smooth 
+ * frames per second (usual for movies) or above will be enough for smooth
  * animations. This is the same as setFrameRate(val).
- * 
+ *
  * Calling <a href="#/p5/frameRate">frameRate()</a> with no arguments returns
  * the current framerate. The draw function must run at least once before it will
  * return a value. This is the same as <a href="#/p5/getFrameRate">getFrameRate()</a>.
@@ -345,7 +345,7 @@ p5.prototype.setFrameRate = function(fps) {
  * </code></div>
  *
  * @alt
- * cursor becomes 10x 10 white ellipse the moves with mouse x and y.
+ * cursor becomes 10×10 white ellipse the moves with mouse x and y.
  */
 p5.prototype.noCursor = function() {
   this._curElement.elt.style.cursor = 'none';
@@ -580,8 +580,8 @@ p5.prototype.fullscreen = function(val) {
  * </div>
  *
  * @alt
- * fuzzy 50x50 white ellipse with black outline in center of canvas.
- * sharp 50x50 white ellipse with black outline in center of canvas.
+ * fuzzy 50×50 white ellipse with black outline in center of canvas.
+ * sharp 50×50 white ellipse with black outline in center of canvas.
  */
 /**
  * @method pixelDensity
@@ -621,7 +621,7 @@ p5.prototype.pixelDensity = function(val) {
  * </div>
  *
  * @alt
- * 50x50 white ellipse with black outline in center of canvas.
+ * 50×50 white ellipse with black outline in center of canvas.
  */
 p5.prototype.displayDensity = () => window.devicePixelRatio;
 

src/core/rendering.js

@@ -27,7 +27,7 @@ const defaultClass = 'p5Canvas';
  *
  * The system variables width and height are set by the parameters passed to this
  * function. If <a href="#/p5/createCanvas">createCanvas()</a> is not used, the
- * window will be given a default size of 100x100 pixels.
+ * window will be given a default size of 100×100 pixels.
  *
  * For more ways to position the canvas, see the
  * <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>

src/core/shape/2d_primitives.js

@@ -253,7 +253,7 @@ p5.prototype.arc = function(x, y, w, h, start, stop, mode, detail) {
  * </div>
  *
  * @alt
- *white ellipse with black outline in middle-right of canvas that is 55x55
+ *white ellipse with black outline in middle-right of canvas that is 55×55
  */
 
 /**
@@ -295,7 +295,7 @@ p5.prototype.ellipse = function(x, y, w, h, detailX) {
  * </div>
  *
  * @alt
- * white circle with black outline in mid of canvas that is 55x55.
+ * white circle with black outline in mid of canvas that is 55×55.
  */
 p5.prototype.circle = function() {
   p5._validateParameters('circle', arguments);
@@ -595,9 +595,9 @@ p5.prototype.quad = function(...args) {
  * </div>
  *
  * @alt
- * 55x55 white rect with black outline in mid-right of canvas.
- * 55x55 white rect with black outline and rounded edges in mid-right of canvas.
- * 55x55 white rect with black outline and rounded edges of different radii.
+ * 55×55 white rect with black outline in mid-right of canvas.
+ * 55×55 white rect with black outline and rounded edges in mid-right of canvas.
+ * 55×55 white rect with black outline and rounded edges of different radii.
  */
 
 /**
@@ -662,9 +662,9 @@ p5.prototype.rect = function() {
  * </div>
  *
  * @alt
- * 55x55 white square with black outline in mid-right of canvas.
- * 55x55 white square with black outline and rounded edges in mid-right of canvas.
- * 55x55 white square with black outline and rounded edges of different radii.
+ * 55×55 white square with black outline in mid-right of canvas.
+ * 55×55 white square with black outline and rounded edges in mid-right of canvas.
+ * 55×55 white square with black outline and rounded edges of different radii.
  */
 p5.prototype.square = function(x, y, s, tl, tr, br, bl) {
   p5._validateParameters('square', arguments);

src/core/shape/attributes.js

@@ -62,8 +62,8 @@ import * as constants from '../constants';
  * </div>
  *
  * @alt
- * 60x60 white ellipse and 30x30 grey ellipse with black outlines at center.
- * 60x60 white ellipse and 30x30 grey ellipse top-right with black outlines.
+ * 60×60 white ellipse and 30×30 grey ellipse with black outlines at center.
+ * 60×60 white ellipse and 30×30 grey ellipse top-right with black outlines.
  */
 p5.prototype.ellipseMode = function(m) {
   p5._validateParameters('ellipseMode', arguments);
@@ -100,7 +100,7 @@ p5.prototype.ellipseMode = function(m) {
  * </div>
  *
  * @alt
- * 2 pixelated 36x36 white ellipses to left & right of center, black background
+ * 2 pixelated 36×36 white ellipses to left & right of center, black background
  */
 p5.prototype.noSmooth = function() {
   this.setAttributes('antialias', false);
@@ -165,8 +165,8 @@ p5.prototype.noSmooth = function() {
  * </div>
  *
  * @alt
- * 50x50 white rect at center and 25x25 grey rect in the top left of the other.
- * 50x50 white rect at center and 25x25 grey rect in the center of the other.
+ * 50×50 white rect at center and 25×25 grey rect in the top left of the other.
+ * 50×50 white rect at center and 25×25 grey rect in the center of the other.
  */
 p5.prototype.rectMode = function(m) {
   p5._validateParameters('rectMode', arguments);
@@ -204,7 +204,7 @@ p5.prototype.rectMode = function(m) {
  * </div>
  *
  * @alt
- * 2 pixelated 36x36 white ellipses one left one right of center. On black.
+ * 2 pixelated 36×36 white ellipses one left one right of center. On black.
  */
 p5.prototype.smooth = function() {
   this.setAttributes('antialias', true);

src/core/shape/curves.js

@@ -476,7 +476,7 @@ p5.prototype.curveTightness = function(t) {
  * </code>
  * </div>
  *
- *line hooking down to right-bottom with 13 5x5 white ellipse points
+ *line hooking down to right-bottom with 13 5×5 white ellipse points
  */
 p5.prototype.curvePoint = function(a, b, c, d, t) {
   p5._validateParameters('curvePoint', arguments);

src/core/shape/vertex.js

@@ -261,7 +261,7 @@ p5.prototype.beginContour = function() {
  * 2 white triangle shapes mid-right canvas. left one pointing up and right down.
  * 5 horizontal interlocking and alternating white triangles in mid-right canvas.
  * 4 interlocking white triangles in 45 degree rotated square-shape.
- * 2 white rectangle shapes in mid-right canvas. Both 20x55.
+ * 2 white rectangle shapes in mid-right canvas. Both 20×55.
  * 3 side-by-side white rectangles center rect is smaller in mid-right canvas.
  * Thick white l-shape with black outline mid-top-left of canvas.
  */