Click here for free DL of the app version that can save data.

No:235

242

←

Prev Next

→

Sine curve simulator
Developer User2983｜Date and time 23/6/11 0:39:01
Build time 20.362 sec｜Game capacity 1.582KB｜

Script

Sine curve simulator

In this application.、Simulates the behavior of a sine curve.

frequency (esp. of waveforms) amplitude (of vibration)

Operation: Move the frequency and amplitude sliders

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>サインカーブ シミュレーター</title>
	<style>
		canvas {
			display: block;
			margin: 0 auto;
			background-color: white;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>サインカーブ シミュレーター</h1>
	<p>このアプリでは、サインカーブの振る舞いをシミュレーションします。</p>
	<canvas id="graph" width="300" height="300"></canvas>
	<p>
		<input type="range" id="frequency" min="1" max="10" value="1">周波数
		<input type="range" id="amplitude" min="1" max="100" value="50">振幅
	</p>
	<p>操作方法：周波数と振幅のスライダーを動かす</p>
	<script>
		const canvas = document.getElementById('graph');
		const context = canvas.getContext('2d');
		const width = canvas.width;
		const height = canvas.height;
		const centerY = height / 2;
		const amplitudeRange = document.getElementById('amplitude');
		const frequencyRange = document.getElementById('frequency');

function draw() {
			const amplitude = amplitudeRange.value;
			const frequency = frequencyRange.value;
			const step = width / 100;
			context.clearRect(0, 0, width, height);
			context.beginPath();
			context.moveTo(0, centerY);
			for (let x = 0; x < width; x += step) {
				const y = centerY + Math.sin((x / width) * frequency * Math.PI * 2) * amplitude;
				context.lineTo(x, y);
			}
			context.stroke();
		}

amplitudeRange.addEventListener('input', draw);
		frequencyRange.addEventListener('input', draw);
		draw();
	</script>
</body>
</html>