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

Skip to content

Commit 4ca00ad

Browse files
bit101bit101
committed
episode 34 and 35 code
1 parent e258c0c commit 4ca00ad

File tree

8 files changed

+570
-0
lines changed

8 files changed

+570
-0
lines changed

‎episode34/index.html‎

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

‎episode34/particles.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
2+
window.onload = function() {
3+
var canvas = document.getElementById("canvas"),
4+
context = canvas.getContext("2d"),
5+
width = canvas.width = window.innerWidth,
6+
height = canvas.height = window.innerHeight;
7+
8+
var particle = {
9+
x: width / 2,
10+
y: height / 2,
11+
vx: Math.random() * 10 - 5,
12+
vy: Math.random() * 10 - 5
13+
},
14+
15+
lines = [];
16+
17+
for(var i = 0; i < 10; i++) {
18+
lines[i] = {
19+
p0: {
20+
x: Math.random() * width,
21+
y: Math.random() * height
22+
},
23+
p1: {
24+
x: Math.random() * width,
25+
y: Math.random() * height
26+
}
27+
}
28+
}
29+
30+
update();
31+
32+
function update() {
33+
context.clearRect(0, 0, width, height);
34+
drawLines();
35+
36+
var p0 = {
37+
x: particle.x,
38+
y: particle.y
39+
};
40+
particle.x += particle.vx;
41+
particle.y += particle.vy;
42+
context.fillRect(particle.x - 2, particle.y - 2, 4, 4);
43+
44+
var p1 = {
45+
x: particle.x,
46+
y: particle.y
47+
};
48+
49+
50+
for(var i = 0; i < lines.length; i++) {
51+
var p2 = lines[i].p0,
52+
p3 = lines[i].p1;
53+
54+
var intersect = segmentIntersect(p0, p1, p2, p3);
55+
if(intersect) {
56+
context.beginPath();
57+
context.strokeStyle = "red";
58+
context.arc(intersect.x, intersect.y, 20, 0, Math.PI * 2, false);
59+
context.stroke();
60+
return;
61+
}
62+
}
63+
64+
65+
requestAnimationFrame(update);
66+
}
67+
68+
function drawLines() {
69+
context.beginPath();
70+
for(var i = 0; i < lines.length; i++) {
71+
context.moveTo(lines[i].p0.x, lines[i].p0.y);
72+
context.lineTo(lines[i].p1.x, lines[i].p1.y);
73+
}
74+
context.stroke();
75+
}
76+
77+
function segmentIntersect(p0, p1, p2, p3) {
78+
var A1 = p1.y - p0.y,
79+
B1 = p0.x - p1.x,
80+
C1 = A1 * p0.x + B1 * p0.y,
81+
A2 = p3.y - p2.y,
82+
B2 = p2.x - p3.x,
83+
C2 = A2 * p2.x + B2 * p2.y,
84+
denominator = A1 * B2 - A2 * B1;
85+
86+
if(denominator == 0) {
87+
return null;
88+
}
89+
90+
var intersectX = (B2 * C1 - B1 * C2) / denominator,
91+
intersectY = (A1 * C2 - A2 * C1) / denominator,
92+
rx0 = (intersectX - p0.x) / (p1.x - p0.x),
93+
ry0 = (intersectY - p0.y) / (p1.y - p0.y),
94+
rx1 = (intersectX - p2.x) / (p3.x - p2.x),
95+
ry1 = (intersectY - p2.y) / (p3.y - p2.y);
96+
97+
if(((rx0 >= 0 && rx0 <= 1) || (ry0 >= 0 && ry0 <= 1)) &&
98+
((rx1 >= 0 && rx1 <= 1) || (ry1 >= 0 && ry1 <= 1))) {
99+
return {
100+
x: intersectX,
101+
y: intersectY
102+
};
103+
}
104+
else {
105+
return null;
106+
}
107+
}
108+
};

