Overview

This Perosnal Project of mine is the second project in my personal portfolio of my expanding skills.

This one is a simple webpage coded in typescript that allows the user to draw onto a canvas with fading lines. The color changes when you scroll and several settings can be changed with buttons (ex: line width, activating effects, and line length or the speed which colors fade)

I wrote this code to expand my creative knowledge and enjoyment of writing code and to prove my ability in typescript. In order to run this code you can simply open the github pages for this repository or clone the html file with live server or anywhere that runs basic html webpages. The typescript has been converted to javascript so it works anywhere javascript runs.

{Provide a link to your YouTube demonstration. It should be a 4-5 minute demo of the software running and a walkthrough of the code. Focus should be on sharing what you learned about the language syntax.}

Software Demo Video

Development Environment

{Describe the tools that you used to develop the software} Development tools used

• VScode
• Node, Npm
• tsc

I Mainly used Typescript to write this project but there was a small amount of html and css used as well for display and organizational use.

Useful Websites

• How to setup a new typescript project

I followed this tutorial to setup typescript but instead of installing typescript locally I installed it globally. I did this for easier restart-up of new projects and so that I could run tsc through npm and not npx

• W3schools typescript introduction

W3schools is always one of my first go to resources for any web related topcis. They have great and easy to read descriptions of all sorts of things.

Future Work

• Add a way to change the number of stars in the background
• Add a way to resize the canvas
• Make the possible color range broader