Arrow function

[JithinKS97]

A function that accepts the same parameters as line and draws an arrow is very useful. In math and physics, there are a lot of places where this can come handy.

arrow(x1, y1, x2, y2) will be the function

[nickmcintyre]

@JithinKS97 how should we handle dimensions and color?

[JithinKS97]

By dimension, I assume you are talking about 2d and 3d, I think we can handle in the same way it is dealt in line function. fill and stroke also, if fill and stroke is called before arrow, it should take those values.

In short, it should behave the same way as line but there should be a triangle that points at the end.

[nickmcintyre]

Nope, but the considerations for 2D and 3D are similar. Let's say a 2D arrow is composed of a rectangle and triangle. Should the dimensions of the triangular head depend upon the width and height of the rectangular tail? Should we treat arrows differently if they're part of a plot?

[two-ticks]

Can we use something like this ?

myArrowConfig = { 
      arrowTipHeight: 1, //px 
      arrowTipWidth:  2, 
      arrowTailWidth : 1
}
myArrow.configure(myArrowConfig)

myArrowStyle = { 
      arrowTipHeight: 1, //px 
      arrowTipWidth:  2, 
      arrowTailWidth : 1
}
myArrow.style(myArrowStyle)

[two-ticks]

branch : beginGraph

• [x] arrow
• [x] controlPoint
• [x] shape.rotate(angle)

🔗 web-editor sketch

arrow

beginGraph();
 tangent = arrow(-20, -100, 150, 100);
  tangent.configure({
    arrowSize: 3,
    arrowHeadColor: color(40, 140, 10, 150)
    // arrowHeadHeight : 4, this is currently not available
  });
endGraph();
tangent.arrowHead(20, 20);

controlPoint

beginGraph();
ctr1 = controlPoint(100, 100);
endGraph();

@JithinKS97 @nickmcintyre

[JithinKS97]

Looks good @two-ticks

[JithinKS97]

@two-ticks Its always good to have a default behaviour like

fill('red')
stroke('black')
arrow(0,0,50,50)

should produce a default arrow with fill and stroke

[nickmcintyre]

@two-ticks I've worked a bit more with arrow() and have a few observations based on making the figure below.

https://editor.p5js.org/mcintyre/sketches/hu-mrfhGt

• Subsequent calls to stroke() don't update the head color and neither does setting arrowHeadColor in the config object.
• Switching between left-handed and right-handed coordinates causes some cognitive friction. I think we should settle on a default coordinate system that applies to the entire library.
• Calling myArrow.configure({ arrowSize: 5 }) on the first arrow created sets the configuration for all arrows; calling it on arrows defined later does nothing.

[two-ticks]

The arrow size and head color problem are due to this.svgLine.setAttribute('marker-end', 'url(#marker-arrow)'), instead defs defined in current <g> arrow is taking url(#marker-arrow) from the oldest defined defs. I am working on this issue.

one more bug I have found related to SVGs

• during multiple animations playing after each other, the characters which are defined earlier interfere with new elements.

For co-ordinates I need some suggestions, here are some points I need help with

• we can set default to left coordinate system but all mathematical functions will be then plotted according to it (inverse to regular graphs) , for example users will have to pass plot2D((x) => -cos(x)) to plot cos(x)
• nice side of left coordinate system will be the similarity to p5 API also translate , scale would be easy to implement

I want to unify all the coordinate system or find any middle ground for example a config({coordinateSystem: 'rightHanded'})

[two-ticks]

arrow has been now improved in #27

[nickmcintyre]

Good clarification - by "unify" I just mean to apply a single coordinate system at a time. Here's an example of how I tried to solve this problem on the canvas.

coordinateMode(RIGHT_HAND) // or LEFT_HAND

Also made a few small modifications to p5.prototype._updateNextMouseCoords and p5.prototype.text to get the basics working.

Re: plotting - Enabling users to set the coordinate system should help here.