Circle and Square Rasterizer

circle-and-square-rasterizer.js

function rasterizeCircleAndSquare(w, h, circleX, circleY, r, x1, y1, x3, y3) {
  const eps = 1e-5;

	function isInsideCircle(x, y) {
		if (Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) < Math.pow(r, 2) + eps) { return true; }
		return false;
	}

	let isInsideSquare;
	if (x1 !== x3 || y1 !== y3) {
		let squareDiagonal = Math.sqrt(Math.pow(x1 - x3, 2) + Math.pow(y1 - y3, 2));
		//console.log('squareDiagonal:', squareDiagonal);
		let squareArea = Math.pow(squareDiagonal, 2) / 2;
		//console.log('squareArea:', squareArea);

		const xCenter = (x1 + x3) / 2, yCenter = (y1 + y3) / 2;
		const xDiag = (x1 - x3) / 2, yDiag = (y1 - y3) / 2;
		const x2 = xCenter - yDiag, y2 = yCenter + xDiag;
		const x4 = xCenter + yDiag, y4 = yCenter - xDiag;

		isInsideSquare = function(x, y) {
			const triangle_1_side_1 = Math.sqrt(Math.pow(x1 - x, 2) + Math.pow(y1 - y, 2));
			const triangle_1_side_2 = Math.sqrt(Math.pow(x2 - x, 2) + Math.pow(y2 - y, 2));
			const triangle_1_side_3 = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
			let s = (triangle_1_side_1 + triangle_1_side_2 + triangle_1_side_3) / 2;
			let triangleArea_1 = Math.sqrt(s * (s - triangle_1_side_1) * (s - triangle_1_side_2) * (s - triangle_1_side_3));
			triangleArea_1 = (isNaN(triangleArea_1)) ? 0 : triangleArea_1;
			//console.log('triangleArea_1:', triangleArea_1);
			const triangle_2_side_1 = Math.sqrt(Math.pow(x2 - x, 2) + Math.pow(y2 - y, 2));
			const triangle_2_side_2 = Math.sqrt(Math.pow(x3 - x, 2) + Math.pow(y3 - y, 2));
			const triangle_2_side_3 = Math.sqrt(Math.pow(x2 - x3, 2) + Math.pow(y2 - y3, 2));
			s = (triangle_2_side_1 + triangle_2_side_2 + triangle_2_side_3) / 2;
			let triangleArea_2 = Math.sqrt(s * (s - triangle_2_side_1) * (s - triangle_2_side_2) * (s - triangle_2_side_3));
			triangleArea_2 = (isNaN(triangleArea_2)) ? 0 : triangleArea_2;
			//console.log('triangleArea_2:', triangleArea_2);
			const triangle_3_side_1 = Math.sqrt(Math.pow(x3 - x, 2) + Math.pow(y3 - y, 2));
			const triangle_3_side_2 = Math.sqrt(Math.pow(x4 - x, 2) + Math.pow(y4 - y, 2));
			const triangle_3_side_3 = Math.sqrt(Math.pow(x3 - x4, 2) + Math.pow(y3 - y4, 2));
			s = (triangle_3_side_1 + triangle_3_side_2 + triangle_3_side_3) / 2;
			let triangleArea_3 = Math.sqrt(s * (s - triangle_3_side_1) * (s - triangle_3_side_2) * (s - triangle_3_side_3));
			triangleArea_3 = (isNaN(triangleArea_3)) ? 0 : triangleArea_3;
			//console.log('triangleArea_3:', triangleArea_3);
			const triangle_4_side_1 = Math.sqrt(Math.pow(x4 - x, 2) + Math.pow(y4 - y, 2));
			const triangle_4_side_2 = Math.sqrt(Math.pow(x1 - x, 2) + Math.pow(y1 - y, 2));
			const triangle_4_side_3 = Math.sqrt(Math.pow(x4 - x1, 2) + Math.pow(y4 - y1, 2));
			s = (triangle_4_side_1 + triangle_4_side_2 + triangle_4_side_3) / 2;
			let triangleArea_4 = Math.sqrt(s * (s - triangle_4_side_1) * (s - triangle_4_side_2) * (s - triangle_4_side_3));
			triangleArea_4 = (isNaN(triangleArea_4)) ? 0 : triangleArea_4;
			//console.log('triangleArea_4:', triangleArea_4
			const sum = (triangleArea_1 + triangleArea_2 + triangleArea_3 + triangleArea_4);
			//console.log('sum:', sum, '| squareArea:', squareArea);
			if (Math.abs(sum - squareArea) < eps) { return true; }

			return false;
		}
	} else {
		isInsideSquare = function(x, y) {
			return x === x1 && y === y1;
		}
	}

	let output = '';
	const empty = '.', filled = '#';

	for (let i = 0; i < h; i++) { // height - X
		let row = '';
		for (let j = 0; j < w; j++) { // width - Y
			row += (isInsideCircle(j, i) || isInsideSquare(j, i)) ? filled : empty;
		}
		output += (i < h - 1) ? row + '\n' : row;
	}
	console.log(output);
  return output;
}

// TEST
const w = 20, h = 16, circleX = 9, circleY = 6, r = 5, x1 = 16, y1 = 14, x3 = 8, y3 = 14;
rasterizeCircleAndSquare(w, h, circleX, circleY, r, x1, y1, x3, y3);
/*
above function produces result:

....................
.........#..........
......#######.......
.....#########......
.....#########......
.....#########......
....###########.....
.....#########......
.....#########......
.....#########......
......#######.......
.........#.###......
..........#####.....
.........#######....
........#########...
.........#######....
*/

CircleAndSquareRasterizer.markdown

Circle and Square Rasterizer

Function rasterizeCircleAndSquare(w, h, circleX, circleY, r, x1, y1, x3, y3) rasterizes a circle and a square.

It accepts parameters:

• w - canvas width
• h - canvas height
• circleX, circleY - coordinates of the circle's center
• r - circle radius
• x1, y1, x3, y3 - coordinates of the opposite corners of the square

Coordinate (0,0) is top left corner of the canvas.

Sample output:

....................
.........#..........
......#######.......
.....#########......
.....#########......
.....#########......
....###########.....
.....#########......
.....#########......
.....#########......
......#######.......
.........#.###......
..........#####.....
.........#######....
........#########...
.........#######....

Scripts by V.

License.