mirror of
https://github.com/Art-Portal/April.git
synced 2024-12-26 03:14:17 +01:00
Add 8 effects
This commit is contained in:
Ninjdai1
parent
2f3f930d79
commit
aa29f648a1
@ -37,6 +37,14 @@ module.exports = {
|
||||
{ name: 'Nuance de gris', value: 'grayscale' },
|
||||
{ name: 'Sepia', value: 'sepia' },
|
||||
{ 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) {
|
||||
|
||||
@ -27,6 +27,30 @@ module.exports = {
|
||||
case 'blur':
|
||||
applyBlurEffect(ctx);
|
||||
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();
|
||||
@ -125,4 +149,214 @@ function applyBlurEffect(ctx) {
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user