An ordinary construction of points, lines, circles and five point conics can be saved as an interactive web page which uses JavaScript? instead of the JavaVM.
Use "Export to CindyJS" from the File menu to create such a page.
1) You will notice that the dependent points are drawn using bright colors instead of the dim colors Cinderella uses.
To fix this, edit the generated web page and change:
defaultAppearance: {},
to
defaultAppearance: { dimDependent: 0.7 },
so the default color scale factor for dependent points is 0.7 instead of the default 1.0.
The defaultAppearance value has the following defaults:
defaultAppearance: {
dimDependent: 1, // applies only to points
pointColor:[1, 0, 0], // matches Cinderella's default point color (red)
pointSize: 5, // matches Cinderella's default point size
alpha: 1, // opacity for both point and line drawing
lineSize: 2, // if this were set to 1 then it would match Cinderella's default size
lineColor:[0, 0, 1], // matches Cinderella's default point color (blue)
clip: "none", // line endpoint clipping; other choice is "end"
overhangLine: 1.1, // applies only to lines and then only if clip value is "end"
overhangSeg: 1 // applies only to line segments
}
2) The pos: [ ... ], values are only needed for "Free" points including those on lines, circles and conics and for selection of point intersection results.
3) Fix-up for any circles with a fixed radius
Note that "CircleByFixedRadius" becomes "CircleMFixedr" and the radius value needs to be added.
You will need to get the radius value from the formula in a "Construction Text" window.
Change (for example):
{ name: "C0", type: "CircleByFixedRadius", color: [ 0.0, 0.0, 1.0 ], args: [ "A" ], size: 1, printname: "$C_{0}$" }
to
{ name: "C0", type: "CircleMFixedr", color: [ 0.0, 0.0, 1.0 ], args: [ "A" ], radius: 2, size: 1, printname: "$C_{0}$" }
Also note that you are not able to stretch the circle, only move it.
4) Freelines are drawn randomly. Refreshing web the page moves them about.
5) Depending on pos value PointOnCircle? crashes when used with conic.
Instead of doing a "Reached refinement limit, giving up."
instead does a "Need to refine." and throws an
uncaught exception: RefineException?
Removing the throw makes the code work with no discernable problem.
In src\js\libgeo\Tracing.js:
debug("Need to refine.");
requestRefinement();
...
throw RefineException ?;
This example of a geometry value fails:
geometry: [
{ name: "A", type: "Free", pos: [ 1.0909090909090908, -4.0, -1.1363636363636365 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "B", type: "Free", pos: [ -3.0676691729323307, -4.0, -0.7518796992481203 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "C", type: "Free", pos: [ 4.0, 0.30418250950570347, 0.3802281368821293 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "D", type: "Free", pos: [ 4.0, -1.5771428571428572, 0.5714285714285714 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "E", type: "Free", pos: [ 0.6857142857142857, -4.0, 2.857142857142857 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "C0", type: "ConicBy5", color: [ 0.0, 0.0, 1.0 ], args: [ "E", "A", "B", "C", "D" ], size: 1, printname: "$C_{0}$" },
{ name: "F", type: "PointOnCircle", pos: [ 4.0, 1.8808856876336117, 0.47544934794164406 ], color: [ 0.0, 1.0, 0.0 ], args: [ "C0" ], labeled: true } ],
Changing the "F" pos value to [ 4.0, -3.9959345057221376, 1.5715851232332456 ] makes the example display.
6) Generally there are mismatches for the type values.
For some of these it is just a matter of changing the value:
"Parallel" -> "Para"
"AngularBisector" -> "angleBisector"
"ConicFoci" -> "ConicBy2Foci1P"
"IntersectionConicConic" -> "IntersectConicConic"
"Conic4P1L" -> "ConicBy4p1l"
"Conic1P4L" -> "ConicBy1p14"
"Conic5L" -> "ConicBy5lines"
"ConicFoci" -> "ConicBy2Foci1P" use index: 1
"ConicFociH" -> "ConicBy2Foci1P" use index: 2
(not in Cinderella) "ConicBy2p3l" use index: 1..4
(not in Cinderella) "ConicBy3p2l" use index: 1..4
"LineByFixedAngle", "Dist", "EuclideanMid", "Dist", "Text", "ConicParabolaPL", "ConicInSquare" and "Arc" are not implemented yet in CindyJS.
For multiple point intersection results you can use the pos or index value to select an object from the output collection.
For all multiple conic results you need to change type from "SelectP" to "SelectConic" and add an index value to select a conic not a point from the output collection.
Some points and lines for making a complete geometry value with the conics below:
{ name: "A", type: "Free", pos: [ 0.4112149532710281, -4.0, -0.9345794392523364 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "B", type: "Free", pos: [ -2.5477707006369426, -4.0, -0.6369426751592356 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "C", type: "Free", pos: [ 4.0, 1.2374100719424461, 0.7194244604316548 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "D", type: "Free", pos: [ 3.225806451612903, -4.0, 3.225806451612903 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "E", type: "Free", pos: [ 4.0, -0.6363636363636365, -1.1363636363636365 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "a", type: "Through", pos: [ -0.8988764044943821, 0.5800888424353282, 4.0 ], color: [ 0.0, 0.0, 1.0 ], args: [ "C" ], labeled: true, size: 1 },
{ name: "b", type: "Through", pos: [ -0.3168316831683169, 2.9702970297029707, 4.0 ], color: [ 0.0, 0.0, 1.0 ], args: [ "D" ], labeled: true, size: 1 },
{ name: "c", type: "Through", pos: [ 1.5866209262435678, 2.8301886792452824, 4.0 ], color: [ 0.0, 0.0, 1.0 ], args: [ "E" ], labeled: true, size: 1 },
Fragments of geometry values for various conics:
{ name: "Collection__1", type: "ConicBy4p1l", args: ["A", "B", "C", "D", "a"] },
{ name: "C0", type: "SelectConic", color: [0.0, 1.0, 0.0], args: ["Collection__1"], index: 2, size: 1, printname: "$C_{0}$" },
{ name: "C1", type: "SelectConic", color: [1.0, 0.0, 0.0], args: ["Collection__1"], index: 1, size: 1, printname: "$C_{1}$" }],
{ name: "Collection__1", type: "ConicBy1p4l", args: ["a", "b", "c", "d", "A"] },
{ name: "C1", type: "SelectConic", color: [0.0, 1.0, 0.0], args: ["Collection__1"], index: 2, size: 1, printname: "$C_{1}$" },
{ name: "C0", type: "SelectConic", color: [1.0, 0.0, 0.0], args: ["Collection__1"], index: 1, size: 1, printname: "$C_{0}$" }],
{ name: "Collection__1", type: "ConicBy2p3l", args: ["A", "B", "a", "b", "c"] },
{ name: "C0", type: "SelectConic", color: [0.0, 1.0, 0.0], args: ["Collection__1"], index: 4, size: 1, printname: "$C_{0}$" },
{ name: "C1", type: "SelectConic", color: [1.0, 0.0, 0.0], args: ["Collection__1"], index: 3, size: 1, printname: "$C_{1}$" },
{ name: "C2", type: "SelectConic", color: [0.0, 1.0, 1.0], args: ["Collection__1"], index: 2, size: 1, printname: "$C_{2}$" },
{ name: "C3", type: "SelectConic", color: [1.0, 1.0, 0.0], args: ["Collection__1"], index: 1, size: 1, printname: "$C_{3}$" }],
{ name: "Collection__1", type: "ConicBy3p2l", args: ["A", "B", "C", "a", "b"] },
{ name: "C0", type: "SelectConic", color: [0.0, 1.0, 0.0], args: ["Collection__1"], index: 4, size: 1, printname: "$C_{0}$" },
{ name: "C1", type: "SelectConic", color: [1.0, 0.0, 0.0], args: ["Collection__1"], index: 3, size: 1, printname: "$C_{1}$" },
{ name: "C2", type: "SelectConic", color: [0.0, 1.0, 1.0], args: ["Collection__1"], index: 2, size: 1, printname: "$C_{2}$" },
{ name: "C3", type: "SelectConic", color: [1.0, 1.0, 0.0], args: ["Collection__1"], index: 1, size: 1, printname: "$C_{3}$" }],
{ name: "Collection__1", type: "ConicBy2Foci1P", args: ["A", "B", "C"] },
{ name: "C0", type: "SelectConic", color: [0.0, 1.0, 0.0], args: ["Collection__1"], index: 2, size: 1, printname: "$C_{0}$" },
{ name: "C1", type: "SelectConic", color: [1.0, 0.0, 0.0], args: ["Collection__1"], index: 1, size: 1, printname: "$C_{1}$" }],
7) Clicking does not highlight anything.
So you do not always realize that you are really just dragging the nearest movable point.
The point being dragged does not jump under the pointer either but remains at a constant xy offset from the pointer while dragging it.
Best regards,
Alexander Elkins
Updated: Fri, 30 Oct 2015 22:55:16 GMT
Refers to http://cinderella.de/CJS/build/js/Cindy-dev.js
Last-Modified: Wed, 07 Oct 2015 14:47:14 GMT
Content-Length: 359193 bytes
|
