[한국어 ] Digital FUTURES World Workshop Full Version

 

[#컴퓨테이셔널디자인 00] 데이터 & 디자인 / Data & Design / Computational Design 한국어 강의

데이터(Data) 그리고 디자인(Design)에 대한 소개입니다. 컴퓨테이셔널 디자인(Computational Design)에 대해 알아보아요~

00:00 - 시작하면서

------------------------------------------------

01:58 - 데이터 / Data

04:02 - 방법론 / Methodology

05:21 - 시스템 / System

------------------------------------------------

09:24 - 도시 데이터 그리고 네트워크 / urban data / network

13:54 - 도시 데이터 그리고 머신러닝 / urban data / machine learning

16:17 - 지오메트리 데이터 그리고 딥러닝 / geometry data / deep learning

18:52 - 건축 데이터 / optimization / parametric design

20:52 - 구조 데이터 / structure data / optimization

24:04 - 지오메트리 데이터 그리고 다이내믹스 / geometry data / dynamics

26:28 - 조경 / 환경 데이터 / landscape data / environmental data

28:24 - 이미지 데이터 그리고 프로세싱 / image data processing

31:12 - 페브리케이션 데이터 / fabrication data / digital mockup

33:19 - 머트리얼 데이터, 재료 데이터 / material data / computation

35:57 - 인터엑션 그리고 로봇틱스 / interaction / robotics

42:02 - 건축 데이터 그리고 파티클 시뮬레이션 / particle simulation / data

------------------------------------------------

44:28 - 요약 - 데이터 그리고 디자인 / data at different scales in design

45:27 - 그밖의 관심사 / 키워드 / 도메인 ... Keywords / domains/ data visualization / 3D visualization / education / publication

------------------------------------------------

English version - https://youtu.be/VC-cLerlm4s

플레이리스트 NJ's Computational Design Lecture series - http://bit.ly/2SgBRq0

NJ의 #컴퓨테이셔널디자인 / 크리에이티브 코딩 / Computational Design / Creative Coding

다음 브런치 디자인(Design) & 데이터(Data), 컴퓨테이셔널 디자인 - http://bit.ly/2OCfJ8P

DATA & DESIGN 컴퓨테이셔널 디자인

DigitalFUTURES WORLD : ARCHITECTS UNITE Workshops Subtitle: Introduction to Computational Design for Geometry Visualization and Data Visualization for Digital Mapping on Web This is a hands-on workshop and lecture series about the Introduction to Computational Design for Geometry Visualization and Data 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.

---

 

Computational Design: Data and Geometry Visualization for Digital Mapping on Web, 워크숍

DigitalFUTURES World 에서 워크숍을 진행합니다. 간단한 소개 영상을 만들어 봤어요! 특별히 한국어 버젼을 만든 만큼, 많은 참여 부탁드립니다!

DigitalFUTURES Word link https://www.digitalfutures.world/workshops-asia-pacific-blog/njlee-kr

Medium link https://medium.com/@nj.namju/introduction-to-computational-design-data-geometry-and-visualization-using-digital-media-14161fdfd22f

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

00:33 - 워크숍 소개

01:25 - 워크숍 배경

02:31 - 저의 워크숍 소개 1 - 6 Day

08:59 - 요약 및 그밖의 생각들

---

 

[한국어] 1. Introduction to Computational Design: Data, Geometry, and Visualization Using Digital Media

00:00 - 잡담

02:52 - 건축 컴퓨테이션 커리어 패스?, 양자택일

05:02 - 학위 프로그램마다 다르기 때문에, 결국에는 양자택일 후 집중

07:27 - 워크숍소개, 그리고 수업 내용과 방식

11:32 - 미디움(Medium) 페이지 링크

-----------------------------------------------------------------------

11:50 - 오늘의 워크숍 소개

12:25 - 데이터 그리고 디자인 (Data & Design) 강의 비디오 설명

13:25 - NJSTUDIO 웹사이트

13:39 - 데이터 그리고 디자인 (Data & Design 강의 요약

15:36 - 내가 생각하는 데이터(Data)란?

16:20 - 내가 생각하는 소프트웨어(Software)란?

20:49 - 내가 생각하는 CAD(Computer-Aided Design) 소프트웨어란?

22:41 - 왜 Web / 웹 환경?

24:35 - 시각화(Visualization) 그리고 해석(interpretation)

-----------------------------------------------------------------------

27:28 - 그라스하퍼(GH) 플러그인 설명

27:53 - Think Python 추가 자료

-----------------------------------------------------------------------

29:49 - 파이썬(Colab)환경 혹은 그라스하퍼(GH)환경

31:14 - 내가 생각하는 파이썬?

32:25 - 변수(Variable) 그리고 자료형(type)

41:26 - 숫자(Number)

46:27 - 주석(Comment)

48:16 - 문자열(String)

1:01:10 - 변환(Casting)

1:04:13 - 조건문(Conditional Statement)

1:08:31 - 사족, 안되는게 당연하다!, 분량을 채우자

1:12:05 - 사족, 소프트웨어는 평생 공부? 새로운 것 다시 공부?

1:14:31 - 사족, 어차피 해야 한다면…. 나의 영어공부…

1:19:10 - 컴퓨테이셔널 팅킹(Computational Thinking)의 하나의 단면

1:20:32 - 반복1 (Loop)

1:27:45 - 반복2 (While)

1:32:06 - 반복3 (double loop)

1:34:19 - 좌표계(Coordinate Systems)와 반복(loop)

1:36:13 - 사족, 내가 생각하는 코딩공부의 정석?

1:37:19 - 데이터구조(Data Structure) List

1:42:29 - 데이터구조(Data Structure) String as a list

1:43:26 - 데이터구조(Data Structure) List 예제1

1:48:08 - 데이터구조(Data Structure) List 예제2

1:49:15 - 사족, 내가 비보이 하면서 배운 교훈

1:52:40 - 사족의 요약

1:52:53 - 데이터구조(Data Structure) Tuple

1:53:15 - 함수, Function, 어떻게 코드를 디자인 할까?

1:57:29 - 랜덤 Random 그리고 input parameters

1:58:22 - 함수 예제, Math, Datetime

1:59:40 - 추가 공부 자료

2:01:13 - 추가 자료 Domain, Series, Index, Remap, String… 과제

2:04:04 - 과제 설명

-----------------------------------------------------------------------

2:04:55 - 저의 피드백

2:07:11- 마무리

---

 

[한국어] 2. Introduction to Computational Design: Data, Geometry, and Visualization Using Digital Media

00:00 - 잡담

00:40 - 워크숍을 대하는 자세

01:03 - 오늘의 워크숍 요약

05:08 - 추가 노트에 대해

07:53 - 프로젝트 리뷰

09:14 - 제3 공간 분석 방법론 리뷰

15:59 - 서울로 7017 작업 리뷰

----------------------------------------------------------------

17:31 - 오늘의 수업 리뷰

17:41 - Structured, semi structured, un-structured data

17:51 - CSV 파일

19:59 - JSON 파일

21:16 - GeoJSON 파일

25:06 - 오늘의 워크숍, 데이터, 플러그인

26:44 - Python 데이터 구조 만들기, CSV(TSV)

27:18 - String은 오브젝트이다

29:12 - 배열, Array, List, 2D, 3D...

33:43 - 사전, Dictionary, JSON

35:03 - JSON Lint

36:59 - JSON 그리고 ' 와 " 차이

----------------------------------------------------------------

38:09 - CSV 그라스하퍼(Grasshopper) 데이터 시각화

39:18 - Mapping, Tracing, Visualization의 차이?

40:41 - 그라스하퍼 아이콘 찾는 방법

41:48 - CSV 파일 열기, .open(), .readlines()

45:38 - 문자열 자르기, .Split()

46:17 - 그라스하퍼, Python, List Access-

48:26 - 위치 데이터 가져오기 -

49:36 - 구글 맵을 활용한 위치 데이터 확인방법

52:17 - Python에서 import 는 뭐지?

53:47 - Python 함수 정의를 볼 때,

55:06 - Mercator projection, 메르카토르 도법

55:57 - 매핑 할 때, 프로젝션(Projection)을 생각해 보면

58:57 - 프로젝션을 사용하는 이유

1:00:20 - 그라스하퍼 Python, Mercator projection

1:00:48 - .AddPoint() 란?

1:02:54 - 인덱스(index)로 데이터 나누기

1:03:40 - 데이터에 따라, 어떤 시각화 방법이 좋을까?

1:05:06 - Open Street Map(OSM)

1:06:36 - 시각화를 위한 데이터의 스케일

1:09:07 - 요약

----------------------------------------------------------------

1:09:54 - JSON 데이터 시각화

1:10:56 - JSON 파일 열기 .read()

1:12:28 - Key 값으로 데이터 가져오기

1:13:03 - ( ) 를 꼭 사용해야 하나요?

1:14:14 - Python Dictionary 데이터 가져오기 (indexing)

1:17:07 - 질문: 상용 GIS 프로그램과 Python을 활용한 데이터 프로세싱의 차이

1:19:25 - 이 워크숍의 목적

1:33:21 - 사족, 내가 느낀, 컴퓨테이션을 바라보는 일반적인 시각

----------------------------------------------------------------

1:36:28 - GeoJSON 데이터 시각화

1:39:22 - 시각화(Visualization)

1:41:23 - Spherical projection

----------------------------------------------------------------

1:43:33 - US Zip 데이터

1:45:18 - 직장 데이터 비교

----------------------------------------------------------------

1:46:45 - 리모트 센싱, Remote Sensing

1:47:31 - 이미지 프로세싱, Image processing

1:50:02 - 컴퓨테이셔널 디자인?

1:50:20 - 컬러 블랜딩, Color Blending

1:53:11 - 밝기. 대비. 색, 채도, Brightness, Contrast, hue, Saturation

1:53:43 - 색 선택, Color Selection

1:54:35 - 예제

1:55:17 - 필터, Convolutional Filter

1:59:43 - DEM

2:00:58 - 코드 설명

----------------------------------------------------------------

2:03:18 - 사족, 드리고 싶은 말

2:05:12 - QnA 시간

2:08:14 - Python보다, 컴퓨테이셔널 팅킹이 더 중요하다.

2:11:03 - 어떻게 코드를 작성 할까?

2:11:37 - High Level과 Low Level 의 차이?

2:13:27 - 색 정보를 높이 정보로?

2:15:22 - 공부 자료는 어디서?

2:17:11 - 마무리

---

 

[한국어] 3. Introduction to Computational Design: Data, Geometry, and Visualization Using Digital Media

00:00 - 잡담

01:20 - 과제 그리고 처음 코딩을 접했을 때

01:55 - Typescript 그리고 HTML Canvas

02:34 - 질문, OSM(Open Street Map)

08:01 - 오늘의 수업 내용

08:28 - Typescript(타입스크립트)는 뭐죠?

08:48 - Typescript를 왜 해야 하죠?

11:12 - Typescript, 어떻게 공부 할까요?

12:21 - 오늘의 워크숍 내용 요약

12:35 - 왜 low-level을 이해 해야 하는가?

---------------------------------------------------------------------------------------------------------

13:16 - Project Overview Numerical Geometry Utility

13:27 - 디자이너가 꼭 알아야하는 데이터는?

14:36 - Numerical Dynamic Utility

15:46 - Numerical Landscape Utility

16:32 - Architecture Compiler for fabrication

---------------------------------------------------------------------------------------------------------

17:45 - Typescript 기초

18:24 - CodePen, 코드펜 환경

19:19 - CodePen, 어떻게 Typescript를 사용 하나요?

20:00 - 요약

---------------------------------------------------------------------------------------------------------

20:29 - Typescript, Variable and Type, 타입스크립트, 변수와 자료형

21:06 - var, let, const 가 뭐죠?

22:30 - 디버킹 툴은 어떻게?

23:40 - 변수의 자료형은 어떻게 확인?

25:12 - Typescript, Number(int, float...)

28:15 - dot notation, 그리고, 화면 출력은 어떻게?

29:00 - 주석(Comment) 처리는 어떻게?

30:13 - 주석처리의 단축키?

30:20 - Typescript, String, 문자열

33:52 - 반드시 정수로 인덱스를 해야함!

36:33 - .toLowerCase(), .toUpperCase()

37:48 - 문자열 합치기(Concatenate)

39:45 - 자료형 변환, Casting

42:27 - 자료형 변환이 왜 중요?

----------------------------------------------------------------------------

43:08 - Typescript 조건문, Conditional Statement

43:55 - 내가 생각 하는 디자인 알고리즘?

51:42 - If () {} else {} 구문 예제

52:53 - 반복 for loop

57:45 - 반복 while loop

58:52 - 반복 double for loop

----------------------------------------------------------------------------

59:48 - 데이터 구조, array, list

1:00:57 - .push(), 데이터 삽입

1:02:15 - 데이터 구조, 문자열 string

1:03:32 - Typescript에서의 다양한 반복문

1:05:29 - 매트릭스, matrix, list of list

1:05:53 - 매트릭스 인덱싱, indexing

1:10:33 - 3차원 어레이 인덱싱

1:11:51 - Typescript, 오브젝트, object

1:13:30 - Object는 JOSN으로 변환이 가능 할까?

1:14:54 - 문자열을 다시 Object 변환?

1:15:45 - JSON stringify 사용 하는 이유?

1:17:43 - 사족, 컴퓨테이션, 우리가 왜 알아야 하는가?

----------------------------------------------------------------------------

1:18:13 - HTML Canvas

1:18:45 - HTML구조를 알아 보기

1:20:33 - CSS Hex color, 헥스 컬러?

1:21:55 - Codepen에서 Typescript 설정 방법은?

1:22:07 - Canvas 시각화를 위한 Typescirpt 구조 설명

1:25:12 - 좌표계, Coordinate system

----------------------------------------------------------------------------

1:27:01 - HTML Canvas Arc 그리기

1:30:22 - 함수의 기본값 설정 방법?

1:31:15 - List를 활용한 원 그리기

1:32:12 - Range, Interval을 활용한 원 그리기

1:33:21 - 데이터를 다르게 봐 보자!

1:36:05 - 원 2D 그리드, Point Gird 만들기

----------------------------------------------------------------------------

1:37:10 - HTML Canvas Line, 라인 만들기

1:38:52 - Random Point, 그리고 Line

1:39:11 - Typescript Random 어떻게 볼까? 확률로 보자!

----------------------------------------------------------------------------

1:41:44 - HTML Canvas Area(Polygon), 영역 만들기

1:42:08 - .closePath(), .fill(), .fillStyle

1:44:03 - 질문, 명시적으로 면을 만드는 방법?

1:45:27 - 질문, 왜 " ; " 를 선택적으로 사용하죠?

----------------------------------------------------------------------------

1:46:31 - 마우스 입력 이벤트, Mouse Event

1:47:50 - .clearRect(), 화면을 지우는 방법?

1:48:18 - 화면에 그림을 그리는 순서가 중요한 이유

1:48:52 - 제한된 폴리라인 그리기, Polyline

----------------------------------------------------------------------------

1:49:49 - 다이나믹 랜더링, Dynamic rendering loop

1:51:30 - 파이프라인 최적화, Init(), Update()

1:52:59 - 랜덤, Random에 대한 개인적인 생각

----------------------------------------------------------------------------

1:54:12 - Demo, 그리드 시스템, Grid system

1:54:29 - 공간의 이산화, Discretization

1:55:46 - 관계성, 연결성, Connectivity

1:56:29 - Demo, 서클 그리드, Circle grid

1:57:09 - Demo, 마우스 이벤트, Mouse Event

1:58:01 - 질문, 랜덤 관련

2:00:39 - Random을 확률로 접근 하는 예제, 시각화

2:06:33 - Demo, Circle, Connection, Interaction

2:07:13 - 디자인 알고리즘(Design algorithm)을 생각해 보면,

2:07:39 - Demo, Animation, 여러 차원의 데이트를 시각화 할까?

2:08:35 - Demo, Interactive polyline

2:08:46 - Demo, Bin system그리고 시각화(area, color)

----------------------------------------------------------------------------

2:09:49 - 추가 공부 자료

2:09:51 - Typescript Starter

2:10:40 - HTML Canvas Starter, Codepen

2:11:00 - 워크숍의 목적?

----------------------------------------------------------------------------

2:11:56 - 질문, 자바 프로세싱, Java Processing

2:13:30 - Sketch.js, p5.js, processing

2:14:41 - 질문, 실행 속도는?

2:15:35 - 일반적인 개발 프로세스, from Specific to Generic

2:17:21 - 알고리즘(Algorithm), "이해"를 넘어 "설명" 할 수 있어야 한다.

----------------------------------------------------------------------------

2:19:08 - 마무리

2:19:40 - 안 되는게 당연하다! 계속 하자, 언제 까지? 될 때 까지!!

2:20:10 - 다음의 워크숍 요약

---

 

[한국어] 4. Introduction to Computational Design: Data, Geometry, and Visualization Using Digital Media

00:00 - 잡담

01:17 - 질문에 대해

02:47 - 오늘의 워크숍 시작!

03:59 - 수업 내용 요약

04:26 - Project overview, Parkerator V2, Flux

05:58 - 디자인 스페이스, Design space

05:59 - 구조 최적화, Column Distribution Optimize

06:34 - 다양한 최적의 값을 추적

06:51 - 제한에 따른 최적화, Optimization

07:26 - 3D 지오메트리, 머신런닝, ML(Machine Learning)

08:59 - Machine Creativity

-------------------------------------------------------------------------------------

10:21 - 결국, 지오메트리, Geometry problem

11:21 - 프로그래밍 패러다임, Programming paradigm

12:47 - 추상화

14:00 - Typescript Class

14:41 - 벡터(Vector)를 생각해 보면…

15:45- 좌표계(Coordinate system)의 생각해 보면

17:53 - 컬러(Color) 정리

-------------------------------------------------------------------------------------

20:32 - Typescript, Vector Class를 만들어 보자!

21:27 - 두 가지의 큰 개념(Properties, Behaviors)

22:39 - Typescript Class의 문법은?

23:45 - "this" 의 의미는?

24:27 - "new" 의 의미는?

24:57 - "." (Dot notation)의 의미는?

27:30 - 왜 우리가 class를 알아야 하나?

27:57 - 정적 함수, Static function?

30:31 - 오브젝트를 생각해 보면,,

30:57 - 질문, 정의 때, let과 const

-------------------------------------------------------------------------------------

34:26 - Typescript, Color Class를 만들어 보자!

34:41 - 컬러 값의 도메인

35:33 - 정규화, Normalization

35:55 - 퀴즈! - 두 개의 함수의 다름을 설명하라!

39:29 - 왜 중요할까?

40:45 - 컴퓨테이셔널 디자인의 다른 관점

42:46 - 함수(function)가 복잡해 보일 때

43:13 - Color 오브젝트를 만들어 보면, 48:25: - 질문, HSV 투명도 적용 가능?

-------------------------------------------------------------------------------------

53:42 - Typescript, Point Class를 만들어 보자!

53:51 - Point와 Vector 차이?

55:20 - Point Class에 대해

58:47 - 컴퓨테이셔널 디자인의 다른 관점, 생각하는 방법

-------------------------------------------------------------------------------------

59:16 - Typescript, Line Class를 만들어 보자!

59:27 - 이미 작성한 Codpen 코드를 가져오기

59:49 - 중간 점 구하기(Mid-point)

1:01:09 - Line의 데이터 구조(Data structure)를 보면

1:02:16 - 컴퓨테이셔널 디자인, 데이터의 위계, 구조, 관계를 디자인하는 것

-------------------------------------------------------------------------------------

1:02:35 - Typescript, Polyline Class를 만들어 보자!

1:03:00 - 오브젝트를 예측을 해 보자!

1:04:27 - 사족, 내가 코딩을 하는 이유 중 하나

1:05:11 - .getLength(), 길이를 재 보자

-------------------------------------------------------------------------------------

1:05:57 - 왜 Geometry를 강조 하나?

1:06:53 - 데이터 구조 로서의 Geometry

1:07:09 - 숙제! , Polygon Class를 만들어 보자

1:07:23 - 중간 요약

-------------------------------------------------------------------------------------

1:08:01 - Visualization (시각화)

1:08:03 - Canvas Point Visualization

1:09:39 - 포인트를 화면에 그리기

1:09:47 - 왜 이렇게 복잡하게 하냐?

1:11:02 - 내가 생각하는 컴퓨테이션의 아름다움

1:12:47 - 여러 포인트들 만들기, Point list

-------------------------------------------------------------------------------------

1:14:19 - Canvas Line Visualization

1:15:35 - 라인을 화면에 그리기

1:15:58 - 데이터 구조 로서의 라인 - 글/비디오

-------------------------------------------------------------------------------------

1:17:12 - Canvas Polyline Visualization

1:17:52 - Canvas Polygon Visualization

1:18:23 - 중간 요약

-------------------------------------------------------------------------------------

1:19:17 - GeoJSON

1:19:50 - 데이터 구조를 보면…

1:21:40 - 과연 어떤 방식으로 class를 디자인할까?

-------------------------------------------------------------------------------------

1:22:50 - Demo, 데이터의 관계성, 위계성, 생태계, 시스템 모델링

1:22:57 - RectPos Optimizer

1:26:49 - 컴퓨테이셔널 사고, 어떻게 할 것인가?

1:27:27 - Spring system, 스프링 시스템

1:28:23 - 2D 구현

1:29:43 - 3D 구현, 그리고 Cost function

1:30:12 - Graph(그래프)

1:31:51 - Rigid Body(강체)

1:35:16 - Agent

1:38:15 - fitting, Regression

1:40:05 - Smart Drawing (Deep Learning)

-------------------------------------------------------------------------------------

1:42:20 - 추가 공부 자료

1:42:31 - Vector, Line, Polyline class - Python, Java, c#, Javascript

-------------------------------------------------------------------------------------

1:43:38 - 질문

1:43:54 - 마무리

1:44:27 - 나의 경쟁 상대는? 그리고 나의 전략은?

---

 

[한국어] 5. Introduction to Computational Design: Data, Geometry, and Visualization Using Digital Media

00:00 - 잡담

01:07 - 오늘의 워크숍 소개

01:25 - 소프트웨어 아키텍처, 파이프라인 Pipeline

-------------------------------------------------------------------------------------

02:32 - Project Overview, Small Environments

04:59 - Sketchpad(1963)

05:47 - 왜 Interaction이 중요한가?

07:11 - 다양한 액션 흐름이(Action sequences) 존재

08:26 - 왜 메뉴를 이해해야 하는가?

08:56 - City Engine VR Experience

-------------------------------------------------------------------------------------

09:31 - CAD System Architecture and Pipeline

09:54 - 인터액션, 피드백, Interaction / feedback

10:42 - 필요되는 놀리지, Knowledge

12:09 - 첫 번째 레이어

12:58 - 두 번째 레이어

14:16 - 세 번째 레이어

16:01 - 필요되는 테크놀로지, Technology

16:18 - 세 번째 레이어

17:00 - 사족, 틀릴 수 있다.

19:49 - 프로그래밍을 할 때, 기본 사고

20:45 - 결국 어떻게 나눌 것 인가의 문제

21:32 - 파이프라인의 연결성과 위계

23:47 - 문제점이 보이는 부분을 고치기 이전에 …

24:27 - CAD의 코딩 패턴, MVC, Coding Pattern

26:43 - 문제를 쪼개어 나누고, 그룹을 만드는 능력

27:31 - OOP(Object-Oriented Programming)의 관점으로 보면

-------------------------------------------------------------------------------------

31:28 - Typescript Class

32:07 - 상속, extends, Inheritance

33:15 - 재정의, Overriding

34:31 - 접근 제어자, public, protected, private

35:30 - 디자인 패턴, Design Pattern

36:02 - MVC(Model–view–controller) Pattern

-------------------------------------------------------------------------------------

36:33 - Typescript Class 상속 예제

37:07 - Python class 예제

38:54 - 만약, 디자인 방법론에 적용이 된다면?

29:20 - Python의 다양한 예제들(비디오 포함)

-------------------------------------------------------------------------------------

39:41 - 마우스 이벤트, Mouse Interaction

40:16 - Typescript enums , 열거

40:55 - Mouse event data

41:30 - Mouse drag 이벤트 만들기

43:28 - 키보드 이벤트 Keyboard Interaction

44:25 - .addEventListener(), 이벤트 추가

44:53 - Keyboard event data

45:11 - keycode data

46:23 - 터치 이벤트 Touch Interaction

------------------------------------------------------------------------------------

49:14 - Three JS 소개

49:47 - Three 그리고 Stater 구조 설명

50:41 - Mesh는 어떻게 만들죠?

51:51 - Primitive Mesh

52:23 - 사족, 새로운 것을 배운다는 것은, 익숙해 지는 것이다.

52:53 - Points

53:17 - 필요할 때 만, 렌더링 하는 방법

53:37 - Custom mesh 만들기

55:13 - 라이노(Rhino3 d) 오브젝트를 Three로 가져오기

57:58 - 이미지(Image)로 Mesh 만들기

58:27 - .getImageData(). 이미지 데이터를 읽어 오기

59:14 - 복셀 데이터, Voxel data

1:00:04 - Bunny OBJ 데이터

1:01:10 - OBJ와 STL 파일 포멧

1:01:41 - STL 데이터 구조

1:02:47 - .OBJLoader()

1:02:59 - 나만의 라이브러리(Library)를 만들자

-------------------------------------------------------------------------------------

1:03:43 - 추가 공부 자료

1:03:44 - A-Frame 소개

1:04:55 - Real-time Renderer Optimization, 리얼 타임 렌더러 최적화

-------------------------------------------------------------------------------------

1:06:36 - 질문

1:06:48 - 마무리

---

 

[한국어] 6. Introduction to Computational Design: Data, Geometry, and Visualization Using Digital Media

00:00 - 잡담

01:07 - 페이퍼 발표 에피소드

02:10 - 오늘의 워크숍 요약

----------------------------------------------------------------------------

02:45 - Project Overview

02:49 - 제3의 공간 분석, Third Places

05:18 - 워크숍 소개 비디오

----------------------------------------------------------------------------

06:18 - 3D좌표계, Coordinate system

07:05 - 2D좌표계, 면을 위한 UV Space

07:13 - 1D좌표계

07:26 - 결국 공간은 좌표계로 표상된다

08:20 - 지리 좌표계, Geographic coordinate system

08:42 - Demo 프로젝션, Projection

----------------------------------------------------------------------------

11:48 - Generalization

12:48 - Gestalk's Principles

13:48 - Bertin's Visualization Design Space

15:27 - 그리드 베이스 포인트 클러스터링, Grid-Based Clustering points

16:17 - Collision-Based Dynamic Graph 방법론

17:34 - Principles of Graphical Integrity

19:17 - 45 ways to communicate two quantities

20:50 - 나이팅게일의 로즈다이어그램, Nightingale-mortality

22:00 - 중간 요약

----------------------------------------------------------------------------

24:05 - 워크숍

24:08 - Globe 그리고 Projection

24:53 - 리맵, Remap, 바 차트, Bar chart

27:09 - 질문, 지오메트리 프로젝션

30:22 - HTML Canvas 좌표계 (Coordinate system)

30:48 - 리맵, Remap, 산점도 차트, Scatter plot

32:51 - 보간, Interpolation

33:36 - 보간의 예, Ex Easing motion

35:18 - 보간, Codepe

36:25 - 충돌 감지, Collision detection

27:15 - AABB(Axis-Aligned Bounding Box)

37:37 - AABB 예제

38:21 - 관계성 부여

----------------------------------------------------------------------------

39:57 - 추가 공부 자료

39:59 - Amcharts 라이브러리 소개

40:25 - 기초 사용법

41:34 - 프로젝션, projection

41:58 - 베이스 지도, Base map

42:40 - D3(Data-Driven Documents) 라이브러

44:10 - Mapbox 라이브러리

44:30 - Google map 라이브러리

44:56 - Esri, ArcGIS JSAPI 라이브러

----------------------------------------------------------------------------

45:29 - Github 설명

45:45 - JSAPI 추가 비디오 자료 및 준비

47:57 - 결과물 설명

48:56 - 최종 프로젝트 설명

----------------------------------------------------------------------------

51:20 - 워크숍에 참여 하면서 들 수 있는 생각들…

51:44 - 문제는 분량을 채우는 것, 자리를 지키자!

52:50 - 나도 했다, 내가 학생 때, 상황이 더 열악 했다.

54:46 - 내가 힘들면, 남도 힘들다. 결국, 스스로의 싸움

----------------------------------------------------------------------------

56:28 - 네이버 카페 설명

57:17 - 다른 워크숍 비디오들

58:32 - 라이노 파이썬, Rhino Python

58:54 - 라이노 c# 스크립팅

1:00:02 - 내가 워크숍에 시간을 투자하는 이유

1:02:20 - 다음 브런치, Daum Brunch

----------------------------------------------------------------------------

1:06:56 - 워크숍 참여 감사드립니다.

1:07:14 - 질문

1:07:37 - 대학원 졸업 후, 노숙자 된 이야기

1:09:16 - 마지막 부탁

---

Digital Mapping workshop: computationaldesign.tistory.com/17

 

---

워크숍 AS 그리고 네이버 카페