ajet/just-vibes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add border radius to rects; constrain to integeral cooridnates only

Browse Source
This commit is contained in:
Adam Jeniski 2026-01-01 23:58:07 -05:00
parent c9650744ed
commit 7c9402143b
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
line-segment-intersection/src/App.svelte
View File

@ -50,8 +50,15 @@
const width = Math.abs(corner2.x - corner1.x);
const height = Math.abs(corner2.y - corner1.y);
ctx.beginPath();
ctx.roundRect(x, y, width, height, 1);
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
ctx.fill();
// Add border
ctx.strokeStyle = color.replace('0.3', '0.8'); // Make border more opaque
ctx.lineWidth = 2;
ctx.stroke();
}
function handleMouseMove(event) {
@ -59,7 +66,11 @@
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
userPoint = toCartesianCoords(mouseX, mouseY);
// Add half grid unit offset for snapping to closest grid intersection
userPoint = {
x: Math.floor((mouseX + GRID_SIZE / 2) / GRID_SIZE),
y: Math.floor((HEIGHT - mouseY + GRID_SIZE / 2) / GRID_SIZE)
};
}
function toCanvasCoords(x, y) {
@ -199,22 +210,22 @@
<div class="calculations">
<h2>Rectangle Areas</h2>
<p class="point-c">Point B: ({userPoint.x.toFixed(2)}, {userPoint.y.toFixed(2)})</p>
<p class="point-c">Point B: ({userPoint.x}, {userPoint.y})</p>
<div class="rect-calc blue" class:largest={blueArea > redArea}>
<h3>Blue Rectangle</h3>
<p>Corner: ({blueRect.x1}, {blueRect.y1})</p>
<p>Width = |{blueRect.x1} - {userPoint.x.toFixed(2)}| = {blueWidth.toFixed(2)}</p>
<p>Height = |{blueRect.y1} - {userPoint.y.toFixed(2)}| = {blueHeight.toFixed(2)}</p>
<p class="area">Area = {blueWidth.toFixed(2)} x {blueHeight.toFixed(2)} = <strong>{blueArea.toFixed(2)}</strong></p>
<p>Width = |{blueRect.x1} - {userPoint.x}| = {blueWidth}</p>
<p>Height = |{blueRect.y1} - {userPoint.y}| = {blueHeight}</p>
<p class="area">Area = {blueWidth} x {blueHeight} = <strong>{blueArea}</strong></p>
</div>
<div class="rect-calc red" class:largest={redArea > blueArea}>
<h3>Red Rectangle</h3>
<p>Corner: ({redRect.x1}, {redRect.y1})</p>
<p>Width = |{redRect.x1} - {userPoint.x.toFixed(2)}| = {redWidth.toFixed(2)}</p>
<p>Height = |{redRect.y1} - {userPoint.y.toFixed(2)}| = {redHeight.toFixed(2)}</p>
<p class="area">Area = {redWidth.toFixed(2)} x {redHeight.toFixed(2)} = <strong>{redArea.toFixed(2)}</strong></p>
<p>Width = |{redRect.x1} - {userPoint.x}| = {redWidth}</p>
<p>Height = |{redRect.y1} - {userPoint.y}| = {redHeight}</p>
<p class="area">Area = {redWidth} x {redHeight} = <strong>{redArea}</strong></p>
</div>
</div>
</main>