Skip to content

Commit 5da2cf3

Browse files
bit101bit101
committed
episode 19 files
1 parent de561ee commit 5da2cf3

File tree

11 files changed

+984
-0
lines changed

11 files changed

+984
-0
lines changed

‎episode19/demo1.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
window.onload = function() {
2+
var canvas = document.getElementById("canvas"),
3+
context = canvas.getContext("2d"),
4+
width = canvas.width = window.innerWidth,
5+
height = canvas.height = window.innerHeight,
6+
p0 = {
7+
x: 100,
8+
y: 500
9+
},
10+
p1 = {
11+
x: 600,
12+
y: 200
13+
},
14+
pA = {},
15+
t = 0;
16+
17+
context.scale(1.5, 1.5);
18+
context.font = "16px Arial";
19+
draw();
20+
21+
document.body.addEventListener("click", function() {
22+
draw();
23+
});
24+
25+
function draw() {
26+
context.clearRect(0, 0, width, height);
27+
28+
context.beginPath();
29+
context.arc(p0.x, p0.y, 4, 0, Math.PI * 2, false);
30+
context.fill();
31+
32+
context.beginPath();
33+
context.arc(p1.x, p1.y, 4, 0, Math.PI * 2, false);
34+
context.fill();
35+
36+
pA.x = utils.lerp(t, p0.x, p1.x);
37+
pA.y = utils.lerp(t, p0.y, p1.y);
38+
39+
context.beginPath();
40+
context.arc(pA.x, pA.y, 4, 0, Math.PI * 2, false);
41+
context.fill();
42+
43+
context.beginPath();
44+
context.moveTo(p0.x, p0.y);
45+
context.lineTo(pA.x, pA.y);
46+
context.stroke();
47+
48+
labelPointLeft(p0, "p0");
49+
labelPointLeft(p1, "p1 ");
50+
labelPoint(pA, "pA");
51+
labelT();
52+
53+
t += .1;
54+
t = Math.min(t, 1);
55+
56+
}
57+
58+
function labelPoint(p, name) {
59+
context.fillText(name, p.x + 10, p.y + 10);
60+
context.fillText("x: " + Math.round(p.x), p.x + 10, p.y + 25);
61+
context.fillText("y: " + Math.round(p.y), p.x + 10, p.y + 40);
62+
}
63+
64+
function labelPointLeft(p, name) {
65+
context.fillText(name, p.x - 40, p.y - 40);
66+
context.fillText("x: " + Math.round(p.x), p.x - 40, p.y - 25);
67+
context.fillText("y: " + Math.round(p.y), p.x - 40, p.y - 10);
68+
}
69+
70+
function labelT() {
71+
context.fillText("t = " + utils.roundToPlaces(t, 1), 200, 250);
72+
}
73+
74+
};

‎episode19/demo2.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
window.onload = function() {
2+
var canvas = document.getElementById("canvas"),
3+
context = canvas.getContext("2d"),
4+
width = canvas.width = window.innerWidth,
5+
height = canvas.height = window.innerHeight,
6+
p0 = {
7+
x: 100,
8+
y: 500
9+
},
10+
p1 = {
11+
x: 600,
12+
y: 200
13+
},
14+
p2 = {
15+
x: 1000,
16+
y: 400
17+
},
18+
pA = {},
19+
pB = {},
20+
t = 0;
21+
22+
context.scale(1.5, 1.5);
23+
context.font = "16px Arial";
24+
draw();
25+
26+
document.body.addEventListener("click", function() {
27+
draw();
28+
});
29+
30+
function draw() {
31+
context.clearRect(0, 0, width, height);
32+
33+
context.beginPath();
34+
context.arc(p0.x, p0.y, 4, 0, Math.PI * 2, false);
35+
context.fill();
36+
37+
context.beginPath();
38+
context.arc(p1.x, p1.y, 4, 0, Math.PI * 2, false);
39+
context.fill();
40+
41+
context.beginPath();
42+
context.arc(p2.x, p2.y, 4, 0, Math.PI * 2, false);
43+
context.fill();
44+
45+
pA.x = utils.lerp(t, p0.x, p1.x);
46+
pA.y = utils.lerp(t, p0.y, p1.y);
47+
48+
pB.x = utils.lerp(t, p1.x, p2.x);
49+
pB.y = utils.lerp(t, p1.y, p2.y);
50+
51+
context.beginPath();
52+
context.arc(pA.x, pA.y, 4, 0, Math.PI * 2, false);
53+
context.fill();
54+
55+
context.beginPath();
56+
context.arc(pB.x, pB.y, 4, 0, Math.PI * 2, false);
57+
context.fill();
58+
59+
context.beginPath();
60+
context.moveTo(p0.x, p0.y);
61+
context.lineTo(pA.x, pA.y);
62+
context.moveTo(p1.x, p1.y);
63+
context.lineTo(pB.x, pB.y);
64+
context.stroke();
65+
66+
labelPointLeft(p0, "p0");
67+
labelPointLeft(p1, "p1");
68+
labelPointLeft(p2, "p2");
69+
labelPoint(pA, "pA");
70+
labelPoint(pB, "pB");
71+
labelT();
72+
73+
t += .1;
74+
t = Math.min(t, 1);
75+
76+
}
77+
78+
function labelPoint(p, name) {
79+
context.fillStyle = "black";
80+
context.fillText(name, p.x + 10, p.y + 10);
81+
context.fillText("x: " + Math.round(p.x), p.x + 10, p.y + 25);
82+
context.fillText("y: " + Math.round(p.y), p.x + 10, p.y + 40);
83+
}
84+
85+
function labelPointLeft(p, name) {
86+
context.fillStyle = "gray";
87+
context.fillText(name, p.x - 40, p.y - 40);
88+
context.fillText("x: " + Math.round(p.x), p.x - 40, p.y - 25);
89+
context.fillText("y: " + Math.round(p.y), p.x - 40, p.y - 10);
90+
}
91+
92+
function labelT() {
93+
context.fillText("t = " + utils.roundToPlaces(t, 1), 200, 300);
94+
}
95+
96+
};

