Intersecting Lines

Developer
Gabi
Size
3,407 Kb
Views
44,528
  1. Intersecting Lines Previews
  2. Intersecting Lines HTML Codes
  3. Intersecting Lines CSS Codes
  4. Intersecting Lines JS Codes

How do I make an intersecting lines?

USING: Intersection point of two line segments in 2 dimensions - Written by Paul Bourke . What is a intersecting lines? How do you make a intersecting lines? This script and codes were developed by Gabi on 22 August 2022, Monday.

Intersecting Lines Previews
IQ Test

Intersecting Lines - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Intersecting Lines</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src='js/feac0eae1a56efd57f04e1bf7.js'></script> <script src="js/index.js"></script>
</body>
</html>

Intersecting Lines - Script Codes CSS Codes

body { background-color: #eee; overflow: hidden;
}
canvas { background-color: #eee; display: block; margin: 0 auto;
}

Intersecting Lines - Script Codes JS Codes

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = window.innerWidth, cx = cw / 2;
var ch = canvas.height = window.innerHeight, cy = ch / 2;
ctx.fillStyle = "#000";
var linesNum = 16;
var linesRy = [];
var requestId = null;
function Line(flag) { this.flag = flag; this.a = {}; this.b = {}; if (flag == "v") { this.a.y = 0; this.b.y = ch; this.a.x = randomIntFromInterval(0, ch); this.b.x = randomIntFromInterval(0, ch); } else if (flag == "h") { this.a.x = 0; this.b.x = cw; this.a.y = randomIntFromInterval(0, cw); this.b.y = randomIntFromInterval(0, cw); } this.va = randomIntFromInterval(25, 100) / 100; this.vb = randomIntFromInterval(25, 100) / 100; this.draw = function() { ctx.strokeStyle = "#ccc"; ctx.beginPath(); ctx.moveTo(this.a.x, this.a.y); ctx.lineTo(this.b.x, this.b.y); ctx.stroke(); } this.update = function() { if (this.flag == "v") { this.a.x += this.va; this.b.x += this.vb; } else if (flag == "h") { this.a.y += this.va; this.b.y += this.vb; } this.edges(); } this.edges = function() { if (this.flag == "v") { if (this.a.x < 0 || this.a.x > cw) { this.va *= -1; } if (this.b.x < 0 || this.b.x > cw) { this.vb *= -1; } } else if (this.flag == "h") { if (this.a.y < 0 || this.a.y > ch) { this.va *= -1; } if (this.b.y < 0 || this.b.y > ch) { this.vb *= -1; } } }
}
for (var i = 0; i < linesNum; i++) { var flag = i % 2 == 0 ? "h" : "v"; var l = new Line(flag); linesRy.push(l);
}
function Draw() { requestId = window.requestAnimationFrame(Draw); ctx.clearRect(0, 0, cw, ch); for (var i = 0; i < linesRy.length; i++) { var l = linesRy[i]; l.draw(); l.update(); } for (var i = 0; i < linesRy.length; i++) { var l = linesRy[i]; for (var j = i + 1; j < linesRy.length; j++) { var l1 = linesRy[j] Intersect2lines(l, l1); } }
}
function Init() { linesRy.length = 0; for (var i = 0; i < linesNum; i++) { var flag = i % 2 == 0 ? "h" : "v"; var l = new Line(flag); linesRy.push(l); } if (requestId) { window.cancelAnimationFrame(requestId); requestId = null; } cw = canvas.width = window.innerWidth, cx = cw / 2; ch = canvas.height = window.innerHeight, cy = ch / 2; Draw();
};
setTimeout(function() { Init(); addEventListener('resize', Init, false);
}, 15);
function Intersect2lines(l1, l2) { var p1 = l1.a, p2 = l1.b, p3 = l2.a, p4 = l2.b; var denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y); var ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator; var ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator; var x = p1.x + ua * (p2.x - p1.x); var y = p1.y + ua * (p2.y - p1.y); if (ua > 0 && ub > 0) { markPoint({ x: x, y: y }) }
}
function markPoint(p) { ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI); ctx.fill();
}
function randomIntFromInterval(mn, mx) { return ~~(Math.random() * (mx - mn + 1) + mn);
}
Intersecting Lines - Script Codes
Intersecting Lines - Script Codes
Home Page Home
Developer Gabi
Username enxaneta
Uploaded August 22, 2022
Rating 4.5
Size 3,407 Kb
Views 44,528
Do you need developer help for Intersecting Lines?

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!

Gabi (enxaneta) Script Codes
Name
Circle decay
Pastel dots net
Sakura
Holy Cow Mandala
CSS only star rating
Flexbox playground
Conical Helix
Circle-Circle Intersection
SVG gauge
Sine wave ice cream
Create amazing Facebook ads 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!