Pikchr

PERMA Flower, how to remove the outer circle ?
Login

PERMA Flower, how to remove the outer circle ?

(1) By pluswave on 2024-09-10 03:42:16 [link] [source]

I made a blogpost to discuss happiness, I drew a Flourish diagram using pikchr:

P 积极情绪 E 投入 R 人际关系 M 意义 A 成就
@pi=3.1415926
@side_len=1
C0: dot invis at (0,0)
C1: dot invis at (@side_len*sin(0), @side_len*cos(0))
C2: dot invis at (@side_len*sin(2*@pi/5), @side_len*cos(2*@pi/5))
C3: dot invis at (@side_len*sin(4*@pi/5), @side_len*cos(4*@pi/5))
C4: dot invis at (@side_len*sin(6*@pi/5), @side_len*cos(6*@pi/5))
C5: dot invis at (@side_len*sin(8*@pi/5), @side_len*cos(8*@pi/5))


@rad_len = 1

F1: circle at C1 rad @rad_len color red
"P" "积极情绪" color purple at 1/2<C1,C2>
F2: circle at C2 rad @rad_len color red
"E" "投入" color purple at 1/2<C2,C3>
F3: circle at C3 rad @rad_len color red
"R" "人际关系" color purple at 1/2<C3,C4>
F4: circle at C4 rad @rad_len color red
"M" "意义" color purple at 1/2<C4,C5>
F5: circle at C5 rad @rad_len color red
"A" "成就" color purple at 1/2<C5,C1>

circle at C0 rad @rad_len * 1.81 thickness 0.4 color pink

But the last line of the code, is not my original goal: I want to make the outer space nothing. so that line is a patch . So how to remove the last line AND also remove the outer space ?

(2.3) By drh on 2024-09-10 10:24:21 edited from 2.2 in reply to 1 [link] [source]

P 积极情绪 E 投入 R 人际关系 M 意义 A 成就
@pi=3.1415926
@side_len=1
box color white fill white width 4.2 height 4.2 at (0,0)
C0: dot invis at (0,0)
C1: dot invis at (@side_len*sin(0), @side_len*cos(0))
C2: dot invis at (@side_len*sin(2*@pi/5), @side_len*cos(2*@pi/5))
C3: dot invis at (@side_len*sin(4*@pi/5), @side_len*cos(4*@pi/5))
C4: dot invis at (@side_len*sin(6*@pi/5), @side_len*cos(6*@pi/5))
C5: dot invis at (@side_len*sin(8*@pi/5), @side_len*cos(8*@pi/5))


@rad_len = 1

F1: circle at C1 rad @rad_len color red
"P" "积极情绪" color purple at 1/2<C1,C2>
F2: circle at C2 rad @rad_len color red
"E" "投入" color purple at 1/2<C2,C3>
F3: circle at C3 rad @rad_len color red
"R" "人际关系" color purple at 1/2<C3,C4>
F4: circle at C4 rad @rad_len color red
"M" "意义" color purple at 1/2<C4,C5>
F5: circle at C5 rad @rad_len color red
"A" "成就" color purple at 1/2<C5,C1>

circle at C0 rad @rad_len * 1.81 thickness 0.4 color white

You mean like this? I changed the color of the outer circle from "pink" to "white"

Edit: That worked great for me on preview. But then when I pressed "Submit", the post showed up with a light blue background and the outer circle was visible again. Bummer...

Second edit: I added a box with "fill white" underneath everything and that completely covers the entire image, so the image shows up with a white background regardless of the page background color. the entire image

(3) By pluswave on 2024-09-11 01:45:07 in reply to 2.3 [link] [source]

yes, but the background color is FIXED now. How can we make it TRANSPARENT to fit the theme background ?

(4) By Stephan Beal (stephan) on 2024-09-11 09:27:22 in reply to 3 [link] [source]

How can we make it TRANSPARENT to fit the theme background ?

It can be made transparent by using the color name "none" but that causes the other circles to not be hidden, ruining the fkower effect.

(5.1) By pluswave on 2024-09-20 09:11:48 edited from 5.0 in reply to 4 [source]

I think best approach to this issue is to change the "arc" definition and implementation. That is what I tried now.

P 积极情绪 E 投入 R 人际关系 M 意义 A 成就
@pi=3.1415926
@side_len=2
C0: dot invis at (0,0)
C1: dot invis at (@side_len*sin(0), @side_len*cos(0))
C2: dot invis at (@side_len*sin(2*@pi/5), @side_len*cos(2*@pi/5))
C3: dot invis at (@side_len*sin(4*@pi/5), @side_len*cos(4*@pi/5))
C4: dot invis at (@side_len*sin(6*@pi/5), @side_len*cos(6*@pi/5))
C5: dot invis at (@side_len*sin(8*@pi/5), @side_len*cos(8*@pi/5))


