Complex gradient loop

Processing Coding Questions
14

new version

looks better, still not perfect

you can DRAG the focal points now


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 (100, 255, 255),
  color (255, 0, 0),
  color (255, 200, 200),
  color (255, 0, 255),
  color (255, 0, 0)
};

// mouse dragging
boolean hold=false;
int hold_i=-1;

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

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

void draw() {
  background(255);

  noFill();
  color c1;
  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
      c1 = getCol (x, y); // color(200, 255, 255);
      stroke(c1);
      point(x, y);
    }
  }

  // optional: show all focal points
  showFocalPoints();

  // mouse dragging
  if (hold&&hold_i!=-1) {
    listPV[hold_i].x=mouseX;
    listPV[hold_i].y=mouseY;
  }
  //noLoop();
}

void mousePressed() {
  // mouse dragging
  hold=true;
  int i2=0;
  for (PVector pv : listPV) {
    if (dist(mouseX, mouseY, pv.x, pv.y)<21) {
      hold_i=i2;
      return;
    }
    i2++;
  }//for
}

void mouseReleased() {
  // mouse dragging
  hold=false; // reset
  hold_i=-1;
}

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

color getCol(float x1, float y1) {

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

  ///for (PVector pv : listPV) {
  for ( int i2=0; i2<listPV.length-1; i2++ ) {

    // we look at one focal point and the next

    PVector pv1 = listPV[i2];
    c1  = listColor[i2];
    float distMy1 = dist(pv1.x, pv1.y, x1, y1);

    PVector pv2 = listPV[i2+1];
    color c2  = listColor[i2+1];
    float distMy2 =  dist(pv2.x, pv2.y, x1, y1);

    // 0.5
    // println(distMy1 / distMy2);
    /// exit();

    float amt =  distMy1 / distMy2    ;
    amt=map(amt, 0, 3, 0, 1);

    color c3 = lerpColor (c1, c2, amt);

    // ----

    // sum it
    red   += red(c3);
    green += green(c3);
    blue  += blue(c3);

    i2a=i2;
  }//for

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

  // OR just map the sums to 0..256
  float maxRange1 = 1220;
  red = map(red, 0, maxRange1, 0, 256);
  green = map(green, 0, maxRange1, 0, 256);
  blue = map(blue, 0, maxRange1, 0, 256);

  return color(red, green, blue);
}

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

// NOT IN USE 
color getColOld(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;
}

void showFocalPoints() {

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

Remarks

  • of course you can / should join the 2 parallel ArrayLists by creating a class FocalPoint and say
    ArrayList<FocalPoint> listFocalPoints = new ArrayList();

the function getCol I have problems with; it’s the core question, how can I

  • for each pixel A in the canvas
  • calc the lerpColor between (in this approach) 2 focal points B1 and B2 (with colors c1 and c2)
  • with an amt that is between 0 and 1 and calculated so that it reflects the distances between A-B1 and A-B2.

So when A-B1 is 600 and A-B2 is 300,

  • A is closer to B2,
  • the amt value between colors c1 and c2 should be around 0.6 I guess (making the color c2 belonging to B2 dominant over c1).
  • But what is the exact formula?

And when I have a couple of pairs B1/B2, B2/B3…calculated, how can I calc the average color?

1 Like