国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

用p5.js制作煙花特效的示例代碼_javascript技巧

來源:懂視網(wǎng) 責(zé)編:小OO 時間:2020-11-27 19:49:50
文檔

用p5.js制作煙花特效的示例代碼_javascript技巧

前言;之前看過一篇文章,使用processing制作煙花特效。效果如下:fireworks 網(wǎng)上調(diào)查了一圈了,發(fā)現(xiàn)processing是一個互動編程軟件,java語言發(fā)展而來。而且動畫效果是跑在processing專門的模擬器上。不過好在也有對應(yīng)的web擴(kuò)展語言,有processing.js和p5.js。processing.js在github上已經(jīng)好幾年沒有人維護(hù)了,一些processing的特性支持不了。為此踩了不少坑,本文就集中講解如何用p5.js寫煙花特效。代碼講解;processing風(fēng)格。
推薦度:
導(dǎo)讀前言;之前看過一篇文章,使用processing制作煙花特效。效果如下:fireworks 網(wǎng)上調(diào)查了一圈了,發(fā)現(xiàn)processing是一個互動編程軟件,java語言發(fā)展而來。而且動畫效果是跑在processing專門的模擬器上。不過好在也有對應(yīng)的web擴(kuò)展語言,有processing.js和p5.js。processing.js在github上已經(jīng)好幾年沒有人維護(hù)了,一些processing的特性支持不了。為此踩了不少坑,本文就集中講解如何用p5.js寫煙花特效。代碼講解;processing風(fēng)格。
本篇文章主要介紹了用p5.js制作煙花特效的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

前言

之前看過一篇文章,使用processing制作煙花特效。效果如下

fireworks 網(wǎng)上調(diào)查了一圈了,發(fā)現(xiàn)processing是一個互動編程軟件,java語言發(fā)展而來。而且動畫效果是跑在processing專門的模擬器上。 不過好在也有對應(yīng)的web擴(kuò)展語言,有processing.js和p5.js。 processing.js在github上已經(jīng)好幾年沒有人維護(hù)了,一些processing的特性支持不了。為此踩了不少坑, 本文就集中講解如何用p5.js寫煙花特效。

代碼講解

processing風(fēng)格

function setup() { //processing初始化設(shè)置
 createCanvas(window.innerWidth, window.innerHeight);
 frameRate(50);
 imageMode(CENTER);
}
function draw() { //循環(huán)執(zhí)行,達(dá)成畫面渲染效果
 background(0, 0, 40);
 for (var i = 0; i < fireworks.length; i++) {
 fireworks[i].display();
 fireworks[i].update();
 if (fireworks[i].needRemove()) {
 fireworks.splice(i, 1);
 }
 }
}

煙花效果

function Fireworks(radius) {
 var num = 512; //一發(fā)煙花里,有多少個點 (比較吃機(jī)器)
 var centerPosition = new p5.Vector(random(width / 8, width * 7 / 8), random(height / 2, height * 4 / 5), random(-100, 100)); //煙花的中心位置
 var velocity = new p5.Vector(0, -22, 0);
 var accel = new p5.Vector(0, 0.4, 0);
 var img;
 var firePosition = [];
 var cosTheta;
 var sinTheta;
 var phi;
 var colorChange = random(0, 5);
 for (var i = 0; i < num; i++) {
 cosTheta = random(0, 1) * 2 - 1;
 sinTheta = sqrt(1 - cosTheta * cosTheta);
 phi = random(0, 1) * 2 * PI;
 firePosition[i] = new p5.Vector(radius * sinTheta * cos(phi), radius * sinTheta * sin(phi), radius * cosTheta); //1發(fā)煙花里各個點的位置計算
 firePosition[i] = p5.Vector.mult(firePosition[i], 1.12);
 }
 //調(diào)整煙花隨機(jī)顏色,使其更亮麗
 if(colorChange>=3.8){
 img=createLight(0.9,random(0.2,0.5),random(0.2,0.5));
 }else if(colorChange>3.2){
 img=createLight(random(0.2,0.5),0.9,random(0.2,0.5));
 }else if(colorChange>2){
 img=createLight(random(0.2,0.5),random(0.2,0.5),0.9);
 } else {
 img=createLight(random(0.5,0.8),random(0.5,0.8),random(0.5,0.8));
 }
 this.display = function () {
 for (var i = 0; i < num; i++) {
 push();
 translate(centerPosition.x, centerPosition.y, centerPosition.z);
 translate(firePosition[i].x, firePosition[i].y, firePosition[i].z);
 blendMode(ADD); //各個小點(發(fā)光源遮罩效果)
 image(img, 0, 0);
 pop();
 firePosition[i] = p5.Vector.mult(firePosition[i], 1.015); //更新小點(發(fā)光源)擴(kuò)散位置
 } 
 }
 this.update = function () { //模擬重力加速度
 radius = dist(0, 0, 0, firePosition[0].x, firePosition[0].y, firePosition[0].z);
 centerPosition.add(velocity);
 velocity.add(accel);
 }
 this.needRemove = function () {
 if (centerPosition.y - radius > height) {
 return true;
 } else {
 return false;
 }
 }
}

隨機(jī)發(fā)光源圖片生成

function createLight(rPower, gPower, bPower) {
 var side = 64;
 var center = side / 2.0;
 var img = createImage(side, side);
 img.loadPixels();
 for (var y = 0; y < side; y++) {
 for (var x = 0; x < side; x++) {
 var distance = (sq(center - x) + sq(center - y)) / 10.0;
 var r = int((255 * rPower) / distance);
 var g = int((255 * gPower) / distance);
 var b = int((255 * bPower) / distance);
 // img.pixels[x + y * side] = color(r, g, b);
 img.set(y, x, color(r, g, b));
 }
 }
 img.updatePixels();
 return img;
}

接收鍵盤和屏幕觸碰事件

function keyPressed() { //每事件添加一發(fā)煙花
 fireworks.push(new Fireworks(80)); //80為煙花初始半徑
}
function touchStarted() { //每事件添加一發(fā)煙花
 fireworks.push(new Fireworks(80));
 return false;
}

相信看了本文案例你已經(jīng)掌握了方法,更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章!

推薦閱讀:

模糊框內(nèi)使用WebUploader步驟詳解

Vue.js里computed使用案例詳解

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

用p5.js制作煙花特效的示例代碼_javascript技巧

前言;之前看過一篇文章,使用processing制作煙花特效。效果如下:fireworks 網(wǎng)上調(diào)查了一圈了,發(fā)現(xiàn)processing是一個互動編程軟件,java語言發(fā)展而來。而且動畫效果是跑在processing專門的模擬器上。不過好在也有對應(yīng)的web擴(kuò)展語言,有processing.js和p5.js。processing.js在github上已經(jīng)好幾年沒有人維護(hù)了,一些processing的特性支持不了。為此踩了不少坑,本文就集中講解如何用p5.js寫煙花特效。代碼講解;processing風(fēng)格。
推薦度:
標(biāo)簽: 煙花 js 實例
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产区免费在线观看 | 国产成人高清一区二区私人 | 精品久久久久久久中文字幕 | 一级一级特黄女人精品毛片视频 | 国产精品资源网站在线观看 | 久久久久88色偷偷免费 | 久久久网久久久久合久久久久 | 国产精品成人一区二区 | 最新偷窥盗摄视频在线 | 亚洲a∨精品一区二区三区下载 | 免费视频二区 | 色精品一区二区三区 | 色综合91久久精品中文字幕 | 91精品一区二区三区在线 | 国产va精品免费观看 | 久久伊人一区二区三区四区 | 成人精品视频在线观看完整版 | 91热成人精品国产免费 | 亚洲国产欧美另类 | 日韩在线无 | 中文字幕日韩精品有码视频 | 精品日韩二区三区精品视频 | 欧美日韩亚洲高清不卡一区二区三区 | 日韩美女一区二区三区 | 欧美一区二区三区网站 | 欧美啊v在线观看 | 欧美一区二区日韩一区二区 | 欧美精品在线免费观看 | 黑人一区二区三区中文字幕 | 夜夜操综合 | 色综合色狠狠天天综合色 | 国模冰冰炮交图150 国模吧国模吧一二区 | 国产成人+综合亚洲+天堂 | 全免费一级午夜毛片 | 国产精品亚洲片在线观看不卡 | 国产一区二区日韩欧美在线 | 亚洲视频一区二区三区 | 日韩欧美91 | 欧美日韩色 | 波多野结衣在线免费观看 | 久久成人国产精品免费 |