P5.js: Linestyle parameter for line() : solid, dotted, dashed,...

[ThatIsAPseudo]

Nature of issue?

• [ ] Found a bug
• [x] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [x] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Feature enhancement details:

_(Sorry for the grammatical mistakes, i'm not English)_

_N.B. : This feature has already been requested here #3016 , however it has been put away because its implementation wouldn't fit p5.js' scope. So I'm suggesting another way to do it just be enhancing an existing feature._

It would be great to be able to specify what type of line (solid, dotted,...) the line() function draws. Indeed you may need to draw dotted lines, and the only way to do it is by drawing several small lines/points with gaps between them through a for loop.

However, even though a vertical/horizontal line is quite easy to handle, the only way to draw diagonal lines is by struggling with maths...

I think the line() function could have a fifth parameter, by default being "solid", "dot", etc, or maybe we could imagine a way similar to the plot function in Python from library matplotlib, i.e. "--", ".", etc.

EDIT

Here is a suggestion of a linedash() function using line(), suggests and improvements are welcome :

function linedash(x1, y1, x2, y2, delta, style = '-') {
  // delta is both the length of a dash, the distance between 2 dots/dashes, and the diameter of a round
  let distance = dist(x1,y1,x2,y2);
  let dashNumber = distance/delta;
  let xDelta = (x2-x1)/dashNumber;
  let yDelta = (y2-y1)/dashNumber;

  for (let i = 0; i < dashNumber; i+= 2) {
    let xi1 = i*xDelta + x1;
    let yi1 = i*yDelta + y1;
    let xi2 = (i+1)*xDelta + x1;
    let yi2 = (i+1)*yDelta + y1;

    if (style == '-') { line(xi1, yi1, xi2, yi2); }
    else if (style == '.') { point(xi1, yi1); }
    else if (style == 'o') { ellipse(xi1, yi1, delta/2); }
  }
}

Syntax

linedash(x1, y1, x2, y2, delta)
linedash(x1, y1, x2, y2, delta, style)

Parameters
x1 Number : the x-coordinate of the first point
y1 Number : the x-coordinate of the second point
x2 : Number : the x-coordinate of the first point
y2 : Number : the y-coordinate of the second point
delta Number : the length of (and between) 2 dashes/points
style String : '-' for a dashline, '.'for dots, 'o'for bigger dots (rounds)

Note that since this function uses the ellipse() function, it may be affected by fill().

[Remcodejong]

 if (style == '-') { line(xi1, yi1, xi2, yi2); }
    else if (style == '.') { point(xi1, yi1); }
    else if (style == 'o') { ellipse(xi1, yi1, delta/2); }
  }

Wouldn't this require the p5.js library inside the library itself?

[ThatIsAPseudo]

 if (style == '-') { line(xi1, yi1, xi2, yi2); }
    else if (style == '.') { point(xi1, yi1); }
    else if (style == 'o') { ellipse(xi1, yi1, delta/2); }
  }

Wouldn't this require the p5.js library inside the library itself?

It may, however since I'm still a beginner I do not really know if that's a problem or not...

[Remcodejong]

I think that would be an issue, as you would require p5.js inside of itself, but Im not sure myself. @lmccart , any help?

[lmccart]

you can use the native setLineDash() function to make any kind of dotted or dashed line you want. the drawingContext variable gives you access to the context. something like this:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  strokeWeight(1);
  drawingContext.setLineDash([5, 15]);
  line(10, 10, 390, 10);

  drawingContext.setLineDash([10, 5]);
  line(10, 30, 390, 30);

  strokeWeight(3);
  drawingContext.setLineDash([20, 5, 5, 5, 5, 5, 5, 5]);
  line(10, 50, 390, 50);

  strokeWeight(1);
  drawingContext.setLineDash([0.5, 3]);
  line(10, 70, 390, 70);

  drawingContext.setLineDash([]);
  line(10, 90, 390, 90);
}

https://editor.p5js.org/lmccart/sketches/HyC_2Id0X

[Remcodejong]

Think that this issue can be closed then

[ThatIsAPseudo]

@lmccart Thank you very much 👍

Therefore, for those who are interested in a linedash function snippet :

function linedash(x1, y1, x2, y2, list) {
   drawingContext.setLineDash(list); // set the "dashed line" mode
   line(x1, y1, x2, y2); // draw the line
   drawingContext.setLineDash([]); // reset into "solid line" mode
}