125 lines
3.2 KiB
HTML
125 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Physics - Prototyping</title>
|
|
<link rel="stylesheet" href="./main.css">
|
|
<script src="./draw.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<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>
|
|
<script>
|
|
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');
|
|
const projectile = d.circle('p1', {trace: {age: -1}})
|
|
d.onStart(() => {
|
|
if (d.t == 0) {
|
|
projectile.reset();
|
|
}
|
|
})
|
|
d.start();
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |