p5js基础动图临摹及创新

p5js基础动图临摹及创新

一、临摹图

1、临摹的动态图形为正方形的旋转，如图所示：

2、这个动态图形是在36个圆形上由36个正方形绕圆心进行逆时针、顺时针旋转，在旋转过程中进行了重合组成大的正方形。

二、临摹步骤

1、首先创建画布600*600，先利用for循环和ellipse()画圆形

// An highlighted block
fill(255)
  let i=50;
  let y=50;
  for(let j=0;j<=5;j++)
  {
    for(let i=50;i<=550;i=i+100)
  {
   
    ellipse(i,y,90,90);
  }
   y=y+100;
  }

2、用rect()画正方形。这里就遇到第一个问题。正方形总是绕原点旋转的，因此要不停的更改原点坐标以达到绕圆心旋转。选定某一时刻作为参考图。可以确定的是，他们的旋转中心都是每个圆的圆心，因此translate()函数内就必定为圆心坐标。先确定原点，在进行矩形坐标的计算（一定要选定一张图作为参考，因为他的起点涉及到后边正方形能否重合）。
3、然后会遇到第二个问题，因为进行了不断地translate()修改原点坐标，因此36个矩形会坐标凌乱。我使用了push()和pop()函数。Push()函数将储存当时的绘画样式设置及变形，而pop()函数将恢复这些设置。Push()和pop()函数可以被重复嵌入以提供更复杂的控制。
因此，我在画矩形的时候用push()和pop()将步骤包含起来，以达到隔绝彼此，这样出来的图形就是整整齐齐了。

4、接下来要让他转动起来。Rotate()将一个形状根据参数所定义的角度旋转。Millis()是一个计时器，返回自程序开始以来的毫秒数。将这两个函数组合在一起rotate(millis()/1000);即可达到旋转效果。-millis()为逆时针旋转，millis()顺时针旋转。
5、遇到的问题是我的图形不由停顿的感觉，原图是一种加速静止，加速静止的感觉。应该可以用sin()正弦函数做。
6、这个动态图形基本没有涉及数学相关函数，我觉得更重要的是坐标系的转换吧。

三、拓展作品

1、作品图如下。


2、源码：

// An highlighted block

let a = 0.0;
let s = 0.0;
let d=  0.0;
function setup() {
   
  createCanvas(400, 400);
  noStroke();
}

function draw() {
   
  background(0);

  a