2D renderer in Sass

_circle.scss

@function circle($obj, $target) {
	$color: map-get($obj, color);
	$position: map-get($obj, position);
	$radius: map-get($obj, radius);
	
	$x: map-get($target, x);
	$y: map-get($target, y);
	
	$xd: $x - map-get($position, x);
	$yd: $y - map-get($position, y);
	
	$sum: $xd * $xd + $yd * $yd;
	
	@if $sum != 0 {
		$dist: abs(sqrt($sum));
	
		@if $dist <= $radius {
			@return $color;
		}
	} @else {
		@return $color;
	}
	
	@return transparent;
}

@function bounding-box-circle($obj, $canvas) {
	$position: map-get($obj, position);
	$radius: map-get($obj, radius);
	$size: $radius * 2;
	
	$overflow-x: max(map-get($position, x) + $radius - map-get($canvas, x), 0);
	$overflow-y: max(map-get($position, y) + $radius - map-get($canvas, y), 0);
	
	@return (
		position: vector2(
			max(map-get($position, x) - $radius, 0),
			max(map-get($position, y) - $radius, 0)
		),
		
		size: vector2(
			$size - $overflow-x,
			$size - $overflow-y
		)
	);
}

_scene.scss

@mixin scene($objects, $size) {
	$shadows: null;
	$matrix: matrix(map-get($size, x), map-get($size, y));
	
	@each $obj in $objects {
		// Get object properties
		$type: map-get($obj, type);
		$position: map-get($obj, position);
		
		// Get bounding box
		$bb: call('bounding-box-' + $type, $obj, $size);
		$bb-position: map-get($bb, position);
		$bb-size: map-get($bb, size);
		
		// Count pixels
		$pixels: max(map-get($bb-size, x) * map-get($bb-size, y) - 1, 0);
		
		// Iterate through pixels
		@for $i from 0 through $pixels {
			// Get real position
			$position: vector2(
				map-get($bb-position, x) + $i % map-get($bb-size, x),
				map-get($bb-position, y) + floor($i / map-get($bb-size, x))
			);
			
			$coords: (
				map-get($position, x) + 1,
				map-get($position, y) + 1
			);
			
			$value: call($type, $obj, $position);
			
			@if $value != transparent {
				$matrix: set-entry($matrix, $coords, $value);
			}
		}
	}
	
	
	$pixels: columns($matrix) * rows($matrix) - 1;
	
	@for $i from 0 through $pixels {
		// Get real position
		$position: vector2(
			$i % map-get($size, x),
			floor($i / map-get($size, x))
		);
		
		$coords: (
			map-get($position, x) + 1,
			map-get($position, y) + 1
		);
		
		$entry: get-entry($matrix, $coords);
		
		@if $entry != 0 and $entry != transparent {
			$x: map-get($position, x) + 0px;
			$y: map-get($position, y) + 0px;
			
			$value: $x $y $entry;
			$shadows: append($shadows, $value, comma);
		}
	}
	
	background-color: transparent;
	box-shadow: $shadows;
	height: 1px;
	width: 1px;
}

_square.scss

@function square($obj, $target) {
	$color: map-get($obj, color);
	$position: map-get($obj, position);
	$size: map-get($obj, size);
	
	$x: map-get($target, x);
	$y: map-get($target, y);
	
	@if $x >= map-get($position, x) and
		$x < map-get($position, x) + map-get($size, x) and
		$y >= map-get($position, y) and
		$y < map-get($position, y) + map-get($size, y)
	{ @return $color; }
	
	@return transparent;
}

@function bounding-box-square($obj, $canvas) {
	$position: map-get($obj, position);
	$size: map-get($obj, size);
	
	$overflow-x: max(map-get($position, x) + map-get($size, x) - map-get($canvas, x), 0);
	$overflow-y: max(map-get($position, y) + map-get($size, y) - map-get($canvas, y), 0);
	
	@return (
		position: vector2(
			max(map-get($position, x), 0),
			max(map-get($position, y), 0)
		),
		
		size: vector2(
			map-get($size, x) - $overflow-x,
			map-get($size, y) - $overflow-y
		)
	);
}

_vector2.scss

@function vector2($x, $y) {
	@return (
		x: $x,
		y: $y
	);
}

render.scss

// Vendors
@import 'vendors/SassyMatrix';
@import 'vendors/math';

// Core
@import 'core/scene';

// Math
@import 'math/vector2';

// Objects
@import 'objects/circle';
@import 'objects/square';

$scale: 64;

$objects: (
	(
		type: square,
		color: #f00,
		position: vector2(0, 0),
		size: vector2(1 * $scale, 0.5 * $scale)
	), (
		type: circle,
		color: #00f,
		position: vector2(0.25 * $scale, 0.5 * $scale),
		radius: 0.25 * $scale
	)
);

.output {
	@include scene($objects, vector2($scale, $scale));
}