Triangle Generator

Developer
Lloydwheeler
Size
3,947 Kb
Views
4,048
  1. Triangle Generator Previews
  2. Triangle Generator HTML Codes
  3. Triangle Generator CSS Codes
  4. Triangle Generator JS Codes

How do I make an triangle generator?

What is a triangle generator? How do you make a triangle generator? This script and codes were developed by Lloydwheeler on 26 January 2023, Thursday.

Triangle Generator Previews
IQ Test

Triangle Generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Triangle Generator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.js'></script> <script src="js/index.js"></script>
</body>
</html>

Triangle Generator - Script Codes CSS Codes

body { background: #fff;
}
#canvas { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: #e9e9e9;
}
.controls { position: absolute; padding: 20px; background: #e9e9e9; top: 20px; right: 20px;
}
.controls__label { display: block; margin-bottom: 10px;
}
.controls__label-text { display: block; margin-bottom: 3px;
}

Triangle Generator - 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 DEFAULTS = {	color: '#222',	amount: 10,	x: 2100,	y: 2970
};
var Triangle = function () {	function Triangle(x, y, ctx, maxWidth, maxHeight) {	_classCallCheck(this, Triangle);	this.rotation = Math.floor(Math.random() * 360);	this.radius = Math.max(maxWidth / 40, Math.floor(Math.random() * maxHeight / 4));	this.ctx = ctx;	this.centreX = x;	this.centreY = y;	}	Triangle.prototype.draw = function draw(colour) {	var height = this.radius * (Math.sqrt(3) / 2);	this.ctx.save();	this.ctx.fillStyle = colour;	this.ctx.translate(this.centreX, this.centreY);	this.ctx.rotate(this.rotation / (Math.PI / 180));	this.ctx.beginPath();	this.ctx.moveTo(0, -height / 2);	this.ctx.lineTo(-this.radius / 2, height / 2);	this.ctx.lineTo(this.radius / 2, height / 2);	this.ctx.fill();	this.ctx.restore();	};	return Triangle;
}();
var TriangleGenerator = function () {	function TriangleGenerator(context) {	_classCallCheck(this, TriangleGenerator);	this.context = context;	this.canvas = null;	this.ctx = null;	this.numTriangles = 10;	this.colour = "#222";	this.particles = null;	this.width = 1500;	this.height = 1500;	this.dimensions = { x: 1500, y: 1500 };	this.init();	}	TriangleGenerator.prototype.init = function init() {	this.initCanvas();	$('.controls__generate').click(this.createTriangles.bind(this));	};	// Initialise the canvas	//	// @private	//	TriangleGenerator.prototype.initCanvas = function initCanvas() {	this.canvas = $(this.context)[0];	this.ctx = this.canvas.getContext('2d');	this.canvas.width = this.width;	this.canvas.height = this.height;	};	// Draw the triangles	//	// @private	//	TriangleGenerator.prototype.createTriangles = function createTriangles() {	this.canvas.width = this.width;	this.canvas.height = this.height;	this.particles = [];	var i = 0;	while (i < this.numTriangles) {	var x = Math.floor(Math.random() * this.canvas.width);	var y = Math.floor(Math.random() * this.canvas.height);	var particle = new Triangle(x, y, this.ctx, this.width, this.height);	this.particles.push(particle);	i++;	}	this.draw();	};	// Draw the grid	//	// @private	//	TriangleGenerator.prototype.draw = function draw() {	var _this = this;	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);	this.particles.forEach(function (particle, index) {	particle.draw(_this.colour);	});	};	return TriangleGenerator;
}();
var generator = new TriangleGenerator('#canvas');
var gui = new dat.GUI();
gui.add(generator, 'numTriangles', 0, 100);
gui.addColor(generator, 'colour');
gui.add(generator, 'width', 0, 3000);
gui.add(generator, 'height', 0, 3000);
gui.add(generator, 'createTriangles');
Triangle Generator - Script Codes
Triangle Generator - Script Codes
Home Page Home
Developer Lloydwheeler
Username lloydwheeler
Uploaded January 26, 2023
Rating 3
Size 3,947 Kb
Views 4,048
Do you need developer help for Triangle Generator?

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!

Lloydwheeler (lloydwheeler) Script Codes
Name
Breakpoints Example
SVG Loading Animation
3D Button
Device Switcher
Spring Force
Profile Flip
Damping
A Pen by lloydwheeler
Path Animation
Personal Logo Animation
Create amazing video scripts 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!