Playground for scaffolded JSXGraph

[Tom Berend]

Hello Friends,

JSXGraph is often described as ‘twiddly’ and hard to use.  

I needed an easier, 'quick-start' version of JSXGraph to teach introductory programming, so I wrote a TypeScript wrapper. I invite you to try it in this ‘playground’.  About 95% of the JSXGraph functionality is supported.  

It requires a computer because the Monaco Editor doesn’t run on tablets.
   
https://communityreading.org/jsxgraph/playground

Some things have changed;  for example, I turned off the default names ‘A’, ‘B’, etc, because learners get confused between names and variables.  

And there are fun additions – for example type:   TSX.image(  and then press CTRL+I to see the list of available options (this works with attributes too).

Here’s some code to copy and paste into the playground; a demonstration of why planets have retrograde motion.

let imgOffset = .25

let sun = TSX.image('../icons/sun.png', [0 - .5, 0 - .5], [1, 1]);
let earth = TSX.image('../icons/earth.png', [1 - imgOffset, 0 - imgOffset], [.5, .5]);
let mars = TSX.image('../icons/mars.png', [2 - imgOffset, 0 - imgOffset], [.5, .5]);

let eOrbit = 365 // days
let mOrbit = 687

// Kepler's 3rd law dist^3 == period^2 (then scaled to fit)
let eDist = Math.cbrt(Math.pow(eOrbit,2)) / 25
let mDist = Math.cbrt(Math.pow(mOrbit,2)) / 25

TSX.circle([0, 0], eDist) // just for reference
TSX.circle([0, 0], mDist)

let chk = TSX.checkbox([-4, 4], 'See from Earth POV')

let time = 0
setInterval(() => {
let earthX = Math.cos(time / eOrbit) * eDist - imgOffset
let earthY = Math.sin(time / eOrbit) * eDist - imgOffset
earth.setPositionDirectly([earthX, earthY])

let marsX = Math.cos(time / mOrbit) * mDist - imgOffset
let marsY = Math.sin(time / mOrbit) * mDist - imgOffset
mars.setPositionDirectly([marsX, marsY])

// the next line sets the EARTH as the center of this construction.
if (chk.Value()) {
TSX.setBoundingBox(-5 + earthX, 5 + earthY, 5 + earthX, -5 + earthY)
chk.setPositionDirectly([-4 + earthX, 4 + earthY])
}
time += 2
TSX.update()
}, 10)