Embedded Files
Simulador de Ondas
Fiz esse simulador em HTML, JavaScript e CSS para usar em um trabalho de física no ensino médio, enquanto estava estudando sobre o assunto.
O código fonte está disponível ao lado.
Código
<!DOCTYPE html>
<!--
Rafael Belda / 2022
-->
<html>
<head>
<meta charset="utf-8">
<title>Simulador de ondas</title>
<style>
body {
background-color: black;
color: white;
}
canvas {
background-color: black;
}
input[type="range"] {
width: 80%;
color: black;
}
select {
color: black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div>
<label for="frequency">Frequência:</label>
<input type="range" id="frequency" min="0.1" max="25" step="0.1" value="10.2">
</div>
<div>
<label for="amplitude">Amplitude:</label>
<input type="range" id="amplitude" min="10" max="100" step="10" value="50">
</div>
<div>
<label for="wave-shape">Forma:</label>
<select id="wave-shape">
<option value="sine">Senoide</option>
<option value="square">Quadrada</option>
<option value="sawtooth">Sawtooth</option>
<option value="triangle">Triangular</option>
</select>
<label for="wave-color">Cor:</label>
<select id="wave-color" onchange="changeColor(this.value)">
<option value="vermelho">Vermelho</option>
<option value="ciano">Ciano</option>
<option value="rosa">Rosa</option>
</select>
</div>
<script>
const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth - 50;
canvas.height = window.innerHeight - 100;
const ctx = canvas.getContext('2d');
let frequency = parseFloat(document.getElementById('frequency').value);
let amplitude = parseInt(document.getElementById('amplitude').value);
let waveShape = document.getElementById('wave-shape').value;
let waveSpeed = 0.1;
function drawWave(y, t) {
ctx.beginPath();
for (let x = 0; x < canvas.width; x++) {
const waveTime = x * frequency / canvas.width;
const time = waveTime + t * waveSpeed;
let yValue = 0;
switch (waveShape) {
case 'sine':
yValue = Math.sin(2 * Math.PI * time);
break;
case 'square':
yValue = Math.sign(Math.sin(2 * Math.PI * time));
break;
case 'sawtooth':
yValue = 2 * (time - Math.floor(time)) - 1;
break;
case 'triangle':
yValue = 2 * Math.abs(2 * (time - Math.floor(time)) - 1) - 1;
break;
}
ctx.lineTo(x, y + amplitude * yValue);
}
const selectedColor = document.getElementById('wave-color').value;
if (selectedColor === 'vermelho') {
ctx.strokeStyle = 'red';
} else if (selectedColor === 'ciano') {
ctx.strokeStyle = 'cyan';
} else if (selectedColor === 'rosa') {
ctx.strokeStyle = 'pink';
}
ctx.stroke();
}
function update() {
frequency = parseFloat(document.getElementById('frequency').value);
amplitude = parseInt(document.getElementById('amplitude').value);
waveShape = document.getElementById('wave-shape').value;
ctx.clearRect(0, 0, canvas.width, canvas.height);
const currentTime = new Date().getTime() / 1000;
drawWave(canvas.height / 2, currentTime);
}
setInterval(update, 10);
</script>
</body>
</html>
Além do simulador de ondas, tenho diversos projetos que envolvem física, matemática e lógica, no entanto, o Google Sites não oferece um bom suporte para linguagens como Python e Java. Por isso, estou trabalhando para implementa-los aqui!
Google Sites
Report abuse