p5.js临摹动态图形实现方法详解

使用p5.js临摹一个动态图形并作出拓展，供大家参考，具体内容如下

原图形

由内向外，白色圆的半径依次增大，黑色圆的半径不变；
白色圆在上一个白色圆碰到之前就开始增大半径；
图中只能存在一个周期的变化；

临摹图形

使用P5.js，依照上文的规律进行临摹

画12对圆；
相邻圆之间半径差为25；
白色圆半径以周期为60帧的正弦函数的正数值部分变化，变化幅度为22；
相邻白色圆运动函数相位差为13帧；

代码如下：

function setup() {
 createCanvas(400, 400);
 frameRate(30)//图形设为30帧
}

function draw() {
 background(0);

 for(i=12;i>0;i--)//一共12对圆
 {
 y=22*sin(PI*frameCount/30-13*(i-1));//相邻白色圆运动函数相位差为13帧
 if(y>=0)
 {
  a=y;
 }
 else
 {
  a=0;
 }
 fill(255);
 ellipse(200,200,a+50*i);//白色圆
 fill(0);
 ellipse(200,200,25+50*(i-1));//黑色圆
 }
}

拓展图形

图形向外扩散的感觉是因为相邻的白色圆相位差为13帧，改变相位差可实现改变视觉效果

function setup() {
 createCanvas(400, 400);
 frameRate(30)
}

function draw() {
 background(0);

 for(i=12;i>0;i--)
 {
 y=22*sin(PI*frameCount/30-12*(i-1));//相位差设为12
 if(y>=0)
 {
  a=y;
 }
 else
 {
  a=0;
 }
 fill(255);
 ellipse(200,200,a+50*i);
 fill(0);
 ellipse(200,200,25+50*(i-1));
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • p5.js临摹动态图形的方法

    本文实例为大家分享了p5.js临摹动态图形的具体代码,供大家参考,具体内容如下 一.描述所临摹图像的规律 1.图像由多个闪光圆点和圆点之间的连线组成 2.圆点的运动轨迹是随机的 3.圆点之间靠近时会产生连线,并且相互靠近的圆点会颜色加深 二.代码实现 圆点之间产生连线,随机生成线条和运动轨迹: //随机生成s.n条线位置信息 for (var t = [], p = 0; s.n > p; p++) { var h = random() * r, //随机位置 g = random() * n,

  • p5.js临摹旋转爱心

    p5.js临摹旋转爱心

    运用p5.js临摹旋转爱心,供大家参考,具体内容如下 原图 我的临摹 效果不错的样子,让我们看看实现过程. 第一步.分析原图GIF 因为原图中旋转速度较快,无法用肉眼直观地找到规律.所以我把gif分解,共90帧,一帧一帧的寻找旋转规律. 从上往下顺序,第一层到第六层.从简单的说起. 第六层:逆时针匀速旋转一圈. 第五层:先逆时针旋转α,速度由v1变为0.再顺时针旋转180°+2α,速度由0变为v2,再变为0.最后逆时针旋转α,速度由0变为v1.(观察原图,我将α设为30°0) 第四层:先逆时针旋

  • 使用p5.js临摹动态图片

    使用p5.js临摹动态图片

    本文实例为大家分享了p5.js临摹动态图片的具体代码,供大家参考,具体内容如下 1.临摹图片 2.图像运动规律 原图中一共有36个等大的四分之三圆形,按照一定的规律转动,可以等效为圆形不动,每个圆上有以其半径为边长的矩形在绕圆形的原点转动,每四个为一组,其他部分都是在重复这四个的转动规律 3.完整代码 function setup() { createCanvas(402,402); } function draw() { background(0); var dx=0; dx+=PI/180;

  • 使用p5.js实现动态GIF图片临摹重现

    使用p5.js实现动态GIF图片临摹重现

    前言 根据互动媒体技术老师的实验要求,临摹了一张GIF动态图,使用p5.js进行重现. 博客里面会有实现逻辑以及实现代码,在最后还会有一张自己实现的扩展图. 原图 实现步骤 规律总结 1.观察图片可以看到,整个图是由两个部分组成的,其中一个是棍状体,一个是螺旋状体. 2.棍状体从外到内越来越窄,整个图形在做绕固定旋转圆心的匀速圆周运动. 3.螺旋状体也是在做绕固定旋转圆心的匀速圆周运动. 4.螺旋状体的旋转角速度比棍状体的旋转角速度大. 具体实现逻辑 为了方便分析,我截取了一个静态的瞬间: 那么

  • p5.js实现动态图形临摹

    p5.js实现动态图形临摹

    p5.js实现动态图形临摹的具体代码,供大家参考,具体内容如下 临摹的动态图形 对于动态图形临摹主要在于从图形中寻找规律,包括颜色变化.空间变化.几何关系.数学规律等等,把握规律之后才可以还原图形,同时,添加新的规律也会出现不一样的效果. 观察规律 1.空间分布:整体由5行5列形状大小相同的圆构成 2.颜色规律:在与对角线平行的同一线上的所有小球颜色相同 3.单个圆动态变化规律:逐渐被掩盖后又逐渐出现,掩盖过程为匀速过程 4.整体动态变化规律:自右上到左下依次进行个体的动态变化,在与对角线平行的

  • 使用p5.js临摹动态图形

    使用p5.js临摹动态图形

    一.临摹 最近正在学习用代码绘图,于是按照下面的动态图形自己临摹了一幅图形 临摹结果 观察发现,整个图案都是由基础的正六边形组成 首先创建一个画布 function setup() { createCanvas(400, 400); } 画六边形的函数为 function polygon(x, y, radius, npoints) {//绘制正多边形函数 let angle = TWO_PI / npoints; beginShape(); for (let a = 0; a < TWO_PI

  • p5.js临摹动态图形实现方法详解

    使用p5.js临摹一个动态图形并作出拓展,供大家参考,具体内容如下 原图形 由内向外,白色圆的半径依次增大,黑色圆的半径不变: 白色圆在上一个白色圆碰到之前就开始增大半径: 图中只能存在一个周期的变化: 临摹图形 使用P5.js,依照上文的规律进行临摹 画12对圆: 相邻圆之间半径差为25: 白色圆半径以周期为60帧的正弦函数的正数值部分变化,变化幅度为22: 相邻白色圆运动函数相位差为13帧: 代码如下: function setup() { createCanvas(400, 400); f

  • js显示动态时间的方法详解

    js显示动态时间的方法详解

    本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的

  • JS获取动态添加元素的方法详解

    本文实例讲述了JS获取动态添加元素的方法.分享给大家供大家参考,具体如下: 在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: 1.  在模板引擎里面添加行内事件 2.  利用事件的委托获取(常用) 3.  在ajax的监听响应完成函数后面获取 一 在模板引擎里面添加行内事件 添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素. <!-- 1.准备一个模板 --> <script id=&q

  • 基于js对象,操作属性、方法详解

    一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很

  • 原生js封装的一些jquery方法(详解)

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl

  • C# / VB.NET 在PPT中创建、编辑PPT SmartArt图形的方法详解

    本文介绍通过C#和VB.NET程序代码来创建和编辑PPT文档中的SmartArt图形.文中将分两个操作示例来演示创建和编辑结果. 使用工具:Spire.Presentation for .NET hotfix 5.9.5 Dll文件引用: 方式1:下载包.下载后,解压,打开Bin文件夹,根据自己用的.NET Framework选择相应的文件夹,如:此示例中使用的是NET4.0,即打开NET4.0文件,找到Spire.Presentation.dll文件.找到dll文件后,在vs程序中添加引用该d

随机推荐