*'

2 files changed, 210 insertions, 0 deletions

diff --git a/js/peep/app.js b/js/peep/app.js
new file mode 100644
index 0000000..777d78f
--- /dev/null
+++ b/js/peep/app.js
@@ -0,0 +1,190 @@
+const canvas = document.getElementById('peep');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+const ctx = canvas.getContext('2d');
+
+let draggedShape = null;
+
+const shapes = [
+    { type: 'circle', x: 100, y: canvas.height - 32, radius: 30 },
+    { type: 'rectangle', x: 200, y: canvas.height - 32, width: 60, height: 60 },
+    { type: 'triangle', x: 300, y: canvas.height - 32, sideLength: 50 },
+    { type: 'octagon', x: 400, y: canvas.height - 32, sideLength: 40 },
+    { type: 'pentagon', x: 500, y: canvas.height - 32, sideLength: 45 },
+];
+
+const drawCircle = (shape) => {
+    ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
+};
+
+const drawRectangle = (shape) => {
+    ctx.rect(shape.x - shape.width / 2, shape.y - shape.height / 2, shape.width, shape.height);
+};
+
+const drawTriangle = (shape) => {
+    const sideLength = shape.sideLength;
+    const height = (Math.sqrt(3) / 2) * sideLength;
+    ctx.moveTo(shape.x, shape.y - height / 2);
+    ctx.lineTo(shape.x - sideLength / 2, shape.y + height / 2);
+    ctx.lineTo(shape.x + sideLength / 2, shape.y + height / 2);
+    ctx.closePath();
+};
+
+const drawOctagon = (shape) => {
+    const sideLength = shape.sideLength;
+    const angle = (2 * Math.PI) / 8;
+    ctx.moveTo(shape.x + sideLength * Math.cos(0), shape.y + sideLength * Math.sin(0));
+    for (let i = 1; i < 8; i++) {
+        ctx.lineTo(shape.x + sideLength * Math.cos(angle * i), shape.y + sideLength * Math.sin(angle * i));
+    }
+    ctx.closePath();
+};
+
+const drawPentagon = (shape) => {
+    const sideLength = shape.sideLength;
+    const angle = (2 * Math.PI) / 5;
+    ctx.moveTo(shape.x + sideLength * Math.cos(0), shape.y + sideLength * Math.sin(0));
+    for (let i = 1; i < 5; i++) {
+        ctx.lineTo(shape.x + sideLength * Math.cos(angle * i), shape.y + sideLength * Math.sin(angle * i));
+    }
+    ctx.closePath();
+};
+
+const draw = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = '#ddd';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    const rectHeight = 4 * 16;
+    ctx.fillStyle = '#adadad';
+    ctx.fillRect(0, canvas.height - rectHeight, canvas.width, rectHeight);
+
+    ctx.strokeStyle = 'white';
+    for (const pulse of pulses) {
+        ctx.beginPath();
+        ctx.lineWidth = 5;
+        ctx.shadowColor = 'rgba(255, 255, 255, 0.5)';
+        ctx.shadowBlur = 20;
+        ctx.arc(pulse.x, pulse.y, pulse.radius, 0, Math.PI * 2);
+        ctx.stroke();
+        // Increase the radius of the pulse
+        pulse.radius += 5;
+
+        // Naive collision detection
+        for (const shape of shapes) {
+            if (isPointInsideShape(pulse.x, pulse.y, shape)) {
+                console.log('Collision detected with shape:', shape.type);
+            }
+        }
+    }
+
+    ctx.shadowColor = 'transparent'; // reset shadow color
+    ctx.shadowBlur = 0; // reset shadow blur
+
+    ctx.fillStyle = 'black';
+
+    shapes.forEach((shape) => {
+        ctx.beginPath();
+        if (shape.type === 'circle') {
+            drawCircle(shape);
+        } else if (shape.type === 'rectangle') {
+            drawRectangle(shape);
+        } else if (shape.type === 'triangle') {
+            drawTriangle(shape);
+        } else if (shape.type === 'octagon') {
+            drawOctagon(shape);
+        } else if (shape.type === 'pentagon') {
+            drawPentagon(shape);
+        }
+        ctx.fill();
+    });
+};
+
+const isPointInsideShape = (x, y, shape) => {
+    if (shape.type === 'circle') {
+        return Math.hypot(shape.x - x, shape.y - y) < shape.radius;
+    } else if (shape.type === 'rectangle') {
+        return x > shape.x - shape.width / 2 && x < shape.x + shape.width / 2 && y > shape.y - shape.height / 2 && y < shape.y + shape.height / 2;
+    } else if (shape.type === 'triangle') {
+        return isPointInsideTriangle(x, y, shape);
+    } else if (shape.type === 'octagon') {
+        return isPointInsideOctagon(x, y, shape);
+    } else if (shape.type === 'pentagon') {
+        return isPointInsidePentagon(x, y, shape);
+    }
+    return false;
+};
+
+const isPointInsideTriangle = (x, y, shape) => {
+    const sideLength = shape.sideLength;
+    const height = (Math.sqrt(3) / 2) * sideLength;
+    const topY = shape.y - height / 2;
+    const bottomY = shape.y + height / 2;
+    const leftX = shape.x - sideLength / 2;
+    const rightX = shape.x + sideLength / 2;
+    const topSlope = (y - topY) / (x - shape.x);
+    const bottomSlope = (y - bottomY) / (x - shape.x);
+    return x > leftX && x < rightX && y > topY && y < bottomY && topSlope < bottomSlope;
+};
+
+const isPointInsideOctagon = (x, y, shape) => {
+    const sideLength = shape.sideLength;
+    const topY = shape.y - sideLength;
+    const bottomY = shape.y + sideLength;
+    const leftX = shape.x - sideLength;
+    const rightX = shape.x + sideLength;
+    const topSlope = (y - topY) / (x - shape.x);
+    const bottomSlope = (y - bottomY) / (x - shape.x);
+    return x > leftX && x < rightX && y > topY && y < bottomY && topSlope < bottomSlope;
+};
+
+const isPointInsidePentagon = (x, y, shape) => {
+    const sideLength = shape.sideLength;
+    const topY = shape.y - sideLength;
+    const bottomY = shape.y + sideLength;
+    const leftX = shape.x - sideLength;
+    const rightX = shape.x + sideLength;
+    const topSlope = (y - topY) / (x - shape.x);
+    const bottomSlope = (y - bottomY) / (x - shape.x);
+    return x > leftX && x < rightX && y > topY && y < bottomY && topSlope < bottomSlope;
+};
+
+canvas.addEventListener('mousedown', (event) => {
+    const x = event.clientX;
+    const y = event.clientY;
+    shapes.forEach((shape) => {
+        if (isPointInsideShape(x, y, shape)) {
+            draggedShape = shape;
+            return;
+        }
+    });
+});
+
+canvas.addEventListener('mousemove', (event) => {
+    if (draggedShape) {
+        draggedShape.x = event.clientX;
+        draggedShape.y = event.clientY;
+    }
+});
+
+let pulses = [];
+
+canvas.addEventListener('mouseup', (event) => {
+    if (draggedShape && draggedShape.type === 'circle') {
+        // Add a new pulse for the circle
+        pulses.push({ x: draggedShape.x, y: draggedShape.y, radius: 0 });
+    }
+    draggedShape = null;
+});
+
+
+const setup = () => {};
+
+const update = () => {
+    draw();
+    pulses = pulses.filter(pulse => pulse.radius < canvas.width / 2);
+    requestAnimationFrame(update);
+};
+
+setup();
+update();
\ No newline at end of file
diff --git a/js/peep/index.html b/js/peep/index.html
new file mode 100644
index 0000000..bca8de2
--- /dev/null
+++ b/js/peep/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>peep</title>
+    <style>
+        body, html, #peep {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="peep"></canvas>
+    <script src="app.js"></script>
+</body>
+</html>
\ No newline at end of file