How to use JSL to realize the hanging valley dynamic graph?

lala

grok3

Thanks Experts!

Names Default To Here( 1 );

//----------------------------------------------------------
// 1. Create a data table and add rows
//    We only need 0 to 180 degrees (semi-circle)
//----------------------------------------------------------
dt = New Table( "Radial Mesh Plot" );
dt << Add Rows( 181 );  // 0 to 180 degrees, 181 points

//----------------------------------------------------------
// 2. Add column: theta (in radians)
//    From 0 to π (0 to 180 degrees)
//----------------------------------------------------------
dt << New Column( "theta",
    Numeric,
    "Continuous",
    Formula(
        (Pi() / 180) * (Row() - 1)  // Row() starts at 1, so subtract 1
    )
);

//----------------------------------------------------------
// 3. Outer semi-circle (radius 3)
//    X = 3 * sin(theta)
//    Y = 3 * cos(theta)
//----------------------------------------------------------
dt << New Column( "X_outer",
    Numeric,
    "Continuous",
    Formula(
        3 * Sin( :theta )
    )
);

dt << New Column( "Y_outer",
    Numeric,
    "Continuous",
    Formula(
        3 * Cos( :theta )
    )
);

//----------------------------------------------------------
// 4. Inner curve (teardrop shape, scaled)
//    Cardioid-like equation: r = 1 - cos(theta)
//    Scaled to fit within the outer semi-circle, k = 1
//    X = (1 - cos(theta)) * sin(theta)
//    Y = (1 - cos(theta)) * cos(theta)
//----------------------------------------------------------
dt << New Column( "X_inner",
    Numeric,
    "Continuous",
    Formula(
        (1 - Cos( :theta )) * Sin( :theta )
    )
);

dt << New Column( "Y_inner",
    Numeric,
    "Continuous",
    Formula(
        (1 - Cos( :theta )) * Cos( :theta )
    )
);

//----------------------------------------------------------
// 5. Use Graph Builder to plot the basic graph
//    - Outer semi-circle and inner curve (as boundaries)
//    - Add fill and mesh via Graphics Script later
//----------------------------------------------------------
gb = Graph Builder(
    Size( 600, 600 ),
    Show Control Panel( 0 ),
    Variables(
        X( :X_outer ),
        Y( :Y_outer )
    ),
    Elements(
        Line(
            X( :X_outer ),
            Y( :Y_outer ),
            Legend( "Outer Semi-Circle" ),
            Connect Points( 1 ),
            Line Color( "Blue" ),
            Line Width( 2 )
        ),
        Line(
            X( :X_inner ),
            Y( :Y_inner ),
            Legend( "Inner Teardrop" ),
            Connect Points( 1 ),
            Line Color( "Blue" ),
            Line Width( 2 )
        )
    ),
    SendToReport(
        Dispatch(
            {},
            "X_outer",
            ScaleBox,
            {Min( -3.5 ), Max( 3.5 )}
        ),
        Dispatch(
            {},
            "Y_outer",
            ScaleBox,
            {Min( -1.5 ), Max( 3.5 )}
        )
    )
);

//----------------------------------------------------------
// 6. Add fill and radial mesh
//    Use Graphics Script to draw the filled area and mesh lines
//----------------------------------------------------------
frame = (gb << Report)[FrameBox(1)];
frame << Add Graphics Script(
    // Fill the area (using Polygon)
    Fill Color( "Blue" );
    Transparency( 0.5 );  // Semi-transparent fill
    points = {};
    // Add points from the outer semi-circle
    For( i = 1, i <= 181, i++,
        points[i] = {dt:X_outer[i], dt:Y_outer[i]}
    );
    // Add points from the inner curve (in reverse to close the polygon)
    For( i = 181, i >= 1, i--,
        points[362 - i] = {dt:X_inner[i], dt:Y_inner[i]}
    );
    Polygon( points );
    
    // Draw radial mesh lines (every 5 degrees)
    Pen Color( "Blue" );
    Pen Size( 1 );
    For( i = 1, i <= 181, i += 5,  // Every 5 degrees
        Line(
            {dt:X_inner[i], dt:Y_inner[i]},
            {dt:X_outer[i], dt:Y_outer[i]}
        )
    );
);

hogi

Is this a suggestion how JSL should look in the future?