good growing line p5 example (arc)

fkkcloud

Hi,

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

Thx!

blindfish

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

fkkcloud

Hi,

It is a curved 1 single line like a single arc. It has to grow from nothing to the full arc.

blindfish

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

fkkcloud

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

blindfish

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

fkkcloud

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

_vk

Is this related?

http://forum.processing.org/two/discussion/comment/27315

(not p5 though...)

fkkcloud

@_vk this seems to be the great resource, I will take a deep look into it.

fkkcloud

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!

fkkcloud

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?

fkkcloud

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);
  smooth();
  strokeWeight(1.7);
  frameRate(24);
}

function draw() {
  createCanvas(400, 400);
  background(255);
  noStroke();
  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)
    return;

  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);
    lines_mem[line_id].push(t3);
    noFill();
    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);
  groundVector.normalize();

  var upVector = createVector(0, 0, 1);

  var resVector = p5.Vector.cross(groundVector, upVector);
  resVector.mult(height * side);

  return p5.Vector.add(resVector, midPoint);
}

_vk

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);
  smooth(8);
  strokeWeight(1.7);
} 
 
void draw() {
  background(255);
  translate(width/2, height/2);
  drawPoints();
 
  if (s<=1) {
    s+=0.007;
    t1 = PVector.lerp(p1, p2, s);
    t2 = PVector.lerp(p2, p3, s);
    t3 = PVector.lerp(t1, t2, s);
    points.add(t3);
  } 
  else {
    s= 0f;
    points.clear();
    p3 = PVector.random2D();
    p3.mult(random(100, 280));
 
    p2 = PVector.random2D();
    p2.mult(random(100, 280));
  }
  drawBz();
  if (others)drawStuff();
}
 
 
void keyPressed() {
  others = ! others;
}
 
void drawPoints() {
  noStroke();
  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() {
  noFill();
  stroke(140, 150, 150);
 
  beginShape();
  vertex(p1.x, p1.y);
  bezierVertex(t1.x, t1.y, t3.x, t3.y, t3.x, t3.y);
  vertex(t3.x, t3.y);
  endShape();
}
void drawStuff() {
  noFill();
  strokeWeight(1.7);
  stroke(0, 0, 200); 
 
  for (PVector p : points) {
    point(p.x, p.y);//, 4, 4);
  }
 
  strokeWeight(1);
  stroke(200);
  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);
 
  noStroke();
  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);
}