使用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操作JSON的要领总结
Dec 09 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 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
jquery插件制作教程 txtHover
2012/08/17 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
python批量修改ssh密码的实现
2019/08/08 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
大学生简历的个人自我评价
2013/12/04 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
大学生工作求职信
2014/06/23 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
新手入门Mysql--概念
2021/06/18 MySQL
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