From 22e70ce0957cc8ba0304f12e1ebc1d921ec71639 Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Thu, 12 Oct 2017 10:37:02 -0400 Subject: [PATCH 01/11] =?UTF-8?q?Remove=20unused=20arguments=20for=20?= =?UTF-8?q?=E2=80=9Cclear=E2=80=9D=20block?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/blocks/scratch3_pen.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index c6866f25d..cbf5de9e5 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -246,15 +246,7 @@ class Scratch3PenBlocks { blocks: [ { opcode: 'clear', - blockType: BlockType.COMMAND, - arguments: { - NUM1: { - type: ArgumentType.NUMBER - }, - NUM2: { - type: ArgumentType.NUMBER - } - } + blockType: BlockType.COMMAND }, { opcode: 'stamp', From 3d6644609f3dafe18fb21c84e1c7c5c4a9dda2e1 Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Thu, 12 Oct 2017 10:43:20 -0400 Subject: [PATCH 02/11] Add new set/change color param blocks with menu And remove set/change color and shade blocks. All 4 params are now scaled 0-100. --- src/blocks/scratch3_pen.js | 222 ++++++++++++++++--------------------- 1 file changed, 95 insertions(+), 127 deletions(-) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index cbf5de9e5..d3f3c7d6b 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -6,6 +6,19 @@ const Color = require('../util/color'); const MathUtil = require('../util/math-util'); const RenderedTarget = require('../sprites/rendered-target'); + +/** + * Enum for pen color parameters. + * @readonly + * @enum {string} + */ +const ColorParam = { + HUE: 'hue', + SATURATION: 'saturation', + BRIGHTNESS: 'brightness', + TRANSPARENCY: 'transparency' +}; + /** * @typedef {object} PenState - the pen state associated with a particular target. * @property {Boolean} penDown - tracks whether the pen should draw for this target. @@ -55,7 +68,9 @@ class Scratch3PenBlocks { static get DEFAULT_PEN_STATE () { return { penDown: false, - hue: 120, + hue: 33, + saturation: 100, + brightness: 100, shade: 50, transparency: 0, penAttributes: { @@ -170,26 +185,6 @@ class Scratch3PenBlocks { } } - /** - * Update the cached color from the hue, shade and transparency values in the provided - * PenState object. - * @param {PenState} penState - the pen state to update. - * @private - */ - _updatePenColor (penState) { - let rgb = Color.hsvToRgb({h: penState.hue * 180 / 100, s: 1, v: 1}); - const shade = (penState.shade > 100) ? 200 - penState.shade : penState.shade; - if (shade < 50) { - rgb = Color.mixRgb(Color.RGB_BLACK, rgb, (10 + shade) / 60); - } else { - rgb = Color.mixRgb(rgb, Color.RGB_WHITE, (shade - 50) / 60); - } - penState.penAttributes.color4f[0] = rgb.r / 255.0; - penState.penAttributes.color4f[1] = rgb.g / 255.0; - penState.penAttributes.color4f[2] = rgb.b / 255.0; - penState.penAttributes.color4f[3] = this._transparencyToAlpha(penState.transparency); - } - /** * Wrap a pen hue or shade values to the range (0,200). * @param {number} value - the pen hue or shade value to the proper range. @@ -202,13 +197,17 @@ class Scratch3PenBlocks { return value; } + _wrapHue (value) { + return MathUtil.wrapClamp(value, 0, 100); + } + /** - * Clamp a pen transparency value to the range (0,100). - * @param {number} value - the pen transparency value to be clamped. + * Clamp a pen color parameter to the range (0,100). + * @param {number} value - the value to be clamped. * @returns {number} the clamped value. * @private */ - _clampTransparency (value) { + _clampColorParam (value) { return MathUtil.clamp(value, 0, 100); } @@ -273,44 +272,32 @@ class Scratch3PenBlocks { } }, { - opcode: 'changePenHueBy', + opcode: 'changePenColorParamBy', blockType: BlockType.COMMAND, - text: 'change pen color by [COLOR]', + text: 'change pen [COLOR_PARAM] by [VALUE]', arguments: { - COLOR: { + COLOR_PARAM: { + type: ArgumentType.STRING, + menu: 'colorParam', + defaultValue: ColorParam.HUE + }, + VALUE: { type: ArgumentType.NUMBER, defaultValue: 10 } } }, { - opcode: 'setPenHueToNumber', + opcode: 'setPenColorParamTo', blockType: BlockType.COMMAND, - text: 'set pen color to [COLOR]', + text: 'set pen [COLOR_PARAM] to [VALUE]', arguments: { - COLOR: { - type: ArgumentType.NUMBER, - defaultValue: 0 - } - } - }, - { - opcode: 'changePenShadeBy', - blockType: BlockType.COMMAND, - text: 'change pen shade by [SHADE]', - arguments: { - SHADE: { - type: ArgumentType.NUMBER, - defaultValue: 10 - } - } - }, - { - opcode: 'setPenShadeToNumber', - blockType: BlockType.COMMAND, - text: 'set pen shade to [SHADE]', - arguments: { - SHADE: { + COLOR_PARAM: { + type: ArgumentType.STRING, + menu: 'colorParam', + defaultValue: ColorParam.HUE + }, + VALUE: { type: ArgumentType.NUMBER, defaultValue: 50 } @@ -338,7 +325,12 @@ class Scratch3PenBlocks { } } } - ] + ], + menus: { + colorParam: + [ColorParam.HUE, ColorParam.SATURATION, + ColorParam.BRIGHTNESS, ColorParam.TRANSPARENCY] + } }; } @@ -413,65 +405,65 @@ class Scratch3PenBlocks { const penState = this._getPenState(util.target); const rgb = Cast.toRgbColorObject(args.COLOR); const hsv = Color.rgbToHsv(rgb); + penState.hue = (hsv.h / 360) * 100; + penState.saturation = hsv.s * 100; + penState.brightness = hsv.v * 100; + this._updatePenColor(penState); + } - penState.hue = 200 * hsv.h / 360; - penState.shade = 50 * hsv.v; + /** + * Update the cached color from the hue, saturation, brightness and transparency values + * in the provided PenState object. + * @param {PenState} penState - the pen state to update. + * @private + */ + _updatePenColor (penState) { + let rgb = Color.hsvToRgb({ + h: penState.hue * 360 / 100, + s: penState.saturation / 100, + v: penState.brightness / 100 + }); penState.penAttributes.color4f[0] = rgb.r / 255.0; penState.penAttributes.color4f[1] = rgb.g / 255.0; penState.penAttributes.color4f[2] = rgb.b / 255.0; - if (rgb.hasOwnProperty('a')) { // Will there always be an 'a'? - penState.penAttributes.color4f[3] = rgb.a / 255.0; - } else { - penState.penAttributes.color4f[3] = 1; + penState.penAttributes.color4f[3] = this._transparencyToAlpha(penState.transparency); + } + + changePenColorParamBy (args, util) { + const penState = this._getPenState(util.target); + switch (args.COLOR_PARAM) { + case ColorParam.HUE: + penState.hue = this._wrapHue(penState.hue + Cast.toNumber(args.VALUE)); + break; + case ColorParam.SATURATION: + penState.saturation = this._clampColorParam(penState.saturation + Cast.toNumber(args.VALUE)); + break; + case ColorParam.BRIGHTNESS: + penState.brightness = this._clampColorParam(penState.brightness + Cast.toNumber(args.VALUE)); + break; + case ColorParam.TRANSPARENCY: + penState.transparency = this._clampColorParam(penState.transparency + Cast.toNumber(args.VALUE)); + break; } - penState.transparency = this._alphaToTransparency(penState.penAttributes.color4f[3]); - } - - /** - * The pen "change pen color by {number}" block rotates the hue of the pen by the given amount. - * @param {object} args - the block arguments. - * @property {number} COLOR - the amount of desired hue rotation. - * @param {object} util - utility object provided by the runtime. - */ - changePenHueBy (args, util) { - const penState = this._getPenState(util.target); - penState.hue = this._wrapHueOrShade(penState.hue + Cast.toNumber(args.COLOR)); this._updatePenColor(penState); } - /** - * The pen "set pen color to {number}" block sets the hue of the pen. - * @param {object} args - the block arguments. - * @property {number} COLOR - the desired hue. - * @param {object} util - utility object provided by the runtime. - */ - setPenHueToNumber (args, util) { + setPenColorParamTo (args, util) { const penState = this._getPenState(util.target); - penState.hue = this._wrapHueOrShade(Cast.toNumber(args.COLOR)); - this._updatePenColor(penState); - } - - /** - * The pen "change pen shade by {number}" block changes the "shade" of the pen, related to the HSV value. - * @param {object} args - the block arguments. - * @property {number} SHADE - the amount of desired shade change. - * @param {object} util - utility object provided by the runtime. - */ - changePenShadeBy (args, util) { - const penState = this._getPenState(util.target); - penState.shade = this._wrapHueOrShade(penState.shade + Cast.toNumber(args.SHADE)); - this._updatePenColor(penState); - } - - /** - * The pen "set pen shade to {number}" block sets the "shade" of the pen, related to the HSV value. - * @param {object} args - the block arguments. - * @property {number} SHADE - the amount of desired shade change. - * @param {object} util - utility object provided by the runtime. - */ - setPenShadeToNumber (args, util) { - const penState = this._getPenState(util.target); - penState.shade = this._wrapHueOrShade(Cast.toNumber(args.SHADE)); + switch (args.COLOR_PARAM) { + case ColorParam.HUE: + penState.hue = this._wrapHue(Cast.toNumber(args.VALUE)); + break; + case ColorParam.SATURATION: + penState.saturation = this._clampColorParam(Cast.toNumber(args.VALUE)); + break; + case ColorParam.BRIGHTNESS: + penState.brightness = this._clampColorParam(Cast.toNumber(args.VALUE)); + break; + case ColorParam.TRANSPARENCY: + penState.transparency = this._clampColorParam(Cast.toNumber(args.VALUE)); + break; + } this._updatePenColor(penState); } @@ -496,30 +488,6 @@ class Scratch3PenBlocks { const penAttributes = this._getPenState(util.target).penAttributes; penAttributes.diameter = this._clampPenSize(Cast.toNumber(args.SIZE)); } - - /** - * The pen "change pen transparency by {number}" block changes the RGBA "transparency" of the pen. - * @param {object} args - the block arguments. - * @property {number} TRANSPARENCY - the amount of desired transparency change. - * @param {object} util - utility object provided by the runtime. - */ - changePenTransparencyBy (args, util) { - const penState = this._getPenState(util.target); - penState.transparency = this._clampTransparency(penState.transparency + Cast.toNumber(args.TRANSPARENCY)); - this._updatePenColor(penState); - } - - /** - * The pen "set pen transparency to {number}" block sets the RGBA "transparency" of the pen. - * @param {object} args - the block arguments. - * @property {number} TRANSPARENCY - the amount of desired transparency change. - * @param {object} util - utility object provided by the runtime. - */ - setPenTransparencyTo (args, util) { - const penState = this._getPenState(util.target); - penState.transparency = this._clampTransparency(Cast.toNumber(args.TRANSPARENCY)); - this._updatePenColor(penState); - } } module.exports = Scratch3PenBlocks; From 4f8782cc841abc08f9037492588cdec61d03915b Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Tue, 17 Oct 2017 11:27:46 -0400 Subject: [PATCH 03/11] Remove unused function --- src/blocks/scratch3_pen.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index d3f3c7d6b..3d2b9f78f 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -185,18 +185,6 @@ class Scratch3PenBlocks { } } - /** - * Wrap a pen hue or shade values to the range (0,200). - * @param {number} value - the pen hue or shade value to the proper range. - * @returns {number} the wrapped value. - * @private - */ - _wrapHueOrShade (value) { - value = value % 200; - if (value < 0) value += 200; - return value; - } - _wrapHue (value) { return MathUtil.wrapClamp(value, 0, 100); } From 264042b4cc089728207d9675b77fdfb85fb52a89 Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Tue, 17 Oct 2017 12:22:53 -0400 Subject: [PATCH 04/11] =?UTF-8?q?Use=20the=20word=20=E2=80=9Ccolor?= =?UTF-8?q?=E2=80=9D=20instead=20of=20=E2=80=9Chue=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/blocks/scratch3_pen.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index 3d2b9f78f..d167ead6e 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -13,7 +13,7 @@ const RenderedTarget = require('../sprites/rendered-target'); * @enum {string} */ const ColorParam = { - HUE: 'hue', + COLOR: 'color', SATURATION: 'saturation', BRIGHTNESS: 'brightness', TRANSPARENCY: 'transparency' @@ -22,7 +22,7 @@ const ColorParam = { /** * @typedef {object} PenState - the pen state associated with a particular target. * @property {Boolean} penDown - tracks whether the pen should draw for this target. - * @property {number} hue - the current hue of the pen. + * @property {number} color - the current color (hue) of the pen. * @property {number} shade - the current shade of the pen. * @property {PenAttributes} penAttributes - cached pen attributes for the renderer. This is the authoritative value for * diameter but not for pen color. @@ -68,7 +68,7 @@ class Scratch3PenBlocks { static get DEFAULT_PEN_STATE () { return { penDown: false, - hue: 33, + color: 33, saturation: 100, brightness: 100, shade: 50, @@ -185,7 +185,7 @@ class Scratch3PenBlocks { } } - _wrapHue (value) { + _wrapColor (value) { return MathUtil.wrapClamp(value, 0, 100); } @@ -267,7 +267,7 @@ class Scratch3PenBlocks { COLOR_PARAM: { type: ArgumentType.STRING, menu: 'colorParam', - defaultValue: ColorParam.HUE + defaultValue: ColorParam.COLOR }, VALUE: { type: ArgumentType.NUMBER, @@ -283,7 +283,7 @@ class Scratch3PenBlocks { COLOR_PARAM: { type: ArgumentType.STRING, menu: 'colorParam', - defaultValue: ColorParam.HUE + defaultValue: ColorParam.COLOR }, VALUE: { type: ArgumentType.NUMBER, @@ -316,7 +316,7 @@ class Scratch3PenBlocks { ], menus: { colorParam: - [ColorParam.HUE, ColorParam.SATURATION, + [ColorParam.COLOR, ColorParam.SATURATION, ColorParam.BRIGHTNESS, ColorParam.TRANSPARENCY] } }; @@ -393,21 +393,21 @@ class Scratch3PenBlocks { const penState = this._getPenState(util.target); const rgb = Cast.toRgbColorObject(args.COLOR); const hsv = Color.rgbToHsv(rgb); - penState.hue = (hsv.h / 360) * 100; + penState.color = (hsv.h / 360) * 100; penState.saturation = hsv.s * 100; penState.brightness = hsv.v * 100; this._updatePenColor(penState); } /** - * Update the cached color from the hue, saturation, brightness and transparency values + * Update the cached color from the color, saturation, brightness and transparency values * in the provided PenState object. * @param {PenState} penState - the pen state to update. * @private */ _updatePenColor (penState) { let rgb = Color.hsvToRgb({ - h: penState.hue * 360 / 100, + h: penState.color * 360 / 100, s: penState.saturation / 100, v: penState.brightness / 100 }); @@ -420,8 +420,8 @@ class Scratch3PenBlocks { changePenColorParamBy (args, util) { const penState = this._getPenState(util.target); switch (args.COLOR_PARAM) { - case ColorParam.HUE: - penState.hue = this._wrapHue(penState.hue + Cast.toNumber(args.VALUE)); + case ColorParam.COLOR: + penState.color = this._wrapColor(penState.color + Cast.toNumber(args.VALUE)); break; case ColorParam.SATURATION: penState.saturation = this._clampColorParam(penState.saturation + Cast.toNumber(args.VALUE)); @@ -439,8 +439,8 @@ class Scratch3PenBlocks { setPenColorParamTo (args, util) { const penState = this._getPenState(util.target); switch (args.COLOR_PARAM) { - case ColorParam.HUE: - penState.hue = this._wrapHue(Cast.toNumber(args.VALUE)); + case ColorParam.COLOR: + penState.color = this._wrapColor(Cast.toNumber(args.VALUE)); break; case ColorParam.SATURATION: penState.saturation = this._clampColorParam(Cast.toNumber(args.VALUE)); From 086df4652ecc5708d25856f451082a234d0f5ec0 Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Tue, 17 Oct 2017 12:23:38 -0400 Subject: [PATCH 05/11] Remove references to pen shade --- src/blocks/scratch3_pen.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index d167ead6e..01891815f 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -23,7 +23,6 @@ const ColorParam = { * @typedef {object} PenState - the pen state associated with a particular target. * @property {Boolean} penDown - tracks whether the pen should draw for this target. * @property {number} color - the current color (hue) of the pen. - * @property {number} shade - the current shade of the pen. * @property {PenAttributes} penAttributes - cached pen attributes for the renderer. This is the authoritative value for * diameter but not for pen color. */ @@ -71,7 +70,6 @@ class Scratch3PenBlocks { color: 33, saturation: 100, brightness: 100, - shade: 50, transparency: 0, penAttributes: { color4f: [0, 0, 1, 1], From 240c48ad0c1ef4c3e6de837eb106330ca03d6152 Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Tue, 17 Oct 2017 19:31:51 -0400 Subject: [PATCH 06/11] Set or change color param with a single function --- src/blocks/scratch3_pen.js | 34 ++++++++++++---------------------- 1 file changed, 12 insertions(+), 22 deletions(-) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index 01891815f..e37765dfb 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -415,42 +415,32 @@ class Scratch3PenBlocks { penState.penAttributes.color4f[3] = this._transparencyToAlpha(penState.transparency); } - changePenColorParamBy (args, util) { - const penState = this._getPenState(util.target); - switch (args.COLOR_PARAM) { + _setOrChangeColorParam (param, value, penState, change) { + switch (param) { case ColorParam.COLOR: - penState.color = this._wrapColor(penState.color + Cast.toNumber(args.VALUE)); + penState.color = this._wrapColor(value + (change ? penState.color : 0)); break; case ColorParam.SATURATION: - penState.saturation = this._clampColorParam(penState.saturation + Cast.toNumber(args.VALUE)); + penState.saturation = this._clampColorParam(value + (change ? penState.saturation : 0)); break; case ColorParam.BRIGHTNESS: - penState.brightness = this._clampColorParam(penState.brightness + Cast.toNumber(args.VALUE)); + penState.brightness = this._clampColorParam(value + (change ? penState.brightness : 0)); break; case ColorParam.TRANSPARENCY: - penState.transparency = this._clampColorParam(penState.transparency + Cast.toNumber(args.VALUE)); + penState.transparency = this._clampColorParam(value + (change ? penState.transparency : 0)); break; } this._updatePenColor(penState); } + changePenColorParamBy (args, util) { + const penState = this._getPenState(util.target); + this._setOrChangeColorParam(args.COLOR_PARAM, Cast.toNumber(args.VALUE), penState, true); + } + setPenColorParamTo (args, util) { const penState = this._getPenState(util.target); - switch (args.COLOR_PARAM) { - case ColorParam.COLOR: - penState.color = this._wrapColor(Cast.toNumber(args.VALUE)); - break; - case ColorParam.SATURATION: - penState.saturation = this._clampColorParam(Cast.toNumber(args.VALUE)); - break; - case ColorParam.BRIGHTNESS: - penState.brightness = this._clampColorParam(Cast.toNumber(args.VALUE)); - break; - case ColorParam.TRANSPARENCY: - penState.transparency = this._clampColorParam(Cast.toNumber(args.VALUE)); - break; - } - this._updatePenColor(penState); + this._setOrChangeColorParam(args.COLOR_PARAM, Cast.toNumber(args.VALUE), penState, false); } /** From a32f7a6402052a7fe22eb9d5f7d50964e6e55815 Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Tue, 17 Oct 2017 23:10:58 -0400 Subject: [PATCH 07/11] Default color setting matches default RGB values For color (hue) in range 0-100, to get RGB (0, 0, 1), we need to use 100 * 2/3 = 66.66 --- src/blocks/scratch3_pen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index e37765dfb..84aad4c55 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -67,7 +67,7 @@ class Scratch3PenBlocks { static get DEFAULT_PEN_STATE () { return { penDown: false, - color: 33, + color: 66.66, saturation: 100, brightness: 100, transparency: 0, From aab1b834d6b82e4461937405f1ebb1bb909f8739 Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Tue, 17 Oct 2017 23:13:05 -0400 Subject: [PATCH 08/11] On set color using picker, reset transparency to 0 --- src/blocks/scratch3_pen.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index 84aad4c55..ed120409c 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -383,6 +383,7 @@ class Scratch3PenBlocks { /** * The pen "set pen color to {color}" block sets the pen to a particular RGB color. + * The transparency is reset to 0. * @param {object} args - the block arguments. * @property {int} COLOR - the color to set, expressed as a 24-bit RGB value (0xRRGGBB). * @param {object} util - utility object provided by the runtime. @@ -394,6 +395,7 @@ class Scratch3PenBlocks { penState.color = (hsv.h / 360) * 100; penState.saturation = hsv.s * 100; penState.brightness = hsv.v * 100; + penState.transparency = 0; this._updatePenColor(penState); } From b5ad5e1f6b88575eb2ef5269c5ffc9385c32932b Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Wed, 18 Oct 2017 11:33:25 -0400 Subject: [PATCH 09/11] Warn on set or change unknown color parameter --- src/blocks/scratch3_pen.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index ed120409c..7eff46a03 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -5,7 +5,7 @@ const Clone = require('../util/clone'); const Color = require('../util/color'); const MathUtil = require('../util/math-util'); const RenderedTarget = require('../sprites/rendered-target'); - +const log = require('../util/log'); /** * Enum for pen color parameters. @@ -431,6 +431,9 @@ class Scratch3PenBlocks { case ColorParam.TRANSPARENCY: penState.transparency = this._clampColorParam(value + (change ? penState.transparency : 0)); break; + default: + log.warn(`Tried to set or change unknown color parameter: ${param}`); + } this._updatePenColor(penState); } From bddabdbac6cbe4a08ccd8b43bc52493f8ee2f7e5 Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Wed, 18 Oct 2017 11:48:45 -0400 Subject: [PATCH 10/11] JSDocs --- src/blocks/scratch3_pen.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index 7eff46a03..ac2af4506 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -183,6 +183,12 @@ class Scratch3PenBlocks { } } + /** + * Wrap a color input into the range (0,100). + * @param {number} value - the value to be wrapped. + * @returns {number} the wrapped value. + * @private + */ _wrapColor (value) { return MathUtil.wrapClamp(value, 0, 100); } @@ -417,6 +423,14 @@ class Scratch3PenBlocks { penState.penAttributes.color4f[3] = this._transparencyToAlpha(penState.transparency); } + /** + * Set or change a single color parameter on the pen state, and update the pen color. + * @param {ColorParam} param - the name of the color parameter to set or change. + * @param {number} value - the value to set or change the param by. + * @param {PenState} penState - the pen state to update. + * @param {boolean} change - if true change param by value, if false set param to value. + * @private + */ _setOrChangeColorParam (param, value, penState, change) { switch (param) { case ColorParam.COLOR: @@ -438,11 +452,27 @@ class Scratch3PenBlocks { this._updatePenColor(penState); } + /** + * The "change pen {ColorParam} by {number}" block changes one of the pen's color parameters + * by a given amound. + * @param {object} args - the block arguments. + * @property {ColorParam} COLOR_PARAM - the name of the selected color parameter. + * @property {number} VALUE - the amount to change the selected parameter by. + * @param {object} util - utility object provided by the runtime. + */ changePenColorParamBy (args, util) { const penState = this._getPenState(util.target); this._setOrChangeColorParam(args.COLOR_PARAM, Cast.toNumber(args.VALUE), penState, true); } + /** + * The "set pen {ColorParam} to {number}" block sets one of the pen's color parameters + * to a given amound. + * @param {object} args - the block arguments. + * @property {ColorParam} COLOR_PARAM - the name of the selected color parameter. + * @property {number} VALUE - the amount to set the selected parameter to. + * @param {object} util - utility object provided by the runtime. + */ setPenColorParamTo (args, util) { const penState = this._getPenState(util.target); this._setOrChangeColorParam(args.COLOR_PARAM, Cast.toNumber(args.VALUE), penState, false); From 0a18ce728790edf0bdcc7fa1019bf4d0af7ebd7e Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Wed, 18 Oct 2017 13:16:24 -0400 Subject: [PATCH 11/11] Lint --- src/blocks/scratch3_pen.js | 33 ++++++++++++++++----------------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/src/blocks/scratch3_pen.js b/src/blocks/scratch3_pen.js index ac2af4506..9ac233c7b 100644 --- a/src/blocks/scratch3_pen.js +++ b/src/blocks/scratch3_pen.js @@ -321,7 +321,7 @@ class Scratch3PenBlocks { menus: { colorParam: [ColorParam.COLOR, ColorParam.SATURATION, - ColorParam.BRIGHTNESS, ColorParam.TRANSPARENCY] + ColorParam.BRIGHTNESS, ColorParam.TRANSPARENCY] } }; } @@ -412,7 +412,7 @@ class Scratch3PenBlocks { * @private */ _updatePenColor (penState) { - let rgb = Color.hsvToRgb({ + const rgb = Color.hsvToRgb({ h: penState.color * 360 / 100, s: penState.saturation / 100, v: penState.brightness / 100 @@ -433,21 +433,20 @@ class Scratch3PenBlocks { */ _setOrChangeColorParam (param, value, penState, change) { switch (param) { - case ColorParam.COLOR: - penState.color = this._wrapColor(value + (change ? penState.color : 0)); - break; - case ColorParam.SATURATION: - penState.saturation = this._clampColorParam(value + (change ? penState.saturation : 0)); - break; - case ColorParam.BRIGHTNESS: - penState.brightness = this._clampColorParam(value + (change ? penState.brightness : 0)); - break; - case ColorParam.TRANSPARENCY: - penState.transparency = this._clampColorParam(value + (change ? penState.transparency : 0)); - break; - default: - log.warn(`Tried to set or change unknown color parameter: ${param}`); - + case ColorParam.COLOR: + penState.color = this._wrapColor(value + (change ? penState.color : 0)); + break; + case ColorParam.SATURATION: + penState.saturation = this._clampColorParam(value + (change ? penState.saturation : 0)); + break; + case ColorParam.BRIGHTNESS: + penState.brightness = this._clampColorParam(value + (change ? penState.brightness : 0)); + break; + case ColorParam.TRANSPARENCY: + penState.transparency = this._clampColorParam(value + (change ? penState.transparency : 0)); + break; + default: + log.warn(`Tried to set or change unknown color parameter: ${param}`); } this._updatePenColor(penState); }