1950 - mu - Soul of a tiny new machine. More thorough tests → More comprehensible and rewrite-friendly software → More resilient society.

about summary refs log tree commit diff stats

path: root/044space.cc

diff options

author	Kartik K. Agaram <vc@akkartik.com>	2015-08-07 12:18:09 -0700
committer	Kartik K. Agaram <vc@akkartik.com>	2015-08-07 12:18:09 -0700
commit	49659e7291dfa02f1b11db721fd80eddbeb19876 (patch)
tree	857e565357823f5e40fc6afb585f51c27e319db5 /044space.cc
parent	eaeb955212eb3b133fd98d98457f17bfea8891d1 (diff)
download	mu-49659e7291dfa02f1b11db721fd80eddbeb19876.tar.gz

1950

Diffstat (limited to '044space.cc')

0 files changed, 0 insertions, 0 deletions

9'>109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 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();