Make Design Interact／让设计互动起来（Fall 2017）

@上海工艺美院，WPP学院，新媒体系

@ New Media Program, WPP School of Marketing and Communications, Shanghai Art and Design Academy

Key Info

• by Aven Le Zhou, adjunct professor
• Monday,9:00am-12:00pm
• Studio of New Media Program

Content

Chapter 01: Creative Programming Basics

第一章：创意编程基础训练

01. PROGRAMMING & PROCESSING DRAWING 编程， Processing &绘图

01.0 Overview 课程预览

• 学习目标 | LEARNING OBJECTIVES
• 计算化媒体 vs. Processing | COMPUTATIONAL MEDIA VS PROCESSING
• 物理计算 VS. Arduino | PHYSICAL COMPUTING VS Arduino
• 交互逻辑图解 | INTERACTION DESIGN DIAGRAM
• 交互界面 | THE INTERFACE
• 讨论：输入, 输出 &软件逻辑设计 | DISCUSSION: INPUT, OUTPUT & LOGIC DESIGN
• 阅读文献 | READINGS

01.1 Programming 编程

• 语言｜HUMAN LANGUAGES
• 程序语言｜PROGRAMMING LANGUAGES
• 逻辑｜LOGIC
• 语法｜SYNTAX
• 标点｜PUNCTUATION
• 序列｜SEQUENCE

01.2 Processing

• PROCESSING
• 参考文档｜PROCESSING REFERENCES
• 3.X更新｜PROCESSING 3.X CHANGES
• JAVA
• 开发环境｜PROCESSING IDE
• 安装开发环境 | INSTALLING THE PROCESSING IDE
• 编写｜WRITING SKETCHES
• 基本函数｜SIZE(100，100)；
• 运行｜RUNNING SKETCHES
• 备注｜COMMENTING SKETCHES
• 发布｜PUBLISHING SKETCHES
• 写第一个程序 | Your first Processing Sketch

01.3 Drawing 绘图

• 绘图｜DRAWING
• 计算机图形｜COMPUTER GRAPHICS
• 位图｜RASTER GRAPHICS
• 矢量图｜VECTOR GRAPHICS
• 坐标系｜COORDINATE SYSTEMS
• 绘图顺序&图层 | DRAWING ORDER & LAYERING
• 抗锯齿｜SMOOTHING
• 图元｜2D PRIMITIVES
• 绘图模式｜DRAWING MODE
• 描边&填充｜STROKE & FILL
• 描边宽度｜STROKE WEIGHT
• 颜色 | COLOR
• 灰度图｜GRAYSCALE
• RGB 颜色 | RGB COLOR
• HEXADECIMAL COLOR
• 颜色混合 | COLOR MIXING
• 背景色 | BACKGROUND COLOR
• 透明度 | TRANSPARENCY / OPACITY / ALPHA

02. Animation & Variables 动画和变量

02.1 Variable 变量

• 变量 | VARIABLES
• 基本变量类型 | PRIMITIVE VARIABLE TYPES
• 变量声明,赋值&初始 | VARIABLE DECLARATION, ASSIGNMENT & INITIALIZATION
• 作用域 | VARIABLE SCOPE
• 环境变量 | ENVIRONMENT VARIABLES
• 窗口宽度&高度 | WIDTH & HEIGHT
• 改变变量值 | VARYING VARIABLE VALUES
• 运算符 | OPERATORS
• 数学运算符 | MATH OPERATORS
• 随机函数 | RANDOM() FUNCTION
• Map()函数 | MAP() FUNCTION

02.2 Animation 动画

• 动画 | ANIMATION
• 12项法则 |12 PRINCIPLES OF ANIMATION
• Processing 动画 | ANIMATION IN PROCESSING
• Processing两种模式 | STATIC & ACTIVE MODES
• 结构 | STRUCTURAL FUNCTIONS
• SETUP() & DRAW()
• 帧率 | frameRate vs. frameRate()
• XY坐标系 | X & Y COORDINATES
• 变换 | TRANSFORM FUNCTIONS
• 旋转 | ROTATE FUNCTIONS
• 剪切拉伸 | SHEAR FUNCTIONS
• 缩放 | SCALE FUNCTION

