Let's make triangles.
How do I make an let's make triangles.?
What is a let's make triangles.? How do you make a let's make triangles.? This script and codes were developed by Keegan Brown on 16 October 2022, Sunday.
Let's make triangles. - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Let's make triangles.</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Let's make triangles. - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var canvas = document.createElement('canvas');
var canvasWidth = canvas.width = window.innerWidth;
var canvasHeight = canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
var heightScale = 0.866;
var triangles;
function rnd(min, max) { return Math.floor(Math.random() * (max - min + 1) + min);
};
var Triangle = function () { function Triangle(dir, x, y, hue, sat, lig, opa, halfSide, triSide, rowHeight) { _classCallCheck(this, Triangle); this.dir = dir; this.x = x; this.y = y; this.hue = hue; this.lig = lig; this.sat = sat; this.opa = opa; this.halfSide = halfSide; this.triSide = triSide; this.rowHeight = rowHeight; } Triangle.prototype.render = function render(ctx) { // upward pointing triangle var clr = 'hsla(' + this.hue + ', ' + this.sat + '%, ' + this.lig + '%, ' + this.opa + ')'; ctx.fillStyle = clr; ctx.strokeStyle = clr; ctx.beginPath(); ctx.moveTo(this.x, this.y); if (this.dir > 0) { ctx.lineTo(this.x + this.halfSide, this.y + this.rowHeight); ctx.lineTo(this.x - this.halfSide, this.y + this.rowHeight); } else { ctx.lineTo(this.x + this.triSide, this.y); ctx.lineTo(this.x + this.halfSide, this.y + this.rowHeight); } ctx.closePath(); ctx.fill(); ctx.stroke(); // needed to fill antialiased gaps on edges }; return Triangle;
}();
function buildTriangles() { var hueStart = rnd(0, 360); var triSide = 80; var halfSide = triSide / 2; var rowHeight = Math.floor(triSide * heightScale); var columns = Math.ceil(canvasWidth / triSide) + 1; var rows = Math.ceil(canvasHeight / rowHeight); var col, row; var triangles = []; for (row = 0; row < rows; row++) { var hue = hueStart + row * 3; for (col = 0; col < columns; col++) { var x = col * triSide; var y = row * rowHeight; if (row % 2 != 0) { x -= halfSide; } triangles.push(new Triangle(1, x, y, hue, rnd(10, 90), rnd(10, 90), 0, halfSide, triSide, rowHeight)); triangles.push(new Triangle(-1, x, y, hue, rnd(10, 90), rnd(10, 90), 0, halfSide, triSide, rowHeight)); }; }; fadeInTriangles(triangles); return triangles;
}
function fadeInTriangles(triangles) { triangles.forEach(function (triangle, index) { TweenMax.to(triangle, 0.5, { opa: 1, delay: Math.random() * 0.1 + index * 0.001 }); }); setTimeout(function () { fadeOutTriangles(triangles); }, 3000);
}
function fadeOutTriangles(triangles) { triangles.forEach(function (triangle, index) { TweenMax.to(triangle, 0.5, { opa: 0, delay: Math.random() * 0.1 + index * 0.001 }); }); setTimeout(function () { fadeInTriangles(triangles); }, 3000);
}
function setup() { triangles = buildTriangles();
}
function render() { requestAnimationFrame(render); ctx.fillStyle = 'rgb(0,0,0)'; ctx.fillRect(0, 0, canvasWidth, canvasHeight); ctx.lineWidth = 1; triangles.forEach(function (tri) { tri.render(ctx); });
};
setup();
document.body.appendChild(canvas);
document.addEventListener('click', setup);
render();
Developer | Keegan Brown |
Username | keeganbrown |
Uploaded | October 16, 2022 |
Rating | 3 |
Size | 3,696 Kb |
Views | 28,336 |
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!
Name | Size |
A Pen by Keegan Brown | 478,008 Kb |
Parallaxy Background images | 2,947 Kb |
Particles with pixi.js | 2,963 Kb |
Paint drips up the wall, sometimes. | 2,787 Kb |
Text With Mouse Reactive Soft Shadow | 2,692 Kb |
GreenSock SplitText Contest Entry | 3,389 Kb |
Lava Tiles | 2,809 Kb |
Particles with GSAP and SketchJS | 3,441 Kb |
Easy-peasy 3D Scrolling Parallax with GSAP | 2,468 Kb |
Meteor Shower | 2,583 Kb |
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!
Name | Username | Size |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Tab panels | Accessibility | 0 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
Html5-canvas-snow-effect | MariamMassadeh | 2,609 Kb |
Blackberry Mock | Zacharyolson | 1,865 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!