From 2a826015236ef0e819ecb8bcb8f007e68c29407d Mon Sep 17 00:00:00 2001 From: Daniel Odendahl Jr Date: Sun, 5 Nov 2017 15:30:45 +0000 Subject: [PATCH] Seperate canvas util functions --- commands/avatar-edit/distort.js | 2 +- commands/avatar-edit/glitch.js | 2 +- commands/avatar-edit/greyscale.js | 2 +- commands/avatar-edit/invert.js | 2 +- commands/avatar-edit/rip.js | 2 +- commands/avatar-edit/sepia.js | 2 +- commands/avatar-edit/silhouette.js | 2 +- commands/avatar-edit/thug-life.js | 2 +- commands/avatar-edit/triggered.js | 2 +- commands/avatar-edit/wanted.js | 2 +- commands/games/whos-that-pokemon.js | 3 +- package.json | 2 +- util/Canvas.js | 77 +++++++++++++++++++++++++++++ util/Util.js | 74 --------------------------- 14 files changed, 90 insertions(+), 86 deletions(-) create mode 100644 util/Canvas.js diff --git a/commands/avatar-edit/distort.js b/commands/avatar-edit/distort.js index 9e5ab933..f778b900 100644 --- a/commands/avatar-edit/distort.js +++ b/commands/avatar-edit/distort.js @@ -1,7 +1,7 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); -const { distort } = require('../../util/Util'); +const { distort } = require('../../util/Canvas'); module.exports = class DistortCommand extends Command { constructor(client) { diff --git a/commands/avatar-edit/glitch.js b/commands/avatar-edit/glitch.js index f6ba5681..38ff4278 100644 --- a/commands/avatar-edit/glitch.js +++ b/commands/avatar-edit/glitch.js @@ -1,7 +1,7 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); -const { distort } = require('../../util/Util'); +const { distort } = require('../../util/Canvas'); module.exports = class GlitchCommand extends Command { constructor(client) { diff --git a/commands/avatar-edit/greyscale.js b/commands/avatar-edit/greyscale.js index f3709306..8ddb11c3 100644 --- a/commands/avatar-edit/greyscale.js +++ b/commands/avatar-edit/greyscale.js @@ -1,7 +1,7 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); -const { greyscale } = require('../../util/Util'); +const { greyscale } = require('../../util/Canvas'); module.exports = class GreyscaleCommand extends Command { constructor(client) { diff --git a/commands/avatar-edit/invert.js b/commands/avatar-edit/invert.js index e3dcc093..f3e6421e 100644 --- a/commands/avatar-edit/invert.js +++ b/commands/avatar-edit/invert.js @@ -1,7 +1,7 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); -const { invert } = require('../../util/Util'); +const { invert } = require('../../util/Canvas'); module.exports = class InvertCommand extends Command { constructor(client) { diff --git a/commands/avatar-edit/rip.js b/commands/avatar-edit/rip.js index 79dd18ea..b7d4afa0 100644 --- a/commands/avatar-edit/rip.js +++ b/commands/avatar-edit/rip.js @@ -2,7 +2,7 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); const path = require('path'); -const { greyscale } = require('../../util/Util'); +const { greyscale } = require('../../util/Canvas'); module.exports = class RIPCommand extends Command { constructor(client) { diff --git a/commands/avatar-edit/sepia.js b/commands/avatar-edit/sepia.js index a802765a..2ee6c452 100644 --- a/commands/avatar-edit/sepia.js +++ b/commands/avatar-edit/sepia.js @@ -1,7 +1,7 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); -const { sepia } = require('../../util/Util'); +const { sepia } = require('../../util/Canvas'); module.exports = class SepiaCommand extends Command { constructor(client) { diff --git a/commands/avatar-edit/silhouette.js b/commands/avatar-edit/silhouette.js index a18085b5..1a2a5ba9 100644 --- a/commands/avatar-edit/silhouette.js +++ b/commands/avatar-edit/silhouette.js @@ -1,7 +1,7 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); -const { silhouette } = require('../../util/Util'); +const { silhouette } = require('../../util/Canvas'); module.exports = class SilhouetteCommand extends Command { constructor(client) { diff --git a/commands/avatar-edit/thug-life.js b/commands/avatar-edit/thug-life.js index f7788899..2c485c49 100644 --- a/commands/avatar-edit/thug-life.js +++ b/commands/avatar-edit/thug-life.js @@ -2,7 +2,7 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); const path = require('path'); -const { greyscale } = require('../../util/Util'); +const { greyscale } = require('../../util/Canvas'); module.exports = class ThugLifeCommand extends Command { constructor(client) { diff --git a/commands/avatar-edit/triggered.js b/commands/avatar-edit/triggered.js index 5d578bf6..37b8b6cc 100644 --- a/commands/avatar-edit/triggered.js +++ b/commands/avatar-edit/triggered.js @@ -2,7 +2,7 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); const path = require('path'); -const { drawImageWithTint } = require('../../util/Util'); +const { drawImageWithTint } = require('../../util/Canvas'); module.exports = class TriggeredCommand extends Command { constructor(client) { diff --git a/commands/avatar-edit/wanted.js b/commands/avatar-edit/wanted.js index 48761c89..8443e26f 100644 --- a/commands/avatar-edit/wanted.js +++ b/commands/avatar-edit/wanted.js @@ -2,7 +2,7 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); const path = require('path'); -const { sepia } = require('../../util/Util'); +const { sepia } = require('../../util/Canvas'); module.exports = class WantedCommand extends Command { constructor(client) { diff --git a/commands/games/whos-that-pokemon.js b/commands/games/whos-that-pokemon.js index 53183415..b3c7f76b 100644 --- a/commands/games/whos-that-pokemon.js +++ b/commands/games/whos-that-pokemon.js @@ -1,7 +1,8 @@ const { Command } = require('discord.js-commando'); const { createCanvas, loadImage } = require('canvas'); const snekfetch = require('snekfetch'); -const { filterPkmn, pad, silhouette } = require('../../util/Util'); +const { filterPkmn, pad } = require('../../util/Util'); +const { silhouette } = require('../../util/Canvas'); module.exports = class WhosThatPokemonCommand extends Command { constructor(client) { diff --git a/package.json b/package.json index be3f75f1..7854a6e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "xiaobot", - "version": "51.4.1", + "version": "51.4.2", "description": "Your personal server companion.", "main": "XiaoBot.js", "scripts": { diff --git a/util/Canvas.js b/util/Canvas.js new file mode 100644 index 00000000..ee2611ce --- /dev/null +++ b/util/Canvas.js @@ -0,0 +1,77 @@ +class CanvasUtil { + static greyscale(ctx, x, y, width, height) { + const data = ctx.getImageData(x, y, width, height); + for (let i = 0; i < data.data.length; i += 4) { + const brightness = (0.34 * data.data[i]) + (0.5 * data.data[i + 1]) + (0.16 * data.data[i + 2]); + data.data[i] = brightness; + data.data[i + 1] = brightness; + data.data[i + 2] = brightness; + } + ctx.putImageData(data, x, y); + return ctx; + } + + static invert(ctx, x, y, width, height) { + const data = ctx.getImageData(x, y, width, height); + for (let i = 0; i < data.data.length; i += 4) { + data.data[i] = 255 - data.data[i]; + data.data[i + 1] = 255 - data.data[i + 1]; + data.data[i + 2] = 255 - data.data[i + 2]; + } + ctx.putImageData(data, x, y); + return ctx; + } + + static silhouette(ctx, x, y, width, height) { + const data = ctx.getImageData(x, y, width, height); + for (let i = 0; i < data.data.length; i += 4) { + data.data[i] = 0; + data.data[i + 1] = 0; + data.data[i + 2] = 0; + } + ctx.putImageData(data, x, y); + return ctx; + } + + static sepia(ctx, x, y, width, height) { + const data = ctx.getImageData(x, y, width, height); + for (let i = 0; i < data.data.length; i += 4) { + const brightness = (0.34 * data.data[i]) + (0.5 * data.data[i + 1]) + (0.16 * data.data[i + 2]); + data.data[i] = brightness + 100; + data.data[i + 1] = brightness + 50; + data.data[i + 2] = brightness; + } + ctx.putImageData(data, x, y); + return ctx; + } + + static distort(ctx, x, y, width, height, amplitude, strideLevel = 4) { + const data = ctx.getImageData(x, y, width, height); + const temp = ctx.getImageData(x, y, width, height); + const stride = width * strideLevel; + for (let i = 0; i < width; i++) { + for (let j = 0; j < height; j++) { + const xs = Math.round(amplitude * Math.sin(2 * Math.PI * 3 * (j / height))); + const ys = Math.round(amplitude * Math.cos(2 * Math.PI * 3 * (i / width))); + const dest = (j * stride) + (i * strideLevel); + const src = ((j + ys) * stride) + ((i + xs) * strideLevel); + data.data[dest] = temp.data[src]; + data.data[dest + 1] = temp.data[src + 1]; + data.data[dest + 2] = temp.data[src + 2]; + } + } + ctx.putImageData(data, x, y); + return ctx; + } + + static drawImageWithTint(ctx, image, color, x, y, width, height) { + ctx.globalAlpha = 0.5; + ctx.fillStyle = color; + ctx.fillRect(x, y, width, height); + ctx.drawImage(image, x, y, width, height); + ctx.globalAlpha = 1; + ctx.fillStyle = '#000000'; + } +} + +module.exports = CanvasUtil; diff --git a/util/Util.js b/util/Util.js index fa3a5839..10a0e496 100644 --- a/util/Util.js +++ b/util/Util.js @@ -82,80 +82,6 @@ class Util { .replace(/\[i\]|\[\/i\]/g, '*'); } - static greyscale(ctx, x, y, width, height) { - const data = ctx.getImageData(x, y, width, height); - for (let i = 0; i < data.data.length; i += 4) { - const brightness = (0.34 * data.data[i]) + (0.5 * data.data[i + 1]) + (0.16 * data.data[i + 2]); - data.data[i] = brightness; - data.data[i + 1] = brightness; - data.data[i + 2] = brightness; - } - ctx.putImageData(data, x, y); - return ctx; - } - - static invert(ctx, x, y, width, height) { - const data = ctx.getImageData(x, y, width, height); - for (let i = 0; i < data.data.length; i += 4) { - data.data[i] = 255 - data.data[i]; - data.data[i + 1] = 255 - data.data[i + 1]; - data.data[i + 2] = 255 - data.data[i + 2]; - } - ctx.putImageData(data, x, y); - return ctx; - } - - static silhouette(ctx, x, y, width, height) { - const data = ctx.getImageData(x, y, width, height); - for (let i = 0; i < data.data.length; i += 4) { - data.data[i] = 0; - data.data[i + 1] = 0; - data.data[i + 2] = 0; - } - ctx.putImageData(data, x, y); - return ctx; - } - - static sepia(ctx, x, y, width, height) { - const data = ctx.getImageData(x, y, width, height); - for (let i = 0; i < data.data.length; i += 4) { - const brightness = (0.34 * data.data[i]) + (0.5 * data.data[i + 1]) + (0.16 * data.data[i + 2]); - data.data[i] = brightness + 100; - data.data[i + 1] = brightness + 50; - data.data[i + 2] = brightness; - } - ctx.putImageData(data, x, y); - return ctx; - } - - static distort(ctx, x, y, width, height, amplitude, strideLevel = 4) { - const data = ctx.getImageData(x, y, width, height); - const temp = ctx.getImageData(x, y, width, height); - const stride = width * strideLevel; - for (let i = 0; i < width; i++) { - for (let j = 0; j < height; j++) { - const xs = Math.round(amplitude * Math.sin(2 * Math.PI * 3 * (j / height))); - const ys = Math.round(amplitude * Math.cos(2 * Math.PI * 3 * (i / width))); - const dest = (j * stride) + (i * strideLevel); - const src = ((j + ys) * stride) + ((i + xs) * strideLevel); - data.data[dest] = temp.data[src]; - data.data[dest + 1] = temp.data[src + 1]; - data.data[dest + 2] = temp.data[src + 2]; - } - } - ctx.putImageData(data, x, y); - return ctx; - } - - static drawImageWithTint(ctx, image, color, x, y, width, height) { - ctx.globalAlpha = 0.5; - ctx.fillStyle = color; - ctx.fillRect(x, y, width, height); - ctx.drawImage(image, x, y, width, height); - ctx.globalAlpha = 1; - ctx.fillStyle = '#000000'; - } - static async verify(channel, user, time = 30000) { const filter = res => { const value = res.content.toLowerCase();