互动媒体技术实验一总结

在本次实验中熟悉了JavaScript中p5.JS的使用，完成了对一个动态图形的临摹制作以及相应的扩展，以下为实验要求：

主题：从参考资料中的“动态图形艺术”中选取不少于1幅作品，用编程方式临摹，并进行拓展
要求：
编程语言与工具：编程可以用p5,processing，若想用其他语言或工具，提前向老师说明情况；
作品: 要有一件临摹的作品；还要有至少一件拓展的作品；每幅作品录制一段半分钟内的视频；
报告：写一篇文章，发表为博文/推文等形式，描述从原作中提炼出的规律，既要用平实易懂的语言描述，也要尝试运用凝练的数学语言表达（公式、方程、推导等），特别要描述出这些规律在原作中如何呈现的？在自己的扩展中如何呈现和变化的？

接下来进行具体的说明
实验中选取了该动图进行制作

粗略观察每一次循环中组成大圆的一半的小球会组成一个半径为大圆一半的小圆绕大圆内侧滚动一圈后还原，但这显然过于复杂难以实现而且没有抓到该动图中运动的本质，我们来再仔细观察一遍。
当忽视大圆的转动并集中注意力观察其中一个小球的运动时，我们 可以发现实际上每个小球只是在大圆的直径上运动，并呈现出简谐振动的加速度规律，当到这一步时，我们已经了解到需要的信息可以开始操作了。

首先编辑实现单个小球的运动

function ball1(time,i)//单个球的运动
{
if(time)
{
	if(i%3===0)
	fill(255,0,0);
	if(i%3===1)
	fill(0,255,0); 
	if(i%3===2)
	fill(0,0,255); 
	//给小球分别上色;
	var speed=(PI*time/3);//speed会决定单个球的运动（半径的变化的）速度
	if(2*cos(speed)<1 &&2*cos(speed)>-1)
		r=R*2*cos(speed);
	else if(2*cos(speed)>1)
		r=R;
    else r=-R;
	//使得小球的运动连续且有停顿
	ellipse(-r,0, 20, 20);
}
}

其中time为处理过的系统得到的微秒数，用于随着时间推移在不同位置画出小球以实现小球的动态效果，i为小球的编号，此处用于给小球上色

接下来将单个小球的操作扩充为24个小球组成大圆

function ballcopy(time)//复制操作达到完整效果
{
	for(var i = 0; i<24;i++)//i视为小球记号
{
	rotate(PI/12);//旋转画布以画出更多的球
	ball(10*time+i*PI/36,i);
	ball1(10*time+i*PI/36,i);//需达到扩展效果时启用
}
}

time如之前所说，不表，将画布旋转来均匀布置24个小球

最后设置画布并启用函数

var R =300; //大圆半径
function setup() 
{
   // put setup code here
   createCanvas(1300, 1000);
}

function draw() 
{
background(40);
translate(650,500);
fill(200);
let time =millis()/5000;//利用当前毫秒数作为时间标准
//ellipse(0,0,2*R,2*R);//辅助大圆用于定位
rotate(PI*time/3.5);//随时间旋转画布达到外围大圆的旋转效果
ballcopy(time);
}

此处启用millis获取时间并处理供之后使用，并旋转画布达到大圆自转效果
最后效果图

扩展方面，额外编写了单独小球的运动函数并反转其旋转方向，同时开启，得到了酷似莫比乌斯环互相循环的效果
效果图

通过此次试验学习到了不少知识，也深刻认识到媒体图像之美也是可以和数理规律息息相关的，值得更加深入的探索。