From 02653392e6f4eefc6cde3cae4cba66e667053e3a Mon Sep 17 00:00:00 2001 From: elioat Date: Sat, 6 Jan 2024 14:52:10 -0500 Subject: *' --- js/peep/app.js | 190 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 js/peep/app.js (limited to 'js/peep/app.js') 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 -- cgit 1.4.1-2-gfad0