집 > 기사 > 웹 프론트엔드 > p5.js가 불꽃놀이를 꽃피우는 애니메이션을 만듭니다.

p5.js가 불꽃놀이를 꽃피우는 애니메이션을 만듭니다.

php中世界最好的语言원래의: 2018-06-14 15:18:502616검색

이번에는 p5.js로 불꽃이 피는 애니메이션을 만드는 방법을 알려드리겠습니다. 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 < fireworks.length; i++) {
  fireworks[i].display();
  fireworks[i].update();
  if (fireworks[i].needRemove()) {
   fireworks.splice(i, 1);
  }
 }
}

불꽃 효과

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 < 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发烟花里各个点的位置计算
  firePosition[i] = p5.Vector.mult(firePosition[i], 1.12);
 }
 //调整烟花随机颜色，使其更亮丽
 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); //各个小点（发光源遮罩效果）
   image(img, 0, 0);
   pop();
   firePosition[i] = p5.Vector.mult(firePosition[i], 1.015); //更新小点（发光源）扩散位置
  } 
 }
 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;
  }
 }
}

임의의 광원 이미지 생성

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() { //每事件添加一发烟花
 fireworks.push(new Fireworks(80)); //80为烟花初始半径
}
function touchStarted() { //每事件添加一发烟花
 fireworks.push(new Fireworks(80));
 return false;
}

이 글의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. more 흥미진진한 PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!