如何将两个javascript动画合二为一？

Question

我正在制作两个 JavaScript 动画，它们可以相互分离。 如何将两个动画组合到一个网页中，以便它们同时工作？我想不通。

这是我的代码：

JAVASCRIPT 设置和动画绘制 1

let snow = [];
let gravity;

function setup() {
  
  createCanvas(windowWidth, windowHeight);
  
  gravity = createVector(0, 0.02);
  for(let i = 0; i < 300; i++){
    let x = random(width*0.2, width*0.8);
    let y = random(200, height);
    snow.push(new Snowflake(x, y));
  }


   
  
}

function windowResized() {
  const css = getComputedStyle(canvas.parentElement),
        marginWidth  = round( float(css.marginLeft) + float(css.marginRight)  ),
        marginHeight = round( float(css.marginTop)  + float(css.marginBottom) ),
        w = windowWidth - marginWidth, h = windowHeight - marginHeight;

  resizeCanvas(w, h, true);
}


function draw() {
  
  c = color('hsla(160, 100%, 50%, 0.5)');
  background(c);
  
  
  for (john of snow){
    john.applyForce(gravity);
    john.update();
    john.render();
  }
  
}

JAVASCRIPT 动画 1

function getRandomSize(){
  
  let r = pow(random(0.5, 1), 5);
  return constrain(r*36, 2 , 36);
  
}


class Snowflake{

  constructor(sx, sy) {
    let x = sx || random(width*0.2, width*0.8);
    let y = sy || random(200, 300);
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector();
    
    this.r = getRandomSize();
    this.terminalV = this.r;
}

  applyForce(force){
    //Parallax Effect
    let f = force.copy();
    f.mult(this.r);
    
    this.acc.add(f);
}

  randomize(){
    let x = random(width*0.2, width*0.8);
    let y = random(200, 300);
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector();
    this.r = getRandomSize();
  
  }

  update(){
    this.vel.add(this.acc);
    this.vel.limit(this.r*0.1);
    
    if (this.vel.mag() < 1){
       this.vel.normalize(); 
    }
    
    this.pos.add(this.vel);
    this.acc.mult(0);
    
    if (this.pos.y > height + this.r){
      this.randomize();
    }
    
    
  }

  render() {
    stroke(255);
    strokeWeight(this.r);
    point(this.pos.x, this.pos.y);

}


}

class Poolone{

  constructor(x, y) {

    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    
    var radius = width/6;
    noStroke();
}



  randomize(){
    let x = random(width*0.2, width*0.8);
    let y = random(200, 300);
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector();
    this.r = getRandomSize();
  
  }

  update(){
    this.vel.add(this.acc);
    this.vel.limit(this.r*0.1);
    
    if (this.vel.mag() < 1){
       this.vel.normalize(); 
    }
    
    this.pos.add(this.vel);
    this.acc.mult(0);
    
    if (this.pos.y > height + this.r){
      this.randomize();
    }
    
    
  }

  render() {
    stroke(255);
    strokeWeight(this.r);
    point(this.pos.x, this.pos.y);

}


}

JAVASCRIPT 动画 2

var yoff = 0.0;


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function windowResized() {
  const css = getComputedStyle(canvas.parentElement),
        marginWidth  = round( float(css.marginLeft) + float(css.marginRight)  ),
        marginHeight = round( float(css.marginTop)  + float(css.marginBottom) ),
        w = windowWidth - marginWidth, h = windowHeight - marginHeight;

  resizeCanvas(w, h, true);
}


function draw() {
  c = color('hsla(160, 100%, 50%, 0.5)');
  background(c);

  translate(width/2, height/2);

  var radius = width/6;
  noStroke();

  beginShape();
  var xoff = 0;
  for (var a = 0; a < TWO_PI; a += 0.1) {
    var offset = map(noise(xoff, yoff), 0, 1, -40, 40);
    var r = radius + offset;
    var x = r * cos(a)*2;
    var y = r * sin(a)/2.4;
    vertex(x, y+(height/3.6));
    xoff += 0.1;
    //ellipse(x, y, 4, 4);
  }
  endShape();

  yoff += 0.01;
}

请帮我将这两个动画合二为一，使它们都作为一个网页工作。提前致谢。