physics/test.html

125 lines
3.2 KiB
HTML
Raw Permalink Normal View History

2024-06-20 17:18:36 -05:00
<!DOCTYPE html>
<html>
<head>
<title>Physics - Prototyping</title>
<link rel="stylesheet" href="./main.css">
<script src="./draw.js"></script>
</head>
<body>
2024-06-21 15:20:13 -05:00
<div id="d1"></div>
<p>
Some body text
</p>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
2024-06-20 17:18:36 -05:00
<script>
2024-06-21 15:20:13 -05:00
let d1, d2, d3, d4;
{
const d = new Drawing('d1');
d1 = d;
d.setTitle('Example Animation');
d.setCaption('Lissajou figure (skewed)');
d.setStroke('black', 4);
d.polyline([0, 100], [0, 0], [100, 0]);
d.definePoint('p1', () => d.oscillatingPoint([25, 50], [100, 100], 5000));
d.setStroke('red', 2);
d.line([0, 0], 'p1');
d.definePoint('p2', () => {
const [x, y] = d.getPoint('p1');
return [x, y - d.oscillatingValue(10, 40, 5000 / 3, Math.PI / 2)];
});
d.setFill('blue');
d.square('p2', {trace: {age: 5000}});
d.setFill('cyan');
d.circle('p1');
d.start();
}
{
const d = new Drawing('d2');
d2 = d;
d.setTitle('Sine Wave');
d.setCaption('y = sin(x)');
d.setStroke('black', 4);
d.line([0, 0], [2*Math.PI, 0]);
d.line([0, -1], [0, 1]);
d.setStroke('red', 2);
d.setFrame([0, -1], [2*Math.PI, 1]);
d.setScale(100 / Math.PI);
d.func({step: 0.1}, (x) => Math.sin(x));
d.render();
}
{
const d = new Drawing('d3');
d3 = d;
d.setTitle('Oscillating Sine Wave');
d.setCaption('y = sin(x) * sin(t)');
d.setStroke('black', 4);
d.line([0, 0], [2*Math.PI, 0]);
d.line([0, -1], [0, 1]);
d.setStroke('red', 2);
d.setFrame([0, -1], [2*Math.PI, 1]);
d.setScale(100 / Math.PI);
d.func({step: 0.1}, (x) => Math.sin(x) * d.oscillatingValue(-1, 1, 500));
d.start();
}
{
const d = new Drawing('d4');
d4 = d;
d.setTitle('Travelling Sine Wave');
d.setCaption('y = sin(x + t)');
d.setStroke('black', 4);
d.line([0, 0], [2*Math.PI, 0]);
d.line([0, -1], [0, 1]);
d.setStroke('red', 2);
d.setFrame([0, -1], [2*Math.PI, 1]);
d.setScale(100 / Math.PI);
d.func({step: 0.1}, (x) => Math.sin(x + 2*Math.PI*d.t / 1000));
d.start();
}
{
const d = new Drawing('d5');
d5 = d;
d.setTitle('Projectile');
d.setCaption('y = v0y * t - g * t^2<br>x = v0x * t');
d.setFrame([0, 0], [300, 100]);
d.setStroke('black', 4);
d.polyline([0, 100], [0, 0], [300, 0]);
const v0 = 80;
const angle = Math.PI / 4;
const v0x = v0 * Math.cos(angle);
const v0y = v0 * Math.sin(angle);
d.definePoint('p1', () => {
const t = d.t / 1000;
const x = v0x * t;
const y = v0y * t - 9.81 * t**2;
if (t > 0 && (y <= 0 || x >= d.frame[1][0])) {
d.stop();
d.t = 0;
}
return [x, y];
})
d.setStroke('green', 1);
d.line([0, 0], [v0x, v0y]);
d.setFill('blue');
2024-06-22 15:01:10 -05:00
const projectile = d.circle('p1', {trace: {age: -1}});
2024-06-21 15:20:13 -05:00
d.onStart(() => {
if (d.t == 0) {
projectile.reset();
}
})
d.start();
}
2024-06-20 17:18:36 -05:00
</script>
2024-06-21 15:20:13 -05:00
2024-06-20 17:18:36 -05:00
</body>
</html>