Sample Code for creating fireworks with p5.js and p5.js fireworks

Sample Code for creating fireworks with p5.js and p5.js fireworks

Preface

I have read an article about how to use processing to create special fireworks. The effect is as follows:

Fireworks has made a survey on the Internet and found that processing is an interactive programming software, developed by java. In addition, the animation effect is run on the processing specialized simulator. Fortunately, there are also corresponding web extension languages, including processing. js and p5.js. Processing. js has not been maintained on github for several years, and some processing features cannot be supported. This article focuses on how to use p5.js to write fireworks.

Code Description

Processing Style

Function setup () {// processing initialization settings createCanvas (window. innerWidth, window. innerHeight); frameRate (50); imageMode (CENTER);} function draw () {// executes cyclically to achieve the background (0, 0, 40) of the screen rendering effect ); for (var I = 0; I <fireworks. length; I ++) {fireworks [I]. display (); fireworks [I]. update (); if (fireworks [I]. needRemove () {fireworks. splice (I, 1 );}}}

Fireworks

Function Fireworks (radius) {var num = 512; // number of points in a Fireworks (compared to machines) 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 ); // calculate the position of each vertex in 1 fireworks. firePosition [I] = p5.Vector. mult (firePosition [I], 1.12);} // adjust the random color of the fireworks to make it brighter 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); // each small dot (light source mask effect) image (img, 0, 0); pop (); firePosition [I] = p5.Vector. mult (firePosition [I], 1.015); // update the diffusion position of a small dot (light source)} this. update = function () {// simulate gravity acceleration 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 ;}}}

Random light source Image Generation

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;}

Receives keyboard and screen touch events

Function keyPressed () {// Add a fireworks set for each event. push (new Fireworks (80); // 80 is the initial fireworks radius} function touchStarted () {// Add a Fireworks set for each event. push (new Fireworks (80); return false ;}

Github

Https://github.com/cangyan/TAV/tree/master/00003_P5_FIREWORKS

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.