Introduction to Computational Design: Data, Geometry, and Visualization Using Digital Media

DigitalFUTURES WORLD : ARCHITECTS UNITE Workshops

Subtitle: Introduction to Computational Design for Geometry Visualization and Data Visualization for Digital Mapping on Web

Short Description:
This is a hands-on workshop and lecture series about the Introduction to Computational Design for Data and Geometry Visualization for Digital Mapping on Web. For those who are interested in developing both the ideas and skills of data and geometry visualization to understand the data in architectural or urban contexts, this workshop is yours. The workshop consists of three key parts: (1) processing and visualizing data (2) constructing geometries (3) developing a pipeline for an interactive mapping system. Using HTML canvas and ArcGIS JSAPI, we are going to understand the holistic process and the pipeline of data and geometry visualization and mapping. In the workshop, key coding demos and related lectures will happen, and coding exercises with the boilerplate code will be followed as homework after the workshop.

Keywords:
Computational Geometry, Visualization, Urban and Architectural Data, web-based

Timezone:
North/South Americans Time Zone / GMT 2:00 AM /English version
Asian-Pacific Time Zone 9 / GMT 4:00 AM /Korean version

Language:
English / Korean

Workshop Schedule:
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

Digital FUTURES World Youtube Playlist Long version (English)
Digital FUTURES World Youtube Playlist Short version (English)

Digital FUTURES World Youtube Playlist Long version (Korean)
Digital FUTURES World Youtube Playlist Short version (Korean)

Workshop Description & Syllabus:
With the limited given time, we will try to cover all required steps related to the course works.

Lecture: 15~30%
Overview works: 5~10%
Workshop: 50~60% for overviewing codes, and 10~20% for live coding exercises
Homework: reviewing and typing all materials required for active students
Note: additional materials related to topics

Workshop Length:
6 days

Workshop hours/day:
1.5 hours

Workshop Description & Syllabus

Workshop Schedule:
Day 1: Processing Data and Visualization in Digital Media
Introduction to Data processing and Visualization in Grasshopper and Rhino Python

Day 2: Data Processing using Python
Introduction to Data Processing and Visualization Using Python

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

Day 4: Computational Geometry and Geometry Class
Introduction to Computational Geometry and Visualization

Day 5: Pipeline for Data and Geometry Visualization (or CAD system)
Introduction to Development of CAD application

Day 6: Digital Mapping using ArcGIS JSAPI
Introduction to JSAPI and the Development of a Mapping App

Workshop Schedule :
Workshop Description & Syllabus

Day 1: Processing Data and Visualization in Digital Media
Introduction to Data processing and Visualization in Grasshopper and Rhino Python

Keyword
Variable, Type, Number, Comment, String, Casting, Conditional Statement, Loop, Data Structure, List, Dictionary, Tuple, Function

Research Overview:
* Mapping Demo

Lecture:
1) Data in Design

Workshop: Rhino Grasshopper
1) Python basic and data processing in GH
2) Mapping and data visualization with Numerical Mapping Utility Addon
3) Data visualization with Numerical Image Utility Addon

Day 2: Data processing using Python
Introduction to Data Processing and Visualization Using Python

Research Overview:
* Politics of Space and its shadows [Exhibition]
* Built Environment Assessment

Keyword
CSV, JSON, GeoJSON, ZIP, Image Processing, Digital Elevation Model

Lecture:
1) Type of data and file formats

Workshop: Google Colab (Jupyter notebook)
1) Pandas and Numpy lib
2) Data structure: structured data and semi-structured data
3) Parse and rebuild CSV, JSON, Geo-JSON
4) Data processing and visualization

Additional note:
* Prediction data (SKLearn, Tensorflow)
* Feature reduction

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:
* Parkerator
* Agent-based Optimization for Column Distribution
* Design Workflows Integrating Machine Learning and Voxel Representations

Lecture:
1) Mapping with JSAPI
2) Build geometry class, Point, Line, and Area
3) Develop a pipeline for interactive visualization

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

Day 4: Computational Geometry and Geometry Class
Introduction to Computational Geometry and Visualization

Keyword
Data Structure, Vector, Color, Point, Line, Polyline, Polygon class, Area class, Geo JSON

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

Lecture:
1) Construct and compute geometries
2) Understand the rendering pipelines

Workshop: Codepen (HTML Canvas, Three(WebGL))
1) Vector object and its implementation
2) Point object
3) Line object
4) Area object
5) Color object
6) Rendering in ThreeJS
7) Rendering in Canvas

Additional note:
1) Mesh WebGL vertex and connectivity
2) Visualizing 3D geometry on Web (Three JS)

Day 5: Pipeline for Data and Geometry Visualization (or CAD system)
Introduction to Development of CAD application

Keyword
Programming Pattern for CAD system, Event, Data flow, Controller flow, Rendering flow

Research Overview:
* Small Environment
* Sketch hand

Lecture:
1) MVC pattern and flow(data and commands)
2) programming pattern for CAD system
3) Interaction for visualization(mouse, keyboard)

Workshop: Codepen
1) data flow
2) controller flow
3) rendering flow

Additional note:
1) soon

Day 6: Digital Mapping using ArcGIS JSAPI
Introduction to JSAPI and the Development of a Mapping App

Keyword
Projection, Remap, Interpolation, Generalization, ArcGIS JSAPI, Gestalk Principles, Principles of Graphical Integrity, Bertin’s Visualization design space

Research Overview:
* Third Place Mobility Energy Consumption

Lecture:
1) Projection, remap, interpolation
2) Generalization
3) Understand modify Object-oriented programming(OOP) pattern

Workshop: Codepen, Github
1) develop a mapping app with JSAPI based on the boilerplate code

Additional note:
1) data visualization using d3
2) data visualization using Amcharts

Required Software / Technology:
Google Colab, Codepen, GitHub, Visual Studio Code, Rhino Grasshopper(Addons)
Python, Typescript, HTML Canvas API, ArcGIS JSAPI

Required Software Skills Levels
Any coding experiences preferred (one of them: visual programming(GH), javascript, c#, java, or python)

Required Hardware
Laptop

Bio:
NJ Namju Lee is an architectural designer, researcher, lecturer, and software engineer. He has been the principal of NJSTUDIO since 2004, specializing in architecture, computational design, and visualization. He graduated from Seoul National University of Science and Technology(B.S), later, UC Berkeley(MArch), and Harvard GSD(MDes). He researched at UrbanAid Lab at UTS, at SENSEable City Lab and Media Lab(Changing Places Group) at MIT, and at CED, UC Berkeley. He works in the integrative and interdisciplinary domain of built environment and technology, with a particular interest in computational design and visualization. Central to his practice is the use of data as the primary methodology in shaping a design process by integrated computation and visualization.

NJ Namju Lee
nj.namju@gmail.com

Architecture design, Computation, Visualization specialist
MDes;Harvard, MArch;UCB, B.S;SNUST, Research Fellow; MIT

Director and founder of NJSTUDIO , NJS Lab, NJS Lab Sandbox

NJ Blog / NaverBlog(KR) / NaverCafe(KR) / GitHub / Linkedin / NJSTUDIO FB

Youtube(eng) / Youtube(kr) / Medium / DaumBrunch

Data and Design / Computational Design
Lecture / Workshop / QnA / Digital FUTURES World / DaumBrunch Link