Dashed lines

edited December 2014 in Programming Questions

Hi,

I'm looking for advice on the most efficient way to draw a dashed line as I have a sketch that requires many many dashed lines to be drawn for every iteration of the draw loop.

It's easy enough to draw a dashed line:

        void setup(){
          size(500,200); 
        }  

        void draw(){
          boolean dash = true;
          frame.setTitle(int(frameRate) + " fps");

          for(int y = 0; y < height; y+=2){
            for(int i = 0; i < width; i+=2){
              if (dash) stroke(0);
              else stroke(255);
              line(i, y, i+5, y);
              dash = !dash;
            }        
          }    
        }  

but since every dash of every line is drawn individually it really slows things down. The code above runs at a rate of 13 fps on my computer. I've looked at using PShape, but found this only works with the P2D renderer which is not suitable for the rest of my sketch.

Any advice appreciated,

Many thanks,

Tagged:

Answers

  • edited December 2014 Answer ✓

    What about this 1? B-)

    // forum.processing.org/two/discussion/8543/dotted-and-dashed-lines
    
    void setup() {
      size(500, 200, JAVA2D);
      noSmooth();
      frameRate(60);
      clear();
    }  
    
    void draw() {
      frame.setTitle(round(frameRate) + " fps");
    
      for (int y = 0; y < height; y += 2)
        for (int x = 0; x < width; x += 6) {
          stroke(-(x+y>>1 & 1));
          line(x, y, x+5, y);
          //set(x, y, -(x+y>>1 & 1));
        }
    }
    
  • That's a great improvement as it's certainly faster, but .... ...

    Is there no way to simply add a 'style' to a line, so that each individual doesn't have to be drawn each time?

    Say I wanted a dot-dash line? :D

  • That's a great improvement as it's certainly faster...

    Most important mod was noSmooth()! ;;)

    ... so that each individual doesn't have to be drawn each time?

    You can draw them in a PGraphics once and reuse it many times as background()! *-:)

  • edited December 2014

    I've experimented with drawing to a PGraphics, but it introduces new obstacles to what I am trying to achieve.

    If I write to the Display Window, as before, I can export to a large high definition png file quite easily by scaling up the image while exporting (My aim is to creat a A0 size poster of 9933x5266 pixels). Now, if I write to a PGraphics in the setup then I am limited an image of less than half of the size I need.

    Is there anyway to either increase the initial size of the PGraphics or to export the Display Window while maintaining and/or increasing the resolution of the image?

    Here's the code I've created:

    import org.gicentre.utils.move.*;
    import processing.pdf.*;
    
    PGraphics grph;
    //int imgW = 9933, imgH = 14043;  // A0 @ 300 dpi 
    int imgW = 4964, imgH = 7022;   // A0 @ 150 dpi 
    //int imgW = 1000, imgH = 1000;        
    
    
    int centerX, centerY;
    ZoomPan zoomer;  
    boolean save = false; // pdf export
    
    void setup(){
      size(1000, 1000);
      zoomer = new ZoomPan(this);
      noSmooth();
    
      grph = createGraphics(imgW, imgH);
      grph.beginDraw();
      grph.smooth();
      for (int y = 0; y < imgW; y += 2)
        for (int x = 0; x < imgH; x += 6) {
          grph.stroke(-(x+y>>1 & 1));
          grph.line(x, y, x+5, y);
          //set(x, y, -(x+y>>1 & 1));
    
        }
    
      grph.fill(0,255,0,200);
      for (int y = 0; y < imgW; y += 100)
        for (int x = 0; x < imgH; x += 100) {
    
          grph.ellipse(x, y, 100,100);
      }
      grph.endDraw();
    
      centerX = imgW/2;  
      centerY = imgH/2;   
      cursor(CROSS);
      imageMode(CENTER);  
    }
    
    void draw(){
      zoomer.transform();
      frame.setTitle(round(frameRate) + " fps");
      background(255);
      if (save) beginRecord(PDF, "output/print.pdf");
    
        image(grph, centerX, centerY, imgW, imgH);
      if (save) endRecord(); 
      save = false;
    }
    
    void keyPressed() {
      if (Character.toUpperCase(key)=='I') saveGrph(4);
      if (Character.toUpperCase(key)=='P') save = true;
    }
    
    void saveGrph(float scaleFactor) {  
      grph.scale(scaleFactor);  
      grph.save("output/image.png");
    }
    
  • Dunno much what else to say but that image() w/ resizing depends on smooth() level.
    For JAVA2D renderer, max quality is 4 and it's what you should use when resizing: smooth(4);.
    Function beginRecord() doesn't take into consideration any settings made before it.
    Therefore we should repeat them after beginRecord() starts:

    if (save) {
      beginRecord(PDF, dataPath("dash-####.pdf"));
      smooth(4);
      clear();
      image(grph, centerX, centerY, imgW, imgH);
    }
    
    if (save)  endRecord();
    

    And about the PGraphics itself, you should experiment w/ smooth(4) or noSmooth() and choose best result!

  • Thanks for the advice. I realized the problem I had with the limited PGraphic size can be resolved by just increasing the 'maximum available memory' in the preferences.

    What I now don't understand is why my image is always square regardless of values I give to imgW & imgH. Have I defined something incorrectly?

  • :\"> Oops, problem solved - I'm mixing my x's and y's with my widths and heights.

Sign In or Register to comment.