From b37173984f6e55e83ebb13b1b088a426cc62e61f Mon Sep 17 00:00:00 2001 From: Zearin Date: Sat, 22 Jan 2022 13:05:27 -0500 Subject: [PATCH 1/4] =?UTF-8?q?docs(src/color/):=20Use=20`describe('?= =?UTF-8?q?=E2=80=A6')`=20over=20`@alt`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Summary:** - This commit converts all the uses of `@alt` I found in 📁`src/color`. - Since `@alt` was not linted for line length while `describe(…)` is, I had to add line breaks to the descriptions for the lint to pass (and allow the commit to go through). **Related Issues & Pull Requests:** - This is a small piece of the checklist described in Issue #5139 (by @lm-n). - That issue, in turn, was begun in Pull Request #5140 (also by @lm-n). - In Issue #5427, the idea requiring this for the inline docs got positive support from several members (including @lmccart, @outofambit, and @catarak). --- src/color/creating_reading.js | 67 +++++++++---------- src/color/p5.Color.js | 23 ++----- src/color/setting.js | 120 ++++++++++++++++------------------ 3 files changed, 94 insertions(+), 116 deletions(-) diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js index 17d3cd2fd2..35903d92cc 100644 --- a/src/color/creating_reading.js +++ b/src/color/creating_reading.js @@ -31,11 +31,9 @@ import '../core/friendly_errors/fes_core'; * let value = alpha(c); // Sets 'value' to 102 * fill(value); * rect(50, 15, 35, 70); + * describe('Left half of canvas light blue and right half light charcoal grey.'); * * - * - * @alt - * Left half of canvas light blue and right half light charcoal grey. */ p5.prototype.alpha = function(c) { p5._validateParameters('alpha', arguments); @@ -58,11 +56,10 @@ p5.prototype.alpha = function(c) { * let blueValue = blue(c); * fill(0, 0, blueValue); * rect(50, 20, 35, 60); // Draw right rectangle + * describe('Left half of canvas light purple and right half a royal blue.'); * * * - * @alt - * Left half of canvas light purple and right half a royal blue. */ p5.prototype.blue = function(c) { p5._validateParameters('blue', arguments); @@ -88,6 +85,8 @@ p5.prototype.blue = function(c) { * let value = brightness(c); // Sets 'value' to 255 * fill(value); * rect(50, 20, 35, 60); + * describe(`Left half of canvas salmon pink and the right half with its + * brightness colored white.`); * * * @@ -101,12 +100,10 @@ p5.prototype.blue = function(c) { * let value = brightness(c); // A 'value' of 50% is 127.5 * fill(value); * rect(50, 20, 35, 60); + * describe(`Left half of canvas olive colored and the right half with its + * brightness color gray.`); * * - * - * @alt - * Left half of canvas salmon pink and the right half with its brightness colored white. - * Left half of canvas olive colored and the right half with its brightness color gray. */ p5.prototype.brightness = function(c) { p5._validateParameters('brightness', arguments); @@ -144,6 +141,8 @@ p5.prototype.brightness = function(c) { * fill(c); * noStroke(); * rect(30, 20, 55, 55); + * describe(`Yellow rect in middle right of canvas, + * with 55 pixel width and height.`); * * * @@ -157,6 +156,8 @@ p5.prototype.brightness = function(c) { * c = color(65); * fill(c); * ellipse(75, 75, 80, 80); + * describe(`Yellow ellipse in top left of canvas, black ellipse in bottom + * right, both 80×80.`); * * * @@ -167,6 +168,7 @@ p5.prototype.brightness = function(c) { * fill(c); * noStroke(); * rect(20, 20, 60, 60); + * describe('Bright fuchsia rect in middle of canvas, 60 pixel width and height.'); * * * @@ -180,6 +182,7 @@ p5.prototype.brightness = function(c) { * c = color('#00ff00'); * fill(c); * rect(55, 10, 45, 80); + * describe('Two bright green rects on opposite sides of the canvas, both 45×80.'); * * * @@ -201,6 +204,7 @@ p5.prototype.brightness = function(c) { * c = color('rgba(0%, 0%, 100%, 1)'); * fill(c); * rect(55, 55, 35, 35); // Draw rectangle + * describe('Four blue rects in each corner of the canvas, each are 35×35.'); * * * @@ -214,6 +218,8 @@ p5.prototype.brightness = function(c) { * c = color('hsla(160, 100%, 50%, 0.5)'); * fill(c); * rect(55, 10, 45, 80); // Draw rectangle + * describe(`Bright sea green rect on left and darker rect on right of canvas, + * both 45×80.`); * * * @@ -227,6 +233,8 @@ p5.prototype.brightness = function(c) { * c = color('hsba(160, 100%, 50%, 0.5)'); * fill(c); * rect(55, 10, 45, 80); // Draw rectangle + * describe(`Dark green rect on left and lighter green rect on right of canvas, + * both 45×80.`); * * * @@ -240,18 +248,10 @@ p5.prototype.brightness = function(c) { * c = color(50, 55, 100); * fill(c); * rect(55, 10, 45, 80); + * describe(`Dark blue rect on left and light teal rect on right of canvas, + * both 45×80.`); * * - * - * @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 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 45×80. - * Four blue rects in each corner of the canvas, each are 35×35. - * 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. */ /** @@ -312,11 +312,10 @@ p5.prototype.color = function() { * print(greenValue); // Print "75.0" * fill(0, greenValue, 0); // Use 'greenValue' in new fill * rect(50, 20, 35, 60); // Draw right rectangle + * describe(`blue rect on left and green on right, both with black outlines + * & 35×60.`); * * - * - * @alt - * blue rect on left and green on right, both with black outlines & 35×60. */ p5.prototype.green = function(c) { p5._validateParameters('green', arguments); @@ -347,11 +346,10 @@ p5.prototype.green = function(c) { * let value = hue(c); // Sets 'value' to "0" * fill(value); * rect(50, 20, 35, 60); + * describe('salmon pink rect on left and black on right, both 35×60.'); * * * - * @alt - * salmon pink rect on left and black on right, both 35×60. */ p5.prototype.hue = function(c) { p5._validateParameters('hue', arguments); @@ -394,11 +392,10 @@ p5.prototype.hue = function(c) { * rect(50, 20, 20, 60); * fill(to); * rect(70, 20, 20, 60); + * describe(`4 rects one tan, brown, brownish purple, purple, with white + * outlines & 20×60`); * * - * - * @alt - * 4 rects one tan, brown, brownish purple, purple, with white outlines & 20×60 */ p5.prototype.lerpColor = function(c1, c2, amt) { @@ -468,11 +465,10 @@ p5.prototype.lerpColor = function(c1, c2, amt) { * let value = lightness(c); // Sets 'value' to 50 * fill(value); * rect(50, 20, 35, 60); + * describe(`light pastel green rect on left and dark grey rect on right, + * both 35×60.`); * * - * - * @alt - * light pastel green rect on left and dark grey rect on right, both 35×60. */ p5.prototype.lightness = function(c) { p5._validateParameters('lightness', arguments); @@ -497,6 +493,8 @@ p5.prototype.lightness = function(c) { * print(redValue); // Print "255.0" * fill(redValue, 0, 0); // Use 'redValue' in new fill * rect(50, 20, 35, 60); // Draw right rectangle + * describe(`yellow rect on left and red rect on right, both with black + * outlines and 35×60.`); * * * @@ -507,12 +505,9 @@ p5.prototype.lightness = function(c) { * colorMode(RGB, 1); // Sets the range for red, green, and blue to 1 * let myColor = red(c); * print(myColor); // 0.4980392156862745 + * describe('grey canvas'); * * - * - * @alt - * yellow rect on left and red rect on right, both with black outlines and 35×60. - * grey canvas */ p5.prototype.red = function(c) { p5._validateParameters('red', arguments); @@ -542,11 +537,9 @@ p5.prototype.red = function(c) { * let value = saturation(c); // Sets 'value' to 126 * fill(value); * rect(50, 20, 35, 60); + * describe('deep pink rect on left and grey rect on right, both 35×60.'); * * - * - * @alt - *deep pink rect on left and grey rect on right, both 35×60. */ p5.prototype.saturation = function(c) { p5._validateParameters('saturation', arguments); diff --git a/src/color/p5.Color.js b/src/color/p5.Color.js index 6eda86a0c1..1bc7efde8f 100644 --- a/src/color/p5.Color.js +++ b/src/color/p5.Color.js @@ -73,6 +73,7 @@ p5.Color = function(pInst, vals) { * text(myColor.toString(), 0, -5); * text(myColor.toString('#rrggbb'), 0, -30); * text(myColor.toString('rgba%'), 0, -55); + * describe('A canvas with 3 text representation of their color.'); * * * @@ -82,9 +83,6 @@ p5.Color = function(pInst, vals) { * text(myColor.toString('#rrggbb'), 25, 25); * * - * - * @alt - * A canvas with 3 text representation of their color. */ p5.Color.prototype.toString = function(format) { const a = this.levels; @@ -271,11 +269,9 @@ p5.Color.prototype.toString = function(format) { * backgroundColor.setRed(128 + 128 * sin(millis() / 1000)); * background(backgroundColor); * } + * describe('canvas with gradually changing background color'); * * - * - * @alt - * canvas with gradually changing background color */ p5.Color.prototype.setRed = function(new_red) { this._array[0] = new_red / this.maxes[constants.RGB][0]; @@ -295,11 +291,10 @@ p5.Color.prototype.setRed = function(new_red) { * backgroundColor.setGreen(128 + 128 * sin(millis() / 1000)); * background(backgroundColor); * } + * describe('canvas with gradually changing background color'); * * * - * @alt - * canvas with gradually changing background color **/ p5.Color.prototype.setGreen = function(new_green) { this._array[1] = new_green / this.maxes[constants.RGB][1]; @@ -319,11 +314,10 @@ p5.Color.prototype.setGreen = function(new_green) { * backgroundColor.setBlue(128 + 128 * sin(millis() / 1000)); * background(backgroundColor); * } + * describe('canvas with gradually changing background color'); * * * - * @alt - * canvas with gradually changing background color **/ p5.Color.prototype.setBlue = function(new_blue) { this._array[2] = new_blue / this.maxes[constants.RGB][2]; @@ -346,11 +340,9 @@ p5.Color.prototype.setBlue = function(new_blue) { * fill(squareColor); * rect(13, 13, width - 26, height - 26); * } + * describe('a square with gradually changing opacity on a gray background'); * * - * - * @alt - * a square with gradually changing opacity on a gray background **/ p5.Color.prototype.setAlpha = function(new_alpha) { this._array[3] = new_alpha / this.maxes[this.mode][3]; @@ -777,11 +769,10 @@ const colorPatterns = { *
* * // todo + * // + * // describe(''); * *
- * - * @alt - * //todo */ p5.Color._parseInputs = function(r, g, b, a) { const numArgs = arguments.length; diff --git a/src/color/setting.js b/src/color/setting.js index 604df5f897..70a9652b50 100644 --- a/src/color/setting.js +++ b/src/color/setting.js @@ -40,6 +40,7 @@ import './p5.Color'; * * // Grayscale integer value * background(51); + * describe('canvas with darkest charcoal grey background.'); * * * @@ -47,6 +48,7 @@ import './p5.Color'; * * // R, G & B integer values * background(255, 204, 0); + * describe('canvas with yellow background.'); * * * @@ -55,6 +57,7 @@ import './p5.Color'; * // H, S & B integer values * colorMode(HSB); * background(255, 204, 100); + * describe('canvas with royal blue background.'); * * * @@ -62,6 +65,7 @@ import './p5.Color'; * * // Named SVG/CSS color string * background('red'); + * describe('canvas with red background.'); * * * @@ -69,6 +73,7 @@ import './p5.Color'; * * // three-digit hexadecimal RGB notation * background('#fae'); + * describe('canvas with pink background.'); * * * @@ -76,6 +81,7 @@ import './p5.Color'; * * // six-digit hexadecimal RGB notation * background('#222222'); + * describe('canvas with black background.'); * * * @@ -83,6 +89,7 @@ import './p5.Color'; * * // integer RGB notation * background('rgb(0,255,0)'); + * describe('canvas with bright green background.'); * * * @@ -90,6 +97,7 @@ import './p5.Color'; * * // integer RGBA notation * background('rgba(0,255,0, 0.25)'); + * describe('canvas with soft green background.'); * * * @@ -97,6 +105,7 @@ import './p5.Color'; * * // percentage RGB notation * background('rgb(100%,0%,10%)'); + * describe('canvas with red background.'); * * * @@ -104,6 +113,7 @@ import './p5.Color'; * * // percentage RGBA notation * background('rgba(100%,0%,100%,0.5)'); + * describe('canvas with light purple background.'); * * * @@ -111,21 +121,9 @@ import './p5.Color'; * * // p5 Color object * background(color(0, 0, 255)); + * describe('canvas with blue background.'); * * - * - * @alt - * canvas with darkest charcoal grey background. - * canvas with yellow background. - * canvas with royal blue background. - * canvas with red background. - * canvas with pink background. - * canvas with black background. - * canvas with bright green background. - * canvas with soft green background. - * canvas with red background. - * canvas with light purple background. - * canvas with blue background. */ /** @@ -204,11 +202,11 @@ p5.prototype.background = function(...args) { * clear(); * background(128); * } + * describe(`small white ellipses are continually drawn at mouse’s x and y + * coordinates.`); * * * - * @alt - * small white ellipses are continually drawn at mouse's x and y coordinates. * * @param {Number} r normalized red val. * @param {Number} g normalized green val. @@ -255,6 +253,8 @@ p5.prototype.clear = function(...args) { * point(i, j); * } * } + * describe(`Green to red gradient from bottom L to top R. + * Shading originates from top left.`); * * * @@ -268,6 +268,8 @@ p5.prototype.clear = function(...args) { * point(i, j); * } * } + * describe(`Rainbow gradient from left to right. + * Brightness increasing to white at top.`); * * * @@ -278,6 +280,7 @@ p5.prototype.clear = function(...args) { * colorMode(RGB, 1); * let myColor = c._getRed(); * text(myColor, 10, 10, 80, 80); + * describe('unknown image.'); * * * @@ -290,14 +293,11 @@ p5.prototype.clear = function(...args) { * stroke(255, 0, 10, 0.3); * ellipse(40, 40, 50, 50); * ellipse(50, 50, 40, 40); + * describe(`50×50 ellipse at middle L & 40×40 ellipse at center. + * Translucent pink outlines.`); * * - * - * @alt - *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. - *50×50 ellipse at middle L & 40×40 ellipse at center. Translucent pink outlines. + */ /** @@ -373,6 +373,8 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * // Grayscale integer value * fill(51); * rect(20, 20, 60, 60); + * describe(`60×60 dark charcoal grey rect with black outline in center + * of canvas.`); * * * @@ -381,6 +383,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * // R, G & B integer values * fill(255, 204, 0); * rect(20, 20, 60, 60); + * describe('60×60 yellow rect with black outline in center of canvas.'); * * * @@ -390,6 +393,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * colorMode(HSB); * fill(255, 204, 100); * rect(20, 20, 60, 60); + * describe('60×60 royal blue rect with black outline in center of canvas.'); * * * @@ -398,6 +402,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * // Named SVG/CSS color string * fill('red'); * rect(20, 20, 60, 60); + * describe('60×60 red rect with black outline in center of canvas.'); * * * @@ -406,6 +411,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * // three-digit hexadecimal RGB notation * fill('#fae'); * rect(20, 20, 60, 60); + * describe('60×60 pink rect with black outline in center of canvas.'); * * * @@ -414,6 +420,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * // six-digit hexadecimal RGB notation * fill('#222222'); * rect(20, 20, 60, 60); + * describe('60×60 black rect with black outline in center of canvas.'); * * * @@ -422,6 +429,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * // integer RGB notation * fill('rgb(0,255,0)'); * rect(20, 20, 60, 60); + * describe('60×60 light green rect with black outline in center of canvas.'); * * * @@ -430,6 +438,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * // integer RGBA notation * fill('rgba(0,255,0, 0.25)'); * rect(20, 20, 60, 60); + * describe('60×60 soft green rect with black outline in center of canvas.'); * * * @@ -438,6 +447,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * // percentage RGB notation * fill('rgb(100%,0%,10%)'); * rect(20, 20, 60, 60); + * describe('60×60 red rect with black outline in center of canvas.'); * * * @@ -446,6 +456,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * // percentage RGBA notation * fill('rgba(100%,0%,100%,0.5)'); * rect(20, 20, 60, 60); + * describe('60×60 dark fuchsia rect with black outline in center of canvas.'); * * * @@ -454,21 +465,9 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) { * // p5 Color object * fill(color(0, 0, 255)); * rect(20, 20, 60, 60); + * describe('60×60 blue rect with black outline in center of canvas.'); * * - * - * @alt - * 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. */ /** @@ -515,6 +514,8 @@ p5.prototype.fill = function(...args) { * rect(15, 10, 55, 55); * noFill(); * rect(20, 20, 60, 60); + * describe(`white rect top middle and noFill rect center. + * Both 60×60 with black outlines.`); * * * @@ -532,12 +533,9 @@ p5.prototype.fill = function(...args) { * rotateY(frameCount * 0.01); * box(45, 45, 45); * } + * describe('black canvas with purple cube wireframe spinning'); * * - * - * @alt - * 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() { this._renderer._setProperty('_doFill', false); @@ -555,6 +553,7 @@ p5.prototype.noFill = function() { * * noStroke(); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. no outline.'); * * * @@ -572,12 +571,9 @@ p5.prototype.noFill = function() { * rotateY(frameCount * 0.01); * box(45, 45, 45); * } + * describe('black canvas with pink cube spinning'); * * - * - * @alt - * 60×60 white rect at center. no outline. - * black canvas with pink cube spinning */ p5.prototype.noStroke = function() { this._renderer._setProperty('_doStroke', false); @@ -615,6 +611,7 @@ p5.prototype.noStroke = function() { * strokeWeight(4); * stroke(51); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Dark charcoal grey outline.'); * * * @@ -624,6 +621,7 @@ p5.prototype.noStroke = function() { * stroke(255, 204, 0); * strokeWeight(4); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Yellow outline.'); * * * @@ -634,6 +632,7 @@ p5.prototype.noStroke = function() { * strokeWeight(4); * stroke(255, 204, 100); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Royal blue outline.'); * * * @@ -643,6 +642,7 @@ p5.prototype.noStroke = function() { * stroke('red'); * strokeWeight(4); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Red outline.'); * * * @@ -652,6 +652,7 @@ p5.prototype.noStroke = function() { * stroke('#fae'); * strokeWeight(4); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Pink outline.'); * * * @@ -661,6 +662,7 @@ p5.prototype.noStroke = function() { * stroke('#222222'); * strokeWeight(4); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Black outline.'); * * * @@ -670,6 +672,7 @@ p5.prototype.noStroke = function() { * stroke('rgb(0,255,0)'); * strokeWeight(4); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Bright green outline.'); * * * @@ -679,6 +682,7 @@ p5.prototype.noStroke = function() { * stroke('rgba(0,255,0,0.25)'); * strokeWeight(4); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Soft green outline.'); * * * @@ -688,6 +692,7 @@ p5.prototype.noStroke = function() { * stroke('rgb(100%,0%,10%)'); * strokeWeight(4); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Red outline.'); * * * @@ -697,6 +702,7 @@ p5.prototype.noStroke = function() { * stroke('rgba(100%,0%,100%,0.5)'); * strokeWeight(4); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Dark fuchsia outline.'); * * * @@ -706,21 +712,9 @@ p5.prototype.noStroke = function() { * stroke(color(0, 0, 255)); * strokeWeight(4); * rect(20, 20, 60, 60); + * describe('60×60 white rect at center. Blue outline.'); * * - * - * @alt - * 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. */ /** @@ -783,6 +777,8 @@ p5.prototype.stroke = function(...args) { * erase(); * ellipse(25, 30, 30); * noErase(); + * describe(`60×60 centered pink rect, purple background. + * Elliptical area in top-left of rect is erased white.`); * * * @@ -795,6 +791,8 @@ p5.prototype.stroke = function(...args) { * erase(150, 255); * triangle(50, 10, 70, 50, 90, 10); * noErase(); + * describe(`60×60 centered purple rect, mint green background. + * Triangle in top-right is partially erased with fully erased outline.`); * * * @@ -822,13 +820,10 @@ p5.prototype.stroke = function(...args) { * torus(15, 5); * noErase(); * } + * describe(`60×60 centered teal sphere, yellow background. + * Torus rotating around sphere erases to reveal black text underneath.`); * * - * - * @alt - * 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); @@ -855,11 +850,10 @@ p5.prototype.erase = function(opacityFill = 255, opacityStroke = 255) { * ellipse(50, 50, 60); * noErase(); * rect(70, 10, 10, 80); + * describe(`Orange background, with two tall blue rectangles. + * A centered ellipse erased the first blue rect but not the second.`); * * - * - * @alt - * Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second. */ p5.prototype.noErase = function() { From 05ba1265e42a00cb1a0a1dd750d7109844317cce Mon Sep 17 00:00:00 2001 From: Zearin Date: Sun, 30 Jan 2022 12:44:01 -0500 Subject: [PATCH 2/4] =?UTF-8?q?docs(src/color):=20Edit=20descriptions=20fo?= =?UTF-8?q?r=20@lm-n=E2=80=98s=20feedback?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Link to relevant feedback: https://github.com/processing/p5.js/pull/5577#discussion_r795217925 --- src/color/setting.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/color/setting.js b/src/color/setting.js index 70a9652b50..04c14868f8 100644 --- a/src/color/setting.js +++ b/src/color/setting.js @@ -514,8 +514,8 @@ p5.prototype.fill = function(...args) { * rect(15, 10, 55, 55); * noFill(); * rect(20, 20, 60, 60); - * describe(`white rect top middle and noFill rect center. - * Both 60×60 with black outlines.`); + * describe(`White rect at top middle and noFill rect center, + * both with black outlines.`); * * * @@ -553,7 +553,7 @@ p5.prototype.noFill = function() { * * noStroke(); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. no outline.'); + * describe('White rect at center; no outline.'); * * * @@ -611,7 +611,7 @@ p5.prototype.noStroke = function() { * strokeWeight(4); * stroke(51); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Dark charcoal grey outline.'); + * describe('White rect at center with dark charcoal grey outline.'); * * * @@ -621,7 +621,7 @@ p5.prototype.noStroke = function() { * stroke(255, 204, 0); * strokeWeight(4); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Yellow outline.'); + * describe('White rect at center with yellow outline.'); * * * @@ -632,7 +632,7 @@ p5.prototype.noStroke = function() { * strokeWeight(4); * stroke(255, 204, 100); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Royal blue outline.'); + * describe('White rect at center with royal blue outline.'); * * * @@ -642,7 +642,7 @@ p5.prototype.noStroke = function() { * stroke('red'); * strokeWeight(4); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Red outline.'); + * describe('White rect at center with red outline.'); * * * @@ -652,7 +652,7 @@ p5.prototype.noStroke = function() { * stroke('#fae'); * strokeWeight(4); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Pink outline.'); + * describe('White rect at center with pink outline.'); * * * @@ -662,7 +662,7 @@ p5.prototype.noStroke = function() { * stroke('#222222'); * strokeWeight(4); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Black outline.'); + * describe('White rect at center with black outline.'); * * * @@ -672,7 +672,7 @@ p5.prototype.noStroke = function() { * stroke('rgb(0,255,0)'); * strokeWeight(4); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Bright green outline.'); + * describe('White rect at center with bright green outline.'); * * * @@ -682,7 +682,7 @@ p5.prototype.noStroke = function() { * stroke('rgba(0,255,0,0.25)'); * strokeWeight(4); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Soft green outline.'); + * describe('White rect at center with soft green outline.'); * * * @@ -692,7 +692,7 @@ p5.prototype.noStroke = function() { * stroke('rgb(100%,0%,10%)'); * strokeWeight(4); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Red outline.'); + * describe('White rect at center with red outline.'); * * * @@ -702,7 +702,7 @@ p5.prototype.noStroke = function() { * stroke('rgba(100%,0%,100%,0.5)'); * strokeWeight(4); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Dark fuchsia outline.'); + * describe('White rect at center with dark fuchsia outline.'); * * * @@ -712,7 +712,7 @@ p5.prototype.noStroke = function() { * stroke(color(0, 0, 255)); * strokeWeight(4); * rect(20, 20, 60, 60); - * describe('60×60 white rect at center. Blue outline.'); + * describe('White rect at center with blue outline.'); * * */ From fa38cdba9553cf73696bc78b056bb147adab6a7e Mon Sep 17 00:00:00 2001 From: Zearin Date: Sun, 30 Jan 2022 16:36:33 -0500 Subject: [PATCH 3/4] docs(src/color): Move `describe()` into functions where possible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Should fix the failing tests 🤞 --- src/color/p5.Color.js | 8 ++++---- src/color/setting.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/color/p5.Color.js b/src/color/p5.Color.js index 1bc7efde8f..373c047370 100644 --- a/src/color/p5.Color.js +++ b/src/color/p5.Color.js @@ -268,8 +268,8 @@ p5.Color.prototype.toString = function(format) { * function draw() { * backgroundColor.setRed(128 + 128 * sin(millis() / 1000)); * background(backgroundColor); + * describe('canvas with gradually changing background color'); * } - * describe('canvas with gradually changing background color'); * * */ @@ -290,8 +290,8 @@ p5.Color.prototype.setRed = function(new_red) { * function draw() { * backgroundColor.setGreen(128 + 128 * sin(millis() / 1000)); * background(backgroundColor); + * describe('canvas with gradually changing background color'); * } - * describe('canvas with gradually changing background color'); * * * @@ -313,8 +313,8 @@ p5.Color.prototype.setGreen = function(new_green) { * function draw() { * backgroundColor.setBlue(128 + 128 * sin(millis() / 1000)); * background(backgroundColor); + * describe('canvas with gradually changing background color'); * } - * describe('canvas with gradually changing background color'); * * * @@ -339,8 +339,8 @@ p5.Color.prototype.setBlue = function(new_blue) { * squareColor.setAlpha(128 + 128 * sin(millis() / 1000)); * fill(squareColor); * rect(13, 13, width - 26, height - 26); + * describe('a square with gradually changing opacity on a gray background'); * } - * describe('a square with gradually changing opacity on a gray background'); * * **/ diff --git a/src/color/setting.js b/src/color/setting.js index 04c14868f8..c7eedd23ac 100644 --- a/src/color/setting.js +++ b/src/color/setting.js @@ -532,8 +532,8 @@ p5.prototype.fill = function(...args) { * rotateX(frameCount * 0.01); * rotateY(frameCount * 0.01); * box(45, 45, 45); + * describe('black canvas with purple cube wireframe spinning'); * } - * describe('black canvas with purple cube wireframe spinning'); * * */ @@ -570,8 +570,8 @@ p5.prototype.noFill = function() { * rotateX(frameCount * 0.01); * rotateY(frameCount * 0.01); * box(45, 45, 45); + * describe('black canvas with pink cube spinning'); * } - * describe('black canvas with pink cube spinning'); * * */ @@ -819,9 +819,9 @@ p5.prototype.stroke = function(...args) { * translate(0, 0, 40); * torus(15, 5); * noErase(); + * describe(`60×60 centered teal sphere, yellow background. + * Torus rotating around sphere erases to reveal black text underneath.`); * } - * describe(`60×60 centered teal sphere, yellow background. - * Torus rotating around sphere erases to reveal black text underneath.`); * * */ From 78d53cd69969e23847a9f5689b0f27a6e87c81e1 Mon Sep 17 00:00:00 2001 From: Zearin Date: Sun, 30 Jan 2022 16:46:14 -0500 Subject: [PATCH 4/4] =?UTF-8?q?docs(src/color):=20I=20missed=20one.=20(D?= =?UTF-8?q?=E2=80=99oh)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/color/setting.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/color/setting.js b/src/color/setting.js index c7eedd23ac..c3a0e7b69a 100644 --- a/src/color/setting.js +++ b/src/color/setting.js @@ -197,13 +197,13 @@ p5.prototype.background = function(...args) { * // Clear the screen on mouse press. * function draw() { * ellipse(mouseX, mouseY, 20, 20); + * describe(`small white ellipses are continually drawn at mouse’s x and y + * coordinates.`); * } * function mousePressed() { * clear(); * background(128); * } - * describe(`small white ellipses are continually drawn at mouse’s x and y - * coordinates.`); * * *