Gradients with loadPixels() in Processing

user_3895938 0
Viewed 43

Hi everyone – i am trying to draw a radial gradient in the background of my sketch – and I am trying to achieve this by manipulating the pixels like in an example by daniel shiffman – so far so good – it works as it should! BUT – now I want the radial gradient to be red – and the outer parts of the sketch to be black… So just as in the code example below, but inverted! I tried many things – experimented with the RGB values – inverted the values of the dist(); function – thought of map(); – tried to change the calculations for the pixels – nothing worked out – what am I missing or can somebody explain it to me? I know what the code does – but cant get it inverted… does someone have an idea and can it explain it to me? I am really stuck…

void setup() {
 size(1080, 1080);
}

void draw() {
     loadPixels();
  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
      float d = dist(width/2, height/2, x, y);
      pixels[x+y*width] = color(255,d,255);
    }
  }
  updatePixels();
}

Thank you for any kind of help!

radial-gradients processing java
1 Answers

Here you go:

void setup() {
  size(1080, 1080);
}

void draw() {
  loadPixels();
  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
      float d = dist(width/2, height/2, x, y);
      pixels[x+y*width] = color(255-d, 0, 0);
    }
  }
  updatePixels();
}

Here's the trick:

RGB means Red-Green-Blue. They are the three colors which, mixed together, will make up the other colors. The number is how light the color is, so [255, 0, 0] would be a bright red. 255 everywhere would be white, and 0 everywhere would be black.

Your were close by trying to invert the dist, but the easy answer here was to invert it at the color's level by letting it range from 255 instead of to 255. That's why I wrote it 255 - d. Then, the further from the center, the closer to zero.

Have fun!

user_58445720
Related