p5.js_javascript 기술을 사용하여 불꽃놀이 특수 효과를 생성하기 위한 샘플 코드

이 글에서는 불꽃놀이 특수 효과를 만들기 위해 p5.js를 사용하기 위한 샘플 코드를 주로 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 살펴보겠습니다

머리말

전에 처리를 사용하여 불꽃놀이 특수 효과를 만드는 기사를 읽은 적이 있습니다. 효과는 다음과 같습니다

fireworks 온라인 조사를 마친 후 프로세싱은 Java 언어에서 개발된 대화형프로그래밍 소프트웨어라는 것을 알았습니다. 또한 애니메이션 효과는 처리를 위해 특수 시뮬레이터에서 실행됩니다. 다행히도processing.js 및 p5.js를 포함하여 해당 웹 확장 언어도 있습니다. processing.js는 수년 동안 github에서 유지 관리되지 않았으며 일부 처리 기능이 지원되지 않습니다. 나는 이를 위해 많은 함정을 겪었으므로 이 기사에서는 p5.js를 사용하여 불꽃놀이 특수 효과를 작성하는 방법을 설명하는 데 중점을 둘 것입니다.

코드 설명

처리 스타일

function setup() { //processing初始化设置
 createCanvas(window.innerWidth, window.innerHeight);
 frameRate(50);
 imageMode(CENTER);
}
function draw() { //循环执行，达成画面渲染效果
 background(0, 0, 40);
 for (var i = 0; i <p style="text-align: left;">불꽃 효과</p><pre class="brush:php;toolbar:false">function Fireworks(radius) {
 var num = 512; //一发烟花里，有多少个点 (比较吃机器)
 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 =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  height) {
   return true;
  } else {
   return false;
  }
 }
}

랜덤 광원 이미지 생성

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 <p style="text-align: left;">키보드 및 화면 터치 수신<a href="http://www.php.cn/js/js-jspopular-guide-event.html" target="_blank">event</a></p><pre class="brush:php;toolbar:false">function keyPressed() { //每事件添加一发烟花
 fireworks.push(new Fireworks(80)); //80为烟花初始半径
}
function touchStarted() { //每事件添加一发烟花
 fireworks.push(new Fireworks(80));
 return false;
}

이 케이스를 읽으신 후 방법을 익히셨을 거라 믿습니다. 기사 등 정말 흥미롭습니다. PHP 중국어 웹사이트의 다른 관련 기사에도 주목해 주세요!

추천 도서:

퍼지 박스에서 WebUploader를 사용하는 단계에 대한 자세한 설명

Vue.js의 계산된 사용 사례에 대한 자세한 설명

위 내용은 p5.js_javascript 기술을 사용하여 불꽃놀이 특수 효과를 생성하기 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!