您的当前位置:首页p5.js实现斐波那契螺旋动画步骤详解
广告

p5.js实现斐波那契螺旋动画步骤详解

2023-11-30 来源:旭新科技网
这次给大家带来p5.js实现斐波那契螺旋动画步骤详解,p5.js实现斐波那契螺旋动画的注意事项有哪些,下面就是实战案例,一起来看一下。

效果如下:

主要方法

  1. translate()

  2. rotate()

  3. arc()

斐波那契螺旋

斐波那契螺旋线也称“黄金螺旋”,是根据斐波那契数列画出来的螺旋曲线,以斐波那契数为边的正方形中画一个90度的扇形,连起来的弧线就是斐波那契螺旋。

草图

过程分解

一、定义一个空的斐波那契数组:

var Fibonacci = [];

二、初始化

默认情况下draw()函数会无限重复绘图, frameRate()函数可以设置每秒重复绘图的次数,就像电影每秒播放的帧数。

function setup(){ createCanvas(windowWidth, windowHeight);//创建一块画板,画板的宽高与浏览器宽高相同 background(255);//设置背景颜色为白色 frameRate(10);//设置每秒10帧}

三、设置斐波那契螺旋的样式

function draw(){ ... stroke(0);//线条颜色为黑色 noFill();//无填充色 strokeWeight(5);//线条宽度为5 translate(windowWidth/2, windowHeight/2);//将坐标系移动到页面中央 ...}

四、开始绘制斐波那契螺旋

function draw(){ ... stroke(0); noFill(); strokeWeight(5); translate(windowWidth/2, windowHeight/2); ... for( var i = 0; i < 20; i ++){//绘制20段90度弧线 var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];//这是条件表达式,如果i等于0或1,那么a等于1;否则等于斐波那契数列前两项的和 Fibonacci.push(a);//将新得到的a加入斐波那契数列中 arc(0,0,a * 2,a * 2,0,PI / 2);//绘制圆心在(0,0)直径为2*a度数为90度的弧形 /**********以下是为下一段弧线做准备************/ rotate(PI / 2);//将坐标系按顺时针旋转90度 translate(-Fibonacci[i-1],0); //将坐标系沿着X轴反向移动上一项的长度 } }

五、让斐波那契螺旋动起来

function draw(){ background(255);//将背景设置成白色,“遮盖”之前的绘图 stroke(0); noFill(); strokeWeight(5); translate(windowWidth/2, windowHeight/2); rotate(-PI / 6 * frameCount);//每帧旋转30度,frameCount表示当前已播放帧数 for( var i = 0; i < 20; i ++){ var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2]; Fibonacci.push(a); arc(0,0,a * 2,a * 2,0,PI / 2); rotate(PI / 2); translate(-Fibonacci[i-1],0); } }

完整代码

var Fibonacci = [];function setup(){ createCanvas(windowWidth, windowHeight); background(255); frameRate(10);}function draw(){ background(255); stroke(0); noFill(); strokeWeight(5); translate(windowWidth/2, windowHeight/2); rotate(-PI / 6 * frameCount); for( var i = 0; i < 20; i ++){ var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2]; Fibonacci.push(a); arc(0,0,a * 2,a * 2,0,PI / 2); rotate(PI / 2); translate(-Fibonacci[i-1],0); } }function windowResized(){ resizeCanvas(windowWidth, windowHeight);}

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

Vue.js中computed使用详解

js验证出生日期正则表达式

小编还为您整理了以下内容,可能对您也有帮助:

js如何做出小球动画


这次给大家带来js如何做出小球动画,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(x,height/2,20,20);
}二、反弹的小球
经过一段时间后,小球会移出屏幕。为了不让小球跑到屏幕之外,我们新增一个变量用来控制速度,并在小球离开屏幕时让速度反向。
代码如下:
var x=0;
var speed=2;

function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);
ellipse(x,height/2,20,20);
//width和height是关键词,分别是Canvas的宽和高
x+=speed;
if(x>width||x<0){
speed*=-1;
}进一步,我们可以用两个变量控制x、y方向的速度,实现小球在画布上弹射的功能。
代码如下:
var x=200;
var y=200;
var Vx=2;
var Vy=3;

function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);
ellipse(x,y,20,20);//width和height是关键词,分别是Canvas的宽和高
x+=Vx;
y+=Vy;
if(x>width||x<0){
Vx*=-1;
}
if(y>height||y<0){
Vy*=-1;
}
}相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
JS数据类型怎样转换

