Abstriangulation
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 - 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]; }
})();

Developer | Akimitsu Hamamuro |
Username | akm2 |
Uploaded | June 13, 2022 |
Rating | 4.5 |
Size | 5,794 Kb |
Views | 46,529 |
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 |
Elastic String | 17,622 Kb |
Kira Kira Particle Effects | 4,616 Kb |
Lightning | 19,150 Kb |
Gravity Points | 5,148 Kb |
Duotone Sketch | 56,080 Kb |
WonderHTML5Wall | 8,439 Kb |
Noise Abstraction | 16,664 Kb |
Dat.GUI | 14,895 Kb |
Painting | 18,358 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 |
Matrix | Stathisnikolaidis | 1,922 Kb |
CSS Colors | Alexpate | 2,232 Kb |
Super Discount | Orrinward | 3,225 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Spilled Paint | Darrylhuffman | 3,894 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 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!