Drawing a dashed line?

4,528 views
Skip to first unread message

Eric_WVGG

unread,
Jan 29, 2012, 10:28:20 AM1/29/12
to Processing.js
Extreme novice here. I've got the basics of drawing a line down, now
trying to draw a dashed line. I've read up on Lerp and get how to do a
dotted line but it's not quite what I need.

Juan Pablo Toledo

unread,
Feb 6, 2012, 8:32:29 PM2/6/12
to proces...@googlegroups.com
If you want a stright dashed line just try with a "for" loop like this. Change the values from this example to find out what they do.

......................

void setup(){
size(400,400);

}

void draw(){
  
for(int dashValue =0; dashValue < 10; dashValue = dashValue + 1){

int dashPoint = 20;

line(dashValue*dashPoint,100,(dashValue*dashPoint)+10,100);

}
}

..................

If you want to do this with non horizontal or vertical lines you must use some math to find the hypotenuse from a rect triangle and so on. Keep yourself searching and asking!

¡Salud y anarquía tropical!

Juan Pablo Toledo


2012/1/29 Eric_WVGG <er...@whiskyvangoghgo.com>
Extreme novice here. I've got the basics of drawing a line down, now
trying to draw a dashed line. I've read up on Lerp and get how to do a
dotted line but it's not quite what I need.

--
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To post to this group, send email to proces...@googlegroups.com.
To unsubscribe from this group, send email to processingjs...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en.




--
Juan Pablo Toledo

Benj. N. Sugar

unread,
Feb 9, 2012, 1:40:59 PM2/9/12
to Processing.js
here's something i came up with that has the basic idea. it still
needs some refining though.

i took your idea about using lerp() to create a number of points. i
then took the second example from the lerp() reference here:
http://processingjs.org/reference/lerp_/ which is of a line running
parallel to a series of lerped points. instead of making points, i
changed it to create a line at that point, but i "plussed" and
"minused" the line so that it would create a dash with the lerped
point as the center.

one thing this "solution" is missing (among others i'm sure!) is that
the first and last dash will extend beyond the initial and ending
point.

size(300,300);
int x1 = 15;
int y1 = 10;
int x2 = 280;
int y2 = 290;
line(x1, y1, x2, y2);

for(int i=0; i<=10; i++) {
float x = lerp(x1, x2, i/10.0) + 10;
float y = lerp(y1, y2, i/10.0);
point(x, y);

line(x-5, y-5, x + 5, y + 5)
}
Reply all
Reply to author
Forward
0 new messages