3D Pyramid

Developer
Tiffany Rayside
Size
3,057 Kb
Views
18,216
  1. 3D Pyramid Previews
  2. 3D Pyramid HTML Codes
  3. 3D Pyramid CSS Codes
  4. 3D Pyramid JS Codes

How do I make an 3d pyramid?

Practice & Learning with Canvas 3D basics > Lines & Points. This is a Pyramid. It Rotates. Rotation speed adjusts to mouse movements.. What is a 3d pyramid? How do you make a 3d pyramid? This script and codes were developed by Tiffany Rayside on 15 December 2022, Thursday.

3D Pyramid Previews
IQ Test

3D Pyramid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Pyramid</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canv" width="400" height="400"></canvas>
<!-- Life's Not Complete Without Art. ,gaaaaaaaagaaaaaaaaaaaaagaaaaaaaag, ,aP8b _,dYba, ,adPb,_ d8Ya, ,aP" Yb_,dP" "Yba, ,adP" "Yb,_dP "Ya, ,aP" _88" )888( "88_ "Ya, ,aP" _,dP"Yb ,adP"8"Yba, dP"Yb,_ "Ya, ,aPYb _,dP8 Yb ,adP" 8 "Yba, dP 8Yb,_ dPYa, ,aP" YdP" dP YbdP" 8 "YbdP Yb "YbP "Ya,
I8aaaaaa8aaa8baaaaaa88aaaaaaaa8aaaaaaaa88aaaaaad8aaa8aaaaaa8I
`Yb, d8a, Ya d8b, 8 ,d8b aP ,a8b ,dP' "Yb,dP "Ya "8, dI "Yb, 8 ,dP" Ib ,8" aP" Yb,dP" "Y8, "YaI8, ,8' "Yb, 8 ,dP" `8, ,8IaP" ,8P" "Yb, `"Y8ad' "Yb,8,dP" `ba8P"' ,dP" "Yb, `"8, "Y8P" ,8"' ,dP" "Yb, `8, 8 ,8' ,dP" "Yb, `Ya 8 aP' ,dP" "Yb, "8, 8 ,8" ,dP" "Yb, `8, 8 ,8' ,dP" "Yb, `Ya 8 aP' ,dP" "Yb, "8, 8 ,8" ,dP" "Yb,`8, 8 ,8',dP" "Yb,Ya8aP,dP" "Y88888P" "TMR" "
|Diamond|
!--> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/point3d.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/utils.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Pyramid - Script Codes CSS Codes

body{ background:#34495e; overflow:hidden;
}

3D Pyramid - Script Codes JS Codes

//triangle function
function Triangle(a, b, c, color) { this.pointA = a; this.pointB = b; this.pointC = c; this.color = (color === undefined) ? "#ff0000" : utils.parseColor(color); this.alpha = .4; //color opacity
}
Triangle.prototype.draw = function($) { $.save(); $.fillStyle = $.strokeStyle = utils.colorToRGB(this.color, this.alpha); $.beginPath(); $.moveTo(this.pointA.getScreenX(), this.pointA.getScreenY()); $.lineTo(this.pointB.getScreenX(), this.pointB.getScreenY()); $.lineTo(this.pointC.getScreenX(), this.pointC.getScreenY()); $.closePath(); $.fill(); $.restore();
};
//make triangle
window.onload = function() { var canvas = document.getElementById('canv'), $ = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var mouse = utils.captureMouse(canvas), points = [], triangles = [], fl = 150, vpX = canvas.width / 2, vpY = canvas.height / 2, angleX, angleY; //pyramid points points[0] = new Point3d(0, -100, 0); points[1] = new Point3d(100, 100, -100); points[2] = new Point3d(-100, 100, -100); points[3] = new Point3d(-100, 100, 100); points[4] = new Point3d(100, 100, 100); points.forEach(function(point) { point.setVanishingPoint(vpX, vpY); point.setCenter(0, 0, 50); //center is the base. The higher the number (200 + the smaller the base) }); //6 triangles to form a pyramid > array starts at 0 triangles[0] = new Triangle(points[0], points[1], points[2], "#e74c3c"); triangles[1] = new Triangle(points[0], points[2], points[3], "#2980b9"); triangles[2] = new Triangle(points[0], points[3], points[4], "#c0392b"); triangles[3] = new Triangle(points[0], points[4], points[1], "#f1c40f"); triangles[4] = new Triangle(points[1], points[3], points[2], "#000"); //triangle 1 of base triangles[5] = new Triangle(points[1], points[4], points[3], "#000"); //triangle 2 of base function move(point) { //point.rotateX(angleX); //can opt to rotate on both x,y axis or just one. I'm rotating y. point.rotateY(angleY); } function draw(triangle) { triangle.draw($); } (function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); $.clearRect(0, 0, canvas.width, canvas.height); //rotation direction & speed on mousemove angleX = (mouse.y - vpY) * 0.0001; angleY = (mouse.x - vpX) * 0.0001; points.forEach(move); triangles.forEach(draw); }());
};
3D Pyramid - Script Codes
3D Pyramid - Script Codes
Home Page Home
Developer Tiffany Rayside
Username tmrDevelops
Uploaded December 15, 2022
Rating 3.5
Size 3,057 Kb
Views 18,216
Do you need developer help for 3D Pyramid?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tiffany Rayside (tmrDevelops) Script Codes
Name
Detour
Labyrinth
LED Marquee
Imperfect Buttons
Life Of Tree
Psychotomimetic
Breakout
Shattered
Topiary
Fly-Out Nav
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!