" how do I relate the curve variables to the positions of the two control points"
What I usually do when manipulating Bézier curves is to materialize the control points with small red circles, it helps me seeing where they are. I often draw the corresponding straight lines too.

I use these functions, for example:

1. /*
2.  * Helper functions to visualize the vertices and control points of a Bézier curve.
3.  * Replace vertex() by Vertex() and bezierVertex() by BezierVertex().
4.  */
5. float BezierHelper_prevX = 0;
6. float BezierHelper_prevY = 0;
7.  
8. void Vertex(float x, float y)
9. {
10.   pushStyle();
11.   ellipseMode(CENTER);
12.   noStroke();
13.   // Reference point (if Bézier curve is drawn close of 0 and translated)
14.   fill(#FF00FF, 200);
15.   ellipse(0, 0, 5, 5);
16.   // Starting point of the curve
17.   fill(#FFFF00, 200);
18.   ellipse(x, y, 5, 5);
19.   popStyle();
20.  
21.   BezierHelper_prevX = x;
22.   BezierHelper_prevY = y;
23.  
24.   vertex(x, y);
25. }
26.  
27. void BezierVertex(float cx1, float cy1, float cx2, float cy2, float x, float y)
28. {
29.   pushStyle();
30.   rectMode(CORNERS);
31.   ellipseMode(CENTER);
32.  
33.   // Anchor point
34.   fill(#0000FF, 200);
35.   noStroke();
36.   rect(x-1, y-1, x+1, y+1);
37.  
38.   // First control point
39.   stroke(#00FF00, 220);
40.   strokeWeight(1);
41.   line(BezierHelper_prevX, BezierHelper_prevY, cx1, cy1);
42.   fill(#00FF00, 200);
43.   noStroke();
44.   ellipse(cx1, cy1, 3, 3);
45.  
46.   // Second control point
47.   stroke(#FF0000, 220);
48.   strokeWeight(1);
49.   line(x, y, cx2, cy2);
50.   fill(#FF0000, 200);
51.   noStroke();
52.   ellipse(cx2, cy2, 3, 3);
53.   popStyle();
54.  
55.   BezierHelper_prevX = x;
56.   BezierHelper_prevY = y;
57.  
58.   bezierVertex(cx1, cy1, cx2, cy2, x, y);
59. }

I can't run philhos code here but the way I see it, the problem is the angle between 150,150 and mouseX,mouseY:

• In some cases we get a shape like a new moon or
• in some cases we get a cross form that you don't want.

It all depends on the angle.

Since 150,150 and mouseX,mouseY are the fixed points for the curve (is this right?) you would need to set
the control points depending on the angle in a way that they are far outside the
connecting line between 150,150 and mouseX,mouseY.
There must be a way to find a formula to find the the control points in the said way but I don't know how.

with the help of the forum in another thread
(See https://forum.processing.org/topic/2d-find-c-from-a-and-b-rotating )
I came to this.

I also uses PhiLhos code from above

1. //
2. // https://forum.processing.org/topic/making-a-whole-shape-with-2-beziervertex-curves
3. /*
4.      * Helper functions to visualize the vertices and control points of a Bézier curve.
5.  * Replace vertex() by Vertex() and bezierVertex() by BezierVertex().
6.  */
7. float BezierHelper_prevX = 0;
8. float BezierHelper_prevY = 0;
9. //
10. float c1Leftx ;
11. float c1Lefty ;
12. float c1Rightx ;
13. float c1Righty;
14. //
15. float cFarLeftx;
16. float cFarLefty;
17. float cFarRightx ;
18. float cFarRighty ;
19. //
20. void setup() {
21.   //
22.   size(900, 900);
23.   //
24.   noStroke();
25.   smooth();
26. }
27. void draw() {
28.   // fill(0, 12); // Make the shape blur onto the screen.
29.   background(0); // Animate without blur
30.   float ax=350;
31.   float ay=350;
32.   float bx=mouseX;
33.   float by=mouseY;
34.   //
35.   float mx = lerp(ax, bx, 0.5);
36.   float my = lerp(ay, by, 0.5);
37.   showAPosition(mx, my, "M");
38.   //
39.   float h = 340;
40.   //
41.   float a = atan2(bx-ax, by-ay);
42.   if (a<0) a+=TWO_PI;
43.   float c1x = mx - cos(a) * h;
44.   float c1y = my + sin(a) * h;
45.   showAPosition(c1x, c1y, "C1");
46.   c1Leftx = mx - cos(a+.2) * h;
47.   c1Lefty = my + sin(a+.2) * h;
48.   showAPosition(c1Leftx, c1Lefty, "C1 Left");
49.   //
50.   c1Rightx = mx - cos(a-.2) * h;
51.   c1Righty = my + sin(a-.2) * h;
52.   showAPosition(c1Rightx, c1Righty, "C1 Right");
53.   //
54.   //-----------------------------
55.   float h1 = 140;
56.   cFarLeftx = mx - cos(a+.2) * h1;
57.   cFarLefty = my + sin(a+.2) * h1;
58.   //
59.   cFarRightx = mx - cos(a-.2) * h1;
60.   cFarRighty = my + sin(a-.2) * h1;
61.   //
62.   blob(mouseX, mouseY, 350, 350);
63.   showAPosition(350, 350, "A");
64. }
65. void showAPosition( float a, float b, String myText) {
66.   int size=4;
67.   stroke(255);
68.   noFill();
69.   rect (a-size, b-size,
70.   size*2, size*2);
71.   text ( myText, a+8, b+5);
72. }
73. void blob(int p1X, int p1Y, int p2X, int p2Y) { // p1X = control point x axis ...
74.   pushMatrix();
75.   translate(0, 0); // move the position of the entire shape
76.   // scale(size); // scale to size
77.   //noStroke();
78.   beginShape(); // draw the blob
79.   fill(2, 2, 244); // blue 
80.   Vertex(p1X, p1Y); // Set the first anchor point and let it be the same as the first bezier
81.   fill(2, 2, 244); // blue
82.   BezierVertex( c1Leftx, c1Lefty, c1Rightx, c1Righty, p2X, p2Y);   // red
83.   fill(222, 2, 2); // red
84.   BezierVertex(cFarLeftx, cFarLefty, cFarRightx, cFarRighty, p1X, p1Y); // green
85.   endShape();
86.   popMatrix();
87. }
88. void Vertex(float x, float y)
89. {
90.   pushStyle();
91.   ellipseMode(CENTER);
92.   noStroke();
93.   // Reference point (if Bézier curve is drawn close of 0 and translated)
94.   fill(#FF00FF, 200);
95.   ellipse(0, 0, 5, 5);
96.   // Starting point of the curve
97.   fill(#FFFF00, 200);
98.   ellipse(x, y, 5, 5);
99.   popStyle();
100.   BezierHelper_prevX = x;
101.   BezierHelper_prevY = y;
102.   vertex(x, y);
103. }
104. void BezierVertex(float cx1, float cy1, float cx2, float cy2, float x, float y)
105. {
106.   pushStyle();
107.   rectMode(CORNERS);
108.   ellipseMode(CENTER);
109.   // Anchor point
110.   fill(#0000FF, 200);
111.   noStroke();
112.   rect(x-1, y-1, x+1, y+1);
113.   // First control point
114.   stroke(#00FF00, 220);   // green
115.   //stroke(0, 244, 0, 220);
116.   strokeWeight(1);
117.   line(BezierHelper_prevX, BezierHelper_prevY, cx1, cy1);
118.   fill(#00FF00, 200);
119.   noStroke();
120.   ellipse(cx1, cy1, 3, 3);
121.   // Second control point
122.   stroke(#FF0000, 220);     // red
123.   strokeWeight(1);
124.   line(x, y, cx2, cy2);
125.   fill(#FF0000, 200);
126.   noStroke();
127.   ellipse(cx2, cy2, 3, 3);
128.   popStyle();
129.   BezierHelper_prevX = x;
130.   BezierHelper_prevY = y;
131.   bezierVertex(cx1, cy1, cx2, cy2, x, y);
132. }