互动图形基础
分享
课程详情
课程评价
spContent=完美的设计表现是设计师取得成功的重要手段。传统设计师运用纸、笔、颜料等工具来说明设计中的形态、色彩和空间关系;今天,除了这些传统方法外,设计师还运用各种软件、编程接口、框架和开源硬件来说明设计中时间与互动关系。加入本课!让我们一起用代码在屏幕上绘制生动有趣的内容!
—— 课程团队
课程概述

本课程是一门面向艺术(设计)类专业学生的技术基础类课程,其教学目标是让学生掌握基本的互动媒体开发工具,了解构建可视化交互原型的基本过程和方法,为今后从事交互设计、信息设计以及数字媒体设计等领域的设计实践打造必要的技术基础。

本课程开发互动图形所使用的技术框架主要是p5.js,这是一个基于JavaScript互动媒体库,在艺术家、设计师以及教育工作者中颇为流行。课程将通过视频演示的方式介绍p5.js的基本概念、一般用法以及部分互动可视化效果的典型实现思路。课程强调从解决具体的问题出发,通过动手实践进行学习,比较适合零编程基础的艺术(设计)类专业学生。

运用本课程中介绍的知识和方法,学生将能够从鼠标、麦克风及摄像头等硬件中获取用户的各种输入,并在浏览器中绘制动态的可视化内容来响应用户的输入行为,最终形成一个支持特定人机互动逻辑的可视化图形界面。理解并体验这一过程,对学生今后构建复杂的人机互动系统至关重要。

本课程的教学内容及形式主要考虑艺术(设计)类专业本科1-2年级学生的需求和特点,课程重在引导学生自主实践以及自由地探索和体验,不会深入学习编程的相关概念,也不会进一步讨论界面设计的方法、原则和模式。

课程大纲

第1节 课程介绍

课程介绍

第2节 HTML简介

HTML 简介

第3节 p5js项目结构

p5js项目结构

p5js项目结构小练习

第4节 认识JavaScript函数

认识JavaScript函数

第5节 认识变量

认识变量

第6节 利用draw产生动画

利用draw产生动画

draw动画练习

第7节 定义画布在网页上的位置

定义画布在网页上的位置

第8节 在画布上显示图片

在画布上显示图片

第9节 鼠标事件处理

鼠标事件处理

鼠标事件处理练习

第10节  for 循环

for 循环

第11节 if 条件判断

if 条件判断

第12节 认识数组

认识数组

第13节 操纵像素

操纵像素

第14节 利用对象存储数据

利用对象存储数据

第15节 构造器函数

构造器函数

第16节 带参数的构造器函数

带参数的构造器函数

构造器函数小练习

第17节 爆炸效果

爆炸效果

第18节 利用向量计算运动1

利用向量计算运动1

第19节 利用向量计算运动2

利用向量计算运动2

第20节 模拟群体移动

模拟群体移动

第21节 模拟多种运动方式

模拟多种运动方式

第22节 模拟拖拽

模拟拖拽

第23节 分离构造器函数代码

分离构造器函数代码

第24节 获取麦克风数据

获取麦克风数据

第25节 获取摄像头数据

获取摄像头数据

证书要求

本课程的评分标准以【平时练习】、【讨论】与【期末作业】为计算依据,总成绩100分,各项分配如下:

【平时练习】:完成老师在“测验与作业”栏目发布的平时作业,占总成绩的20%,未完成互评会减分;

【讨论】:在”讨论区”栏目发帖或回帖,以活跃度计分,发帖和回贴数量>=10个为满分,占总成绩的20%;

【期末作业】:完成老师在“考试”栏目发布的期末作业,占总成绩的60%;

总成绩达到80分及以上者,可以获得本课程的优秀证书;总成绩达到60分但未达到80分者,可以获得本课程的合格证书。

参考资料