03. Conditionals, Iteration& Functions 条件语句，迭代 & 函数

03.01 Conditionals 条件语句

• 计算机指令 | STATEMENTS & EXPRESSIONS
• 布尔值表达 | BOOLEAN EXPRESSIONS
• 比较和逻辑运算符 | RELATIONAL & LOGICAL OPERATORS
• 条件语句 | CONDITIONALS
• IF语句 | IF STATEMENT
• Switch语句 | SWITCH STATEMENT

03.02 Iteration 迭代

• 迭代 ITERATION
• 循环 LOOPS
• for 循环 FOR LOOP
• while循环 WHILE LOOP
• 无限循环 INFINITE LOOPS

03.03 Function 函数

• 函数 | FUNCTIONS
• 自带函数 vs. 自定义函数 | PREDEFINED vs. USER-DEFINED
• 重复使用&模块化 | REUSABILITY & MODULARITY
•  函数定义 | FUNCTION DECLARATION
• 函数命名 | FUNCTION NAMES
• 函数参量 | FUNCTION ARGUMENTS (PARAMETERS)
• 函数主功能定义 | FUNCTION TASK
• 有返回值的function | FUNCTION RETURN TYPES
• 返回值 | FUNCTION RETURN EXAMPLE
• 无返回值 | VOID
• 调用函数 | CALLING FUNCTIONS

04. Interaction Design& Mouse, Keyboard Interaction 交互设计 &键盘，鼠标交互

04.01 Interaction Design 交互设计

• 交互 | INTERACTION
• 设计 | DESIGN
• 交互设计 | INTERACTION DESIGN
• 交互界面 | THE INTERFACE
• 交互设计的重要性 | IMPORTANCE OF INTERACTION DESIGN
• 跨学科属性 | MULTIPLE DISCIPLINES
• 产品设计 | PRODUCT DESIGN
• 工业设计&交互设计 | INDUSTRIAL & INTERFACE DESIGN
• XD体验设计 | EXPERIENCE DESIGN
• 可用性，可达性&人体工学 | USABILITY, ACCESSIBILITY & ERGONOMICS
• 交互设计法则 | INTERACTION DESIGN PRINCIPLES
• 目的性&一致性 | INTENTIONALITY & CONSISTENCY
• 可预测性&学习 | PREDICTABILITY & LEARNABILITY
• 有效的反馈 | TIMELY & RELEVANT FEEDBACK
• 环境赋使 | PERCEIVED AFFORDANCE

04.02 Mouse, Keyboard Interaction 键盘，鼠标交互

• 键鼠交互 | KEYBOARD & MOUSE INTERACTION
• keyPressed()函数 | KEYPRESSED() FUNCTION
• keyPressed变量 | KEYPRESSED VARIABLE
• KeyReleased() vs. keyTyped() 函数 | KEYRELEASED() & KEYTYPED() FUNCTIONS
• key变量 | KEY VARIABLE
• 变量类型Char | CHAR DATATYPE
• keyCode变量 | KEYCODE VARIABLE
• mousePressed()函数 | MOUSEPRESSED() FUNCTION
• mousePressed变量 | MOUSEPRESSED VARIABLE
• mouseX，mouseY，pmouseX，pmouseY变量 | MOUSEX, MOUSEY, PMOUSEX & PMOUSEY

04.03 The Graphical User Interface 图形用户界面

• 图形用户界面 | THE GRAPHICAL USER INTERFACE
• 按钮状态 | BUTTON STATES
• 第三方库：ControlP5 | CONTROLP5 LIBRARY

Chapter 02: Advanced Creative Programming

第二章：创意编程进阶训练

01. Arrays & ArrayLists 数组&列表

01.1 Array 数组

• 数组 | ARRAYS
• 声明&初始化 | ARRAY DECLARATION & INITIALIZATION
• 操作符 | ARRAY ACCESS OPERATOR
• 数组相关函数 | ARRAY FUNCTIONS
• 长度&尺寸调整 | ARRAY LENGTH & RESIZING
• 数组函数 | ARRAY METHODS
• 多纬度 | MULTI-DIMENSION ARRAYS
• 循环 | ARRAYS AND LOOPS
• 随机数生成器 | RANDOM NUMBER GENERATOR

