iiiypuk/snipplets.dev
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Check Dot in Circle

Browse Source
This commit is contained in:
Alexander Popov
2023-10-09 01:28:25 +03:00
parent f8ef8a3381
commit 0713b75cde
10 changed files with 121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
projects/JavaScript/Check Dot in Circle/app.js Normal file
View File

@@ -0,0 +1,69 @@
let stats = new Stats();
let canvas = null;
let context = null;
let dot = { x: 0, y: 0, size: 2, };
let circle = { x: 0, y: 0, radius: 50, };
window.onload = function() {
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
// add statistics
stats.showPanel(0);
document.body.appendChild(stats.dom);
document.getElementById('canvas').addEventListener('mousemove', (event) => {
let canvas_rect = canvas.getBoundingClientRect();
dot.x = event.clientX - canvas_rect.left;
dot.y = event.clientY - canvas_rect.top;
});
initScene();
requestAnimationFrame(mainLoop);
}
function drawScene() {
'use strict';
clearContext();
// Calculate dot collision and change circle color
if (Math.sqrt((dot.x - circle.x) * (dot.x - circle.x) + (dot.y - circle.y) * (dot.y - circle.y)) <= circle.radius) {
context.fillStyle = '#d44e52';
}
else {
context.fillStyle = '#38607c';
}
// Draw circle
context.beginPath();
context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
context.fill();
// Draw dot
context.fillStyle = '#ffcc68';
context.fillRect(dot.x, dot.y, dot.size, dot.size);
}
function initScene() {
circle.x = canvas.width / 2;
circle.y = canvas.height / 2;
}
function mainLoop() {
stats.begin();
drawScene();
stats.end();
requestAnimationFrame(mainLoop);
}
function clearContext() {
'use strict';
context.fillStyle = '#2a2a3a';
context.fillRect(0, 0, canvas.width, canvas.height);
}

1
projects/JavaScript/Check Dot in Circle/bootstrap.min.css vendored Symbolic link
View File

@@ -0,0 +1 @@
../../../assets/3party/bootstrap-v5.3.2.min.css

33
projects/JavaScript/Check Dot in Circle/index.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Colision Detect in Circle</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="stats.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="bg-dark text-bg-dark">
<div class="container-fluid">
<p class="text-center pt-3">
Проверка наличия точки в круге
</p>
<div class="d-flex justify-content-center">
<canvas id="canvas" width="320" height="192"></canvas>
</div>
<p class="text-center pt-3">
Наведите курсор на <span class="bg-info text-bg-info rounded p-1">canvas</span> для перемещения точки.
</p>
<p class="text-center">
Формуля для расчёта задачи:<br>
<span class="bg-info text-bg-info rounded p-1">
sqrt((x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1)) <= R
</span>,<br>
где R - это радиус окружности,<br>
x0/y0 - координаты точки,<br>
x1/y1 - координаты центра окружности.
</p>
</div>
</body>
</html>

1
projects/JavaScript/Check Dot in Circle/stats.min.js vendored Symbolic link
View File

@@ -0,0 +1 @@
../../../assets/3party/stats.min.js

6
projects/JavaScript/Check Dot in Circle/styles.css Normal file
View File

@@ -0,0 +1,6 @@
@import url('bootstrap.min.css');
canvas {
border: 1px solid #000;
cursor: none;
}