p5.js对动态图形的临摹与创作

p5.js是个很方便的图形编程器,甚至可以线上编写,作为一名初学者,我在这里对一幅动图进行临摹

这是原图:

看似很简单的动图,其实有很多规律


下面进行分析:

首先这36个圆其实是270度扇形,一共只有4种旋转方式,这都很简单

旋转我打算用rotate来实现,事实上这个判断是错的,因为之后我才知道,rotate的作用太局限了,可费劲死我了

我们创建这4种扇形,因为我是用rotate实现旋转,所以创建的扇形都在原点(0,0)处,之后再将它们移动到相应位置:

arc(0,0,100,100,0,PI+HALF_PI);

arc(0,0,100,100,PI+HALF_PI,PI);

arc(0,0,100,100,HALF_PI,0);

arc(0,0,100,100,PI,HALF_PI);

每一种扇形又一种旋转方式,我们再研究一下旋转方式:

可以发现,每一个扇形不是匀速转动,而是先快后慢,这很简单就能想到与三角函数有关,这里我打算采用sin函数的积分

与此同时,扇形旋转在每旋转90度都会停下,这要求我们改造一下所求的三角函数

将三角函数换为下面的样子

if (sin(c)>=0){

    a=sin(c);

  }

  if (sin(c)<0){

    a=0;

  }

这样就行了

此时出大问题了,上面说到过,rotete太局限了,它只能绕原点旋转,然后,最烦的一点,无法取消它的影响,也就是说,第二个扇形在正常旋转同时,它仍然会绕原点转动

此时我用了push与pop,解决了这个问题

但是

与此同时,每一次rotate的旋转的参数d的实际效果竟然是所有我设的rotate(d)的累加,也就是说每有一个扇形,就会使所有扇形旋转角度多一倍

我实在搞不太懂rotate,它太龙鸣了,最后我只能按36个扇形,设了36个参数,代码也受此影响飙到了将近900行,其实本来2,30行就能解决,之后的代码也不好进行修改了

好了,调整一些刷新速度和旋转速度,进行数学计算,这样每一个扇形的代码如下(要36个...):

c=frameCount/(4*PI);

  if (sin(c)>=0){

    a=sin(c);

  }

  if (sin(c)<0){

    a=0;

  }

  d+=1/16*a;

  rotate(d);

  fill(220,220,210); 

  arc(0,0,100,100,0,PI+HALF_PI);

剩下的就很好解决了,以下是输出结果:

听还原的了(900行代码呢可)


下面进行稍微修改代码,将背景进行霓虹化(这rotate搞得我也没办法搞别的新花样了):


let b=38;

let n=38;

let m=38;

if(b<255){

    b=b+1;

  }

  else{b=38;}

 if(n<255){

    n=n+1.5;

  }

  else{n=38;}

 if(m<255){

    m=m+1.7;

  }

  else{m=38;}

 

  background(m,n,b);

结果如下:

霓虹霓虹


原创自画像就放在下一个专栏啦


本文为我原创

本文禁止转载或摘编

-- --
  • 投诉或建议
评论