01.2 ArrayList 列表

• 列表 | ARRAYLISTS
• 列表 vs. 数组 | ARRAYLIST vs . ARRAY
• 列表方法 | ARRAYLIST METHOD

02.Object-oriented Programming 面向对象编程

• 对象 | OBJECTS
• 面向对象编程 | OBJECT ORIENTED PROGRAMMING
• 类 | CLASSES
• 域 | FIELDS
• 作用域 | VARIABLE SCOPE
• 方法 | METHODS
• 对象新建&构造 | OBJECT INSTANTIATION & CONSTRUCTORS
• 标签 | TABS
• 封装 | ENCAPSULATION

03.Audio, Image, Video 声音，图像，视频

03.01 Audio 声音

• 声音 | AUDIO
• 声音波形 | AUDIO WAVEFORMS
• 波形 | WAVEFORMS
• 傅立叶转换 | FOURIER TRANSFORM
• 频率&振幅 | FREQUENCY & AMPLITUDE
• Processing声音处理 | AUDIO IN PROCESSING
• 声音方法 | SOUND METHOD

03.02 Minim Library 第三方库Minim

• 第三方库Minim | MINIM LIBRARY
• AudioPlayer类 | AUDIOPLAYER CLASS
• 其他类 | OTHER CLASSES

03.03 Images& PImage Class Methods 图像&PImage类方法

• PImage 类 | PIMAGE CLASS
• 新建 PImage | PIMAGE INSTANTIATION
• 加载 &显示图片 | LOADING & DISPLAYING IMAGES
• 异步加载图片 | ASYNCHRONOUS LOADING OF IMAGES
• PImage类方法 | PIMAGE CLASS METHODS
• 缩放 | resize()
• 复制 | copy()
• 着色 | tint()
• 蒙板 | mask()
• 滤镜 | filter()
• 混合 | blend()
• 保存 | save()
• 保存帧 | saveFrame()

03.04 Pixels 像素

• 像素 | PIXELS
• PImage& 像素 | PIMAGE& PIXELS
• 像素&颜色函数 | PIXELS & COLOR FUNCTIONS
• Pixels[]  数组 | PIXELS[ ] ARRAY
• 使用Pixels[]数组 | USE PIXELS[ ] ARRAY
• 像素*像素 | PIXEL BY PIXEL
• 生成位图 | PROGRAMMATIC RASTER GRAPHICS

03.05 Video 视频

• 视频 | VIDEO
• 安装视频库 | INSTALL VIDEO LIBRARY
• 视频库 | VIDEO LIBRARY
• Movie类 | MOVIE CLASS
• Movie类方法 | MOVIE CLASS METHOD

04.Camera Capture &Computer Vision 摄像头捕捉 &计算机视觉

04.01 Capture Live Video 实时数据采集

• Capture类 | CAPTURE CLASS
• Capture类方法 | CAPTURE CLASS METHODS

04.02 Computer Vision& Open CV 计算机视觉&OpenCV

• 计算机视觉 | COMPUTER VISION
• Open CV库 | OPEN CV
• Open CV for Processing 库 | OPENCV FOR PROCESSING LIBRARY

04.03 Face Detection 人脸检测

• 人脸识别 | FACE RECOGNITION
• FaceOSC软件 | FACEOSC
• OSC协议 | OPEN SOUND CONTROL

04.04 3D Sensing& Leap Motion Leap Motion手势捕捉

• LEAP MOTION
• LeapMotion环境安装 | LEAPMOTION INSTALLTION

Chapter 03: Physical Computing Basics

第三章：交互编程基础

01. Micro Controllers& Arduino 微控制器& Arduino

01.01 ELECTRICITY 电学原理

