✔ Farbverlauf erstellen

lisali

lisali

Erfahrenes Mitglied
Hallo,

ich möchte gerne einen Farbverlauf von weiß über gelb zu rot erstellen, aber komme damit nicht ganz klar.

Code: 
for (int y=0; y<height; y++) {
                // Schleife ueber die x-Werte
                for (int x=0; x<width; x++) {
                    int pos = y*width + x; // Arrayposition bestimmen
                    
                    int r, g, b;
                    
                    r = (    255 * x  +  255  *  (width-1-x)  ) / (width-1); 
                    g = (    255 * x  +  255  *  (width-1-x)  ) / (width-1); 
                    b = (    0 * x  +  255  *  (width-1-x)  ) / (width-1); 
                    
                    // Werte zurueckschreiben
                    pixels[pos] = 0xFF000000 | (r << 16) | (g << 8) |  b;
                }
            }

Damit erzeuge ich einen Verlauf von weiß zu gelb... wie kriege ich es hin, dass ich das gelb dazwischen bekomme und am Ende rot erscheint?

Danke im Voraus.
 
Zuletzt bearbeitet:
Hi,

ich hab jetzt mal schnell sowas hingepfuscht:

Code: 
int w2 = width/2; // Hälfte des Bildes

int r=255, g=255, b, pos;

// Schritte, um die die Farbwerte pro Pixel reduziert werden
double halfstep = 255.0/(w2);

for(int y=0; y<height; y++) {
   for(int x=0; x<width; x++) {
      pos = y*width + x;

      // von x=0 bis zur Hälfte des Bildes schrumpft b von 255 auf 0,
      // der Rest bleibt 255
      if(x<w2) {
         b = 255-(int)Math.ceil((halfstep*x));

      // ab der Hälfte zum Ende hin schrumpft g von 255 auf 0,
      // r bleibt 255 und b bleibt 0
      } else {
         g = 255-(int)Math.ceil((halfstep*(x-w2)));
      }
      pixels[pos] = 0xFF000000 | (r << 16) | (g << 8) |  b;
   }
}


Die beiden Male aufrunden sind nur weil da am Ende kein grader Wert raus kommt, also 254,bisschen. Das bisschen würde abgeschnitten werden und wir hätten da, wo eigentlich 0 stehen sollte ne 1.

Gruß,
DarkWizzard
 
Hey, danke dir für die Mühe, aber ich meinte das etwas anders. Ich möchte den Screen nicht aufteilen, sondern einen geraden Verlauf.

Also:

[white ... yellow ... red]


Zwischen Yellow und Red müsste man dann automatisch eigentlich orange sehen. Es ist sozusagen nur eine ganze gesamte Farb-Ebene.

Freue mich über eine weitere Antwort!
 
Zuletzt bearbeitet:
Hallo,

musst du den Effekt wirklich komplett selber implementieren? Viel einfacher wäre doch folgendes:
Java: 
package de.tutorials.training;

import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.HeadlessException;

import javax.swing.JFrame;

public class GradientExample extends JFrame {

  public GradientExample() throws HeadlessException {
    super("GradientExample");
    setDefaultCloseOperation(EXIT_ON_CLOSE);
    setSize(640, 480);
  }


  public static void main(String[] args) {
    new GradientExample().setVisible(true);
  }


  @Override
  public void paint(Graphics g) {
    Graphics2D gr = (Graphics2D) g;
    
    int w = getWidth();
    int h = getHeight();

    GradientPaint gradientWhite2Yellow = new GradientPaint(0, 0, Color.WHITE, w/2, 0, Color.YELLOW);
    gr.setPaint(gradientWhite2Yellow);
    gr.fillRect(0, 0, w/2, h);

    GradientPaint gradientYellow2Red = new GradientPaint(w/2, 0, Color.YELLOW, w, 0, Color.RED);
    gr.setPaint(gradientYellow2Red);
    gr.fillRect(w/2, 0, w, h);
  }
}

Gruß Tom
 
Hallo Thomas.

Ja, selber implementieren, leider... aber eigentlich "nur" ab dem Teil nach den 2 for-Schleifen.
 
Zuletzt bearbeitet:
Probiere doch mal das:
Java: 
Color c1 = Color.yellow, c2 = Color.green;
for (int y=0; y<height; y++) {
                // Schleife ueber die x-Werte
                for (int x=0; x<width; x++) {
                    int pos = y*width + x; // Arrayposition bestimmen
                    
                    int r, g, b;
                    
                    r = c1.getRed()+((c2.getRed()-c1.getRed())*(x/(double)width)); 
                    g = c1.getGreen()+((c2.getGreen()-c1.getGreen())*(x/(double)width)); 
                    b = c1.getBlue()+((c2.getBlue()-c1.getBlue())*(x/(double)width)); 
                    
                    // Werte zurueckschreiben
                    pixels[pos] = 0xFF000000 | (r << 16) | (g << 8) |  b;
                }
            }
 
Hey Jellysheep,

