I think you need to be more specific: a straight line, a curved line? a freeform or vector line? Growing in what way?
p5js examples are limited (there's the gallery); but in principle many of the tutorials and examples for Processing can be refactored to work in p5js...
Would I want to use bezier to do it? I dont see angle property..
bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);
x1, y1 Coordinates of the curve’s starting point
cpx1, cpy1 Coordinates of the first control point
cpx2, cpy2 Coordinates of the second control point
x2, y2 Coordinates of the curve’s ending point
No: demonstrate that you've tried to find an answer. Search is your friend. As already suggested look in the Processing forum; use Google; stackoverflow etc... This is a general problem not specific to a particular environment. Although written for a different context also read 'How do I ask a good question'.
Ah.. I searched and came to this thread. Let me search more and meanwhile here is more detail question if it was too broad.
It seems easy if I use line(x1, y1, x2, y2) and give delta to x2, y2 if its going to grow straigh from x1, y1.
However, for the curved line, I see that I would need arc() to do it, right?
Let's assume that x1 and y1 are the staatic start point, I assume that cpx1, cpy1, cpx2, cpy2 (control points) and x2, y2 has to be changed to drawing along with the line with proper control point position. I was wondering if I am going into the right direction. Or get some insight if there were anybody who had problem with same issues.
Answers
I think you need to be more specific: a straight line, a curved line? a freeform or vector line? Growing in what way?
p5js examples are limited (there's the gallery); but in principle many of the tutorials and examples for Processing can be refactored to work in p5js...
Hi,
It is a curved 1 single line like a single arc. It has to grow from nothing to the full arc.
Do you already have some code to draw the complete arc? Post that. You probably just have to increment the angle being used to define the arc...
@blindfish
Would I want to use bezier to do it? I dont see angle property..
bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2); x1, y1 Coordinates of the curve’s starting point cpx1, cpy1 Coordinates of the first control point cpx2, cpy2 Coordinates of the second control point x2, y2 Coordinates of the curve’s ending point
Would you give me a simple code sample?
No: demonstrate that you've tried to find an answer. Search is your friend. As already suggested look in the Processing forum; use Google; stackoverflow etc... This is a general problem not specific to a particular environment. Although written for a different context also read 'How do I ask a good question'.
Ah.. I searched and came to this thread. Let me search more and meanwhile here is more detail question if it was too broad.
It seems easy if I use line(x1, y1, x2, y2) and give delta to x2, y2 if its going to grow straigh from x1, y1.
However, for the curved line, I see that I would need arc() to do it, right?
Let's assume that x1 and y1 are the staatic start point, I assume that cpx1, cpy1, cpx2, cpy2 (control points) and x2, y2 has to be changed to drawing along with the line with proper control point position. I was wondering if I am going into the right direction. Or get some insight if there were anybody who had problem with same issues.
Oh, btw, https://www.google.com/search?site=&source=hp&q=growing+arc+processing&oq=growing+arc+processing&gs_l=hp.3..33i21.153723.160935.0.161019.43.32.8.3.3.0.114.2334.28j3.31.0....0...1c.1.64.hp..11.32.1737.0.iF65iAftf0Q
Is this related?
http://forum.processing.org/two/discussion/comment/27315
(not p5 though...)
@_vk this seems to be the great resource, I will take a deep look into it.
It works great. Only downside is I have to draw about 1200 lines with this to be animated in p5 and hope it does not get slow down!
Also, it seems like this will draw each frame when draw() gets called but if the framerate drops, I guess it will be like a dot line?
Ended up implementing like so below
with time offset to start draw line and line type to be solid and dotted.
I tried to draw line between point so I dont have to draw so many points (I dont know which way is to save the performance?)
there is one of the codes in that post that uses bezier vertex to draw, so no dots...