创意编程-动态图形临摹

最新推荐文章于 2022-05-23 23:07:52 发布

衡兔阳。

最新推荐文章于 2022-05-23 23:07:52 发布

阅读量385

点赞数 1

分类专栏：互动媒体技术文章标签： p5.js 图形编程

本文链接：https://blog.csdn.net/weixin_43913978/article/details/102654276

版权

这篇博客介绍了如何使用p5.js库临摹并拓展动态图形艺术作品。作者从简谐运动的数学原理出发，详细解析了如何编程实现小圆点的简谐运动，包括图形的中心发散、不同相位造成的时差感。通过调整相位差，创造出不同的视觉效果，如改变相位差为π/4，形成两个‘凸起’，或者在图形旋转的基础上再调整相位差。博客重点讨论了代码实现过程中的难点和解决方法，特别是JavaScript全局变量的应用。

摘要由CSDN通过智能技术生成

主题
从参考资料中的“动态图形艺术”中选取不少于1幅作品，用编程方式临摹，并进行拓展。
所选图形
提炼规律

仅仅观察一个小圆点，不难看出其在做简谐运动，且运动的原点固定
整体来看，一共16个小圆点，每个小圆点的运动轨迹呈现中心发散状，每个小圆点的简谐运动中心可以连成一个圆
每个小圆点做简谐运动的初相位不同，造成了小圆点运动的时差感
简谐运动公式y=Acos(ωt+φ)，极坐标直角坐标转换公式x=ρcosθ，y=ρsinθ

实现思路

实现一个小圆点的简谐运动图形
实现16个小圆点初相位相同时的运动图形
更改每个小圆点的初相位，完成图形

具体代码
注：采用p5.js来实现

let alpha = 0.0;//简谐运动
let beta = 0.0;//每个小圆点轨迹夹角
let delta = 0.0;//相位差
//颜色索引
var colindex = 0;
var array = new Array(16);

function setup() {
   
  // put setup code here
  createCanvas(600,600);//创建画布
  noStroke();//图形无边框 
  //初始化颜色表
  array[0] = color(255 ,0 ,0);
  array[1] = color(255 ,96 ,0);
  array[2] = color(255 ,190 ,0);
  array[3] = color