p5.js 毕达哥拉斯树的实现代码


Posted in Javascript onMarch 23, 2018

本文介绍了p5.js 毕达哥拉斯树的实现代码,分享给大家,具体如下:

效果如下:

p5.js 毕达哥拉斯树的实现代码

主要方法

  1. translate()
  2. rotate()
  3. rect()
  4. push()
  5. pop()
  6. map()

主要思想

递归

草图

p5.js 毕达哥拉斯树的实现代码

过程分解

一、毕达哥拉斯树的递归函数

function Pythagorian(x){
 noStroke();
 fill(107, 142, 35,map(x, 0, a, 150, 255));//根据正方形边长设置填充色
 rect(0,0,x,x);//绘制当前的正方形
 
 if(x <= 3) return 0;//当正方形边长小于3时,结束递归

 /* 绘制右上角的正方形 */ 
 push();
 rotate(PI / 2 - t);//坐标轴顺时针旋转约37deg
 translate(0,-x/5 * 3 - x/5*4);//坐标轴向上平移3边+4边的长度
 Pythagorian(x/5*4);//递归调用毕达哥拉斯函数
 pop();
 
 /* 绘制左上角的正方形 */
 push();
 rotate( - t);//坐标轴逆时针旋转约53deg
 translate(0,-x/5 * 3);//坐标轴向上平移3边的长度
 Pythagorian(x/5*3);//递归调用毕达哥拉斯函数
 pop(); 
 
}

二、声明变量、创建画布

var a = 100; //最大正方形边长
var t;//4边所对应的角度
function setup(){
 t = 53.1301024 / 360 * 2 * PI;//约为53deg
 createCanvas(windowWidth, windowHeight);//创建画布
 background(255);
 noLoop();//draw()函数只执行一次
}

三、开始绘制毕达哥拉斯树

function draw(){
 translate(windowWidth/2, windowHeight - a * 2);//将坐标系平移至画布中间底部
 Pythagorian(a);//调用毕达哥拉斯递归函数
}

绘制毕达哥拉斯树完整代码

var a = 100;
var t;
function setup(){
 t = 53.1301024 / 360 * 2 * PI;
 createCanvas(windowWidth, windowHeight);
 background(255);
 noLoop();
}
function draw(){
 translate(windowWidth/2, windowHeight - a * 2);
 Pythagorian(a);
 
}
function Pythagorian(x){
 noStroke();
 fill(107, 142, 35,map(x, 0, a, 150, 255));
 rect(0,0,x,x);
 
 if(x <= 3) return 0;
 
 push();
 rotate(PI / 2 - t);
 translate(0,-x/5 * 3 - x/5*4);
 Pythagorian(x/5*4);
 pop();
 
 push();
 rotate( - t);
 translate(0,-x/5 * 3);
 Pythagorian(x/5*3);
 pop(); 
 
}

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

Javascript 相关文章推荐
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 #Javascript
浅谈Webpack 持久化缓存实践
Mar 22 #Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 #Javascript
Java设计中的Builder模式的介绍
Mar 22 #Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 #Javascript
收集前端面试题之url、href、src
Mar 22 #Javascript
vue 的keep-alive缓存功能的实现
Mar 22 #Javascript
You might like
用header 发送cookie的php代码
2007/03/16 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python 使用get_argument获取url query参数
2017/04/28 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
浅析Python 条件控制语句
2020/07/15 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
公司业务员岗位职责
2014/03/18 职场文书
党风廉政建设责任书
2014/04/14 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
青春奉献演讲稿
2014/05/08 职场文书
农业生产宣传标语
2014/10/08 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书