The Interactive Geometry Software Cinderella

Forum: Cinderella Support (E)

Forums->Cinderella Support (E)->How to finesse CindyJS

aelkins
3 stars
How to finesse CindyJS


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


 
on: Thu 29 of Oct, 2015 [22:51 UTC] reads: 110216

Posted messages

author message
Aw: How to finesse CindyJS
on: Sat 31 of Oct, 2015 [10:28 UTC]
Sorry, my fault, I mixed up two things - there is a "gitlab" for Cinderella which is non-public and I added an account for you there (you should have received a mail, if not, let me know by sending a mail to me). And there's the CindyJS github, which is public. I did not create an account for you there, probably aelkins is somebody else.

In any case - your report is in the system ;-) and will be taken care of, I hope.

Thank you again
Ulli


author message
aelkins
3 stars
Re: Aw: How to finesse CindyJS
on: Sun 01 of Nov, 2015 [21:14 UTC]
Hi Ulli!

Thanks! I found the email messages in my junk mail folder. My email filter is set to exclusive, so I've now added cinderella.de domain to allow them through.

I've dressed up and sepatated the issues and submitted most them for now as #89-#93.

Best regards,
Alexander Elkins


author message
Aw: How to finesse CindyJS
on: Fri 30 of Oct, 2015 [07:26 UTC]
Hi Alexander,

thank you for this hint - the Javascript export is still in its early stages, but is getting better all the time. If you think that (1) is a bug (I do), please file a bugreport on gitlab (I added an account for you).

Thanks a lot
Ulli


author message
aelkins
3 stars
Re: Aw: How to finesse CindyJS
on: Fri 30 of Oct, 2015 [23:39 UTC]
I had intended this posting to help anyone else use CindyJS. So I was examining Cindy-dev.js (the minimized version - a bit cumbersome to deal with). I previously had no luck finding the source JavaScript? files.

Since you did not provide a link, I googled for [gitlab cinderella] and came up with https://github.com/CindyJS/CindyJS/issues/16 which says "Manually migrated from GitLab? issue 3". Google also finds "yields the element which has last been moved" at http://issuehub.io/?label%5B%5D=Cinderella+compat which says "Login with Github".

I see that the user name aelkins is taken at github.com however my hotmail is not recognized by https://github.com/password_reset. I do not know how to see or change my email address on this forum so I do not know what you may have used.

At least now I have access to the non-minimized version of the source from https://github.com/CindyJS/CindyJS/archive/master.zip 8,371,408 bytes.
The defaultAppearance.dimDependent value could be changed by modifying the html Cinderella exports or by changing
src\js\libgeo\GeoBasics.js:defaultAppearance.dimDependent = 0.7;
which are you advocating?

Best regards,
Alexander Elkins





Show posts:
 
Language