ninjdai/April
1
0
Fork 0
mirror of https://github.com/Art-Portal/April.git synced 2024-11-16 11:37:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add 8 effects

Browse Source
This commit is contained in:
Ninjdai1 2023-09-10 08:38:43 +02:00
parent 2f3f930d79
commit aa29f648a1
2 changed files with 243 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
commands/misc/graphisme.js
View File

@ -37,6 +37,14 @@ module.exports = {
{ name: 'Nuance de gris', value: 'grayscale' }, { name: 'Nuance de gris', value: 'grayscale' },
{ name: 'Sepia', value: 'sepia' }, { name: 'Sepia', value: 'sepia' },
{ name: 'Flou', value: 'blur' }, { name: 'Flou', value: 'blur' },
{ name: 'Pixelisé', value: 'pixelate' },
{ name: 'Miroir', value: 'mirror' },
{ name: 'Rotation', value: 'rotate' },
{ name: 'Luminosité', value: 'brightness' },
{ name: 'Vintage', value: 'vintage' },
{ name: 'Peinture à l\'huile', value: 'oilpaint' },
{ name: 'Aquarelle', value: 'watercolor' },
{ name: 'Néon', value: 'neon' },
)) ))
), ),
async execute(interaction) { async execute(interaction) {

234
commands/misc/graphismecommands/remix.js
View File

@ -27,6 +27,30 @@ module.exports = {
case 'blur': case 'blur':
applyBlurEffect(ctx); applyBlurEffect(ctx);
break; break;
case 'pixelate':
applyPixelateEffect(ctx);
break;
case 'mirror':
applyMirrorEffect(ctx);
break;
case 'rotate':
applyRotateEffect(ctx, image);
break;
case 'brightness':
applyBrightnessEffect(ctx);
break;
case 'vintage':
applyVintageEffect(ctx);
break;
case 'oilpaint':
applyOilPaintEffect(ctx, 8, 8);
break;
case 'watercolor':
applyWatercolorEffect(ctx);
break;
case 'neon':
applyNeonEffect(ctx);
break;
} }
const remixedImageBuffer = canvas.toBuffer(); const remixedImageBuffer = canvas.toBuffer();
@ -125,4 +149,214 @@ function applyBlurEffect(ctx) {
} }
ctx.putImageData(imageData, 0, 0); ctx.putImageData(imageData, 0, 0);
}
// Fonction pour appliquer l'effet de pixelisation
function applyPixelateEffect(ctx) {
const pixelSize = 10; // Taille des pixels
for (let y = 0; y < ctx.canvas.height; y += pixelSize) {
for (let x = 0; x < ctx.canvas.width; x += pixelSize) {
const pixelColor = ctx.getImageData(x, y, pixelSize, pixelSize);
ctx.fillStyle = `rgb(${pixelColor.data[0]}, ${pixelColor.data[1]}, ${pixelColor.data[2]})`;
ctx.fillRect(x, y, pixelSize, pixelSize);
}
}
}
// Fonction pour appliquer l'effet de miroir horizontal
function applyMirrorEffect(ctx) {
const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
const data = imageData.data;
const width = ctx.canvas.width;
const height = ctx.canvas.height;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width / 2; x++) {
const indexA = (y * width + x) * 4;
const indexB = (y * width + (width - x - 1)) * 4;
// Échangez les valeurs de pixel pour le miroir horizontal
[data[indexA], data[indexB]] = [data[indexB], data[indexA]];
[data[indexA + 1], data[indexB + 1]] = [data[indexB + 1], data[indexA + 1]];
[data[indexA + 2], data[indexB + 2]] = [data[indexB + 2], data[indexA + 2]];
}
}
ctx.putImageData(imageData, 0, 0);
}
// Fonction pour appliquer l'effet de rotation
function applyRotateEffect(ctx, image) {
ctx.save();
ctx.translate(ctx.canvas.width/2,ctx.canvas.height/2);
ctx.rotate(90*Math.PI/180);
ctx.drawImage(image,-image.width/2,-image.width/2);
ctx.restore();
} }
// Fonction pour appliquer l'effet de luminosité
function applyBrightnessEffect(ctx) {
const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
const data = imageData.data;
const brightnessFactor = 1.5; // Facteur de luminosité (ajustez selon vos préférences)
for (let i = 0; i < data.length; i += 4) {
data[i] = Math.min(255, data[i] * brightnessFactor);
data[i + 1] = Math.min(255, data[i + 1] * brightnessFactor);
data[i + 2] = Math.min(255, data[i + 2] * brightnessFactor);
}
ctx.putImageData(imageData, 0, 0);
}
// Fonction pour appliquer l'effet vintage
function applyVintageEffect(ctx) {
const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
data[i] = Math.min(255, r * 1.5);
data[i + 1] = Math.min(255, g * 1.2);
data[i + 2] = Math.min(255, b * 0.8);
}
ctx.putImageData(imageData, 0, 0);
}
// Fonction pour appliquer l'effet de peinture à l'huile (oil paint)
function applyOilPaintEffect(ctx, radius, intensity) {
var width = ctx.canvas.width,
height = ctx.canvas.height,
imgData = ctx.getImageData(0, 0, width, height),
pixData = imgData.data,
pixelIntensityCount = [];
destCanvas = ctx.canvas;
destCanvas.width = width;
destCanvas.height = height;
var destImageData = ctx.createImageData(width, height),
destPixData = destImageData.data,
intensityLUT = [],
rgbLUT = [];
for (var y = 0; y < height; y++) {
intensityLUT[y] = [];
rgbLUT[y] = [];
for (var x = 0; x < width; x++) {
var idx = (y * width + x) * 4,
r = pixData[idx],
g = pixData[idx + 1],
b = pixData[idx + 2],
avg = (r + g + b) / 3;
intensityLUT[y][x] = Math.round((avg * intensity) / 255);
rgbLUT[y][x] = {
r: r,
g: g,
b: b
};
}
}
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
pixelIntensityCount = [];
// Find intensities of nearest pixels within radius.
for (var yy = -radius; yy <= radius; yy++) {
for (var xx = -radius; xx <= radius; xx++) {
if (y + yy > 0 && y + yy < height && x + xx > 0 && x + xx < width) {
var intensityVal = intensityLUT[y + yy][x + xx];
if (!pixelIntensityCount[intensityVal]) {
pixelIntensityCount[intensityVal] = {
val: 1,
r: rgbLUT[y + yy][x + xx].r,
g: rgbLUT[y + yy][x + xx].g,
b: rgbLUT[y + yy][x + xx].b
}
} else {
pixelIntensityCount[intensityVal].val++;
pixelIntensityCount[intensityVal].r += rgbLUT[y + yy][x + xx].r;
pixelIntensityCount[intensityVal].g += rgbLUT[y + yy][x + xx].g;
pixelIntensityCount[intensityVal].b += rgbLUT[y + yy][x + xx].b;
}
}
}
}
pixelIntensityCount.sort(function (a, b) {
return b.val - a.val;
});
var curMax = pixelIntensityCount[0].val,
dIdx = (y * width + x) * 4;
destPixData[dIdx] = ~~ (pixelIntensityCount[0].r / curMax);
destPixData[dIdx + 1] = ~~ (pixelIntensityCount[0].g / curMax);
destPixData[dIdx + 2] = ~~ (pixelIntensityCount[0].b / curMax);
destPixData[dIdx + 3] = 255;
}
}
// change this to ctx to instead put the data on the original canvas
ctx.putImageData(destImageData, 0, 0);
}
// Fonction pour appliquer l'effet aquarelle (watercolor)
function applyWatercolorEffect(ctx) {
const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
const data = imageData.data;
const width = ctx.canvas.width;
const height = ctx.canvas.height;
const radius = Math.floor(Math.random() * 10)+2;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const pixelIndex = (y * width + x) * 4;
const randomX = x + Math.floor(Math.random() * (radius * 2 + 1)) - radius;
const randomY = y + Math.floor(Math.random() * (radius * 2 + 1)) - radius;
const neighborIndex = (randomY * width + randomX) * 4;
// On copie un pixel voisin au hasard
if (randomX >= 0 && randomX < width && randomY >= 0 && randomY < height) {
data[pixelIndex] = data[neighborIndex];
data[pixelIndex + 1] = data[neighborIndex + 1];
data[pixelIndex + 2] = data[neighborIndex + 2];
}
}
}
ctx.putImageData(imageData, 0, 0);
}
// Fonction pour appliquer l'effet néon
function applyNeonEffect(ctx) {
const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// Augmentez la saturation des couleurs
data[i] = r > 128 ? 255 : 0;
data[i + 1] = g > 128 ? 255 : 0;
data[i + 2] = b > 128 ? 255 : 0;
}
ctx.putImageData(imageData, 0, 0);
}