p5.js创意绘图(1)动态图形

利用p5.js临摹一幅动态图形。
原图

分析
看起来像是两个葫芦在转圈，其实每个圆点并没有旋转，只是在以图形中心为原点的射线上来回移动。长瘦葫芦上的圆点移动的周期是短胖葫芦上的圆点移动的周期的两倍，且长瘦葫芦上的圆点的初相位与短胖葫芦上的圆点的初相位相差PI。
因此其实就是每个圆点与图形中心距离按正弦函数随时间发生变化，且每个圆点的初相位与其极坐标下（以图形中心为原点）的角度有关。
(△t:时间变量；△θ,:角度变量；max:与图形中心最大距离；min:与图形中心最小距离）
短胖葫芦上的圆点：r1=sin(△t+3/2.0×PI+△θ×2)×(max1-min1)+min1;
长瘦葫芦上的圆点：r2=sin(△t+1/2.0×PI+△θ×2)×(max2-min2)+min2;
(因为每圈圆点拼成的图形（葫芦）有两个头，所以△θ要乘2。)
再利用极坐标与直角坐标的关系：x=rcosθ,y=rsinθ，可计算出每个圆点的直角坐标。
画图
由上述分析可得代码：
先设全局变量rt作为时间变量

var rt=0

再在draw()函数内

    dt=0;for(i=1;i<=num;i++)//num为一圈上圆点个数{r1=sin(rt+3/2.0*PI+dt*2)*(max1-min1)+min1;r2=sin(2*rt+1/2.0*PI+dt*2)*(max2-min2)+min2;x1=r1*cos(dt)+400;//图形中心:(400,400)y1=r1*sin(dt)+400;x2=r2*cos(dt)+400;y2=r2*sin(dt)+400;ellipse(x1,y1,2*r,2*r);ellipse(x2,y2,2*r,2*r);line(x1,y1,x2,y2);dt+=TWO_PI/num;}rt+=0.02;

效果图

拓展

形状变化
（1）改变圆点与图形中心距离的最大/最小值，可以改变整体形状。如将min2调小，可以使长瘦葫芦的两个头相交。
（2）改变角度变量的变化速度，可以改变每圈圆点拼成图形的头数。如将dt*2变为dt*4，会变成四角星（每圈圆点各四个头）。
颜色变化
利用colorMode()函数，可以使圆点颜色按色相环排列。

    colorMode(HSB,num);for(i=1;i<=num;i++){fill(i,num,num);stroke(i,num,num);...}

若再让颜色与时间变量相关，则颜色也能转动。

    colorMode(HSB,num);for(i=1;i<=num;i++){fill((i+rt*50)%num,num,num);stroke((i+rt*50)%num,num,num);...}

3.线交叉
其实这是笔者最开始规律找错的失败版本，但是图形还是挺好看的。基本思路就是圆点绕图形中心旋转，两个葫芦上的圆点沿反方向旋转。

总结
代码和图形两个看起来风马牛不相及的东西却能形成这么有趣的联系，实在神奇。

p5.js创意绘图(1)动态图形相关推荐

用p5.js编写简单的动态图形——波纹扩散
用p5.js编写简单的动态图形--波纹扩散第一次使用p5.js写程序,如有错误请指出,多多指教. 没有下载p5.js的小伙伴可以直接使用网页版的,简单注册一个账号之后就可以保存代码啦. 网站:htt ...
【p5.js】作业一——动态图形临摹
动态图形临摹创意编程作业主题临摹作品观察规律代码实现改进拓展总结创意编程作业主题从参考资料中的"动态图形艺术"中选取不少于1幅作品,用编程方式临摹,并进行拓展 ...
雪梨小白的“码绘”起步——p5.js实现心形动态图形的绘制
作为一个快乐的程序媛,尤其还是一个快乐的树莓程序媛,当然应该什么都会!所以这学期学院开了很多偏艺术类的课程让我们学习,然后就开始了互动媒体这门课的学习.这一次的作业要利用p5绘制动态图形,我自己还真的 ...
p5.js创意绘图(2)自画像
利用p5.js画一幅自画像,效果如下: 1.按下键盘"M"(music)键,音乐停止播放:再次按下"M"键,音乐重新开始播放. 2.按下键盘"S&qu ...
P5.js创意编程之自我介绍
P5.js创意编程之自我介绍构思作为一个树莓人,熬夜修仙就是条必走之路那就画个修仙老头??? 先画草图吧敲代码环节就像图上那样,无非就算各种坐标过程超级繁琐就直接粘代码了 functio ...
p5.js创意编程——Q版人像绘制
目录主要函数介绍贝塞尔曲线 Shape frameRate 完整代码实现效果主要函数介绍贝塞尔曲线如图,是p5.js官方reference上关于贝塞尔曲线的说明,一次可以画出一条贝塞尔曲线 ...
p5.js 2.0绘制一幅动态图像
2.0 p5.js 绘制一幅动态图像 1.关于码绘实现动态图像的思考 2.明确作品类型 3.彩虹猫动画的实现 4.手绘和动态的思考 5.参考资料 1.关于码绘实现动态图像的思考上一次我们实现了用静态 ...
p5.js 光速入门中文教程
本文简介点赞 + 关注 + 收藏 = 学会了本文的目标是和各位工友一起有序的快速上手 p5.js ,会讲解 p5.js 的基础用法. 本文会涉及到的内容包括: 项目搭建 p5.js 基础2D图形 ...
超炫酷｜一堂课带你入门 p5.js 数字艺术新世界！
一提起程序员,人们往往会脑补出一副双肩包.格子衫.脱发的画面,同时将程序员和「不修边幅.毫无美感」等糟糕的词汇联系了起来-- 但事实真的如此吗? 事实是: 我们不脱发程序员的脱发比例是各行业中较低的 ...

p5.js创意绘图(1)动态图形

p5.js创意绘图(1)动态图形相关推荐

最新文章

热门文章