| name | jessiecode-writer |
| description | Generate JessieCode code for creating interactive geometric constructions and mathematical function graphs using JSXGraph. Use when users need to: (1) create geometric figures (triangles, circles, polygons), (2) plot 2D/3D function graphs, (3) demonstrate mathematical concepts visually, (4) generate dynamic constructions with sliders or animations. |
JessieCode Writer
Overview
This skill generates JessieCode script code for creating interactive geometric constructions and mathematical visualizations using the JSXGraph library.
When to Use This Skill
Invoke this skill when users request:
- Geometric constructions: Points, lines, circles, polygons, angles, perpendiculars, parallels, etc.
- Function graphs: 2D or 3D plots of mathematical functions
- Mathematical demonstrations: Euler line, triangle centers (circumcenter, incenter, centroid, orthocenter), etc.
- Dynamic visualizations: Constructions with sliders, animations, or interactive elements
- Code modification: Edit or extend existing JessieCode code
Code Generation Workflow
Step 1: Understand the Request
Identify:
- Graphic type: Geometric figure, function graph, or 3D visualization
- Key elements: Points, lines, circles, polygons, functions, etc.
- Constraints: Relationships (perpendicular, parallel, tangent, etc.)
- Style requirements: Colors, line widths, labels, etc.
Step 2: Plan the Code Structure
// 1. Configuration (optional frontmatter)
---
boundingBox: [-5, 5, 5, -5]
axis: false
grid: true
---
// 2. Style definitions (optional)
redStyle = << strokeColor: 'red', strokeWidth: 2 >>;
// 3. Base elements (points, sliders)
A = point(-2, -1);
B = point(2, -1);
// 4. Derived elements (lines, circles, polygons)
segment(A, B);
circumcircle(A, B, C);
// 5. Labels and annotations
text(0, 0, "Triangle ABC");
Step 3: Generate the Code
Follow these principles:
- Syntax correctness: Use
<< >> for objects (not {}), proper function calls
- Clear structure: Group related elements, use comments
- Visual appeal: Appropriate colors, line widths, transparency
- Dynamic features: Use sliders for interactive elements when appropriate
Step 4: Verify the Output
Check:
Syntax Quick Reference
For detailed syntax rules, see references/grammar.md.
Data Types
// Booleans (case-insensitive)
flag = true;
// Strings (single quotes)
label = 'Hello World';
// Numbers
x = 3.14159;
// Objects (use << >> not {})
style = << strokeColor: 'red', size: 5 >>;
// Functions
f = function(x) { return x * x; };
Operators
// Arithmetic: +, -, *, /, %, ^ (power)
// Comparison: ==, !=, <, >, <=, >=, ~= (approximately equal)
// Logic: &&, ||, !
// Ternary: condition ? expr1 : expr2
Element Creation
// Basic elements
A = point(1, 2);
l = line(A, B);
s = segment(A, B);
c = circle(O, A); // center O, through A
p = polygon(A, B, C);
// With attributes
P = point(1, 2) << strokeColor: 'red', size: 5 >>;
// Geometric constructions
M = midpoint(A, B);
perp = perpendicular(l, P);
para = parallel(l, P);
I = intersection(l1, l2, 0); // index 0 for first intersection
Control Structures
// If statement
if (x > 0) {
// positive
} else {
// negative
}
// For loop
for (i = 0; i < 10; i = i + 1) {
// loop body
}
// While loop
while (condition) {
// loop body
}
API Reference
For detailed element documentation, see references/api/.
Common Elements
| Element | Function | Example |
|---|
| Point | point(x, y) | A = point(1, 2) |
| Line | line(A, B) | l = line(A, B) |
| Segment | segment(A, B) | s = segment(A, B) |
| Circle | circle(center, point) | c = circle(O, A) |
| Polygon | polygon(A, B, C, ...) | tri = polygon(A, B, C) |
| Text | text(x, y, content) | text(0, 0, 'Hello') |
| Slider | slider(min, max, step) | a = slider(0, 10, 0.1) |
| Midpoint | midpoint(A, B) | M = midpoint(A, B) |
| Intersection | intersection(l1, l2, index) | I = intersection(l1, l2, 0) |
Common Attributes
<<
strokeColor: 'red', // Line/border color
fillColor: 'blue', // Fill color
strokeWidth: 2, // Line width
size: 5, // Point size
name: 'A', // Label name
withLabel: true, // Show label
opacity: 0.5, // Transparency (0-1)
visible: true // Visibility
>>
Example Gallery
For more examples, see references/examples/.
Example 1: Triangle Circumcenter
---
boundingBox: [-5, 5, 5, -5]
grid: true
---
// Define triangle vertices
A = point(-2, -1) << name: 'A' >>;
B = point(2, -1) << name: 'B' >>;
C = point(0, 2) << name: 'C' >>;
triangle = polygon(A, B, C);
// Construct perpendicular bisectors
pAB = perpendicular(triangle.borders[0], midpoint(A, B));
pBC = perpendicular(triangle.borders[1], midpoint(B, C));
// Circumcenter is the intersection
O = intersection(pAB, pBC) << name: 'O' >>;
// Circumcircle
circ = circle(O, A) << strokeColor: 'blue' >>;
Example 2: Function Graph with Slider
---
boundingBox: [-5, 5, 5, -5]
axis: true
---
// Slider for parameter
a = slider(-3, 3, 0.1) << name: 'a' >>;
// Function with parameter
f = function(x) { return a * x^2; };
// Graph
graph = functiongraph(f, -5, 5) << strokeColor: 'red' >>;
// Dynamic text
text(-4, 4, "f(x) = " + a + " * x^2");
Common Mistakes to Avoid
Wrong Object Syntax
// Wrong: Using {} for objects
A = point(1, 2) { strokeColor: 'red' };
// Correct: Use << >>
A = point(1, 2) << strokeColor: 'red' >>;
Missing Function Parentheses
// Wrong
A = point 1, 2;
// Correct
A = point(1, 2);
Wrong Property Access
// Wrong: Using bracket notation
A['strokeColor'] = 'red';
// Correct: Use dot notation
A.strokeColor = 'red';
Resources
Version
v1.1 - Improved with frequency-tagged API docs, quick start guide, and example index
Boundaries
- 2D only: Do not generate complex 3D animation code
- No external resources: Do not reference external images or files
- Clarify ambiguity: For ambiguous requirements, ask clarifying questions before generating code
- Scope limit: Focus on geometric constructions and function graphs within JSXGraph capabilities
Output Format
When generating JessieCode code:
-
Use code blocks: Always use jessiecode language identifier
---
boundingBox: [-5, 5, 5, -5]
---
A = point(1, 2);
-
Add brief explanation before code: Explain what the code demonstrates
-
Add key points after code: Highlight important techniques used
-
Code structure:
- Configuration (frontmatter with
---)
- Style definitions (optional)
- Base elements (points, sliders)
- Derived elements (lines, circles, etc.)
- Labels and annotations
