使用p5.js临摹动态图片


Posted in Javascript onNovember 04, 2019

本文实例为大家分享了p5.js临摹动态图片的具体代码,供大家参考,具体内容如下

1、临摹图片

使用p5.js临摹动态图片

2、图像运动规律

原图中一共有36个等大的四分之三圆形,按照一定的规律转动,可以等效为圆形不动,每个圆上有以其半径为边长的矩形在绕圆形的原点转动,每四个为一组,其他部分都是在重复这四个的转动规律

3、完整代码

function setup() 
{ 
 createCanvas(402,402); 
}
function draw()
{
 background(0); 
 var dx=0; 
 dx+=PI/180;
 var t=(millis()/5)*sin(dx);//返回自程序开始的毫秒数
 if(dx==PI) 
 { 
  dx=0;
 } 
 
 for(var i=0;i<6;i++)//每行每列六个圆形
 {  
  for(var j=0;j<6;j++)
  { 
   fill(255); 
   ellipse(i*66+36, j*66+36, 60, 60);//绘制半径30的圆形,间隔6
   fill(0); 
   translate(i*66+36, j*66+36);//矩形的移动,共四种运动状态
   if(i%2==0&&j%2==0) 
   {  
    rotate(-t); //逆时针旋转
    rect(0,0,30,30);//旋转的边长30黑色矩形
   }  
   else if(i%2==1&&j%2==0)
   { 
    rotate(t);//顺时针旋转
    rect(-30,0,30,30); 
   }  
   else if(i%2==1&&j%2==1) 
   {  
    rotate(-t); 
    rect(-30,-30,30,30); 
   }  
   else if(i%2==0&&j%2==1)
   {  
    rotate(t);
    rect(0,-30,30,30); 
   }  
   resetMatrix(); 
  } 
 }
}

4、临摹结果

使用p5.js临摹动态图片

5、拓展图像

使用p5.js临摹动态图片

运动规律:

一段螺旋型的运动弧线,中心颜色较深,越向外颜色越浅,形成一种线在向中心运动的趋势。绘制时是由无数个没有边框的圆形一起按照规律运动,形成线。

完整代码:

function setup()
{
 createCanvas(500, 500);
 noStroke(); 
}
function draw() {
 background(0); 
 for (var i =1;i <3000; i++)
 {
  drawcircle(255-0.1*i,255-0.1*i,255-0.1*i, i); 
  i++;
 }
}
function drawcircle( r, g, b, interval){
 fill(r, g, b);
 var x = 250; 
 var y = 250; 
 var t = millis() /3+ interval *0.5;
 var xi;
 var yi;i
 var radius = interval *15;
 xi = 0.01*radius * Math.cos(t * Math.PI/180);
 yi = 0.01*radius * Math.sin(t * Math.PI/180); 
 x += xi;
 y += yi;
 ellipse(x, y, 20,20);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
javascript时间函数大全
Jun 30 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
p5.js绘制创意自画像
Nov 04 #Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 #Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 #Javascript
vue中使用GraphQL的实例代码
Nov 04 #Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 #Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 #Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 #Javascript
You might like
PHP脚本中include文件出错解决方法
2008/11/20 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
jupyter notebook 多行输出实例
2020/04/09 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
在职研究生自我鉴定
2013/10/16 职场文书
个人求职简历的自我评价
2013/10/19 职场文书
银行授权委托书范本
2014/10/04 职场文书
解除施工合同协议书
2014/10/17 职场文书
教师个人师德总结
2015/02/06 职场文书
2015年暑假生活总结
2015/07/13 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书