使用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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Python多线程的退出控制实现
2020/08/10 Python
Python 高效编程技巧分享
2020/09/10 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
盛大笔试题
2016/11/05 面试题
linux比较文件内容的命令是什么
2015/09/23 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
会计实习生自我鉴定
2013/12/12 职场文书
四则混合运算教学反思
2016/02/23 职场文书
话题作文之诚信
2019/11/28 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis