- Joined
- Jun 24, 2018
- Posts
- 213
- Solutions
- 1
- Reaction
- 167
- Points
- 178
Pa help po para sa final project
Gagawa kami ng simple house
Need lang baguhin Ang var edge at var vertices
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cube</title>
<style>
body{
margin: 0;
}
canvas{
display: block;
}
</style>
</head>
<body>
<script>
//DITO AND MGA CONSTANT
const COLOR_BG = "black";
const COLOR_CUBE = "green"
const SPEED_X = 0.05; // REVOLUTION PER SECOND
const SPEED_Y = 0.05;
const SPEED_Z = 0.05;
const POINT3D = function(x,y,z) {this.x = x; this.y = y; this.z = z};// DITO NAMAN ANG 3D SPACE
//setup ang canvas at ang context dito nag-iddrawing
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d")
//dimension
var h = document.documentElement.clientHeight;
var w = document.documentElement.clientWidth;
canvas.height = h;
canvas.width = w;
//color at lines
ctx.fillStyle = COLOR_BG;
ctx.strokeStyle = COLOR_CUBE;
ctx.lineWidth = w / 100; //ito ang thickness ng line ng cube
ctx.lineCap = "round";
//parameter para sa cube.
var cx= w/2; //
var cy= h/2;
var cz=0;
var size = h/4;
var vertices = [
new POINT3D(cx-size, cy-size, cz-size), // dito ang vertices ng mga corners ng cube
new POINT3D(cx+size, cy-size, cz-size),
new POINT3D(cx+size, cy+size, cz-size),
new POINT3D(cx-size, cy+size, cz-size),
new POINT3D(cx-size, cy-size, cz+size),
new POINT3D(cx+size, cy-size, cz+size),
new POINT3D(cx+size, cy+size, cz+size),
new POINT3D(cx-size, cy+size, cz+size)
];
var edges = [ //array points sa vertex
[0,1],[1,2],[2,3],[3,0], //back face
[4,5],[5,6],[6,7],[7,4], //front face
[0,4],[1,5],[2,6],[3,7] //connecting sides
];
//set up ang animation para gumalaw ang cube
var timeDelta = 0; // time different ng current frame at previous frame
var timeLast = 0; // time of the last frame
requestAnimationFrame(loop); //para tuloy tuloy and animation
//gawa ng function para sa loop
function loop(timeNow)
{
//calculate the time difference
timeDelta = timeNow - timeLast;
timeLast = timeNow;
//para sa background na mafill ang canvas
ctx.fillRect(0,0,w,h);
//rotate ang cube sa kanyang z axis
let angle = timeDelta * 0.001 * SPEED_Z * Math.PI * 2; // ang math.pi ang 360 angle pero sa javascript kailangan ay radian
for(let v of vertices){
let dx = v.x - cx;
let dy = v.y - cy;
let x = dx * Math.cos(angle) - dy * Math.sin(angle);
let y = dx * Math.sin(angle) + dy * Math.cos(angle);
v.x = x + cx;
v.y = y + cy;
}
//rotate sa x axis
angle = timeDelta * 0.001 * SPEED_X * Math.PI * 2; // ang math.pi ang 360 angle pero sa javascript kailangan ay radian
for(let v of vertices){
let dy = v.y - cy;
let dz = v.z - cz;
let y = dy * Math.cos(angle) - dz * Math.sin(angle);
let z = dy * Math.sin(angle) + dz * Math.cos(angle);
v.y = y + cy;
v.z = z + cz;
}
//rotate in y axis
angle = timeDelta * 0.001 * SPEED_Y * Math.PI * 2; // ang math.pi ang 360 angle pero sa javascript kailangan ay radian
for(let v of vertices){
let dx = v.x - cx;
let dz = v.z - cz;
let x = dz * Math.sin(angle) + dx * Math.cos(angle);
let z = dz * Math.cos(angle) - dx * Math.sin(angle);
v.x = x + cx;
v.z = z + cz;
}
//draw ang bawat edge
for(let edge of edges){ //for loop ang bawat edge sa edges array
ctx.beginPath();
ctx.moveTo(vertices[edge[0]].x, vertices[edge[0]].y);
ctx.lineTo(vertices[edge[1]].x, vertices[edge[1]].y);
ctx.stroke();
}
//tawagin ang susunod na frame
requestAnimationFrame(loop);
}
</script>
</body>
</html>
Gagawa kami ng simple house
Need lang baguhin Ang var edge at var vertices
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cube</title>
<style>
body{
margin: 0;
}
canvas{
display: block;
}
</style>
</head>
<body>
<script>
//DITO AND MGA CONSTANT
const COLOR_BG = "black";
const COLOR_CUBE = "green"
const SPEED_X = 0.05; // REVOLUTION PER SECOND
const SPEED_Y = 0.05;
const SPEED_Z = 0.05;
const POINT3D = function(x,y,z) {this.x = x; this.y = y; this.z = z};// DITO NAMAN ANG 3D SPACE
//setup ang canvas at ang context dito nag-iddrawing
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d")
//dimension
var h = document.documentElement.clientHeight;
var w = document.documentElement.clientWidth;
canvas.height = h;
canvas.width = w;
//color at lines
ctx.fillStyle = COLOR_BG;
ctx.strokeStyle = COLOR_CUBE;
ctx.lineWidth = w / 100; //ito ang thickness ng line ng cube
ctx.lineCap = "round";
//parameter para sa cube.
var cx= w/2; //
var cy= h/2;
var cz=0;
var size = h/4;
var vertices = [
new POINT3D(cx-size, cy-size, cz-size), // dito ang vertices ng mga corners ng cube
new POINT3D(cx+size, cy-size, cz-size),
new POINT3D(cx+size, cy+size, cz-size),
new POINT3D(cx-size, cy+size, cz-size),
new POINT3D(cx-size, cy-size, cz+size),
new POINT3D(cx+size, cy-size, cz+size),
new POINT3D(cx+size, cy+size, cz+size),
new POINT3D(cx-size, cy+size, cz+size)
];
var edges = [ //array points sa vertex
[0,1],[1,2],[2,3],[3,0], //back face
[4,5],[5,6],[6,7],[7,4], //front face
[0,4],[1,5],[2,6],[3,7] //connecting sides
];
//set up ang animation para gumalaw ang cube
var timeDelta = 0; // time different ng current frame at previous frame
var timeLast = 0; // time of the last frame
requestAnimationFrame(loop); //para tuloy tuloy and animation
//gawa ng function para sa loop
function loop(timeNow)
{
//calculate the time difference
timeDelta = timeNow - timeLast;
timeLast = timeNow;
//para sa background na mafill ang canvas
ctx.fillRect(0,0,w,h);
//rotate ang cube sa kanyang z axis
let angle = timeDelta * 0.001 * SPEED_Z * Math.PI * 2; // ang math.pi ang 360 angle pero sa javascript kailangan ay radian
for(let v of vertices){
let dx = v.x - cx;
let dy = v.y - cy;
let x = dx * Math.cos(angle) - dy * Math.sin(angle);
let y = dx * Math.sin(angle) + dy * Math.cos(angle);
v.x = x + cx;
v.y = y + cy;
}
//rotate sa x axis
angle = timeDelta * 0.001 * SPEED_X * Math.PI * 2; // ang math.pi ang 360 angle pero sa javascript kailangan ay radian
for(let v of vertices){
let dy = v.y - cy;
let dz = v.z - cz;
let y = dy * Math.cos(angle) - dz * Math.sin(angle);
let z = dy * Math.sin(angle) + dz * Math.cos(angle);
v.y = y + cy;
v.z = z + cz;
}
//rotate in y axis
angle = timeDelta * 0.001 * SPEED_Y * Math.PI * 2; // ang math.pi ang 360 angle pero sa javascript kailangan ay radian
for(let v of vertices){
let dx = v.x - cx;
let dz = v.z - cz;
let x = dz * Math.sin(angle) + dx * Math.cos(angle);
let z = dz * Math.cos(angle) - dx * Math.sin(angle);
v.x = x + cx;
v.z = z + cz;
}
//draw ang bawat edge
for(let edge of edges){ //for loop ang bawat edge sa edges array
ctx.beginPath();
ctx.moveTo(vertices[edge[0]].x, vertices[edge[0]].y);
ctx.lineTo(vertices[edge[1]].x, vertices[edge[1]].y);
ctx.stroke();
}
//tawagin ang susunod na frame
requestAnimationFrame(loop);
}
</script>
</body>
</html>
Last edited: