HTML/test.html at main · LopenaFollower/HTML · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			.frac{
				display:inline-block;
				position:relative;
				vertical-align:middle;
				letter-spacing:0.001em;
				text-align:center;
			}
			#numerator,#speed_c{
				color:#0d0;
				display:block;
				padding:0.1em;
			}
			#denominator,#speed_it{
				color:#f00;
				border-top:2px solid black;
			}
			#visual{
				border:1px solid black;
				background-color:#fff;
			}
			#update_rate{
				width:40px;
			}
		</style>
	</head>
	<body>
		<sup id=fps></sup>
		<br><br>
		<div class="frac">
			<span id=numerator></span>
			<span id=denominator></span>
		</div><br><br>
		<div class="frac">
			<span id=speed_c></span>
			<span id=speed_it></span>
		</div><br><br>
		<p id=res></p>
		<input id=update_rate value=5 placeholder="frames per second"oninput='if(!isNaN(this.value)&&this.value>0){re(this.value)}'/><br><br>
		<canvas id=visual width=350 height=350></canvas>
		<script>
var ls=localStorage,
	c=ls.getItem("c")||0,
	its=ls.getItem("its")||0,
	ps=0,
	sqrt=Math.sqrt,
	scale=349,
	ctx=visual.getContext("2d"),
	_re=null
if(!ls.getItem("c"))ls.setItem("c",0);
if(!ls.getItem("its"))ls.setItem("its",0);
function it(is=250000){
	for(let i=0;i<=is;i++){
		its++
		let x=Math.random()*2-1,
			y=Math.random()*2-1;
		if(i%(is/100)===0){
			ctx.beginPath();
			ctx.rect(x*scale-1,y*scale-1,2,2);
			ctx.fillStyle=sqrt(x**2+y**2)<=1?"#0d0":"rgba(200,0,0,.5)"
			ctx.fill()
		}
		sqrt(x**2+y**2)<1&&c++
	}
}
function re(rate){
	clearInterval(_re)
	_re=setInterval(()=>{
		ctx.clearRect(0,0,1000,1000)
		ctx.beginPath();
		ctx.arc(0,0,scale,0,8*(c/its));
		ctx.stroke()
		let o1=its
		setTimeout(()=>{
			speed_it.innerText=(its-o1).toLocaleString()+"/s"
		},1e3)
		let o2=c
		setTimeout(()=>{
			speed_c.innerText=(c-o2).toLocaleString()+"/s"
		},1e3)
		ls.setItem("c",c)
		ls.setItem("its",its)
		res.innerText=4*(c/its)
		numerator.innerText=c.toLocaleString()
		denominator.innerText=its.toLocaleString()
	},1e3/rate)
}
setInterval(it);
(function(a){
	let past=a,
		frame=0,
		update=()=>{
			if(Date.now()-past<=1e3){
				++frame
			}else{
				past=Date.now()
				fps.innerText=frame+" fps"
				frame=0
			}
			requestAnimationFrame(update)
		}
	requestAnimationFrame(update)
})(Date.now())
re(5)
		</script>
	</body>
</html>