• 电｜ELECTRICITY
• 电流｜CURRENT
• 直流VS. 交流 | DIRECT VS. ALTERNATING CURRENT
• 电流战争｜BATTLE OF CURRENTS
• 变压器｜TRANSFORMER
• 电压｜VOLTAGE
• 电压标准｜VOLTAGE STANDARDS
• 导电性｜CONDUCTANCE
• 电阻值｜RESISTANCE
• 绝缘体｜INSULATORS
• 欧姆定律｜OHM’S LAW
• 瓦特｜WATT

01.02 ELECTRICAL COMPONENTS 电子元器件

• 极性｜POLARITY (POLARIZED VS. UNPOLARIZED)
• 导线｜WIRE
• 电阻｜RESISTORS
• 可变电阻｜VARIABLE RESISTORS
• 二极管｜DIODES
• 发光二极管｜LIGHT EMITTING DIODES (LEDS)
• 电容｜CAPACITORS
• 开关｜SWITCHES
• 晶体管&继电器｜TRANSISTORS & RELAYS
• 集成电路IC｜INTEGRATED CIRCUITS
• 面包板｜SOLDERLESS BREADBOARD
• 万用表｜MULTIMETER

01.03 CIRCUITS 电路

• 电路｜CIRCUIT
• 荷载｜LOAD
• 短路｜SHORT CIRCUIT
• 接地｜GROUND
• 技术术语｜CIRCUIT TERMINOLOGY
• 电路图｜CIRCUIT DIAGRAMS
• 电子元件符号 | CIRCUIT DIAGRAM SYMBOLS

01.04  DOCUMENTATION 记录

• 做记录｜DOCUMENTATION
• WHAT IF YOU DO NOT?
• 记录要点｜DOCUMENTATION TIPS

01.05 Microcontrollers 微控制器

• 计算机 | COMPUTER
• 微控制器｜MICROCONTROLLER
• 硬件｜HARDWARE
• 微控制器构成｜MICROCONTROLLER PARTS
• 中央处理器｜CENTRAL PROCESSING UNIT
• 时钟发生器｜CLOCK GENERATOR
• 内存｜MEMORY
• 通用型输入输出引脚｜GENERAL PURPOSE INPUT/OUTPUT PINS
• 模拟信号｜ANALOG
• 数字信号｜DIGITAL
• 模拟数字转换器｜ANALOG-TO-DIGITAL CONVERTER
• 数字模拟转换器｜DIGITAL-TO-ANALOG CONVERTER
• 串口通信｜SERIAL
• 串联&并联｜SERIAL& PARALLEL
• 并行通信｜PARALLEL

01.06 Software Engineering Terminology 软件工程术语

• 软件｜SOFTWARE
• 程序｜PROGRAM
• 固件｜FIRMWARE
• 基本输入输出系统｜BIOS(BASIC INPUT-OUTPUT SYSTEM)
• 启动管理程序｜BOOTLOADER
• 操作系统｜OPERATING SYSTEM
• 应用程序｜APPLICATION

01.07 Arduino

• Arduino
• Arduino 开发环境｜ARDUINO IDE开发环境安装｜INSTALLING THE ARDUINO IDE
• HOW ARDUINO IS OPEN-SOURCING IMAGINATION
• GNU通用公共许可协议｜General Public License
• 知识共享许可协议｜Creative Commons license
• GENUINO vs. ARDUINO

01.08 THE ARDUINO WAY Arduino价值观

• Prototyping
• Tinkering
• Patching
• Circuit Bending
• Hacking Toys
• Collaboration

02. Digital & Analog Inputs & Outputs 数字、模拟输入和输出

02.01 DIGITAL & ANALOG INPUT & OUTPUT 数字、模拟输入和输出

• 数字 | DIGITAL
• 模拟 | ANALOG
• 输入 | INPUT
• 输出 | OUTPUT
• 数字输入 | DIGITAL INPUT
• 数字输入引脚 | DIGITAL INPUT PINS
• 0&1号引脚 | PINS 0 (RX) AND 1 (TX)
• 开关 | SWITCHES
• 数字输出 | DIGITAL OUTPUT
• 数字输出引脚 | DIGITAL OUTPUT PINS
• 模拟输入 | ANALOG INPUT
• 模拟输入引脚 | ANALOG INPUT PINS
• 传感器 | SENSORS
• 模拟输出 | ANALOG OUTPUT
• 模拟输出引脚 | ANALOG OUTPUT PINS

