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语言结构小记(一)
Sep 10 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
微信小程序实现下拉框功能
Jul 16 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
实用函数9
2007/11/08 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
实例详解vue中的$root和$parent
2019/04/29 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
带你了解python装饰器
2017/06/15 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
详解pandas赋值失败问题解决
2020/11/29 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
黄金酒广告词
2014/03/21 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
授权委托书
2015/01/28 职场文书
超强台风观后感
2015/06/09 职场文书
感恩父母主题班会
2015/08/12 职场文书
创业计划书之面包店
2019/09/17 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang