path: root/js/peep/app.js

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();