Hi!

I'm very new to processing, so bear with me.
I'm thinking about creating a visualization where I draw a path. This I could do with lines and bezier curves using some nice thickness. However, I'd like to use different colors at different points of the path to show some value associated with that point (or time actually). I can do this by splitting the line into different sections and have them in different colors. However, that seems clumsy and that way I would not get nice gradients between different colors. Any ideas on how to create such effect? (I hope I did make myself clear...)

Hi!

Quick sketch of what I'm trying:
Code:

void setup() {
  size(300, 300);
  stroke(255);
  background(255, 255, 255);
} 

void draw() {
  noFill();
  stroke(0, 0, 0);
  strokeWeight(10);
  line(55, 80, 115, 80);
  stroke(255,0,0);
  bezier(115,80, 190, 80, 110, 20 ,190,20);
  line(190, 20, 220, 20);
  stroke(0, 0, 0);
  line(220, 20, 280, 20);
  noLoop();
}
 

But obviously nice gradient from black to red and back. How is this done: benfry.com/revisionist/detail.jpg (sorry, I con't post direct links yet...)? And could that technique be used here also?

Thanks.

thats easy as the gradient is only on the straight end lines...

Code:

void setup() {
  size(300, 300);
  stroke(255);
  background(0);
} 

void draw() {
  noFill();
  stroke(0, 0, 0);
  
 strokeWeight(10);
   int steps = 100;
   
  for(int i = 0; i < steps; i++){
  stroke(lerpColor(#ff0000,#000000,(float)i/steps));
  point(115-i,80);  
  }
  
  stroke(255,0,0);
  bezier(115,80, 190, 80, 110, 20 ,190,20);
  
  for(int i = 0; i < steps; i++){
  stroke(lerpColor(#ff0000,#000000,(float)i/steps));
  point(190+i,20);  
  }
  
  noLoop();
}
  

probably but, the gradient wouldnt be aligned along the curve. so at the point where the curve doesnt change on the x axis, their would be no color change.

Hi!

Thanks for the tips! I tried to recreate the gradients from Ben Fry's Revisionist, like this:
Code:

void setup() {
  size(600, 600);
  stroke(255);
  background(255, 255, 255);
} 

void draw() {
  int x1 = 10;
  int x2 = width - x1;
  int y1 = height - x1 - 20;
  int y2 = x1;
  
// first one without gradient
  stroke(0, 128, 0);
  fill(0, 128, 0, 128);
  beginShape();
  vertex(x1, y1);
  bezierVertex(x1+250, y1, x2-450, y2, x2, y2);
  vertex(x2, y2+100);
  bezierVertex(x2-450, y2+100, x1+250, y1+5, x1, y1+5);
  vertex(x1, y1);
  endShape();
  
// Second one with gradient
  y1 = y1 + 10;
  y2 = y2 + 120;
  
  PGraphics pgGradient = createGraphics(width, height, P2D);
  PGraphics pgMask = createGraphics(width, height, P2D);
  pgGradient.beginDraw();
  pgGradient.strokeWeight(1);
  color cFrom = color(70, 150, 76);
  color cTo = color(255, 255, 255);
  for (int i = 0; i < pgGradient.width; i++){
    pgGradient.stroke(lerpColor(cFrom, cTo, (float)i/pgGradient.width));
    pgGradient.line(i, 0, i, pgGradient.height);
  }
  pgGradient.endDraw();
  
  pgMask.background(0);
  pgMask.fill(255);
  pgMask.stroke(255);
  //pgMask.noStroke();
  pgMask.beginDraw();
  pgMask.beginShape();
  pgMask.vertex(x1, y1);
  pgMask.bezierVertex(x1+250, y1, x2-450, y2, x2, y2);
  pgMask.vertex(x2, y2+100);
  pgMask.bezierVertex(x2-450, y2+100, x1+250, y1+5, x1, y1+5);
  pgMask.vertex(x1, y1);
  pgMask.endShape();
  pgMask.endDraw();
  
  pgGradient.mask(pgMask.get(0,0,pgMask.width, pgMask.height));
  image(pgGradient, 0, 0);
  
  noLoop();
}
 

Is this how you think he did it?

Thanks!

Cedric wrote on Nov 9^th, 2009, 1:16pm:


I did, thanks! - otherwise I'd probably never have found about the function called lerpColor

I noticed some problems with my code above. The borders didn't look that nice, so closer look revealed some problems. The first shape has stroke and fill - but the fill goes sometimes outside the stroke. I'd say a small bug. Also, the second shape with the gradient, the large vertical edge on right is not straight if the color is darker. Not sure why.

However, larger problem is that I tried to export it to PDF by simply importing pdf and setting size(600, 600, PDF, "BezierTest1.pdf"); However, I don't get the same picture. I only get the gradient filling the whole screen (i.e. pgGradient without the mask). What's wrong How can I do this same with PDF

Thanks!