‎episode34/shapes.js‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
2+
window.onload = function() {
3+
var canvas = document.getElementById("canvas"),
4+
context = canvas.getContext("2d"),
5+
width = canvas.width = window.innerWidth,
6+
height = canvas.height = window.innerHeight;
7+
8+
9+
10+
var star0 = {
11+
x: 200,
12+
y: 200,
13+
points: [
14+
{x: 0, y: 0 },
15+
{x: 0, y: 0 },
16+
{x: 0, y: 0 },
17+
{x: 0, y: 0 },
18+
{x: 0, y: 0 },
19+
{x: 0, y: 0 },
20+
{x: 0, y: 0 },
21+
{x: 0, y: 0 },
22+
{x: 0, y: 0 },
23+
{x: 0, y: 0 }
24+
],
25+
offset: [
26+
{ x: 100, y: 0},
27+
{ x: 40, y: 29},
28+
{ x: 31, y: 95},
29+
{ x: -15, y: 48},
30+
{ x: -81, y: 59},
31+
{ x: -50, y: 0},
32+
{ x: -81, y: -59},
33+
{ x: -15, y: -48},
34+
{ x: 31, y: -95},
35+
{ x: 40, y: -29}
36+
]
37+
};
38+
var star1 = {
39+
x: 600,
40+
y: 500,
41+
points: [
42+
{x: 0, y: 0 },
43+
{x: 0, y: 0 },
44+
{x: 0, y: 0 },
45+
{x: 0, y: 0 },
46+
{x: 0, y: 0 },
47+
{x: 0, y: 0 },
48+
{x: 0, y: 0 },
49+
{x: 0, y: 0 },
50+
{x: 0, y: 0 },
51+
{x: 0, y: 0 }
52+
],
53+
offset: [
54+
{ x: 100, y: 0},
55+
{ x: 40, y: 29},
56+
{ x: 31, y: 95},
57+
{ x: -15, y: 48},
58+
{ x: -81, y: 59},
59+
{ x: -50, y: 0},
60+
{ x: -81, y: -59},
61+
{ x: -15, y: -48},
62+
{ x: 31, y: -95},
63+
{ x: 40, y: -29}
64+
]
65+
};
66+
67+
document.body.addEventListener("mousemove", function(event) {
68+
context.clearRect(0, 0, width, height);
69+
star0.x = event.clientX;
70+
star0.y = event.clientY;
71+
updateStar(star0);
72+
updateStar(star1);
73+
if(checkStarCollision(star0, star1)) {
74+
context.fillStyle = "red";
75+
}
76+
else {
77+
context.fillStyle = "black";
78+
}
79+
drawStar(star0);
80+
drawStar(star1);
81+
});
82+
83+
function checkStarCollision(starA, starB) {
84+
for(var i = 0; i < starA.points.length; i++) {
85+
var p0 = starA.points[i],
86+
p1 = starA.points[(i + 1) % starA.points.length];
87+
88+
for(var j = 0; j < starB.points.length; j++) {
89+
var p2 = starB.points[j],
90+
p3 = starB.points[(j + 1) % starB.points.length];
91+
92+
if(segmentIntersect(p0, p1, p2, p3)) {
93+
return true;
94+
}
95+
}
96+
}
97+
return false;
98+
}
99+
100+
101+
function updateStar(star) {
102+
for(var i = 0; i < star.points.length; i++) {
103+
star.points[i].x = star.x + star.offset[i].x;
104+
star.points[i].y = star.y + star.offset[i].y;
105+
}
106+
}
107+
108+
function drawStar(star) {
109+
context.beginPath();
110+
context.moveTo(star.points[0].x, star.points[0].y);
111+
for(var i = 1; i < star.points.length; i++) {
112+
context.lineTo(star.points[i].x, star.points[i].y);
113+
}
114+
context.closePath();
115+
context.fill();
116+
}
117+
118+
function segmentIntersect(p0, p1, p2, p3) {
119+
var A1 = p1.y - p0.y,
120+
B1 = p0.x - p1.x,
121+
C1 = A1 * p0.x + B1 * p0.y,
122+
A2 = p3.y - p2.y,
123+
B2 = p2.x - p3.x,
124+
C2 = A2 * p2.x + B2 * p2.y,
125+
denominator = A1 * B2 - A2 * B1;
126+
127+
if(denominator == 0) {
128+
return null;
129+
}
130+
131+
var intersectX = (B2 * C1 - B1 * C2) / denominator,
132+
intersectY = (A1 * C2 - A2 * C1) / denominator,
133+
rx0 = (intersectX - p0.x) / (p1.x - p0.x),
134+
ry0 = (intersectY - p0.y) / (p1.y - p0.y),
135+
rx1 = (intersectX - p2.x) / (p3.x - p2.x),
136+
ry1 = (intersectY - p2.y) / (p3.y - p2.y);
137+
138+
if(((rx0 >= 0 && rx0 <= 1) || (ry0 >= 0 && ry0 <= 1)) &&
139+
((rx1 >= 0 && rx1 <= 1) || (ry1 >= 0 && ry1 <= 1))) {
140+
return {
141+
x: intersectX,
142+
y: intersectY
143+
};
144+
}
145+
else {
146+
return null;
147+
}
148+
}
149+
};

‎episode35/index.html‎

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

‎episode35/koch.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
2+
window.onload = function() {
3+
var canvas = document.getElementById("canvas"),
4+
context = canvas.getContext("2d"),
5+
width = canvas.width = window.innerWidth,
6+
height = canvas.height = window.innerHeight;
7+
8+
var p0 = {
9+
x: 0,
10+
y: -321
11+
},
12+
p1 = {
13+
x: 278,
14+
y: 160
15+
},
16+
p2 = {
17+
x: -278,
18+
y: 160
19+
};
20+
context.translate(width / 2, height / 2);
21+
22+
koch(p0, p1, 5);
23+
koch(p1, p2, 5);
24+
koch(p2, p0, 5);
25+
26+
function koch(p0, p1, limit) {
27+
var dx = p1.x - p0.x,
28+
dy = p1.y - p0.y,
29+
dist = Math.sqrt(dx * dx + dy * dy),
30+
unit = dist / 3,
31+
angle = Math.atan2(dy, dx),
32+
pA = {
33+
x: p0.x + dx / 3,
34+
y: p0.y + dy / 3
35+
},
36+
pC = {
37+
x: p1.x - dx / 3,
38+
y: p1.y - dy / 3
39+
},
40+
pB = {
41+
x: pA.x + Math.cos(angle - Math.PI / 3) * unit,
42+
y: pA.y + Math.sin(angle - Math.PI / 3) * unit
43+
};
44+
45+
if(limit > 0) {
46+
koch(p0, pA, limit - 1);
47+
koch(pA, pB, limit - 1);
48+
koch(pB, pC, limit - 1);
49+
koch(pC, p1, limit - 1);
50+
}
51+
else {
52+
context.beginPath();
53+
context.moveTo(p0.x, p0.y);
54+
context.lineTo(pA.x, pA.y);
55+
context.lineTo(pB.x, pB.y);
56+
context.lineTo(pC.x, pC.y);
57+
context.lineTo(p1.x, p1.y);
58+
context.stroke();
59+
}
60+
}
61+
62+
};

0 commit comments

Comments
 (0)