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

reference:
update needed

Computational Designer at NJSTUDIO, and Software Engineer at ESRI

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store