eine Vorgabe ist es keine weiteren Packages zu implementieren. Also, ich sollte schon einen Wert von 0 bis 255 für r, g, oder b einsetzen.

Ansonsten soll der Farbverlauf von weiss über gelb ins rot gehen.

Es sind also quasi 4 Farben und 1 Farbverlauf. Eigentlich nur 3 Farben, aber von gelb zu rot, müsste orange zu sehen sein. Und von weiss zu irgendeiner Farbe, ist und bleibt es ja immer weiss.
 
Hallo,

dann schau mal hier:
Java: 
package de.tutorials.training;

import java.awt.Color;
import java.awt.image.BufferedImage;
import java.awt.image.DataBufferInt;
import java.io.File;

import javax.imageio.ImageIO;

public class GradientExample {

  public static void main(String[] args) throws Exception {
    int w = 640;
    int h = 480;

    BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
    DataBufferInt buffer = (DataBufferInt) img.getRaster().getDataBuffer();
    int[] pixels = buffer.getData();

    int wHalf = w / 2;

    { // Generate Gradient for first row
      // white to yellow
      for (int i = 0; i < wHalf; i++) {
        float fade = i / (float) wHalf;
        int fadedColor = fadeColor(fade, Color.WHITE, Color.YELLOW);
        pixels[i] = fadedColor;
      }

      // yellow to red
      for (int i = wHalf; i < w; i++) {
        float fade = (i - wHalf) / (float) wHalf;
        int fadedColor = fadeColor(fade, Color.YELLOW, Color.RED);
        pixels[i] = fadedColor;
      }
    }

    { // copy gradient row to remaining rows
      for (int row = 1; row < h; row++) {
        System.arraycopy(pixels, 0, pixels, row * w, w);
      }
    }

    ImageIO.write(img, "png", new File("c:/temp/gradient.png"));
  }


  protected static int fadeColor(float fade, Color source, Color target) {
    int sR = source.getRed();
    int sG = source.getGreen();
    int sB = source.getBlue();

    int deltaR = sR - target.getRed();
    int deltaG = sG - target.getGreen();
    int deltaB = sB - target.getBlue();

    int newR = (int) (sR - deltaR * fade);
    int newG = (int) (sG - deltaG * fade);
    int newB = (int) (sB - deltaB * fade);

    int rgb = ((newR & 0xFF) << 16) | ((newG & 0xFF) << 8) | ((newB & 0xFF) << 0);

    return rgb;
  }
}

Gruß Tom
 

Anhänge

  • gradient.png
    gradient.png
    1,6 KB · Aufrufe: 21
Hey Thomas,

vielen Dank für deine Bemühungen! Ich weiß nicht, ob dies unmöglich ist, aber die Vorgabe besagt, dass die gesamte Programmierung innerhalb diesen zwei erwähnten For-Schleifen geschehen soll.

Vielleicht sollte ich die ganzen Rahmenbedingungen noch erwähnen. Ich dachte mir, dass es nicht notwendig wäre, nachdem die erste Reaktion auf diesen Thread der Lösung schon nahe ging.

Also, es ist im Grunde diese Aufgabe:



Jedoch ist die spezielle Aufgabe mit dem weiss-gelb-rot dort nicht aufgelistet.

Wäre das denn nicht möglich innerhalb diesen For-Schleifen mit einer bestimmten Formel?
 
Zuletzt bearbeitet:
Hallo,

ist es so schwer die Beispiele in deine Form zu bringen?
Java: 
package de.tutorials.training;

import java.awt.Color;
import java.awt.image.BufferedImage;
import java.awt.image.DataBufferInt;
import java.io.File;

import javax.imageio.ImageIO;

public class GradientExample {

  public static void main(String[] args) throws Exception {
    int w = 640;
    int h = 480;

    BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
    DataBufferInt buffer = (DataBufferInt) img.getRaster().getDataBuffer();
    int[] pixels = buffer.getData();

    int wHalf = w / 2;
    
    for (int x = 0; x < w; x++) {
      for (int y = 0; y < h; y++) {
        
        int pos = x + y * w;
        float fade = 0.0f;
        Color source = null;
        Color target = null;

        if (x < wHalf) {
          fade = x / (float) wHalf;
          source = Color.WHITE;
          target = Color.YELLOW;
        } else {
          fade = (x - wHalf) / (float) wHalf;
          source = Color.YELLOW;
          target = Color.RED;
        }

        int sR = source.getRed();
        int sG = source.getGreen();
        int sB = source.getBlue();

        int deltaR = sR - target.getRed();
        int deltaG = sG - target.getGreen();
        int deltaB = sB - target.getBlue();

        int newR = (int) (sR - deltaR * fade);
        int newG = (int) (sG - deltaG * fade);
        int newB = (int) (sB - deltaB * fade);

        int rgb = ((newR & 0xFF) << 16) | ((newG & 0xFF) << 8) | ((newB & 0xFF) << 0);
        
        pixels[pos] = rgb;
      }
    }

    ImageIO.write(img, "png", new File("c:/temp/gradient.png"));
  }
}

Gruß Tom
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück