TakagiHitoshi.github.io/heart.html at main · TakagiHitoshi/TakagiHitoshi.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!---*-Mode:javascript;-*--->
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div>
    <script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
    \(f_{1}(x) = \sqrt{|x|\times(1-|x|)},f_{2}(x) = -\sqrt{1-\sqrt{|x|}}\)

</div>

<div id="graph" style="width: 600px; height: 600px;">

<script>

const STEP = 1;
const MAX = 200;
let x1 = [];
let y1 = [];
let y2 = [];

Plotly.newPlot('graph',
	       [{
		   x: x1,
		   y: y1,
		   type: 'scatter',
		   mode: 'markers',
		   marker:{size: 20, color: 'blue'}
	       },
		{
		    x: x1,
		    y: y2,
		    type: 'scatter',
		    mode: 'markers',
		    marker:{size: 20, color: 'blue'}
		}
	       ],
	       {
		   xaxis: {range: [-1.1, 1.1],
			   visible:false},
		   yaxis: {range: [-1.1, 1.1],
			   visible:false},

});

let i = -MAX;
function compute(){
    if (i > MAX)
	return false;
    let x = i / MAX;
    x1.push(x);
    y1.push(Math.sqrt(Math.abs(x) * (1 - Math.abs(x))));
    y2.push(-Math.sqrt((1 - Math.sqrt(Math.abs(x)))));
    i += STEP;
//    console.log(x);
    return true;
}

function update () {
    let ret = compute();
    Plotly.animate('graph', {
	data: [
	    {x: x1,
	     y: y1
	    }
	    ,
	    {x: x1,
	     y: y2
	    }
	]
    }, {
	transition: {
	    duration: 100
	},
	frame: {
	    duration: 100,
	    redraw: false
	}
    });
    if (ret)
	frame = requestAnimationFrame(update);
    else
	cancelAnimationFrame(frame);

}

let frame = requestAnimationFrame(update);

</script>
</html>