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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
轻量级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
转PHP手册及PHP编程标准
2006/12/17 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python函数的周期性执行实现方法
2016/08/13 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
抽奖活动主持词
2014/03/31 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书