3 Typescript &HTML Canvas

DigitalFUTURES WORLD : ARCHITECTS UNITE Workshops

Day 3: Typescript and HTML Canvas
Introduction to Web Graphics using HTML Canvas API for visualization

Keyword
Syntax, Typescript, Canvas API, List, Range, Matrix, Arc, Line, Area, Interaction, Loop

Research Overview:
* Geometry Utility
* Dynamic Utility
* Landscape Utility
* Architectural Compiler

Lecture:
1) Typescript
2) Drawing geometry: Point, Line, and Area on HTML Canvas

Workshop: Codepen (HTML Canvas)
1) The basic syntax of Typescript
2) Understanding Canvas API
3) build function: List, Range, matrix
4) Visualization data using HTML Canvas API

• Overview

Numerical Geometry and Graph Utility, NJ Namju Lee

Numerical Dynamic Utility, NJ Namju Lee

Numerical Environment Utility, NJ Namju Lee

CompilerDemoVersion0.1.5, NJ Namju Lee

• Workshop:

Typescript(Javascript) basic
1 Typescript Basic, Data Type, and Cast: link
2 Typescript, Condition, and Loop: link
3 Typescript, Data structure: link

Drawing & Data Visualization(HTML Canvas API)
Tutorial: link
Reference: link

1. typescript basic and drawing points: link
2. typescript basic and drawing lines: link
3. typescript basic and interactive drawing points and lines: link
4. HTML Canvas API, Looping: link

• Demo
  Point grid: link
  Circle grid attraction: link
  Circle grid/mouse interaction: link
  Circle/Line: link
  Circle bouncing: link
  Lines: link
  Custom Bin Filter: link

• Additional notes:

Typescript Starter: link
Canvas Stater: link

English Version

Korean Version

Workshop Schedule:
Overview
Day 1: Processing Data and Visualization in Digital Media
Day 2: Data Processing using Python
Day 3: Typescript and HTML Canvas
Day 4: Computational Geometry and Geometry Class
Day 5: Pipeline for Data and Geometry Visualization (or CAD system)
Day 6: Digital Mapping using ArcGIS JSAPI

reference:
update needed