Line consisting of separate rectangles

djevazi

Proceessing has own class line(float,float,float,float), but I want to create something like enhanced line, consisting of little rectangles, or ellipses. I need it to change line stroke color to smooth gradient (for example in the beginning the line is green, and the green color becomes yellow when the line ends). Any ideas how to create this?

Lord_of_the_Galaxy

Write your own function.

djevazi

This question is solved.

Lord_of_the_Galaxy

Then please do us some good and post the solution here.

djevazi

Here is my solution:

PVector A;
PVector B;
PVector temp;
PVector temp2;
PVector C;

float dist;



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



void draw()
{
  background(128);

  A = new PVector(mouseX,mouseY);
  B = new PVector(width/2,height/2);
  temp = new PVector(B.x,B.y);
  C = new PVector(A.x,A.y);

  dist = dist(A.x,A.y,B.x,B.y);

  temp2 = new PVector(A.x,A.y);

  while(dist(temp2.x,temp2.y,B.x,B.y)>2)
  {
    float dist2 = dist/50;

    temp = new PVector(B.x,B.y);
    temp.sub(temp2);
    temp.setMag(dist2);

    C = new PVector(temp2.x,temp2.y);
    C.add(temp);

    fill(0,0,255);
    ellipse(temp2.x,temp2.y,4,4);

    temp2 = new PVector(C.x,C.y);
  }

  noStroke();
  fill(255,0,0);
  ellipse(A.x,A.y,10,10);
  fill(255);
  text("A",A.x+10,A.y);

  fill(0,255,0);
  ellipse(B.x,B.y,10,10);
  fill(255);
  text("B",B.x+10,B.y);
}

Lord_of_the_Galaxy

OK. Thanks on behalf of anyone wanting a solution.

koogs

or use lerp()

int SEGMENTS = 50;
void draw()
{
  background(128);

  A = new PVector(mouseX, mouseY);
  B = new PVector(width / 2, height / 2);

  // new code block
  fill(0, 0, 255);
  for (int i = 0 ; i < SEGMENTS ; i++) {
    float index = i / (float)SEGMENTS;
    float x = lerp(A.x, B.x, index);
    float y = lerp(A.y, B.y, index);
    ellipse(x, y, 4, 4);
  }

  noStroke();
  fill(255,0,0);
  ellipse(A.x, A.y, 10, 10);
  fill(255);
  text("A", A.x + 10, A.y);

  fill(0,255,0);
  ellipse(B.x, B.y, 10, 10);
  fill(255);
  text("B", B.x + 10, B.y);
}

djevazi

@koogs, cool, thanks for this variation. A little remark - you forgot to declare PVectors A nad B.

koogs

no, i only posted the draw() because that's the only thing i changed (and only half of that). the rest of the code is the same.

Lord_of_the_Galaxy

Though I would recommend turning it into a function for better reusability (it's fairly easy, so you don't need to bother if you don't want to).

djevazi

Thanks. I have a more complex project, and this little sketch goes as a part of my big project. A big project has a PGraphics layers. I tried to use function there, but there is an unexpected conflict - PGraphics don't work with functions (or I'm doing something wrong). That's why I writing a code without functions.

Lord_of_the_Galaxy

For it to work, you'd need to have the function take a PGraphics object as an extra parameter and draw everything on it - and to make code smaller, assume that beginDraw() was already called. For example, the code for polygon from this tutorial adapted for PGraphics -

void polygonPGraphics(PGraphics pg, int n, float cx, float cy, float r) {
  float angle = 360.0 / n;
  pg.beginShape();
  for (int i = 0; i < n; i++) {
    pg.vertex(cx + r * cos(radians(angle * i)),
      cy + r * sin(radians(angle * i)));
  }
  pg.endShape(CLOSE);
}