使用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 相关文章推荐
js列举css中所有图标的实现代码
Jul 04 Javascript
jquery 插件学习(四)
Aug 06 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
PR值查询 | PageRank 查询
2006/12/20 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Python字符串的一些操作方法总结
2019/06/10 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
自我评价怎么写正确呢?
2013/12/02 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
房产委托公证书
2014/04/08 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