iiiypuk/snipplets.dev
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/3party/bootstrap-v5.3.2.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
assets/3party/stats.min.js vendored Normal file
View File

@ -0,0 +1,5 @@
// stats.js - http://github.com/mrdoob/stats.js
(function(f,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"===typeof define&&define.amd?define(e):f.Stats=e()})(this,function(){var f=function(){function e(a){c.appendChild(a.dom);return a}function u(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();
u(++l%c.children.length)},!1);var k=(performance||Date).now(),g=k,a=0,r=e(new f.Panel("FPS","#0ff","#002")),h=e(new f.Panel("MS","#0f0","#020"));if(self.performance&&self.performance.memory)var t=e(new f.Panel("MB","#f08","#201"));u(0);return{REVISION:16,dom:c,addPanel:e,showPanel:u,begin:function(){k=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();h.update(c-k,200);if(c>=g+1E3&&(r.update(1E3*a/(c-g),100),g=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/
1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){k=this.end()},domElement:c,setMode:u}};f.Panel=function(e,f,l){var c=Infinity,k=0,g=Math.round,a=g(window.devicePixelRatio||1),r=80*a,h=48*a,t=3*a,v=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=h;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,h);b.fillStyle=f;b.fillText(e,t,v);
b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(h,w){c=Math.min(c,h);k=Math.max(k,h);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=f;b.fillText(g(h)+" "+e+" ("+g(c)+"-"+g(k)+")",t,v);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,g((1-h/w)*p))}}};return f});

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

0
projects/JS/Circle_Collision/app.js → projects/JavaScript/Circle_Collision/app.js
View File

0
projects/JS/Circle_Collision/index.html → projects/JavaScript/Circle_Collision/index.html
View File

0
projects/JS_GameLoop/gameloop.js → projects/JavaScript/GameLoop/gameloop.js
View File