JS的隐性类型转换详解

在angular中$http服务需要如何使用

js如何做出小球动画


这次给大家带来js如何做出小球动画,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(x,height/2,20,20);
}二、反弹的小球
经过一段时间后,小球会移出屏幕。为了不让小球跑到屏幕之外,我们新增一个变量用来控制速度,并在小球离开屏幕时让速度反向。
代码如下:
var x=0;
var speed=2;

function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);
ellipse(x,height/2,20,20);
//width和height是关键词,分别是Canvas的宽和高
x+=speed;
if(x>width||x<0){
speed*=-1;
}进一步,我们可以用两个变量控制x、y方向的速度,实现小球在画布上弹射的功能。
代码如下:
var x=200;
var y=200;
var Vx=2;
var Vy=3;

function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);
ellipse(x,y,20,20);//width和height是关键词,分别是Canvas的宽和高
x+=Vx;
y+=Vy;
if(x>width||x<0){
Vx*=-1;
}
if(y>height||y<0){
Vy*=-1;
}
}相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
JS数据类型怎样转换

JS的隐性类型转换详解

在angular中$http服务需要如何使用

p5.js鼠标交互如何实现并使用

这次给大家带来p5.js鼠标交互如何实现并使用,p5.js鼠标交互实现并使用的注意事项有哪些,下面就是实战案例,一起来看一下。

一、鼠标交互常用关键词

p5.js提供了许多鼠标操作用的关键词与函数,常用的有:

mouseIsPressed:关键词,若鼠标按下则为true,反之为false

mouseButton:关键词,用来判断鼠标按下的是哪个键

案例如下:

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

if (mouseIsPressed) {

textAlign(CENTER);

textSize(30);

if (mouseButton == LEFT)

text("LEFT",200,height/2);

if (mouseButton == RIGHT)

text("RIGHT",200,height/2);

if (mouseButton == CENTER)

text("CENTER",200,height/2);

}

}当鼠标按下左、中、右键时,分别会在屏幕上显示“LEFT”、“CENTER”、“RIGHT"。

查看效果:

http://alpha.editor.p5js.org/full/BkEcwrdUb

二、鼠标交互常用函数

鼠标操作常用函数如下,还有:

mouseClicked():函数,鼠标点击时触发一次

mousePressed():函数,鼠标按下时触发一次

mouseReleased():函数,鼠标松开时触发一次

我们可以用这些函数控制何时在屏幕上显示图形,案例如下:

var showEllipse=false;

var showRect=false;

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

if (mouseIsPressed){

ellipse(50, height/2, 50, 50);

}

if(showEllipse){

ellipse(200, height/2, 50, 50);

}

if(showRect){

rectMode(CENTER);

rect(350,height/2,50,50);

}

}

function mouseClicked(){

showEllipse=!showEllipse;

}

function mousePressed(){

showRect=true;

}

function mouseReleased(){

showRect=false;

}查看效果:http://alpha.editor.p5js.org/full/BkHEY8OUZ

三、鼠标拖拽物体

灵活运用以上关键字和函数,可以做出许多功能,这里举一例,用鼠标拖拽物体。

代码如下:

var x=200;

var y=200

var r=50;

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

if(mouseIsPressed&&dist(mouseX,mouseY,x,y)<r){

x=mouseX;

y=mouseY;

}

ellipse(x,y,r,r);

}相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

vue+Echarts实现点击高亮(附代码)

echarts鼠标覆盖高亮显示节点关系数实现步骤

ppt素材动画-用ppt做动态图的方法步骤详解

ppt同一素材能不能同时使用多个动画?

可以。同一素材可以同时使用多个动画,但设置有方法,放映时有顺序。

一、设置多个动画的步骤是:

1、选择拟设置动画的对象。

2、在动画选项卡中设置第一个动画。

3、添加第二个动画时不能像前一个操作,而是要单击“添加动画”

,否则设置的动画将会被替代,以后每增加一个动画都需按“添加动画”来操作。

二、调整放映顺序方法是:

在右侧的“动画窗格”设置“动画顺序”:选择动画,在动画窗格下方单击上下箭头,调整完成后即可保存并放映了。

