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

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

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

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

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

课程大纲

1. 课程介绍 1课时

2. 认识HTML 1课时

3. p5js项目结构 1课时

4. 认识函数 1课时

5. 认识变量 1课时

6. 利用draw产生动画 1课时

7. 定义画布在网页上的位置 1课时

8. 在画布上显示图片 1课时

9. 鼠标事件处理 1课时

10. for 循环 1课时

11. if 条件判断 1课时

12. 认识数组 1课时

13. 操纵像素 1课时

14. 利用对象存储数据 2课时

15. 构造器函数 2课时

16. 带参数的构造器函数 1课时

17. 爆炸效果 1课时

18. 利用向量计算运动1 2课时

19. 利用向量计算运动2 2课时

20. 模拟群体移动 2课时

21. 模拟多种运动方式 2课时

22. 模拟拖拽 2课时

23. 分离构造器函数代码 1课时

24. 获取麦克风数据 1课时

25. 获取摄像头数据 1课时



证书要求

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

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

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

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

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

参考资料