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

一、跟随鼠标移动的小球

使用mouseX,mouseY可以创建一个跟随鼠标移动的小球。

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

}  

function draw() {
 background(220);
 ellipse(mouseX,mouseY,20,20);
} 

二、让小球更加平滑的移动——使用Easing

一般制作精良的UI界面都会用到平滑移动这一效果,也就是利用了名为“Easing”的方法。

实现思路是另外设置变量以进行位置的过渡,代码如下:

var x=0;
var y=0;
var targetX=0;
var targetY=0;
var easing=0.1;
function setup() {
 createCanvas(400, 400);
 x=mouseX;
 y=mouseY;
}  

function draw() {
 background(220);
 targetX=mouseX;
 targetY=mouseY;
 x+=(targetX-x)*easing;
 y+=(targetY-y)*easing;
 ellipse(x,y,20,20);
} 

easing的值越大,跟随的速度会越快。

最终效果:https://alpha.editor.p5js.org/full/Sy96bL-8b

三、按钮变色Easing

当然,不仅仅是在物体运动,一切涉及数值变化的都可以使用Easing来进行过渡。

以下代码是一个按钮,当鼠标移到上方时,会逐渐变色,也是用了Easing进行过渡。

var rectX=0;
var rectY=0;
var rectHeight=100*0.618;
var rectWidth=100;
var hoverR=255;
var hoverG=128;
var hoverB=128
var exitR=255;
var exitG=255;
var exitB=255;
var R=0;
var G=0;
var B=0;
var ease=0.1; 

function setup() {
 createCanvas(400, 400);
 rectX=width/2;
 rectY=height/2;
 R=exitR;
 G=exitG;
 B=exitB;
}  

function draw() {
 background(220);
 if(mouseX>=rectX-rectWidth/2 && mouseX<=rectX+rectWidth/2&&
   mouseY>=rectY-rectHeight/2 && mouseY<=rectY+rectHeight/2){
  R+=(hoverR-R)*ease;
  G+=(hoverG-G)*ease;
  B+=(hoverB-B)*ease;
 }else{
  R+=(exitR-R)*ease;
  G+=(exitG-G)*ease;
  B+=(exitB-B)*ease;
 }
 fill(R,G,B);
 rectMode(CENTER);
 rect(rectX,rectY,rectWidth,rectHeight,8);
} 

最终效果:http://alpha.editor.p5js.org/full/BJuEqvW8W

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

您可能感兴趣的文章:

  • p5.js入门教程之鼠标交互的示例
  • p5.js入门教程之小球动画示例代码
  • p5.js入门教程和基本形状绘制
  • p5.js入门教程(5) 键盘交互
(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入门教程之小球动画示例代码

    一.运动的小球 本节将用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入门教程之鼠标交互的示例

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

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

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

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

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

  • THREE.JS入门教程(1)THREE.JS使用前了解

    Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. 国外网站 aerotwist.com 有六篇较为简单的入门教程,我尝试着将其翻译过来,与大家分享. 我在一些实验项目中使用了Three.js,我发现它对快速上手浏览器3D编程确实很有帮助.通过Three.js,你不仅可以创建相机.物体.光线.材质等等,还可以选择

  • THREE.JS入门教程(3)着色器-下

    译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. .简介 这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程. 上一篇结束的时候,我们在屏幕中央画了一个好看的粉红色的球体.现在我要开始创建一些更加有意思的东西了. 在这一篇教程中,我们会先花点时间

  • 适用于javascript开发者的Processing.js入门教程

    这个入门指导是为javascript开发者写的.读这个文档之前,你最好掌握javascript和web开发编程,并还会非常基本的 Processing 知识. 目录: 为没有耐心看长篇大论的人准备:          如果你很着急入门,那么你就需要知道以下几点:              1.Processing.js 把 Processing 代码转变成能够在浏览器端运行的javascript代码,实质是通过<canvas>标签来实现绘图的:              2.为了使用它,你的首

  • node.js入门教程迷你书、node.js入门web应用开发完全示例

    本书状态 你正在阅读的已经是本书的最终版.因此,只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时,才会进行更新. 本书中的代码案例都在Node.js 0.6.11版本中测试过,可以正确工作. 读者对象 本书最适合与我有相似技术背景的读者: 至少对一门诸如Ruby.Python.PHP或者Java这样面向对象的语言有一定的经验:对JavaScript处于初学阶段,并且完全是一个Node.js的新手. 这里指的适合对其他编程语言有一定经验的开发者,意思是说,本书不会对诸如数据类型

随机推荐