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

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

效果如下：

主要方法

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

主要思想

递归

草图

过程分解

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

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(); 

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • p5.js实现斐波那契螺旋的示例代码
  • 用p5.js制作烟花特效的示例代码
  • p5.js入门教程之图片加载
  • p5.js入门教程之键盘交互
  • p5.js入门教程之鼠标交互的示例
  • p5.js入门教程之平滑过渡(Easing)
  • p5.js入门教程之小球动画示例代码
  • p5.js入门教程和基本形状绘制
赞 (0)

相关推荐

  • p5.js入门教程之键盘交互

    一.键盘交互相关关键词与函数 keyIsPressed: 关键词,按下按键时为true,反之为false keyCode: 关键词,用于判断按下哪个按键 keyPressed():函数,按键按下时触发一次 keyReleased():函数,按键松开时触发一次 keyIsDown():函数,按下指定按键时返回true,反之为false 以下是一个较综合的案例,用wsad与zxcv控制小球移动: var x=200; var y=200; var speed=2; function setup()

  • p5.js入门教程和基本形状绘制

    一.什么是p5.js 最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js. 主讲老师就是开发者之一--还是挺激动的. p5.js是一个为艺术家.设计师而开发的Javascript库,可以看作是Processing的Web版本.如果有Processing学习经验的话,p5.js上手会非常快. 至于p5.js有什么用,这个问题很难回答,因为我本身也是个初学者. 我目前觉得p5.js是一个很好的激发创意的工具,并且你可以将p5.js的内容嵌入网页,让你的网站更炫. 二

  • p5.js入门教程之图片加载

    一.preload()函数与图片上传 preload()函数是一个特殊的函数,它同setup()类似,只在程序开始时运行一次,但顺序在setup()之前. 一般我们会将媒体文件(图片.声音)加载的语句放在preload()中,因为preload()有一个特性就是不加载完毕,程序就不会开始,保证了程序运行时不会出错. 在加载图片之前,我们需要先将图片文件上传. 方法是: ①点击编辑器左上角的小三角展开文件目录. ②点击文件目录右上角小三角,展开菜单后Add File. ③可以直接将图片文件拖到框里

  • p5.js入门教程之小球动画示例代码

    一.运动的小球 本节将用p5.js做一个在屏幕上运动的小球. 思路是用变量记录小球的位置,然后在draw()函数里对其做出改变,由于draw()函数会不断地运行(频率为FPS,默认60帧/秒),所以小球便产生了运动. 代码如下: var x=0; function setup() { createCanvas(400, 400); } function draw() { background(220); //width和height是关键词,分别是Canvas的宽和高 x+=2; ellipse

  • p5.js入门教程之平滑过渡(Easing)

    一.跟随鼠标移动的小球 使用mouseX,mouseY可以创建一个跟随鼠标移动的小球. function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX,mouseY,20,20); } 二.让小球更加平滑的移动--使用Easing 一般制作精良的UI界面都会用到平滑移动这一效果,也就是利用了名为"Easing"的方法. 实现思路是另外设置变量以进行位置的过渡,代

  • p5.js入门教程之鼠标交互的示例

    本文介绍了p5.js入门教程之鼠标交互的示例,分享给大家,具体如下: 一.鼠标交互常用关键词 p5.js提供了许多鼠标操作用的关键词与函数,常用的有: mouseIsPressed:关键词,若鼠标按下则为true,反之为false mouseButton:关键词,用来判断鼠标按下的是哪个键 案例如下: function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed

  • p5.js实现斐波那契螺旋的示例代码

    p5.js实现斐波那契螺旋的示例代码

    本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码,分享给大家,也给自己做个笔记 效果如下: 主要方法 translate() rotate() arc() 斐波那契螺旋 斐波那契螺旋线也称"黄金螺旋",是根据斐波那契数列画出来的螺旋曲线,以斐波那契数为边的正方形中画一个90度的扇形,连起来的弧线就是斐波那契螺旋. 草图 过程分解 一.定义一个空的斐波那契数组: var Fibonacci = []; 二.初始化 默认情况下draw()函数会无限重复绘图, frameRate()函

  • 用p5.js制作烟花特效的示例代码

    用p5.js制作烟花特效的示例代码

    前言 之前看过一篇文章,使用processing制作烟花特效.效果如下 fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的模拟器上. 不过好在也有对应的web扩展语言,有processing.js和p5.js. processing.js在github上已经好几年没有人维护了,一些processing的特性支持不了.为此踩了不少坑, 本文就集中讲解如何用p5.js写烟花特效. 代码讲解 proces

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

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

    本文介绍了p5.js 毕达哥拉斯树的实现代码,分享给大家,具体如下: 效果如下: 主要方法 translate() rotate() rect() push() pop() map() 主要思想 递归 草图 过程分解 一.毕达哥拉斯树的递归函数 function Pythagorian(x){ noStroke(); fill(107, 142, 35,map(x, 0, a, 150, 255));//根据正方形边长设置填充色 rect(0,0,x,x);//绘制当前的正方形 if(x <=

  • p5.js绘制创意自画像

    p5.js绘制创意自画像

    本文实例为大家分享了p5.js绘制自画像的具体代码,供大家参考,具体内容如下 绘制结果 人物头上的呆毛会一直运动,鼠标出现在画面上时左上角会有一个小猫咪头随着鼠标移动,而且人物的眼睛也会一直看向小猫的方向 代码介绍 整个图全部由贝塞尔曲线,直线和圆组成 贝塞尔曲线的代码结构大概就是 beginShape(); vertex(180,600);//曲线起点 bezierVertex(180,600,300,100,420,600); //第一个控制点坐标,第二个控制点坐标,终点坐标 endShap

  • p5.js码绘“跳动的小正方形”的实现代码

    p5.js码绘“跳动的小正方形”的实现代码

    作业成果展示 实验原理 主要是要实现小正方形的上下来回运动,并且每个小正方形的跳动有一定的时间差视觉上要呈现依次跳动的感觉. 本来我想用一个if语句来实现这个功能!但是想了很久没想到正确的代码--后来经同学提醒用了sin函数!真的很好用! var y1=posY+30sin(t); var y2=posY+28sin(t-1); var y3=posY+26sin(t-2); var y4=posY+24sin(t-3); var y5=posY+22sin(t-4); var y6=posY+

  • p5.js实现故宫橘猫赏秋图动画

    p5.js实现故宫橘猫赏秋图动画

    用p5.js实现一个小动画--故宫橘猫赏秋图 互动媒体第二次作业要求我们手绘一幅动画,再用代码实现出动画.由于时间原因,手绘并没有画动画,而是以插画的形式画了一张,然后p5实现了动画. 这里先放效果图: 板绘插图 码绘效果图 这里强烈建议直接运行代码!!!gif丢帧!!!可怜我的渐变啊啊啊啊!!! 下面附上完整代码: var Width=600; var Height=700; var pixel=1; var Y_AXIS = 1; var X_AXIS = 2; var skyHeight=

  • EasyUI创建人员树的实例代码

    EasyUI创建人员树的实例代码

    最近做了一个树状的下拉列表,在这里记录一下,以后可以直接使用 项目中的树状下拉列表是用来选择人员用的,具体实现展示如下: 先说一说功能,左边的人员数是提供选人的,当点击中间的按钮,选中的人员会直接移到右边,如果要删除已选中的人员,只需要双击右边人的姓名即可,点击确定进行集体的业务逻辑操作,一般就是新增人员到某一个表中. 我们再来看看这个DIV的具体代码,由于项目中在多个地方都使用到了这个人员树,所以我把这个DIV抽象出来当作一个公共的jsp页面.如需调用,只需要include这个jsp即可 us

随机推荐