Abstriangulation

Developer
Akimitsu Hamamuro
Size
5,794 Kb
Views
46,552
  1. Abstriangulation Previews
  2. Abstriangulation HTML Codes
  3. Abstriangulation CSS Codes
  4. Abstriangulation JS Codes

How do I make an abstriangulation?

Http://jsdo.it/akm2/wTcC. What is a abstriangulation? How do you make a abstriangulation? This script and codes were developed by Akimitsu Hamamuro on 13 June 2022, Monday.

Abstriangulation Previews
IQ Test

Abstriangulation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Abstriangulation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id='c'></canvas> <script src='js/kzymdn.js'></script> <script src="js/index.js"></script>
</body>
</html>

Abstriangulation - Script Codes CSS Codes

body { font-family: sans-serif; padding: 0; margin: 0;	background-color: #eff1ea;	overflow: hidden;
}

Abstriangulation - Script Codes JS Codes

/** * requestAnimationFrame */
var requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };
})();
/** * Delaunay */
var Delaunay = (function() { /** * Node * @public */ function Node(x, y, id) { this.x = x; this.y = y; this.id = !isNaN(id) && isFinite(id) ? id : null; } Node.prototype = { eq: function(p) { var dx = this.x - p.x, dy = this.y - p.y; return (dx < 0 ? -dx : dx) < 0.0001 && (dy < 0 ? -dy : dy) < 0.0001; }, toString: function() { return '(x: ' + this.x + ', y: ' + this.y + ')'; } }; /** * Edge */ function Edge(p0, p1) { this.nodes = [p0, p1]; } Edge.prototype = { eq: function(edge) { var na = this.nodes, nb = edge.nodes; var na0 = na[0], na1 = na[1], nb0 = nb[0], nb1 = nb[1]; return (na0.eq(nb0) && na1.eq(nb1)) || (na0.eq(nb1) && na1.eq(nb0)); } }; /** * Triangle */ function Triangle(p0, p1, p2) { this.nodes = [p0, p1, p2]; this.edges = [new Edge(p0, p1), new Edge(p1, p2), new Edge(p2, p0)]; this._createId(); this._createCircumscribedCircle(); } Triangle.prototype = { id: null, _circle: null, _createId: function() { var nodes, id0, id1, id2; nodes = this.nodes; id0 = nodes[0].id; id1 = nodes[1].id; id2 = nodes[2].id; if (id0 !== null && id1 !== null && id2 !== null) { this.id = [id0, id1, id2].sort().join('_'); } }, _createCircumscribedCircle: function() { var nodes, p0, p1, p2, ax, bx, c, t, u, circle, dx, dy; nodes = this.nodes; p0 = nodes[0]; p1 = nodes[1]; p2 = nodes[2]; ax = p1.x - p0.x, ay = p1.y - p0.y; bx = p2.x - p0.x, by = p2.y - p0.y; c = 2 * (ax * by - ay * bx); t = (p1.x * p1.x - p0.x * p0.x + p1.y * p1.y - p0.y * p0.y); u = (p2.x * p2.x - p0.x * p0.x + p2.y * p2.y - p0.y * p0.y); if (!this._circle) this._circle = {}; circle = this._circle; circle.x = ((p2.y - p0.y) * t + (p0.y - p1.y) * u) / c; circle.y = ((p0.x - p2.x) * t + (p1.x - p0.x) * u) / c; dx = p0.x - circle.x; dy = p0.y - circle.y; circle.radiusSq = dx * dx + dy * dy; }, circleContains: function(p) { var circle, dx, dy, distSq; circle = this._circle; dx = circle.x - p.x, dy = circle.y - p.y; distSq = dx * dx + dy * dy; return distSq < circle.radiusSq; } }; /** * @constructor * @public */ function Delaunay(width, height) { this.width = width; this.height = height; this._triangles = null; this.clear(); } Delaunay.prototype = { clear: function() { var p0 = new Node(0, 0), p1 = new Node(this.width, 0), p2 = new Node(this.width, this.height), p3 = new Node(0, this.height); this._triangles = [ new Triangle(p0, p1, p2), new Triangle(p0, p2, p3) ]; return this; }, multipleInsert: function(m) { for (var i = 0, len = m.length; i < len; i++) { this.insert(m[i]); } return this; }, insert: function(p) { var triangles = this._triangles, t, temps = [], edges = [], edge, polygon = [], isDuplicate, i, ilen, j, jlen; for (ilen = triangles.length, i = 0; i < ilen; i++) { t = triangles[i]; if (t.circleContains(p)) { edges.push(t.edges[0], t.edges[1], t.edges[2]); } else { temps.push(t); } } edgesLoop: for (ilen = edges.length, i = 0; i < ilen; i++) { edge = edges[i]; // 辺を比較して重複していれば削除 for (jlen = polygon.length, j = 0; j < jlen; j++) { if (edge.eq(polygon[j])) { polygon.splice(j, 1); continue edgesLoop; } } polygon.push(edge); } for (ilen = polygon.length, i = 0; i < ilen; i++) { edge = polygon[i]; temps.push(new Triangle(edge.nodes[0], edge.nodes[1], p)); } this._triangles = temps; return this; }, getTriangles: function() { return this._triangles.slice(); } }; Delaunay.Node = Node; return Delaunay;
})();
/** * Particle * @super Delaunay.Node */
var Particle = (function(Node) { var currentId = 0, getId = function() { return currentId++; }; function Particle(x, y) { Node.call(this, x, y, getId()); this.vx = 0; this.vy = 0; } Particle.prototype = new Node(); return Particle;
})(Delaunay.Node);
// Initialize
(function() { // Configs var BACKGROUND_COLOR = '#eff1ea', // 背景色 LINE_COLOR = '#303030', // 線の色 FILL_COLORS = [ // 塗りに使用する色, 三角形の生成順に選択される '#00cbd6', '#83d302', '#e80051', '#2087db', '#f4d002', '#eda3d4', '#2e8720', '#ea2ebb', '#213877', '#fc771e', '#a6dbd9', '#c8e067', '#ed5131', '#e2d9d9', '#f4eea8' ], PATTERNS_URL = [ // パターンの画像 URL, 三角形の生成順に選択される 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAChJREFUeNpiVFBQ2M8ABPfv33dkQAJMDDgA4////7FK4NRBugRAgAEAXhEHBXvZgh4AAAAASUVORK5CYII%3D', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB1JREFUeNpiUFBQ2P///38GEGYEETDAxIAEAAIMACllChoZz6oRAAAAAElFTkSuQmCC', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC1JREFUeNpiVFBQ2M/AwODIgAAgPgMTNkGYBIYgSDETNkGYDgxBdKNQ7AIIMABhpgcrohF6AgAAAABJRU5ErkJggg%3D%3D', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADJJREFUeNpi+P//PwMyVlBQ2M/EgAQUFRX3AylHJnQBEJsJXQAEGEFmIAvcv3+fASDAANwmFUHSvnUvAAAAAElFTkSuQmCC', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAYAAADkOT91AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpiUFBQ2P///38GGGZiQAOEBRhB+vCqAAgwAAmADR3HFFILAAAAAElFTkSuQmCC', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEdJREFUeNpiUlBQ2A/EDP///wdjdD4jiAME+4HYERvNxAAByIIofEaQMYqKigy4ANiE+/fvwwVAbGQ+A50ciQ8wMRAAAAEGAKNCOWlhLo6PAAAAAElFTkSuQmCC' ]; // Vars var canvas, context, screenWidth, screenHeight, screenMinSize, centerX, centerY, delaunay, particles = [], colorIndex = 0, colorTable = {}, patterns = [], patternIndex = 0, patternTable = {}, backgroundPattern, mouse = { x: 0, y: 0 }, time, gui, control, maxSpeedCtl, minSpeedCtl, img, count, onLoad, i, len; // Event Listeners function resize(e) { screenWidth = canvas.width = window.innerWidth; screenHeight = canvas.height = window.innerHeight; screenMinSize = Math.min(screenWidth, screenHeight); centerX = screenWidth * 0.5; centerY = screenHeight * 0.5; context = canvas.getContext('2d'); context.lineWidth = 3.5; context.strokeStyle = LINE_COLOR; context.lineCap = context.lineJoin = 'round'; if (delaunay) { delaunay.width = screenWidth; delaunay.height = screenHeight; } } function mouseMove(e) { mouse.x = e.clientX; mouse.y = e.clientY; } // Functions function addParticle(x, y) { if (particles.length >= control.maxNum) { particles.shift(); addParticle(x, y); return; } var p = new Particle(x, y), l = Math.random() * (control.maxSpeed - control.minSpeed) + control.minSpeed, a = Math.random() * Math.PI * 2; p.vx = l * Math.cos(a); p.vy = l * Math.sin(a); particles.push(p); } // GUI Control control = { spawnTime: 500, maxNum: 25, maxSpeed: 1, minSpeed: 0.5 }; // Init canvas = document.getElementById('c'); window.addEventListener('resize', resize, false); resize(null); mouse.x = screenWidth * 0.5; mouse.y = screenHeight * 0.5; delaunay = new Delaunay(screenWidth, screenHeight); for (i = 0, len = control.maxNum; i < len; i++) { addParticle(Math.random() * screenMinSize + centerX - screenMinSize * 0.5, Math.random() * screenMinSize + centerY - screenMinSize * 0.5); } // Loop var loop = function() { var TWO_PI = Math.PI * 2, w = screenWidth, h = screenHeight, ctx = context, now = new Date().getTime(), dx, dy, distSq, ax, ay, triangles, t, id, p0, p1, p2, ct, pt, cl, pl, i, len, p; if (now - time > control.spawnTime) { addParticle(mouse.x, mouse.y); time = now; } ctx.save(); ctx.fillStyle = BACKGROUND_COLOR; ctx.fillRect(0, 0, screenWidth, screenHeight); ctx.globalAlpha = 0.15; ctx.fillStyle = backgroundPattern; ctx.fillRect(0, 0, screenWidth, screenHeight); ctx.restore(); delaunay.clear(); for (len = particles.length, i = 0; i < len; i++) { p = particles[i]; p.x += p.vx; p.y += p.vy; // 反射 if (p.x < 0) { p.x = 0; if (p.vx < 0) p.vx *= -1; } if (p.x > w) { p.x = w; if (p.vx > 0) p.vx *= -1; } if (p.y < 0) { p.y = 0; if (p.vy < 0) p.vy *= -1; } if (p.y > h) { p.y = h; if (p.vy > 0) p.vy *= -1; } } triangles = delaunay.multipleInsert(particles).getTriangles(); ct = colorTable; pt = patternTable; cl = FILL_COLORS.length; pl = patterns.length; for (len = triangles.length, i = 0; i < len; i++) { t = triangles[i]; id = t.id; p0 = t.nodes[0]; p1 = t.nodes[1]; p2 = t.nodes[2]; if (id === null) continue; if (!ct[id]) { ct[id] = FILL_COLORS[colorIndex]; colorIndex = (colorIndex + 1) % cl; } if (!pt[id]) { pt[id] = patterns[patternIndex]; patternIndex = (patternIndex + 1) % pl; } ctx.save(); ctx.beginPath(); ctx.moveTo(p0.x, p0.y); ctx.lineTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.closePath(); ctx.fillStyle = ct[id]; ctx.fill(); ctx.translate(p0.x, p0.y); ctx.rotate(Math.atan2(p0.y - p1.y, p0.x - p1.x)); ctx.fillStyle = pt[id]; ctx.fill(); ctx.stroke(); ctx.restore(); } requestAnimationFrame(loop); }; // GUI gui = new dat.GUI(); gui.add(control, 'maxNum', 0, 50).name('Max Num'); maxSpeedCtl = gui.add(control, 'maxSpeed', 0, 5).name('Max Speed').onChange(function() { if (control.minSpeed > control.maxSpeed) control.minSpeed = control.maxSpeed; minSpeedCtl.updateDisplay(); }); minSpeedCtl = gui.add(control, 'minSpeed', 0, 5).name('Min Speed').onChange(function() { if (control.minSpeed > control.maxSpeed) control.maxSpeed = control.minSpeed; maxSpeedCtl.updateDisplay(); }); gui.add(control, 'spawnTime', 50, 1000).name('Spawn Time'); gui.close(); // Load Images count = PATTERNS_URL.length; onLoad = function(e) { patterns.push(context.createPattern(e.target, 'repeat')); if (--count === 0) { backgroundPattern = patterns[Math.floor(patterns.length * Math.random())]; patterns.push('rgba(0, 0, 0, 0)'); canvas.addEventListener('mousemove', mouseMove, false); time = new Date().getTime(); // Start update loop(); } }; for (i = 0, len = PATTERNS_URL.length; i < len; i++) { img = new Image(); img.addEventListener('load', onLoad, false); img.src = PATTERNS_URL[i]; }
})();
Abstriangulation - Script Codes
Abstriangulation - Script Codes
Home Page Home
Developer Akimitsu Hamamuro
Username akm2
Uploaded June 13, 2022
Rating 4.5
Size 5,794 Kb
Views 46,552
Do you need developer help for Abstriangulation?

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!

Akimitsu Hamamuro (akm2) Script Codes
Name
Noise Abstraction
Lightning
Duotone Sketch
Gravity Points
Dat.GUI
Elastic String
WonderHTML5Wall
Kira Kira Particle Effects
Painting
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!