最炫Python烟花代码全解析导语:
除⼣除⼣,就是除去烦脑,迎接新的希望!在这⾥⼩编先祝⼤家除⼣快乐,岁岁常欢笑,事事皆如意!
正⽂:
创建画布
setup和draw是p5.js的两个主函数,⾥头的createCanvas⽤于创建画布的⼤⼩,background来设置画布
的背景颜⾊function setup() {
createCanvas(1303 / 2, 734 / 2)
}
function draw() {
background(50);
}
画烟花粒⼦
考虑到会有很多,通过⼀个函数Particle来⽣成,代码如下
var firework;
function Particle(x, y) {
this.pos = createVector(x, y)
this.vel = createVector(0, 0)
this.acc = createVector(0, 0)
this.update = function () {
this.vel.add(this.acc)
this.pos.add(this.vel)
this.acc.mult(0)
}
this.show = function () {
point(this.pos.x, this.pos.y)
}
}
#调⽤firework.update()和firework.show()将烟花粒⼦展⽰出来function setup() {
createCanvas(1303 / 2, 734 / 2)
stroke(255)
strokeWeight(4)
firework = new Particle(200, 150)
}
function draw() {
background(50);
firework.update()
firework.show()
}
结果如下:
让烟花粒⼦随机出现在底部
修改setup中的firework,让它出现在底部的任意位置firework = new Particle(random(width), height)
这⾥的width和height表⽰的就是画布的宽和⾼
结果如下
让烟花粒⼦向上运动
只需要修改Particle中的this.vel即可
this.vel = createVector(0, -4)
createVector中第⼀个参数表⽰x轴的速率,正数为向右的速率,负为向左的速率;第⼆个参数表⽰y轴的速率,负为向上,正为向下效果如下
让粒⼦⽤重⼒效果,可以下向运动
⾸先在全局声明⼀个变量gravity,在setup函数中设置重⼒
gravity = createVector(0, 0.2)
firework.applyForce(gravity)
this.applyForce = function (force) {
this.acc.add(force)
}
效果如下
需要很多的烟花粒⼦
需要创建⼀个Firework函数
function Firework() {
this.firework = new Particle(random(width), height)
this.update = function () {
this.firework.applyForce(gravity)
this.firework.update()
}
this.show = function () {
this.firework.show();
}
}
#然后再draw中,通过for循环来显⽰很多的烟花粒⼦
function draw() {
background(50)
fireworks.push(new Firework())
for (var i = 0; i < fireworks.length; i++) {
fireworks[i].update()
fireworks[i].show()
}
}
结果如下
让烟花粒⼦上到⾃⾝顶点时消失
function Firework() {
this.firework = new Particle(random(width), height)
学python需要什么this.update = function () {
if (this.firework) {
this.firework.applyForce(gravity)
this.firework.update()
if (this.firework.vel.y >= 0) {
this.firework = null
}
}
}
this.show = function () {
if (this.firework) {
this.firework.show();
}
}
}
效果如下
消失的那⼀刻,让周围爆破
这⾥修改的地⽅会⽐较多,主要修改的地⽅是Firework:function Firework() {
this.firework = new Particle(random(width), height, true)
this.particles = []
this.update = function () {
if (!ploded) {
this.firework.applyForce(gravity)
this.firework.update()
if (this.firework.vel.y >= 0) {
}
}
for (let i = 0; i < this.particles.length; i++) {
this.particles[i].applyForce(gravity)
this.particles[i].update()
}
}
for (let i = 0; i < 100; i++) {
var p = new Particle(this.firework.pos.x, this.firework.pos.y) this.particles.push(p)
}
}
this.show = function () {
if (!ploded) {
this.firework.show();
}
for (let i = 0; i < this.particles.length; i++) {
this.particles[i].show()
}
}
}
结果如下
随机倍数爆发
可以修改Particle来完善以下上⾯的效果,修改后的代码为function Particle(x, y, firework) {
this.pos = createVector(x, y)
this.firework = firework
if (this.firework) {
this.vel = createVector(0, random(-12, -8))
} else {
this.vel = p5.Vector.random2D()
this.vel.mult(random(1, 6))
}
this.acc = createVector(0, 0)
this.applyForce = function (force) {
this.acc.add(force)
}
this.update = function () {
this.vel.add(this.acc)
this.pos.add(this.vel)
this.acc.mult(0)
}
this.show = function () {
point(this.pos.x, this.pos.y)
}
}
效果如下:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论