diff --git a/projects/JS/Circle_Collision/app.js b/projects/JS/Circle_Collision/app.js
new file mode 100644
index 0000000..e10e2ca
--- /dev/null
+++ b/projects/JS/Circle_Collision/app.js
@@ -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;
+};
diff --git a/projects/JS/Circle_Collision/index.html b/projects/JS/Circle_Collision/index.html
new file mode 100644
index 0000000..ae2dfc8
--- /dev/null
+++ b/projects/JS/Circle_Collision/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+ JS Bin
+
+
+
+
+