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;
}

80
projects/JavaScript/Circle_Collision/app.js Normal file
View File

@@ -0,0 +1,80 @@
var circle = {x: 50, y: 50, radius: 50, contour: []};
var box = {x: 20, y: 20, width: 300, height: 300};
for(var a = 0; a < Math.PI * 2; a += Math.PI / circle.radius){
circle.contour.push({
_x: Math.sin(a) * circle.radius, _y: Math.cos(a) * circle.radius
});
}
var canvas = document.body.appendChild(document.createElement("canvas")).getContext("2d");
canvas.canvas.width = 400;
canvas.canvas.height = 400;
var loop = function(){
canvas.canvas.width = canvas.canvas.width;
canvas.save();
canvas.fillRect(box.x, box.y, box.width, box.height);
canvas.globalCompositeOperation = "destination-out";
canvas.fillRect(box.x + 20, box.y + 20, box.width - 40, box.height - 40);
canvas.restore();
var circleCanvas = document.createElement("canvas").getContext("2d");
circleCanvas.canvas.width = canvas.canvas.width;
circleCanvas.canvas.height = canvas.canvas.height;
circleCanvas.save();
circleCanvas.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
circleCanvas.fillStyle = "#aaa";
circleCanvas.fill();
circleCanvas.globalCompositeOperation = "destination-in";
circleCanvas.fillRect(box.x + 20, box.y + 20, box.width - 40, box.height - 40);
circleCanvas.restore();
canvas.drawImage(circleCanvas.canvas, 0, 0);
if(circle._x < box.x + 20){
circle._x = box.x + 20;
}
if(circle._y < box.y + 20){
circle._y = box.y + 20;
}
if(circle._x > box.x + box.width - 20){
circle._x = box.x + box.width - 20;
}
if(circle._y > box.y + box.height - 20){
circle._y = box.y + box.height - 20;
}
circle.contour.forEach(function(p){
p.x = p._x;
p.y = p._y;
if(circle.x + p.x < box.x + 20){
p.x = box.x + 20 - circle.x;
}
if(circle.y + p.y < box.y + 20){
p.y = box.y + 20 - circle.y;
}
if(circle.x + p.x > box.x + box.width - 20){
p.x = box.x + box.width - 20 - circle.x;
}
if(circle.y + p.y > box.y + box.height - 20){
p.y = box.y + box.height - 20 - circle.y;
}
canvas.strokeStyle = "green";
canvas.lineWidth = 3;
canvas.lineTo(p.x + circle.x, p.y + circle.y);
});
canvas.stroke();
circle.x = circle._x;
circle.y = circle._y;
requestAnimationFrame(loop);
};
loop();
document.onmousemove = function(event){
circle._x = event.layerX;
circle._y = event.layerY;
};

10
projects/JavaScript/Circle_Collision/index.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html>

113
projects/JavaScript/GameLoop/gameloop.js Normal file
View File

@@ -0,0 +1,113 @@
// Main variables
let DEBUG = true;
let canvas;
let context;
let cW;
let cH;
// FPS
let secondsPassed;
let oldTimeStamp;
let fps;
let dragging = false;
function mMove(e) {
'use strict';
if (dragging) {
point.pX = e.offsetX * cW / canvas.clientWidth | 0;
point.pY = e.offsetY * cH / canvas.clientHeight | 0;
};
}
function mDown(e) {
'use strict';
dragging = true;
}
function mUp(e) {
'use strict';
dragging = false;
}
function clearContext() {
'use strict';
context.fillStyle = '#b27e56';
context.fillRect(0, 0, cW, cH);
}
// Init
window.onload = function() {
'use strict';
canvas = document.getElementById('game');
context = canvas.getContext('2d');
cW = canvas.width;
cH = canvas.height;
canvas.style.height = window.innerHeight + "px";
if (DEBUG) {
console.log('Canvas set size to ' + window.innerHeight + 'px');
console.log(canvas.getBoundingClientRect());
};
canvas.addEventListener('mousedown', mDown, false);
canvas.addEventListener('mouseup', mUp, false);
canvas.addEventListener('mousemove', mMove, false);
canvas.addEventListener('touchstart', mDown, false);
canvas.addEventListener('touchend', mUp, false);
canvas.addEventListener('touchmove', mMove, false);
window.requestAnimationFrame(gameLoop);
};
window.addEventListener('resize', function() {
'use strict';
let canvas = document.getElementById('game');
canvas.style.height = window.innerHeight + "px";
if (DEBUG) {
console.log('Canvas resized to ' + window.innerHeight + 'px');
console.log(canvas.getBoundingClientRect());
};
}, true);
// GameLoop
function gameLoop(timeStamp) {
'use strict';
// fps counter
secondsPassed = (timeStamp - oldTimeStamp) / 1000;
oldTimeStamp = timeStamp;
fps = Math.round(1 / secondsPassed);
// end fps counter
update();
draw();
if (DEBUG) {
context.font = '15px Arial';
context.fillStyle = '#101024';
context.fillText('FPS: ' + fps, 10, 20);
};
window.requestAnimationFrame(gameLoop);
}
function update() {
'use strict';
//
}
function draw() {
'use strict';
clearContext();
}