Skip to content

Commit 34098ca

Browse files
GeorgeGallyGeorgeGally
committed
Part 9 - faking 3D
1 parent 5b26e03 commit 34098ca

7 files changed

+584
-2
lines changed

‎js/creative_coding.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -320,8 +320,9 @@ function rgb(r, g, b) {
320320
function rgba(r, g, b, a) {
321321
if (b == undefined) {
322322
return 'rgba('+clamp(Math.round(r),0,255)+', '+clamp(Math.round(r),0,255)+', '+clamp(Math.round(r),0,255)+', '+clamp(g,0,1)+')';
323-
} else {
324-
return 'rgba('+clamp(Math.round(r),0,255)+', '+clamp(Math.round(g),0,255)+', '+clamp(Math.round(b),0,255)+', '+clamp(a,0,1)+')';
323+
} else {
324+
if (a == undefined) a = 1;
325+
return 'rgba('+clamp(Math.round(r),0,255)+', '+clamp(Math.round(g),0,255)+', '+clamp(Math.round(b),0,255)+', '+clamp(a,0,1)+')';
325326
}
326327
};
327328

‎part10a.html

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<script language="javascript" src="js/creative_coding.js"></script>
7+
<script language="javascript" src="js/canvas.js"></script>
8+
9+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
10+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
11+
12+
</head>
13+
<body>
14+
15+
<script>
16+
17+
var ctx = createCanvas("canvas1");
18+
var number_of_balls = 5;
19+
var balls = [];
20+
var radius = 200;
21+
var fov = 540;
22+
var horizon_x = width / 2 //or wherever you've placed it
23+
var horizon_y = height / 2 //again, wherever else is fine
24+
25+
26+
for (var i = 0; i < number_of_balls; i++) {
27+
addBall(i);
28+
}
29+
30+
31+
function addBall(_i){
32+
var ball = {
33+
x: 0,
34+
y: 0,
35+
z: 0,
36+
x2d: 0,
37+
y2d: 0,
38+
speed: 0.4,
39+
scale: 1,
40+
size: 20,
41+
colour: rgb(0),
42+
angle_x: 0,
43+
angle_y: 0,
44+
angle: distributeAngles(_i, number_of_balls)
45+
}
46+
balls.push(ball);
47+
}
48+
49+
function draw(){
50+
ctx.background(245, 1);
51+
horizon_y = h/2-mouseY;
52+
ctx.save();
53+
// ctx.fillStyle = "red";
54+
// ctx.HfillEllipse(w/2, h/2, radius*2);
55+
ctx.translate(w/2, h/2);
56+
//ctx.rotate(mouseX)
57+
58+
moveBall();
59+
drawBall();
60+
ctx.restore();
61+
}
62+
63+
64+
function moveBall(){
65+
66+
for (var i = 0; i < balls.length; i++) {
67+
var b = balls[i];
68+
// move the angle to rotate the balls
69+
b.angle += b.speed;
70+
// b.angle_x = b.angle + (mouseX/width-0.5)/1;
71+
// b.angle_y = b.angle + ((mouseY/height)-0.5)/1;
72+
//if(i==0) console.log(b.angle_x);
73+
b.x = Math.cos(radians(b.angle))*(radius+b.size/2);
74+
//b.y = Math.sin(radians(b.angle))*(radius+b.size/2);
75+
b.z = Math.sin(radians(b.angle))*(radius+b.size/2);
76+
b.scale = fov/(b.z+fov);
77+
var scaleinverse = 1.0 - b.scale //the inverse of your scale_factor
78+
b.x2d = (b.x * b.scale) + (horizon_x * scaleinverse);
79+
b.y2d = (b.y * b.scale) + (horizon_y * scaleinverse);
80+
}
81+
82+
}
83+
84+
85+
function drawBall(){
86+
for (var i = 0; i < balls.length; i++) {
87+
var b = balls[i];
88+
ctx.fillStyle = b.colour;
89+
ctx.fillEllipse(b.x2d, b.y2d, b.size*b.scale);
90+
}
91+
}
92+
93+
94+
function distributeAngles(me, total) {
95+
return me/total * 360;
96+
}
97+
98+
99+
100+
</script>
101+
102+
</body>
103+
104+
</html>

‎part10b.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<script language="javascript" src="js/creative_coding.js"></script>
7+
<script language="javascript" src="js/canvas.js"></script>
8+
9+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
10+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
11+
12+
</head>
13+
<body>
14+
15+
<script>
16+
17+
var ctx = createCanvas("canvas1");
18+
var number_of_balls = 5;
19+
var balls = [];
20+
var radius = 200;
21+
var fov = 540;
22+
var horizon_x = width / 2 //or wherever you've placed it
23+
var horizon_y = height / 2 //again, wherever else is fine
24+
25+
26+
for (var i = 0; i < number_of_balls; i++) {
27+
addBall(i);
28+
}
29+
30+
31+
function addBall(_i){
32+
var ball = {
33+
x: 0,
34+
y: 0,
35+
z: 0,
36+
x2d: 0,
37+
y2d: 0,
38+
speed: 0.4,
39+
scale: 1,
40+
size: 20,
41+
colour: rgb(0),
42+
angle_x: 0,
43+
angle_y: 0,
44+
angle: distributeAngles(_i, number_of_balls)
45+
}
46+
balls.push(ball);
47+
}
48+
49+
function draw(){
50+
ctx.background(245, 1);
51+
horizon_y = h/2-mouseY;
52+
ctx.save();
53+
// ctx.fillStyle = "red";
54+
// ctx.HfillEllipse(w/2, h/2, radius*2);
55+
ctx.translate(w/2, h/2);
56+
//ctx.rotate(mouseX)
57+
58+
moveBall();
59+
drawBall();
60+
ctx.restore();
61+
}
62+
63+
64+
function moveBall(){
65+
66+
for (var i = 0; i < balls.length; i++) {
67+
var b = balls[i];
68+
// move the angle to rotate the balls
69+
b.angle += b.speed;
70+
// b.angle_x = b.angle + (mouseX/width-0.5)/1;
71+
// b.angle_y = b.angle + ((mouseY/height)-0.5)/1;
72+
//if(i==0) console.log(b.angle_x);
73+
b.x = Math.cos(radians(b.angle))*(radius+b.size/2);
74+
//b.y = Math.sin(radians(b.angle))*(radius+b.size/2);
75+
b.z = Math.sin(radians(b.angle))*(radius+b.size/2);
76+
b.scale = fov/(b.z+fov);
77+
var scaleinverse = 1.0 - b.scale //the inverse of your scale_factor
78+
b.x2d = (b.x * b.scale) + (horizon_x * scaleinverse);
79+
b.y2d = (b.y * b.scale) + (horizon_y * scaleinverse);
80+
}
81+
82+
}
83+
84+
85+
86+
function drawBall(){
87+
for (var i = 0; i < balls.length; i++) {
88+
var b = balls[i];
89+
ctx.fillStyle = b.colour;
90+
ctx.fillEllipse(b.x2d, b.y2d, b.size*b.scale);
91+
}
92+
}
93+
94+
95+
function distributeAngles(me, total) {
96+
return me/total * 360;
97+
}
98+
99+
100+
101+
</script>
102+
103+
</body>
104+
105+
</html>

‎part10c.html

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<script language="javascript" src="js/creative_coding.js"></script>
7+
<script language="javascript" src="js/canvas.js"></script>
8+
9+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
10+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
11+
12+
</head>
13+
<body>
14+
15+
<script>
16+
17+
var ctx = createCanvas("canvas1");
18+
var number_of_balls = 5;
19+
var balls = [];
20+
var radius = 200;
21+
var fov = 240;
22+
var horizon_x = width / 2 //or wherever you've placed it
23+
var horizon_y = height / 2 //again, wherever else is fine
24+
25+
26+
for (var i = 0; i < number_of_balls; i++) {
27+
addBall(i);
28+
}
29+
30+
31+
function addBall(_i){
32+
var ball = {
33+
x: 0,
34+
y: 0,
35+
z: 0,
36+
x2d: 0,
37+
y2d: 0,
38+
speed: 0.00002,
39+
scale: 1,
40+
size: 10,
41+
colour: rgb(0),
42+
angle: distributeAngles(_i, number_of_balls)
43+
}
44+
ball.x = Math.cos(radians(ball.angle))*(radius+ball.size/2);
45+
ball.y = Math.sin(radians(ball.angle))*(radius+ball.size/2);
46+
ball.z = Math.sin(radians(ball.angle))*(radius+ball.size/2);
47+
48+
balls.push(ball);
49+
}
50+
51+
function draw(){
52+
ctx.background(245, 0.4);
53+
horizon_y = h/2-mouseY;
54+
ctx.save();
55+
//ctx.fillStyle = "red";
56+
//ctx.HfillEllipse(w/2, h/2, radius*2);
57+
//ctx.translate(w/2, h/2);
58+
//ctx.rotateDegrees(map(mouseX,0,w, 0, 360));
59+
60+
moveBall();
61+
drawBall();
62+
ctx.restore();
63+
}
64+
65+
66+
function moveBall(){
67+
68+
for (var i = 0; i < balls.length; i++) {
69+
var b = balls[i];
70+
// move the angle to rotate the balls
71+
//b.angle += b.speed;
72+
rotateX(b, radians(1));
73+
rotateY(b, radians(1));
74+
rotateZ(b, radians(1));
75+
76+
77+
78+
//if (i==1) console.log(b.z);
79+
b.size = map(b.z, -fov, fov, 1, 20);
80+
b.x2d = projection(b.x, b.z, width/2, h/2, fov);
81+
b.y2d = projection(b.y, b.z, height/2, h/2, fov);
82+
83+
// b.angle_x = b.angle + (mouseX/width-0.5)/1;
84+
// b.angle_y = b.angle + ((mouseY/height)-0.5)/1;
85+
//if(i==0) console.log(b.angle_x);
86+
87+
//b.scale = fov/(b.z+fov);
88+
//var scaleinverse = 1.0 - b.scale //the inverse of your scale_factor
89+
// // // // b.x2d = (b.x * b.scale) + (horizon_x * scaleinverse);
90+
// // // // b.y2d = (b.y * b.scale) + (horizon_y * scaleinverse);
91+
//b.x2d = (b.x * b.scale) + (horizon_x * scaleinverse);
92+
//b.y2d = (b.y * b.scale) + (horizon_y * scaleinverse);
93+
}
94+
95+
}
96+
97+
98+
99+
function drawBall(){
100+
for (var i = 0; i < balls.length; i++) {
101+
var b = balls[i];
102+
ctx.fillStyle = b.colour;
103+
ctx.fillEllipse(b.x2d, b.y2d, b.size*b.scale);
104+
//ctx.fillEllipse(b.x, b.y, b.size*b.scale);
105+
}
106+
}
107+
108+
109+
function distributeAngles(me, total) {
110+
return me/total * 360;
111+
}
112+
113+
114+
function rotateX(b, radians) {
115+
//console.log(b.x);
116+
var y = b.y;
117+
b.y = (y * Math.cos(radians)) + (b.z * Math.sin(radians) * -1.0);
118+
//console.log(p.y);
119+
b.z = (y * Math.sin(radians)) + (b.z * Math.cos(radians));
120+
}
121+
122+
function rotateY(p, radians) {
123+
var x = p.x;
124+
p.x = (x * Math.cos(radians)) + (p.z * Math.sin(radians) * -1.0);
125+
p.z = (x * Math.sin(radians)) + (p.z * Math.cos(radians));
126+
}
127+
128+
function rotateZ(p, radians) {
129+
var x = p.x;
130+
p.x = (x * Math.cos(radians)) + (p.y * Math.sin(radians) * -1.0);
131+
p.y = (x * Math.sin(radians)) + (p.y * Math.cos(radians));
132+
}
133+
134+
function projection(xy, z, xyOffset, zOffset, distance) {
135+
return ((distance * xy) / (z - zOffset)) + xyOffset;
136+
}
137+
138+
139+
140+
</script>
141+
142+
</body>
143+
144+
</html>

0 commit comments

Comments
 (0)