Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c09482f

Browse files
bit101bit101
committed
episode 26
1 parent c1572bd commit c09482f

File tree

3 files changed

+209
-0
lines changed

3 files changed

+209
-0
lines changed

‎episode26/2d.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
point = {
7+
x: 300,
8+
y: 200
9+
},
10+
delta = 0.05;
11+
12+
context.translate(width / 2, height / 2);
13+
14+
update();
15+
16+
function update() {
17+
context.clearRect(-width / 2, -height / 2, width, height);
18+
19+
context.beginPath();
20+
context.arc(point.x, point.y, 20, 0, Math.PI * 2, false);
21+
context.fill();
22+
23+
var cos = Math.cos(delta),
24+
sin = Math.sin(delta),
25+
x = point.x * cos - point.y * sin,
26+
y = point.y * cos + point.x * sin;
27+
28+
point.x = x;
29+
point.y = y;
30+
31+
requestAnimationFrame(update);
32+
}
33+
};

‎episode26/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<script type="text/javascript" src="main.js"></script>
6+
<style type="text/css">
7+
html, body {
8+
margin: 0px;
9+
}
10+
11+
canvas {
12+
display: block;
13+
}
14+
15+
</style>
16+
</head>
17+
<body>
18+
<canvas id="canvas"></canvas>
19+
</body>
20+
</html>

‎episode26/main.js‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
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+
fl = 300,
7+
points = [],
8+
needsUpdate = true,
9+
centerZ = 1500;
10+
11+
context.translate(width / 2, height / 2);
12+
13+
points[0] = { x: -500, y: -500, z: 500 };
14+
points[1] = { x: 500, y: -500, z: 500 };
15+
points[2] = { x: 500, y: -500, z: -500 };
16+
points[3] = { x: -500, y: -500, z: -500 };
17+
points[4] = { x: -500, y: 500, z: 500 };
18+
points[5] = { x: 500, y: 500, z: 500 };
19+
points[6] = { x: 500, y: 500, z: -500 };
20+
points[7] = { x: -500, y: 500, z: -500 };
21+
22+
function project() {
23+
for(var i = 0; i < points.length; i++) {
24+
var p = points[i],
25+
scale = fl / (fl + p.z + centerZ);
26+
27+
p.sx = p.x * scale;
28+
p.sy = p.y * scale;
29+
}
30+
}
31+
32+
function drawLine() {
33+
var p = points[arguments[0]];
34+
context.moveTo(p.sx, p.sy);
35+
36+
for(var i = 1; i < arguments.length; i++) {
37+
p = points[arguments[i]];
38+
context.lineTo(p.sx, p.sy);
39+
}
40+
}
41+
42+
function translateModel(x, y, z) {
43+
for(var i = 0; i < points.length; i++) {
44+
points[i].x += x;
45+
points[i].y += y;
46+
points[i].z += z;
47+
}
48+
needsUpdate = true;
49+
}
50+
51+
function rotateX(angle) {
52+
var cos = Math.cos(angle),
53+
sin = Math.sin(angle);
54+
55+
for(var i = 0; i < points.length; i++) {
56+
var p = points[i],
57+
y = p.y * cos - p.z * sin,
58+
z = p.z * cos + p.y * sin;
59+
p.y = y;
60+
p.z = z;
61+
}
62+
needsUpdate = true;
63+
}
64+
65+
function rotateY(angle) {
66+
var cos = Math.cos(angle),
67+
sin = Math.sin(angle);
68+
69+
for(var i = 0; i < points.length; i++) {
70+
var p = points[i],
71+
x = p.x * cos - p.z * sin,
72+
z = p.z * cos + p.x * sin;
73+
p.x = x;
74+
p.z = z;
75+
}
76+
needsUpdate = true;
77+
}
78+
79+
function rotateZ(angle) {
80+
var cos = Math.cos(angle),
81+
sin = Math.sin(angle);
82+
83+
for(var i = 0; i < points.length; i++) {
84+
var p = points[i],
85+
x = p.x * cos - p.y * sin,
86+
y = p.y * cos + p.x * sin;
87+
p.x = x;
88+
p.y = y;
89+
}
90+
needsUpdate = true;
91+
}
92+
93+
document.body.addEventListener("keydown", function(event) {
94+
switch(event.keyCode) {
95+
case 37: // left
96+
if(event.ctrlKey) {
97+
rotateY(0.05);
98+
}
99+
else {
100+
translateModel(-20, 0, 0);
101+
}
102+
break;
103+
case 39: // right
104+
if(event.ctrlKey) {
105+
rotateY(-0.05);
106+
}
107+
else {
108+
translateModel(20, 0, 0);
109+
}
110+
break;
111+
case 38: // up
112+
if(event.shiftKey) {
113+
translateModel(0, 0, 20);
114+
}
115+
else if(event.ctrlKey) {
116+
rotateX(0.05);
117+
}
118+
else {
119+
translateModel(0, -20, 0);
120+
}
121+
break;
122+
case 40: // down
123+
if(event.shiftKey) {
124+
translateModel(0, 0, -20);
125+
}
126+
else if(event.ctrlKey) {
127+
rotateX(-0.05);
128+
}
129+
else {
130+
translateModel(0, 20, 0);
131+
}
132+
break;
133+
}
134+
});
135+
136+
update();
137+
138+
function update() {
139+
if(needsUpdate) {
140+
context.clearRect(-width / 2, -height / 2, width, height);
141+
project();
142+
143+
context.beginPath();
144+
drawLine(0, 1, 2, 3, 0);
145+
drawLine(4, 5, 6, 7, 4);
146+
drawLine(0, 4);
147+
drawLine(1, 5);
148+
drawLine(2, 6);
149+
drawLine(3, 7);
150+
context.stroke();
151+
needsUpdate = false;
152+
}
153+
requestAnimationFrame(update);
154+
}
155+
156+
};

0 commit comments

Comments
 (0)