good growing line p5 example (arc)


would there be any reference of growing line in p5 example?




  • 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?

  • 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'.

  • edited October 2015

    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,

  • _vk_vk
    edited October 2015 Answer ✓

    Is this related?

    (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?)

    /* edge property */
    var p1, p2
    var points= [[], [], [], [], [], [], [], [], [], [], [], [], [], [], []];
    var s = 0;
    var d = new Date(); /* except */
    var line_start_millisec = d.getTime() + 1000;
    function setup() {
      p1 = createVector(100, 240, 0);
      p2 = createVector(300, 120, 0);
    function draw() {
      createCanvas(400, 400);
      fill(200, 250, 250);
      ellipse(p1.x, p1.y, 10, 10);
      ellipse(p2.x, p2.y, 10, 10);
      //ellipse(p3.x, p3.y, 10, 10);
      /* so for loop of the each edge can go here */
      drawEdge(p1, p2, points.length, points, line_start_millisec, 1);
    function drawEdge(start, end, num_lines, lines_mem, start_milli_sec, line_type) {
      var d = new Date();
      var now = d.getTime();
      if (now < start_milli_sec)
      var t1, t2, t3;
      var line_type_var = !line_type ? 3 : 1;
      if (s <= 1) {
        s+=0.01 * line_type_var;
      for (var line_id = 0; line_id < num_lines; line_id++){
        var curveHelpPoint = getCurvePoint(p1, p2, 200 + line_id * 20, true);
        t1 = p5.Vector.lerp(start, curveHelpPoint, s);
        t2 = p5.Vector.lerp(start, end, s);
        t3 = p5.Vector.lerp(t1, t2, s);
        strokeWeight(0.5 * line_type_var);
        stroke(100, 50, 200, 100); 
        for (var i=0; i < lines_mem[line_id].length-1; i++) {
          if (line_type && i > 0 && i < lines_mem[line_id].length) {
            line(lines_mem[line_id][i-1].x, lines_mem[line_id][i-1].y, lines_mem[line_id][i].x, lines_mem[line_id][i].y);
          else {
            point(lines_mem[line_id][i].x, lines_mem[line_id][i].y);
    function getCurvePoint(p1, p2, height, direction) {
      var side = direction < 1 ? 1 : -1;
      var midPoint = createVector((p1.x + p2.x) * 0.5, (p1.y + p2.y) * 0.5, 0);
      var groundVector  = createVector(p1.x-p2.x, p1.y-p2.y, 0);
      var upVector = createVector(0, 0, 1);
      var resVector = p5.Vector.cross(groundVector, upVector);
      resVector.mult(height * side);
      return p5.Vector.add(resVector, midPoint);
  • _vk_vk
    edited October 2015 Answer ✓

    there is one of the codes in that post that uses bezier vertex to draw, so no dots...

    //press any key to show other stuff
    PVector t1, t2, t3;
    float s ;
    PVector p1, p2, p3;
    boolean others = false;
    ArrayList<PVector> points = new ArrayList<PVector>();
    void setup() {
      size(600, 600, P2D);
      p1 = new PVector(0, 0);
      p2 = new PVector(-120, 200);
      p3 = new PVector(100, 230);
    void draw() {
      translate(width/2, height/2);
      if (s<=1) {
        t1 = PVector.lerp(p1, p2, s);
        t2 = PVector.lerp(p2, p3, s);
        t3 = PVector.lerp(t1, t2, s);
      else {
        s= 0f;
        p3 = PVector.random2D();
        p3.mult(random(100, 280));
        p2 = PVector.random2D();
        p2.mult(random(100, 280));
      if (others)drawStuff();
    void keyPressed() {
      others = ! others;
    void drawPoints() {
      fill(200, 250, 250);
      ellipse(p1.x, p1.y, 10, 10);
      ellipse(p2.x, p2.y, 10, 10);
      ellipse(p3.x, p3.y, 10, 10);
    void drawBz() {
      stroke(140, 150, 150);
      vertex(p1.x, p1.y);
      bezierVertex(t1.x, t1.y, t3.x, t3.y, t3.x, t3.y);
      vertex(t3.x, t3.y);
    void drawStuff() {
      stroke(0, 0, 200); 
      for (PVector p : points) {
        point(p.x, p.y);//, 4, 4);
      line(p1.x, p1.y, p2.x, p2.y);
      line(p2.x, p2.y, p3.x, p3.y);
      line(t1.x, t1.y, t2.x, t2.y);
      fill(200, 50, 50);
      ellipse(t1.x, t1.y, 4, 4);
      ellipse(t2.x, t2.y, 4, 4);
      ellipse(t3.x, t3.y, 6, 6);
Sign In or Register to comment.