02.02 PROGRAMMING THE ARDUINO Arduino 编程

• 数字&模拟输入输出函数 | DIGITAL & ANALOG I0 FUNCTIONS
• pinMode()
• digitalRead() & digitalWrite()
• analogRead()& analogWrite()

03. Physical Interaction, Sensors & Actuators 物理交互、传感器&驱动器

03.01 PHYSICAL INTERACTION 物理交互

• 物理交互 | PHYSICAL INTERACTION
• 大脑皮质层对应身体部位图 | HOW OUR BRAINS SENSE OUR BODIES
• 计算机眼中的人类 | WHAT COMPUTERS THINK OF HUMANS
• 木镜 | WOODEN MIRROR

03.02 SENSORS 传感器

• 传感器 | SENSORS
• 传感器分类 | SENSOR CATEGORIES
• 声音和震动 | SOUND & VIBRATION
• 光和辐射 | LIGHT & RADIATION
• 温度 | TEMPERATURE
• 位置 | POSITION & PROXIMITY
• 速度和加速度 | SPEED & ACCELERATION
• 压力 | PRESSURE & FORCE
• 化学品和气体 | GAS & CHEMICAL
• 电和磁 | ELECTRICAL & MAGNETIC
• 电子元件 | SENSOR COMPONENTS
• THT封装 | THROUGH HOLE TECHNOLOGY
• 双列直插封装 | DUAL IN-LINE PACKAGES
• 贴片 | SURFACE MOUNT TECHNOLOGY
• 元件选择 | USING COMPONENTS
• 传感器组件 | BREAKOUT BOARDS
• 数据&说明 | DATA SHEETS & DOCUMENTATION
• 数据处理 | SMOOTHING SENSOR VALUES

03.03 ACTUATORS 驱动器

• 驱动器 | ACTUATORS
• 线性驱动器 | LINEAR ACTUATORS
• 旋转驱动器 | ROTARY ACTUATORS
• 无刷步进电机 | BRUSHLESS STEPPER MOTORS
• 有刷电机 | BRUSHED MOTORS
• 舵机 | SERVOS
• 舵机接线 | SERVO WIRE
• 舵机控制 | SERVO LIBRARY

04.COMMUNICATION BETWEEN PROCESSING& ARDUINO Processing& Arduino通讯

04.01 COMMUNICATION BETWEEN PROCESSING& ARDUINO Processing& Arduino通讯

• 可选项 | AVAILABLE SOLUTIONS
• 优劣对比 | PRONS& CONS

04.02 FIRMATA

• FIRMATA
• Arduino Firmata库 | ARDUINO FIRMATA LIBRARY
• 标准Firmata代码上传 | STANDARD FIRMATA EXAMPLE
• Processing Firmata库 | PROCESSING FIRMATA LIBRARIY

04.03 MOUSE & KEYBOARD EMULATION 键盘鼠标事件模拟

• 键盘鼠标事件模拟 | MOUSE & KEYBOARD EMULATION
• 模拟键盘鼠标的 Arduino | LEONARDO, MICRO & DUE
• ARDUINO LEONARDO
• Arduino鼠标库 | ARDUINO MOUSE LIBRARY
• Arduino键盘库 | ARDUINO KEYBOARD LIBRARY

04.04 SERIAL COMMUNICATION 串口通讯

• 串口通信 | SERIAL COMMUNICATION
• 比特&字节 | BITS & BYTES
• 通用串行总线 | USB
• 数据速率 | DATA RATE
• 端口 | PORT
• 缓冲 | BUFFER
• 通讯协议 | PROTOCOLS
• 二进制协议 | BINARY PROTOCOLS
• Arduino串口通信端口 | ARDUINO SERIAL PORTS
• Arduino 串口函数 | ARDUINO SERIAL FUNCTIONS
• Processing串口通信库 | PROCESSING SERIAL LIBRARY

Chapter 04: Project Workshops

第四章：课程项目工作营

01. Project Plan Session

02. Project Development A

03. Project Development B

04. Project Presentation