Complex gradient loop

probably should be easy

  • to take for each point A of the canvas
  • the colors of each of the 5 rects B
  • (each with a different weight/score, depending how far B is from A)
  • and add / average the colors (with that score) to find the color for A.

But I didn’t achieve it.

Here I tried without lerpColor but with calculating the average for red, green and blue values


PVector[] listPV = {
  new PVector (0, 0),
  new PVector (0, 200),
  new PVector (550, 400),
  new PVector (50, 500),
  new PVector (600-24, 800-24)
};

color[] listColor = {
  color (200, 255, 255),
  color (0, 0, 0),
  color (255, 200, 200),
  color (255, 0, 255),
  color (255, 0, 0)
};

// -------------------------------------------------------------------------------------------

void setup() {
  size(600, 800);
}

void draw() {
  background(255);

  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
      color a = getCol (x, y); // color(200, 255, 255);

      noFill();
      stroke(a);
      point(x, y);
    }
  }

  int i2=0;
  for (PVector pv : listPV) {
    fill(listColor[i2]);
    stroke(0);
    rect(pv.x, pv.y, 6, 6);
    noFill();
    rect(pv.x, pv.y, 6, 16);
    rect(pv.x, pv.y, 26, 26);

    i2++;
  }

  noLoop();
}

// -------------------------------------------------------------------------------------------

color getCol(float x1, float y1) {

  color c1=0;
  float red=0, green=0, blue=0;
  int i2=0;
  c1=color(random(256));
  // c1=0;

  for (PVector pv : listPV) {
    float distMy;
    // distMy = pv.dist(new PVector(x1, y1));
    distMy = dist(pv.x, pv.y, x1, y1);
    float amt = map(distMy, 0, 444, 255, 0) ;

    //  c1 = lerpColor ( c1, listColor[i2], amt) ;
    c1=listColor[i2];

    red   += red(c1)*amt;
    green += green(c1)*amt;
    blue  += blue(c1)*amt;

    i2++;
  }//for

  // i2--;

  // take average
  red/=(float)i2;
  green/=(float)i2;
  blue/=(float)i2;
  // println(red, green, blue);

  return color(red, green, blue);
  // return   c1;
}

1 Like