Verarbeitung: Pixel ändert Farben durch den Mauszeiger bewegt sich über

Question

Wie konvertiert man dieses Programm in eine Farbänderung?

Answer 1

Um Kevins ausgezeichnete Antwort hinzuzufügen: brechen Sie es zuerst ab.

"Farben ändern" = set() oder pixels[]. (obwohl Satz langsamer sein kann, kann es mehr intuitiv sein, mit zu beginnen und den Dreh bekommen)

„schwarz/weiß (Graustufe)“ - ein color() mit dem gleichen r, g, b-Wert ist im Wesentlichen Graustufen- . Sie können get() die Helligkeit eines Pixels mit der passenden brightness() Funktion verwenden.get() wird der Cursor für eine gegebene x abrufen, y-Koordinaten-Paar (wie mouseX,mouseY zum Beispiel)

Das wäre super einfach zu implementieren:

1. Last das Bild
2. die Pixelfarbe an den Cursor-Koordinaten erhalten
3. die Helligkeit des Pixels erhalten
4. einen Grauwert von der Helligkeit an den gleichen Koordinaten basierend eingestellt

Hier ein kurzer Auszug:

PImage image; 

void setup(){ 
    size(200,200); 
    image = loadImage("https://processing.org/tutorials/pixels/imgs/tint1.jpg"); 
} 
void draw(){ 
    //modify output - cheap grayscale by using the pixel brightness 
    image.set(mouseX,mouseY,color(//make a gray scale colour... 
          brightness(//from the brightness... 
           image.get(mouseX,mouseY)//of the pixel under cursor 
          ) 
          )); 
    //draw the result; 
    image(image,0,0); 
} 

Es wäre viel Bewegung nehmen das gesamte Bild in Graustufen zu machen.

Eine andere Option wäre eine Kopie des Bildes, die filtered Graustufen, die Sie an eine mask() anwenden können. Wenn Sie die Maus bewegen, zeigt diese Maske mehr und mehr das Graustufenbild. Eine einfache Möglichkeit, diese Maske dynamisch zu gestalten, ist die Verwendung von PGraphics, wie Kevin bereits erwähnt hat. Es funktioniert im Wesentlichen als separate Ebene, in die Sie mit den typischen Verarbeitungsfunktionen zeichnen können. Der einzige Haken ist, dass Sie diese Zeichenfunktionsaufrufe innerhalb von beginDraw()/endDraw() aufrufen müssen.

Hier ist eine kommentierte Demo:

PImage input;//original image 
PImage output;//grayscale image 

PGraphics mask; 

void setup(){ 
    size(200,200); 
    input = loadImage("https://processing.org/tutorials/pixels/imgs/tint1.jpg"); 
    //copy input pixels into output 
    output = input.get(); 
    //make it grayascale 
    output.filter(GRAY); 
    //setup mask 
    mask = createGraphics(width,height); 
    mask.beginDraw(); 
    mask.background(0);//nothing black passes through the mask 
    mask.noStroke(); 
    mask.fill(255);//everything white passes through the mask 
    mask.endDraw(); 
} 
void draw(){ 
    //draw color image 
    image(input,0,0); 
    //apply mask 
    output.mask(mask); 
    //draw masked output 
    image(output,0,0); 
} 
//draw into the mask 
void mouseDragged(){ 
    mask.beginDraw(); 
    mask.ellipse(mouseX,mouseY,20,20); 
    mask.endDraw(); 
} 

Die kühle Sache ist, können Sie andere geformte Masken und weiche Masken verwenden gradients

Answer 2

Es ist schwierig allgemeine Fragen wie "Wie mache ich das?" Zu beantworten, da es so viele verschiedene Möglichkeiten gibt, so etwas zu tun. Stack Overflow ist mehr für "Ich habe X versucht, erwartet Y, aber habe Z stattdessen" Typ Fragen. Davon abgesehen werde ich versuchen, in einem allgemeinen Sinn zu helfen.

Sie müssen Ihr Problem in kleinere Schritte zerlegen. Sie sollten sich immer nur auf einen kleinen Schritt konzentrieren, anstatt zu versuchen, Ihr großes Endziel auf einmal anzunehmen.

Schritt 1: Können Sie ein Bild in Schwarzweiß laden und anzeigen? Mach dir noch keine Sorgen um etwas anderes. Erstellen Sie einfach eine einfache Skizze, die ein Farbbild lädt und es in Schwarzweiß anzeigt. Eine Möglichkeit, dies zu erreichen, ist die Verwendung der filter()-Funktion.

Schritt 2: Können Sie einen Teilabschnitt des Schwarz-Weiß-Bildes aufnehmen und die Originalfarben in diesem Unterabschnitt anzeigen? Mach dir noch keine Gedanken über die Mausposition. Verwenden Sie einfach eine fest codierte Position und beginnen Sie vielleicht mit einem Rechteck, um es einfacher zu machen. Sie könnten für diesen Schritt die PGraphics-Klasse oder die set()-Funktion verwenden.

Schritt 3: Nachdem Sie den hartcodierten Schritt funktioniert haben, können Sie Ihre Logik hinzufügen, um die Mausposition zu erhalten.

Sie müssen einen Schritt zurücktreten und wirklich verstehen, was das Beispiel, das Sie gepostet haben, tut. Sie können Code nicht einfach weghacken und erwarten, dass er funktioniert. Zerlegen Sie das Problem in kleinere Teile und nehmen Sie dann diese Teile einzeln auf. Wenn Sie in einem dieser spezifischen Schritte hängen bleiben, können Sie eine bestimmte Frage stellen und eine MCVE posten, und es wird Ihnen viel einfacher sein, Ihnen zu helfen. Viel Glück!