@rad_len = @side_len * 0.618

arc rad @rad_len from C1 to C0 color red
arc rad @rad_len from C1 to C0 cw color red
"P" "积极情绪" color purple at 1/2<C1,C0>

arc  rad @rad_len from C2 to C0 color red
arc rad @rad_len from C2 to C0 cw color red
"E" "投入"  color purple at 1/2<C2,C0>

arc  rad @rad_len from C3 to C0 color red
arc rad @rad_len from C3 to C0 cw color red
"R" "人际关系" color purple at 1/2<C3,C0>

arc  rad @rad_len from C4 to C0 color red
arc rad @rad_len from C4 to C0 cw color red
"M" "意义"color purple at 1/2<C4,C0>

arc  rad @rad_len from C5 to C0 color red
arc rad @rad_len from C5 to C0 cw color red
"A" "成就" color purple at 1/2<C5,C0>

It's great now ( which gives me a great surprise ), but can be more beautiful if we implement arc by using real circle . I tried the above code after I changed the origin code like this:

--- pikchr.y
+++ pikchr.y
@@ -994,59 +994,46 @@
 };


 /* Methods for the "arc" class */
 static void arcInit(Pik *p, PObj *pObj){
-  pObj->w = pik_value(p, "arcrad",6,0);
-  pObj->h = pObj->w;
-}
-/* Hack: Arcs are here rendered as quadratic Bezier curves rather
-** than true arcs.  Multiple reasons: (1) the legacy-PIC parameters
-** that control arcs are obscure and I could not figure out what they
-** mean based on available documentation.  (2) Arcs are rarely used,
-** and so do not seem that important.
-*/
-static PPoint arcControlPoint(int cw, PPoint f, PPoint t, PNum rScale){
-  PPoint m;
-  PNum dx, dy;
-  m.x = 0.5*(f.x+t.x);
-  m.y = 0.5*(f.y+t.y);
-  dx = t.x - f.x;
-  dy = t.y - f.y;
-  if( cw ){
-    m.x -= 0.5*rScale*dy;
-    m.y += 0.5*rScale*dx;
-  }else{
-    m.x += 0.5*rScale*dy;
-    m.y -= 0.5*rScale*dx;
-  }
-  return m;
+  if (pObj->rad == 0.0)
+    pObj->rad = pik_value(p, "arcrad",6,0);
+  PPoint f, t;
+  f = p->aTPath[0];
+  t = p->aTPath[1];
+  PNum minrad;
+  minrad = pik_dist(&f, &t) * 0.5;
+  if( pObj->rad<minrad ) pObj->rad = minrad;
+  PPoint center;
+  center.x = (f.x + t.x) * 0.5;
+  center.y = (f.y + t.y) * 0.5;
+  // make arc as large as "max circle"
+  pik_bbox_add_xy(&pObj->bbox, center.x - minrad, center.y - minrad);
+  pik_bbox_add_xy(&pObj->bbox, center.x + minrad, center.y + minrad);
+  pObj->w = pObj->h = pObj->rad;
 }
 static void arcCheck(Pik *p, PObj *pObj){
-  PPoint m;
   if( p->nTPath>2 ){
     pik_error(p, &pObj->errTok, "arc geometry error");
     return;
   }
-  m = arcControlPoint(pObj->cw, p->aTPath[0], p->aTPath[1], 0.5);
-  pik_bbox_add_xy(&pObj->bbox, m.x, m.y);
 }
 static void arcRender(Pik *p, PObj *pObj){
-  PPoint f, m, t;
+  PPoint f, t;
+  PNum r;
   if( pObj->nPath<2 ) return;
   if( pObj->sw<0.0 ) return;
   f = pObj->aPath[0];
   t = pObj->aPath[1];
-  m = arcControlPoint(pObj->cw,f,t,1.0);
-  if( pObj->larrow ){
-    pik_draw_arrowhead(p,&m,&f,pObj);
-  }
-  if( pObj->rarrow ){
-    pik_draw_arrowhead(p,&m,&t,pObj);
-  }
+  r = pObj->rad;
   pik_append_xy(p,"<path d=\"M", f.x, f.y);
-  pik_append_xy(p,"Q", m.x, m.y);
+  pik_append_dis(p,"A", r, "");
+  pik_append_dis(p, " ", r, "");
+  pik_append_num(p, " ", 0); // rotation
+  pik_append_num(p, " ", 0); // always small arc
+  pik_append_num(p, " ", pObj->cw);
   pik_append_xy(p," ", t.x, t.y);
   pik_append(p,"\" ",2);
   pik_append_style(p,pObj,0);
   pik_append(p,"\" />\n", -1);