‎episode19/demo3.js

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
window.onload = function() {
2+
var canvas = document.getElementById("canvas"),
3+
context = canvas.getContext("2d"),
4+
width = canvas.width = window.innerWidth,
5+
height = canvas.height = window.innerHeight,
6+
p0 = {
7+
x: 100,
8+
y: 500
9+
},
10+
p1 = {
11+
x: 600,
12+
y: 200
13+
},
14+
p2 = {
15+
x: 1000,
16+
y: 400
17+
},
18+
pA = {},
19+
pB = {},
20+
t = 0,
21+
maxT = 0;
22+
23+
context.scale(1.5, 1.5);
24+
context.font = "16px Arial";
25+
draw();
26+
27+
document.body.addEventListener("click", function() {
28+
draw();
29+
});
30+
31+
function draw() {
32+
context.clearRect(0, 0, width, height);
33+
34+
context.strokeStyle = "#ccc";
35+
context.beginPath();
36+
context.moveTo(p0.x, p0.y);
37+
context.lineTo(p1.x, p1.y);
38+
context.lineTo(p2.x, p2.y);
39+
context.stroke();
40+
context.beginPath();
41+
context.arc(p0.x, p0.y, 4, 0, Math.PI * 2, false);
42+
context.fill();
43+
44+
context.strokeStyle = "black";
45+
46+
context.beginPath();
47+
context.arc(p1.x, p1.y, 4, 0, Math.PI * 2, false);
48+
context.fill();
49+
50+
context.beginPath();
51+
context.arc(p2.x, p2.y, 4, 0, Math.PI * 2, false);
52+
context.fill();
53+
54+
for(var t = 0; t <= maxT; t += .1) {
55+
pA.x = utils.lerp(t, p0.x, p1.x);
56+
pA.y = utils.lerp(t, p0.y, p1.y);
57+
58+
pB.x = utils.lerp(t, p1.x, p2.x);
59+
pB.y = utils.lerp(t, p1.y, p2.y);
60+
61+
context.beginPath();
62+
context.moveTo(pA.x, pA.y);
63+
context.lineTo(pB.x, pB.y);
64+
context.stroke();
65+
}
66+
67+
context.beginPath();
68+
context.arc(pA.x, pA.y, 4, 0, Math.PI * 2, false);
69+
context.fill();
70+
71+
context.beginPath();
72+
context.arc(pB.x, pB.y, 4, 0, Math.PI * 2, false);
73+
context.fill();
74+
75+
76+
// labelPointLeft(p0, "p0");
77+
// labelPointLeft(p1, "p1");
78+
// labelPointLeft(p2, "p2");
79+
// labelPoint(pA, "pA");
80+
// labelPoint(pB, "pB");
81+
labelT();
82+
83+
maxT += .1;
84+
maxT = Math.min(t, 1);
85+
86+
}
87+
88+
function labelPoint(p, name) {
89+
context.fillStyle = "black";
90+
context.fillText(name, p.x + 10, p.y + 10);
91+
context.fillText("x: " + Math.round(p.x), p.x + 10, p.y + 25);
92+
context.fillText("y: " + Math.round(p.y), p.x + 10, p.y + 40);
93+
}
94+
95+
function labelPointLeft(p, name) {
96+
context.fillStyle = "gray";
97+
context.fillText(name, p.x - 40, p.y - 40);
98+
context.fillText("x: " + Math.round(p.x), p.x - 40, p.y - 25);
99+
context.fillText("y: " + Math.round(p.y), p.x - 40, p.y - 10);
100+
}
101+
102+
function labelT() {
103+
context.fillText("t = " + utils.roundToPlaces(maxT, 1), 200, 250);
104+
}
105+
106+
};

0 commit comments

Comments
 (0)