Bow Tie

Overview

This project is a JavaScript script that draws lines on an HTML canvas in the pattern of a bow tie, then fills in the top and bottom with lines using the same pattern.

Motivation

After completing the Recursive H Tree project, I wanted to try drawing more graphics, but inside of a web browser instead of a desktop app.

Technical Details

The lines are drawn repeatedly in the shape of a bow tie until the center is reached. Delays between line drawings are made possible through JavaScript Promises to allow for a delay in animating the drawing.

Technologies Used

HTML
JavaScript

Source Code

async function drawBow(){
	// Wait half a second until starting the drawing
	await sleep(500);

	var leftSide = 0;
	var topSide = 0;
	var bottomSide = height;
	var rightSide = width;

	ctx.beginPath();
	ctx.moveTo(0,0);

	while(rightSide >= leftSide && topSide <= bottomSide){
		ctx.lineTo(rightSide, bottomSide);
		ctx.stroke();
		await sleep(30);

		ctx.lineTo(rightSide, topSide);
		ctx.stroke();
		await sleep(30);

		ctx.lineTo(leftSide, bottomSide);
		ctx.stroke();
		await sleep(30);

		ctx.lineTo(leftSide, topSide);
		ctx.stroke();
		await sleep(30);

		leftSide+=5;
		rightSide-=5;
		topSide+=5;
		bottomSide-=5;
	}
	ctx.closePath();
	drawTopAndBottom();
}

async function drawTopAndBottom(){
	var leftSide = 0;
	var topSide = 0;
	var bottomSide = height;
	var rightSide = width;

	ctx.beginPath();
	ctx.moveTo(0,0);

	while(rightSide >= leftSide  && topSide <= bottomSide){
		ctx.lineTo(rightSide, topSide);
		ctx.stroke();
		await sleep(30);

		ctx.lineTo(leftSide, bottomSide);
		ctx.stroke();
		await sleep(30);

		ctx.lineTo(rightSide, bottomSide);
		ctx.stroke();
		await sleep(30);

		leftSide+=5;
		rightSide-=5;
		topSide+=5;
		bottomSide-=5;

		ctx.lineTo(leftSide, topSide);
		ctx.stroke();
		await sleep(30);
	}
	ctx.closePath();
}


function sleep(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
}