使用p5.js临摹动态图形


Posted in Javascript onOctober 23, 2019

一、临摹

最近正在学习用代码绘图,于是按照下面的动态图形自己临摹了一幅图形

使用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; a += angle) {  
  let sx = x + sin(a) * radius;
  let sy = y + cos(a) * radius;
  vertex(sx, sy);
 }
 endShape(CLOSE);
}

x,y分别表示六边形的位置,radius表示图形的边长,npoints表示图形的边数

发现六边形一直在绕着自己的中心旋转,并未发生其他变换,因此只需要将六边形批量创建,并使它不断旋转即可。

通过循环以及平移函数画出六边形

通过translate函数不断更改六边形的中心位置,

使用p5.js临摹动态图形

通过时间函数,达到不断旋转的效果

完整代码如下

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background(10,10,10);
 var t=millis()/2000;
fill(123,0,0);
   for(var j=0;j<=4;j++){
  for(var h=0;h<=4;h++){
     push();
     translate(width *(0.1+j*0.2),height*(0.17+h*0.34));
    rotate(t);
     polygon(0,0,40 ,6);    
     pop();
    }  
 }
 for(var i=0;i<=5;i++){
   for(var k=0;k<=5;k++){
   
     push();
     translate(width *i*0.2,height*k*0.34);
    rotate(t); 
      polygon(0,0,40 ,6);     
     pop();
   }
  }
  
 }

function polygon(x, y, radius, npoints) {//绘制正多边形函数
 let angle = TWO_PI / npoints;
 beginShape();
 for (let a = 0; a < TWO_PI; a += angle) {  
  let sx = x + sin(a) * radius;
  let sy = y + cos(a) * radius;
  vertex(sx, sy);
 }
 endShape(CLOSE);
}

效果图

使用p5.js临摹动态图形

图形改编

只做了微小的改变,颜色可以随机切换,且有一个由小变大的过程

使用p5.js临摹动态图形

代码如下

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background(0,10,200);
var t=5*millis()/1000;

//fill(211,0,0);
   for(var j=0;j<=4;j++){
  for(var h=0;h<=4;h++){
     push();
     translate(width *(0.1+j*0.2),height*(0.17+h*0.34));
     rotate(frameCount / 22.0);
     let c2=random(100,255);
   
   fill(0,c2,0);  
    if (t<50)
    {polygon(0,0,t ,6);}
     if(t>50)
    {
     fill(255,0,0);
     polygon(0,0,50 ,6);
    }

     pop();
    }
  
 }
 for(var i=0;i<=5;i++){
   for(var k=0;k<=5;k++){
   
     push();
     translate(width *(0+i*0.2),height*(0+k*0.34));
     rotate(frameCount / 22.0);
     let c2=random(100,255);
  
   fill(0,c2,0);  
    if (t<50)
    {polygon(0,0,t ,6);}
    if(t>50)
    {
     fill(0,255,0);
      polygon(0,0,50 ,6);
     }
    
     pop();
   }
  }
  
 }

function polygon(x, y, radius, npoints) {//绘制正多边形函数
 let angle = TWO_PI / npoints;
 beginShape();
 for (let a = 0; a < TWO_PI; a += angle) {  
  let sx = x + sin(a) * radius;
  let sy = y + cos(a) * radius;
  vertex(sx, sy);
 }
 endShape(CLOSE);
}

总结

本次实验让我对代码编程有了初步的了解,逐渐学回了分析问题和解决问题,虽然目前解决的都还是很简单的问题。做的图形也不够有创意,这门课程很有意思,希望后面自己可以抽出更多的时间来进行学习。

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

Javascript 相关文章推荐
YUI的Tab切换实现代码
Apr 11 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
前台js调用后台方法示例
Dec 02 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 #Javascript
p5.js临摹动态图形实现方法详解
Oct 23 #Javascript
jQuery实现轮播图源码
Oct 23 #jQuery
JavaScript实现图片轮播特效
Oct 23 #Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 #Javascript
Vue实现数据请求拦截
Oct 23 #Javascript
You might like
调整PHP的性能
2013/10/30 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python中字符串List按照长度排序
2019/07/01 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
python中类与对象之间的关系详解
2020/12/16 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
餐厅筹备计划书
2014/04/25 职场文书
公司员工安全协议书
2014/11/21 职场文书
公司宣传语大全
2015/07/13 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers