PK Creative празднует Китайский Новый год. Я участвую в "Творческом конкурсе Весеннего фестиваля". Подробности см.:Творческий конкурс "Праздник весны"

предисловие

Скоро Новый год

Красивым фейерверком желаюxdmС Новым Годом 🎉🎉🎉

Предварительный просмотр эффекта

pcконец

мобильный

ласки

праздник фейерверков

Адрес онлайн-просмотра

Этапы реализации

Конкретные шаги реализации следующие:

Создать холст

setupа такжеdrawдаp5.jsДве основные функции этогоcreateCanvasразмер, используемый для создания холста,backgroundустановить цвет фона холста

function setup() {
    createCanvas(1303 / 2, 734 / 2)
}
function draw() {
    background(50);
}

установлен в1303/2а также734/2, для того, чтобы сделать скриншот, он также отображается в Наггетсах, которые будут изменены позже

частицы фейерверка краски

Учитывая, что их будет много, передайте функцию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)
    }
}

использовать здесьcreateVectorсозданный3вектор p5, содержащий величину и направлениеpos,vel,acc, можно понимать как силу, которая будет использована позже, а потом есть функция обновленияupdate, и функция отображенияshow

Затем измените содержимое основной функции, прежде всегоsetup

function setup() {
    createCanvas(1303 / 2, 734 / 2)
    stroke(255)
    strokeWeight(4)
    firework = new Particle(200, 150)
}

пройти черезstrokeУстановите белый цвет с помощьюstrokeWeightУстановите размер частиц на 4, затем вdraw

function draw() {
    background(50);
    firework.update()
    firework.show()
}

передача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, установите гравитацию в функции настройки

gravity = createVector(0, 0.2)

createVector(0, 0.2)Это означает нисходящую гравитацию.Чем больше значение позади, тем больше гравитационное поле.

Затем нам нужноdrawВ функцию добавляем гравитационное поле

firework.applyForce(gravity)

Конечно, необходимоParticle, ДобавитьapplyForceфункция, фактическая добавленная операция

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()
    }
}

Результат выглядит следующим образом

Введите случайные факторы, чтобы изменить плотность

Приведенный выше дисплей явно слишком плотный, мы можем изменитьdrawсерединаfireworks.push(new Firework()),изменился на

if(random(1)<0.1){
    fireworks.push(new Firework())
}   

Здесь, введя случайное фактор, его можно легко модифицировать.

Эффект следующий

Отрегулируйте быстро, медленно, высоко, низко

На самом деле нам нужно только изменить величину силы, мы можем использоватьrandom

Итак, мы модифицируемParticleсерединаthis.velдляcreateVector(0, random(-12,-8))

Результат выглядит следующим образом

Заставьте частицы фейерверка исчезнуть, когда они достигнут своих вершин

На самом деле, когдаyКогда нет усилия на валу, очистите егоfirework

как проверитьyА сила вала?

Ответ черезthis.firework.vel.y >= 0

Так изменитьFirework:

function Firework() {
    this.firework = new Particle(random(width), height)
    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.exploded = false
    this.particles = []
    this.update = function () {
        if (!this.exploded) {
            this.firework.applyForce(gravity)
            this.firework.update()
            if (this.firework.vel.y >= 0) {
                this.exploded = true
                this.explode()
            }
        }
        for (let i = 0; i < this.particles.length; i++) {
            this.particles[i].applyForce(gravity)
            this.particles[i].update()
        }

    }
    this.explode = function () {
        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 (!this.exploded) {
            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)
    }
}

Эффект следующий:

Показать меньше фейерверков

Это достигается за счет корректировки коэффициентов, чтобы показывать меньше фейерверков.

мы будемdrawв функции

if(random(1)<0.1){
    fireworks.push(new Firework())
}    

изменился на:

if(random(1)<0.02){
    fireworks.push(new Firework())
}    

Это меньше

Эффект следующий

Исправлена ​​проблема, из-за которой фейерверки были слишком разбросаны.

прибытьParticleв, найтиupdateметод, добавить

if(!this.firework){
    this.vel.mult(0.85)
}

можно понимать как,multЧем больше значение, тем больше сила, тем сильнее взрыв.

Эффект следующий

Достигнут эффект затухания

После рассеивания он должен медленно затухать и исчезать.

На самом деле, он в основном вводит переменнуюlifespan, сделай из255начать уменьшаться, черезstroke(255,this.lifespan)исчезать

Следующий код

function Particle(x, y, firework) {
    this.pos = createVector(x, y)
    this.firework = firework
    this.lifespan = 255
    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 () {
        if(!this.firework){
            this.vel.mult(0.85)
            this.lifespan -= 4
        }
        this.vel.add(this.acc)
        this.pos.add(this.vel)
        this.acc.mult(0)
    }
    this.show = function () {
        if (!this.firework) {
            strokeWeight(2)
            stroke(255,this.lifespan)
        } else {
            strokeWeight(4)
            stroke(255)
        }
        point(this.pos.x, this.pos.y)
    }
}

Эффект следующий

Расширить диапазон взрывных работ

или путем регулировкиmultЧисленная реализация

Particleсерединаthis.vel.mult(random(1, 6))изменился наthis.vel.mult(random(2, 10))

this.vel.mult(0.85)изменился наthis.vel.mult(0.9)

Эффект следующий:

Исчезающие частицы фейерверка необходимо удалить

Убрать исчезающие частицы фейерверка, собственно, из массиваparticlesЕго можно вырезать из нативного массива jsspliceреализация метода

Итак, вFireworkизменено вupdateсерединаforцикл

for (var i = this.particles.length - 1; i >= 0; i--) {
    this.particles[i].applyForce(gravity)
    this.particles[i].update()
    if (this.particles[i].done()) {
        this.particles.splice(i, 1)
    }
}

Конечно, нам нужно создатьParticleдобавлено вdoneметод

this.done = function () {
    if (this.lifespan < 0) {
        return true
    } else {
        return false
    }
}

Потом ещеFireworkтакже добавитьdone

this.done = function(){
    if(this.exploded && this.particles.length === 0){
        return true
    }else{
        return false
    }
}

после этогоdrawиспользуется в

for (var i = fireworks.length - 1; i >= 0; i--) {
    fireworks[i].update()
    fireworks[i].show()
    if (fireworks[i].done) {
        fireworks.splice(i, 1)
    }
}

Эффект тот же, что и выше, разница в том, что мы удаляем невидимые частицы из массива.

Изменить цвет фона

существуетsetupпрошедшийbackgroundФункция меняет цвет фона на черный

background(0)

в то же времяdrawДобавить к

colorMode(RGB)
background(0, 0, 0, 25)

colorModeдля установки цветовой модели, кромеRGB, и вышеHSB;backgroundиз4параметр соответствуетrgba

Эффект следующий

Добавьте цвет фейерверка

В основном добавьте цвет к фейерверку, вы можете добавить случайные цвета со случайными числами, в основном вFireworkдобавить это

this.hu = random(255)

Помните, что есть несколько мест, которые зависят от изменений

После улучшения эффект следующий

Совместимость с ПК и мобильным телефоном

установить передcreateCanvas(1303 / 2, 734 / 2)Причина в том, что во-первых, нужно вырезать подходящее изображение для отображения на самородках, а во-вторых, сделать изображение не таким большим.

Теперь, чтобы адаптироваться к вертикальному экрану мобильного терминала, мы устанавливаем ширину и высоту черновика в ширину и высоту области просмотра.

createCanvas(window.innerWidth, window.innerHeight)

Во-вторых, поскольку высота вертикального экрана должна быть относительно большой, нам необходимо соответствующим образом отрегулировать усилие, направленное вверх, и отдельно отрегулировать усилие на подвижной стороне и стороне полотна.

Итак, мы находимParticle,Исправлятьif (this.firework){xx}для

if (this.firework) {
    if(window.innerHeight<640){
        this.vel = createVector(0, random(-16, -13))
    }else{
        this.vel = createVector(0, random(-17, -15))
    }
}

Вышеуказанные значения скорректированы, я думаю, что эффект лучше, не слишком высоко, высота более концентрированная

Эффект страницы следующий

Проверьте мобильный эффект

Это почти то же самое Конечно, мы можем добиться множества различных эффектов, регулируя соответствующие значения, такие как

Увеличьте гравитационное поле

gravity = createVector(0, 0.3)

шутить

if (random(1) < 0.01) {
    fireworks.push(new Firework())
}

Праздник фейерверков прекрасен

if (random(1) < 0.5) {
    fireworks.push(new Firework())
}

Фактически, вы также можете добавлять звуки в зависимости от цвета, толщины, скорости, направления и даже изменения частиц.3dЭффекты и т. д. делают эффекты более забавными

Эпилог

Вышеизложенное - это все содержание этой статьи, добро пожаловать в лайк и поддержку~

Наконец желаю вам

В новом году удачи тебе, будь любима многими, смейся почаще и всего наилучшего

С Новым Годом~🎉🎉🎉