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:
@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→ /pikchrshow
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]
@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→ /pikchrshow
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.
@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>→ /pikchrshow
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);
(6) By anonymous on 2025-03-16 20:52:06 in reply to 5.1 [link] [source]
Not to resurrect this post, but I did a different post about manually drawing Bezier curves which I realized would work nicely for this as well.
A basic flower like this is probably not what you're after, but it shows some of the work:
define drawQuadraticBezier { line from $1 \ to 1/20 between 1/20 between $1 and $3 and 1/20 between $3 and $2 \ to 2/20 between 2/20 between $1 and $3 and 2/20 between $3 and $2 \ to 3/20 between 3/20 between $1 and $3 and 3/20 between $3 and $2 \ to 4/20 between 4/20 between $1 and $3 and 4/20 between $3 and $2 \ to 5/20 between 5/20 between $1 and $3 and 5/20 between $3 and $2 \ to 6/20 between 6/20 between $1 and $3 and 6/20 between $3 and $2 \ to 7/20 between 7/20 between $1 and $3 and 7/20 between $3 and $2 \ to 8/20 between 8/20 between $1 and $3 and 8/20 between $3 and $2 \ to 9/20 between 9/20 between $1 and $3 and 9/20 between $3 and $2 \ to 10/20 between 10/20 between $1 and $3 and 10/20 between $3 and $2 \ to 11/20 between 11/20 between $1 and $3 and 11/20 between $3 and $2 \ to 12/20 between 12/20 between $1 and $3 and 12/20 between $3 and $2 \ to 13/20 between 13/20 between $1 and $3 and 13/20 between $3 and $2 \ to 14/20 between 14/20 between $1 and $3 and 14/20 between $3 and $2 \ to 15/20 between 15/20 between $1 and $3 and 15/20 between $3 and $2 \ to 16/20 between 16/20 between $1 and $3 and 16/20 between $3 and $2 \ to 17/20 between 17/20 between $1 and $3 and 17/20 between $3 and $2 \ to 18/20 between 18/20 between $1 and $3 and 18/20 between $3 and $2 \ to 19/20 between 19/20 between $1 and $3 and 19/20 between $3 and $2 \ to $2 \ color red } @pi = 3.1415926 @r1 = 2 @r2 = 1 A: dot at 0,0 invisible B1: dot at @r1*cos((2*@pi/20)*3),@r1*sin((2*@pi/20)*3) invisible B2: dot at @r1*cos((2*@pi/20)*7),@r1*sin((2*@pi/20)*7) invisible B3: dot at @r1*cos((2*@pi/20)*11),@r1*sin((2*@pi/20)*11) invisible B4: dot at @r1*cos((2*@pi/20)*15),@r1*sin((2*@pi/20)*15) invisible B5: dot at @r1*cos((2*@pi/20)*19),@r1*sin((2*@pi/20)*19) invisible C1: dot at @r2*cos((2*@pi/20)*5),@r2*sin((2*@pi/20)*5) invisible C2: dot at @r2*cos((2*@pi/20)*9),@r2*sin((2*@pi/20)*9) invisible C3: dot at @r2*cos((2*@pi/20)*13),@r2*sin((2*@pi/20)*13) invisible C4: dot at @r2*cos((2*@pi/20)*17),@r2*sin((2*@pi/20)*17) invisible C5: dot at @r2*cos((2*@pi/20)*1),@r2*sin((2*@pi/20)*1) invisible drawQuadraticBezier(A, B1, C5) drawQuadraticBezier(A, B1, C1) "P" "积极情绪" color purple at 1/2<A,B1> drawQuadraticBezier(A, B2, C1) drawQuadraticBezier(A, B2, C2) "A" "成就" color purple at 1/2<A,B2> drawQuadraticBezier(A, B3, C2) drawQuadraticBezier(A, B3, C3) "M" "意义" color purple at 1/2<A,B3> drawQuadraticBezier(A, B4, C3) drawQuadraticBezier(A, B4, C4) "R" "人际关系" color purple at 1/2<A,B4> drawQuadraticBezier(A, B5, C4) drawQuadraticBezier(A, B5, C5) "E" "投入" color purple at 1/2<A,B5>→ /pikchrshow
Adding some extras to it gets you some more interesting flowers:
define drawQuadraticBezier { line from $1 \ to 1/20 between 1/20 between $1 and $3 and 1/20 between $3 and $2 \ to 2/20 between 2/20 between $1 and $3 and 2/20 between $3 and $2 \ to 3/20 between 3/20 between $1 and $3 and 3/20 between $3 and $2 \ to 4/20 between 4/20 between $1 and $3 and 4/20 between $3 and $2 \ to 5/20 between 5/20 between $1 and $3 and 5/20 between $3 and $2 \ to 6/20 between 6/20 between $1 and $3 and 6/20 between $3 and $2 \ to 7/20 between 7/20 between $1 and $3 and 7/20 between $3 and $2 \ to 8/20 between 8/20 between $1 and $3 and 8/20 between $3 and $2 \ to 9/20 between 9/20 between $1 and $3 and 9/20 between $3 and $2 \ to 10/20 between 10/20 between $1 and $3 and 10/20 between $3 and $2 \ to 11/20 between 11/20 between $1 and $3 and 11/20 between $3 and $2 \ to 12/20 between 12/20 between $1 and $3 and 12/20 between $3 and $2 \ to 13/20 between 13/20 between $1 and $3 and 13/20 between $3 and $2 \ to 14/20 between 14/20 between $1 and $3 and 14/20 between $3 and $2 \ to 15/20 between 15/20 between $1 and $3 and 15/20 between $3 and $2 \ to 16/20 between 16/20 between $1 and $3 and 16/20 between $3 and $2 \ to 17/20 between 17/20 between $1 and $3 and 17/20 between $3 and $2 \ to 18/20 between 18/20 between $1 and $3 and 18/20 between $3 and $2 \ to 19/20 between 19/20 between $1 and $3 and 19/20 between $3 and $2 \ to $2 \ color red } @pi = 3.1415926 @r1 = 1.25 @r2 = 1 @f = 2/5 A: dot at 0,0 invisible B1: dot at @r1*cos((2*@pi/20)*3),@r1*sin((2*@pi/20)*3) invisible B2: dot at @r1*cos((2*@pi/20)*7),@r1*sin((2*@pi/20)*7) invisible B3: dot at @r1*cos((2*@pi/20)*11),@r1*sin((2*@pi/20)*11) invisible B4: dot at @r1*cos((2*@pi/20)*15),@r1*sin((2*@pi/20)*15) invisible B5: dot at @r1*cos((2*@pi/20)*19),@r1*sin((2*@pi/20)*19) invisible C1: dot at @r2*cos((2*@pi/20)*5),@r2*sin((2*@pi/20)*5) invisible C2: dot at @r2*cos((2*@pi/20)*9),@r2*sin((2*@pi/20)*9) invisible C3: dot at @r2*cos((2*@pi/20)*13),@r2*sin((2*@pi/20)*13) invisible C4: dot at @r2*cos((2*@pi/20)*17),@r2*sin((2*@pi/20)*17) invisible C5: dot at @r2*cos((2*@pi/20)*1),@r2*sin((2*@pi/20)*1) invisible drawQuadraticBezier(A, B1, @f between C5 and B5) drawQuadraticBezier(A, B1, @f between C1 and B2) "P" "积极情绪" color purple at 1/2<A,B1> drawQuadraticBezier(A, B2, @f between C1 and B1) drawQuadraticBezier(A, B2, @f between C2 and B3) "A" "成就" color purple at 1/2<A,B2> drawQuadraticBezier(A, B3, @f between C2 and B2) drawQuadraticBezier(A, B3, @f between C3 and B4) "M" "意义" color purple at 1/2<A,B3> drawQuadraticBezier(A, B4, @f between C3 and B3) drawQuadraticBezier(A, B4, @f between C4 and B5) "R" "人际关系" color purple at 1/2<A,B4> drawQuadraticBezier(A, B5, @f between C4 and B4) drawQuadraticBezier(A, B5, @f between C5 and B1) "E" "投入" color purple at 1/2<A,B5>→ /pikchrshow
Then it's just a matter of setting the radii and pulling the control point of the Bezier curves in a way that makes a "pretty" petal with acceptable or desired overlaps.
(7) By anonymous on 2025-03-17 02:47:31 in reply to 6 [link] [source]
You could also "walk" both Bezier curve sides of each petal so that you can close them and color them for a nice effect as well. Obviously, each petal is a layer and one petal is above them all and one petal is behind them all, just depending on the drawing order.
define drawPetal { line from $1 \ to 1/20 between 1/20 between $1 and $3 and 1/20 between $3 and $2 \ to 2/20 between 2/20 between $1 and $3 and 2/20 between $3 and $2 \ to 3/20 between 3/20 between $1 and $3 and 3/20 between $3 and $2 \ to 4/20 between 4/20 between $1 and $3 and 4/20 between $3 and $2 \ to 5/20 between 5/20 between $1 and $3 and 5/20 between $3 and $2 \ to 6/20 between 6/20 between $1 and $3 and 6/20 between $3 and $2 \ to 7/20 between 7/20 between $1 and $3 and 7/20 between $3 and $2 \ to 8/20 between 8/20 between $1 and $3 and 8/20 between $3 and $2 \ to 9/20 between 9/20 between $1 and $3 and 9/20 between $3 and $2 \ to 10/20 between 10/20 between $1 and $3 and 10/20 between $3 and $2 \ to 11/20 between 11/20 between $1 and $3 and 11/20 between $3 and $2 \ to 12/20 between 12/20 between $1 and $3 and 12/20 between $3 and $2 \ to 13/20 between 13/20 between $1 and $3 and 13/20 between $3 and $2 \ to 14/20 between 14/20 between $1 and $3 and 14/20 between $3 and $2 \ to 15/20 between 15/20 between $1 and $3 and 15/20 between $3 and $2 \ to 16/20 between 16/20 between $1 and $3 and 16/20 between $3 and $2 \ to 17/20 between 17/20 between $1 and $3 and 17/20 between $3 and $2 \ to 18/20 between 18/20 between $1 and $3 and 18/20 between $3 and $2 \ to 19/20 between 19/20 between $1 and $3 and 19/20 between $3 and $2 \ to $2 \ to 1/20 between 1/20 between $2 and $4 and 1/20 between $4 and $1 \ to 2/20 between 2/20 between $2 and $4 and 2/20 between $4 and $1 \ to 3/20 between 3/20 between $2 and $4 and 3/20 between $4 and $1 \ to 4/20 between 4/20 between $2 and $4 and 4/20 between $4 and $1 \ to 5/20 between 5/20 between $2 and $4 and 5/20 between $4 and $1 \ to 6/20 between 6/20 between $2 and $4 and 6/20 between $4 and $1 \ to 7/20 between 7/20 between $2 and $4 and 7/20 between $4 and $1 \ to 8/20 between 8/20 between $2 and $4 and 8/20 between $4 and $1 \ to 9/20 between 9/20 between $2 and $4 and 9/20 between $4 and $1 \ to 10/20 between 10/20 between $2 and $4 and 10/20 between $4 and $1 \ to 11/20 between 11/20 between $2 and $4 and 11/20 between $4 and $1 \ to 12/20 between 12/20 between $2 and $4 and 12/20 between $4 and $1 \ to 13/20 between 13/20 between $2 and $4 and 13/20 between $4 and $1 \ to 14/20 between 14/20 between $2 and $4 and 14/20 between $4 and $1 \ to 15/20 between 15/20 between $2 and $4 and 15/20 between $4 and $1 \ to 16/20 between 16/20 between $2 and $4 and 16/20 between $4 and $1 \ to 17/20 between 17/20 between $2 and $4 and 17/20 between $4 and $1 \ to 18/20 between 18/20 between $2 and $4 and 18/20 between $4 and $1 \ to 19/20 between 19/20 between $2 and $4 and 19/20 between $4 and $1 \ to $1 \ close color red fill pink } @pi = 3.1415926 @r1 = 1.25 @r2 = 0.75 @f1 = 2/5 @f2 = 2/5 A: dot at 0,0 invisible B1: dot at @r1*cos((2*@pi/20)*3),@r1*sin((2*@pi/20)*3) invisible B2: dot at @r1*cos((2*@pi/20)*7),@r1*sin((2*@pi/20)*7) invisible B3: dot at @r1*cos((2*@pi/20)*11),@r1*sin((2*@pi/20)*11) invisible B4: dot at @r1*cos((2*@pi/20)*15),@r1*sin((2*@pi/20)*15) invisible B5: dot at @r1*cos((2*@pi/20)*19),@r1*sin((2*@pi/20)*19) invisible C1: dot at @r2*cos((2*@pi/20)*5),@r2*sin((2*@pi/20)*5) invisible C2: dot at @r2*cos((2*@pi/20)*9),@r2*sin((2*@pi/20)*9) invisible C3: dot at @r2*cos((2*@pi/20)*13),@r2*sin((2*@pi/20)*13) invisible C4: dot at @r2*cos((2*@pi/20)*17),@r2*sin((2*@pi/20)*17) invisible C5: dot at @r2*cos((2*@pi/20)*1),@r2*sin((2*@pi/20)*1) invisible drawPetal(A, B2, @f1 between C2 and B3, @f2 between C1 and B1) drawPetal(A, B3, @f1 between C3 and B4, @f2 between C2 and B2) drawPetal(A, B4, @f1 between C4 and B5, @f2 between C3 and B3) drawPetal(A, B5, @f1 between C5 and B1, @f2 between C4 and B4) drawPetal(A, B1, @f1 between C1 and B2, @f2 between C5 and B5) circle at 0,0 color red fill yellow "P" "积极情绪" color purple at 1/2<A,B1> "E" "投入" color purple at 1/2<A,B5> "R" "人际关系" color purple at 1/2<A,B4> "M" "意义" color purple at 1/2<A,B3> "A" "成就" color purple at 1/2<A,B2>→ /pikchrshow
I'd assume this could all be combined with some of the rotational macros like in the spiderweb post to have an arbitrary number of petals. That would allow some cool stuff like making arbitrarily large flower snarks.