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


Posted in Javascript onMarch 15, 2018

一、运动的小球

本节将用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; 
 } 
}

最终效果:https://alpha.editor.p5js.org/full/Bya02GDBb

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

Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
js中的this关键字详解
Sep 25 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 #Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 #Javascript
Angularjs Promise实例详解
Mar 15 #Javascript
p5.js入门教程和基本形状绘制
Mar 15 #Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 #Javascript
vue之浏览器存储方法封装实例
Mar 15 #Javascript
vue实现提示保存后退出的方法
Mar 15 #Javascript
You might like
PHP 编写的 25个游戏脚本
2009/05/11 PHP
来自phpguru得Php Cache类源码
2010/04/15 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
JavaScript版代码高亮
2006/06/26 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
python 异常处理总结
2016/10/18 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
租房协议书范文
2014/08/20 职场文书
改革共识倡议书
2014/08/29 职场文书
公司借款担保书
2015/09/22 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
如何在C++中调用Python
2021/05/21 Python
MySQL创建管理子分区
2022/04/13 MySQL
正则表达式基础与常用验证表达式
2022/06/16 Javascript