动态图形原图

本次选择临摹图形为该图

原图分析

可以看出，图形底层由六行六列一共36个圆形组成，每个圆形之间有一定的空隙，并不是完全贴合。每个圆中可以看到有一个黑色的扇形在旋转，扇形一共有两种旋转模式，即顺时针与逆时针。

认真观察后可以发现扇形的旋转速度是符合正弦函数的，而且在每半个正弦周期内扇形旋转的角度是 PI/2，即90°。简单点说就是扇形在转过90°的过程中，速度从0变大再变成0.

代码分析与公式推导

分析

整篇代码值得说的地方不多，临摹中遇到的最困难的问题就是如何实现扇形旋转时速度呈现正弦变换，而且关键在于旋转角度刚好要是90°。实现如上效果其实只需要两行代码，但是涉及到了高数知识，而且刚开始时思路没理清，一直调整不好旋转角度，花了挺多时间。

  c = frameCount/(4*PI);angle1 = angle1 + 1/16*abs(sin(c));

画扇形的代码如下

arc(50+200*j,50+200*i,95,95,-angle1,HALF_PI-angle1);

angle1是扇形旋转的角度，这里让角度一直递增，所求关键就在于每次的递增量。

推导

因为想了很久，尝试了很多次都没办法用更简单的数学公式实现同样的功能，所以这里使用了高等数学中微积分的知识，我感觉应该是可以用更简单的方法实现的，若是读者们有思路可以评论区告知一二。

成果展示

临摹

拓展作品

拓展1

在这里只要在arc函数绘制时，将起点与终点的angle1增加方向置反即可。

      arc(50+200*j,50+200*i,95,95,-angle1,HALF_PI+angle1);

拓展2

在拓展1的基础上，将每组扇形的颜色与frameCount关联即可。

  n = ceil(frameCount)%360; fill(n/2,0,0);

具体函数请参考官方文档 https://p5js.org/reference/

p5.js动态图形临摹以及拓展相关推荐

P5.js动态图形描摹以及拓展
创意编程作业主题:从参考资料中的"动态图形艺术"中选取不少于1幅作品,用编程方式临摹,并进行拓展从中选取的图片为: 每一个都是四个圆构成的一个框架,中间是一个正方形分成四个扇形 ...
互动媒体技术——基于p5.js实现动态图形临摹与拓展：炫彩光影的千变万化！
博文索引目录: 1. 引言 2. 临摹结果对比 3. 临摹过程 3.1 准备工作 3.2 原图规律--语言描述 3.3 原图规律--数学与代码描述 3.4 完整代码 4. 创意拓展 4.1 拓展一-- ...
【p5.js】作业一——动态图形临摹
动态图形临摹创意编程作业主题临摹作品观察规律代码实现改进拓展总结创意编程作业主题从参考资料中的"动态图形艺术"中选取不少于1幅作品,用编程方式临摹,并进行拓展 ...
互动媒体作业一——动态图形临摹
互动媒体作业一--动态图形临摹本次码绘作业我选了星空图,首先声明所用到的变量.数组等,然后在setup函数中初始化,在draw函数中不断进行码绘,设置每秒30个画面.星星是我随机生成的,并且让他们做 ...
p5.js 动态的表达与趣味
码绘是一个挺有争议的东西.很多人觉得它很麻烦,难度很大,门槛很高.其实想想,也许只是因为陌生. 与码绘相对应的是手绘,很多人包括之前的我,都觉得用笔画不需要什么基础都可以,笔随心动,不受束缚,而且人人 ...
老慜的A5作业——p5.js 动态、周期、随机、面向对象
A5 "运动"主题的创意编程习作终于到了这学期最后一个编程习作了,来看看最后这学期都憋出来什么玩意吧! A4pluse,上次作业中对蝴蝶的飞舞动作进行了优化,并且增加了一些环境细 ...
p5.js动态自画像
自画像展示由于本人喜欢看国产动画片<大耳朵图图>,里面图图有一个特异功能就是可以动耳朵,所以本次自画像在本人形象的基础上加入交互元素--耳朵可以跟随鼠标光标的移动而移动. 以下为静态形象 ...
雪梨小白的“码绘”起步——p5.js实现心形动态图形的绘制
作为一个快乐的程序媛,尤其还是一个快乐的树莓程序媛,当然应该什么都会!所以这学期学院开了很多偏艺术类的课程让我们学习,然后就开始了互动媒体这门课的学习.这一次的作业要利用p5绘制动态图形,我自己还真的 ...
p5.js实现动态旋转的小球
实验要求: 从给出的参考资料中的"动态图形艺术"中选取不少于1幅作品,用编程方式临摹并进行拓展.编程语言推荐p5,processing.写一篇文章发表为博文.推文等形式,描述从原作 ...

p5.js动态图形临摹以及拓展