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 相关文章推荐
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
基于vue.js实现购物车
Jan 15 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
浅谈react useEffect闭包的坑
Jun 08 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 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php二维数组排序详解
2013/11/06 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
laravel入门知识点整理
2020/09/15 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
python中函数总结之装饰器闭包详解
2016/06/12 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python2.7安装图文教程
2018/03/13 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
.NET是怎么支持多种语言的
2015/02/24 面试题
《曹刿论战》教学反思
2014/03/02 职场文书
乔迁之喜主持词
2014/03/27 职场文书
五四青年节的活动方案
2014/08/20 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
九寨沟导游词
2015/02/02 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python