How to draw smoother, better looking lines

edited December 2013 in How To...

Hello, I am have a sketch written that draws a line between two points. It is exactly like the lines drawn with mouse and pmouse, except I use a list array so that I can update the thickness of the line each time.

I am looking for a way to smoothen the lines, or just make then look better. I know better is subjective, but these lines (and the general processing line function) tend to be jagged and what I would generally consider "flat". Is there anyway to make more dynamic lines, something that looks better to a viewer? I was thinking of using OpenGL or something but I want to start down the right path. Any suggestions would be helpful, thanks

Answers

  • edited December 2013

    I have understand two variation of your question

    1. Either you want line look smooth means you want to disable anti-aliasing
    2. Or you want to draw smooth strokes like curve

    If you want #1 then if you are using newer version of Processing such as 2.1 and drawing line in 2D then don't enable any OPENGL render in size() function because OPENGL is already enable as default render. You can see the difference in the code below

        void setup() {
          size(400, 400, P3D);  // first try this
          // size(400, 400); // second try this
          background(-1);
        }
        void draw() {
          strokeWeight(6);
          line(pmouseX, pmouseY, mouseX, mouseY);
        }
    

    And if you want #2 then I cannot help you much because I am also struggling with this here is my old post

  • edited December 2013

    Thank you. I am interested in #2, so I will search and post to that thread.

  • See if the article Why are text and graphics so ugly and blocky? is relevant for your case.

    Also see the smooth() function.

  • This does help, but I am calling background at the beginning of draw and smooth is turned on (by default).

    I am wondering if it would be better to draw a line with vertices, although that would fundamentally alter my code.

  • edited December 2013

    Have you tried using curveVertex() instead of lines? It's easier than the bezier curves (no control points).

    edit to add: just saw your last line. I can't see any simple way of smoothing that doesn't involve vertices etc.

  • I will let you know how it turns out. It seems that using lines is a better way of drawing smooth lines than the line function.

  • I saw sketches using stroke with transparency to make then thinner and smoother.

  • (philho, i think he's talking about smoothing as in curves rather than smoothing as in antialiasing. see blyk's point 2.)

  • Edit: I meant to say "It seems that using curvedVertex is a better way of drawing smooth lines than the line function"

    I thought about easing, but I really don't want the delay. The idea is to avoid the jagged, right angles that seem to form when using line.

Sign In or Register to comment.