用ppt做动态图的方法步骤详解

在某些精美的PPT上面,PPT动态背景让PPT瞬间活了起来,怎么用ppt做动态图呢,我为你解怎么用ppt做动态图这个问题,希望对你有所帮助。

用ppt做动态图的方法

想要制作精美的PPT动态背景的话,你首先需要有一定的素材,包括一张图片作为PPT背景,例如下面我用一个蓝天大海为静态的背景图片做出一个动态效果,PPT如何设置背景图片:右击幻灯片→填充→图片或纹理填充→插入自“文件”→选择图片插入:

我制作的动态背景是要让蓝天大海的背景有船划过还有海鸟飞过,让PPT这张背景图片活起来,插入海鸟跟船只的图片,这里提醒最好插入的图片为背景透明的图片,让与原PPT背景素材融合得更好哦,点击“插入”的“图片”插入ppt背景素材:

现在来设置如何让我们的PPT背景动起来呢?先设置PPT原本的背景图片有动画效果,这里作为一张PPT背景图片,需要对PPT设置“切换效果”,点击菜单项“切换”的“切换方案”,选择一个“切换方案”里面的“切换方案”,例如“蜂巢”:

之前的切换效果只是让PPT背景图片出来,现在我们继续设置其他PPT背景素材的动态出现,例如,设置两个帆船从远到近划过来,点击帆船的图片,然后点击菜单项“动画”(幻灯片自定义动画)→“添加动画”→“进入”的“缩放效果”,设置帆船动画的开始时间为“与上一动画同时”,持续时间为5秒,然后预览下效果,是否效果从远到近出现呢?

紧接着来设置海鸟飞过海面的动画,点击海鸟的图片,同样点击“添加动画”→“动作路径”→“弧形”,这个时候“海鸟”的图片就有了一个弧形的动画路径:

完善海鸟飞的动画:点击海鸟图片弧形的动作路径红色剪头的一头,把弧形拉长到跨越整个PPT幻灯片,然后设置动画的“计时”的开始为“与上一动画同时”,持续时间同样为5秒:

现在海鸟跟帆船的动画都设置好了,你可以预览下效果啦,点击“动画”的“预览”按钮,因为我们设置了海鸟跟帆船的动画开始时间均为“与上一动画同时”,所以它们的ppt动画效果一起播放:

>>>下一页更多精彩“ppt插入动态图片的方法”

如何制作ppt动画

如何制作ppt动画

PPT动画制作第一步、

打开PPT,点击视图,然后点击任务窗格(或者使用快捷方式也可以),右侧便会出现相关操作选项,调用它的目的`是方便接下来的制作过程。

PPT动画制作第二步、

点击右侧的下拉框,选择幻灯片版式,点击内容版式,选在空白内容(当然也可以选在其他的样式)。

PPT动画制作第三步、

接着就要插入素材了,点击插入,点击图片按钮,点击来自文件,选在想要制作成动画的图片,要制作的是落叶动画,所以就选择插入枫叶图片。

PPT动画制作第四步、

然后选中插入的图片,右击,选择自定义动画,当然也可以直接在右边的面板中选择自定义动画选项,然后在点击图片,同样可以实现对图片的操作。

PPT动画制作第五

步、

接着便是关键的操作步骤了,选中图片后点击添加效果,然后点击动作路径,选择绘制自定义路径,选择自由曲线,这样就完成了一个简单的动画的制作,以同样的方式对另外一张图片进行处理。

PPT动画制作第六步、

为了使动画看起来比较有层次感,点击第二个路径,选在从上一项之后开始,这样两片枫叶就会先后掉落下来(如果想让枫叶同时飘落的话可以选择从上一项开始,这样就同时飘落了),枫叶飘落是一个很缓慢的过程,把速度降到最低。

PPT动画制作第七步、

然后点击播放按钮,就可以欣赏到制作的PPT动画了。

旭新科技网还为您提供以下相关内容希望对您有帮助:

p5.js鼠标交互如何实现并使用

一、鼠标交互常用关键词p5.js提供了许多鼠标操作用的关键词与函数,常用的有:mouseIsPressed:关键词,若鼠标按下则为true,反之为falsemouseButton:关键词,用来判断鼠标按下的是哪个键案例如下:function setup() { crea...

Top