drawing arrows
This commit is contained in:
Ladd Hoffman
parent
dfbe9e34ed
commit
9f86a9aebd
21
draw.js
21
draw.js
|
|
@ -206,10 +206,27 @@ class Drawing {
|
||||||
}
|
}
|
||||||
|
|
||||||
arrow(p1, p2) {
|
arrow(p1, p2) {
|
||||||
|
const headLength = 10;
|
||||||
|
const headWidth = 10;
|
||||||
this.sequence.push(() => {
|
this.sequence.push(() => {
|
||||||
|
const start = new Vector(this.getPoint(p1));
|
||||||
|
const end = new Vector(this.getPoint(p2));
|
||||||
|
const r = end.sub(start);
|
||||||
|
const b = end.sub(r.mult(headLength / r.length));
|
||||||
|
const c1 = b.add(r.rot90().mult(0.5 * headWidth / r.length));
|
||||||
|
const c2 = b.sub(r.rot90().mult(0.5 * headWidth / r.length));
|
||||||
|
|
||||||
|
// Arrow shaft
|
||||||
this.ctx.beginPath();
|
this.ctx.beginPath();
|
||||||
this.ctx.moveTo(...this.pixel(this.getPoint(p1)));
|
this.ctx.moveTo(...this.pixel(start.array));
|
||||||
this.ctx.lineTo(...this.pixel(this.getPoint(p2)));
|
this.ctx.lineTo(...this.pixel(end.array));
|
||||||
|
this.ctx.stroke();
|
||||||
|
|
||||||
|
// Arrow head
|
||||||
|
this.ctx.beginPath();
|
||||||
|
this.ctx.moveTo(...this.pixel(c1.array));
|
||||||
|
this.ctx.lineTo(...this.pixel(end.array));
|
||||||
|
this.ctx.lineTo(...this.pixel(c2.array));
|
||||||
this.ctx.stroke();
|
this.ctx.stroke();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,10 @@
|
||||||
<link rel="stylesheet" href="./node_modules/reveal.js/plugin/highlight/monokai.css">
|
<link rel="stylesheet" href="./node_modules/reveal.js/plugin/highlight/monokai.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<script src="./draw.js"></script>
|
<script src="./draw.js"></script>
|
||||||
|
<script src="./vector.js"></script>
|
||||||
|
|
||||||
<div class="reveal">
|
<div class="reveal">
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
<section data-markdown="test.md"></section>
|
<section data-markdown="test.md"></section>
|
||||||
|
|
|
||||||
45
test.md
45
test.md
|
|
@ -76,27 +76,58 @@ start
|
||||||
|
|
||||||
```drawing
|
```drawing
|
||||||
title Projectile
|
title Projectile
|
||||||
caption `y = v_(0y) * t - g * t^2`<br>`x = v_(0x) * t`
|
caption `x = v_(0x) t`<br>`y = v_(0y) t - g t^2`
|
||||||
scale 2
|
scale 2
|
||||||
frame 0 0 300 100
|
frame 0 -50 300 100
|
||||||
stroke black 4
|
stroke black 4
|
||||||
eval _.polyline([0, 100], [0, 0], [300, 0]);
|
eval _.polyline([0, 100], [0, 0], [300, 0]);
|
||||||
value v0 75
|
value v0 50
|
||||||
value angle Math.PI / 4
|
value angle Math.PI / 4
|
||||||
value v0x _.getValue('v0') * Math.cos(_.getValue('angle'))
|
value v0x _.getValue('v0') * Math.cos(_.getValue('angle'))
|
||||||
value v0y _.getValue('v0') * Math.sin(_.getValue('angle'))
|
value v0y _.getValue('v0') * Math.sin(_.getValue('angle'))
|
||||||
point p1 (function() {
|
point p1 (function() {
|
||||||
const t = _.t / 1000;
|
const t = _.t / 1000;
|
||||||
const x = _.getValue('v0x') * t;
|
const v0x = _.getValue('v0x');
|
||||||
const y = _.getValue('v0y') * t - 9.81 * t**2;
|
const v0y = _.getValue('v0y');
|
||||||
|
const g = 9.81;
|
||||||
|
const x = v0x * t;
|
||||||
|
const y = v0y * t - g * t**2 / 2;
|
||||||
|
const vy = v0y - g * t;
|
||||||
|
const vyp = v0y - g * (t - _.dt/1000);
|
||||||
|
if (vy < 0 && vyp >= 0) {
|
||||||
|
_.setFill('red');
|
||||||
|
_.circle([x, y]);
|
||||||
|
_.setStroke('green', 2);
|
||||||
|
_.arrow([x, y], [x + v0x, y + vy]);
|
||||||
|
}
|
||||||
if (t > 0 && (y <= 0 || x >= _.frame[1][0])) {
|
if (t > 0 && (y <= 0 || x >= _.frame[1][0])) {
|
||||||
|
_.setFill('red');
|
||||||
|
_.circle([x, y]);
|
||||||
|
_.setStroke('green', 2);
|
||||||
|
_.arrow([x, y], [x + v0x, y + vy]);
|
||||||
_.stop();
|
_.stop();
|
||||||
_.t = 0;
|
_.t = 0;
|
||||||
|
return [0, 0];
|
||||||
}
|
}
|
||||||
return [x, y];
|
return [x, y];
|
||||||
})()
|
})()
|
||||||
stroke green 1
|
point p2 (function() {
|
||||||
eval _.line([0, 0], [_.getValue('v0x'), _.getValue('v0y')])
|
const t = _.t / 1000;
|
||||||
|
const v0x = _.getValue('v0x');
|
||||||
|
const v0y = _.getValue('v0y');
|
||||||
|
const g = 9.81;
|
||||||
|
const x = v0x * t;
|
||||||
|
const y = v0y * t - g * t**2 / 2;
|
||||||
|
const vy = v0y - g * t;
|
||||||
|
const v = new Vector([v0x, vy]);
|
||||||
|
const r = new Vector([x, y]);
|
||||||
|
const p2 = r.add(v);
|
||||||
|
return p2.array;
|
||||||
|
})()
|
||||||
|
stroke green 2
|
||||||
|
eval _.arrow([0, 0], [_.getValue('v0x'), _.getValue('v0y')])
|
||||||
|
stroke orange 2
|
||||||
|
eval _.arrow('p1', 'p2');
|
||||||
fill blue
|
fill blue
|
||||||
eval const projectile = d.circle('p1', {trace: {age: -1}});
|
eval const projectile = d.circle('p1', {trace: {age: -1}});
|
||||||
d.onStart(() => {
|
d.onStart(() => {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
class Vector {
|
||||||
|
constructor([x, y]) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
}
|
||||||
|
|
||||||
|
get length() {
|
||||||
|
return Math.sqrt(this.x**2 + this.y**2);
|
||||||
|
}
|
||||||
|
|
||||||
|
mult(s) {
|
||||||
|
return new Vector([
|
||||||
|
this.x * s,
|
||||||
|
this.y * s,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
add(v) {
|
||||||
|
if (!(v instanceof Vector)) {
|
||||||
|
v = new Vector(v);
|
||||||
|
}
|
||||||
|
return new Vector([
|
||||||
|
this.x + v.x,
|
||||||
|
this.y + v.y,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
sub(v) {
|
||||||
|
if (!(v instanceof Vector)) {
|
||||||
|
v = new Vector(v);
|
||||||
|
}
|
||||||
|
return new Vector([
|
||||||
|
this.x - v.x,
|
||||||
|
this.y - v.y,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
rot90() {
|
||||||
|
return new Vector([
|
||||||
|
-this.y,
|
||||||
|
this.x
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
get array() {
|
||||||
|
return [this.x, this.y];
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue