使用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 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
Javascript实现计算个人所得税
May 10 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
JavaScript实现显示和隐藏图片
Apr 29 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
浅析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
牡丹941资料
2021/03/01 无线电
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
Python 中的 else详解
2016/04/23 Python
全面理解Python中self的用法
2016/06/04 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python数据挖掘需要学的内容
2019/06/23 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
Python如何获取文件指定行的内容
2020/05/27 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
提高python代码运行效率的一些建议
2020/09/29 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
先进个人申报材料
2014/12/30 职场文书