Add 8 effects

commands/misc/graphisme.js

@@ -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) {

commands/misc/graphismecommands/remix.js

@@ -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);
+}