Line consisting of separate rectangles

edited December 2016 in How To...

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?

Tagged:

Answers

  • Write your own function.

  • edited December 2016 Answer ✓

    This question is solved.

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

  • edited December 2016

    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);
    }
    
  • OK. Thanks on behalf of anyone wanting a solution.

  • 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);
    }
    
  • @koogs, cool, thanks for this variation. A little remark - you forgot to declare PVectors A nad B.

  • 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.

  • 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).

  • 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.

  • 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);
    }  
    
Sign In or Register to comment.