127 lines
2.8 KiB
Markdown
127 lines
2.8 KiB
Markdown
---
|
|
title: "jsxgraph support"
|
|
date: 2020-08-03T14:00:00+08:00
|
|
description: "Dynamic Mathematics with JavaScript"
|
|
draft: false
|
|
enableToc: false
|
|
enableTocContent: false
|
|
tags:
|
|
-
|
|
series:
|
|
-
|
|
categories:
|
|
- diagram
|
|
libraries:
|
|
- jsxgraph
|
|
image: images/feature1/graph.png
|
|
---
|
|
Use `Shift` and `Mouse Left` to drag, `Shift` and `Mouse Scroll` to zoom.
|
|
|
|
### Example 1
|
|
```jessiecode
|
|
point(5, 5) <<id:'pt', name: 'point'>>;
|
|
grid();
|
|
axis([0,0],[0,1]);
|
|
axis([0,0],[1,0]);
|
|
|
|
a = slider([1, 3], [6, 3], [0, 5, 10]) <<name: 'arg'>>;
|
|
f = function (x) {return 7*exp(-V(a)*x^2)*cos(6*PI*x);};
|
|
g = functiongraph(f);
|
|
|
|
$board.setView([-10, 10, 10, -10]);
|
|
```
|
|
|
|
### Example 2
|
|
Point A will stay inside the circle.
|
|
|
|
```jessiecode
|
|
// code adapted from https://github.com/jsxgraph/JessieCode/blob/master/examples/gaetano_g.html
|
|
O=point(0,0)<<name:'0',fixed:true>>;
|
|
U=point(1,0)<<name:'1',fixed:true>>;
|
|
I=point(0,1)<<name:'i',fixed:true>>;
|
|
x=line(O,U)<<withLabel:true,name:'x',lastArrow:true>>;
|
|
y=line(O,I)<<withLabel:true,name:'y',lastArrow:true>>;
|
|
r = 3;
|
|
c=circle(O,r);
|
|
p=point(1,1)<<color:'lime'>>;
|
|
g=<<x:1,y:1>>;
|
|
p.on('drag',function(){
|
|
if(p.X()^2+p.Y()^2>r*r) {
|
|
p.moveTo([g.x,g.y]);
|
|
};
|
|
g.x=p.X();
|
|
g.y=p.Y();
|
|
});
|
|
```
|
|
|
|
### Example3
|
|
This graph shows the properties of triangle. Drag the edges of triangle to observe changes.
|
|
|
|
```jessiecode:400x400
|
|
// code adapted from https://github.com/jsxgraph/JessieCode/blob/master/examples/euler.html
|
|
cerise = <<
|
|
strokeColor: '#901B77',
|
|
fillColor: '#CA147A',
|
|
visible: true,
|
|
withLabel: true
|
|
>>;
|
|
grass = <<
|
|
strokeColor: '#009256',
|
|
fillColor: '#65B72E',
|
|
visible: true,
|
|
withLabel: true
|
|
>>;
|
|
perp = <<
|
|
strokeColor: 'black',
|
|
dash: 1,
|
|
strokeWidth: 1,
|
|
point: cerise
|
|
>>;
|
|
median = <<
|
|
strokeWidth: 1,
|
|
strokeColor: '#333333',
|
|
dash:2
|
|
>>;
|
|
|
|
// The triangle
|
|
A = point(1, 0) cerise;
|
|
B = point(-1, 0) cerise;
|
|
C = point(0.2, 1.5) cerise;
|
|
|
|
pol = polygon(A, B, C) << fillColor: '#FFFF00', borders: << strokeWidth: 2, strokeColor: '#009256' >> >>;
|
|
|
|
// The perpendiculars
|
|
H_c = perpendicularsegment(pol.borders[0], C) perp;
|
|
H_a = perpendicularsegment(pol.borders[1], A) perp;
|
|
H_b = perpendicularsegment(pol.borders[2], B) perp;
|
|
|
|
// intersection
|
|
H = intersection(H_c, H_b, 0) grass;
|
|
|
|
// Midpoints
|
|
mAB = midpoint(A, B) cerise;
|
|
mBC = midpoint(B, C) cerise;
|
|
mCA = midpoint(C, A) cerise;
|
|
|
|
ma = segment(mBC, A) median;
|
|
mb = segment(mCA, B) median;
|
|
mc = segment(mAB, C) median;
|
|
S = intersection(ma, mc, 0) grass;
|
|
|
|
grass.name = 'U';
|
|
c = circumcircle(A, B, C) << strokeColor: '#000000', dash: 3, strokeWidth: 1, center: grass >>;
|
|
|
|
euler = line(H, S) << strokeWidth: 2, strokeColor:'#901B77' >>;
|
|
|
|
$board.setView([-1.5, 2, 1.5, -1]);
|
|
```
|
|
|
|
### Note
|
|
You can specify height and weight in the language specifier. e.g.
|
|
````markdown
|
|
```jessiecode:400x300
|
|
// codes...
|
|
```
|
|
````
|
|
will change the graph size to width 400px and height 300px.
|