/coding_behind_the_scenes

My twitch.tv show about the irreverent exploration of JavaScript animation

Primary LanguageJavaScript

Coding behind the scenes

This repository contains all the projects I've developed in my Twitch show. Watch the intro video for an explenation about the inspiration and motivation behind the show (please disregard the robot voice 🤖).

Episode 1: Drawing a line

In this episode I explored a way to draw a line on an HTML5 canvas using the mouse position. Watch the video here. You can check out the source code and the live demo if you like.

Drawing a line from the mouse position

Episode 2: Drag and drop

In this episode I created a square object on a canvas and was able to implement drag-and-drop functionality for it. Watch the video here. You can check out the source code and the live demo if you like.

A Square object with drag-and-drop functionality

Episode 3: Connecting lines

In this episode I enhanced the Square class from the previous one, and added the Line class. Now I can connect several Square objects with Line objects, and drag-and-drop them around the canvas. Watch the video here You can check out the source code and the live demo if you like.

Square objects connected by Line objects

Episode 4: Binary tree

In this episode I developed an algorithm to recursively draw a binary tree from an array. Watch the video here You can check out the source code and the live demo if you like.

A binary tree drawn using recursive post-order.