使用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 相关文章推荐
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
JavaScript对象原型链原理详解
Feb 05 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
vuex实现简易计数器
2016/10/27 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
js实现日历的简单算法
2017/01/24 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
three.js搭建室内场景教程
2018/12/30 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python自动安装pip
2014/04/24 Python
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python常用小技巧总结
2015/06/01 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
django 外键model的互相读取方法
2018/12/15 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
煤矿安全协议书
2014/08/20 职场文书
个人股份合作协议书
2014/10/24 职场文书
幼儿园个人总结
2015/02/28 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python